/* Bid Desk - design system. Tokens first, then base, shell, components, pages. Documented in DESIGN.md.
   CSP: this file is the only stylesheet; no inline styles anywhere. */

/* ---------- fonts (IBM Plex, SIL OFL 1.1 - see fonts/LICENSE-IBM-Plex-OFL.txt) ---------- */
@font-face { font-family: "Plex Sans"; src: url("fonts/plex-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("fonts/plex-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Sans"; src: url("fonts/plex-sans-600.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url("fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500 700; font-style: normal; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  color-scheme: light dark;
  /* neutrals: warm paper + ink */
  --bg: #f3f2ee;
  --surface: #ffffff;
  --surface-2: #f8f7f4;
  --surface-3: #efede8;
  --ink: #131c28;
  --ink-2: #364152;
  --muted: #5b6574;
  --line: #e3e0d9;
  --line-strong: #cbc6bb;
  --field-line: #8a857b; /* 3:1+ on surfaces, for input boundaries */
  /* brand */
  --shell: #0f1b2b;
  --shell-2: #18283d;
  --shell-ink: #e8edf4;
  --shell-muted: #a9b6c7;
  --accent: #1d4a8a;
  --accent-hover: #163a6e;
  --accent-ink: #ffffff;
  --accent-soft: #e7eef8;
  --accent-line: #b9cbe6;
  --brass: #b8892b;
  /* signals: text colour / soft background / border */
  --good: #166a3b;  --good-soft: #e5f2ea;  --good-line: #a9d3b9;
  --warn: #8a5300;  --warn-soft: #fcf0d9;  --warn-line: #ebc883;
  --crit: #b0261b;  --crit-soft: #fcebe8;  --crit-line: #eeb2aa;
  --info: #1d4a8a;  --info-soft: #e7eef8;  --info-line: #b9cbe6;
  --idle: #4f5968;  --idle-soft: #eef0f2;  --idle-line: #d3d7dd;
  --focus: #1d5fd1;
  --focus-on-shell: #ffd27a;
  /* log terminal (dark in both themes) */
  --term-bg: #0d141e; --term-ink: #d7dee8; --term-muted: #8796aa;
  /* progress bars: track, and the moving stripes on the fill */
  --bar-track: #e4e1da;
  --bar-stripe: rgba(255, 255, 255, .24);

  /* type */
  --font: "Plex Sans", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: "Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --fs-xs: .75rem;    /* 12 - eyebrows, table heads */
  --fs-sm: .8125rem;  /* 13 - meta, hints */
  --fs-base: .9375rem;/* 15 - body */
  --fs-md: 1.0625rem; /* 17 - panel titles */
  --fs-lg: 1.375rem;  /* 22 - h1 mobile */
  --fs-xl: 1.75rem;   /* 28 - h1 desktop */
  --lh-tight: 1.25; --lh: 1.55;

  /* space (4px grid) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --gutter: 16px;

  /* shape */
  --r-sm: 4px; --r: 8px; --r-lg: 12px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(15, 27, 43, .05), 0 1px 1px rgba(15, 27, 43, .03);
  --shadow-2: 0 4px 14px rgba(15, 27, 43, .08), 0 1px 3px rgba(15, 27, 43, .06);
  --shadow-3: 0 18px 48px rgba(15, 27, 43, .14), 0 2px 6px rgba(15, 27, 43, .06);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0c1118;
    --surface: #141b25;
    --surface-2: #19212d;
    --surface-3: #202a38;
    --ink: #e7ebf1;
    --ink-2: #c3ccd8;
    --muted: #97a3b4;
    --line: #253041;
    --line-strong: #344256;
    --field-line: #62748c;
    --shell: #080d13;
    --shell-2: #131c28;
    --shell-ink: #e7ebf1;
    --shell-muted: #9aa7b8;
    --accent: #8db8ff;
    --accent-hover: #b0ceff;
    --accent-ink: #0b1220;
    --accent-soft: #17263d;
    --accent-line: #2f4a72;
    --brass: #d8ad57;
    --good: #6fd69b;  --good-soft: #10291c;  --good-line: #23573a;
    --warn: #f2c063;  --warn-soft: #2d220d;  --warn-line: #6a5020;
    --crit: #ff9a8f;  --crit-soft: #331614;  --crit-line: #7a3029;
    --info: #8db8ff;  --info-soft: #17263d;  --info-line: #2f4a72;
    --idle: #aab4c2;  --idle-soft: #1d2531;  --idle-line: #344256;
    --focus: #8db8ff;
    --bar-track: #263243;
    --bar-stripe: rgba(8, 13, 19, .22);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow-2: 0 4px 14px rgba(0, 0, 0, .4);
    --shadow-3: 0 18px 48px rgba(0, 0, 0, .55);
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--appbar-h, 56px) + 12px); }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font: 400 var(--fs-base)/var(--lh) var(--font);
  font-feature-settings: "tnum" 1; /* tabular figures: scores, dates and counts line up */
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3 { color: var(--ink); line-height: var(--lh-tight); letter-spacing: -.01em; margin: 0; }
h1 { font-size: var(--fs-lg); font-weight: 600; }
h2 { font-size: var(--fs-md); font-weight: 600; }
h3 { font-size: var(--fs-base); font-weight: 600; }
p { margin: 0 0 var(--s3); }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
code, kbd, pre { font-family: var(--mono); }
code { font-size: .9em; background: var(--surface-3); padding: 1px 5px; border-radius: var(--r-sm); }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
::selection { background: var(--accent-soft); }
@media (min-width: 900px) { h1 { font-size: var(--fs-xl); } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s3); top: -60px; z-index: 50; background: var(--surface); color: var(--ink);
  padding: var(--s2) var(--s3); border-radius: var(--r); box-shadow: var(--shadow-2); }
.skip:focus { top: var(--s3); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.icon.lg { width: 22px; height: 22px; }
.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.mono { font-family: var(--mono); font-size: .92em; letter-spacing: 0; }
.nowrap { white-space: nowrap; }

/* ---------- app shell ---------- */
.appbar { background: var(--shell); color: var(--shell-ink); border-bottom: 1px solid #000; position: sticky; top: 0; z-index: 20; }
.appbar__inner { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); height: 56px;
  display: flex; align-items: center; gap: var(--s4); }
.appbar :focus-visible { outline-color: var(--focus-on-shell); }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--shell-ink); text-decoration: none;
  font-weight: 600; letter-spacing: .01em; font-size: 1rem; margin-right: auto; }
