/* ==========================================================================
   AMIN APAC — dashboard.css
   The member workspace: login.html and dashboard.html.

   THIS IS THE BACK OF HOUSE, and it is deliberately a different room from the
   rest of the site. The public pages are editorial - 18px body, generous
   section rhythm, one idea per band. A workspace is the opposite job: the
   member is here to read numbers and change fields, so type comes down to 15px,
   the section scale is abandoned for a component scale, and density is the
   point rather than a compromise.

   What does NOT change is the token set. Every colour, radius, shadow and
   easing here comes from base.css. A back office drawn in its own palette is
   how a design system acquires a second design system.

   Additive: two pages, one sheet, two scripts, and one line on profile.html.
   Deleting the lot leaves the site exactly as it was.
   ========================================================================== */

/* ==========================================================================
   1. LOGIN
   A dark ground, because signing in is a threshold and the site's dark is what
   it uses for thresholds already - the map stage, the footer. One centred card,
   nothing else on the page. There is no nav here on purpose: a sign-in screen
   with an escape route in the chrome is a sign-in screen people leave.
   ========================================================================== */
.lg-body{
  min-height:100vh;
  /* Flex with margin:auto on the card, NOT place-items:center. Centred grid
     and flex items both clip their own overflow upward once the item is taller
     than the viewport - on a 900px-tall window the demo list runs long enough
     to put the logo and the email field above the top of the page, where they
     cannot be scrolled back to. margin:auto centres identically and degrades to
     top-aligned-and-scrollable instead of unreachable. */
  display:flex;
  padding:var(--s8) var(--s6);
  background:var(--ink);
  /* The longitude ramp, scrubbed almost to nothing. It is the site's one piece
     of geography-as-decoration and it belongs on the page that admits eleven
     agencies spread across it. At 14% it reads as a warmth in the corner
     rather than as a gradient anyone would name. */
  background-image:
    radial-gradient(120% 90% at 12% 0%, rgb(var(--plum-rgb) / .55) 0%, transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgb(144 79 255 / .14) 0%, transparent 55%);
}

.lg-card{
  width:100%;max-width:26rem;margin:auto;
  background:var(--white);
  border-radius:var(--r-lg);
  padding:var(--s10) var(--s8) var(--s8);
  box-shadow:var(--e-max);
}
.lg-mark{display:block;height:22px;width:auto;margin-bottom:var(--s8)}
.lg-h{font-size:26px;font-weight:500;line-height:32px;letter-spacing:-.01em;margin:0}
.lg-p{margin:var(--s3) 0 var(--s8);color:var(--gray);font-size:15px;line-height:23px}

.lg-form{display:flex;flex-direction:column;gap:var(--s5)}
/* .brief-row is borrowed wholesale from brief-form.css - the field language on
   this site is already written and a login is not the place to invent a second
   one. Only the width differs, and that comes from .lg-card. */
.lg-form .brief-row input{font-size:15px}
.lg-form .btn{width:100%;justify-content:center;margin-top:var(--s2)}

/* REGISTRATION, added with the member-only signup. Two additions only - the
   route between the two forms, and the line under the registration button that
   explains the missing password field. The forms themselves are .lg-form and
   .brief-row exactly as the sign-in is; a registration form that looked like a
   different product would be the wrong kind of different. */
.lg-alt{
  margin:var(--s6) 0 0;padding-top:var(--s5);
  border-top:1px solid var(--line);
  color:var(--gray);font-size:14px;line-height:21px;
}
.lg-alt .ac-linkbtn{font-size:14px;line-height:21px}
.lg-fine{
  margin:calc(var(--s2) * -1) 0 0;
  color:var(--ash);font-size:13px;line-height:19px;
}
/* The way out of the error, on its own line. Inline it wrapped into the middle
   of the sentence that had just explained the problem, which made the one
   actionable thing in the box the hardest part of it to find. */
.lg-err-act{display:block;margin-top:var(--s3)}

.lg-err{
  margin:0;padding:var(--s3) var(--s4);
  background:color-mix(in srgb, var(--red) 8%, var(--white));
  border-left:2px solid var(--red);
  color:var(--red);font-size:14px;line-height:21px;
}
.lg-err[hidden]{display:none}


