/* The org chart, the band meter, and the assignment ledger.
 *
 * The only animated thing on the page is the live dot, and it is animated for
 * a reason: it is the difference between an agent that is working and one that
 * is sitting there. Everything else holds still so that motion means work.
 */

/* ============================================================ the live dot */
.odot {
  width: 7px; height: 7px; flex: none;
  border-radius: var(--r-pill);
  background: var(--n400);
}
.odot--running { background: var(--accent); animation: aoPulse 2s ease-in-out infinite; }
.odot--waiting { background: var(--held); }
.odot--idle { background: var(--n400); }
.odot--off { background: transparent; box-shadow: inset 0 0 0 1px var(--n400); }

/* ================================================================ the chief */
.chief { display: flex; align-items: flex-start; gap: var(--s4); }
.chief-mark {
  width: 44px; height: 44px; flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-tile);
  background: var(--ink); color: var(--accent-300);
}
.chief-t { font-size: var(--t-2xl); font-weight: 700; letter-spacing: var(--tr-tight); display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.chief-s { margin: 6px 0 0; font-size: var(--t-lg); color: var(--muted); line-height: var(--lh-snug); max-width: 56ch; }

.srow {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--hairline-2);
  font-size: var(--t-base);
}
.srow:last-child { border-bottom: 0; }
.srow .odot { margin-top: 5px; }
.srow b { font-weight: 600; display: block; }
.srow-why { display: block; font-size: var(--t-xs); color: var(--muted); margin-top: 2px; }

/* ============================================================= the org chart
   Three head cards side by side at desktop: one column per head, which is the
   shape of the org and reads as the shape of the org. */
/* The heads end together: .hcard is already a column whose body grows, so
   stretching the row is what pins "What it has assigned" to one line. It was
   `align-items: start`, and the Head of Sales card stopped 231px short. */
.orgchart {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--s3);
}
/* Three heads are three across or one above another — at 1280px auto-fit
   gave two, and Brand Lead sat alone under a hole. */
.orgchart:has(> :nth-child(3):last-child) {
  grid-template-columns: repeat(auto-fit, minmax(clamp(calc(100% / 3 - 16px), (820px - 100%) * 999, 100%), 1fr));
}
.hcard {
  background: var(--surface); border: 1px solid var(--divider);
  border-radius: var(--r-card); box-shadow: var(--e1);
  display: flex; flex-direction: column; overflow: hidden;
}
.hcard-h {
  display: flex; align-items: center; gap: 10px;
  padding: var(--s4) var(--s5);
  border-bottom: 1px solid var(--hairline);
  color: var(--ink);
}
.hcard-h:hover { background: var(--surface-2); }
.hcard-ico {
  width: 30px; height: 30px; flex: none;
  display: grid; place-items: center; border-radius: 9px;
  background: var(--ground); color: var(--muted);
}
.hcard-n { display: block; font-size: var(--t-md); font-weight: 700; letter-spacing: var(--tr-tight); }
.hcard-m { display: block; font-family: var(--font-mono); font-size: var(--t-prov); color: var(--quiet); margin-top: 2px; }
.hcard-b { padding: var(--s4) var(--s5); flex: 1; }
.hcard-stats { display: flex; gap: var(--s5); font-size: var(--t-xs); color: var(--muted); }
.hcard-stats b { display: inline-block; margin-right: 4px; color: var(--ink); }
.num-sm { font-family: var(--font-mono); font-weight: 500; font-size: var(--t-lg); letter-spacing: var(--tr-tight); }
.hcard-f {
  display: flex; align-items: center; gap: 6px;
  padding: 11px var(--s5);
  background: var(--surface-2); border-top: 1px solid var(--hairline);
  font-size: var(--t-xs); font-weight: 600; color: var(--ink);
}
.hcard-f:hover { color: var(--accent); }

/* ============================================================== an agent row */
.arow {
  display: block;
  padding: 10px var(--s3);
  border: 1px solid var(--hairline); border-radius: var(--r-chip);
  background: var(--surface);
  transition: border-color var(--fast), background var(--fast);
}
.arow:hover { border-color: var(--n300); background: var(--surface-2); }
.arow--off { opacity: .6; }
.arow-h { display: flex; align-items: center; gap: 7px; }
.arow-n { font-size: var(--t-base); font-weight: 600; }
.arow-do {
  display: block; margin: 3px 0 0 14px;
  font-size: var(--t-xs); color: var(--muted); line-height: var(--lh-snug);
}
.arow--running .arow-do { color: var(--ink); }

