/* ════════════════════════════════════════════════════════════════════════════
   DASHBOARD
   ────────────────────────────────────────────────────────────────────────────
   Its own file rather than 250 more lines on style.css, which is already 2,700
   lines and carries 737 hand-written hex literals. Everything here uses the
   tokens declared in style.css :root — there is deliberately not one hex
   literal below this line, so the next palette change is an edit to :root.

   Two rules the layout is built on:

   1. Separation comes from space and elevation, not from lines. Hairline
      borders between every row are what made this read as a spreadsheet; a
      card that floats needs no rule around its edge to be legible.

   2. The page shows one thing at a time. What needs doing, then what the year
      looks like, then who is carrying it — and detail sits inside <details>
      rather than on the surface. Less above the fold, everything one click
      away.
   ══════════════════════════════════════════════════════════════════════════ */

/* Warm paper instead of the site's cream. Scoped to the dashboard rather than
   redefining --bg, which twenty other pages read and none of them have been
   looked at yet. */
.dash-page, .dash-page .main-content { background: var(--paper); }

/* Generous, and deliberately so — this gap is doing the work borders used to. */
.dash { display: flex; flex-direction: column; gap: var(--s-7); }

.dash-label {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-400);
  margin-bottom: var(--s-4);
}

.panel {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-raised);
  padding: var(--s-5);
}
.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-4);
}
.panel-title {
  font-family: var(--font-ui);
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.02em;
  color: var(--ink-700);
}
.panel-note { font-size: 0.75rem; color: var(--ink-400); }

/* The one link out of a panel. Quiet by default — it is a door, not an alarm. */
.more-link {
  display: inline-block; margin-top: var(--s-4);
  font-size: 0.8125rem; font-weight: 600; color: var(--jade-700);
}
.more-link:hover { text-decoration: none; color: var(--jade-800); }

/* ── The attention band ──────────────────────────────────────────────────────
   A summary, not a queue. The count carries the scale, one row carries the
   specifics, and the link carries the rest.

   Red is spent here or nowhere. It appears only when something is genuinely
   late by the thresholds in dashboardData.severityOf — sixty-four identical
   red pills taught the eye to skip them, which cost the late ones the only
   signal they had. */
.attn {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-float);
  padding: var(--s-5) var(--s-5) var(--s-4);
}
.attn-top { display: flex; align-items: flex-start; gap: var(--s-4); justify-content: space-between; }
.attn-headline {
  font-family: var(--font-display);
  font-size: 1.75rem; line-height: 1.1; color: var(--navy-900);
}
.attn-sub { margin-top: var(--s-2); font-size: 0.8125rem; color: var(--ink-500); }

/* The severity chip. Exactly one of these on the page. */
.attn-chip {
  flex-shrink: 0;
  font-family: var(--font-ui); font-variant-numeric: tabular-nums;
  font-size: 0.75rem; font-weight: 600;
  padding: var(--s-1) var(--s-3); border-radius: 999px;
  color: var(--ink-500); background: var(--ink-100);
}
.attn-chip--overdue { color: var(--alert-700); background: var(--alert-50); }
.attn-chip--soon { color: var(--warn-600); background: var(--warn-50); }
.attn-chip--clear { color: var(--good-600); background: var(--jade-50); }

/* The single most pressing thing. Inset rather than ruled off. */
.attn-first {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  margin-top: var(--s-4); padding: var(--s-4);
  border-radius: var(--r-md); background: var(--surface-sunk);
}
.attn-first--overdue { background: var(--alert-50); }
.attn-what { font-size: 0.9375rem; font-weight: 600; color: var(--navy-900); }
.attn-who { font-size: 0.78rem; color: var(--ink-500); margin-top: 3px; }
.attn-do {
  flex-shrink: 0; font-family: var(--font-ui);
  font-size: 0.8125rem; font-weight: 600;
  color: var(--jade-700); white-space: nowrap;
}
.attn-do--overdue { color: var(--alert-600); }
.attn-do:hover { text-decoration: none; opacity: 0.75; }

