/* ============================================================================
   SCM Master — operations UI stylesheet (self-contained).
   Drop-in replacement for frontend/app.css. No build step, no dependencies.
   Part 1: design tokens (TrueSpend editorial system).
   Part 2: component styles (shell, tables, pills, lifecycle stepper, login).
   Fonts load from Google Fonts; system fallbacks keep it working offline.
============================================================================ */

/* =============================================================================
   TrueSpend — Design Tokens
   Editorial · Confident · Finance-grade
   Paper not screen. Ink not glow. Gold for signal, never for decoration.
============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

:root {
  /* ---------- Brand --------------------------------------------------- */
  --ts-brand-gold:        #B07219;   /* the "T" mark gold — primary accent */
  --ts-brand-gold-deep:   #8F5C12;   /* hover / pressed */
  --ts-brand-gold-soft:   #E9DAB5;   /* tint backgrounds */
  --ts-brand-gold-wash:   #F7EFDE;   /* subtle highlight */

  /* ---------- Surfaces (paper) ---------------------------------------- */
  --ts-paper:             #F7F4ED;   /* canvas — warm off-white */
  --ts-paper-deep:        #EFEBE1;   /* secondary surface (rails, footers) */
  --ts-surface:           #FFFEFB;   /* card / sheet */
  --ts-surface-raised:    #FFFFFF;   /* modal / popover */
  --ts-ink-night:         #161413;   /* high-contrast inverse surface */

  /* ---------- Ink (text) ---------------------------------------------- */
  --ts-ink:               #161413;   /* primary text */
  --ts-ink-soft:          #3D3633;   /* secondary text */
  --ts-ink-mute:          #75695F;   /* tertiary, captions, labels */
  --ts-ink-faint:         #A89B8B;   /* placeholder, disabled */
  --ts-ink-inverse:       #F7F4ED;   /* text on dark / on gold */

  /* ---------- Lines --------------------------------------------------- */
  --ts-line:              #E5DDD0;   /* hairline divider */
  --ts-line-soft:         #EEE7DA;   /* whisper divider */
  --ts-line-strong:       #C9BFAE;   /* emphasized rule */

  /* ---------- Semantic (muted, finance-grade — never neon) ------------ */
  --ts-positive:          #3D7A5A;   /* sage — approved, on-track */
  --ts-positive-soft:     #DCE8DF;
  --ts-positive-wash:     #EEF3EE;

  --ts-warning:           #C99119;   /* amber — needs attention */
  --ts-warning-soft:      #F3E4BE;
  --ts-warning-wash:      #FAF1D7;

  --ts-negative:          #B5462E;   /* brick — blocked, rejected */
  --ts-negative-soft:     #ECCFC7;
  --ts-negative-wash:     #F6E5DE;

  --ts-info:              #2B5F7A;   /* slate-teal — informational */
  --ts-info-soft:         #D2DFE6;
  --ts-info-wash:         #E6EEF2;

  /* ---------- Fonts -------------------------------------------------- */
  --ts-font-display:      'Instrument Serif', 'Times New Roman', Georgia, serif;
  --ts-font-sans:         'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ts-font-mono:         'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- Type scale --------------------------------------------- */
  /* Display uses serif; everything else sans. Sizes are deliberate and few. */
  --ts-text-xs:           12px;   /* metadata, eyebrow */
  --ts-text-sm:           13px;   /* secondary UI */
  --ts-text-base:         15px;   /* body */
  --ts-text-md:           17px;   /* prominent body */
  --ts-text-lg:           20px;   /* section titles */
  --ts-text-xl:           28px;   /* page H2 (sans) */
  --ts-text-2xl:          40px;   /* display H2 (serif) */
  --ts-text-3xl:          56px;   /* display H1 (serif) */
  --ts-text-4xl:          84px;   /* hero (serif) */

  /* line-heights */
  --ts-lh-tight:          1.04;
  --ts-lh-snug:           1.18;
  --ts-lh-normal:         1.5;
  --ts-lh-loose:          1.65;

  /* tracking */
  --ts-track-tight:       -0.02em;
  --ts-track-display:     -0.025em;
  --ts-track-eyebrow:     0.14em;   /* uppercase eyebrows */
  --ts-track-mono:        -0.01em;

  /* ---------- Spacing (4px base) ------------------------------------- */
  --ts-space-1:  4px;
  --ts-space-2:  8px;
  --ts-space-3:  12px;
  --ts-space-4:  16px;
  --ts-space-5:  20px;
  --ts-space-6:  24px;
  --ts-space-8:  32px;
  --ts-space-10: 40px;
  --ts-space-12: 48px;
  --ts-space-16: 64px;
  --ts-space-20: 80px;

  /* ---------- Radii (restrained; never pill-cards) ------------------- */
  --ts-radius-xs:  2px;    /* tags, inline marks */
  --ts-radius-sm:  4px;    /* buttons, inputs */
  --ts-radius-md:  6px;    /* cards */
  --ts-radius-lg:  10px;   /* large surfaces */
  --ts-radius-pill: 999px;

  /* ---------- Shadows (paper-on-paper, never glow) ------------------- */
  --ts-shadow-xs:  0 1px 0 rgba(22, 20, 19, 0.04);
  --ts-shadow-sm:  0 1px 2px rgba(22, 20, 19, 0.04), 0 0 0 1px rgba(22, 20, 19, 0.04);
  --ts-shadow-md:  0 2px 6px rgba(22, 20, 19, 0.06), 0 1px 2px rgba(22, 20, 19, 0.04);
  --ts-shadow-lg:  0 12px 32px -8px rgba(22, 20, 19, 0.16), 0 4px 12px rgba(22, 20, 19, 0.06);
  --ts-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5);

  /* ---------- Motion -------------------------------------------------- */
  --ts-ease:            cubic-bezier(0.2, 0.6, 0.2, 1);
  --ts-ease-emphatic:   cubic-bezier(0.16, 1, 0.3, 1);
  --ts-dur-fast:        120ms;
  --ts-dur-med:         220ms;
  --ts-dur-slow:        420ms;
}

/* =============================================================================
   Semantic typography
   ---------------------------------------------------------------------------
   Headlines are serif (Instrument Serif) — they carry the editorial voice.
   UI labels, metadata, numbers are sans (Geist) — they stay in service.
   Mono for references, IDs, code, money where alignment matters.
============================================================================= */

.ts-hero,
.ts-h1,
.ts-h2,
.ts-display {
  font-family: var(--ts-font-display);
  font-weight: 400;
  color: var(--ts-ink);
  letter-spacing: var(--ts-track-display);
  line-height: var(--ts-lh-tight);
  text-wrap: balance;
}

.ts-hero    { font-size: var(--ts-text-4xl); }
.ts-h1      { font-size: var(--ts-text-3xl); }
.ts-h2      { font-size: var(--ts-text-2xl); }
.ts-display { font-size: var(--ts-text-xl); font-style: normal; }

/* Sans headings — for in-product UI where the serif would be too literary */
.ts-h3 {
  font-family: var(--ts-font-sans);
  font-weight: 600;
  font-size: var(--ts-text-lg);
  letter-spacing: var(--ts-track-tight);
  line-height: var(--ts-lh-snug);
  color: var(--ts-ink);
}

.ts-h4 {
  font-family: var(--ts-font-sans);
  font-weight: 600;
  font-size: var(--ts-text-md);
  letter-spacing: var(--ts-track-tight);
  line-height: var(--ts-lh-snug);
  color: var(--ts-ink);
}

.ts-body {
  font-family: var(--ts-font-sans);
  font-weight: 400;
  font-size: var(--ts-text-base);
  line-height: var(--ts-lh-loose);
  color: var(--ts-ink-soft);
  text-wrap: pretty;
}

.ts-body-sm {
  font-family: var(--ts-font-sans);
  font-weight: 400;
  font-size: var(--ts-text-sm);
  line-height: var(--ts-lh-normal);
  color: var(--ts-ink-soft);
}

.ts-label {
  font-family: var(--ts-font-sans);
  font-weight: 500;
  font-size: var(--ts-text-sm);
  color: var(--ts-ink);
  letter-spacing: 0;
}

.ts-eyebrow {
  font-family: var(--ts-font-sans);
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--ts-track-eyebrow);
  color: var(--ts-ink-mute);
}