/* ============================================================= the band meter
   Four segments, one per tool class. Earned segments are solid; the one being
   worked on fills from the left. The widths are proportional to what each
   class costs in clean approvals — 3, 5, 5, 10 — so Send visibly takes as long
   as everything before it put together, which is the honest shape of it. */
.band { margin: 9px 0 0 14px; }
.band--big { margin: 0; }
.band-h { display: flex; align-items: baseline; gap: var(--s2); margin-bottom: 5px; }
.band-n { font-size: var(--t-micro); font-weight: 600; letter-spacing: var(--tr-label); text-transform: uppercase; color: var(--quiet); }
.band--big .band-n { font-size: var(--t-label); color: var(--ink); }
.bandbar { display: grid; grid-template-columns: 3fr 5fr 5fr 10fr; gap: 3px; }
.bandseg {
  position: relative; height: 5px; border-radius: var(--r-pill);
  background: var(--hairline); overflow: hidden; display: block;
}
.bandseg.is-earned { background: var(--accent); }
.bandseg.is-now { background: var(--accent-50); box-shadow: inset 0 0 0 1px var(--accent-100); }
.bandseg-fill { position: absolute; inset: 0 auto 0 0; background: var(--accent-300); border-radius: var(--r-pill); }
.band--big .bandseg { height: 7px; }
.band-note { margin: 8px 0 0; font-size: var(--t-xs); color: var(--muted); line-height: var(--lh-snug); }

/* ======================================================== a head's statistics */
.hstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s3); }
.hstat { display: flex; flex-direction: column; gap: 2px; }
.hstat b { color: var(--ink); }
.hstat span { font-size: var(--t-xs); color: var(--muted); }
.hstat--running b { color: var(--accent); }
.hstat--waiting b { color: var(--held); }

/* ========================================================== the ledger rows */
.tasks { display: flex; flex-direction: column; }
.trow {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--hairline-2);
  font-size: var(--t-base);
}
.trow:last-child { border-bottom: 0; }
.trow-ico { flex: none; color: var(--n500); padding-top: 1px; }
.trow--running .trow-ico { color: var(--accent); }
.trow--waiting .trow-ico { color: var(--held); }
.trow--held .trow-ico { color: var(--held); }
.trow--done .trow-ico { color: var(--accent-700); }
.trow-t { display: block; line-height: var(--lh-snug); }
.trow-o { display: block; font-size: var(--t-xs); color: var(--muted); margin-top: 2px; }
.trow-s {
  flex: none; font-size: var(--t-label); font-weight: 600;
  padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--hover); color: var(--muted); white-space: nowrap;
}
.trow--running .trow-s { background: var(--accent-50); color: var(--accent); }
.trow--waiting .trow-s, .trow--held .trow-s { background: var(--held-bg); color: var(--held-ink); }
.trow--done .trow-s { background: var(--ground); color: var(--quiet); }
.trow .prov { flex: none; }

@media (max-width: 860px) {
  .hstats { grid-template-columns: repeat(2, 1fr); row-gap: var(--s4); }
  .trow { flex-wrap: wrap; row-gap: 4px; }
  .trow .prov { margin-left: 23px; }
}

/* ==========================================================================
   THE TREND ON A HEAD CARD
   One number says where a head is. The line says whether it is getting
   better — which is what a founder is actually asking.
   ========================================================================== */