.brand:hover { color: #fff; }
.brand__mark { width: 28px; height: 28px; flex: none; }
.brand__sub { color: var(--shell-muted); font-weight: 400; font-size: var(--fs-sm); padding-left: 10px;
  border-left: 1px solid var(--shell-2); display: none; }
.nav { display: flex; align-items: center; gap: 2px; }
.nav a, .nav button {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 10px; border-radius: var(--r);
  color: var(--shell-muted); text-decoration: none; font: 500 var(--fs-sm)/1 var(--font); background: none; border: 0; cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.nav a:hover, .nav button:hover { color: var(--shell-ink); background: var(--shell-2); }
.nav a[aria-current="page"] { color: #fff; background: var(--shell-2); box-shadow: inset 0 -2px 0 var(--brass); }
.nav form { margin: 0; display: inline; }
.nav .icon { display: none; }
.nav__sep { width: 1px; height: 20px; background: var(--shell-2); margin: 0 6px; }
@media (min-width: 640px) {
  .nav .icon { display: inline-block; }
  .brand__sub { display: inline; }
}

main { flex: 1; width: 100%; max-width: 1320px; margin: 0 auto; padding: var(--s5) var(--gutter) var(--s7); }
@media (min-width: 900px) { main { padding-top: var(--s6); } :root { --gutter: 28px; } }

.footer { border-top: 1px solid var(--line); color: var(--muted); font-size: var(--fs-sm); }
.footer__inner { max-width: 1320px; margin: 0 auto; padding: var(--s4) var(--gutter); display: flex; gap: var(--s2);
  align-items: flex-start; }
.footer .icon { margin-top: 3px; }
.footer .icon { color: var(--brass); }

/* auth layout (login, setup) */
.auth main { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: var(--s7); }
.auth .flashes, .auth-card { width: 100%; max-width: 440px; }
.auth-brand { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: var(--s5);
  color: var(--ink); font-weight: 600; font-size: 1.125rem; text-decoration: none; }
.auth-brand .brand__mark { width: 34px; height: 34px; }
.auth-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-3); padding: var(--s6) var(--s5); }
.auth-card.wide { max-width: 560px; }
.auth-card h1 { font-size: var(--fs-lg); margin-bottom: var(--s2); }
.auth-card .flash { margin-bottom: var(--s4); }
.auth-card .lede { color: var(--muted); margin-bottom: var(--s5); }
.auth-foot { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); color: var(--muted);
  font-size: var(--fs-sm); display: flex; gap: var(--s2); }
.auth-foot .icon { margin-top: 2px; }
@media (min-width: 640px) { .auth-card { padding: var(--s6); } }

/* ---------- live activity strip (background jobs) ----------
   Sits under the app bar inside the sticky header, so it stays in view while tables scroll.
   One compact row per job: state icon | label, client, step | progress or actions | elapsed or dismiss. */
.activity { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--line-strong); box-shadow: var(--shadow-2); }
.activity__list { list-style: none; margin: 0 auto; padding: 0 var(--gutter); max-width: 1320px; }
.act { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-areas: "icon main end" "icon side side";
  gap: 6px var(--s3); align-items: center; padding: 10px 0; font-size: var(--fs-sm); }
.act + .act { border-top: 1px solid var(--line); }
.act p { margin: 0; }
.act__icon { grid-area: icon; align-self: start; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  color: var(--info); }
.act__icon::before { content: ""; box-sizing: border-box; width: 14px; height: 14px; border-radius: 50%; }
.act--running .act__icon::before { border: 2px solid var(--info-line); border-top-color: var(--info); border-right-color: var(--info);
  animation: spin .9s linear infinite; }