.ts-caption {
  font-family: var(--ts-font-sans);
  font-weight: 400;
  font-size: var(--ts-text-xs);
  color: var(--ts-ink-mute);
  line-height: var(--ts-lh-normal);
}

.ts-mono,
.ts-ref {
  font-family: var(--ts-font-mono);
  font-weight: 500;
  font-size: var(--ts-text-xs);
  letter-spacing: var(--ts-track-mono);
  color: var(--ts-ink-soft);
}

/* Money — tabular figures, lined for stacked columns */
.ts-money {
  font-family: var(--ts-font-sans);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  letter-spacing: -0.005em;
  color: var(--ts-ink);
  font-weight: 500;
}

/* Editorial mark — italic serif accent inside body copy */
.ts-mark {
  font-family: var(--ts-font-display);
  font-style: normal;
  color: var(--ts-brand-gold-deep);
}

/* no-italic override — brand decision: keep the accent color on `em`, drop the slant */
.ts-hero em, .ts-h1 em, .ts-h2 em, .ts-h3 em, .ts-h4 em, .ts-display em,
.ts-body em, .ts-body-sm em, .ts-label em, .ts-mark, em.ts-mark {
  font-style: normal;
  color: var(--ts-brand-gold-deep);
}


/* ===== Component styles ===================================================== */
/* ─────────────────────────────────────────────────────────────────────
   SCM Master — operations UI. Layered on tokens.css (TrueSpend).
   Paper · ink · gold. Hairline rules carry hierarchy, not shadow.
   ───────────────────────────────────────────────────────────────────── */

html, body, #root { height: 100%; margin: 0; padding: 0; }
* { box-sizing: border-box; }
body {
  background: var(--ts-paper);
  color: var(--ts-ink);
  font-family: var(--ts-font-sans);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
}
button { font-family: inherit; }

/* density knob (set on .app) */
.app { --row-pad-y: 14px; --section-gap: 36px; }
.app[data-density="compact"] { --row-pad-y: 9px; --section-gap: 26px; }

/* ─── Shell ───────────────────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

.sidebar {
  background: var(--ts-paper-deep);
  border-right: 1px solid var(--ts-line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.sidebar__brand {
  display: flex; align-items: center; gap: 11px;
  padding: 20px 20px 18px;
}
.brandmark {
  width: 30px; height: 30px; border-radius: 6px;
  background: var(--ts-ink-night);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.sidebar__brand-word {
  font-family: var(--ts-font-display);
  font-size: 22px; letter-spacing: -0.02em; color: var(--ts-ink);
  line-height: 1;
}
.sidebar__brand-word span { color: var(--ts-brand-gold-deep); }
.sidebar__tag {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ts-ink-mute); margin-top: 3px;
}

.sidebar__sectionhead {
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ts-ink-mute);
  padding: 18px 22px 8px;
}
.sidebar__nav { display: flex; flex-direction: column; padding: 0 12px; gap: 1px; }
.navlink {
  display: flex; align-items: center; gap: 11px;
  background: none; border: none; cursor: pointer;
  font-family: var(--ts-font-sans);
  padding: 8px 10px; border-radius: 4px;
  color: var(--ts-ink-soft);
  font-size: 13.5px; font-weight: 500;
  letter-spacing: -0.005em;
  width: 100%; text-align: left;
  transition: background var(--ts-dur-fast) var(--ts-ease), color var(--ts-dur-fast) var(--ts-ease);
}
.navlink:hover { background: rgba(22,20,19,0.04); color: var(--ts-ink); }
.navlink--active {
  background: var(--ts-surface);
  color: var(--ts-ink);
  box-shadow: inset 0 0 0 1px var(--ts-line);
}
.navlink__icon { color: var(--ts-ink-mute); display: flex; flex-shrink: 0; }
.navlink--active .navlink__icon { color: var(--ts-brand-gold); }
.navlink__count {
  margin-left: auto;
  font-family: var(--ts-font-mono);
  font-size: 11px; color: var(--ts-ink-mute);
  background: rgba(22,20,19,0.05);
  padding: 1px 6px; border-radius: 99px;
  min-width: 18px; text-align: center;
}
.navlink__count--urgent { color: var(--ts-negative); background: var(--ts-negative-wash); }
.navlink--external { text-decoration: none; }
.navlink__ext { margin-left: auto; color: var(--ts-ink-faint); display: flex; flex-shrink: 0; }
.navlink--external:hover .navlink__ext { color: var(--ts-brand-gold); }

.sidebar__user {
  margin-top: auto;
  border-top: 1px solid var(--ts-line);
  padding: 13px 16px;
  display: flex; align-items: center; gap: 10px;
}
.avatar {
  width: 30px; height: 30px; border-radius: 99px;
  background: var(--ts-brand-gold-soft);
  color: var(--ts-brand-gold-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; flex-shrink: 0;
}
.sidebar__user-name { font-size: 13px; font-weight: 500; color: var(--ts-ink); line-height: 1.2; }
.sidebar__user-sub  { font-size: 11px; color: var(--ts-ink-mute); margin-top: 2px; }

/* ─── Main ────────────────────────────────────────────────────────── */
.main { display: flex; flex-direction: column; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(247, 244, 237, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--ts-line);
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 32px; min-height: 58px;
}
.crumbs { font-size: 13px; color: var(--ts-ink-mute); display: flex; align-items: center; gap: 7px; }
.crumbs strong { color: var(--ts-ink); font-weight: 500; }
.crumbs svg { color: var(--ts-ink-faint); }
.topbar__right { display: flex; align-items: center; gap: 8px; }
.searchbar { position: relative; display: flex; align-items: center; }
.searchbar input {
  font-family: var(--ts-font-sans); font-size: 13px;
  width: 280px; padding: 8px 12px 8px 34px;
  background: var(--ts-surface); border: 1px solid var(--ts-line);
  border-radius: 4px; color: var(--ts-ink); outline: none;
}
.searchbar input::placeholder { color: var(--ts-ink-faint); }
.searchbar input:focus { border-color: var(--ts-brand-gold); box-shadow: 0 0 0 3px var(--ts-brand-gold-wash); }
.searchbar__icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--ts-ink-faint); pointer-events: none; display: flex; }
.iconbtn {
  background: none; border: 1px solid transparent; cursor: pointer;
  width: 32px; height: 32px; border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ts-ink-mute);
  transition: background var(--ts-dur-fast), color var(--ts-dur-fast);
}
.iconbtn:hover { background: rgba(22,20,19,0.05); color: var(--ts-ink); }

.content { flex: 1; padding: 30px 32px 56px; }
.content--rail { display: grid; grid-template-columns: 1fr 312px; gap: 36px; align-items: start; }

/* ─── Page header ─────────────────────────────────────────────────── */
.pagehead {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 26px; padding-bottom: 18px;
  border-bottom: 1px solid var(--ts-line);
}
.pagehead__eyebrow {
  font-size: 11px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ts-ink-mute); margin-bottom: 9px;
}
.pagehead__title {
  font-family: var(--ts-font-display);
  font-size: 42px; letter-spacing: -0.025em;
  color: var(--ts-ink); line-height: 1; margin: 0;
}
.pagehead__sub { font-size: 13.5px; color: var(--ts-ink-mute); margin-top: 11px; max-width: 560px; line-height: 1.5; }
.pagehead__actions { display: flex; gap: 8px; align-items: center; }

/* ─── Stats strip ─────────────────────────────────────────────────── */
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--ts-line); border-radius: 8px;
  background: var(--ts-surface); margin-bottom: var(--section-gap); overflow: hidden;
}
.stat { padding: 18px 22px; border-right: 1px solid var(--ts-line); }
.stat:last-child { border-right: none; }
.stat__label { font-size: 11.5px; color: var(--ts-ink-mute); margin-bottom: 9px; display: flex; align-items: center; gap: 7px; }
.stat__val {
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 27px; font-weight: 600; color: var(--ts-ink);
  letter-spacing: -0.02em; line-height: 1.05;
}
.stat__val--gold { color: var(--ts-brand-gold-deep); }
.stat__hint { font-size: 11.5px; color: var(--ts-ink-mute); margin-top: 7px; }
.stat__hint--pos { color: var(--ts-positive); }
.stat__hint--neg { color: var(--ts-negative); }