.htrend { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.tspark { flex: none; display: block; }
.htrend-r { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.htrend-g { font-size: var(--t-xs); font-weight: 600; }
.htrend-g.is-good { color: var(--accent); }
.htrend-g.is-behind { color: var(--held-ink); }

/* ==========================================================================
   THE MACHINE'S FUNNEL
   Not a tapering shape — a row per stage with the drop named. A tapering
   funnel looks impressive and makes the losses hard to read, which is the
   one thing this chart exists to show.
   ========================================================================== */
.mfunnel { display: flex; flex-direction: column; gap: 7px; }
.mf-row { display: grid; grid-template-columns: 74px 46px minmax(0, 1fr) 52px; align-items: center; gap: var(--s3); }
.mf-l { font-size: var(--t-xs); color: var(--muted); }
.mf-v { text-align: right; font-size: var(--t-md); }
.mf-bar { height: 8px; border-radius: var(--r-pill); background: var(--hairline); overflow: hidden; }
.mf-bar > span { display: block; height: 100%; background: var(--accent); border-radius: var(--r-pill); transition: width var(--t-slow) var(--ease-out); }
.mf-d { font-family: var(--font-mono); font-size: var(--t-prov); color: var(--held-ink); text-align: right; }
.mf-foot { margin: var(--s3) 0 0; font-size: var(--t-xs); color: var(--muted); }

/* ==========================================================================
   THE TRACK
   The lines draw themselves in once, left to right, so the eye follows the
   journey in the order it happened rather than being handed the finished
   shape. 600ms is long for this product and it is the one place it is worth
   it — this is the chart a founder opens the app to read.
   ========================================================================== */
.track { margin: 0 -4px; }
/* Fluid, and therefore never letterboxed. The svg carries no height attribute
   (see js/track.js): width:100% + height:auto scales it uniformly to whatever
   it is inside, and the height follows the viewBox aspect. A fixed height is
   what put 197px of dead space beside the chart at 1440 and 15px under it at
   1100 — the same bug, rotated. */
.track svg { display: block; overflow: visible; width: 100%; height: auto; }
.track-walked, .track-plan, .track-ahead {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: draw 620ms var(--ease-out) forwards;
}
.track-plan { animation-delay: 60ms; }
.track-ahead { animation-delay: 420ms; }
@keyframes draw { to { stroke-dashoffset: 0; } }
/* The dashed lines keep their pattern once drawn, so the animation hands the
   dash array back rather than leaving them solid. */
.track-plan { animation-name: drawDash; }
.track-ahead { animation-name: drawDot; }
@keyframes drawDash { to { stroke-dashoffset: 0; stroke-dasharray: 4 4; } }
@keyframes drawDot { to { stroke-dashoffset: 0; stroke-dasharray: 1 5; } }

.track-gap, .track-under { animation: gapIn 520ms var(--ease-out) 260ms both; }
/* the ground arrives just behind the line that draws over it */
.track-under { animation-delay: 200ms; }
@keyframes gapIn { from { opacity: 0; } to { opacity: 1; } }
.track-now { animation: nowIn 320ms var(--ease-spring) 620ms both; }
@keyframes nowIn { from { opacity: 0; transform: scale(.2); transform-origin: center; } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .track-walked { stroke-dasharray: none; stroke-dashoffset: 0; }
  .track-plan { stroke-dasharray: 4 4; stroke-dashoffset: 0; }
  .track-ahead { stroke-dasharray: 1 5; stroke-dashoffset: 0; }
  .track-gap, .track-under, .track-now { opacity: 1; transform: none; }
}


/* ==========================================================================
   THE TRACK'S KEY
   Four line styles on one chart need naming. Without this the reader has to
   work out which dash means what, which is a puzzle, not a visualisation.
   ========================================================================== */
.trackkey { font-size: var(--t-xs); color: var(--muted); }
.tkey { display: inline-flex; align-items: center; gap: 6px; }
.tkey-l { width: 18px; height: 0; border-top: 2px solid var(--ink); border-radius: 2px; flex: none; }
.tkey-l--walked { border-top: 2.25px solid var(--ink); }
.tkey-l--plan { border-top: 1.5px dashed var(--n400); }
.tkey-l--ahead { border-top: 1.5px dotted var(--quiet); }
.tkey-sw { width: 14px; height: 10px; border-radius: 3px; flex: none; background: color-mix(in srgb, var(--accent) 20%, transparent); }
.tkey-sw.is-behind { background: color-mix(in srgb, var(--held) 22%, transparent); }

/* ==========================================================================
   THE PRICE LIST on Today's cap. Seven numbers between 1 and 20 credits, and
   a bar each so the ranking is a shape rather than a column to read. The bar
   is the quiet one on the card — the today bar above it carries the colour
   that matters, and two loud bars in one card would compete.
   ========================================================================== */
.pricerow { align-items: center; }
.pricerow-l { flex: 0 0 43%; }
.pricerow-n { flex: none; min-width: 3ch; text-align: right; }
.costbar {
  flex: 1 1 auto; height: 4px; border-radius: 999px;
  background: var(--hairline); overflow: hidden;
}
.costbar > span {
  display: block; height: 100%; border-radius: inherit;
  background: color-mix(in srgb, var(--accent) 55%, transparent);
  animation: costIn var(--t-slow, 520ms) var(--ease-out, ease-out) both;
  transform-origin: 0 50%;
}
@keyframes costIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .costbar > span { animation: none; } }