/* ── Hero figures ────────────────────────────────────────────────────────────
   The one place the serif is allowed to be large. One figure per card, with
   the sparkline behind it rather than beside it, so the number reads first and
   the shape of the year stays peripheral. */
.hero-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s-4);
}
.hero {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-raised);
  padding: var(--s-5);
  overflow: hidden;
  min-height: 146px;
}
.hero--feature { background: var(--navy-700); box-shadow: var(--shadow-float); }
.hero-label {
  position: relative; z-index: 1;
  font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-400);
  margin-bottom: var(--s-3);
}
.hero--feature .hero-label { color: var(--jade-400); }
.hero-figure {
  position: relative; z-index: 1;
  font-family: var(--font-display);
  font-size: 2.5rem; line-height: 1; font-weight: 400;
  color: var(--navy-900);
  letter-spacing: -0.015em;
}
.hero--feature .hero-figure { color: var(--surface); }
/* Absence is not zero, and it should not look like a number either. */
.hero-figure--absent { color: var(--ink-300); font-size: 1.75rem; }
.hero-unit { font-family: var(--font-ui); font-size: 0.875rem; color: var(--ink-400); font-weight: 500; }
.hero-sub {
  position: relative; z-index: 1;
  margin-top: var(--s-3);
  font-size: 0.75rem; color: var(--ink-500); line-height: 1.5;
}
.hero--feature .hero-sub { color: rgba(255,255,255,0.62); }

/* The sparkline is wallpaper. It sits at the foot of the card, bleeds to both
   edges, and carries no axis and no label — it is there to show shape, and
   anything precise belongs in the number above it. */
.hero-spark { position: absolute; left: 0; right: 0; bottom: 0; height: 48px; z-index: 0; }
.hero-spark svg { display: block; width: 100%; height: 100%; }
.spark-area { fill: var(--jade-100); }
.spark-line { fill: none; stroke: var(--jade-500); stroke-width: 1.5; stroke-linejoin: round; }
/* The quieter card gets a quieter line — present for balance, not for reading. */
.hero--muted .spark-area { fill: var(--jade-50); }
.hero--muted .spark-line { stroke: var(--jade-400); stroke-width: 1.25; }
.hero--feature .spark-area { fill: rgba(95,176,172,0.20); }
.hero--feature .spark-line { stroke: var(--jade-400); }

/* ── Segmented bar ───────────────────────────────────────────────────────────
   Replaces four equal-width cards, which drew four equal boxes regardless of
   what was in them — the layout asserted the stages were the same size when
   which is biggest is the entire question. */
.seg-bar {
  display: flex; width: 100%; height: 38px;
  border-radius: var(--r-sm); overflow: hidden;
  background: var(--ink-100);
}
.seg-part {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-variant-numeric: tabular-nums;
  font-size: 0.75rem; font-weight: 600; color: var(--surface);
  min-width: 2px; transition: filter 0.15s;
  overflow: hidden; white-space: nowrap;
}
.seg-part:hover { filter: brightness(1.08); }

/* Only the leaders are named. The rest is a link, not a legend — a key with
   eight entries is a table wearing a different hat. */
.seg-key { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-5); margin-top: var(--s-4); }
.seg-key-item { display: flex; align-items: baseline; gap: var(--s-2); font-size: 0.8125rem; color: var(--ink-500); }
.seg-dot { width: 9px; height: 9px; border-radius: 3px; flex-shrink: 0; align-self: center; }
.seg-key-value { font-variant-numeric: tabular-nums; color: var(--navy-900); font-weight: 600; }
.seg-rest { font-size: 0.8125rem; color: var(--ink-400); }

/* ── Runway meter ────────────────────────────────────────────────────────────
   A ratio, so it gets a track rather than a bare number. The scale is capped
   at twelve months because beyond a year the exact figure stops changing any
   decision, and an uncapped bar would make six months look alarming next to
   thirty. */