/* ─── Section ─────────────────────────────────────────────────────── */
.section { margin-bottom: var(--section-gap); }
.section__head { display: flex; align-items: baseline; gap: 11px; margin-bottom: 13px; }
.section__title { font-size: 14px; font-weight: 600; color: var(--ts-ink); letter-spacing: -0.005em; }
.section__count {
  font-family: var(--ts-font-mono); font-size: 11px; color: var(--ts-ink-mute);
  padding: 1px 7px; border-radius: 99px; background: var(--ts-paper-deep); border: 1px solid var(--ts-line);
}
.section__hint { font-size: 12px; color: var(--ts-ink-mute); margin-left: auto; }

/* ─── Table ───────────────────────────────────────────────────────── */
.panel {
  background: var(--ts-surface); border: 1px solid var(--ts-line);
  border-radius: 8px; overflow: hidden;
}
.tbl { width: 100%; border-collapse: collapse; }
.tbl thead th {
  text-align: left; padding: 11px 22px;
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ts-ink-mute); background: var(--ts-paper-deep);
  border-bottom: 1px solid var(--ts-line); white-space: nowrap;
}
.tbl thead th.num, .tbl td.num { text-align: right; }
.tbl tbody td { padding: var(--row-pad-y) 22px; border-bottom: 1px solid var(--ts-line); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr.clickable { cursor: pointer; transition: background var(--ts-dur-fast) var(--ts-ease); }
.tbl tbody tr.clickable:hover { background: var(--ts-brand-gold-wash); }
.tbl tbody tr.is-open { background: var(--ts-paper-deep); }
.tbl tbody tr.is-open:hover { background: var(--ts-paper-deep); }
.tbl .ref { font-family: var(--ts-font-mono); font-size: 12.5px; color: var(--ts-ink); letter-spacing: -0.01em; white-space: nowrap; }
.tbl .muted { color: var(--ts-ink-mute); }
.cell-prod { display: flex; align-items: center; gap: 10px; }
.cell-prod__icon { color: var(--ts-ink-mute); display: flex; flex-shrink: 0; }
.cell-prod__name { font-size: 13.5px; color: var(--ts-ink); letter-spacing: -0.005em; }
.cell-prod__cat { font-size: 11.5px; color: var(--ts-ink-mute); margin-top: 1px; }

/* ─── Pills ───────────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 500; padding: 3px 9px; border-radius: 3px;
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.3; white-space: nowrap;
}
.pill__dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }

/* ─── Buttons ─────────────────────────────────────────────────────── */
.btn {
  font-family: var(--ts-font-sans); font-weight: 500; font-size: 13px; line-height: 1;
  letter-spacing: -0.005em; padding: 8px 13px; border-radius: 4px; border: 1px solid transparent;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; white-space: nowrap;
  transition: background var(--ts-dur-fast) var(--ts-ease), border-color var(--ts-dur-fast) var(--ts-ease), color var(--ts-dur-fast) var(--ts-ease);
}
.btn:focus-visible { outline: 2px solid var(--ts-brand-gold); outline-offset: 2px; }
.btn--primary { background: var(--ts-brand-gold); color: #FFFEFB; }
.btn--primary:hover { background: var(--ts-brand-gold-deep); }
.btn--ink { background: var(--ts-ink-night); color: var(--ts-paper); }
.btn--ink:hover { background: #000; }
.btn--secondary { background: var(--ts-surface); color: var(--ts-ink); border-color: var(--ts-line-strong); }
.btn--secondary:hover { background: var(--ts-paper-deep); }
.btn--ghost { background: transparent; color: var(--ts-ink-soft); border-color: var(--ts-line); }
.btn--ghost:hover { color: var(--ts-ink); background: var(--ts-paper-deep); }
.btn--sm { padding: 5px 10px; font-size: 12px; }
.btn--block { width: 100%; }

/* ─── Asset expanded brief ────────────────────────────────────────── */
.brief td { padding: 0 !important; background: var(--ts-paper-deep); border-bottom: 1px solid var(--ts-line) !important; }
.brief__inner {
  padding: 22px 26px 24px;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 36px;
}
.brief__h {
  font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ts-ink-mute); margin-bottom: 12px;
}
.prov { display: flex; flex-direction: column; gap: 0; }
.prov__row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--ts-line-soft); }
.prov__row:last-child { border-bottom: none; }
.prov__k { font-size: 12.5px; color: var(--ts-ink-mute); }
.prov__v { font-size: 13px; color: var(--ts-ink); letter-spacing: -0.005em; }
.prov__v.ref { font-family: var(--ts-font-mono); font-size: 12.5px; }
.prov__v.money { font-variant-numeric: tabular-nums lining-nums; font-weight: 600; }

/* lifecycle stepper */
.stepper { display: flex; align-items: center; gap: 0; margin: 4px 0 18px; }
.step { display: flex; align-items: center; flex: 1; }
.step:last-child { flex: 0; }
.step__node {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--ts-line-strong); background: var(--ts-surface);
  display: flex; align-items: center; justify-content: center;
}
.step__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ts-line-strong); }
.step--done .step__node { border-color: var(--ts-positive); background: var(--ts-positive); }
.step--done .step__dot { background: var(--ts-surface); }
.step--current .step__node { border-color: var(--ts-brand-gold); background: var(--ts-brand-gold); box-shadow: 0 0 0 4px var(--ts-brand-gold-wash); }
.step--current .step__dot { background: var(--ts-surface); }
.step__bar { height: 1.5px; flex: 1; background: var(--ts-line-strong); margin: 0 2px; }
.step--done .step__bar { background: var(--ts-positive); }
.steplabels { display: flex; justify-content: space-between; margin-top: 7px; }
.steplabel { font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ts-ink-faint); flex: 1; text-align: center; }
.steplabel:first-child { text-align: left; }
.steplabel:last-child { text-align: right; }
.steplabel--current { color: var(--ts-brand-gold-deep); font-weight: 600; }

/* event log */
.log { display: flex; flex-direction: column; }
.log__entry { display: flex; gap: 12px; padding-bottom: 16px; position: relative; }
.log__entry:last-child { padding-bottom: 0; }
.log__rail { display: flex; flex-direction: column; align-items: center; }
.log__dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; }
.log__line { width: 1px; flex: 1; background: var(--ts-line); margin-top: 3px; }
.log__entry:last-child .log__line { display: none; }
.log__body { min-width: 0; }
.log__time { font-family: var(--ts-font-mono); font-size: 11px; color: var(--ts-ink-faint); }
.log__note { font-size: 12.5px; color: var(--ts-ink-soft); line-height: 1.4; margin-top: 2px; }
.brief__actions { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; align-items: center; }
.brief__actions-label { font-size: 11.5px; color: var(--ts-ink-mute); margin-right: 2px; }

/* ─── Toolbar (filters) ───────────────────────────────────────────── */
.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; }
.segmented { display: inline-flex; border: 1px solid var(--ts-line); border-radius: 5px; overflow: hidden; background: var(--ts-surface); }
.segmented button {
  background: none; border: none; cursor: pointer;
  padding: 7px 13px; font-size: 12.5px; font-weight: 500; color: var(--ts-ink-mute);
  border-right: 1px solid var(--ts-line); letter-spacing: -0.005em; white-space: nowrap;
  transition: background var(--ts-dur-fast), color var(--ts-dur-fast);
}
.segmented button:last-child { border-right: none; }
.segmented button:hover { color: var(--ts-ink); }
.segmented button.active { background: var(--ts-ink-night); color: var(--ts-paper); }
.toolbar__spacer { flex: 1; }
.toolbar__count { font-size: 12.5px; color: var(--ts-ink-mute); }

/* ─── Capacity bar ────────────────────────────────────────────────── */
.cap-bar { width: 130px; height: 7px; border-radius: 99px; background: var(--ts-paper-deep); overflow: hidden; border: 1px solid var(--ts-line); }
.cap-bar__fill { height: 100%; border-radius: 99px; }
.cap-util { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; }

/* ─── Spend bars ──────────────────────────────────────────────────── */
.spendbar-track { flex: 1; height: 8px; background: var(--ts-paper-deep); border-radius: 99px; overflow: hidden; }
.spendbar-fill { height: 100%; background: var(--ts-brand-gold); border-radius: 99px; }
.spend-summary { display: flex; gap: 0; border: 1px solid var(--ts-line); border-radius: 8px; overflow: hidden; margin-bottom: var(--section-gap); background: var(--ts-surface); }
.spend-summary > div { padding: 20px 24px; border-right: 1px solid var(--ts-line); flex: 1; }
.spend-summary > div:last-child { border-right: none; }