.act--queued .act__icon { color: var(--idle); }
.act--queued .act__icon::before { border: 2px dashed currentColor; }
.act--done .act__icon, .act--failed .act__icon { border-radius: 50%; }
.act--done .act__icon { color: var(--good); background: var(--good-soft); box-shadow: inset 0 0 0 1px var(--good-line); }
.act--failed .act__icon { color: var(--crit); background: var(--crit-soft); box-shadow: inset 0 0 0 1px var(--crit-line); }
.act--done .act__icon::before, .act--failed .act__icon::before { display: none; }
.act__icon .icon { width: 13px; height: 13px; stroke-width: 2.4; vertical-align: 0; }
.act__main { grid-area: main; min-width: 0; }
.act__title { display: flex; align-items: baseline; gap: 2px var(--s2); min-width: 0; line-height: 1.35; }
.act__title a { font-weight: 600; color: var(--ink); text-decoration: none; white-space: nowrap; }
.act__title a:hover { color: var(--accent); text-decoration: underline; }
.act__client { color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act .act__sub { margin-top: 1px; color: var(--ink-2); font-size: var(--fs-xs); line-height: 1.4;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act--queued .act__sub { color: var(--muted); }
.act--done .act__sub { color: var(--good); font-weight: 500; }
.act--failed .act__sub { color: var(--crit); font-weight: 500; }
.act__side { grid-area: side; display: flex; align-items: center; gap: var(--s3); min-width: 0; }
.act__count { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.act__end { grid-area: end; display: flex; align-items: center; justify-content: flex-end; gap: var(--s2); align-self: start; }
.act__time { font: 500 var(--fs-xs)/20px var(--mono); color: var(--muted); white-space: nowrap; }
.act__link { font-size: var(--fs-xs); font-weight: 500; white-space: nowrap; display: inline-flex; align-items: center; min-height: 28px; }
.act__link--main { font-weight: 600; }
button.act__link { min-height: 28px; padding: 0 10px; box-shadow: none; }
.act__note { font-size: var(--fs-xs); color: var(--good); font-weight: 500; display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
.act__note .icon { width: 13px; height: 13px; vertical-align: 0; }
button.act__dismiss { min-height: 0; width: 28px; height: 28px; padding: 0; border: 0; background: none; box-shadow: none; color: var(--muted);
  margin: -4px -4px -4px 0; }
button.act__dismiss:hover { background: var(--surface-3); color: var(--ink); }
.act__dismiss .icon { width: 14px; height: 14px; }
/* collapsed: 1 row on phones, 2 from 720px; the toggle row lists what is hidden */
.activity.js-ready:not(.is-open) .act:nth-child(n+2) { display: none; }
.act--more { display: block; border-top: 1px solid var(--line); padding: 2px 0 4px 24px; }
button.act__toggle { min-height: 32px; padding: 0 8px; border: 0; background: none; box-shadow: none; color: var(--accent);
  font-size: var(--fs-xs); font-weight: 500; white-space: normal; text-align: left; }
button.act__toggle:hover { background: var(--accent-soft); color: var(--accent); }
.activity.is-stale .act__count, .activity.is-stale .act__time { opacity: .55; }
.activity__stale { max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter) 8px calc(var(--gutter) + 32px); font-size: var(--fs-xs); color: var(--warn); }
@media (max-width: 719px) {
  .act { padding: 8px 0; gap: 4px var(--s3); }
  .act--queued .act__side { display: none; }      /* "Waiting - n jobs ahead" already says it */
  button.act__link { min-height: 26px; }
}
@media (min-width: 720px) {
  .activity.js-ready:not(.is-open) .act:nth-child(2) { display: grid; }
  .act { grid-template-columns: 20px minmax(0, 1fr) minmax(240px, 380px) 72px; grid-template-areas: "icon main side end"; padding: 8px 0; }
  .act__icon, .act__end { align-self: center; }
  .act--queued .act__side, .act--done .act__side, .act--failed .act__side { justify-content: flex-end; }
}

/* progress bar: a styled <progress> (native role and values, no inline styles needed). Determinate = fill with
   slowly moving stripes; indeterminate (no value) = a segment sweeping across. Reduced motion: still stripes. */
progress.bar { -webkit-appearance: none; appearance: none; display: block; flex: 1 1 auto; min-width: 72px; width: 100%; height: 6px;
  border: 0; border-radius: var(--r-pill); overflow: hidden; background: var(--bar-track); color: var(--info); }
progress.bar::-webkit-progress-bar { background: var(--bar-track); border-radius: var(--r-pill); }
progress.bar::-webkit-progress-value { border-radius: var(--r-pill); background-color: var(--info); transition: width .5s var(--ease);
  background-image: linear-gradient(135deg, var(--bar-stripe) 25%, transparent 25% 50%, var(--bar-stripe) 50% 75%, transparent 75%);
  background-size: 12px 12px; animation: bar-stripes .9s linear infinite; }
progress.bar::-moz-progress-bar { border-radius: var(--r-pill); background-color: var(--info);
  background-image: linear-gradient(135deg, var(--bar-stripe) 25%, transparent 25% 50%, var(--bar-stripe) 50% 75%, transparent 75%);
  background-size: 12px 12px; animation: bar-stripes .9s linear infinite; }
progress.bar:indeterminate { background-color: var(--bar-track); background-image: linear-gradient(90deg, var(--info), var(--info));
  background-size: 36% 100%; background-repeat: no-repeat; background-position: -60% 0; animation: bar-sweep 1.5s var(--ease) infinite; }
progress.bar:indeterminate::-webkit-progress-bar { background: transparent; }
progress.bar:indeterminate::-moz-progress-bar { background: transparent; }
progress.bar.is-done::-webkit-progress-value { background: var(--good); animation: none; }
progress.bar.is-done::-moz-progress-bar { background: var(--good); animation: none; }
progress.bar.is-failed::-webkit-progress-value { background: var(--crit); animation: none; }
progress.bar.is-failed::-moz-progress-bar { background: var(--crit); animation: none; }
progress.bar--lg { height: 10px; }
@keyframes bar-stripes { to { background-position: 12px 0; } }
@keyframes bar-sweep { from { background-position: -60% 0; } to { background-position: 160% 0; } }
@media (prefers-reduced-motion: reduce) {
  progress.bar:indeterminate { background-size: auto; background-position: 0 0;
    background-image: repeating-linear-gradient(135deg, var(--info) 0 5px, var(--info-line) 5px 10px); }
}

/* regions updated in place by activity.js fade in gently (no reload, no flash) */
[data-swap].is-updated { animation: swap-in .45s var(--ease); }
@keyframes swap-in { from { opacity: .5; } }

/* job page: the same progress, larger */
.jobprog { margin: 0 0 var(--s4); padding-bottom: var(--s4); border-bottom: 1px solid var(--line); display: grid; gap: var(--s2); }
.jobprog__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.jobprog__step { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.jobprog--done .jobprog__step { color: var(--good); }
.jobprog--failed .jobprog__step { color: var(--crit); }
.jobprog--queued .jobprog__step { color: var(--ink-2); }
.jobprog__time { font: 500 var(--fs-sm)/1.4 var(--mono); color: var(--muted); }
.jobprog__meta { font-size: var(--fs-sm); color: var(--muted); }
.jobprog__meta:empty { display: none; }
.jobprog--done ~ #job-summary, .jobprog--failed ~ #job-summary { display: none; }   /* the bar's caption already says it */

/* ---------- page header ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s4); margin-bottom: var(--s5); }
.page-head__main { flex: 1 1 420px; min-width: 0; }
.page-head__actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.eyebrow { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--s2); font-size: var(--fs-sm); color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs__sep { color: var(--line-strong); }
.lede { color: var(--muted); max-width: 72ch; margin: var(--s2) 0 0; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: var(--s3); color: var(--muted); font-size: var(--fs-sm); }
.meta > * { display: inline-flex; align-items: center; gap: 6px; }
.meta b { color: var(--ink-2); font-weight: 500; }

/* ---------- panels ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-1);
  margin: 0 0 var(--s5); min-width: 0; }
.panel__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3);
  padding: var(--s4) var(--s4) var(--s3); border-bottom: 1px solid var(--line); }
.panel__head h2 { display: flex; align-items: center; gap: var(--s2); margin-right: auto; }
.panel__head .sub { flex-basis: 100%; margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.panel__body { padding: var(--s4); }
.panel__body > :last-child { margin-bottom: 0; }
.panel__foot { padding: var(--s3) var(--s4); border-top: 1px solid var(--line); background: var(--surface-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg); }
.panel--narrow { max-width: 640px; }
.count { font: 500 var(--fs-xs)/1 var(--font); color: var(--muted); background: var(--surface-3); border-radius: var(--r-pill);
  padding: 4px 8px; }
@media (min-width: 640px) { .panel__head { padding: var(--s4) var(--s5) var(--s3); } .panel__body { padding: var(--s4) var(--s5) var(--s5); }
  .panel__foot { padding: var(--s3) var(--s5); } }

.layout { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); align-items: start; }
.layout > * { min-width: 0; }
.layout .panel { margin-bottom: 0; }
.vstack > * + * { margin-top: var(--s5); }
.vstack > .panel { margin-bottom: 0; }
@media (min-width: 1000px) {
  .layout--aside { grid-template-columns: minmax(0, 1fr) 340px; }
  .layout--split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .aside-sticky { position: sticky; top: calc(var(--appbar-h, 56px) + 20px); }
}
.section-gap { margin-top: var(--s5); }

/* ---------- KPI strip ---------- */
.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--s5); box-shadow: var(--shadow-1); }
.kpi { background: var(--surface); padding: var(--s4); }
.kpi__label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kpi__value { font-size: 1.75rem; font-weight: 600; line-height: 1.15; margin-top: 6px; letter-spacing: -.02em; }
.kpi__value small { font-size: var(--fs-sm); font-weight: 400; color: var(--muted); letter-spacing: 0; }
.kpi__note { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.kpi--good .kpi__value { color: var(--good); }
@media (min-width: 760px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } .kpi { padding: var(--s4) var(--s5); } }

/* ---------- buttons ---------- */
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 0 14px;
  font: 500 var(--fs-sm)/1.2 var(--font); letter-spacing: .005em; text-decoration: none; white-space: nowrap;
  color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r);
  box-shadow: var(--shadow-1); cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), box-shadow .15s var(--ease);
}
button:hover, .button:hover { border-color: var(--accent-line); background: var(--surface-2); color: var(--ink); }
button:active, .button:active { transform: translateY(1px); }
button.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.primary:hover, .button.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
button.danger, .button.danger { color: var(--crit); }
button.danger:hover, .button.danger:hover { border-color: var(--crit-line); background: var(--crit-soft); color: var(--crit); }
button.ghost, .button.ghost { background: transparent; border-color: transparent; box-shadow: none; color: var(--accent); }
button.ghost:hover, .button.ghost:hover { background: var(--accent-soft); border-color: transparent; color: var(--accent); }
button.complete, button.complete:hover { background: var(--good-soft); border-color: var(--good-line); color: var(--good); box-shadow: none; cursor: default; }
button.complete:active { transform: none; }
button.small, .button.small { min-height: 30px; padding: 0 10px; font-size: var(--fs-xs); }
button.link { min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--accent);
  text-decoration: underline; font-weight: 400; }