.runway-meter {
  position: relative; height: 8px; border-radius: 999px;
  background: var(--ink-100); overflow: hidden; margin: var(--s-4) 0 var(--s-2);
}
.runway-fill { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 999px; background: var(--jade-600); }
.runway-fill--warn { background: var(--warn-600); }
.runway-fill--alert { background: var(--alert-600); }

/* ── People ──────────────────────────────────────────────────────────────────
   Was a six-column table, which put margin, commission and outstanding on the
   surface at equal weight with the name. Now: who, one figure, and a bar for
   share of the company. The rest is inside the row, one click down — present
   for anyone who wants it, absent for everyone who does not. */
.person {
  background: var(--surface);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-raised);
  margin-bottom: var(--s-3);
  overflow: hidden;
}
.person:last-child { margin-bottom: 0; }
.person > summary {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  cursor: pointer; list-style: none;
}
.person > summary::-webkit-details-marker { display: none; }
.person > summary:hover { background: var(--jade-50); }
.person-name { flex: 0 0 auto; min-width: 130px; font-size: 0.9375rem; font-weight: 600; color: var(--navy-900); }
.person-share { flex: 1 1 auto; min-width: 80px; }
/* display:block matters — these are spans, and height on an inline element is
   silently ignored, which is exactly how the bar shipped invisible the first
   time. */
.person-track { display: block; height: 6px; border-radius: 999px; background: var(--ink-100); overflow: hidden; }
.person-fill { display: block; height: 100%; border-radius: 999px; background: var(--jade-500); }
.person-pct { display: block; font-size: 0.6875rem; color: var(--ink-400); margin-top: 6px; font-variant-numeric: tabular-nums; }
.person-figure {
  flex: 0 0 auto; text-align: right;
  font-family: var(--font-ui); font-variant-numeric: tabular-nums;
  font-size: 1.0625rem; font-weight: 600; color: var(--navy-900);
}
.person-figure-note { font-size: 0.6875rem; font-weight: 400; color: var(--ink-400); }
.person-caret { flex: 0 0 auto; color: var(--ink-300); font-size: 0.75rem; transition: transform 0.15s; }
.person[open] .person-caret { transform: rotate(90deg); }

.person-detail {
  display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-6);
  padding: 0 var(--s-5) var(--s-5) var(--s-5);
}
.person-stat-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-400); }
.person-stat-value {
  font-family: var(--font-ui); font-variant-numeric: tabular-nums;
  font-size: 1rem; font-weight: 600; color: var(--navy-900); margin-top: 3px;
}
.person-stat-value--absent { color: var(--ink-300); font-weight: 500; }

/* Sales belonging to nobody. Quieter than a person, but present — the rows
   above cannot add up to the company line without it. */
.person--orphan { box-shadow: none; background: transparent; }
.person--orphan > summary { padding-left: 0; padding-right: 0; }
.person--orphan > summary:hover { background: transparent; }
.person--orphan .person-name, .person--orphan .person-figure { color: var(--ink-400); font-weight: 500; }

.company-line {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--ink-200);
}
.company-line-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-400); }
.company-line-value {
  font-family: var(--font-ui); font-variant-numeric: tabular-nums;
  font-size: 1.125rem; font-weight: 700; color: var(--navy-900);
}

/* ── Figure strip ────────────────────────────────────────────────────────── */
.figs { display: flex; flex-wrap: wrap; gap: var(--s-6); }
.fig-label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-400); }
.fig-value {
  font-family: var(--font-ui); font-variant-numeric: tabular-nums;
  font-size: 1.25rem; font-weight: 600; color: var(--navy-900); margin-top: 3px;
}
.fig-value--absent { color: var(--ink-300); }
.fig-note { font-size: 0.6875rem; color: var(--ink-400); margin-top: 3px; }