/* ─── Lifecycle distribution bar ──────────────────────────────────── */
.dist { display: flex; height: 38px; border-radius: 6px; overflow: hidden; border: 1px solid var(--ts-line); }
.dist__seg { display: flex; align-items: center; justify-content: center; min-width: 0; transition: flex var(--ts-dur-med) var(--ts-ease); }
.dist__seg-n { font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.dist-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; }
.dist-legend__item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--ts-ink-soft); }
.dist-legend__dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.dist-legend__n { font-variant-numeric: tabular-nums; color: var(--ts-ink); font-weight: 600; margin-left: 2px; }

/* ─── Right rail ──────────────────────────────────────────────────── */
.rail__head {
  font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ts-ink-mute); margin: 2px 0 16px; display: flex; align-items: center; gap: 8px;
}
.rail__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ts-positive); box-shadow: 0 0 0 4px var(--ts-positive-wash); }
.feed { display: flex; flex-direction: column; }
.feed__entry { padding: 13px 0; border-bottom: 1px solid var(--ts-line-soft); }
.feed__entry:last-child { border-bottom: none; }
.feed__time { font-family: var(--ts-font-mono); font-size: 11px; color: var(--ts-ink-faint); margin-bottom: 4px; }
.feed__title { font-size: 13px; color: var(--ts-ink); line-height: 1.4; letter-spacing: -0.005em; }
.feed__meta { font-size: 11.5px; color: var(--ts-ink-mute); margin-top: 3px; }

/* attention list */
.attn { display: flex; flex-direction: column; }
.attn__item { display: flex; align-items: flex-start; gap: 13px; padding: 14px 0; border-bottom: 1px solid var(--ts-line-soft); }
.attn__item:last-child { border-bottom: none; }
.attn__icon { width: 30px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.attn__title { font-size: 13.5px; color: var(--ts-ink); font-weight: 500; letter-spacing: -0.005em; }
.attn__sub { font-size: 12px; color: var(--ts-ink-mute); margin-top: 2px; line-height: 1.4; }
.attn__action { margin-left: auto; align-self: center; }

/* ─── Login ───────────────────────────────────────────────────────── */
.login { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.login__aside {
  background: var(--ts-ink-night); color: var(--ts-ink-inverse);
  padding: 56px 60px; display: flex; flex-direction: column; justify-content: space-between;
}
.login__brand { display: flex; align-items: center; gap: 12px; }
.login__brand-word { font-family: var(--ts-font-display); font-size: 26px; letter-spacing: -0.02em; }
.login__brand-word span { color: var(--ts-brand-gold); }
.login__pitch { font-family: var(--ts-font-display); font-size: 46px; line-height: 1.14; letter-spacing: -0.02em; max-width: 13ch; display: block; }
.login__pitch em { font-style: normal; color: var(--ts-brand-gold); }
.login__pitch-sub { font-size: 15px; color: rgba(247,244,237,0.6); margin-top: 28px; max-width: 42ch; line-height: 1.6; }
.login__foot { font-size: 12px; color: rgba(247,244,237,0.4); display: flex; gap: 18px; }
.login__main { display: flex; align-items: center; justify-content: center; padding: 40px; }
.login__card { width: 100%; max-width: 360px; }
.login__h { font-family: var(--ts-font-display); font-size: 34px; letter-spacing: -0.02em; color: var(--ts-ink); margin: 0 0 6px; }
.login__sub { font-size: 13.5px; color: var(--ts-ink-mute); margin-bottom: 28px; }
.field { margin-bottom: 16px; }
.field__label { display: block; font-size: 12.5px; font-weight: 500; color: var(--ts-ink); margin-bottom: 6px; }
.input {
  font-family: var(--ts-font-sans); font-size: 14px; padding: 10px 12px; border-radius: 4px;
  border: 1px solid var(--ts-line); background: var(--ts-surface); color: var(--ts-ink); width: 100%; outline: none;
  transition: border-color var(--ts-dur-fast), box-shadow var(--ts-dur-fast);
}
.input:focus { border-color: var(--ts-brand-gold); box-shadow: 0 0 0 3px var(--ts-brand-gold-wash); }
.login__hint { font-size: 12px; color: var(--ts-ink-mute); margin-top: 18px; text-align: center; }
.login__hint code { font-family: var(--ts-font-mono); background: var(--ts-paper-deep); padding: 1px 6px; border-radius: 3px; color: var(--ts-ink-soft); }

@media (max-width: 1180px) {
  .content--rail { grid-template-columns: 1fr; gap: 0; }
  .rail { display: none; }
}
@media (max-width: 900px) {
  .login { grid-template-columns: 1fr; }
  .login__aside { display: none; }
}

.fade-in { animation: fade-in 240ms var(--ts-ease) both; }
@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }


/* ===== Vanilla-app utilities (toast, states, helpers) ====================== */
[hidden] { display: none !important; }
.hidden { display: none !important; }

.toast {
  position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(8px);
  background: var(--ts-ink-night); color: var(--ts-paper);
  padding: 11px 18px; border-radius: var(--ts-radius-sm);
  font-size: 13px; font-weight: 500; letter-spacing: -0.005em;
  box-shadow: var(--ts-shadow-lg); z-index: 80;
  opacity: 0; pointer-events: none; transition: opacity var(--ts-dur-med) var(--ts-ease), transform var(--ts-dur-med) var(--ts-ease);
  display: flex; align-items: center; gap: 9px; max-width: 460px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--ts-negative); }
.toast.ok  { background: var(--ts-positive); }

.state {
  padding: 56px 24px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.state__icon { color: var(--ts-ink-faint); }
.state__title { font-size: 15px; font-weight: 600; color: var(--ts-ink); letter-spacing: -0.005em; }
.state__sub { font-size: 13px; color: var(--ts-ink-mute); max-width: 40ch; line-height: 1.5; }

.skeleton {
  background: linear-gradient(90deg, var(--ts-paper-deep) 25%, var(--ts-line-soft) 37%, var(--ts-paper-deep) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite;
  border-radius: var(--ts-radius-sm); height: 14px;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

.role-pill {
  font-family: var(--ts-font-mono); font-size: 10px; letter-spacing: 0.04em;
  color: var(--ts-brand-gold-deep); background: var(--ts-brand-gold-wash);
  padding: 1px 6px; border-radius: var(--ts-radius-xs); text-transform: uppercase;
}
@media (prefers-reduced-motion: reduce) { .fade-in, .skeleton { animation: none; } }


/* ===== Agent drawer ========================================================
   The top-bar "✨ Agent" button + drawer were removed (the Requisitions page is
   the single agent surface). Drawer styles below are retained but unused. */

.scrim {
  position: fixed; inset: 0; z-index: 60; background: rgba(22,20,19,0.32);
  opacity: 0; pointer-events: none; transition: opacity var(--ts-dur-med) var(--ts-ease);
}
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 61; width: 440px; max-width: 92vw;
  background: var(--ts-surface); border-left: 1px solid var(--ts-line);
  box-shadow: var(--ts-shadow-lg); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform var(--ts-dur-med) var(--ts-ease-emphatic);
}
.drawer.open { transform: none; }
.drawer__head {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 22px; border-bottom: 1px solid var(--ts-line); flex-shrink: 0;
}
.drawer__mark { width: 28px; height: 28px; border-radius: 6px; background: var(--ts-ink-night); display: flex; align-items: center; justify-content: center; }
.drawer__mark svg { color: var(--ts-brand-gold); }
.drawer__title { font-family: var(--ts-font-display); font-size: 22px; letter-spacing: -0.02em; line-height: 1; }
.drawer__sub { font-size: 11px; color: var(--ts-ink-mute); margin-top: 3px; }
.drawer__autonomy {
  margin-left: auto; font-size: 10px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ts-brand-gold-deep); background: var(--ts-brand-gold-wash);
  padding: 3px 9px; border-radius: var(--ts-radius-xs); border: 1px solid var(--ts-brand-gold-soft);
}
.drawer__body { flex: 1; overflow-y: auto; padding: 22px; }
.drawer__sectionhead {
  font-size: 10px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ts-ink-mute); margin: 0 0 12px;
}
.drawer__section { margin-bottom: 28px; }
.drawer__section:last-child { margin-bottom: 0; }