button.block, .button.block { width: 100%; min-height: 42px; font-size: var(--fs-base); }
form.inline { display: inline; }
.actions { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; }

/* ---------- forms ---------- */
label { display: block; margin: 0 0 var(--s4); font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); }
.hint { display: block; font-weight: 400; color: var(--muted); font-size: var(--fs-sm); margin-top: 2px; }
.hint .pill { margin-left: 2px; }
input, select, textarea {
  font: 400 var(--fs-base)/1.4 var(--font); color: var(--ink); background: var(--surface);
  border: 1px solid var(--field-line); border-radius: var(--r); padding: 9px 12px; min-height: 40px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
label input, label select, label textarea { display: block; width: 100%; margin-top: 6px; }
input:hover, select:hover, textarea:hover { border-color: var(--ink-2); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px var(--accent-soft); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
input::placeholder { color: var(--muted); opacity: 1; }
select { appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b7686' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
input.code { font-family: var(--mono); font-size: 1.25rem; letter-spacing: .3em; text-align: center; }
input.mono { font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase; }
label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; color: var(--ink); }
label.check input { width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; flex: none; accent-color: var(--accent); }
textarea { display: block; width: 100%; font: 400 .875rem/1.6 var(--mono); padding: var(--s4); resize: vertical; tab-size: 2; }
fieldset { border: 0; padding: 0; margin: 0 0 var(--s5); min-width: 0; }
legend { font-size: var(--fs-md); font-weight: 600; padding: 0; margin-bottom: var(--s1); }
.form-section + .form-section { border-top: 1px solid var(--line); padding-top: var(--s5); }
.form-section h2 { margin-bottom: var(--s1); }
.form-section > p.muted { font-size: var(--fs-sm); margin-bottom: var(--s4); }
.form-row { display: grid; gap: 0 var(--s4); }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-actions { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; margin-top: var(--s2); }
.panel__foot.form-actions { margin-top: 0; }
.actions.deliverables { margin-top: var(--s3); padding-top: var(--s3); border-top: 1px dashed var(--line); }

/* Certifications checklist (client page): groups flow into columns on wide screens */
.cert-groups { display: grid; gap: var(--s5) var(--s6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .cert-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .cert-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cert-group { margin: 0; display: grid; gap: var(--s3); align-content: start; }
.cert-group legend { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted); margin-bottom: var(--s3); }
.cert-group label.check { font-size: var(--fs-sm); line-height: 1.4; }
.cert-group .hint { font-size: var(--fs-xs); line-height: 1.45; }
.cert-other { grid-column: 1 / -1; margin: 0; }
.cert-other textarea { font-family: var(--font); font-size: var(--fs-sm); }

.toolbar { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: flex-end;
  padding: var(--s3) var(--s4); background: var(--surface-2); border-bottom: 1px solid var(--line); margin: 0; }
.toolbar label { margin: 0; font-size: var(--fs-xs); color: var(--muted); }
.toolbar input, .toolbar select { min-height: 34px; padding-top: 6px; padding-bottom: 6px; font-size: var(--fs-sm); margin-top: 4px; }
.toolbar input { width: 96px; }
.toolbar select { min-width: 150px; }
.toolbar .note { margin-left: auto; align-self: center; font-size: var(--fs-sm); color: var(--muted); }
.toolbar button, .toolbar .button { min-height: 34px; }
@media (min-width: 640px) { .toolbar { padding: var(--s3) var(--s5); } }

/* ---------- flash / callouts ---------- */
.flashes { margin-bottom: var(--s5); display: grid; gap: var(--s2); }
.flash { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: var(--r);
  background: var(--info-soft); border: 1px solid var(--info-line); color: var(--ink); font-size: var(--fs-sm); }
.flash .icon { color: var(--info); margin-top: 1px; }
.flash.error { background: var(--crit-soft); border-color: var(--crit-line); }
.flash.error .icon { color: var(--crit); }
.callout { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--line); font-size: var(--fs-sm); color: var(--ink-2); }
.callout .icon { color: var(--brass); margin-top: 2px; }
.callout.crit { background: var(--crit-soft); border-color: var(--crit-line); }
.callout.crit .icon { color: var(--crit); }
.callout p { margin: 0; }
.callout.offsite { background: var(--warn-soft); border-color: var(--warn-line); margin-bottom: var(--s3); }
.callout.offsite .icon { color: var(--warn); }
.files.uploads { margin-bottom: var(--s3); }
.files.uploads form { margin: 0; }
.upload { display: grid; gap: var(--s2); margin-bottom: var(--s3); }
.upload label { font-size: var(--fs-sm); font-weight: 500; }
.upload input[type="file"] { flex: 1 1 220px; min-width: 0; font: inherit; font-size: var(--fs-sm); }
.callout + .steps { margin-top: var(--s5); }
main:focus { outline: none; }

/* ---------- pills, tags, chips ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: var(--r-pill);
  font: 500 var(--fs-xs)/1 var(--font); letter-spacing: .01em; white-space: nowrap;
  color: var(--idle); background: var(--idle-soft); border: 1px solid var(--idle-line); }
.pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.pill.plain::before { display: none; }
/* job statuses */
.pill.queued { color: var(--idle); }
.pill.queued::before { background: transparent; border: 1.5px solid currentColor; width: 8px; height: 8px; }
/* running: a turning ring, so "busy" reads by shape and motion, not colour alone (a static open ring under reduced motion) */
.pill.running { color: var(--info); background: var(--info-soft); border-color: var(--info-line); font-weight: 600; }
.pill.running::before { width: 9px; height: 9px; background: none; border: 2px solid currentColor; border-right-color: transparent;
  opacity: 1; animation: spin .9s linear infinite; }
.pill.done { color: var(--good); background: var(--good-soft); border-color: var(--good-line); }
.pill.failed { color: var(--crit); background: var(--crit-soft); border-color: var(--crit-line); }
/* lead statuses */
.pill.new, .pill.scored { color: var(--idle); }
.pill.described, .pill.analyzed { color: var(--info); background: var(--info-soft); border-color: var(--info-line); }
.pill.go, .pill.drafted, .pill.reviewed { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line); }
.pill.packaged, .pill.good { color: var(--good); background: var(--good-soft); border-color: var(--good-line); }
.pill.warn { color: var(--warn); background: var(--warn-soft); border-color: var(--warn-line); }
.pill.nogo { color: var(--crit); background: var(--crit-soft); border-color: var(--crit-line); }
@keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@keyframes spin { to { transform: rotate(360deg); } }

.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: var(--r-sm);
  font: 500 11px/1 var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
  background: var(--surface-3); white-space: nowrap; }
