/* Pipeline — design tokens
   Awarome Design System, with Buypower's palette swapped in for the brand three:
     indigo #120460 → green  #3E5315   (primary, CTAs, headings)
     orange #FF6B35 → amber  #F3A806   (accent, links, attention)
     yellow #FFD500 → lime   #B4D043   (brand canvas, the agent)
   Everything else — type, shape, hairline cards, pill buttons — is Awarome as-is. */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Poppins:wght@300;400;500;600;700&display=swap');

/* Contrast: every text pair below clears WCAG AA (4.5:1), and every control border
   clears 3:1 for non-text UI. Run tools/contrast.py to re-check after changing any of
   these. The brand three are unchanged as fills. Only their use as *text* moved, because
   amber #F3A806 on white measured 2.02:1, which nobody can read. */

:root {
  /* Brand three, unchanged as fills */
  --green-900: #22300B;   /* headings, wordmark */
  --green-700: #3E5315;   /* primary buttons, active nav */
  --green-500: #55701F;   /* hover */
  --green-100: #EDF1E3;   /* selected row, soft fill */

  --amber-500: #F3A806;   /* accent FILL only, never text on a light surface */
  --amber-100: #FEF0D4;

  --lime-500: #B4D043;    /* the agent */
  --amber-600: #C68905;   /* 3.0:1 on white, for amber used as a BORDER */
  --lime-100: #EEF5DC;

  /* Text on light surfaces */
  --ink:    #1A1A1A;      /* 17.4:1 on white */
  --ink-70: rgba(26,26,26,0.70); /* 6.4:1 on white */
  --muted:  #5C5C5C;      /* 6.7:1 white, 6.0:1 page, 6.3:1 warm */
  --link:       #946604;  /* 5.1:1 on white, amber hue kept */
  --link-hover: #775203;  /* 7.0:1 on white */

  /* Surfaces */
  --surface: #FFFFFF;
  --page:    #F3F3ED;     /* deepened so a white card actually reads as a card */
  --warm:    #FDF8EE;

  /* Lines. --control is the one that carries an accessibility requirement: it is the
     boundary of an input, a select or a secondary button, so it clears 3:1. --edge and
     --rule group and separate, so they are softer but no longer invisible. */
  --control: #8E9182;     /* 3.1:1 on white */
  --edge:    #CBCEC1;     /* card and structural borders */
  --rule:    #DEDCCF;     /* separator lines, warm to match the page */
  --fill:    #EDECE3;     /* chip and track fills, --muted on it is 5.6:1 */

  --stop:     #A82D24;    /* 6.9:1 on white, 5.9:1 on --stop-100 */
  --stop-600: #8F251E;    /* hover on the solid danger button */
  --stop-100: #FBEBE9;
  --stop-edge: #CF7F76;   /* 3.0:1 on white, so a danger boundary is visible */

  /* Origin, human vs agent */
  --agent-dot: var(--lime-500);
  --agent-fill: var(--lime-100);
  --agent-ink: #42540D;   /* 7.5:1 on --lime-100 */
  --human-dot: var(--green-700);
  --human-ink: var(--ink-70);
  /* Lime on white is only 1.9:1, so every status dot carries a ring. The dot is never the
     only signal anyway, there is always a text tag beside it. */
  --dot-ring: rgba(26,26,26,0.28);

  /* Send mode, draft waits and auto leaves */
  --draft-fill: var(--amber-100);
  --draft-ink: #7A5200;   /* 6.1:1 on --amber-100 */
  --auto-fill: var(--amber-500);
  --auto-ink: #241A00;    /* 8.5:1 on --amber-500 */

  /* Type */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-ui: 'Poppins', system-ui, sans-serif;

  /* Shape */
  --r-card: 8px;
  --r-banner: 10px;
  --r-pill: 30px;
  --r-input: 8px;

  /* Rhythm */
  --row-h: 40px;
  --nav-w: 248px;
  --topbar-h: 56px;

  /* Elevation. Two shadows per level: a tight one for the edge, a wide soft one for
     the lift. One flat shadow everywhere is what makes an interface look unconsidered. */
  --shadow-1: 0 1px 2px rgba(34,48,11,0.05), 0 1px 3px rgba(34,48,11,0.05);
  --shadow-2: 0 2px 4px rgba(34,48,11,0.05), 0 6px 16px -4px rgba(34,48,11,0.10);
  --shadow-3: 0 4px 8px rgba(34,48,11,0.06), 0 16px 40px -8px rgba(34,48,11,0.16);
  --shadow-card: var(--shadow-1);

  /* Motion. One duration and one curve, so nothing feels like it came from a different app. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 120ms;
  --slow: 220ms;

  /* Chart palette. Validated, do not eyeball changes:
       node scripts/validate_palette.js "#93B516,#3F5D00" --mode light --surface "#FFFFFF"
     Categorical worst adjacent CVD deltaE 28.6, normal vision 29.0.
     --series-1 is 2.37:1 on white, under the 3:1 bar, so every chart that uses it ships
     visible direct labels and a table view. That relief is required, not decorative. */
  --series-1: #93B516;   /* the assistant's output */
  --series-2: #3F5D00;   /* the human side */
  --series-1-soft: rgba(147,181,22,0.16);
  --series-2-soft: rgba(63,93,0,0.10);

  /* Ordinal ramp for the funnel: one hue, monotone lightness, every gap >= 0.06. */
  --funnel-1: #8FC000;
  --funnel-2: #79A30C;
  --funnel-3: #638704;
  --funnel-4: #4F6C00;
  --funnel-5: #3B5200;
  --funnel-6: #283A00;

  /* Chart chrome. Recessive by design: the data is the loud part. */
  --grid: #E8E7DD;
  --axis: #C9C8BC;
}