.insight { padding: 14px 0; border-bottom: 1px solid var(--ts-line-soft); }
.insight:first-child { padding-top: 0; }
.insight:last-child { border-bottom: none; }
.insight__top { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.insight__title { font-size: 13.5px; font-weight: 600; color: var(--ts-ink); letter-spacing: -0.005em; flex: 1; }
.insight__finding { font-size: 12.5px; color: var(--ts-ink-soft); line-height: 1.5; }
.insight__ev { display: flex; flex-direction: column; gap: 3px; margin-top: 8px; }
.insight__ev-item { font-size: 11.5px; color: var(--ts-ink-mute); display: flex; gap: 7px; align-items: baseline; }
.insight__ev-item::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--ts-line-strong); flex-shrink: 0; transform: translateY(-2px); }
.insight__meta { font-size: 11px; color: var(--ts-ink-faint); margin-top: 8px; line-height: 1.5; }
.conf { display: flex; align-items: center; gap: 7px; }
.conf__track { width: 46px; height: 5px; border-radius: 99px; background: var(--ts-paper-deep); overflow: hidden; }
.conf__fill { height: 100%; background: var(--ts-brand-gold); border-radius: 99px; }
.conf__n { font-family: var(--ts-font-mono); font-size: 10.5px; color: var(--ts-ink-mute); }

.decision { border: 1px solid var(--ts-line); border-radius: var(--ts-radius-md); padding: 14px 16px; margin-bottom: 10px; }
.decision__top { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; }
.decision__name { font-size: 13px; font-weight: 600; color: var(--ts-ink); letter-spacing: -0.005em; }
.decision__sup { font-size: 11.5px; color: var(--ts-ink-mute); }
.decision__total { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; font-size: 14px; }
.decision__rat { font-size: 12px; color: var(--ts-ink-soft); line-height: 1.5; }
.decision__foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.decision__trigger { font-size: 11px; color: var(--ts-ink-mute); }
.decision__check { display: flex; align-items: center; gap: 7px; margin-left: auto; font-size: 12px; color: var(--ts-ink-soft); cursor: pointer; user-select: none; }
.decision__check input { accent-color: var(--ts-brand-gold); width: 15px; height: 15px; }
.drawer__foot { border-top: 1px solid var(--ts-line); padding: 14px 22px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.drawer__foot .muted { font-size: 12px; color: var(--ts-ink-mute); }

/* ===== Tweaks panel (vanilla host protocol) ================================ */
.tw {
  position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 268px;
  background: var(--ts-surface-raised); border: 1px solid var(--ts-line-strong);
  border-radius: var(--ts-radius-lg); box-shadow: var(--ts-shadow-lg);
  padding: 16px; font-family: var(--ts-font-sans);
  opacity: 0; transform: translateY(8px) scale(0.98); pointer-events: none;
  transition: opacity var(--ts-dur-med) var(--ts-ease), transform var(--ts-dur-med) var(--ts-ease);
}
.tw.open { opacity: 1; transform: none; pointer-events: auto; }
.tw__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.tw__title { font-family: var(--ts-font-display); font-size: 18px; letter-spacing: -0.02em; }
.tw__row { margin-bottom: 14px; }
.tw__row:last-child { margin-bottom: 0; }
.tw__label { font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ts-ink-mute); margin-bottom: 8px; }
.tw__swatches { display: flex; gap: 8px; }
.tw__swatch { width: 30px; height: 30px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); transition: transform var(--ts-dur-fast) var(--ts-ease); }
.tw__swatch:hover { transform: scale(1.08); }
.tw__swatch.sel { border-color: var(--ts-ink); }
.tw__seg { display: flex; border: 1px solid var(--ts-line); border-radius: var(--ts-radius-sm); overflow: hidden; }
.tw__seg button { flex: 1; background: none; border: none; border-right: 1px solid var(--ts-line); padding: 7px 4px; font-size: 12px; font-weight: 500; color: var(--ts-ink-mute); cursor: pointer; font-family: inherit; }
.tw__seg button:last-child { border-right: none; }
.tw__seg button.sel { background: var(--ts-ink-night); color: var(--ts-paper); }

/* ===== Contract lifecycle ================================================== */
.contract-scope { display: flex; align-items: center; gap: 10px; }


/* ===== Order tracking (control tower) ====================================== */
.tkpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 26px; }
.tkpi { background: var(--ts-surface); border: 1px solid var(--ts-line); border-radius: var(--ts-radius-md); padding: 16px 18px; }
.tkpi__label { font-size: 12px; color: var(--ts-ink-mute); margin-bottom: 9px; }
.tkpi__val { font-variant-numeric: tabular-nums lining-nums; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; color: var(--ts-ink); }
.tkpi__val--neg { color: var(--ts-negative); }
.tkpi__val--info { color: var(--ts-info); }
.tkpi__val--pos { color: var(--ts-positive); }

.tcard {
  background: var(--ts-surface); border: 1px solid var(--ts-line);
  border-radius: var(--ts-radius-md); padding: 18px 22px; margin-bottom: 12px;
  cursor: pointer; transition: border-color var(--ts-dur-fast) var(--ts-ease), box-shadow var(--ts-dur-fast) var(--ts-ease);
}
.tcard:hover { border-color: var(--ts-line-strong); }
.tcard--sel { border-color: var(--ts-brand-gold); box-shadow: 0 0 0 3px var(--ts-brand-gold-wash); }
.tcard__head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 16px; }
.tcard__mode { color: var(--ts-ink-mute); flex-shrink: 0; margin-top: 1px; }
.tcard__title { font-size: 14.5px; font-weight: 600; color: var(--ts-ink); letter-spacing: -0.005em; }
.tcard__sub { font-size: 12.5px; color: var(--ts-ink-mute); margin-top: 3px; }
.tcard__pill { margin-left: auto; flex-shrink: 0; }
.tcard__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; }
.tcard__loc { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ts-ink-soft); }
.tcard__loc svg { color: var(--ts-ink-mute); }
.tcard__eta { font-size: 12.5px; color: var(--ts-ink-mute); }
.tcard__delay { font-weight: 600; margin-left: 4px; }
.tcard__delay--neg { color: var(--ts-negative); }
.tcard__delay--ok { color: var(--ts-positive); }

/* milestone track */
.track { display: flex; align-items: center; padding: 0 2px; }
.tseg { display: flex; align-items: center; flex: 1; }
.tseg:last-child { flex: 0; }
.tnode { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; background: var(--ts-line-strong); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.04); }
.tnode--done { background: var(--ts-info); box-shadow: none; }
.tnode--current { width: 17px; height: 17px; background: var(--ts-info); box-shadow: 0 0 0 4px var(--ts-info-wash); }
.tnode--exception { background: var(--ts-negative); box-shadow: 0 0 0 4px var(--ts-negative-wash); }
.tbar { height: 2px; flex: 1; background: var(--ts-line); margin: 0 3px; border-radius: 2px; }
.tbar--done { background: var(--ts-info); }

/* ===== New Order modal ==================================================== */
.ordm__veil { position: fixed; inset: 0; background: rgba(20,20,25,.45); z-index: 60; }
.ordm { position: fixed; z-index: 61; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: min(620px, 94vw); max-height: 88vh; overflow: auto; background: var(--ts-surface-raised);
  border: 1px solid var(--ts-line); border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.ordm__head { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px 24px 12px; }
.ordm__eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--ts-ink-mute); }
.ordm__title { font-family: var(--ts-font-display); font-size: 24px; letter-spacing: -.02em; line-height: 1; margin-top: 2px; }
.ordm__x { border: none; background: transparent; font-size: 24px; line-height: 1; color: var(--ts-ink-mute); cursor: pointer; }
.ordm__cap { margin: 0 24px; padding: 10px 14px; background: var(--ts-paper-deep); border: 1px solid var(--ts-line);
  border-radius: 8px; font-size: 12.5px; color: var(--ts-ink-soft); }
.ordm__body { padding: 16px 24px 4px; }
.ordm__row { margin-bottom: 14px; }
.ordm__row label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 5px; }
.ordm__row select, .ordm__row input { padding: 7px 9px; border: 1px solid var(--ts-line); border-radius: 7px; font: inherit; font-size: 13px; }
.ordm__or { text-align: center; font-size: 11.5px; color: var(--ts-ink-mute); margin: 6px 0 12px; text-transform: uppercase; letter-spacing: .4px; }
.ordm__lines { width: 100%; margin-top: 4px; border-collapse: collapse; }
.ordm__lines td { padding: 7px 6px; border-bottom: 1px solid var(--ts-line); font-size: 13px; }
.ordm__rm { border: none; background: transparent; color: var(--ts-negative); font-size: 12px; cursor: pointer; }
.ordm__foot { display: flex; align-items: center; gap: 10px; padding: 14px 24px 20px; border-top: 1px solid var(--ts-line); margin-top: 8px; }
.ordm__row textarea { width: 100%; padding: 7px 9px; border: 1px solid var(--ts-line); border-radius: 7px; font: inherit; font-size: 13px; resize: vertical; }
.ordm__row input { width: 100%; box-sizing: border-box; }