.tag.accent { color: var(--accent); background: var(--accent-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.chip { font: 500 var(--fs-sm)/1 var(--mono); padding: 6px 9px; border-radius: var(--r-sm); background: var(--surface-3);
  color: var(--ink-2); border: 1px solid var(--line); }

/* ---------- score ---------- */
.score { display: inline-flex; flex-direction: column; align-items: stretch; gap: 4px; width: 44px; }
.score__num { font-weight: 600; font-size: 1rem; line-height: 1; text-align: left; letter-spacing: -.01em; }
.score__bar { width: 100%; height: 4px; display: block; }
.score__bar .track { fill: var(--surface-3); }
.score__bar .fill { fill: currentColor; }
.score.hi { color: var(--good); } .score.mid { color: var(--warn); } .score.lo { color: var(--idle); }
.score.none { color: var(--muted); }
.score.hi .score__num, .score.mid .score__num, .score.lo .score__num { color: inherit; }
.score-ring { position: relative; width: 72px; height: 72px; flex: none; color: var(--idle); }
.score-ring svg { width: 72px; height: 72px; display: block; }
.score-ring .track { stroke: var(--surface-3); }
.score-ring .fill { stroke: currentColor; }
.score-ring__num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 1.375rem; font-weight: 600; line-height: 1; color: var(--ink); }
.score-ring__num small { font-size: 10px; font-weight: 500; letter-spacing: .08em; color: var(--muted); margin-top: 3px; text-transform: uppercase; }
.score-ring.hi { color: var(--good); } .score-ring.mid { color: var(--warn); }
.score-stack { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: none; }
/* band colour for bare score numbers (trail, stepper, bid rows) */
.trail-sum__n.hi, .step__score b.hi, .bid__score b.hi { color: var(--good); }
.trail-sum__n.mid, .step__score b.mid, .bid__score b.mid { color: var(--warn); }
.trail-sum__n.lo, .step__score b.lo, .bid__score b.lo, .trail-sum__n.none { color: var(--idle); }

/* score change: glyph + number (words for screen readers). 15+ points is a "big" move: filled chip. */
.delta { display: inline-flex; align-items: center; gap: 2px; padding: 3px 5px; border-radius: var(--r-sm);
  font: 600 var(--fs-xs)/1 var(--font); white-space: nowrap; }
.delta > [aria-hidden] { font-size: .78em; }
.delta.up { color: var(--good); }
.delta.down { color: var(--crit); }
.delta.same { color: var(--muted); font-weight: 500; }
.delta.big.up { background: var(--good-soft); box-shadow: inset 0 0 0 1px var(--good-line); }
.delta.big.down { background: var(--crit-soft); box-shadow: inset 0 0 0 1px var(--crit-line); }

/* ---------- deadline ---------- */
.due { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; white-space: nowrap; font-size: var(--fs-sm); color: var(--ink-2); }
.due.soon { color: var(--warn); font-weight: 600; }
.due.crit { color: var(--crit); font-weight: 600; }
.due.closed { color: var(--muted); font-weight: 400; text-decoration: line-through; text-decoration-color: var(--line-strong); }
.due.none { color: var(--muted); }
.due .icon { width: 14px; height: 14px; vertical-align: 0; }

/* ---------- data tables ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.list { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.list th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted);
  padding: 10px var(--s3); border-bottom: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
.list td { padding: 12px var(--s3); border-bottom: 1px solid var(--line); vertical-align: middle; color: var(--ink-2); }
.list tbody tr:last-child td { border-bottom: 0; }
.list th:first-child, .list td:first-child { padding-left: var(--s4); }
.list th:last-child, .list td:last-child { padding-right: var(--s4); }
.list tbody tr { transition: background .12s var(--ease); }
.list tbody tr:hover td { background: var(--surface-2); }
.list tr.off td { color: var(--muted); }
.list tr.off .score, .list tr.off .lead-title { opacity: .6; }
/* no-go leads: sorted last under a "No-go" divider, muted but fully readable (no opacity) */
.list tr.set-aside th { text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); color: var(--crit); white-space: normal;
  background: var(--surface-3); border-top: 1px solid var(--line-strong); }
.list tr.set-aside th .icon { width: 14px; height: 14px; margin-right: 6px; }
.list tr.set-aside .count { margin-left: 6px; }
.set-aside__note { font-weight: 400; color: var(--muted); margin-left: var(--s3); }
.list tr.is-nogo td { background: var(--surface-2); color: var(--muted); }
.list tr.is-nogo .lead-title { font-weight: 400; color: var(--ink-2); }
.list tr.is-nogo .lead-title:hover { color: var(--accent); }
.list tr.is-nogo .score { color: var(--idle); }
.list .num { text-align: right; }
.list td.min { width: 1%; white-space: nowrap; }
.lead-title { display: block; font-weight: 500; font-size: var(--fs-base); color: var(--ink); text-decoration: none; line-height: 1.35; }
.lead-title:hover { color: var(--accent); text-decoration: underline; }
.lead-sub { display: block; margin-top: 3px; color: var(--muted); font-size: var(--fs-sm); line-height: 1.4; }
.lead-sub .sep { color: var(--line-strong); padding: 0 4px; }
.clip { max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.job-id { font-family: var(--mono); font-weight: 500; text-decoration: none; }
@media (min-width: 640px) {
  .list th:first-child, .list td:first-child { padding-left: var(--s5); }
  .list th:last-child, .list td:last-child { padding-right: var(--s5); }
}

/* stacked rows on phones: each row becomes a compact card, cells carry data-label */
@media (max-width: 719px) {
  .list.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .list.stack, .list.stack tbody { display: block; }
  .list.stack tr { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--s3); padding: 14px var(--s4);
    border-bottom: 1px solid var(--line); }
  .list.stack tbody tr:last-child { border-bottom: 0; }
  .list.stack td { display: flex; gap: var(--s2); align-items: center; padding: 0 !important; border: 0; background: none !important; grid-column: 1 / -1; }
  .list.stack td[data-label]::before { content: attr(data-label); flex: 0 0 82px; font-size: 11px; font-weight: 600; text-transform: uppercase;
    letter-spacing: .06em; color: var(--muted); }
  .list.stack td.lead-cell { grid-column: 2; grid-row: 1; display: block; }
  .list.stack td.score-cell { grid-column: 1; grid-row: 1; align-items: flex-start; }
  .list.stack td.head-cell { font-size: var(--fs-base); }
  .list.stack .clip { max-width: none; white-space: normal; }
  .list.stack td:empty { display: none; }
  .list.stack td.min.head-cell { grid-column: 1; }
  .list.stack td.min.head-cell + td.head-cell { grid-column: 2; }
  .list.stack td.act { grid-column: 2; grid-row: 1; justify-content: flex-end; }
  .list.stack tr.set-aside { display: block; padding: 10px var(--s4); background: var(--surface-3); border-top: 1px solid var(--line-strong); }
  .list.stack tr.set-aside th { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 0; padding: 0; border: 0; background: none; }
  .set-aside__note { flex-basis: 100%; margin: 2px 0 0; }
  .list.stack tr.is-nogo { background: var(--surface-2); }
}