/* ==========================================================================
   2. THE SHELL LIVES IN workspace.css NOW
   This sheet opened with a dark rail, a sticky yellow band and its own body
   ground - a back office, deliberately a different room from the rest of the
   site. That was overruled on 2026-08-28: signing in should leave you on the
   AMIN website, and the account pages should look like it.

   What was here - .dash-flag, .dash-body, .dash-shell, .dash-rail, .dash-nav,
   .dash-rail-foot, .dash-main - is gone, replaced by css/workspace.css, which
   builds the same three jobs out of the site's own masthead, wrap and section
   language. .dash-h, .dash-deck, .dash-sub and .dash-panel moved there too,
   because they are shell rather than data.

   EVERYTHING BELOW STAYS, and that is the point of the split: a stat tile, a
   ranked bar and a lead table are dense by nature and were never the problem.
   They are the same components; they now sit inside an AMIN page instead of
   inside an app.
   ========================================================================== */

/* ==========================================================================
   4. INTEREST
   Counts, and only counts. Nothing on this panel claims to know a name, and
   the copy says so - the whole design problem with "see who clicked" is that
   the honest answer is two different products, and putting them on two panels
   is how the screen tells the truth without a paragraph of explanation.
   ========================================================================== */
.dash-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:var(--s4);
}
.dash-stat{
  padding:var(--s5);
  background:var(--white);          /* panels invert on --surface-alt */
  border-radius:var(--r-md);
  box-shadow:var(--e-subtle);
}
.dash-stat dt{
  margin:0;color:var(--ash);
  font-size:12px;line-height:18px;letter-spacing:.04em;text-transform:uppercase;
}
/* clamp(20,1.9vw,26) is what .stats-4 and .stats-words already use for a stat
   figure in base.css - reused rather than reinvented. It was a flat 32px, which
   was both off-scale and LARGER than the .dash-h above it, so a view count
   outranked the heading of the panel it sat in. The descent now reads
   42 (agency) > 30 (panel) > 26 (figure). */