/* ── Supplier onboarding wizard ─────────────────────────────────────────── */
.ob-steps { display: flex; align-items: center; gap: 8px; padding: 4px 24px 0; flex-wrap: wrap; }
.ob-step { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: var(--ts-ink-mute); }
.ob-step__n { display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%;
  background: var(--ts-paper-deep); border: 1px solid var(--ts-line); font-size: 11px; }
.ob-step--current { color: var(--ts-ink); }
.ob-step--current .ob-step__n { background: var(--ts-ink-night); color: var(--ts-paper); border-color: var(--ts-ink-night); }
.ob-step--done { color: var(--ts-ink-soft); }
.ob-step--done .ob-step__n { background: var(--ts-brand-gold); color: var(--ts-ink-night); border-color: var(--ts-brand-gold); }
.ob-step__sep { flex: 0 0 16px; height: 1px; background: var(--ts-line); }

.ob-risk { display: flex; gap: 8px; }
.ob-chip { padding: 8px 16px; border: 1px solid var(--ts-line); border-radius: 8px; background: var(--ts-surface-raised);
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ts-ink-soft); cursor: pointer; transition: .12s; }
.ob-chip:hover { border-color: var(--ts-ink-mute); }
.ob-chip.is-on { background: var(--ts-ink-night); color: var(--ts-paper); border-color: var(--ts-ink-night); }

.ob-doc { border: 1px solid var(--ts-line); border-radius: 9px; padding: 12px 14px; margin-bottom: 10px; transition: .12s; }
.ob-doc.is-on { border-color: var(--ts-brand-gold); background: color-mix(in srgb, var(--ts-brand-gold) 7%, transparent); }
.ob-doc__check { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.ob-doc__ref { margin-top: 9px; width: 100%; box-sizing: border-box; padding: 6px 9px; border: 1px solid var(--ts-line);
  border-radius: 6px; font: inherit; font-size: 12.5px; }
.ob-doc__ref:disabled { opacity: .5; }

.ob-review { width: 100%; border-collapse: collapse; }
.ob-review td { padding: 9px 4px; border-bottom: 1px solid var(--ts-line); font-size: 13px; }
.ob-review td:first-child { color: var(--ts-ink-mute); width: 130px; font-size: 12px; font-weight: 600; }

/* Master-detail: shipment cards on the left, the event timeline pinned on the
   right so it's visible without scrolling past every card. Collapses to a single
   column on narrow screens (timeline first, so it stays above the fold there). */
.track-split { display: grid; grid-template-columns: 1fr 420px; gap: 24px; align-items: start; }
.track-split #track-timeline { position: sticky; top: 16px; }
@media (max-width: 1100px) {
  .track-split { grid-template-columns: 1fr; }
  .track-split #track-timeline { position: static; order: -1; margin-bottom: 18px; }
}

/* event timeline panel */
.tlpanel { background: var(--ts-paper-deep); border: 1px solid var(--ts-line); border-radius: var(--ts-radius-md); padding: 22px 24px 24px; margin-top: 8px; }
.tlpanel__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; }
.tlpanel__title { font-family: var(--ts-font-display); font-size: 24px; letter-spacing: -0.02em; color: var(--ts-ink); line-height: 1; }
.tlpanel__promise { font-size: 12.5px; color: var(--ts-ink-mute); }
.tlpanel__promise b { color: var(--ts-ink); font-weight: 500; }
.tlpanel__escalate { margin-top: 6px; }
.po-contents-h { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ts-ink-mute); font-weight: 600; margin: 4px 0 8px; }
.po-contents { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 18px; }
.po-contents th { text-align: left; color: var(--ts-ink-mute); font-weight: 600; padding: 5px 8px; border-bottom: 1px solid var(--ts-line); }
.po-contents td { padding: 5px 8px; border-bottom: 1px solid var(--ts-line-soft); color: var(--ts-ink); }
.po-contents td.num, .po-contents th.num { text-align: right; }


/* ===== Inventory / reorder planning ======================================== */
.inv-bar-wrap { display: flex; flex-direction: column; gap: 5px; min-width: 220px; }
.inv-bar {
  position: relative; height: 12px; border-radius: 99px;
  background: var(--ts-paper-deep); border: 1px solid var(--ts-line); overflow: visible;
}
.inv-bar__onhand { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px 0 0 99px; }
.inv-bar__onorder {
  position: absolute; top: 0; bottom: 0;
  background-image: repeating-linear-gradient(135deg, var(--ts-info-wash), var(--ts-info-wash) 4px, transparent 4px, transparent 8px);
  border-top: 1px dashed var(--ts-info); border-bottom: 1px dashed var(--ts-info);
}
.inv-bar__rop {
  position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ts-ink-night);
}
.inv-bar__rop::after {
  content: ""; position: absolute; left: -2px; top: -4px;
  border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid var(--ts-ink-night);
}
.inv-scale { display: flex; justify-content: space-between; font-size: 10px; color: var(--ts-ink-faint); font-variant-numeric: tabular-nums; }
.inv-cover { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; }
.inv-next { font-size: 12px; color: var(--ts-ink-soft); display: flex; align-items: center; gap: 6px; }
.inv-next svg { color: var(--ts-ink-mute); }
.inv-next--none { color: var(--ts-ink-faint); }
.inv-rec { font-size: 12.5px; font-weight: 500; letter-spacing: -0.005em; }
.inv-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 2px 16px; }
.inv-legend__item { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ts-ink-mute); }
.inv-legend__sw { width: 22px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.inv-legend__sw--onhand { background: var(--ts-positive); }
.inv-legend__sw--onorder { background-image: repeating-linear-gradient(135deg, var(--ts-info-wash), var(--ts-info-wash) 3px, var(--ts-surface) 3px, var(--ts-surface) 6px); border: 1px dashed var(--ts-info); }
.inv-legend__tick { width: 2px; height: 14px; background: var(--ts-ink-night); flex-shrink: 0; }

/* ===== Contract budget burn ================================================ */
.budget-wrap { min-width: 200px; }
.budget-bar { position: relative; height: 12px; border-radius: 99px; background: var(--ts-paper-deep); border: 1px solid var(--ts-line); overflow: hidden; }
.budget-bar__spent { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px 0 0 99px; }
.budget-nums { display: flex; justify-content: space-between; font-size: 11px; margin-top: 5px; font-variant-numeric: tabular-nums; }
.budget-nums .spent { color: var(--ts-brand-gold-deep); font-weight: 600; }
.budget-nums .left { color: var(--ts-ink-mute); }
.renew-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; color: var(--ts-ink);
}
.renew-chip small { font-size: 11px; font-weight: 400; color: var(--ts-ink-mute); }
.renew-chip--soon { color: var(--ts-warning); }
.renew-chip--soon small { color: #8C6510; }
.renew-chip--lapsed { color: var(--ts-negative); }
.renew-chip--lapsed small { color: var(--ts-negative); }

/* burn-down vs burn-up mini chart (contract brief) */
.burn { display: flex; align-items: flex-end; gap: 3px; height: 64px; margin-top: 6px; }
.burn__col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; height: 100%; }
.burn__spend { background: var(--ts-brand-gold); border-radius: 2px 2px 0 0; min-height: 2px; }
.burn__budget-line { position: relative; }
.burn__labels { display: flex; gap: 3px; margin-top: 5px; }
.burn__labels span { flex: 1; text-align: center; font-size: 9.5px; color: var(--ts-ink-faint); }

/* Requisitions (cart) — dropped lines fade out; reuse existing tbl/panel/pill styles. */
.req-line--dropped { opacity: .42; }
.req-line--dropped .cell-prod__name { text-decoration: line-through; }
.req-qty { padding: 4px 6px; border: 1px solid var(--ts-line); border-radius: 6px; font: inherit; text-align: right; }
.req-incl { display: inline-flex; align-items: center; cursor: pointer; }