/* ---------- empty state ---------- */
.empty { text-align: center; padding: var(--s6) var(--s4); color: var(--muted); }
.empty__icon { width: 44px; height: 44px; border-radius: 50%; margin: 0 auto var(--s3); display: flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: var(--muted); }
.empty__title { color: var(--ink); font-weight: 600; margin-bottom: var(--s1); }
.empty p { max-width: 46ch; margin: 0 auto var(--s3); font-size: var(--fs-sm); }
.empty.compact { padding: var(--s5) var(--s4); text-align: left; display: flex; gap: var(--s3); align-items: flex-start; }
.empty.compact .empty__icon { margin: 0; width: 36px; height: 36px; flex: none; }
.empty.compact p { margin: 0; }

/* ---------- client cards (dashboard) ---------- */
.client-grid { display: grid; gap: var(--s4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .client-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } }
.client-card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--shadow-1); color: inherit; text-decoration: none; overflow: hidden;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease); }
.client-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow-2); color: inherit; transform: translateY(-1px); }
.client-card:has(.client-card__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
/* the client name is the card's link; its ::after makes the whole card clickable except the bids list */
.client-card__link { color: var(--ink); text-decoration: none; }
.client-card__link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-lg); }
.client-card:hover .client-card__link { color: var(--accent); text-decoration: underline; }
.client-card__link:focus-visible { outline-offset: 1px; }
.client-card__top { padding: var(--s4) var(--s5) var(--s3); display: flex; gap: var(--s3); align-items: flex-start; }
.monogram { width: 40px; height: 40px; flex: none; border-radius: var(--r); display: flex; align-items: center; justify-content: center;
  background: var(--shell); color: var(--brass); font-weight: 600; font-size: .95rem; letter-spacing: .02em; }
.client-card h2 { font-size: var(--fs-base); line-height: 1.3; }
.client-card .ids { margin-top: 3px; font-size: var(--fs-xs); color: var(--muted); font-family: var(--mono); }
.client-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); margin-top: auto; }
.client-card__stats div { padding: var(--s3) var(--s5); }
.client-card__stats div + div { border-left: 1px solid var(--line); }
.client-card__stats b { display: block; font-size: 1.25rem; font-weight: 600; line-height: 1.2; color: var(--ink); }
.client-card__stats b.good { color: var(--good); }
.client-card__stats b.warn { color: var(--warn); }
/* bids in process (sits above the card link so its own links and toggle work) */
.bids { position: relative; z-index: 1; background: var(--surface); border-top: 1px solid var(--line); padding: var(--s3) var(--s5) var(--s2); }
.bids__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s2); margin: 0 0 2px;
  font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.bids__order { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: var(--fs-xs); }
.bids__list { list-style: none; margin: 0; padding: 0; }
.bid { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title due" "stage score";
  gap: 6px var(--s3); align-items: center; padding: 10px 0; }
.bid + .bid, .bids__more .bids__list .bid:first-child { border-top: 1px solid var(--line); }
.bid__title { grid-area: title; font-size: var(--fs-sm); font-weight: 500; line-height: 1.35; color: var(--ink); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.bid__title:hover { color: var(--accent); text-decoration: underline; }
.bid__due { grid-area: due; justify-self: end; align-self: start; }
.bid__due .due { font-size: var(--fs-xs); }
.bid__stage { grid-area: stage; display: flex; align-items: center; gap: var(--s2); min-width: 0; }
.bid__score { grid-area: score; justify-self: end; display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); white-space: nowrap; }
.bid__score b { font-weight: 600; }
.bid__fit { font-size: var(--fs-xs); color: var(--muted); }
.bid__score .delta { padding: 2px 4px; }
.bids__more summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin: 0 0 2px; padding: 0 8px 0 4px;
  border-radius: var(--r); cursor: pointer; list-style: none; color: var(--accent); font-size: var(--fs-xs); font-weight: 600; }
.bids__more summary::-webkit-details-marker { display: none; }
.bids__more summary:hover { background: var(--accent-soft); }
.bids__more summary .icon { width: 14px; height: 14px; vertical-align: 0; transition: transform .15s var(--ease); }
.bids__more[open] summary .icon { transform: rotate(45deg); }
.bids__more-open, .bids__more[open] .bids__more-closed { display: none; }
.bids__more[open] .bids__more-open { display: inline; }
.bids__empty { display: flex; gap: var(--s2); align-items: flex-start; margin: var(--s1) 0 var(--s2); font-size: var(--fs-sm); color: var(--muted); }
.bids__empty b { color: var(--ink-2); font-weight: 600; }
.bids__empty .icon { margin-top: 2px; }

/* mini pipeline: five segments (done = green, next = blue), same stages as the lead page stepper */
.stagebar { display: inline-flex; align-items: center; }
.stagebar__segs { display: inline-grid; grid-template-columns: repeat(5, 9px); gap: 2px; }
.stagebar__segs i { height: 5px; border-radius: 2px; background: var(--bar-track); }
.stagebar__segs i.done { background: var(--good); }
.stagebar__segs i.next { background: var(--accent); }
.client-card__stats span { font-size: var(--fs-xs); color: var(--muted); }
.client-card__foot { padding: 10px var(--s5); font-size: var(--fs-xs); color: var(--muted); background: var(--surface-2);
  border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: var(--s2); }
.client-card__foot .go { color: var(--accent); font-weight: 500; }

/* quota meter */
.meter { margin: var(--s2) 0 var(--s4); }
.meter__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); margin-bottom: 6px; }
.meter__value { font-size: 1.5rem; font-weight: 600; letter-spacing: -.02em; }
.meter__value small { font-size: var(--fs-sm); color: var(--muted); font-weight: 400; letter-spacing: 0; }
.meter svg { width: 100%; height: 8px; display: block; }
.meter .track { fill: var(--surface-3); }
.meter .fill { fill: var(--accent); }
.meter.high .fill { fill: var(--crit); }
.dl-plain { display: grid; grid-template-columns: auto 1fr; gap: 6px var(--s4); margin: 0 0 var(--s4); font-size: var(--fs-sm); }
.dl-plain dt { color: var(--muted); }
.dl-plain dd { margin: 0; }