html, body { margin:0; padding:0; background:var(--page); color:var(--ink); font-family:var(--font-ui); letter-spacing:-0.02em; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
* { box-sizing:border-box; font-variant-numeric:tabular-nums; }
button, select, kbd, input, textarea { white-space:nowrap; font-family:var(--font-ui); letter-spacing:-0.02em; }
textarea { white-space:pre-wrap; }
a { color:var(--link); text-decoration:none; }
a:hover { color:var(--link-hover); text-decoration:underline; }
::selection { background:var(--lime-100); }
:focus-visible { outline:2.5px solid var(--green-700); outline-offset:2px; border-radius:2px; }

.btn, .nav__item, .sidelist__item, .card, .list__row, .table tbody tr, .filter, .input, .select,
.textarea, .merge, .radio-pill, .nav__signout, .nav__switch button, .step {
  transition: background-color var(--fast) var(--ease), border-color var(--fast) var(--ease),
              color var(--fast) var(--ease), box-shadow var(--slow) var(--ease),
              transform var(--fast) var(--ease);
}
.btn:active { transform: translateY(0.5px); }
/* A control that cannot be used has to look like it. */
.btn:disabled, .select:disabled, .input:disabled {
  opacity:.45; cursor:not-allowed; pointer-events:none;
}
.btn:disabled { background:var(--fill); color:var(--muted); border-color:var(--edge); }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- layout ---------- */
.app { display:flex; height:100vh; overflow:hidden; background:var(--page); }

.nav { width:var(--nav-w); flex:0 0 var(--nav-w); background:var(--surface); border-right:1px solid var(--edge); display:flex; flex-direction:column; }
.nav__brand { height:var(--topbar-h); flex:0 0 var(--topbar-h); display:flex; align-items:center; gap:10px; padding:0 16px; border-bottom:1px solid var(--rule); }
.nav__body { flex:1; overflow-y:auto; padding:10px 10px 14px; }

/* Section label. Uppercase and tracked, which is the convention that tells you it labels a
   group rather than being an item you can click. */
.nav__group { padding:14px 10px 6px; font-size:10.5px; font-weight:600; letter-spacing:0.07em; text-transform:uppercase; color:var(--muted); }
.nav__group:first-child { padding-top:4px; }

.nav__item { position:relative; width:100%; display:flex; align-items:center; gap:10px; padding:0 10px; height:38px; margin-bottom:1px; border:0; border-radius:var(--r-input); background:transparent; color:var(--ink-70); font-size:13.5px; font-weight:450; text-align:left; cursor:pointer; text-decoration:none; }
.nav__item:hover { background:var(--page); color:var(--ink); text-decoration:none; }
.nav__item:hover .nav__icon { color:var(--ink); }
.nav__item.is-on { background:var(--green-100); color:var(--green-900); font-weight:600; }
.nav__item.is-on .nav__icon { color:var(--green-700); }
/* The active marker is a shape as well as a colour, so it does not rely on hue alone. */
.nav__item.is-on::before { content:""; position:absolute; left:-10px; top:7px; bottom:7px; width:3px; border-radius:0 3px 3px 0; background:var(--green-700); }
.nav__item > .nav__label { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.nav__icon { flex:0 0 18px; width:18px; height:18px; color:var(--muted); display:block; }
.nav__icon svg { width:18px; height:18px; display:block; }

.nav__count { flex:0 0 auto; min-width:20px; text-align:center; font-size:11px; font-weight:600; color:var(--muted); background:var(--fill); padding:2px 7px; border-radius:var(--r-pill); }
.nav__count.is-hot { color:var(--draft-ink); background:var(--draft-fill); }
.nav__item.is-on .nav__count { background:var(--surface); color:var(--green-900); }
.nav__item.is-on .nav__count.is-hot { background:var(--draft-fill); color:var(--draft-ink); }

.nav__foot { flex:0 0 auto; padding:12px; border-top:1px solid var(--edge); background:var(--surface); }
.nav__switch { display:flex; gap:0; padding:2px; margin-bottom:10px; background:var(--page); border:1px solid var(--edge); border-radius:var(--r-pill); }
.nav__switch button { flex:1; height:26px; border:0; border-radius:var(--r-pill); background:transparent; color:var(--muted); font-size:11.5px; font-weight:500; cursor:pointer; }
.nav__switch button:hover { color:var(--ink); }
.nav__switch button.is-on { background:var(--green-700); color:#fff; }

.nav__status { display:flex; align-items:center; gap:8px; padding:8px 10px; margin-bottom:10px; background:var(--lime-100); border-radius:var(--r-input); font-size:11.5px; font-weight:500; color:var(--agent-ink); }
.nav__status.is-off { background:var(--stop-100); color:var(--stop); }

.nav__user { display:flex; align-items:center; gap:10px; }
.nav__avatar { flex:0 0 32px; width:32px; height:32px; border-radius:50%; background:var(--green-700); color:#fff; font-size:12px; font-weight:600; display:flex; align-items:center; justify-content:center; letter-spacing:0.02em; }
.nav__who { flex:1; min-width:0; }
.nav__name { font-size:13px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav__role { font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nav__signout { flex:0 0 30px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; border:1px solid var(--control); border-radius:var(--r-input); background:var(--surface); color:var(--muted); cursor:pointer; text-decoration:none; }
.nav__signout:hover { background:var(--page); color:var(--ink); text-decoration:none; }
.nav__signout svg { width:15px; height:15px; }

.wordmark { width:16px; height:16px; background:var(--amber-500); display:block; clip-path:polygon(46% 0,100% 0,54% 42%,100% 42%,20% 100%,40% 52%,0 52%); }
.wordmark--lg { width:18px; height:18px; }
.wordmark-text { font-family:var(--font-display); font-weight:800; font-size:17px; letter-spacing:-0.04em; color:var(--green-900); }
.wordmark-text--lg { font-size:19px; }

.main { flex:1; display:flex; flex-direction:column; min-width:0; }
.topbar { min-height:var(--topbar-h); flex:0 0 auto; background:var(--surface); border-bottom:1px solid var(--edge); display:flex; align-items:center; gap:16px; padding:8px 20px; flex-wrap:wrap; }
.topbar h1 { margin:0; font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:-0.04em; color:var(--green-900); }
.topbar__sub { font-size:12px; color:var(--muted); margin-top:1px; }
.topbar__agent { display:flex; align-items:center; gap:9px; padding:6px 12px; background:var(--lime-100); border-radius:var(--r-pill); font-size:12.5px; color:var(--agent-ink); }
.scroll { flex:1; overflow-y:auto; min-height:0; }
.pad { padding:20px; }
.spacer { flex:1; }

/* ---------- type ---------- */
.h-display { font-family:var(--font-display); font-weight:700; letter-spacing:-0.04em; color:var(--green-900); }
.h-xl { font-family:var(--font-display); font-size:24px; font-weight:800; letter-spacing:-0.04em; color:var(--green-900); }
.h-l  { font-family:var(--font-display); font-size:20px; font-weight:800; letter-spacing:-0.04em; color:var(--green-900); }
.h-m  { font-family:var(--font-display); font-size:17px; font-weight:700; letter-spacing:-0.04em; color:var(--green-900); }
.h-s  { font-family:var(--font-display); font-size:15px; font-weight:700; letter-spacing:-0.04em; color:var(--green-900); }
.h-card { font-family:var(--font-display); font-size:16px; font-weight:700; letter-spacing:-0.04em; color:var(--green-900); }
.stat { font-family:var(--font-display); font-size:26px; font-weight:800; letter-spacing:-0.04em; color:var(--green-900); }
.stat--sm { font-size:22px; }
.muted { color:var(--muted); }
.dim { color:var(--ink-70); }
.t-11 { font-size:11px } .t-115 { font-size:11.5px } .t-12 { font-size:12px } .t-125 { font-size:12.5px }
.t-13 { font-size:13px } .t-135 { font-size:13.5px } .t-14 { font-size:14px } .t-15 { font-size:15px }
.w-500 { font-weight:500 } .w-600 { font-weight:600 }
.lh { line-height:1.55; }
.nowrap { white-space:nowrap; }
.truncate { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.prewrap { white-space:pre-line; }

/* ---------- surfaces ---------- */
.card { background:var(--surface); border:1px solid var(--edge); border-radius:var(--r-card); box-shadow:var(--shadow-card); }
.card--pad { padding:16px 18px; }
.card--clip { overflow:hidden; }
.card--bad { border-color:var(--stop-edge); }
.card--on { border-color:var(--green-700); }
.card--dashed { border-style:dashed; }
.grid-auto { display:grid; grid-template-columns:repeat(auto-fit, minmax(340px, 1fr)); gap:16px; }
.grid-auto--sm { grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:14px; }
.grid-auto--form { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; }
.row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.row--top { align-items:flex-start; }
.row--tight { gap:8px; }
.stack { display:flex; flex-direction:column; gap:14px; }
.mt-14 { margin-top:14px } .mt-16 { margin-top:16px } .mb-12 { margin-bottom:12px } .mb-14 { margin-bottom:14px } .mb-16 { margin-bottom:16px }

.banner { display:flex; gap:14px; align-items:flex-start; padding:14px 16px; border-radius:var(--r-banner); margin-bottom:16px; }
.banner__title { font-size:14px; font-weight:600; }
.banner__body { font-size:13px; color:var(--ink-70); margin-top:3px; line-height:1.5; }
.banner--bad { background:var(--stop-100); border:1px solid var(--stop-edge); }
.banner--bad .banner__title { color:var(--stop); }
.banner--warn { background:var(--amber-100); }
.banner--warn .banner__title { color:var(--draft-ink); }
.banner--agent { background:var(--lime-100); }
.banner--agent .banner__title { color:var(--agent-ink); }

.empty { padding:48px 24px; text-align:center; }
.empty__body { font-size:13.5px; color:var(--ink-70); margin-top:8px; line-height:1.55; max-width:420px; margin-left:auto; margin-right:auto; }

/* ---------- buttons ---------- */
.btn { height:36px; padding:0 18px; border:1px solid var(--control); border-radius:var(--r-pill); background:var(--surface); color:var(--ink); font-size:13px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:9px; text-decoration:none; }
.btn:hover { background:var(--page); color:var(--ink); text-decoration:none; border-color:var(--muted); }
.btn--primary { border:0; background:var(--green-700); color:#fff; font-weight:500; box-shadow:var(--shadow-1); }
.btn--primary:hover { background:var(--green-500); color:#fff; }
.btn--danger { border:1px solid var(--stop-edge); color:var(--stop); }
.btn--danger:hover { background:var(--stop-100); }
.btn--danger-solid { border:0; background:var(--stop); color:#fff; }
.btn--danger-solid:hover { background:var(--stop-600); color:#fff; }
.btn--dashed { border:1px dashed var(--green-700); color:var(--green-700); background:var(--surface); }
.btn--ghost-dashed { border:1px dashed var(--edge); color:var(--ink-70); }
.btn--lg { height:40px; padding:0 22px; font-size:14px; font-weight:500; }
.btn--xl { height:44px; padding:0 24px; font-size:14px; font-weight:500; }
.btn--sm { height:32px; padding:0 14px; font-size:12.5px; }
.btn--xs { height:28px; padding:0 12px; font-size:12px; }
.btn--block { width:100%; }
.btn--wide { width:100%; height:46px; font-size:14px; font-weight:500; }
.btn--rowfoot { width:100%; height:44px; border:0; border-top:1px solid var(--rule); border-radius:0; background:var(--surface); color:var(--green-700); font-size:13px; font-weight:500; }
.btn--rowfoot:hover { background:var(--green-100); }
kbd { font-size:11px; background:var(--fill); padding:2px 6px; border-radius:4px; }
.btn--primary kbd { background:rgba(255,255,255,.2); }

/* ---------- pills, dots, chips ---------- */
.pill { display:inline-flex; align-items:center; font-size:11.5px; padding:3px 10px; border-radius:var(--r-pill); background:var(--fill); color:var(--muted); white-space:nowrap; }
.pill--stage { background:var(--green-100); color:var(--green-900); }
.pill--stage-here { background:var(--green-700); color:#fff; }
.pill--stage-todo { background:var(--surface); color:var(--muted); border:1px solid var(--edge); }
.pill--stage-lost { background:var(--stop); color:#fff; }
.pill--agent { background:var(--lime-100); color:var(--agent-ink); }
.pill--draft { background:var(--draft-fill); color:var(--draft-ink); }
.pill--auto { background:var(--auto-fill); color:var(--auto-ink); }
.pill--bad { background:var(--stop-100); color:var(--stop); }
.pill--count { font-weight:600; font-size:11.5px; padding:2px 8px; }
.pill--lg { font-size:12px; padding:4px 12px; }

.dot { width:7px; height:7px; border-radius:50%; flex:0 0 7px; display:inline-block; box-shadow:inset 0 0 0 1px var(--dot-ring); }
.dot--8 { width:8px; height:8px; flex-basis:8px; }
.dot--9 { width:9px; height:9px; flex-basis:9px; }
.dot--agent { background:var(--lime-500); }
.dot--human { background:var(--green-700); }
.dot--bad { background:var(--stop); }
.dot--off { background:var(--fill); box-shadow:inset 0 0 0 1px rgba(26,26,26,0.12); }
.dot--warn { background:var(--amber-500); }
.dot--ring { background:transparent; border:2px solid var(--amber-600); box-shadow:none; }

.conf { display:flex; align-items:center; gap:8px; }
.conf__dots { display:flex; gap:3px; }

/* ---------- forms ---------- */
.input, .select, .textarea { border:1px solid var(--control); border-radius:var(--r-input); background:var(--surface); font-family:var(--font-ui); font-size:14px; color:var(--ink); }
.input, .select { height:36px; padding:0 10px; }
.input--tall { height:38px; padding:0 12px; }
.input--num { width:80px; }
.input--num-sm { width:64px; }
.textarea { width:100%; padding:14px; line-height:1.6; resize:vertical; }
.textarea--edit { border-color:var(--green-700); height:180px; }
.textarea--body { height:160px; }
.textarea--guidance { height:88px; border-color:#D8E3B4; padding:12px; font-size:13.5px; line-height:1.55; }
.filter { height:34px; padding:0 12px; border:1px solid var(--control); border-radius:var(--r-pill); background:var(--surface); font-size:13px; }
.filter--on { border-color:var(--amber-600); background:var(--amber-100); color:var(--draft-ink); }
.filter--search { width:230px; }
.label { display:block; font-size:12.5px; color:var(--ink-70); margin-bottom:6px; }
.check { display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--ink-70); cursor:pointer; }
.check input, input[type=checkbox], input[type=radio] { accent-color:var(--green-700); }
.merge { height:26px; padding:0 11px; border:1px solid var(--draft-ink); border-radius:var(--r-pill); background:var(--surface); color:var(--draft-ink); font-size:12px; cursor:pointer; }
.radio-pill { display:flex; align-items:center; gap:7px; font-size:13.5px; padding:8px 14px; border:1px solid var(--control); border-radius:var(--r-pill); cursor:pointer; }
.radio-pill.is-on { border-color:var(--green-700); background:var(--green-100); }

/* ---------- rows and tables ---------- */
.list__row { display:flex; align-items:center; gap:10px; min-height:var(--row-h); padding:8px 16px; border-top:1px solid var(--rule); }
.list__row:hover { background:var(--page); }
.list__row--first { border-top:0; }
.list__row--bad { background:var(--stop-100); }
.list__row--agent { background:var(--lime-100); }
.list__row--warn { background:var(--amber-100); }

.table { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--edge); border-radius:var(--r-card); }
.table thead tr { background:var(--page); border-bottom:1px solid var(--edge); }
.table th { text-align:left; font-size:11.5px; font-weight:600; color:var(--muted); padding:0 12px; height:38px; white-space:nowrap; }
.table td { padding:0 12px; font-size:13px; color:var(--ink-70); white-space:nowrap; }
.table tbody tr { height:var(--row-h); border-top:1px solid var(--rule); background:var(--surface); }
.table tbody tr:hover { background:var(--page); }
.table tbody tr.is-selected { background:var(--green-100); }
.table td.cell--name { font-size:13.5px; max-width:170px; overflow:hidden; text-overflow:ellipsis; }
.table td.cell--name a { color:var(--ink); }
.table td.cell--company { max-width:180px; overflow:hidden; text-overflow:ellipsis; }
.ink-late { color:var(--stop); }
.ink-today { color:var(--draft-ink); }

.tile { flex:1 1 150px; min-width:0; border-radius:var(--r-input); padding:12px 14px; background:var(--fill); }
.tile--agent { background:var(--lime-100); }
.tile--draft { background:var(--amber-100); }
.tile--warm { background:var(--warm); }
.tile--bad { background:var(--stop-100); }
.tile__label { font-size:12.5px; color:var(--ink-70); }

.bar { flex:1; min-width:40px; height:10px; background:var(--fill); border-radius:5px; overflow:hidden; display:block; }
.bar__fill { display:block; height:10px; background:var(--green-700); border-radius:5px; }
.progress { flex:1 1 120px; min-width:60px; height:6px; background:var(--fill); border-radius:3px; overflow:hidden; display:block; }
.progress__fill { display:block; height:6px; background:var(--lime-500); }
.pips { display:flex; gap:4px; }
.pips span { flex:1; height:7px; border-radius:4px; background:var(--fill); }
.pips span.is-done { background:var(--lime-500); }

/* ---------- timeline ---------- */
.tl__row { display:flex; gap:12px; padding:13px 16px; border-bottom:1px solid var(--rule); background:var(--surface); }
.tl__row--bad { background:var(--stop-100); }
.tl__dot { margin-top:5px; }
.tl__title { font-size:13.5px; font-weight:600; }
.tl__title--bad { color:var(--stop); }
.tl__body { font-size:13px; color:var(--ink-70); margin-top:3px; line-height:1.55; }

/* ---------- flow builder ---------- */
.wait { display:flex; align-items:center; gap:10px; padding:8px 0 8px 18px; }
.wait__line { width:2px; height:16px; background:var(--edge); display:block; }
.wait__line--tall { height:26px; }
.step { display:flex; align-items:center; gap:12px; background:var(--surface); border:1px solid var(--edge); border-radius:var(--r-card); padding:13px 16px; flex-wrap:wrap; }
.step--auto { border-color:var(--amber-600); border-width:1.5px; }
.step--dragging { opacity:.5; }
.step--over { border-color:var(--green-700); }
.step__n { width:26px; height:26px; flex:0 0 26px; border-radius:50%; background:var(--fill); color:var(--muted); font-size:12.5px; display:flex; align-items:center; justify-content:center; }
.step__grip { cursor:grab; color:var(--muted); font-size:15px; flex:0 0 auto; }
.step__main { flex:1 1 240px; min-width:0; }
.step__title { font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.step__sub { font-size:12.5px; color:var(--ink-70); margin-top:2px; }
.cal { display:flex; gap:6px; }
.cal__day { flex:1 1 0; min-width:0; background:var(--page); border:1px solid var(--rule); border-radius:var(--r-input); padding:8px 9px; min-height:78px; }
.cal__day--draft { background:var(--surface); border-color:var(--amber-600); }
.cal__day--auto { background:var(--amber-100); border-color:var(--amber-600); }
.cal__day--task { background:var(--green-100); border-color:var(--green-100); }
.cal__day--quiet { background:var(--fill); border-color:var(--rule); }
.cal__dow { font-size:11.5px; color:var(--muted); }
.cal__what { font-size:12px; font-weight:600; margin-top:4px; line-height:1.35; }
.cal__note { font-size:11px; margin-top:3px; color:var(--muted); }

.sidelist { flex:0 1 236px; min-width:210px; background:var(--surface); border:1px solid var(--edge); border-radius:var(--r-card); padding:10px; }
.sidelist__label { font-size:12px; color:var(--muted); padding:4px 8px 8px; }
.sidelist__item { display:block; width:100%; text-align:left; padding:9px 10px; margin-bottom:3px; border:0; border-radius:var(--r-input); background:transparent; color:var(--ink-70); font-size:13.5px; cursor:pointer; text-decoration:none; }
.sidelist__item:hover { background:var(--fill); text-decoration:none; color:var(--ink-70); }
.sidelist__item.is-on { background:var(--green-100); color:var(--green-900); font-weight:600; }
.sidelist__meta { font-size:12px; color:var(--muted); margin-top:1px; }

/* ---------- misc ---------- */
.split { display:flex; flex-wrap:wrap; align-items:flex-start; gap:16px; }
.split__main { flex:1 1 520px; min-width:0; }
.split__aside { flex:1 1 280px; min-width:260px; max-width:320px; display:flex; flex-direction:column; gap:14px; }
.narrow { width:100%; max-width:780px; margin:0 auto; }
.mw-1160 { max-width:1160px } .mw-1060 { max-width:1060px } .mw-1000 { max-width:1000px } .mw-920 { max-width:920px } .mw-780 { max-width:780px }
.kv { display:grid; grid-template-columns:88px 1fr; gap:6px 10px; font-size:13px; }
.headed { display:flex; gap:10px; align-items:flex-start; padding:16px 18px; background:var(--warm); }
.field-row { display:flex; gap:10px; align-items:baseline; }
.field-row__label { font-size:12px; color:var(--muted); width:52px; flex:0 0 52px; }
.divider { border-top:1px solid var(--rule); }
.pad-16 { padding:16px 18px; }
.htmx-request .is-busy { opacity:.55; pointer-events:none; }
.skeleton { height:10px; border-radius:5px; background:var(--fill); }

/* ============================================================================
   CHARTS
   Marks are thin, grid and axes are recessive, and every series is named in a
   legend as well as coloured. --series-1 sits under 3:1 on white, so direct
   labels are part of the chart, not an option.
   ============================================================================ */
.chart { width:100%; display:block; overflow:visible; }
.chart__grid { stroke:var(--grid); stroke-width:1; shape-rendering:crispEdges; }
.chart__axis { stroke:var(--axis); stroke-width:1; shape-rendering:crispEdges; }
.chart__tick { font-size:11px; fill:var(--muted); font-family:var(--font-ui); }
.chart__tick--y { text-anchor:end; }
.chart__tick--x { text-anchor:middle; }
.chart__line { fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.chart__area { stroke:none; }
.chart__marker { r:4; stroke:var(--surface); stroke-width:2; }
.chart__endlabel { font-size:12px; font-weight:600; font-family:var(--font-ui); dominant-baseline:middle; }
.chart__crosshair { stroke:var(--muted); stroke-width:1; stroke-dasharray:3 3; opacity:0; pointer-events:none; }
.chart__hit { fill:transparent; cursor:crosshair; }
.chart__dot-hover { opacity:0; pointer-events:none; }
.chart__hit:hover ~ .chart__crosshair { opacity:1; }

.chart-wrap { position:relative; }
.chart-tip { position:absolute; z-index:5; pointer-events:none; opacity:0; transform:translate(-50%, -100%);
  background:var(--green-900); color:#fff; border-radius:var(--r-input); padding:8px 10px;
  font-size:12px; line-height:1.45; white-space:nowrap; box-shadow:var(--shadow-3);
  transition:opacity var(--fast) var(--ease); }
.chart-tip.is-on { opacity:1; }
.chart-tip__day { font-weight:600; margin-bottom:3px; }
.chart-tip__row { display:flex; align-items:center; gap:7px; }
.chart-tip__swatch { width:8px; height:8px; border-radius:2px; flex:0 0 8px; }
.chart-tip__val { margin-left:auto; font-weight:600; padding-left:12px; }

.legend { display:flex; flex-wrap:wrap; gap:16px; align-items:center; }
.legend__item { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink-70); }
.legend__swatch { width:10px; height:10px; border-radius:3px; flex:0 0 10px; }

/* Funnel. Bars carry the ordinal ramp, and each row states its own number, so the
   colour is reinforcement rather than the only encoding. */
.funnel__row { display:grid; grid-template-columns:112px 44px 1fr 96px; align-items:center;
  gap:12px; padding:9px 0; }
.funnel__row + .funnel__row { border-top:1px solid var(--rule); }
.funnel__label { font-size:13px; color:var(--ink-70); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.funnel__n { font-size:14px; font-weight:600; text-align:right; font-variant-numeric:tabular-nums; }
.funnel__track { position:relative; height:22px; background:var(--fill); border-radius:5px; overflow:hidden; }
.funnel__bar { position:absolute; inset:0 auto 0 0; border-radius:5px 4px 4px 5px;
  transition:width var(--slow) var(--ease); }
.funnel__note { font-size:12px; color:var(--muted); text-align:right; white-space:nowrap; }
.funnel__drop { font-size:11.5px; color:var(--muted); }

/* Share bar. Two parts, a 2px surface gap between them, both directly labelled. */
.share { display:flex; height:28px; border-radius:var(--r-pill); overflow:hidden; gap:2px; background:var(--surface); }
.share__part { height:100%; transition:width var(--slow) var(--ease); }
.share__part:first-child { border-radius:var(--r-pill) 3px 3px var(--r-pill); }
.share__part:last-child { border-radius:3px var(--r-pill) var(--r-pill) 3px; }

/* Stat tiles. A hero number is a chart form in its own right. */
.stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:14px; }
.stat-tile { background:var(--surface); border:1px solid var(--edge); border-radius:var(--r-card);
  padding:16px 18px; box-shadow:var(--shadow-1); }
.stat-tile__value { font-family:var(--font-display); font-size:32px; font-weight:800;
  letter-spacing:-0.045em; color:var(--green-900); line-height:1.05; font-variant-numeric:tabular-nums; }
.stat-tile__label { font-size:13px; color:var(--ink); margin-top:6px; font-weight:500; }
.stat-tile__note { font-size:12px; color:var(--muted); margin-top:2px; }

/* Inline bar inside a table cell. */
.microbar { height:6px; border-radius:3px; background:var(--fill); overflow:hidden; min-width:44px; }
.microbar__fill { display:block; height:6px; border-radius:3px; background:var(--series-2); }

/* Data table behind a chart. The relief for a sub-3:1 series colour, and useful anyway. */
.viz-table { width:100%; border-collapse:collapse; font-size:12.5px; }
.viz-table th { text-align:left; font-weight:600; color:var(--muted); padding:6px 10px 6px 0; font-size:11.5px; }
.viz-table td { padding:5px 10px 5px 0; color:var(--ink-70); border-top:1px solid var(--rule);
  font-variant-numeric:tabular-nums; }
details.viz-details { margin-top:14px; }
details.viz-details > summary { font-size:12.5px; color:var(--link); cursor:pointer; list-style:none; }
details.viz-details > summary::-webkit-details-marker { display:none; }
details.viz-details > summary::before { content:"▸ "; }
details.viz-details[open] > summary::before { content:"▾ "; }

/* ============================================================================
   THE TODAY HERO
   The first thing a rep reads each morning, so it gets the one gradient in the
   whole interface and the largest numbers. Everything else stays quiet.
   ============================================================================ */
.hero { position:relative; border:1px solid var(--edge); border-radius:var(--r-card);
  background:linear-gradient(180deg, var(--lime-100) 0%, var(--surface) 62%);
  box-shadow:var(--shadow-2); overflow:hidden; }
.hero::before { content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--lime-500), var(--amber-500)); }
.hero__head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:18px 20px 0; }
.hero__title { font-family:var(--font-display); font-size:17px; font-weight:700;
  letter-spacing:-0.04em; color:var(--green-900); }
.hero__when { color:var(--agent-ink); }
.hero__link { font-size:12.5px; }
.hero__figures { display:grid; grid-template-columns:repeat(auto-fit, minmax(168px, 1fr));
  gap:1px; margin-top:16px; background:var(--rule); border-top:1px solid var(--rule); }
.figure { background:var(--surface); padding:16px 20px 18px; }
.figure--draft { background:var(--warm); }
.figure__value { font-family:var(--font-display); font-size:34px; font-weight:800;
  letter-spacing:-0.045em; color:var(--green-900); line-height:1; font-variant-numeric:tabular-nums; }
.figure--draft .figure__value { color:var(--draft-ink); }
.figure__label { font-size:12.5px; color:var(--ink-70); margin-top:7px; }
.figure__action { display:inline-block; font-size:12px; font-weight:500; margin-top:8px; }

/* Section headings elsewhere get a little more air than they had. */
.card--pad { padding:18px 20px; }