/* Line flags: a residual (net of already-staged) vs capacity-capped. Distinct
   so a follow-on proposal never reads as a duplicate of an existing PR. */
.req-flag { display: inline-block; margin-top: 4px; font-size: 10px; font-weight: 700;
  letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; }
.req-flag--residual { background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; }
.req-flag--capped { background: #fff7ed; color: #9a3412; border: 1px solid #fed7aa; margin-left: 4px; }

/* ── Inventory-position panel (the MRP instrument) ─────────────────── */
.ipos { padding: 0; margin-bottom: 12px; overflow: hidden; }
.ipos-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.ipos-tbl th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ts-ink-mute); font-weight: 600; padding: 11px 14px; border-bottom: 1px solid var(--ts-line); background: var(--ts-paper-deep); }
.ipos-tbl td { padding: 11px 14px; border-bottom: 1px solid var(--ts-line-soft); }
.ipos-tbl td.num, .ipos-tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.ipos-row { cursor: pointer; transition: background .12s; }
.ipos-row:hover { background: var(--ts-paper-deep); }
.ipos-row--open { background: var(--ts-paper-deep); }
.ipos-name { font-weight: 600; color: var(--ts-ink); }
.ipos-cat { font-size: 11px; color: var(--ts-ink-mute); }
.ipos-pill { display: inline-block; min-width: 26px; text-align: center; font-weight: 700; font-size: 12px; padding: 2px 8px; border-radius: 999px; }
.ipos-pill--prop { background: #e7f4ec; color: #15803d; }
.ipos-pill--defer { background: #fdede0; color: #b45309; }
.ipos-prop { color: #15803d; font-weight: 700; }
.ipos-defer { color: #b45309; font-weight: 700; }
.ipos-risk { color: #b91c1c; font-weight: 700; }
.ipos-row--risk { background: #fef5f5; }
.ipos-row--risk:hover { background: #fdeaea; }
.ipos-cov-cell { font-size: 12.5px; color: var(--ts-ink-soft); white-space: nowrap; }
.ipos-cov-vs { color: var(--ts-ink-mute); font-size: 11px; }
.ipos-flag-risk { color: #b91c1c; font-weight: 700; font-size: 11px; }

/* ── Clean requisition card ──────────────────────────────────────── */
.rc-tbl th { font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: var(--ts-ink-mute); font-weight: 600; }
.rc-reason { font-size: 11.5px; color: var(--ts-ink-soft); margin-top: 2px; line-height: 1.35; }
.rc-ctx { color: var(--ts-ink); font-weight: 600; }
.rc-ctx-l { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; color: var(--ts-ink-mute); font-weight: 500; margin-top: 1px; }
.ipos-cap { display: flex; flex-direction: column; gap: 4px; min-width: 92px; }
.ipos-cap__txt { font-size: 11px; color: var(--ts-ink-mute); }
.ipos-cap__bar { height: 5px; border-radius: 3px; background: var(--ts-line); overflow: hidden; }
.ipos-cap__bar span { display: block; height: 100%; }
.ipos-tbl tfoot td { font-weight: 700; border-top: 2px solid var(--ts-line); border-bottom: none; background: var(--ts-paper-deep); }

.ipos-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.ipos-kpi { background: var(--ts-surface); border: 1px solid var(--ts-line); border-radius: 12px; padding: 13px 16px; }
.ipos-kpi__lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ts-ink-mute); font-weight: 600; }
.ipos-kpi__val { font-family: var(--ts-font-display); font-size: 26px; font-weight: 500; margin-top: 4px; }
.ipos-kpi__u { font-family: var(--ts-font-sans); font-size: 12px; font-weight: 500; color: var(--ts-ink-mute); }

.ipos-drill td { background: var(--ts-paper); padding: 0 14px 14px; }
.ipos-drill__wrap { padding: 12px 14px; background: var(--ts-paper-deep); border-radius: 10px; }
.ipos-dl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; }
.ipos-dl { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--ts-ink-mute); }
.ipos-dl b { font-size: 16px; color: var(--ts-ink); font-weight: 700; }
.ipos-eq { font-size: 12.5px; color: var(--ts-ink-soft); padding: 8px 0; border-top: 1px solid var(--ts-line); }
.ipos-eq b { color: var(--ts-ink); }
.ipos-po-h { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ts-ink-mute); font-weight: 600; margin: 8px 0 6px; }
.ipos-po { width: 100%; border-collapse: collapse; font-size: 12px; }
.ipos-po th { text-align: left; color: var(--ts-ink-mute); font-weight: 600; padding: 5px 8px; border-bottom: 1px solid var(--ts-line); }
.ipos-po td { padding: 5px 8px; border-bottom: 1px solid var(--ts-line-soft); }
.ipos-po td.num, .ipos-po th.num { text-align: right; }

/* ============================================================================
   Inventory · Control Tower — action-queue KPIs + Next-order hero column.
   Ported from a standalone mockup onto the app's design tokens (so it matches
   the rest of SCM Master rather than introducing its own fonts/palette).
   Scoped under .ictw so it can't leak into other screens.
============================================================================ */
.ictw-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.ictw-aitoggle { display: flex; align-items: center; gap: 11px; background: var(--ts-surface); border: 1px solid var(--ts-line); border-radius: 11px; padding: 9px 13px; cursor: pointer; user-select: none; transition: .18s; flex: none; }
.ictw-aitoggle:hover { border-color: var(--ts-line-strong); }
.ictw-aitoggle__lbl { font-size: 12.5px; font-weight: 600; line-height: 1.15; }
.ictw-aitoggle__sub { font-size: 10.5px; color: var(--ts-ink-mute); font-weight: 500; }
.ictw-switch { width: 38px; height: 22px; border-radius: 20px; background: var(--ts-line-strong); position: relative; transition: .22s; flex: none; }
.ictw-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.18); transition: .22s; }
.ictw-aitoggle--on .ictw-switch { background: var(--ts-ink); }
.ictw-aitoggle--on .ictw-switch::after { transform: translateX(16px); }

.ictw-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 22px 0 18px; }
.ictw-kpi { background: var(--ts-surface); border: 1px solid var(--ts-line); border-radius: 13px; padding: 14px 16px; position: relative; overflow: hidden; }
.ictw-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--ictw-accent, transparent); }
.ictw-kpi__lbl { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ts-ink-mute); font-weight: 600; display: flex; align-items: center; gap: 6px; }
.ictw-kpi__num { font-family: var(--ts-font-display); font-size: 34px; font-weight: 500; line-height: 1; margin-top: 9px; color: var(--ictw-accent, var(--ts-ink)); }
.ictw-kpi__meta { font-size: 11.5px; color: var(--ts-ink-soft); margin-top: 5px; font-weight: 500; }
.ictw-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ictw-accent, var(--ts-ink-faint)); }
.ictw-kpi--crit { --ictw-accent: var(--ts-negative); }
.ictw-kpi--warn { --ictw-accent: var(--ts-warning); }
.ictw-kpi--ok   { --ictw-accent: var(--ts-positive); }
.ictw-kpi--idle { --ictw-accent: var(--ts-line-strong); }
.ictw-kpi--idle .ictw-kpi__num { color: var(--ts-ink-mute); }