/* ---------- facts (definition lists) ---------- */
dl.facts { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
dl.facts > div { padding: 10px 0; border-bottom: 1px solid var(--line); display: grid; gap: 2px; }
dl.facts > div:first-child { padding-top: 0; }
dl.facts > div:last-child { border-bottom: 0; padding-bottom: 0; }
dl.facts dt { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
dl.facts dd { margin: 0; color: var(--ink); font-size: var(--fs-sm); overflow-wrap: anywhere; }
dl.facts dd .muted { font-size: var(--fs-sm); }

.facts-strip { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin: var(--s4) 0 0; padding: var(--s3) 0 0; border-top: 1px solid var(--line); }
.facts-strip div { min-width: 0; }
.facts-strip dt { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.facts-strip dd { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--ink); display: flex; align-items: center; gap: 6px; }

/* ---------- lead header ---------- */
.lead-head { display: flex; gap: var(--s4); align-items: flex-start; flex: 1 1 520px; min-width: 0; }
.lead-head h1 { font-size: var(--fs-md); line-height: 1.3; overflow-wrap: anywhere; }
.lead-head .reason { margin: var(--s2) 0 0; color: var(--ink-2); font-size: var(--fs-sm); max-width: 80ch; }
@media (min-width: 900px) { .lead-head h1 { font-size: 1.5rem; } }

/* ---------- pipeline stepper ---------- */
.progress { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 0 0 var(--s2); padding: 0; list-style: none; }
.progress li { height: 6px; border-radius: var(--r-pill); background: var(--surface-3); }
.progress li.done { background: var(--good); }
.progress li.current { background: var(--accent); }
.progress-label { display: flex; justify-content: space-between; gap: var(--s2); font-size: var(--fs-sm); color: var(--muted); margin-bottom: var(--s4); }
.progress-label b { color: var(--ink); font-weight: 600; }

.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.step { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 0 var(--s3); padding-bottom: var(--s4); }
.step:last-child { padding-bottom: 0; }
.step::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px; background: var(--line); border-radius: 2px; }
.step:last-child::before { display: none; }
.step.done::before { background: var(--good-line); }
.step__node { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 600 var(--fs-sm)/1 var(--font); color: var(--muted); background: var(--surface); border: 2px solid var(--line-strong); }
.step.done .step__node { background: var(--good); border-color: var(--good); color: var(--surface); }
.step.done .step__node .icon { stroke-width: 2.5; width: 15px; height: 15px; }
.step.current .step__node { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.step__body { min-width: 0; padding-top: 4px; }
.step__title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--s2); font-weight: 600; color: var(--ink); }
.step__desc { color: var(--muted); font-size: var(--fs-sm); margin: 2px 0 var(--s3); }
.step.todo .step__title { color: var(--ink-2); }
.step.current .step__card { background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: var(--r); padding: var(--s3); margin-top: -4px; }
.step.current .step__desc { color: var(--ink-2); }
.step form { margin: 0; }
.step .step__state { font: 600 10px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; padding: 4px 6px; border-radius: var(--r-sm); }
.step.done .step__state { color: var(--good); background: var(--good-soft); }
.step.current .step__state { color: var(--accent-ink); background: var(--accent); }
.steps.is-nogo .step { opacity: .55; }
/* stage score beside the Analyze / Red-team step titles */
.step__score { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; font-size: var(--fs-sm); font-weight: 500; color: var(--muted); }
.step__score b { font-weight: 600; }

/* ---------- score trail (lead page, top of "Work this lead") ---------- */
.trail-block { border-bottom: 1px solid var(--line); }
.trail-sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3) var(--s5); margin-bottom: var(--s4); }
.trail-sum__text { min-width: 0; flex: 1 1 260px; }
.trail-sum__title { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.trail-sum__line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s2); margin: 0; }
.trail-sum__n { font-size: 1.125rem; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
.trail-sum__n.is-last { font-size: 1.75rem; }
.trail-sum__arrow { color: var(--muted); }
.trail-sum .delta { font-size: var(--fs-sm); padding: 4px 7px; }
.trail-sum__note { font-size: var(--fs-sm); color: var(--muted); }
.trail { list-style: none; margin: 0; padding: 0; }
.trail__item { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 var(--s3); padding-bottom: var(--s3); }
.trail__item:last-child { padding-bottom: 0; }
.trail__item::before { content: ""; position: absolute; left: 19px; top: 34px; bottom: 2px; width: 2px; border-radius: 2px; background: var(--line); }
.trail__item:last-child::before { display: none; }
.trail__score { width: 40px; height: 30px; border-radius: var(--r); display: flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: var(--fs-base); color: var(--idle); background: var(--idle-soft); box-shadow: inset 0 0 0 1px var(--idle-line); }
.trail__score.hi { color: var(--good); background: var(--good-soft); box-shadow: inset 0 0 0 1px var(--good-line); }
.trail__score.mid { color: var(--warn); background: var(--warn-soft); box-shadow: inset 0 0 0 1px var(--warn-line); }
.trail__item.is-current .trail__score { box-shadow: inset 0 0 0 2px currentColor; }
.trail__body { min-width: 0; padding-top: 4px; }
.trail__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--s2); margin: 0; font-size: var(--fs-sm); color: var(--ink); }
.trail__head b { font-weight: 600; }
.trail__when { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); white-space: nowrap; }
.trail__reason { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--ink-2); max-width: 80ch; overflow-wrap: anywhere; }
.trail__item.is-pending .trail__score { background: transparent; box-shadow: none; border: 1.5px dashed var(--line-strong); }
.trail__item.is-pending .trail__head b, .trail__item.is-pending .trail__reason { color: var(--muted); font-weight: 500; }
.trail__item.is-pending::before { background: none; width: 0; border-left: 2px dotted var(--line-strong); }
.trail-block .empty.compact { padding: 0; }

.decision { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; }
.decision p { margin: 0; font-size: var(--fs-sm); color: var(--muted); display: flex; gap: var(--s2); align-items: flex-start; flex: 1 1 260px; }
.decision p .icon { color: var(--brass); margin-top: 2px; }
.decision form { margin: 0; }

/* ---------- file lists ---------- */
.file-group + .file-group { margin-top: var(--s4); }
.file-group h3 { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s2); }
.files { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.files li { display: flex; align-items: center; gap: var(--s3); padding: 0 var(--s2) 0 var(--s3); min-height: 46px; }
.files li + li { border-top: 1px solid var(--line); }
.files li:hover { background: var(--surface-2); }
.files .icon { color: var(--muted); }
.files .file-name { flex: 1; min-width: 0; font-family: var(--mono); font-size: var(--fs-sm); color: var(--ink); text-decoration: none;
  overflow-wrap: anywhere; padding: 10px 0; }
.files .file-name:hover { color: var(--accent); text-decoration: underline; }
.files .file-desc { color: var(--muted); font-size: var(--fs-xs); font-family: var(--font); display: block; margin-top: 2px; }
.files .dl { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--r);
  color: var(--muted); flex: none; }