/* ── Lists ───────────────────────────────────────────────────────────────────
   Spaced, not ruled. */
.drow {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-3) 0;
}
.drow + .drow { margin-top: var(--s-1); }
.drow-main { font-size: 0.875rem; font-weight: 600; color: var(--navy-900); }
.drow-sub { font-size: 0.75rem; color: var(--ink-500); margin-top: 2px; }
.drow-side { text-align: right; font-variant-numeric: tabular-nums; font-size: 0.875rem; color: var(--ink-700); flex-shrink: 0; }
.drow-side-note { font-size: 0.6875rem; color: var(--ink-400); font-variant-numeric: normal; }

.dempty { padding: var(--s-5) 0; color: var(--ink-400); font-size: 0.85rem; }

.dash-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); align-items: start; }
@media (max-width: 1100px) { .dash-two { grid-template-columns: 1fr; } }

/* Everything below the first screen is reference. It opens closed. */
.dash-more > summary {
  cursor: pointer; list-style: none;
  font-size: 0.8125rem; font-weight: 600; color: var(--jade-700);
  padding: var(--s-3) 0;
}
.dash-more > summary::-webkit-details-marker { display: none; }
.dash-more > summary:hover { color: var(--jade-800); }
.dash-more[open] > summary { margin-bottom: var(--s-4); }

/* ── Preview banner ──────────────────────────────────────────────────────── */
.dpreview {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  flex-wrap: wrap;
  background: var(--navy-700); color: var(--surface);
  border-radius: var(--r-md); padding: var(--s-3) var(--s-5);
}
.dpreview--error { background: var(--alert-600); }
.dpreview-title { font-weight: 600; font-size: 0.875rem; }
.dpreview-sub { font-size: 0.75rem; color: rgba(255,255,255,0.7); margin-top: 2px; }
.dpreview-back {
  flex-shrink: 0; font-size: 0.78rem; font-weight: 600;
  color: var(--navy-900); background: var(--surface);
  padding: var(--s-1) var(--s-3); border-radius: 999px;
}
.dpreview-back:hover { text-decoration: none; background: var(--jade-50); }

.dswitch { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; font-size: 0.75rem; color: var(--ink-400); }
.dswitch a { color: var(--ink-500); padding: 2px var(--s-2); border-radius: 999px; }
.dswitch a:hover { background: var(--jade-50); color: var(--jade-700); text-decoration: none; }
.dswitch .is-current { color: var(--navy-900); font-weight: 600; padding: 2px var(--s-2); }

/* ── Team incentive ──────────────────────────────────────────────────────────
   The one celebratory thing on the page, and sized like it. It was built at
   the weight of a minor stat card, which made a quarterly team goal read as a
   footnote; a target nobody looks at motivates nobody.

   It earns its prominence with size, a tinted sky and a large figure — never
   with red or amber. Being behind is not an alert, and a signal colour spent
   here would cost the attention band the only thing that makes it work. That
   is why it can be loud without competing: it is loud in a different key.

   Icon sizes are the point of this revision. The first version drew a correct
   plane and a correct palm at 30px and 24px, where a plane reads as an
   arrowhead and a palm reads as a speck. Shapes were verified on a proof sheet
   at 220px, which proved the paths and nothing about the page. */
.incentive {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-raised);
  padding: var(--s-6) var(--s-6) var(--s-5);
  background:
    radial-gradient(120% 140% at 88% 0%, var(--jade-100) 0%, transparent 55%),
    linear-gradient(180deg, var(--jade-50) 0%, var(--surface) 62%);
}

.incentive-top {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-5); flex-wrap: wrap;
}
.incentive-label {
  font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--jade-700);
}

/* The figure is the wow. Serif, and larger than the hero cards — this is the
   only number on the dashboard anyone is meant to feel something about. */