.dash-stat dd{
  margin:var(--s2) 0 0;
  font-size:clamp(20px,1.9vw,26px);font-weight:500;line-height:1.2;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.dash-delta{display:block;margin-top:2px;font-size:13px;line-height:20px;font-weight:400}
.dash-delta.up{color:#1B7F4C}
.dash-delta.down{color:var(--red)}
.dash-delta.flat{color:var(--gray)}

.dash-sparkwrap{
  margin-top:var(--s4);padding:var(--s6);
  background:var(--white);border-radius:var(--r-md);box-shadow:var(--e-subtle);
}
.dash-spark{display:block;width:100%;height:96px}
.dash-spark .fill{fill:var(--purple);opacity:.10}
.dash-spark .line{fill:none;stroke:var(--purple);stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.dash-spark-x{
  display:flex;justify-content:space-between;margin-top:var(--s2);
  color:var(--ash);font-size:12px;line-height:18px;
}

/* --- labelled bars -------------------------------------------------------
   Used for both "where they are" and "how they arrived". A bar rather than a
   pie because both lists are ranked and the question is always "which is
   biggest", never "what share of the whole". */
/* A panel, like everything else on this screen. The bars were drawn straight
   onto the grey at first and were the only content on the page not sitting on
   white - which broke base.css's standing rule that a panel on --surface-alt
   takes --white, and read as two unrelated screens stacked. */
/* --s5 rows inside --s7 padding. It was --s4 (16px) rows inside --s6 (24px),
   which put a 21px row 16px from its neighbour and 24px from the card edge -
   close enough that the six rows read as one block of texture rather than six
   ranked entries, which is the entire point of the panel. The gap between rows
   now clears the row's own cap-height, and the padding stays a step above the
   gap so the outer edge still reads as looser than the inner rhythm. */
.dash-bars{
  display:grid;gap:var(--s5);margin:0;
  padding:var(--s7);
  background:var(--white);border-radius:var(--r-md);box-shadow:var(--e-subtle);
}
.dash-bar{display:grid;grid-template-columns:minmax(0,13rem) 1fr auto;gap:var(--s4);align-items:center}
.dash-bar dt{
  margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:14px;line-height:21px;
}
.dash-bar-track{height:8px;background:var(--mist);border-radius:var(--r-pill);overflow:hidden}
.dash-bar-fill{
  display:block;height:100%;
  background:var(--ac,var(--purple));border-radius:var(--r-pill);
  transform-origin:left center;
}
.dash-bar dd{
  margin:0;min-width:3rem;text-align:right;
  font-family:var(--mono);font-size:13px;line-height:20px;color:var(--gray);
  font-variant-numeric:tabular-nums;
}

.dash-work{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:var(--s4)}
.dash-work-item{
  margin:0;background:var(--white);border-radius:var(--r-md);
  overflow:hidden;box-shadow:var(--e-subtle);
}
.dash-work-item img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
.dash-work-item figcaption{padding:var(--s3) var(--s4) var(--s4);font-size:13px;line-height:20px;color:var(--gray)}
.dash-work-item b{display:block;color:var(--slate);font-family:var(--mono);font-size:15px;font-weight:500}

/* ==========================================================================
   5. LEADS
   A table, and unapologetically. This is a working list a marketing manager
   scans down a column of, and every card-based alternative trades that scan
   for decoration. The email is the payload, so it is the only link in the row.
   ========================================================================== */
.dash-table-wrap{
  background:var(--white);border-radius:var(--r-md);
  box-shadow:var(--e-subtle);overflow-x:auto;
}
.dash-table{width:100%;border-collapse:collapse;font-size:14px;line-height:21px}
.dash-table th{
  padding:var(--s3);
  border-bottom:1px solid var(--line);
  color:var(--ash);font-size:11px;font-weight:600;line-height:16px;
  letter-spacing:.06em;text-transform:uppercase;text-align:left;white-space:nowrap;
}
.dash-table td{padding:var(--s4) var(--s3);border-bottom:1px solid var(--line);vertical-align:top}
.dash-table tr:last-child td{border-bottom:0}
.dash-table tbody tr:hover{background:var(--offwhite)}
.dash-lead-who b{display:block;font-weight:500;color:var(--slate)}
.dash-lead-who span{display:block;color:var(--gray);font-size:13px;line-height:20px}
/* Never broken mid-address. break-all was the obvious answer and it rendered
   "daniel.soren / sen@example. / com" over three lines, which is unreadable and,
   worse, unscannable - the column exists to be run down with the eye. The
   address stays on one line and the table scrolls inside .dash-table-wrap
   instead, which is what that overflow-x is for. */
.dash-lead-mail{
  font-family:var(--mono);font-size:13px;color:var(--purple);
  text-decoration:none;white-space:nowrap;
}
.dash-table td:first-child{min-width:12.5rem}
.dash-table th:nth-child(3),
.dash-table td:nth-child(3){white-space:nowrap}
.dash-lead-mail:hover{color:var(--purple-deep);text-decoration:underline}
/* Status over date, the same two-line shape .dash-lead-who uses at the other
   end of the row, so the table has one idea about how a cell holds two facts
   rather than two. */
.dash-when{white-space:nowrap}
.dash-when b{display:block;font-size:14px;font-weight:400;color:var(--gray)}
.dash-when b[data-s="New"]{color:var(--purple-deep);font-weight:600}
.dash-when span{display:block;color:var(--ash);font-size:13px;line-height:20px}

/* Source chips. Coloured by capture point rather than by discipline - the six
   discipline hues in base.css mean a discipline and borrowing them here would
   make one colour say two things, which that token block explicitly forbids. */
.dash-src{
  display:inline-block;padding:3px 9px;border-radius:var(--r-pill);
  font-size:12px;line-height:18px;white-space:nowrap;
  background:var(--mist);color:var(--gray);
}
.dash-src[data-src="brief"]{background:var(--pale);color:var(--plum)}
.dash-src[data-src="news"]{background:color-mix(in srgb,var(--green) 20%,var(--white));color:#155F38}
.dash-src[data-src="tools"]{background:color-mix(in srgb,var(--d-media) 26%,var(--white));color:#7A5300}
/* The question route on contact.html. --mist like "profile" and unlike the
   three above it, and that is the grouping working rather than running out of
   colour: a tinted chip means an enquiry that reached a member agency, and a
   plain one means it did not. A question stops at AMIN. */
.dash-src[data-src="ask"]{background:var(--mist);color:var(--gray)}
.dash-src[data-src="profile"]{background:var(--mist);color:var(--gray)}

.

.dash-empty{
  padding:var(--s10) var(--s6);text-align:center;
  color:var(--gray);font-size:15px;
}

/* ==========================================================================
   6. THE EDITOR
   Fields borrowed from brief-form.css, laid out in a single column at a
   readable measure. Two-column forms test better on the demo and worse in use:
   the fields here are prose - a tagline, three paragraphs about the agency -
   and prose in a 22rem column is prose nobody proofreads properly.
   ========================================================================== */
/* 40rem, matching .dash-panel-narrow. It was 44rem, which after the panel
   gained its own measure would have been a second, larger cap on the same form
   - inert, and exactly the kind of near-duplicate that gets "fixed" later by
   whoever finds it and wonders which one is doing the work. Kept rather than
   deleted so a .dash-editor outside a narrow panel still has a measure. */
.dash-editor{display:flex;flex-direction:column;gap:var(--s7);max-width:40rem}
.dash-editor .brief-row input,
.dash-editor .brief-row textarea{font-size:15px;line-height:23px}
.dash-editor .brief-row textarea{min-height:96px}
.dash-editor .brief-row label{font-size:14px}
.dash-field-note{margin:var(--s2) 0 0;color:var(--ash);font-size:13px;line-height:20px}
.dash-count-chars{font-family:var(--mono);font-variant-numeric:tabular-nums}
.dash-count-chars.over{color:var(--red);font-weight:600}

/* The save bar sticks to the bottom of the viewport once the form is longer
   than the screen, which it always is. A save button 900px below the field
   somebody just changed is a save button that does not get pressed. */
.dash-savebar{
  position:sticky;bottom:0;
  display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center;
  margin-top:var(--s6);padding:var(--s4) 0;
  background:linear-gradient(to top,var(--surface-alt) 72%,rgb(249 249 251 / 0));
}
.dash-saved{color:#1B7F4C;font-size:14px}
.dash-saved[hidden]{display:none}
.dash-dirty{color:var(--gray);font-size:14px}

/* ==========================================================================
   7. RESPONSIVE
   The rail unsticks and becomes a scrolling strip of tabs. A workspace on a
   phone is a real case here - "who enquired" is a thing checked between
   meetings - so the leads table is what the breakpoint is designed around.
   ========================================================================== */
@media (max-width:900px){
  .dash-bar{grid-template-columns:minmax(0,9rem) 1fr auto;gap:var(--s3)}
}
@media (max-width:560px){
  .dash-bar{grid-template-columns:1fr auto;gap:var(--s2) var(--s3)}
  .dash-bar-track{grid-column:1/-1;order:3}
  /* .dash-h was 24/30 here - a THIRD size for one heading, in a second sheet,
     and an inverted one: it is larger than the 22px the 760px breakpoint sets,
     so the heading would have GROWN as the screen narrowed. It never did,
     because workspace.css loads after this sheet and won at equal specificity.
     Dead code either way, and the kind that gets "fixed" into a real bug. */
  .lg-card{padding:var(--s8) var(--s6) var(--s6)}
}

/* prefers-reduced-motion is a standing contract on this site (see brief.md).
   The only motion here is the bar grow on panel entry, so it is the only thing
   that has to be answered. */
@media (prefers-reduced-motion:no-preference){
  .dash-bar-fill{animation:dash-grow 520ms var(--ease) both}
}
@keyframes dash-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* --- real rows -----------------------------------------------------------
   A subscription actually made on newsletter.html and routed here by
   lead-store.js, sitting in a table whose other rows are fabricated. The
   distinction has to survive a screenshot, so it is carried by a green rule and
   a word rather than by a tint alone - and the word is "real" rather than a
   tick, because a tick in a leads table already means something else in every
   CRM the reader has used. */
.dash-table tr.is-real{background:color-mix(in srgb,var(--green) 7%,var(--white))}
.dash-table tr.is-real:hover{background:color-mix(in srgb,var(--green) 12%,var(--white))}
.dash-table tr.is-real td:first-child{box-shadow:inset 2px 0 0 var(--green)}
/* The .dash-real badge that sat here was removed 2026-09-01 with the mockup
   notices - it labelled a row "real", which only means anything to somebody who
   has been told the rest is not. The tint and the green edge above are the
   whole treatment now, and they say "unread" without naming the seam. */

/* Registered interest is its own capture point and gets its own chip. It is the
   warmest row on the panel - somebody pressed a button with this agency's name
   on it - so it takes the brand purple, which is the one colour on this site
   that already means "a member is here". */
.dash-src[data-src="interest"]{background:var(--purple);color:var(--white)}

/* A brief is the site's primary conversion and the warmest thing in this table
   after a registered interest, so it takes the plum - the site's other identity
   colour, and the one the closer that carries the brief form is painted in. */
.dash-src[data-src="brief"]{background:var(--plum);color:var(--white)}