.files .dl:hover { background: var(--surface-3); color: var(--accent); }

/* ---------- solicitation frame ---------- */
iframe.desc { display: block; width: 100%; height: 70vh; min-height: 360px; border: 0; background: #fff;
  border-radius: 0 0 var(--r-lg) var(--r-lg); }
.frame-note { display: flex; gap: var(--s2); align-items: center; }

/* ---------- document reader (rendered markdown) ---------- */
.doc-shell { display: grid; gap: var(--s5); }
.doc { padding: var(--s5) var(--s4); color: var(--ink); font-size: 1rem; line-height: 1.7; overflow-wrap: break-word; }
.doc > p, .doc > ul, .doc > ol, .doc > blockquote { max-width: 76ch; }
.doc h1, .doc h2, .doc h3, .doc h4 { line-height: 1.3; margin: 1.8em 0 .6em; letter-spacing: -.01em; }
.doc > :first-child { margin-top: 0; }
.doc h1 { font-size: 1.375rem; padding-bottom: .4em; border-bottom: 1px solid var(--line); }
.doc h2 { font-size: 1.25rem; padding-bottom: .3em; border-bottom: 1px solid var(--line); }
.doc h3 { font-size: 1.0625rem; }
.doc h4 { font-size: .9375rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.doc p, .doc ul, .doc ol, .doc blockquote { margin: 0 0 1em; }
.doc ul, .doc ol { padding-left: 1.4em; }
.doc li + li { margin-top: .3em; }
.doc li > ul, .doc li > ol { margin: .3em 0 0; }
.doc strong { color: var(--ink); }
.doc a { overflow-wrap: anywhere; }
.doc hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.doc blockquote { border-left: 3px solid var(--brass); background: var(--surface-2); padding: .75em 1em; color: var(--ink-2); border-radius: 0 var(--r) var(--r) 0; }
.doc blockquote > :last-child { margin-bottom: 0; }
.doc code { font-size: .86em; }
.doc pre { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r); padding: var(--s3) var(--s4);
  overflow-x: auto; font-size: .85rem; line-height: 1.55; margin: 0 0 1em; }
.doc pre code { background: none; padding: 0; }
/* compliance matrices and other tables */
.doc table { display: block; width: max-content; max-width: 100%; overflow-x: auto; border-collapse: separate; border-spacing: 0;
  margin: 1.25em 0 1.5em; font-size: .875rem; line-height: 1.5; border: 1px solid var(--line); border-radius: var(--r); }
.doc thead th { position: sticky; top: 0; background: var(--surface-3); color: var(--ink); font-weight: 600; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.doc th, .doc td { padding: 9px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); min-width: 140px; max-width: 46ch; }
.doc th:first-child, .doc td:first-child { min-width: 0; }
.doc th + th, .doc td + td { border-left: 1px solid var(--line); }
.doc tbody tr:nth-child(even) td { background: var(--surface-2); }
.doc tbody tr:last-child td { border-bottom: 0; }
.doc tbody tr:hover td { background: var(--accent-soft); }
@media (min-width: 640px) { .doc { padding: var(--s6); } .doc h1 { font-size: 1.625rem; } }

.editor textarea { border: 0; border-radius: var(--r-lg) var(--r-lg) 0 0; min-height: 60vh; background: var(--surface); box-shadow: none; }
.editor textarea:focus { box-shadow: inset 0 0 0 2px var(--focus); }
.editor__bar { position: sticky; bottom: 0; display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap;
  padding: var(--s3) var(--s4); background: var(--surface-2); border-top: 1px solid var(--line); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.editor__bar .muted { font-size: var(--fs-sm); margin-left: auto; }
pre.plain { margin: 0; padding: var(--s4) var(--s5); font: .85rem/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.path { font-family: var(--mono); font-size: var(--fs-sm); color: var(--muted); overflow-wrap: anywhere; margin: 0 0 4px; }
.file-title { overflow-wrap: anywhere; }

/* ---------- job log ---------- */
.terminal { background: var(--term-bg); color: var(--term-ink); border-radius: var(--r-lg); overflow: hidden; border: 1px solid #000; box-shadow: var(--shadow-2); }
.terminal__bar { display: flex; align-items: center; gap: var(--s3); padding: 10px var(--s4); border-bottom: 1px solid #1d2938;
  font-size: var(--fs-sm); color: var(--term-muted); }
.terminal__bar h2 { color: var(--term-ink); font-size: var(--fs-sm); font-weight: 600; margin-right: auto; }
.terminal__bar .live { display: inline-flex; align-items: center; gap: 6px; color: #9cc3ff; }
.terminal__bar .live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.2s infinite; }
pre.log { margin: 0; padding: var(--s4); max-height: 72vh; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  font: .8125rem/1.65 var(--mono); color: var(--term-ink); }
pre.log:focus-visible { outline-color: #ffd27a; outline-offset: -2px; }
.timeline { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s6); margin: 0; }
.timeline div { min-width: 120px; }
.timeline dt { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.timeline dd { margin: 2px 0 0; font-size: var(--fs-sm); font-family: var(--mono); color: var(--ink); }
.summary { font-size: var(--fs-sm); color: var(--ink-2); margin: var(--s4) 0 0; padding-top: var(--s4); border-top: 1px solid var(--line); overflow-wrap: anywhere; }

/* ---------- setup QR ---------- */
.qr-block { display: grid; gap: var(--s4); align-items: center; padding: var(--s4); background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r); margin: var(--s3) 0 var(--s4); }
@media (min-width: 520px) { .qr-block { grid-template-columns: auto 1fr; } }
.qr { background: #fff; padding: 10px; display: inline-block; border-radius: var(--r); border: 1px solid #e3e0d9; justify-self: center; }
.qr svg { width: 168px; height: 168px; display: block; }
.secret { font-size: var(--fs-sm); color: var(--muted); margin: 0; }
.secret code { display: block; margin-top: 6px; font-size: .8rem; letter-spacing: .08em; padding: 8px 10px; overflow-wrap: anywhere; color: var(--ink); }
.steps-mini { margin: 0 0 var(--s4); padding-left: 1.2em; color: var(--ink-2); font-size: var(--fs-sm); }
.steps-mini li + li { margin-top: 4px; }

/* ---------- message page ---------- */
.message { max-width: 560px; margin: var(--s6) auto 0; text-align: center; }
.message .empty__icon { width: 52px; height: 52px; }
.message h1 { margin-bottom: var(--s2); }
.message p { color: var(--muted); }
.naics-input { width: 150px; font-family: var(--mono); letter-spacing: .04em; }