.incentive-figure {
  font-family: var(--font-display);
  font-size: 3rem; line-height: 1; color: var(--navy-900);
  letter-spacing: -0.02em; margin-top: var(--s-2);
}
.incentive-of {
  font-family: var(--font-ui); font-variant-numeric: tabular-nums;
  font-size: 0.9375rem; font-weight: 500; color: var(--ink-500);
  margin-top: var(--s-2);
}
.incentive-pct {
  font-family: var(--font-display);
  font-size: 2.25rem; line-height: 1; color: var(--jade-700);
  text-align: right;
}
.incentive-pct span {
  display: block; font-family: var(--font-ui); font-size: 0.6875rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink-400); margin-top: var(--s-2);
}

/* Tall enough for a plane to fly in rather than sit on a wire. */
.incentive-path { position: relative; height: 92px; margin: var(--s-5) 0 var(--s-3); }

.incentive-track {
  position: absolute; left: 0; right: 68px; bottom: 20px; height: 5px;
  border-radius: 999px; background: var(--ink-100);
}
.incentive-flown {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--jade-400), var(--jade-600));
}
/* The route still to fly, dashed rather than blank. */
.incentive-ahead {
  position: absolute; top: 1px; bottom: 1px; right: 0;
  background-image: linear-gradient(to right, var(--ink-300) 45%, transparent 45%);
  background-size: 9px 3px; background-repeat: repeat-x; background-position: 0 center;
}

/* Big enough to be an aircraft. Sits above the line, not on it, so it reads as
   in flight rather than as a marker pinned to a bar. */
.incentive-plane {
  position: absolute; bottom: 30px; width: 56px; height: 56px;
  margin-left: -28px; color: var(--jade-700);
  filter: drop-shadow(0 6px 10px rgba(22,33,59,0.16));
}
.incentive-plane svg { display: block; width: 100%; height: 100%; }

.incentive-dest {
  position: absolute; right: 0; bottom: 4px; width: 78px; height: 78px;
  filter: drop-shadow(0 6px 10px rgba(22,33,59,0.14));
}
.incentive-dest svg { display: block; width: 100%; height: 100%; }

.incentive-foot {
  display: flex; justify-content: space-between; gap: var(--s-4);
  font-size: 0.8125rem; color: var(--ink-500);
}
.incentive-foot strong { color: var(--navy-900); font-variant-numeric: tabular-nums; font-weight: 600; }

@media (max-width: 700px) {
  .incentive-figure { font-size: 2.25rem; }
  .incentive-pct { font-size: 1.75rem; }
  .incentive-plane { width: 42px; height: 42px; margin-left: -21px; }
  .incentive-dest { width: 58px; height: 58px; }
  .incentive-track { right: 58px; }
}

/* ── Recently closed ─────────────────────────────────────────────────────────
   Three rows on the dashboard. Deliberately not .ba-table: that one is built
   for a page of data with a header, and a header over three rows is furniture
   around a fact. */
.rc-table { width: 100%; border-collapse: collapse; }
.rc-table td { padding: 10px 0; border-bottom: 1px solid var(--rule, #EDEFF3); vertical-align: top; }
.rc-table tr:last-child td { border-bottom: none; }
.rc-what { font-size: 0.9rem; color: var(--ink-700, #2D3748); }
.rc-what a { color: inherit; text-decoration: none; font-weight: 600; }
.rc-what a:hover { color: var(--jade-700, #1C6B67); }
.rc-work { display: block; font-size: 0.78rem; color: var(--ink-400, #9CA3AF); margin-top: 2px; }
.rc-by { font-size: 0.85rem; color: var(--ink-500, #6B7280); white-space: nowrap; }
.rc-when { display: block; font-size: 0.75rem; color: var(--ink-400, #9CA3AF); margin-top: 2px; }
.rc-value { font-size: 0.9rem; font-weight: 600; color: var(--ink-800, #1B2A4A); text-align: right; white-space: nowrap; }
@media (max-width: 620px) {
  .rc-work { display: none; }
  .rc-by { white-space: normal; }
}