/* Clickable KPI (Inbound) — drills into the items in transit. */
.ictw-kpi--clickable { cursor: pointer; transition: border-color var(--ts-dur-fast) var(--ts-ease), box-shadow var(--ts-dur-fast) var(--ts-ease); }
.ictw-kpi--clickable:hover { border-color: var(--ts-line-strong); box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.ictw-kpi__cue { margin-left: auto; font-size: 10px; font-weight: 600; letter-spacing: .02em; color: var(--ts-ink-mute); opacity: .75; }
.ictw-kpi--open .ictw-kpi__cue { color: var(--ts-positive); }
.ictw-kpi--open .ictw-kpi__cue::after { content: ""; }
.ictw-kpi--open { border-color: var(--ts-positive); }

/* Inbound drill-down panel */
.ind-panel { margin: -6px 0 18px; padding: 0; }
.ind-head { font-size: 12px; font-weight: 600; color: var(--ts-ink); padding: 12px 16px; border-bottom: 1px solid var(--ts-line); display: flex; align-items: baseline; gap: 10px; }
.ind-sub { font-weight: 500; font-size: 11px; color: var(--ts-ink-mute); text-transform: none; letter-spacing: 0; }
.ind-list { display: flex; flex-direction: column; }
.ind-row { display: grid; grid-template-columns: 1fr auto 200px 140px; align-items: center; gap: 14px; padding: 10px 16px; border-bottom: 1px solid var(--ts-line-soft); font-size: 13px; }
.ind-row:last-child { border-bottom: 0; }
.ind-name { font-weight: 600; color: var(--ts-ink); display: flex; flex-direction: column; }
.ind-cat { font-weight: 500; font-size: 11px; color: var(--ts-ink-mute); }
.ind-qty { font-family: var(--ts-font-mono, monospace); font-weight: 700; color: var(--ts-positive); }
.ind-eta { color: var(--ts-ink-soft); font-size: 12.5px; }
.ind-flag { text-align: right; }
.ind-late { color: var(--ts-negative); font-weight: 700; }
.ind-risk { color: var(--ts-negative); font-size: 11.5px; font-weight: 600; }

.ictw-legend { display: flex; align-items: center; gap: 20px; font-size: 11.5px; color: var(--ts-ink-soft); margin-bottom: 10px; flex-wrap: wrap; }
.ictw-li { display: flex; align-items: center; gap: 7px; }
.ictw-li:last-child { color: var(--ts-ink-faint); font-family: var(--ts-font-mono); font-size: 10.5px; }
.ictw-sw-fill { width: 20px; height: 9px; border-radius: 3px; background: var(--ts-positive); }
.ictw-sw-in { width: 20px; height: 9px; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--ts-positive-soft) 0 4px, transparent 4px 7px); border: 1px dashed var(--ts-positive); }
.ictw-sw-re { width: 2px; height: 13px; background: var(--ts-ink); }

.ictw-panel { overflow: hidden; }
.ictw-thead, .ictw-row { display: grid; grid-template-columns: 2.3fr 2fr 1.4fr 1.5fr 1.9fr; gap: 18px; align-items: center; }
.ictw-thead { padding: 13px 22px; border-bottom: 1px solid var(--ts-line); background: var(--ts-paper-deep); }
.ictw-thead span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ts-ink-mute); font-weight: 600; }
.ictw-thead .num { text-align: right; }
.ictw-row { padding: 16px 22px; border-bottom: 1px solid var(--ts-line-soft); transition: background .15s; animation: ictwRise .5s both; }
.ictw-row:last-child { border-bottom: none; }
.ictw-row:hover { background: var(--ts-brand-gold-wash); }
@keyframes ictwRise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.ictw-stock__top { display: flex; align-items: baseline; gap: 8px; }
.ictw-qty { font-family: var(--ts-font-mono); font-size: 22px; font-weight: 600; line-height: 1; letter-spacing: -.02em; }
.ictw-unit { font-size: 11px; color: var(--ts-ink-mute); font-weight: 500; }
.ictw-cover { margin-left: auto; font-family: var(--ts-font-mono); font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 20px; }
.ictw-cover.c-crit { background: var(--ts-negative-wash); color: var(--ts-negative); }
.ictw-cover.c-warn { background: var(--ts-warning-wash); color: var(--ts-warning); }
.ictw-cover.c-ok { background: var(--ts-positive-wash); color: var(--ts-positive); }
.ictw-bar { height: 8px; border-radius: 5px; background: var(--ts-paper-deep); margin-top: 9px; position: relative; }
.ictw-bar__fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ts-positive); border-radius: 5px; }
.ictw-bar__inb { position: absolute; top: 0; bottom: 0; border-radius: 0 5px 5px 0; background: repeating-linear-gradient(90deg, var(--ts-positive-soft) 0 4px, transparent 4px 7px); border: 1px dashed var(--ts-positive); border-left: none; }
.ictw-bar__ro { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ts-ink); border-radius: 2px; }

.ictw-demand .d-main { font-family: var(--ts-font-mono); font-size: 15px; font-weight: 600; }
.ictw-demand .d-sub { font-size: 11px; color: var(--ts-negative); font-weight: 600; margin-top: 3px; }
.ictw-demand .d-sub.zero { color: var(--ts-positive); }
.ictw-demand .d-rate { font-size: 10.5px; color: var(--ts-ink-mute); font-family: var(--ts-font-mono); margin-top: 2px; }

.ictw-inbound .i-qty { font-family: var(--ts-font-mono); font-size: 15px; font-weight: 600; }
.ictw-inbound .i-date { font-size: 11.5px; color: var(--ts-ink-soft); font-weight: 500; margin-top: 3px; }
.ictw-inbound .i-flag { font-size: 10px; color: var(--ts-negative); font-weight: 600; margin-top: 2px; }
.i-none { font-size: 13px; color: var(--ts-ink-faint); font-family: var(--ts-font-mono); }

.ictw-order { text-align: right; }
.ictw-ochip { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 6px; margin-bottom: 7px; }
.ictw-ochip.crit { background: var(--ts-negative-wash); color: var(--ts-negative); }
.ictw-ochip.warn { background: var(--ts-warning-wash); color: var(--ts-warning); }
.ictw-ochip.ok { background: var(--ts-positive-wash); color: var(--ts-positive); }
.ictw-order .o-qty { font-family: var(--ts-font-mono); font-size: 15px; font-weight: 600; }
.ictw-order .o-when { font-size: 11.5px; font-weight: 600; margin-top: 3px; }
.ictw-order .o-when.now { color: var(--ts-negative); }
.ictw-order .o-when.soon { color: var(--ts-warning); }
.ictw-order .o-when.future { color: var(--ts-ink-soft); }

.ictw-reason { grid-column: 1 / -1; font-size: 13px; color: var(--ts-ink-soft); line-height: 1.45; padding: 12px 0 2px; margin-top: 13px; border-top: 1px dashed var(--ts-line); display: none; }
.ictw-reason::before { content: "PLAN"; font-family: var(--ts-font-mono); font-size: 9px; font-weight: 600; letter-spacing: .12em; background: var(--ts-ink-mute); color: var(--ts-paper); padding: 2px 6px; border-radius: 4px; margin-right: 9px; }
body.ictw-ai-on .ictw-reason { display: block; }

/* Deterministic recovery recommendation — ALWAYS visible on at-risk lines (no
   AI dependency). Distinct, slightly alarming band so the fix is obvious. */
.rec-line { grid-column: 1 / -1; margin-top: 12px; padding: 10px 12px; border-radius: 9px;
  background: var(--ts-paper-deep); border: 1px solid var(--ts-line); border-left: 3px solid var(--ts-negative);
  font-size: 13px; color: var(--ts-ink); line-height: 1.5; }
.rec-tag { font-family: var(--ts-font-mono, monospace); font-size: 9px; font-weight: 700; letter-spacing: .12em;
  background: var(--ts-negative); color: #fff; padding: 2px 7px; border-radius: 4px; margin-right: 9px; vertical-align: 1px; }
.rec-body b { font-weight: 700; color: var(--ts-ink); }
.rec-warn { color: var(--ts-warning); font-weight: 600; }
.rec-why { margin-top: 6px; font-size: 11px; color: var(--ts-ink-mute); font-style: italic; }

/* Capacity diagnosis — cause + recommended action under a near/over-capacity row. */
.cap-headroom { background: var(--ts-surface); border: 1px solid var(--ts-line); border-left: 3px solid var(--ts-positive); border-radius: 8px; padding: 11px 16px; margin-bottom: 16px; font-size: 13.5px; color: var(--ts-ink-soft); }
.cap-headroom strong { color: var(--ts-ink); font-variant-numeric: tabular-nums; }
.cap-row--alert td { border-bottom: none; }
.cap-cause td { padding: 0 22px 14px !important; background: var(--ts-paper-deep); border-bottom: 1px solid var(--ts-line); }
.cap-cause__inner { padding: 10px 14px; border-left: 2px solid var(--ts-warning); }
.cap-cause__why { font-size: 13px; color: var(--ts-ink); line-height: 1.45; }
.cap-cause__bits { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 8px; }
.cap-tag { font-size: 11.5px; color: var(--ts-ink-mute); background: var(--ts-surface); border: 1px solid var(--ts-line); border-radius: 5px; padding: 2px 8px; }
.cap-tag--warn { color: var(--ts-warning); border-color: var(--ts-warning-soft); background: var(--ts-warning-wash); }
.cap-actionhint { font-size: 12px; font-weight: 600; color: var(--ts-ink-mute); }