/* AppliedIn — a calm console for a one-person job-application pipeline.
   Understated, product-grade: Inter everywhere, JetBrains Mono only for the
   log stream and data fragments. Color carries meaning, not decoration:
   green = discovery/success, amber = needs attention, red = failure.
   The two-step flow (Discover → Process) is the visual spine; everything
   else recedes until it matters. */

:root {
  --bg: #101312;
  --panel: #151917;
  --panel-solid: #151917;
  --card: #1a1f1c;
  --card-2: #202622;
  --border: #262d28;
  --border-2: #343d37;
  --fg: #e8ede9;
  --muted: #9fada3;
  --faint: #66716a;

  --scan: #3fd68f;      /* discovery / good */
  --scan-deep: #24b476;
  --scan-ink: #08130d;  /* text on a green button */
  --run: #f2b13e;       /* process / attention */
  --run-deep: #d99a25;
  --ink-on-run: #221703;
  --bad: #f07b71;
  --info: #6cc4d8;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-2: 0 10px 34px -12px rgba(0, 0, 0, 0.5);
  --r-sm: 6px;
  --r-md: 9px;
  --r-lg: 12px;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

:root[data-theme="light"] {
  --bg: #f6f7f6;
  --panel: #ffffff;
  --panel-solid: #ffffff;
  --card: #ffffff;
  --card-2: #f1f4f1;
  --border: #e1e6e1;
  --border-2: #c9d2c9;
  --fg: #171d19;
  --muted: #5a675e;
  --faint: #8b968e;

  --scan: #0e9c62;
  --scan-deep: #0b7f50;
  --scan-ink: #ffffff;
  --run: #e29c17;
  --run-deep: #c4860e;
  --ink-on-run: #241804;
  --bad: #d64a3e;
  --info: #14829e;

  --shadow-1: 0 1px 2px rgba(20, 30, 24, 0.07);
  --shadow-2: 0 12px 36px -14px rgba(20, 30, 24, 0.22);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--scan); color: var(--scan-ink); }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; color: inherit; }
button:disabled { cursor: default; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--scan); outline-offset: 2px; border-radius: 4px; }

.shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ─── Control deck ───────────────────────────────────────────────────────── */
.deck {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 12px clamp(16px, 3vw, 32px) 0;
}
.deck-row {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 40px);
  flex-wrap: wrap;
}
.deck-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.brand-logo .lg-badge {
  fill: color-mix(in srgb, var(--scan) 9%, var(--card));
  stroke: var(--border-2);
  stroke-width: 1;
}
.brand-logo .lg-mark {
  fill: none;
  stroke: var(--scan);
  stroke-width: 4.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.brand-txt { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.brand-sub {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--faint);
}
.paused-pill {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--run);
  border: 1px solid color-mix(in srgb, var(--run) 40%, transparent);
  background: color-mix(in srgb, var(--run) 10%, transparent);
  border-radius: 999px;
  padding: 2px 10px;
  animation: pausepulse 2s ease-in-out infinite;
}
@keyframes pausepulse { 50% { opacity: 0.55; } }

/* The two-step flow: Discover → Process. Normal-sized, tasteful buttons. */
.deck-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: center;
  flex-wrap: wrap;
}
.act {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 14px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.005em;
  white-space: nowrap;
  box-shadow: var(--shadow-1);
  transition: background 0.14s ease, filter 0.14s ease, opacity 0.14s ease;
}
.act-ico { width: 15px; height: 15px; flex-shrink: 0; }
.act-discover {
  background: var(--scan);
  border-color: color-mix(in srgb, var(--scan-ink) 12%, var(--scan));
  color: var(--scan-ink);
  border-radius: var(--r-md) 0 0 var(--r-md);
}
.act-discover:not(:disabled):hover { filter: brightness(1.05); }
.act-caret {
  width: 28px;
  height: 34px;
  padding: 0;
  justify-content: center;
  background: var(--scan);
  border-color: color-mix(in srgb, var(--scan-ink) 12%, var(--scan));
  border-left: 1px solid color-mix(in srgb, var(--scan-ink) 25%, var(--scan));
  color: var(--scan-ink);
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.act-caret:hover, .act-caret.open { filter: brightness(1.07); }
.act-caret svg { transition: transform 0.15s ease; }
.act-caret.open svg { transform: rotate(180deg); }
.disco { position: relative; display: inline-flex; }
.act-arrow {
  display: inline-flex;
  color: var(--faint);
}
.act-process {
  background: var(--run);
  border-color: color-mix(in srgb, var(--ink-on-run) 12%, var(--run));
  color: var(--ink-on-run);
}
.act-process:not(:disabled):hover { filter: brightness(1.04); }
.act-badge {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink-on-run) 82%, transparent);
  color: var(--run);
  font-size: 11.5px;
  font-weight: 600;
  margin-left: 2px;
}
.act-badge.zero { opacity: 0.55; }
.act:disabled { opacity: 0.75; }
.act.running { pointer-events: none; }
/* Stop is destructive and only appears mid run, so it reads as the exception it
   is: outlined and quiet next to the two primary actions, never competing with
   them for the click. */
.act-stop {
  border: 1px solid color-mix(in srgb, var(--bad, #d9544f) 45%, transparent);
  background: color-mix(in srgb, var(--bad, #d9544f) 10%, transparent);
  color: var(--bad, #d9544f);
  padding: 0 14px;
}
.act-stop:hover { background: color-mix(in srgb, var(--bad, #d9544f) 20%, transparent); }
.act-spin {
  display: none;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  animation: spin 0.8s linear infinite;
}
.act.running .act-spin { display: inline-block; }
.act.running .act-ico { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* company picker (scopes the next discovery run) */
/* A popover is anchored under its button, so a tall one runs off the bottom of
   the window and its footer — where the save button lives — becomes
   unreachable: scrolling over the popover scrolls its inner list instead of the
   page. --pop-max is set from app.js on open to the space actually below the
   button, and the column layout lets the scrollable middle shrink so the footer
   is always in view. */
.copicker {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  width: min(272px, calc(100vw - 32px));
  max-height: var(--pop-max, none);
  display: flex;
  flex-direction: column;
  background: var(--panel-solid);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  z-index: 60;
  overflow: hidden;
}
/* Footers and headers hold their size; only the scrollable middle gives way. */
.copicker > .cp-head,
.copicker > .cp-tools,
.copicker > .cp-role-h,
.copicker > .cp-prof,
.copicker > .cp-window,
.copicker > .cp-foot,
.copicker > .cp-add,
.copicker > .cp-role-foot { flex: none; }
.cp-head { padding: 10px 10px 0; }
.cp-search {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 7px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--card-2);
  color: var(--fg);
  outline: none;
}
/* Nine near-identical inputs in a dense pane: a border swap alone is easy to
   lose mid tab, so focus also carries a soft ring. */
.cp-search:focus {
  border-color: var(--scan);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--scan) 14%, transparent);
}
.cp-search::placeholder { color: var(--faint); }
.cp-tools {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 7px;
  /* the list below scrolls; rows should slide under a line, not into the toolbar */
  border-bottom: 1px solid var(--border);
}
.cp-lk {
  border: none;
  background: none;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--scan);
}
.cp-lk:hover { text-decoration: underline; }
.cp-state { margin-left: auto; font-size: 10.5px; color: var(--faint); }
.cp-list {
  max-height: 224px;
  overflow-y: auto;
  padding: 4px 6px 6px;
  scrollbar-width: thin;
}
.cp-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 8px;
  border-radius: var(--r-sm);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  flex-wrap: wrap;              /* the roles editor drops to its own line */
  transition: background 0.12s;
}
.cp-item:hover { background: var(--card-2); }
/* Checked rows are the next run. Unchecked names step back to muted so the
   picked set can be read straight down a forty row column; the checkbox itself
   still carries the state, so colour is never the only signal. */
.cp-item:not(.skipped):has(.cp-name input:not(:checked)) .cp-name span { color: var(--muted); }

/* Discover is two panes: the watchlist, and the preferences for whichever
   company is open. A single dropdown could not carry seven fields per company,
   and stacking them made the list unreachable. */
.copicker-wide { width: min(680px, calc(100vw - 32px)); }
.cp-cols { display: flex; align-items: stretch; min-height: 0; }
.cp-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.cp-col-list { flex: 0 0 46%; border-right: 1px solid var(--border); }
.cp-col-detail { flex: 1 1 auto; background: var(--card); }
.cp-col > .cp-head, .cp-col > .cp-tools { flex: none; }  /* only the list gives way */
/* In the wide picker the list fills its column: the detail pane runs tall, and
   dead space under a forty row list is scroll the list could have used. The cap
   mirrors the detail body's, so the popover stays sane even on a code path that
   never set --pop-max. */
.copicker-wide .cp-list { flex: 1 1 auto; min-height: 0; max-height: min(52vh, 420px); }
@media (max-width: 760px) {          /* one column: the list still comes first */
  .copicker-wide { width: calc(100vw - 32px); }
  .cp-cols { flex-direction: column; }
  /* 0 1 auto, not none: a height capped popover must squeeze both panes,
     not take everything out of the rules pane below. */
  .cp-col-list { flex: 0 1 auto; border-right: 0; border-bottom: 1px solid var(--border); }
  /* stacked, a tall list shoves the rules pane below the fold: stay compact */
  .copicker-wide .cp-list { max-height: 224px; }
}

/* Row chip: does this company screen on its own rules, or on the defaults?
   Mono pill so the counts line up down the column. "default" stays a faint
   ghost (forty of these are noise); "custom" wears the same scan tint as the
   overridden fields in the pane, so chip and field read as one state. */
.cp-roles {
  margin-left: auto;
  flex: none;
  border: 1px solid transparent;
  background: none;
  border-radius: 999px;
  padding: 1px 7px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  line-height: 1.6;
  color: var(--faint);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.cp-roles:hover { border-color: var(--border-2); color: var(--fg); }
.cp-roles.custom {
  color: var(--scan);
  border-color: color-mix(in srgb, var(--scan) 38%, transparent);
  background: color-mix(in srgb, var(--scan) 10%, transparent);
}
.cp-roles.custom:hover { color: var(--scan); background: color-mix(in srgb, var(--scan) 18%, transparent); }
/* The open row points at the pane it filled: a rail on the shared edge. */
.cp-item.sel { background: var(--card-2); box-shadow: inset -2px 0 0 var(--scan); }
/* A scan border now means "has its own rules", so the open row's chip may not
   borrow it: neutral lift for "default", untouched tint for "custom". */
.cp-item.sel .cp-roles { border-color: var(--border-2); color: var(--fg); }
.cp-item.sel .cp-roles.custom {
  border-color: color-mix(in srgb, var(--scan) 38%, transparent);
  color: var(--scan);
}

/* The preference pane. Same fields as Job preferences, so the two read alike. */
.cp-dt-h {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px 8px; border-bottom: 1px solid var(--border);
  flex: none;                  /* the body scrolls; header and foot hold */
}
.cp-dt-co { font-size: 13px; font-weight: 700; color: var(--fg); }
/* Same species as the row chip: mono pill, scan tint only when it differs. */
.cp-dt-badge {
  margin-left: auto; flex: none;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.03em;
  line-height: 1.6; padding: 1px 7px;
  border-radius: 999px; border: 1px solid var(--border); color: var(--faint);
}
.cp-dt-badge.custom {
  font-weight: 600;
  color: var(--scan); border-color: color-mix(in srgb, var(--scan) 45%, transparent);
  background: color-mix(in srgb, var(--scan) 10%, transparent);
}
/* Nine fields have to fit under the header without crowding: a two column
   grid where sentences span both tracks and the short answers (two numbers,
   one yes/no) pair up, the same way Job preferences rows them. */
.cp-dt-body {
  flex: 1 1 auto;              /* fill the column so the foot pins to its bottom */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  align-content: start;        /* spare column height stays after the fields */
  padding: 10px 12px 12px 2px; /* slim left: each field brings its own lead-in */
  overflow-y: auto; min-height: 0;
  max-height: min(52vh, 420px);
  scrollbar-width: thin;
}
/* THE distinction this pane exists for. A shared value stays quiet: faint
   uppercase tag, plain field. An override is marked three ways so it cannot
   be missed: a scan rail down the field's edge, a tinted input border, and
   the tag set as a filled pill. Every field reserves rail width and lead-in,
   so overriding one never shifts the grid. */
.cp-dt-f {
  grid-column: 1 / -1;
  min-width: 0;                /* an input's own min width must not win a track */
  border-left: 2px solid transparent;
  padding-left: 8px;
}
.cp-dt-f:has(input[type="number"]),
.cp-dt-f:has(select) { grid-column: auto; }
.cp-dt-f:has(.cp-dt-inh.overridden) { border-left-color: var(--scan); }
.cp-dt-f:has(.cp-dt-inh.overridden) > .pf-l { color: var(--fg); }
.cp-dt-f:has(.cp-dt-inh.overridden) .cp-dt-in {
  border-color: color-mix(in srgb, var(--scan) 40%, var(--border));
}
.cp-dt-f:has(.cp-dt-inh.overridden) .cp-dt-in:focus { border-color: var(--scan); }
.cp-dt-in { padding: 5px 9px; font-size: 12.5px; }
.cp-dt-f select.cp-dt-in { appearance: auto; cursor: pointer; }
.cp-dt-f textarea.cp-dt-in {
  min-height: 54px; resize: vertical;
  /* same voice as Hard rules in Job preferences: the two panes read alike */
  font-family: var(--mono); font-size: 11px; line-height: 1.55;
}
.cp-dt-f .pf-l { display: flex; align-items: baseline; gap: 6px; }
.cp-dt-inh {
  margin-left: auto; font-style: normal; font-weight: 500;
  font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  line-height: 1.7; padding: 0 6px;
  border: 1px solid transparent; border-radius: 999px;
  color: var(--faint);
}
.cp-dt-inh.overridden {
  font-weight: 600;
  color: var(--scan);
  border-color: color-mix(in srgb, var(--scan) 38%, transparent);
  background: color-mix(in srgb, var(--scan) 12%, transparent);
}
.cp-dt-in::placeholder { color: var(--faint); font-style: italic; }
.cp-dt-foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 8px 12px; border-top: 1px solid var(--border);
  flex: none;
}
/* One line, and it yields before the buttons do. Without min-width:0 a long
   hint wraps into a narrow column and pushes Scan now off the panel. */
.cp-dt-hint { flex: 1 1 auto; min-width: 0; font-size: 10.5px; color: var(--faint);
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-dt-foot .cp-add-btn { flex: 0 0 auto; }
.cp-dt-foot .cp-dt-hint { flex-basis: 100%; }
.cp-dt-foot #cp-dt-save { margin-left: auto; }
.cp-dt-pick { padding: 18px 12px; font-size: 12px; color: var(--muted); line-height: 1.6; }
.cp-dt-foot .cp-add-btn:disabled { opacity: 0.4; cursor: default; }
.cp-dt-foot .cp-add-btn:disabled:hover { border-color: var(--border); }
.cp-item input[type="checkbox"] {
  accent-color: var(--scan);
  width: 14px;
  height: 14px;
  margin: 0;
  cursor: pointer;
  flex: none;
}
.cp-name {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  cursor: pointer;
}
.cp-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-skip {
  flex: none;
  border: 0;
  background: none;
  color: var(--faint);
  font-size: 13px;
  line-height: 1;
  padding: 2px 4px;
  border-radius: var(--r-sm);
  cursor: pointer;
  opacity: 0.4;
}
.cp-item:hover .cp-skip, .cp-item.skipped .cp-skip { opacity: 1; }
.cp-skip:hover { color: var(--fg); background: var(--card); }
/* A skipped row recedes whole: struck name, dimmed checkbox and chip. The
   strike, not the dimming, is what says skipped. */
.cp-item.skipped .cp-name span { text-decoration: line-through; color: var(--faint); }
.cp-item.skipped .cp-name input { opacity: 0.5; }
.cp-item.skipped .cp-roles { opacity: 0.55; }
.cp-skipnote { color: var(--faint); }

/* Dedicated toolbar control: the first-class "Skip companies" manager. */
.skipmgr { position: relative; display: inline-flex; }
.skipbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.skipbtn:hover { border-color: var(--border-2); color: var(--fg); }
/* Rotate & queue all: amber like every other rotation control, and cursor-clear
   that it acts rather than opening a panel as its neighbours do. */
.rotbtn { color: var(--run); border-color: color-mix(in srgb, var(--run) 35%, transparent); cursor: pointer; }
.rotbtn:hover { color: var(--run); border-color: var(--run); }
.rotbtn[disabled] { opacity: .55; cursor: default; }

/* Work in progress. The ↻ in the label turns, so the control that is running is
   the one that shows it — a button that only greys out reads as one that did
   nothing. */
@keyframes rot-spin { to { transform: rotate(360deg); } }
.is-busy { position: relative; opacity: .8; }
.is-busy::after {
  content: "↻"; display: inline-block; margin-left: 6px;
  animation: rot-spin 1.1s linear infinite; color: var(--run);
}
.skipbtn.on {
  color: var(--run);
  border-color: color-mix(in srgb, var(--run) 45%, transparent);
  background: color-mix(in srgb, var(--run) 8%, var(--card));
}
.skip-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  font-size: 11px;
  background: color-mix(in srgb, var(--run) 18%, transparent);
  color: var(--run);
}
.skippicker { left: 0; right: auto; }
.sp-item input { accent-color: var(--run); }
.sp-item.skipped span { text-decoration: line-through; color: var(--faint); }
.cp-none { padding: 16px 12px; font-size: 12.5px; color: var(--faint); text-align: center; }
.cp-foot {
  border-top: 1px solid var(--border);
  padding: 8px 12px;
  font-size: 11.5px;
  color: var(--muted);
  background: var(--card);
}
.cp-foot b { color: var(--fg); font-weight: 600; }
/* Adding a company was four controls crammed into one row, with nothing saying
   what the URL was for or how the two buttons differed. Stacked and labelled:
   the panel says what it does, the hint says when the optional field matters.
   And it FOLDS — it is the rarest act in the picker, so it costs one line until
   it is wanted instead of five controls on every open. */
.cp-add {
  border-top: 1px solid var(--border);
  padding: 10px 12px 12px;
  background: var(--card);
}
.cp-add-hd {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1px;
}
.cp-add > summary.cp-add-hd {
  cursor: pointer;
  user-select: none;
  list-style: none;              /* the caret below is the marker */
  display: flex;
  align-items: center;
  gap: 7px;
}
.cp-add > summary.cp-add-hd::-webkit-details-marker { display: none; }
.cp-add > summary.cp-add-hd::before {
  content: "▸";
  font-size: 9px;
  color: var(--faint);
  transition: transform 0.12s ease;
}
.cp-add[open] > summary.cp-add-hd::before { transform: rotate(90deg); }
.cp-add > summary.cp-add-hd:hover { color: var(--fg); }
.cp-add-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.cp-add .cp-search { width: 100%; min-width: 0; }
.cp-add-hint {
  margin: 1px 0 3px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--faint);
}
.cp-add-row { display: flex; gap: 6px; }
.cp-add-btn {
  flex: none;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 10px;
}
.cp-add-row .cp-add-btn { flex: 1; text-align: center; }
.cp-add-btn:hover { text-decoration: none; border-color: var(--scan); }
/* The scanning button is the one people mean; the plain add is the quieter path. */
.cp-add-go {
  border-color: color-mix(in srgb, var(--scan) 45%, transparent);
  background: color-mix(in srgb, var(--scan) 12%, transparent);
  color: var(--scan);
}
.cp-add-go:hover { background: color-mix(in srgb, var(--scan) 22%, transparent); }

/* vitals cluster */
.deck-right { display: flex; align-items: center; gap: 16px; }
.deck-vitals {
  display: flex;
  gap: clamp(12px, 1.6vw, 22px);
  align-items: stretch;
}
.vital {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 60px;
  padding: 2px 0 2px 12px;
  border-left: 1px solid var(--border);
}
.vital-n { font-size: 17px; font-weight: 600; line-height: 1.3; }
.vital-l {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--faint);
  white-space: nowrap;
}
.vital.hot .vital-n { color: var(--run); }
.vital.hot .vital-l { color: color-mix(in srgb, var(--run) 70%, var(--faint)); }
.segmeter { display: flex; gap: 3px; margin-top: 4px; }
.segmeter i {
  width: 11px;
  height: 4px;
  border-radius: 2px;
  background: var(--card-2);
  border: 1px solid var(--border-2);
}
.segmeter i.on { background: var(--scan); border-color: var(--scan); }

.iconbtn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--muted);
  transition: border-color 0.14s, color 0.14s, background 0.14s;
}
.iconbtn:hover { border-color: var(--border-2); color: var(--fg); background: var(--card); }

/* settings menu */
.menu-wrap { position: relative; }
.menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 250px;
  background: var(--panel-solid);
  border: 1px solid var(--border-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  padding: 8px;
  z-index: 60;
}
.menu-t {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--faint);
  padding: 6px 10px 8px;
}
.menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border: none;
  border-radius: var(--r-sm);
  background: transparent;
  font: inherit;
  font-size: 13.5px;
  color: var(--fg);
  transition: background 0.12s;
}
.menu-item:hover { background: var(--card-2); }
.menu-state {
  font-size: 11px;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 9px;
}
.menu-state.on { color: var(--scan); border-color: color-mix(in srgb, var(--scan) 45%, transparent); }
.menu-state.warn { color: var(--run); border-color: color-mix(in srgb, var(--run) 45%, transparent); }
.menu-field { display: flex; flex-direction: column; gap: 6px; padding: 2px 10px 8px; }
.menu-field-row { display: flex; align-items: center; gap: 6px; }
.menu-field-note { flex: 1; font-size: 11px; color: var(--muted); }
#m-workday-pw-show .eye-slash { display: none; }
#m-workday-pw-show.shown .eye-slash { display: inline; }
.menu-field input {
  flex: 1;
  min-width: 0;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--card-2);
  color: var(--fg);
  font: inherit;
  font-size: 12.5px;
}
.menu-div { height: 1px; background: var(--border); margin: 6px 4px; }
.menu-item.danger { color: var(--bad); }
.menu-item.danger:hover { background: color-mix(in srgb, var(--bad) 12%, transparent); }

/* one-line explanation of the two-step flow */
.deck-help {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--muted);
}
.deck-help b { color: var(--fg); font-weight: 600; }

/* status breakdown strip */
.deck-breakdown {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 6px 0 10px;
  font-size: 11px;
  color: var(--muted);
}
.bd { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.bd i {
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--faint);
  display: inline-block;
}
.bd.s-ok i { background: var(--scan); }
.bd.s-warn i, .bd.s-live i { background: var(--run); }
.bd.s-bad i { background: var(--bad); }
.bd.s-found i { background: var(--info); }
.bd.s-work i { background: color-mix(in srgb, var(--scan) 55%, var(--faint)); }
.bd.dim { color: var(--faint); }

/* The scan strip: ONE chip for the company being read at this moment, a
   determinate bar for how far through the batch the run is, and a count of
   what is left — readable from every tab because it lives in the sticky deck.
   Wraps rather than widens, so it can never push the page sideways. */
.deck-scan {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 0 10px;
}
.sn-label {
  font: var(--t-label);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-subtle);
}
.sn-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--h-badge);
  border-radius: var(--r-badge);
  padding: 0 9px;
  border: 1px solid color-mix(in srgb, var(--scan) 40%, transparent);
  background: color-mix(in srgb, var(--scan) 10%, transparent);
  color: var(--scan);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.sn-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--scan);
  animation: pausepulse 1.6s ease-in-out infinite;
}
.sn-t {
  font-size: 10.5px;
  font-weight: 500;
  color: color-mix(in srgb, var(--scan) 65%, var(--fg));
}
/* How far through the batch: a real bar, because a four hour sweep needs a
   sense of motion that a fraction alone cannot give. It flexes into the row's
   spare width; the fill's width is poked in place between rebuilds so it
   animates without the strip redrawing. */
.sn-track {
  flex: 1 1 160px;
  min-width: 120px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--scan) 18%, var(--border));
  overflow: hidden;
}
.sn-fill {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--scan);
  transition: width 0.6s ease;
}
/* "12 done, 35 to go" beside the bar. On a sweep that runs for hours the
   useful question is not whether something is running but how much is left. */
.sn-prog {
  font: var(--t-label);
  font-size: 11px;
  color: var(--text-subtle);
  white-space: nowrap;
}
/* The finished receipt: a completed sweep is a good outcome, so the label
   keeps the accent while the chip goes quiet — a receipt, not an alert. */
.sn-label.sn-done { color: var(--scan); }
.sn-chip.sn-chip-done {
  border-color: var(--border-2);
  background: var(--card-2);
  color: var(--text-default);
}
.sn-ok { color: var(--scan); font-weight: 700; }

/* slim indeterminate bar while a run is active */
.runbar { height: 2px; margin: 0 calc(-1 * clamp(16px, 3vw, 32px)); overflow: hidden; }
.runbar[data-active="true"] {
  background-image: linear-gradient(90deg, transparent, var(--scan), transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  animation: sweep 1.4s ease-in-out infinite;
}
@keyframes sweep {
  from { background-position: -60% 0; }
  to { background-position: 160% 0; }
}

/* ─── Board layout ───────────────────────────────────────────────────────── */
.board {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 27vw, 380px);
  gap: 16px;
  align-items: start;
  padding: 16px clamp(16px, 3vw, 32px);
}
.board.logs-open { grid-template-columns: minmax(0, 1fr); }
.board.logs-open .feedpanel { display: none; }
.work, .feedpanel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  overflow: hidden;
}

/* workbar: tabs + company filter + search */
.workbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.tabs { display: flex; gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  white-space: nowrap;
  padding: 7px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.13s, background 0.13s, border-color 0.13s;
}
.tab:hover { color: var(--fg); }
.tab.active {
  color: var(--fg);
  font-weight: 600;
  background: var(--card-2);
  border-color: var(--border);
}
.tab-n {
  font-size: 11px;
  min-width: 20px;
  text-align: center;
  border-radius: 999px;
  padding: 0 6px;
  background: var(--card);
  border: 1px solid var(--border);
  color: var(--muted);
}
.tab-n.amber {
  background: color-mix(in srgb, var(--run) 16%, transparent);
  border-color: color-mix(in srgb, var(--run) 45%, transparent);
  color: var(--run);
}
.tab-n.red {
  background: color-mix(in srgb, var(--bad) 14%, transparent);
  border-color: color-mix(in srgb, var(--bad) 45%, transparent);
  color: var(--bad);
}
.tab-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--faint);
  opacity: 0.5;
}
.tab-dot[data-state="live"] { background: var(--scan); opacity: 1; }
.tab-dot[data-state="demo"] { background: var(--info); opacity: 0.9; }
.tab-dot[data-state="connecting"] { background: var(--run); opacity: 0.9; }
.workbar-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cofilter {
  font: inherit;
  font-size: 12.5px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--muted);
  padding: 7px 10px;
  max-width: 170px;
  outline: none;
  transition: border-color 0.14s, color 0.14s;
}
.cofilter:hover { border-color: var(--border-2); }
.cofilter:focus { border-color: var(--scan); }
.cofilter.on {
  color: var(--fg);
  border-color: color-mix(in srgb, var(--scan) 55%, var(--border-2));
}
.search {
  font: inherit;
  font-size: 12.5px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: var(--fg);
  padding: 7px 12px;
  width: min(210px, 36vw);
  outline: none;
  transition: border-color 0.14s;
}
.search:focus { border-color: var(--scan); }
.search::placeholder { color: var(--faint); }

.pane { padding: 14px 16px 18px; min-height: 320px; }

/* filter chips */
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.chip {
  font-size: 12px;
  font-weight: 500;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  transition: color 0.13s ease, border-color 0.13s ease, background 0.13s ease;
}
.chip:hover { color: var(--fg); border-color: var(--border-2); }
.chip[aria-selected="true"] {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
  font-weight: 600;
}
.chip .n { opacity: 0.65; margin-left: 5px; font-variant-numeric: tabular-nums; }

/* ─── Pipeline cards (shared by the ranked stack) ────────────────────────── */
.kl-empty { color: var(--faint); text-align: center; font-size: 12px; padding: 12px 0 8px; }
.kcard {
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 9px 11px;
  cursor: pointer;
  transition: border-color 0.13s, transform 0.13s, box-shadow 0.13s;
}
.kcard:hover {
  border-color: var(--border-2);
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}
.kc-co { font-size: 13px; font-weight: 600; }
.kc-role {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.4;
  margin-top: 1px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.kc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 9px;
  flex-wrap: wrap;
}
/* ─── Applications table ─────────────────────────────────────────────────── */
.tablewrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--card);
}
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; min-width: 680px; }
/* Reserve space for the application date instead of pushing it offscreen when
   a long role title and its profile badge compete with the activity sidebar. */
table.applications-table { table-layout: fixed; min-width: 780px; }
.applications-table .col-status { width: 144px; }
.applications-table .col-company { width: 90px; }
.applications-table .col-match { width: 74px; }
.applications-table .col-links { width: 110px; }
.applications-table .col-applied { width: 120px; }
.applications-table .col-updated { width: 86px; }
table.data th {
  text-align: left;
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
table.data td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr { cursor: pointer; transition: background 0.12s; }
table.data tbody tr:hover { background: var(--card-2); }
.t-co { font-weight: 600; white-space: nowrap; }
.applications-table .t-co { overflow: hidden; text-overflow: ellipsis; }
.applications-table td, .applications-table th { padding-left: 10px; padding-right: 10px; }
.applications-table .t-applied { color: var(--muted); }
.applications-table .rowlk { padding-left: 4px; padding-right: 4px; }
.applications-table .t-links { gap: 3px; }
.t-role {
  color: var(--muted);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.t-when {
  color: var(--faint);
  font-family: var(--mono);
  font-size: 11.5px;
  white-space: nowrap;
}
.t-links { display: flex; gap: 5px; align-items: center; }
.rowlk {
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  border: 1px solid var(--border);
  background: transparent;
  border-radius: var(--r-sm);
  padding: 2px 8px;
  transition: color 0.13s ease, border-color 0.13s ease, background 0.13s ease;
}
a.rowlk, button.rowlk { display: inline-block; }
.rowlk:hover { color: var(--fg); border-color: var(--border-2); }
.rowlk.off { opacity: 0.28; pointer-events: none; }

/* status pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
  border: 1px solid var(--border);
  color: var(--muted);
  background: transparent;
}
.pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.pill.s-ok {
  color: var(--scan);
  border-color: color-mix(in srgb, var(--scan) 40%, transparent);
  background: color-mix(in srgb, var(--scan) 9%, transparent);
}
.pill.s-warn {
  color: var(--run);
  border-color: color-mix(in srgb, var(--run) 45%, transparent);
  background: color-mix(in srgb, var(--run) 10%, transparent);
}
.pill.s-live {
  color: var(--run);
  border-color: color-mix(in srgb, var(--run) 45%, transparent);
  background: color-mix(in srgb, var(--run) 10%, transparent);
}
.pill.s-live::before { animation: wippulse 1.1s ease-in-out infinite; }
@keyframes wippulse { 50% { opacity: 0.25; transform: scale(0.6); } }
.pill.s-bad {
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 42%, transparent);
  background: color-mix(in srgb, var(--bad) 9%, transparent);
}
.pill.s-found {
  color: var(--info);
  border-color: color-mix(in srgb, var(--info) 40%, transparent);
}
.pill.s-found::before { background: transparent; border: 1px dashed currentColor; }
.pill.s-tailoring {
  color: var(--run);
  border-color: color-mix(in srgb, var(--run) 45%, transparent);
  background: color-mix(in srgb, var(--run) 12%, transparent);
}
.pill.s-tailoring::before {
  background: var(--run);
  animation: wippulse 1.1s ease-in-out infinite;
}
.pill.s-work { color: color-mix(in srgb, var(--scan) 70%, var(--muted)); }
.pill.s-dim { color: var(--faint); }
.pill.s-dim::before { background: var(--faint); }

/* match score */
.score {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
}
.score-bar {
  width: 44px;
  height: 4px;
  border-radius: 2px;
  border: 1px solid var(--border-2);
  overflow: hidden;
  background: var(--bg);
}
.score-bar > span { display: block; height: 100%; }

/* ─── Needs-you cards ────────────────────────────────────────────────────── */
.pane-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 13px;
}
.gatecard {
  border: 1px solid color-mix(in srgb, var(--run) 28%, var(--border));
  border-left: 3px solid var(--run);
  border-radius: var(--r-md);
  background: var(--card);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.gatecard header,
.stuckcard header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.gc-co { font-weight: 600; font-size: 14.5px; }
.gc-role { color: var(--muted); font-size: 13px; margin-left: 8px; }
.gc-side { display: flex; align-items: center; gap: 8px; }
.gatepill {
  font-size: 11px;
  font-weight: 500;
  color: var(--run);
  border: 1px solid color-mix(in srgb, var(--run) 40%, transparent);
  background: color-mix(in srgb, var(--run) 9%, transparent);
  border-radius: 999px;
  padding: 2px 10px;
  white-space: nowrap;
}
.gc-q {
  margin: 10px 0 12px;
  font-size: 13.5px;
  color: var(--fg);
  line-height: 1.55;
}
.gc-answer { display: flex; flex-direction: column; gap: 10px; }
.gate-input {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--fg);
  resize: vertical;
}
.gate-input:focus { outline: none; border-color: var(--run); }
.gc-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.gc-jd { font-size: 12px; color: var(--faint); margin-left: auto; }
.gc-jd:hover { color: var(--fg); }

/* ─── Unable-to-do-it cards — full failure visibility ────────────────────── */
.stuckcard {
  display: flex;
  border: 1px solid color-mix(in srgb, var(--bad) 24%, var(--border));
  border-left: 3px solid var(--bad);
  border-radius: var(--r-md);
  background: var(--card);
  margin-bottom: 12px;
  overflow: hidden;
}
.stuck-main {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stuck-reason { font-size: 13.5px; line-height: 1.5; color: var(--fg); }
.mini-timeline {
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-left: 2px solid var(--border-2);
  padding-left: 10px;
  margin: 2px 0;
}
.mini-tl {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
}
.mini-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--faint);
  flex-shrink: 0;
  position: relative;
  top: -2px;
}
.mini-tl:last-child .mini-lbl { color: var(--fg); }
.mini-tl:last-child .mini-dot { background: var(--bad); }
.mini-when { margin-left: auto; font-size: 10.5px; color: var(--faint); white-space: nowrap; }
.stuck-meta { font-size: 10.5px; color: var(--faint); }
.stuck-meta a { color: var(--muted); text-decoration: underline; }
.stuck-meta a:hover { color: var(--fg); }
.stuck-shot { flex: 0 0 220px; border-left: 1px solid var(--border); display: block; }
.stuck-shot img {
  width: 100%;
  height: 100%;
  max-height: 210px;
  object-fit: cover;
  object-position: top;
  display: block;
}
.stuck-shot.none {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
  font-size: 11.5px;
}
@media (max-width: 700px) {
  .stuckcard { flex-direction: column; }
  .stuck-shot { flex-basis: auto; border-left: none; border-top: 1px solid var(--border); }
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */
.btn {
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: var(--r-md);
  border: 1px solid var(--border-2);
  background: transparent;
  color: var(--fg);
  transition: color 0.13s ease, border-color 0.13s ease, background 0.13s ease;
  white-space: nowrap;
}
.btn:hover { border-color: var(--fg); }
.btn-primary {
  background: var(--scan);
  color: var(--scan-ink);
  border-color: color-mix(in srgb, var(--scan-ink) 12%, var(--scan));
}
.btn-primary:hover { filter: brightness(1.06); }
.btn-amber {
  background: color-mix(in srgb, var(--run) 12%, transparent);
  color: var(--run);
  border-color: color-mix(in srgb, var(--run) 50%, transparent);
  font-weight: 600;
}
.btn-amber:hover { background: color-mix(in srgb, var(--run) 22%, transparent); }
.btn-ghost { border-color: var(--border); color: var(--muted); }
.btn-ghost:hover { color: var(--fg); border-color: var(--border-2); }
.btn-danger {
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 45%, transparent);
}
.btn-danger:hover { background: color-mix(in srgb, var(--bad) 12%, transparent); border-color: var(--bad); }

/* ─── Live activity: shared row rendering (side rail + Logs tab) ─────────── */
.feedpanel {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 128px;
  max-height: calc(100vh - 162px);
}
.feed-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.feed-title { font-size: 12.5px; font-weight: 600; }
.feed-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--faint);
  flex-shrink: 0;
}
.feed-dot[data-state="live"] {
  background: var(--scan);
  box-shadow: 0 0 8px color-mix(in srgb, var(--scan) 70%, transparent);
  animation: livepulse 1.8s ease-in-out infinite;
}
.feed-dot[data-state="demo"] { background: var(--info); }
.feed-dot[data-state="connecting"] { background: var(--run); animation: pausepulse 1s infinite; }
@keyframes livepulse { 50% { box-shadow: 0 0 2px transparent; } }
.feed-hint { margin-left: auto; font-size: 10.5px; color: var(--faint); letter-spacing: 0.06em; }
.feed { overflow-y: auto; padding: 6px 0 14px; scrollbar-width: thin; }
.feed-empty { padding: 40px 20px; text-align: center; color: var(--faint); font-size: 11.5px; line-height: 1.7; }

.fe {
  padding: 7px 14px 6px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  animation: feedin 0.25s ease;
}
@keyframes feedin { from { opacity: 0; transform: translateY(-3px); } }
.fe:hover { background: color-mix(in srgb, var(--card) 60%, transparent); }
.fe-h {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 10.5px;
  color: var(--faint);
  flex-wrap: wrap;
}
.fe-t { font-variant-numeric: tabular-nums; }
.fe-stg { color: var(--muted); font-weight: 600; }
.fe-mark {
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 600;
}
.fe-co {
  margin-left: auto;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0 8px;
  font-size: 10px;
  cursor: pointer;
}
.fe-co:hover { color: var(--fg); border-color: var(--border-2); }
.fe-b {
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.fe-b.md { white-space: normal; }
.fe-b.clipped { max-height: 6.4em; overflow: hidden; position: relative; }
.fe-b.clipped:not(.open)::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2em;
  background: linear-gradient(transparent, var(--panel-solid));
  pointer-events: none;
}
.fe-b.clipped.open { max-height: none; }
.fe-more {
  margin-top: 4px;
  font-size: 10px;
  color: var(--faint);
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 8px;
}
.fe-more:hover { color: var(--fg); border-color: var(--border-2); }
.fe-shot {
  display: inline-block;
  margin-top: 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  overflow: hidden;
  line-height: 0;
}
.fe-shot img { max-width: 100%; max-height: 180px; width: auto; height: auto; display: block; }

/* kind accents */
.fe.k-gate .fe-mark, .fe.k-gate .fe-b { color: var(--run); }
.fe.k-gate { border-left: 2px solid var(--run); }
.fe.k-ok .fe-mark, .fe.k-ok .fe-b { color: var(--scan); }
.fe.k-ok { border-left: 2px solid var(--scan); }
.fe.k-bad .fe-mark, .fe.k-bad .fe-b { color: var(--bad); }
.fe.k-bad { border-left: 2px solid var(--bad); }
.fe.k-found .fe-mark { color: var(--info); }
.fe.k-start .fe-mark { color: var(--scan); }
.fe.k-model .fe-b { color: var(--muted); }
.fe-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
  border-bottom: none;
}
.fe-step::before { content: "▸"; color: var(--scan); }
.fe-step .fe-co { margin-left: auto; }

/* ─── Logs tab: the roomy, filterable stream ─────────────────────────────── */
.log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.log-head .chips { margin-bottom: 0; }
.log-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--faint);
}
.log-sep { opacity: 0.5; }
.logview {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--card);
  overflow: hidden;
}
.logview .fe { padding: 8px 16px 7px; }
.logview .fe-h { font-size: 11px; }
.logview .fe-b { font-size: 12px; }
.logview .fe-shot img { max-height: 260px; }
.logview:empty { display: none; }

/* ─── Empty states ───────────────────────────────────────────────────────── */
.empty {
  padding: 52px 24px;
  text-align: center;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.7;
}
.empty-big {
  font-size: 15.5px;
  font-weight: 600;
  color: var(--fg);
  margin-bottom: 6px;
}
.empty b { color: var(--fg); font-weight: 600; }
.empty-act { margin-top: 14px; }

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.foot {
  padding: 12px clamp(16px, 3vw, 32px);
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--faint);
  display: flex;
  align-items: center;
  gap: 10px;
}
.foot-sep { opacity: 0.5; }
.foot-env {
  margin-left: auto;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 2px 10px;
}

/* ─── Detail drawer ──────────────────────────────────────────────────────── */
.scrim {
  position: fixed;
  inset: 0;
  background: rgba(4, 8, 6, 0.5);
  z-index: 40;
  opacity: 0;
  transition: opacity 0.2s;
}
.scrim.show { opacity: 1; }
.drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(560px, 94vw);
  background: var(--bg);
  border-left: 1px solid var(--border-2);
  z-index: 41;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-2);
}
.drawer.show { transform: translateX(0); }
.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--border);
}
.drawer-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.drawer-sub { color: var(--muted); font-size: 13px; margin-top: 2px; }
.drawer-body { overflow-y: auto; padding: 20px 22px 40px; }
.drawer-close {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  font-size: 15px;
  flex-shrink: 0;
}
.drawer-close:hover { color: var(--fg); border-color: var(--border-2); }

.section { margin-bottom: 24px; }
.section-t {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--faint);
  margin-bottom: 11px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-t::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.meta-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 18px;
  font-size: 13.5px;
  margin: 0;
}
.meta-grid dt { color: var(--faint); font-size: 12px; }
.meta-grid dd { margin: 0; color: var(--fg); word-break: break-word; }

.drawer-shot {
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  line-height: 0;
  transition: border-color 0.14s;
}
.drawer-shot:hover { border-color: var(--border-2); }
.drawer-shot img { width: 100%; max-height: 300px; object-fit: cover; object-position: top; display: block; }

.fields {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.field {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 10px 13px;
  background: var(--card);
  align-items: center;
}
.field + .field { border-top: 1px solid var(--border); }
.field-q { font-size: 13px; }
.field-q .conf {
  font-size: 9.5px;
  font-weight: 500;
  margin-left: 7px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--faint);
  vertical-align: middle;
}
.field-q .conf.low { border-color: color-mix(in srgb, var(--run) 45%, transparent); color: var(--run); }
.field-v {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  text-align: right;
  max-width: 220px;
  word-break: break-word;
}
.check {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--scan);
  color: var(--scan);
  border-radius: 4px;
  font-size: 11px;
  line-height: 1;
}
.check.off { border-color: var(--border-2); color: transparent; }

.timeline { display: flex; flex-direction: column; }
.tl {
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 12px;
  padding-bottom: 16px;
  position: relative;
}
.tl::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 14px;
  bottom: -2px;
  width: 1px;
  background: var(--border-2);
}
.tl:last-child::before { display: none; }
.tl-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 1px solid var(--scan);
  background: var(--bg);
  margin-top: 2px;
  z-index: 1;
}
.tl-dot.done { background: var(--scan); }
.tl-label { font-size: 13px; font-weight: 500; }
.tl-time { font-family: var(--mono); font-size: 11px; color: var(--faint); }

.drawer-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.lk {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: var(--r-sm);
  transition: all 0.14s;
}
.lk:hover { color: var(--fg); border-color: var(--border-2); }
.lk.off { opacity: 0.32; pointer-events: none; }

.gate-box {
  border: 1px solid color-mix(in srgb, var(--run) 45%, transparent);
  border-left: 3px solid var(--run);
  border-radius: var(--r-md);
  padding: 14px 16px;
  background: color-mix(in srgb, var(--run) 6%, var(--card));
}
.gate-q { font-size: 13.5px; color: var(--fg); margin: 8px 0 12px; line-height: 1.55; }
.closed-box {
  border: 1px solid var(--border);
  border-left: 3px solid var(--bad);
  border-radius: var(--r-md);
  padding: 12px 15px;
  background: var(--card);
}
.closed-why { font-size: 13.5px; color: var(--fg); line-height: 1.5; }

.diff-body { display: flex; flex-direction: column; gap: 12px; }
.diff-item {
  border-left: 2px solid var(--border-2);
  padding-left: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
}
.diff-line { overflow-wrap: anywhere; padding: 1px 6px; border-radius: 3px; }
.diff-line.del { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.diff-line.add { color: var(--scan); background: color-mix(in srgb, var(--scan) 10%, transparent); }
.muted { color: var(--faint); font-size: 13px; }

/* rendered markdown (gate questions / model messages) */
.md ul, .md ol { margin: 6px 0; padding-left: 20px; }
.md li { margin: 2px 0; }
.md strong { font-weight: 700; color: var(--fg); }
.md em { font-style: italic; }
.md code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--card-2);
  padding: 1px 5px;
  border-radius: 3px;
}
.md a { color: var(--muted); text-decoration: underline; }
.md a:hover { color: var(--fg); }

/* ─── Résumé viewer modal ────────────────────────────────────────────────── */
.rmodal {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(4, 8, 6, 0.66);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 16px;
  opacity: 0;
  transition: opacity 0.2s;
}
.rmodal.show { opacity: 1; }
.rmodal-bar {
  width: min(820px, 96vw);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
}
.rmodal-title { color: #fff; font-size: 12.5px; letter-spacing: 0.04em; }
.rmodal-actions { display: flex; gap: 8px; align-items: center; }
.rmodal-actions .btn { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.rmodal-actions .drawer-close { color: #fff; border-color: rgba(255, 255, 255, 0.3); }
.rmodal-body {
  width: min(820px, 96vw);
  flex: 1;
  min-height: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-2);
}
.rmodal-body iframe { width: 100%; height: 100%; border: 0; display: block; }

/* demo résumé sheet (print-like, always light) */
.resume {
  height: 100%;
  overflow-y: auto;
  color: #101312;
  font-family: var(--sans);
  padding: 52px clamp(28px, 6%, 64px);
  line-height: 1.55;
}
.resume h1 { font-size: 27px; letter-spacing: -0.02em; margin: 0; font-weight: 700; }
.resume .r-contact { font-family: var(--mono); font-size: 12px; color: #68706b; margin: 6px 0 22px; }
.resume h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #68706b;
  border-bottom: 1px solid #e0e5e1;
  padding-bottom: 6px;
  margin: 24px 0 12px;
  font-weight: 700;
}
.resume .r-job { display: flex; justify-content: space-between; gap: 12px; font-weight: 600; font-size: 14px; }
.resume .r-job .when { font-family: var(--mono); font-size: 12px; color: #9aa29c; font-weight: 400; white-space: nowrap; }
.resume ul { margin: 7px 0 16px; padding-left: 18px; }
.resume li { font-size: 13.5px; color: #333a36; margin-bottom: 4px; }
.resume .r-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  color: #101312;
  border: 1px solid #d5dbd6;
  border-radius: 999px;
  padding: 2px 9px;
  margin: 0 5px 5px 0;
}
.resume .r-lead { font-size: 14px; color: #333a36; margin-bottom: 4px; }

/* ─── Toast ──────────────────────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  z-index: 80;
  font-size: 12.5px;
  background: var(--panel-solid);
  border: 1px solid var(--border-2);
  color: var(--fg);
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow-2);
  opacity: 0;
  transition: all 0.22s;
  max-width: min(560px, 90vw);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ─── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .board { grid-template-columns: 1fr; }
  .feedpanel { position: static; max-height: 420px; }
}
@media (max-width: 860px) {
  .deck-row { gap: 10px; }
  .deck-actions { order: 3; flex-basis: 100%; justify-content: flex-start; }
  .act-discover { flex: 1; justify-content: center; }
  .act-process { flex: 1; justify-content: center; }
  .deck-right { margin-left: auto; }
  .deck-vitals .vital { min-width: 0; }
}
@media (max-width: 560px) {
  .deck-breakdown { display: none; }
  .deck-help { font-size: 12px; }
  .act-arrow { display: none; }
  .t-role { max-width: 160px; }
  .workbar-right { width: 100%; }
  .search { flex: 1; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.001ms !important; animation-duration: 0.001ms !important; }
  .runbar[data-active="true"] { animation: none; }
  .sn-dot { animation: none; }
  .sn-fill { transition: none; }
}

/* Flagged-lane retry: one click re-runs the application with human-style clicks. */
.kc-retry {
  margin-left: auto;
  border: 1px solid color-mix(in srgb, var(--info) 45%, transparent);
  background: color-mix(in srgb, var(--info) 10%, transparent);
  color: var(--info);
  border-radius: var(--r-sm);
  font-size: 11.5px;
  font-weight: 600;
  padding: 5px 11px;
  min-height: 27px;
  display: inline-flex;
  align-items: center;
}
.kc-retry:hover { background: color-mix(in srgb, var(--info) 20%, transparent); }

/* Top-level LLM failure banner — quota/auth/outage must never be silent. */
.llm-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px clamp(16px, 3vw, 32px);
  background: color-mix(in srgb, var(--bad) 14%, var(--bg));
  border-bottom: 1px solid color-mix(in srgb, var(--bad) 45%, transparent);
  color: var(--bad);
  font-size: 13px;
  font-weight: 600;
}
.lb-ico { font-size: 15px; }
.lb-msg { flex: 1; min-width: 0; }
.lb-x {
  border: 1px solid color-mix(in srgb, var(--bad) 45%, transparent);
  background: none;
  color: var(--bad);
  border-radius: var(--r-sm);
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
}
.lb-x:hover { background: color-mix(in srgb, var(--bad) 18%, transparent); }
.kc-apply {
  border-color: color-mix(in srgb, var(--scan) 45%, transparent);
  background: color-mix(in srgb, var(--scan) 10%, transparent);
  color: var(--scan);
}
.kc-apply:hover { background: color-mix(in srgb, var(--scan) 20%, transparent); }

/* One-company end-to-end run, offered when exactly one company is picked. */
.cp-runone {
  display: inline-block;
  margin-top: 4px;
  color: var(--scan);
  border: 1px solid color-mix(in srgb, var(--scan) 40%, transparent);
  border-radius: var(--r-sm);
  padding: 3px 9px;
}
.cp-runone:hover { text-decoration: none; background: color-mix(in srgb, var(--scan) 12%, transparent); }

/* Single-role tailor panel + per-company title filter input */



/* Single-company title filter — shown in the Discover picker when exactly one
   company is picked, right above its run button. Clear label, full-width input. */
.cp-one {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cp-one-fl { display: flex; flex-direction: column; gap: 4px; }
.cp-one-fl label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.01em;
}
.cp-one-fl .cp-search { width: 100%; }
.cp-runone {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--scan) 45%, transparent);
  background: color-mix(in srgb, var(--scan) 12%, transparent);
  color: var(--scan);
  border-radius: var(--r-md);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 12px;
}
.cp-runone:hover { background: color-mix(in srgb, var(--scan) 22%, transparent); }


/* Top-level "Tailor a role" toolbar control (mirrors Skip companies). */
.rolemgr { position: relative; display: inline-flex; }
.rolebtn { color: var(--scan); border-color: color-mix(in srgb, var(--scan) 35%, var(--border)); }
.rolebtn:hover { color: var(--scan); border-color: color-mix(in srgb, var(--scan) 55%, transparent);
  background: color-mix(in srgb, var(--scan) 8%, var(--card)); }
/* Tailor panel: two ways in, so the tabs have to be unmistakable rather than
   decorative — picking the wrong one means pasting a URL into a box that wants
   a paragraph. */
.rp-tabs { display: flex; gap: 2px; padding: 8px 12px 0; }
.rp-tab {
  border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600;
  color: var(--faint); padding: 5px 10px; border-radius: var(--r-sm);
}
.rp-tab:hover { color: var(--fg); background: var(--card-2); }
.rp-tab.on { color: var(--scan); background: color-mix(in srgb, var(--scan) 12%, transparent); }
.rp-textwrap { display: flex; flex-direction: column; gap: 7px; }
.rp-text {
  font-family: var(--mono); font-size: 12px; line-height: 1.55;
  resize: vertical; min-height: 120px;
}
.rp-row { display: flex; gap: 7px; }
.rp-row .cp-search { flex: 1; min-width: 0; }

.rolepicker { left: 0; right: auto; width: min(340px, calc(100vw - 32px)); }
.cp-role-h {
  padding: 11px 12px 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--fg);
}
.cp-role-foot {
  border-top: 1px solid var(--border);
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  color: var(--muted);
  background: var(--card);
}
.cp-role-foot span { flex: 1; }
.cp-role-foot b { color: var(--fg); font-weight: 600; }
.cp-role-foot .cp-add-btn {
  flex: none;
  border: 1px solid color-mix(in srgb, var(--scan) 45%, transparent);
  background: color-mix(in srgb, var(--scan) 12%, transparent);
  color: var(--scan);
  border-radius: var(--r-sm);
  padding: 5px 11px;
}
.cp-role-foot .cp-add-btn:hover { background: color-mix(in srgb, var(--scan) 22%, transparent); }

/* Run-now (found card) + Run-all (Found lane header) */
.kc-run {
  border-color: color-mix(in srgb, var(--scan) 45%, transparent);
  background: color-mix(in srgb, var(--scan) 10%, transparent);
  color: var(--scan);
}
.kc-run:hover { background: color-mix(in srgb, var(--scan) 20%, transparent); }
/* Queue sits next to Apply as the quieter of the two: same action, in line
   rather than right now, so it must not compete with the primary button. */
.kc-queue {
  border-color: var(--border);
  background: transparent;
  color: var(--muted);
}
.kc-queue:hover { border-color: var(--scan); color: var(--fg); }

/* Live "what it's doing now" line on actively-working cards. */
.kc-live {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 2px;
  font-size: 11px;
  color: var(--run);
  font-family: var(--mono);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kc-live-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--run);
  animation: wippulse 1.1s ease-in-out infinite;
}

/* ─── Job preferences ──────────────────────────────────────────────────────
   What counts as a match, editable in place. Same popover language as the
   role/skip pickers — wider, because these are sentences, not checkboxes. */
.prefmgr { position: relative; }
.prefpicker { left: 0; right: auto; width: min(400px, calc(100vw - 32px)); }
.pf-body {
  padding: 6px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 11px;
  /* Shrinks when the popover is capped to the window (min-height:0 is what
     lets a flex item scroll rather than push its footer off-screen). */
  flex: 1 1 auto;
  min-height: 0;
  max-height: min(62vh, 520px);
  overflow-y: auto;
}
.pf-f { display: flex; flex-direction: column; gap: 5px; }
.pf-l {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.pf-hint { font-weight: 400; font-style: normal; color: var(--faint); }
.pf-row { display: flex; gap: 10px; }
.pf-row .pf-f { flex: 1; }
.pf-narrow { flex: 0 0 88px !important; }
.pf-notes {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.55;
  resize: vertical;
  min-height: 76px;
}
.pf-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
}
.pf-check input { accent-color: var(--scan); }
#pf-state.saved { color: var(--scan); }
#pf-state.failed { color: var(--bad); }

/* ─── Agent log (drawer) ───────────────────────────────────────────────────
   The full transcript for one job: every step, tool call and result. Mono,
   dense, scrollable — it's a log, and it should look like one. */
.agentlog {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.agentlog-re { float: right; font-size: 11px; }
.al-e { border-left: 2px solid var(--border-2); padding-left: 9px; }
.al-h { display: flex; align-items: baseline; gap: 7px; font-size: 11px; }
.al-k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.al-k[data-kind="applied"], .al-k[data-kind="discovered"] { color: var(--scan); }
.al-k[data-kind="gate"], .al-k[data-kind="running"] { color: var(--run); }
.al-k[data-kind="error"], .al-k[data-kind="failed"] { color: var(--bad); }
.al-a { font-size: 10.5px; color: var(--info); }
.al-t { margin-left: auto; font-size: 10.5px; color: var(--faint); }
.al-b {
  margin: 4px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 150px;
  overflow-y: auto;
}
.drawer-jd { color: var(--scan); text-decoration: none; }
.drawer-jd:hover { text-decoration: underline; }

/* Job location on a pipeline card. The ranking in preferences is Washington
   first, so a top-tier location is marked; everything else stays quiet. */
.kc-loc {
  margin-top: 3px;
  font-size: 11px;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kc-loc.top { color: var(--scan); font-weight: 600; }
.kc-loc.remote { color: var(--info); }
.drawer-loc { color: var(--muted); }

/* ─── Tailored lane: location buckets ──────────────────────────────────────
   The location preference is a ranking (Washington, then California, then
   remote), so the lane is grouped and ordered the same way. Colour says which
   tier at a glance; the top tier opens by default and the rest fold away, since
   a lane of thirty cards is not something anyone reads. */
/* Wraps rather than scrolls: a filter the owner cannot see is not a filter, and
   a lane is too narrow to hold four tiers on one line. */
.locbar {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 8px 10px 0;
}
.lp {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; flex: none; white-space: nowrap;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--card); color: var(--muted);
  font-family: var(--sans); font-size: 10.5px; line-height: 1.6;
  cursor: pointer; transition: border-color .12s, color .12s, background .12s;
}
.lp:hover { border-color: var(--border-2); color: var(--fg); }
.lp-n { font-size: 10px; color: var(--faint); }
.lp.on { background: var(--card-2); color: var(--fg); border-color: currentColor; }
.lp.on .lp-n { color: inherit; opacity: .75; }
.lp.bk-wa.on     { color: var(--scan); }
.lp.bk-ca.on     { color: var(--run); }
.lp.bk-remote.on { color: var(--info); }
.lp.bk-other.on,
.lp.lp-all.on    { color: var(--fg); border-color: var(--border-2); }

.bucket { margin-bottom: 12px; }
.bucket:last-child { margin-bottom: 0; }
.bk-head {
  width: 100%;
  display: flex; align-items: center; gap: 7px;
  padding: 4px 2px 6px; margin-bottom: 8px;
  background: none; border: 0; border-bottom: 1px solid var(--border);
  color: inherit; cursor: pointer; text-align: left;
  font-family: var(--sans); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0; white-space: nowrap;
}
.bk-head:hover .bk-name { color: var(--fg); }
.bucket.shut { margin-bottom: 6px; }
.bucket.shut .bk-head { margin-bottom: 0; border-bottom-color: transparent; }
.bk-caret {
  font-size: 10px; width: 10px; flex: none; line-height: 1;
  display: inline-flex; justify-content: center;
  color: currentColor; opacity: .65; transition: opacity .12s;
}
.bk-head:hover .bk-caret { opacity: 1; }
.bk-name { color: var(--muted); transition: color .12s;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-n {
  margin-left: auto; font-size: 10px; color: var(--faint);
  background: var(--card-2); border: 1px solid var(--border);
  border-radius: 999px; padding: 0 6px; letter-spacing: 0;
}
.bk-cards { display: flex; flex-direction: column; gap: 8px; }
.bucket.bk-wa     .bk-name,
.bucket.bk-wa     .bk-caret { color: var(--scan); }
.bucket.bk-wa     .bk-head { border-bottom-color: rgba(63, 214, 143, .35); }
.bucket.bk-ca     .bk-name,
.bucket.bk-ca     .bk-caret { color: var(--run); }
.bucket.bk-ca     .bk-head { border-bottom-color: rgba(242, 177, 62, .3); }
.bucket.bk-remote .bk-name,
.bucket.bk-remote .bk-caret { color: var(--info); }
.bucket.bk-other  .bk-name,
.bucket.bk-other  .bk-caret { color: var(--faint); }

/* ─── Profiles ─────────────────────────────────────────────────────────────
   Which identity an application goes out under. Kept beside the other
   top-level tools rather than in settings, because it is a per-run choice. */
.profmgr { position: relative; }
.profpicker { left: 0; right: auto; width: min(420px, calc(100vw - 32px)); }
/* The list is what the panel is FOR, so it gets the room: nine profiles used to
   render as one and a half visible rows, because the add form and the footer
   were fixed height and the list was the only thing that could shrink. */
.pr-list { display: flex; flex-direction: column; padding: 4px 10px 0; gap: 5px;
           flex: 1 1 auto; min-height: 108px; max-height: min(52vh, 400px); overflow-y: auto; }
.pr-new { background: none; border: 0; cursor: pointer; color: var(--scan);
          font: inherit; font-size: 11.5px; padding: 0 2px; margin-left: auto; }
.pr-new:hover { text-decoration: underline; }
.profpicker .cp-role-h { display: flex; align-items: center; gap: 8px; }
.pr-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: 8px;
  background: var(--card); border: 1px solid var(--border);
}
.pr-row.is-default { border-color: color-mix(in srgb, var(--scan) 50%, transparent); }
.pr-main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; }
.pr-label { font-size: 12.5px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.pr-tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: .04em;
          color: var(--scan); border: 1px solid currentColor; border-radius: 4px; padding: 0 4px; }
.pr-meta { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pr-act { background: none; border: 0; cursor: pointer; color: var(--faint); font-size: 11.5px; padding: 2px 4px; }
.pr-act:hover { color: var(--fg); }
.pr-act.del:hover { color: var(--bad); }
.pr-add { display: flex; flex-direction: column; gap: 6px; padding: 10px; }

/* Rotation: a profile that mints an address per company rather than being one.
   Marked in amber rather than the usual scan blue because it is the row where
   an application's identity is decided by a rule instead of by a click. */
.pr-row.is-rot { border-color: color-mix(in srgb, var(--run) 45%, transparent); }
.pr-tag.rot { color: var(--run); }
.pr-rot-opt { display: flex; align-items: center; gap: 6px; font-size: 11.5px;
              color: var(--muted); cursor: pointer; }
.pr-narrow { width: 74px; flex: 0 0 auto; }
.pr-rot { border-top: 1px solid var(--border); padding-bottom: 8px; }
.pr-rot-hint { font-weight: 400; color: var(--faint); font-size: 11px; }
.pr-rot-list { display: flex; flex-direction: column; gap: 4px; padding: 0 10px; }
/* Binding a company, from the panel that owns identities. */
.pr-rot-add { display: flex; gap: 6px; padding: 8px 10px 10px; align-items: center; }
.pr-rot-add .cp-search { min-width: 0; }
.pr-rot-add #pr-rot-co { flex: 1 1 auto; }
.pr-rot-prof { flex: 0 0 auto; max-width: 120px; }
.pr-rot-prof[hidden] { display: none; }

.prr-row { display: flex; align-items: center; gap: 9px; padding: 5px 9px;
           border-radius: 8px; background: var(--card-2); border: 1px solid transparent; }
.prr-row:hover { border-color: var(--border); }

/* The address this company is applying under, on its own line above the footer:
   in a 380px pane three buttons leave the footer's hint no room at all, and the
   address is the one fact worth reading before pressing any of them. */
.cp-dt-rotbar {
  display: flex; align-items: center; gap: 7px; flex: none;
  padding: 6px 12px; font-size: 11px; color: var(--muted);
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--run) 7%, transparent);
}
.cp-dt-rotmark { color: var(--run); }
.cp-dt-rotmail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-dt-rotn { margin-left: auto; color: var(--run); font-size: 10.5px; }

/* One company's identity, at the head of its own pipeline. Only present when the
   board is filtered to a single employer, because that is the only time the
   question "who does this company hear from" has one answer. */
.cbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 8px 14px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--card); font-size: 12px; color: var(--muted);
}
.cbar.on {
  border-color: color-mix(in srgb, var(--run) 32%, transparent);
  background: color-mix(in srgb, var(--run) 6%, var(--card));
}
.cbar-co { font-weight: 700; color: var(--fg); font-size: 12.5px; }
.cbar-mark { color: var(--run); }
.cbar-mail { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cbar-n { color: var(--run); font-size: 11px; }
.cbar-hint { flex: 1 1 auto; min-width: 0; }
.cbar-lim { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; }
.cbar-lim input {
  width: 52px; padding: 3px 6px; font: inherit; font-size: 11px;
  color: var(--fg); background: var(--card-2);
  border: 1px solid var(--border); border-radius: 5px;
}
.cbar-lim input:focus { outline: none; border-color: var(--run); }
.cbar .ps-link { margin-left: auto; }
.cbar .ps-link + .ps-link { margin-left: 0; }

/* Rotate & approve lives in the pinned footer beside Scan now, and is amber
   because it is the one control here that queues real applications. */
.cp-rot-go { color: var(--run); border-color: color-mix(in srgb, var(--run) 45%, transparent);
             white-space: nowrap; }
.cp-rot-go[disabled] { opacity: .6; cursor: default; }
/* Profile row + summary line are one footer block: card backed and seamed off
   from the columns above, with no stray hairline between the two of them. */
.cp-prof {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px 0;
  font-size: 11.5px; color: var(--muted);
  border-top: 1px solid var(--border);
  background: var(--card);
}
.cp-prof label { font-size: 11px; font-weight: 600; color: var(--muted); }
.cp-prof + .cp-foot { border-top: 0; }
/* The run window sits with "apply as" and the summary as ONE footer block: how
   this scan runs. Same card backing, no hairline of its own — the profile row
   above opens the block and the summary line closes it. Chips over a select so
   the chosen window is readable without opening anything. */
.cp-window {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px 0;
  background: var(--card);
}
.cp-window-l {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  margin-right: 2px;
}
.cp-window .chip { font-size: 11px; padding: 3px 9px; }
.cp-window + .cp-foot { border-top: 0; }
.cp-profsel {
  flex: 1; background: var(--card); color: var(--fg); border: 1px solid var(--border);
  border-radius: 6px; font-family: var(--sans); font-size: 11.5px; padding: 3px 5px; cursor: pointer;
}
.cp-profsel:hover { border-color: var(--scan); }
.kc-prof { font-size: 10.5px; color: var(--info); margin-top: 2px; }
/* Amber, like every other place an identity is decided by a rule rather than a
   click, so a card whose address is not settled yet reads as exactly that. */
.kc-prof.is-rot { color: var(--run); }
.profpick { display: flex; flex-direction: column; gap: 7px; }
.profpick select {
  width: 100%; padding: 8px 10px; border-radius: var(--r-md);
  background: var(--card); color: var(--fg); border: 1px solid var(--border);
  font-family: var(--sans); font-size: 13px; cursor: pointer;
}
.profpick select:hover { border-color: var(--scan); }
.profpick-note { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.pr-act.use { color: var(--scan); border: 1px solid transparent; border-radius: 5px; }
.pr-act.use:hover { border-color: currentColor; }

/* The posting, in the drawer. Collapsed by default: it is reference material,
   not the thing the owner opened the drawer to see. */
.jd-block > summary { cursor: pointer; list-style: none; }
.jd-block > summary::-webkit-details-marker { display: none; }
.jd-block > summary::before { content: "▸ "; color: var(--faint); }
.jd-block[open] > summary::before { content: "▾ "; }
.jd-text {
  margin-top: 8px; max-height: 340px; overflow-y: auto;
  white-space: pre-wrap; font-size: 13px; line-height: 1.55;
  color: var(--ink-2, var(--ink)); padding-right: 6px;
}

/* Why a run failed, in the drawer. The owner can usually fix these (Chrome
   closed, a portal cap, a slow form) so the reason belongs in front of them. */
.drawer-fail .fail-text {
  font-size: 13px; line-height: 1.55; white-space: pre-wrap;
  color: var(--bad, #b3261e);
}

/* ─── Apply queue ──────────────────────────────────────────────────────────
   Who is applying now, who is waiting and exactly why, and what gave up.
   Same popover species as Profiles / Job preferences. Green is the one accent
   (a lane in use, a revive); red appears only where something is dead. */
.qmgr { position: relative; display: inline-flex; }
.queuebtn.live {
  color: var(--scan);
  border-color: color-mix(in srgb, var(--scan) 40%, var(--border));
}
/* The count borrows the shared badge; it turns red only when something is on
   the dead list, so a glowing workbar says which of the two questions to ask. */
.queuebtn .skip-count.dead {
  background: color-mix(in srgb, var(--bad) 14%, transparent);
  color: var(--bad);
}
.qpicker { left: 0; right: auto; width: min(360px, calc(100vw - 32px)); }
.q-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: 4px 12px 12px;
}
.q-sec { display: flex; flex-direction: column; gap: 7px; }
.q-sec-h {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.q-sec:first-child .q-sec-h { border-top: 0; padding-top: 2px; }
.q-sec-h .cp-lk { text-transform: none; letter-spacing: 0; font-size: 11px; }
.q-chip {
  margin-left: auto;
  flex: none;
  font-size: 10px;
  letter-spacing: 0.03em;
  text-transform: none;
  line-height: 1.7;
  padding: 0 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--faint);
}
.q-chip.bad {
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 42%, transparent);
  background: color-mix(in srgb, var(--bad) 9%, transparent);
}

/* The concurrency limit drawn as the six possible lanes: lit up to the cap,
   pulsing where an application runs right now, dim past it. Clicking a slot
   sets the cap there, so the setting and the live picture are one control. */
.q-lanes { display: flex; gap: 5px; }
.q-lane {
  flex: 1 1 0;
  height: 26px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--card-2);
  color: var(--faint);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.q-lane:hover { border-color: var(--border-2); color: var(--fg); }
.q-lane.open {
  border-color: color-mix(in srgb, var(--scan) 40%, var(--border));
  background: color-mix(in srgb, var(--scan) 9%, transparent);
  color: var(--scan);
}
.q-lane.busy {
  border-color: var(--scan);
  background: color-mix(in srgb, var(--scan) 26%, transparent);
  color: var(--fg);
  font-weight: 600;
  animation: lanepulse 1.8s ease-in-out infinite;
}
@keyframes lanepulse { 50% { background: color-mix(in srgb, var(--scan) 12%, transparent); } }
/* the cap itself gets a doubled edge, so the boundary reads even mid pulse */
.q-lane[aria-pressed="true"] { box-shadow: inset 0 0 0 1px var(--scan); }
.q-note { font-size: 11px; line-height: 1.5; color: var(--faint); }
.q-note b { color: var(--muted); font-weight: 600; }

/* One row per company. The right edge chip is the answer to "why has mine
   not started": behind its own company, or out of lanes, or next. */
.q-cos { display: flex; flex-direction: column; gap: 2px; }
.q-co {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
}
.q-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--faint);
  opacity: 0.45;
}
.q-co.running .q-dot {
  background: var(--scan);
  opacity: 1;
  animation: wippulse 1.4s ease-in-out infinite;
}
.q-co-name {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.q-state { flex: none; font-size: 11px; color: var(--muted); white-space: nowrap; }
.q-state.live { color: var(--scan); font-weight: 600; }
.q-why {
  flex: none;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.02em;
  line-height: 1.6;
  padding: 1px 7px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--faint);
  white-space: nowrap;
  cursor: default;
}
.q-why.next {
  color: var(--scan);
  border-color: color-mix(in srgb, var(--scan) 40%, transparent);
  background: color-mix(in srgb, var(--scan) 8%, transparent);
}
.q-idle { font-size: 12px; line-height: 1.55; color: var(--faint); }

/* The dead list: reason and try count in the open, revive one click away. */
.q-deads { display: flex; flex-direction: column; gap: 6px; }
.q-dead {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--bad) 22%, var(--border));
  border-left: 2px solid var(--bad);
  border-radius: var(--r-sm);
  background: var(--card);
}
.q-dead-m { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.q-dead-t { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.q-dead-co { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.q-dead-role {
  font-size: 11px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.q-dead-why { font-size: 11px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }
.q-tries {
  flex: none;
  font-size: 10px;
  line-height: 1.6;
  padding: 1px 7px;
  border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent);
  border-radius: 999px;
  color: var(--bad);
  cursor: help;
}
.q-revive {
  flex: none;
  border: 1px solid color-mix(in srgb, var(--scan) 45%, transparent);
  background: color-mix(in srgb, var(--scan) 10%, transparent);
  color: var(--scan);
  border-radius: var(--r-sm);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
}

/* ─── Pipeline: the ranked stack ───────────────────────────────────────────
   Eight equal lanes treated five blocking questions and 575 raw finds as
   peers. The board is now a vertical stack ordered by what needs the owner:
   gates on top, approvals next, live work, confirmations, then the backlog
   as a per company rollup, and closed work folded away with its count on
   the fold. One accent carries attention; everything else stays neutral. */
.pstack { display: flex; flex-direction: column; gap: 12px; }
.psec {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.ps-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  flex-wrap: wrap;
  text-align: left;
}
.psec > .ps-head:not(:last-child) { border-bottom: 1px solid var(--border); }
button.ps-head {
  background: none;
  border: 0;
  border-radius: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
button.ps-head:hover { background: var(--card-2); }
.ps-name { font-size: 13px; font-weight: 600; }
.ps-n {
  min-width: 22px;
  text-align: center;
  font-size: 11px;
  padding: 0 7px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--muted);
}
.ps-n.hot {
  background: var(--scan);
  border-color: var(--scan);
  color: var(--bg);
  font-weight: 700;
}
.ps-hint {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.5px;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ps-link {
  flex: none;
  border: 1px solid var(--border);
  background: none;
  color: var(--muted);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 12px;
  white-space: nowrap;
}
.ps-link:hover { color: var(--fg); border-color: var(--border-2); }
.ps-link.on {
  color: var(--scan);
  border-color: color-mix(in srgb, var(--scan) 45%, transparent);
  background: color-mix(in srgb, var(--scan) 10%, transparent);
}
.ps-link.on:hover { background: color-mix(in srgb, var(--scan) 20%, transparent); }
.ps-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); opacity: 0.5; }
.ps-dot.on { background: var(--scan); opacity: 1; }
.ps-dot.on.live { animation: wippulse 1.4s ease-in-out infinite; }
.ps-caret {
  flex: none;
  width: 10px;
  font-size: 10px;
  color: var(--faint);
  display: inline-flex;
  justify-content: center;
}
.ps-chip {
  flex: none;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.7;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--faint);
  white-space: nowrap;
}
.ps-chip.bad {
  color: var(--bad);
  border-color: color-mix(in srgb, var(--bad) 40%, transparent);
  background: color-mix(in srgb, var(--bad) 8%, transparent);
}
.ps-sub {
  padding: 10px 14px 2px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}
.ps-more {
  margin: 6px 14px 12px 34px;
  border: 1px solid var(--border);
  background: none;
  color: var(--muted);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 12px;
}
.ps-more:hover { color: var(--fg); border-color: var(--border-2); }

/* "See all" in the Applied header. The lane folds like every other one, but a
   submitted application is a thing you may be asked about months later, so the
   full record is one click away rather than several rounds of Show more. It
   sits right of the hint and pushes to the end of the header row. */
.ps-applied .ps-all {
  margin-left: auto;
  border: 1px solid var(--border);
  background: none;
  color: var(--muted);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 12px;
  cursor: pointer;
}
.ps-applied .ps-all:hover { color: var(--fg); border-color: var(--border-2); }

/* Needs you: the one section allowed to shout, and only while it holds work. */
.ps-needs.has { border-color: color-mix(in srgb, var(--scan) 50%, var(--border)); }
.ps-needs.has > .ps-head { background: color-mix(in srgb, var(--scan) 8%, var(--card)); }
.ps-needs.has .ps-dot.on { animation: wippulse 2s ease-in-out infinite; }

/* Card grids for the small, card worthy states. */
.ps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
  padding: 12px 14px;
}
.ncard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--card-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--scan);
  border-radius: var(--r-md);
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.13s, transform 0.13s, box-shadow 0.13s;
}
.ncard:hover {
  border-color: var(--border-2);
  border-left-color: var(--scan);
  transform: translateY(-1px);
  box-shadow: var(--shadow-1);
}
.nc-co { font-size: 13px; font-weight: 600; }
.nc-role {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-weight: 400;
  font-size: 11.5px;
  color: var(--muted);
  overflow: hidden;
}
/* The question IS the card. It was 12px muted grey clamped to three lines, which
   is the hardest thing on the board to read and the one thing you have to read
   to triage. Body colour, more line height, four lines. */
.nc-q {
  font-size: 12.5px;
  color: var(--fg);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.nc-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.nc-foot .kc-retry { margin-left: auto; }
.nc-gate {
  font-size: 10px;
  line-height: 1.7;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Ready to apply keeps the location tiers, laid out as a grid rather than a
   narrow lane. */
.ps-ready-body { padding: 2px 14px 12px; }
.ps-ready-body .locbar { padding: 8px 0 2px; }
.ps-ready-body .bucket { margin-bottom: 10px; }
.ps-ready-body .bk-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 10px;
}

/* Dense rows: the handle for one record in a big state. */
.jrows { display: flex; flex-direction: column; padding: 4px 0; }
.jrow {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 34px;
  padding: 5px 14px;
  cursor: pointer;
}
.jrow + .jrow { border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent); }
.jrow:hover { background: var(--card-2); }
.jr-score { flex: none; width: 72px; display: inline-flex; }
.jr-none { color: var(--faint); }
.jr-mark { flex: none; width: 16px; text-align: center; color: var(--scan); font-weight: 700; }
.jr-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); opacity: 0.5; }
.jr-dot.bad { background: var(--bad); opacity: 1; }
.jr-co {
  flex: none;
  max-width: 150px;
  font-weight: 600;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jr-title {
  flex: 1 1 auto;
  min-width: 120px;
  font-size: 12.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jr-loc,
.jr-why {
  flex: 0 1 auto;
  max-width: 200px;
  font-size: 11px;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jr-when {
  flex: none;
  margin-left: auto;
  font-size: 10.5px;
  color: var(--faint);
  white-space: nowrap;
}
/* The employer's publish date on a Found row. Rows published inside the fresh
   window take the accent so today's crop jumps out of the backlog; a row whose
   board never stated a date shows nothing at all — unknown must not read as
   fresh. When present it claims the right edge and the discovery age follows. */
.jr-posted {
  flex: none;
  margin-left: auto;
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
}
.jr-posted.fresh { color: var(--scan); font-weight: 600; }
.jr-posted ~ .jr-when { margin-left: 0; }
.jrow .pill { flex: none; }
.jrow .kc-retry {
  flex: none;
  margin-left: 0;
  min-height: 24px;
  padding: 3px 10px;
  font-size: 11px;
}

/* Found: a company index, not a nested list. Each row is a grid on the same
   columns as the section header above it: the fold chevron sits in the 8px
   status-dot column, the company name shares the section title's left edge,
   and the posting count and best score hold fixed columns on the right so 39
   companies read as a table. */
.fgroups { padding: 2px 0 6px; }
.fg-head {
  width: 100%;
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) max-content minmax(180px, max-content);
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  background: none;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.fgroup:first-child .fg-head { border-top: 0; }
.fg-head:hover { background: var(--card-2); }
.fgroup.open > .fg-head { background: color-mix(in srgb, var(--card-2) 60%, transparent); }
.fgroup.open > .fg-head:hover { background: var(--card-2); }
/* The fold affordance: a drawn chevron, not a text bullet. It lives in the
   dot column, turns to point down when the group is open, and firms up on
   hover so it reads as a control. */
.fg-head .ps-caret {
  width: 6px;
  height: 6px;
  justify-self: center;
  border-right: 1.5px solid var(--faint);
  border-bottom: 1.5px solid var(--faint);
  transform: translateX(-1px) rotate(-45deg);
  transition: transform 0.13s ease, border-color 0.13s ease;
}
.fg-head:hover .ps-caret { border-color: var(--muted); }
.fg-head[aria-expanded="true"] .ps-caret { transform: translateY(-1px) rotate(45deg); }
.fg-co {
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Freshly published postings must survive the fold. The chip rides inside the
   company cell so the header's column grid keeps reading as a table. */
/* This company rotates its address, and the marker is also the control: pressing
   it rotates and queues that company. It sits OUTSIDE the fold button — a button
   inside a button is invalid and, worse, swallowed the click, which is why it
   looked like it did nothing. */
/* The header is a row: the fold takes the space, the rotate control sits at its
   end. Laid out rather than positioned — an absolutely placed button floated
   over the fold and collided with the score column at narrow widths. */
.fg-headrow { display: flex; align-items: stretch; }
.fg-headrow > .fg-head { flex: 1 1 auto; min-width: 0; }
.fg-rot {
  flex: 0 0 auto; align-self: center;
  margin: 0 14px 0 2px;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in srgb, var(--run) 32%, transparent);
  border-radius: 999px; background: none;
  color: var(--run); font: inherit; font-size: 12px; line-height: 1;
  cursor: pointer; transition: background .12s ease, border-color .12s ease;
}
.fg-rot:hover { border-color: var(--run); background: color-mix(in srgb, var(--run) 14%, transparent); }
.fg-rot.is-busy { opacity: .65; cursor: default; }
.fg-rot.is-busy::after { content: none; }   /* the glyph itself spins instead */
.fg-rot.is-busy { animation: rot-spin 1.1s linear infinite; }
.fg-fresh {
  display: inline-block;
  margin-left: 8px;
  padding: 0 7px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.7;
  font-weight: 600;
  color: var(--scan);
  background: color-mix(in srgb, var(--scan) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--scan) 38%, transparent);
  vertical-align: 1px;
}
.fg-n {
  min-width: 4ch;
  text-align: right;
  font-size: 11px;
  color: var(--muted);
}
.fg-best {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding-left: 10px;
  border-left: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font-size: 10.5px;
  color: var(--faint);
  white-space: nowrap;
}
/* Open postings sit on a quiet inset panel; their score column starts on the
   same text edge as the company names, so the hierarchy is carried by tone
   and a shared grid rather than by indentation. */
.fg-rows {
  padding: 2px 0 4px;
  background: color-mix(in srgb, var(--card-2) 35%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.fg-rows .jrow { padding-left: 32px; }
.fg-rows .ps-more { align-self: flex-start; margin: 4px 14px 8px 32px; }

@media (max-width: 700px) {
  .jr-loc, .jr-why, .fg-best { display: none; }
  .jr-co { max-width: 110px; }
  .fg-head { grid-template-columns: 8px minmax(0, 1fr) max-content; }
  .fg-rows .jrow { padding-left: 14px; }
}
.q-revive:hover { background: color-mix(in srgb, var(--scan) 20%, transparent); }

/* Stop applying, inside the queue panel. Destructive, so it reads as the
   exception: outlined in --bad, never competing with the lane controls. */
#q-foot { display: flex; align-items: flex-start; gap: 10px; }
.q-foot-t { flex: 1; }
.q-stop {
  flex: none;
  border: 1px solid color-mix(in srgb, var(--bad) 45%, transparent);
  background: color-mix(in srgb, var(--bad) 10%, transparent);
  color: var(--bad);
  white-space: nowrap;
}
.q-stop:hover { background: color-mix(in srgb, var(--bad) 20%, transparent); border-color: var(--bad); }
.q-chip.warn { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }

/* A scan held behind another one. Quiet: it is a promise, not a problem, and the
   row still has to read as a company first. */
.cp-pending {
  flex: none;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--scan);
  border: 1px solid color-mix(in srgb, var(--scan) 35%, transparent);
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}

/* The rate limit banner is a heads up, not an outage: the work retries itself.
   Same shape as the failure banner so it is still noticed, without the alarm. */
.llm-banner.soft {
  border-color: color-mix(in srgb, var(--scan) 40%, transparent);
  background: color-mix(in srgb, var(--scan) 10%, transparent);
  color: var(--fg);
}
.llm-banner.soft .lb-ico { color: var(--scan); }

/* "Queued to apply" — approved work waiting its turn, grouped by company.
   The company is the unit the queue runs on (one application at a time per
   company, several companies in parallel), so it follows the Found rollup's
   shape: a fold head per company on the section's own grid, jobs on an inset
   panel beneath it. The head carries the company's Process control at full
   label width — ten companies read as ten labelled rows, not ten slivers —
   and every job is one fold away, with no truncation notice anywhere. */
.un-groups { padding: 2px 0 6px; }
.ung-head {
  display: flex;
  align-items: center;
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.ung:first-child > .ung-head { border-top: 0; }
.ung-head:hover { background: var(--card-2); }
.ung.open > .ung-head { background: color-mix(in srgb, var(--card-2) 60%, transparent); }
.ung.open > .ung-head:hover { background: var(--card-2); }
.ung-fold {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
/* Same drawn chevron as the Found rollup: lives in the dot column, points
   down when the group is open, firms up on hover so it reads as a control. */
.ung-fold .ps-caret {
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--faint);
  border-bottom: 1.5px solid var(--faint);
  transform: translateX(-1px) rotate(-45deg);
  transition: transform 0.13s ease, border-color 0.13s ease;
}
.ung-fold:hover .ps-caret { border-color: var(--muted); }
.ung-fold[aria-expanded="true"] .ps-caret { transform: translateY(-1px) rotate(45deg); }
.un-co {
  flex: none;
  min-width: 0;
  max-width: 45%;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.un-gn { flex: none; font-size: 11px; color: var(--muted); }
.un-gstate {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11px;
  color: var(--faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.un-gstate.next { color: var(--scan); }
/* The one accent-worthy state on a head is "starts next"; a running company
   already glows in the In flight section below, so its head stays quiet. */
.ung-head .un-go { flex: none; margin: 0 14px 0 4px; }
.un-go[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Open jobs sit on the same quiet inset panel as Found's postings. */
.un-list {
  list-style: none;
  margin: 0;
  padding: 2px 0 4px;
  background: color-mix(in srgb, var(--card-2) 35%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
}
.un-row {
  display: grid;
  gap: 10px;
  align-items: center;
  grid-template-columns: 16px 26px minmax(0, 1fr) max-content max-content max-content auto;
  padding: 5px 14px 5px 14px;
  font-size: 13px;
}
.un-row:hover { background: var(--card-2); }

/* The tick sits in its own column at the head of the row, the same size and
   accent as every other checkbox on the board. It stays faint until the row is
   hovered or ticked, so a queue nobody is selecting from does not read as a
   column of empty boxes. */
.un-sel {
  width: 14px; height: 14px; margin: 0; cursor: pointer;
  accent-color: var(--scan);
  opacity: .35;
  transition: opacity .12s ease;
}
.un-row:hover .un-sel, .un-sel:focus-visible, .un-sel:checked { opacity: 1; }
.un-row.un-picked {
  background: color-mix(in srgb, var(--scan) 10%, transparent);
  box-shadow: inset 2px 0 0 var(--scan);
}
/* Only the ones that start the moment a slot frees are marked. Highlighting
   every row would say nothing. */
.un-row.un-next {
  background: color-mix(in srgb, var(--scan) 8%, transparent);
  box-shadow: inset 2px 0 0 var(--scan);
}
.un-row.un-next:hover { background: color-mix(in srgb, var(--scan) 14%, transparent); }
.un-pos { color: var(--faint); font-size: 11px; text-align: right; }
.un-title {
  color: var(--fg); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.un-rank { color: var(--muted); font-size: 11px; }
.un-why { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.un-row.un-next .un-why { color: var(--scan); }

/* The row actions stay hidden until the row is hovered or focused within. Three
   buttons on every line turns a schedule you scan into a wall of controls, and
   Skip closes a job — it should take a deliberate move to reach, not sit under
   the cursor's path down the list. Always visible on touch, where there is no
   hover to reveal them. */
/* Always visible. Hiding these until hover twice left the owner thinking they
   had been removed, which is the worst thing a control can do: a button you
   cannot see is indistinguishable from one that does not exist. They are muted
   rather than hidden, so the list still reads as a schedule and not a toolbar. */
.un-acts { display: flex; gap: 4px; opacity: .55; transition: opacity .12s ease; }
.un-row:hover .un-acts, .un-row:focus-within .un-acts { opacity: 1; }
.un-x {
  border: 1px solid var(--border); background: var(--card);
  color: var(--muted); border-radius: 5px;
  padding: 2px 8px; font-size: 11px; cursor: pointer;
}
.un-x:hover { color: var(--fg); border-color: var(--border-2); }
.un-x.un-skip:hover { color: var(--bad); border-color: var(--bad); }
.un-title[data-open] { cursor: pointer; }


@media (max-width: 720px) {
  .un-gstate, .un-rank, .un-why, .un-aged { display: none; }
  .un-row { grid-template-columns: 16px 22px minmax(0, 1fr) auto; padding-left: 14px; }
}

/* A session is holding a browser open waiting for this, and it can only wait
   about nine minutes — so it sits at the top with its input in reach, rather
   than in a list to be found later. Uses --scan, not --bad: nothing is wrong,
   something is needed. */
.verify-bar { display: grid; gap: 6px; margin: 0 0 10px; }
.vf-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--scan) 45%, transparent);
  background: color-mix(in srgb, var(--scan) 10%, transparent);
}
.vf-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--scan);
  animation: vf-pulse 1.6s ease-in-out infinite; flex: none;
}
@keyframes vf-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }
.vf-msg { flex: 1 1 320px; font-size: 13px; color: var(--fg); }
.vf-in {
  width: 130px; padding: 6px 10px; font-size: 14px; letter-spacing: .08em;
  border-radius: 6px; border: 1px solid var(--border);
  background: var(--card); color: var(--fg);
}
.vf-go {
  padding: 6px 14px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--scan); background: var(--scan); color: var(--scan-ink);
  font-weight: 600;
}
.vf-go:hover { background: var(--scan-deep); border-color: var(--scan-deep); }

@media (prefers-reduced-motion: reduce) { .vf-dot { animation: none } }

/* The company select on the add-a-role panel. Matches the text inputs beside it
   so the row reads as one control group rather than a form field next to a
   browser widget. */
.rp-select {
  appearance: none; cursor: pointer; padding-right: 30px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 16px) 52%, calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* Tailoring date. On the card because a folded day heading is out of sight, and
   the age is exactly what a stale approval hides. Muted: it informs a decision,
   it is not the decision. */
.kc-age { font-size: 11px; color: var(--muted); margin-left: auto; padding-right: 6px; }
.bucket.bk-day .bk-name { font-variant-numeric: tabular-nums; }

/* Skip closes a job, so it reads as the destructive one of the three without
   shouting: --bad only on hover, when the cursor is already committed to it. */
.kc-retry.kc-skip:hover { color: var(--bad); border-color: var(--bad); }

/* How old the résumé is, on the queue row. A queued job may have been tailored
   days ago against a posting that has since changed, and that is worth seeing
   before it goes out, not after. */
.un-aged { color: var(--faint); font-size: 11px; white-space: nowrap; }
.un-row:hover .un-aged { color: var(--muted); }

/* A wait nothing is collecting. Not an error, so not --bad: the application is
   simply not going to continue on its own and needs starting again. */
.vf-row.vf-stale { border-color: var(--border); background: var(--card-2); }
.vf-row.vf-stale .vf-dot { background: var(--muted); animation: none; }

/* ─── Activity heatmap ───────────────────────────────────────────────────── */
/* One grid, two channels. The cell's tint is a --scan ramp over the card
   surface and carries jobs FOUND; a centred ink dot carries applications
   SENT, sized against applied's own range. The two series differ by an order
   of magnitude, so they must never share one scale — the separate channel is
   what keeps a 3-application day as legible as a 600-find day. Level 0 stays
   the bare card surface with no tint at all: an empty day reads as empty,
   not as faint activity. Everything is drawn from the existing tokens, so
   both themes come for free. */
.hm-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--card);
  padding: 14px 16px 12px;
}
.hm-sum {
  display: flex;
  align-items: baseline;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.hm-tot { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.hm-tot b { font-size: 15px; font-weight: 600; color: var(--fg); margin-right: 5px; }
.hm-when { margin-left: auto; font-size: 11px; color: var(--faint); }

/* The grid scrolls inside its own container on narrow screens; the page never
   scrolls sideways for it. */
.hm-scroll { overflow-x: auto; scrollbar-width: thin; padding-bottom: 4px; }
.hm-frame {
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 4px 8px;
  width: max-content;
}
/* Month labels ride explicit 14px tracks (11px cell + 3px gap) set inline to
   the week count, so each label lands over the week that starts its month. */
.hm-months {
  display: grid;
  font-size: 10px;
  line-height: 1.4;
  color: var(--faint);
}
.hm-months span { grid-row: 1; white-space: nowrap; overflow: hidden; }
.hm-wdays {
  display: grid;
  grid-template-rows: repeat(7, 11px);
  gap: 3px;
  align-items: center;
  text-align: right;
  font-size: 9.5px;
  line-height: 1;
  color: var(--faint);
}
.hm-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(7, 11px);
  grid-auto-columns: 11px;
  gap: 3px;
}
.hm-c {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: var(--card-2);
  display: grid;
  place-items: center;
}
.hm-pad { visibility: hidden; }
.hm-f1 { background: color-mix(in srgb, var(--scan) 22%, var(--card-2)); }
.hm-f2 { background: color-mix(in srgb, var(--scan) 45%, var(--card-2)); }
.hm-f3 { background: color-mix(in srgb, var(--scan) 68%, var(--card-2)); }
.hm-f4 { background: var(--scan); }
.hm-c[data-hd]:hover {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 60%, transparent);
}
/* Ink, not accent: --fg holds its contrast on the empty cell and on the
   deepest --scan step, in both themes. */
.hm-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg); }
.hm-dot.hm-a2 { width: 4.5px; height: 4.5px; }
.hm-dot.hm-a3 { width: 6px; height: 6px; }

.hm-legend {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  font-size: 10.5px;
  color: var(--faint);
}
.hm-lg { display: inline-flex; align-items: center; gap: 4px; }
.hm-lgl { color: var(--muted); font-weight: 600; margin-right: 4px; }
.hm-lgt { margin: 0 3px; }

.hm-tip {
  position: fixed;
  z-index: 70;
  pointer-events: none;
  padding: 6px 10px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-sm);
  background: var(--panel-solid);
  box-shadow: var(--shadow-2);
  font-size: 11px;
  line-height: 1.55;
  color: var(--muted);
  white-space: nowrap;
}
.hm-tip b { color: var(--fg); font-weight: 600; }

/* Sample data marker. Warm neutral, not the accent and certainly not --bad:
   nothing is wrong, the figures are simply not real. It sits beside the paused
   pill because that is where the eye already goes for "what state am I in". */
.demo-pill {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  color: var(--muted); background: var(--card-2);
  border: 1px solid var(--border);
}

/* ─── Fresh tab ──────────────────────────────────────────────────────────── */
/* One faceted browse surface: a headline row of stat tiles, a sticky facet
   rail on the left (window / status / companies / scan), and the results with
   the passed-over trail on the right. Facet counts are computed against the
   other active facets; zeroes grey out rather than vanish. One payload at the
   widest window, so every facet change is a pure re-render. Existing tokens
   only, both themes for free — and --bad never appears here, since nothing on
   this view is destructive. */
.fresh-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.fstat {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--card);
  padding: 10px 12px 9px;
  min-width: 0;
}
/* A stat value is a display figure: sans, semibold, proportional digits (the
   default) — tabular would set every digit at the width of a zero and read
   loose at this size. The label wears the label token one step down. */
.fstat-v { font: 600 22px/28px var(--sans); color: var(--fg);   font-size: 17px;
}
.fstat-l { font: var(--t-label); color: var(--muted); margin-top: 2px; }
.fstat.dim .fstat-v { color: var(--muted); }

.fresh-layout {
  display: grid;
  grid-template-columns: 224px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}
.fresh-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fresh-main .ps-passed { margin-top: 0; }

/* .work clips to its rounded corners with overflow: hidden, which quietly
   makes it the sticky containing scroll box and kills the rail's stickiness.
   overflow: clip gives the identical clipping without creating a scroll
   container, and :has() scopes the change to this tab alone. */
.work:has(.fresh-layout) { overflow: clip; }

/* The rail sticks below the sticky control deck (about 125px tall on a wide
   screen, one wrap taller once the deck folds); on short screens it scrolls
   inside itself rather than pinning its own tail out of reach. */
.fresh-rail {
  position: sticky;
  top: 138px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  scrollbar-width: thin;
}
@media (max-width: 1080px) {
  .fresh-rail { top: 170px; max-height: calc(100vh - 182px); }
}
.frail-group {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--card);
  overflow: hidden;
  flex: none;
}
.frail-h {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 9px 12px 5px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.frail-hn {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--faint);
}
/* A facet option: label left, count right. Selected rows take the same --scan
   keel the hot result rows wear, so "chosen" reads the same on both sides. */
.facet-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 12px;
  border: 0;
  border-radius: 0;
  background: none;
  text-align: left;
  font-size: 12.5px;
  color: var(--muted);
  transition: background 0.12s, color 0.12s;
}
.facet-row:hover { background: var(--card-2); color: var(--fg); }
.facet-row[aria-selected="true"] {
  background: var(--card-2);
  box-shadow: inset 2px 0 0 var(--scan);
  color: var(--fg);
  font-weight: 600;
}
.facet-row:last-child { margin-bottom: 5px; }
.facet-l {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.facet-n {
  margin-left: auto;
  flex: none;
  font-size: 11px;
  color: var(--muted);
}
/* Zero counts stay on the page, greyed: the absence is informative. */
.facet-row.zero:not([aria-selected="true"]),
.facet-row.zero:not([aria-selected="true"]) .facet-n { color: var(--faint); }
.frail-cos { padding: 0 12px 9px; }
.frail-note {
  margin-top: 7px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--faint);
}
.frail-scanbody { padding: 0 12px 11px; }
.frail-scanbody .fs-foot { margin-top: 4px; }

/* The results column's header: the persistent search box and the honest
   showing line over dated roles. */
.fr-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.fr-search { flex: 1 1 180px; width: auto; min-width: 0; }
.fr-showing { font-size: 12px; color: var(--muted); white-space: nowrap; }
.fr-showing b { color: var(--fg); font-weight: 600; }

.fresh-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--card);
  overflow: hidden;
}
.fresh-day + .fresh-day { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.fd-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 12px 14px 0;
}
.fd-name {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.fd-n { font-size: 10.5px; color: var(--faint); }
/* The age leads the row: it is the one fact this view exists to show. */
.fr-age {
  flex: none;
  width: 76px;
  font-size: 11px;
  color: var(--muted);
}
.fr-age.hot { color: var(--scan); font-weight: 600; }
.fresh-row.hot { box-shadow: inset 2px 0 0 var(--scan); }
.fresh-row .jr-co { max-width: 220px; }
.fr-side {
  flex: none;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* The common state on a young store: most boards publish no date, so an empty
   window has to read as a deliberate answer rather than a failed load. */
.fresh-empty {
  padding: 44px 24px 46px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7;
}
.fresh-claim { max-width: 560px; margin: 0 auto; }
.fresh-hint {
  max-width: 560px;
  margin: 10px auto 0;
  font-size: 12.5px;
  color: var(--fg);
}
.fresh-hint b { font-weight: 600; }
.fresh-foot {
  padding: 10px 14px;
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  font-size: 11px;
  line-height: 1.6;
  color: var(--faint);
}
.fresh-foot b { color: var(--muted); font-weight: 600; }

/* ── Fresh tab: the company facet's list and the scan's run controls, both
   inside the rail. One name per row with its count; the list scrolls
   vertically, so fifty names can never push the page sideways. --scan is the
   sole accent and --bad never appears, since nothing here is destructive. */
.fs-tools { display: flex; align-items: center; gap: 10px; }
.fs-search {
  width: auto;
  flex: 1 1 90px;
  min-width: 0;
  font-size: 12px;
  padding: 4px 9px;
}
.fs-list {
  margin-top: 7px;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  align-content: start;
  max-height: 236px;
  overflow-y: auto;
  scrollbar-width: thin;
}
.fs-item {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  padding: 3px 7px;
  border-radius: var(--r-sm);
  font-size: 12.5px;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s;
}
.fs-item:hover { background: var(--card-2); }
.fs-item input[type="checkbox"] {
  accent-color: var(--scan);
  width: 14px;
  height: 14px;
  margin: 0;
  flex: none;
  cursor: pointer;
}
.fs-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Same reading rules as the facet rows: the ticked set stands out down a long
   column, and a zero count greys its row without disabling the tick — a quiet
   board is precisely the one a scan is for. */
.fs-item:has(input:not(:checked)) .fs-nm { color: var(--muted); }
.fs-item.zero:has(input:not(:checked)) .fs-nm,
.fs-item.zero:has(input:not(:checked)) .facet-n { color: var(--faint); }
/* A refused run says why it was refused, where the button is. Neutral, not
   --bad: nothing broke, the answer was simply "not yet". */
.fs-note {
  margin-top: 8px;
  padding: 7px 10px;
  border: 1px solid var(--border-2);
  background: var(--card-2);
  border-radius: var(--r-sm);
  font-size: 12px;
  line-height: 1.5;
  color: var(--fg);
}
/* Stacked, not rowed: inside a 224px rail the sentence sits above the button
   and the button takes the full width, so the press target is generous. */
.fs-foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 9px;
  margin-top: 8px;
}
.fs-sum { min-width: 0; font-size: 11.5px; line-height: 1.55; color: var(--muted); }
.fs-sum b { color: var(--fg); font-weight: 600; }
.fs-run {
  flex: none;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  border-color: color-mix(in srgb, var(--scan) 45%, transparent);
  background: color-mix(in srgb, var(--scan) 12%, transparent);
  color: var(--scan);
  font-size: 12.5px;
  font-weight: 600;
  padding: 6px 14px;
  /* Company counts and date windows must fit the narrow discovery rail. */
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.45;
}
.fs-run:hover:not(:disabled) { background: color-mix(in srgb, var(--scan) 22%, transparent); }
.fs-run:disabled { opacity: 0.45; cursor: default; }
.fs-run:disabled:hover { border-color: color-mix(in srgb, var(--scan) 45%, transparent); }
.fs-live-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--scan);
  margin-right: 7px;
  animation: pausepulse 1.6s ease-in-out infinite;
}

/* An empty scoped panel still says something: nothing rejected HERE. */
.po-none { padding: 12px 14px; font-size: 12.5px; color: var(--muted); }

/* The rail thins first, then stacks above the results; the stat row folds to
   two tiles a line. Nothing may push the page sideways on the way down. */
@media (max-width: 1180px) {
  .fresh-layout { grid-template-columns: 200px minmax(0, 1fr); }
}
@media (max-width: 920px) {
  .fresh-layout { grid-template-columns: 1fr; }
  .fresh-rail { position: static; max-height: none; overflow: visible; }
  .fresh-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------------
   Apps design cheatsheet. The owner's spec, stated once as tokens so a control
   is sized by naming its role rather than by repeating a number, and so the
   sheet can be checked against the spec by reading twenty lines.

     Type      Inter. Titles 16/20 Medium. Labels 13/16 Medium. Body 14 Regular.
     Buttons   32px high, 10px radius.
     Rows      40px data, 44px stores.
     Badge     20px high, 6px radius, #CAFACE on #15B042 text.
     Switch    24x14, 10px thumb, #0077E6 track.
     Text      #333333 default, #777777 subtle.

   The literal hex values are the spec's, and they are a LIGHT palette. This
   dashboard is theme aware, so #333333 body text would be all but invisible on
   the dark card. They are therefore bound here as the light values and given
   dark counterparts below that preserve the same relationships: default text
   high contrast, subtle text one clear step down, the badge a tinted chip of
   its own text colour. The spec is honoured exactly where it applies, rather
   than applied literally until the page stops working.
   --------------------------------------------------------------------------- */
:root {
  --t-title: 600 16px/20px var(--sans);
  --t-label: 500 13px/16px var(--sans);
  --t-body: 400 14px/20px var(--sans);

  --h-btn: 32px;
  --r-btn: 10px;
  --h-row: 40px;          /* data rows */
  --h-row-store: 44px;    /* store rows, the roomier listing */
  --h-badge: 20px;
  --r-badge: 6px;
  --sw-w: 24px;
  --sw-h: 14px;
  --sw-thumb: 10px;

  /* Dark counterparts of the spec's text and control colours. */
  --text-default: #e8ede9;
  --text-subtle: #9fada3;
  --badge-fill: color-mix(in srgb, #15b042 22%, transparent);
  --badge-text: #6ee7a0;
  --switch-on: #3b9bff;
}

:root[data-theme="light"] {
  --text-default: #333333;
  --text-subtle: #777777;
  --badge-fill: #cafacE;
  --badge-text: #15b042;
  --switch-on: #0077e6;
}

/* The type scale, applied by role. */
body { font: var(--t-body); color: var(--text-default); }
h1, h2, h3, .ps-name, .kc-co, .fg-co, .un-co, .hm-total { font: var(--t-title); }
label, .cp-lbl, .ps-hint, .un-why, .fg-best, .kc-role { font: var(--t-label); }
.subtle, .muted, .ps-hint, .un-aged, .kc-age { color: var(--text-subtle); }

/* Controls at the spec's sizes. Buttons that are deliberately smaller (inline
   row actions) keep their own size: 32px on every one of them would turn a
   dense list into a toolbar. */
button, .btn, .cp-lk, .ps-link, .vf-go {
  min-height: var(--h-btn);
  border-radius: var(--r-btn);
}
.un-x, .kc-retry, .lp, .chip { min-height: auto; }

.jrow, .un-row { min-height: var(--h-row); }
.fg-head, .ung-head, .cp-row { min-height: var(--h-row-store); }

.badge, .ps-n, .fg-n, .un-n, .tab-n {
  height: var(--h-badge);
  border-radius: var(--r-badge);
  background: var(--badge-fill);
  color: var(--badge-text);
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
}

/* Switch, at 24x14 with a 10px thumb. */
.switch {
  width: var(--sw-w); height: var(--sw-h);
  border-radius: 999px; background: var(--border-2);
  position: relative; display: inline-block; flex: none;
  transition: background .15s ease;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: var(--sw-thumb); height: var(--sw-thumb);
  border-radius: 50%; background: var(--panel-solid);
  transition: transform .15s ease;
}
.switch[aria-checked="true"], .switch.on { background: var(--switch-on); }
.switch[aria-checked="true"]::after, .switch.on::after {
  transform: translateX(calc(var(--sw-w) - var(--sw-thumb) - 4px));
}

/* "Passed over": what a scan saw and did not keep, grouped by company. Muted
   throughout, because nothing here went wrong: these are decisions, and the
   panel exists to make them checkable rather than to raise an alarm. */
.ps-passed { margin-top: 12px; }
.pog { border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.pog:first-of-type { border-top: 0; }
.pog-head {
  width: 100%; display: grid; gap: 10px; align-items: center;
  grid-template-columns: 10px minmax(0, 1fr) max-content max-content;
  padding: 8px 14px; background: none; border: 0; text-align: left;
  color: inherit; font: inherit; cursor: pointer;
}
.pog-head:hover { background: var(--card-2); }
.pog.open .pog-head { background: color-mix(in srgb, var(--card-2) 70%, transparent); }
.pog-co { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pog-n { color: var(--muted); font-size: 11px; }
.pog-why { color: var(--faint); font-size: 11px; white-space: nowrap; }

.po-list { list-style: none; margin: 0; padding: 0 0 6px; display: grid; gap: 1px; }
.po-row {
  display: grid; gap: 10px; align-items: baseline;
  grid-template-columns: minmax(0, 1fr) max-content max-content;
  padding: 4px 14px 4px 34px; font-size: 13px;
}
.po-t {
  color: var(--muted); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.po-t:hover { color: var(--fg); text-decoration: underline; }
.po-when { color: var(--faint); font-size: 11px; white-space: nowrap; }
.po-why {
  font-size: 11px; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  color: var(--muted); background: var(--card-2); border: 1px solid var(--border);
}
.po-foot {
  padding: 8px 14px 2px; font-size: 11px; color: var(--faint);
  border-top: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}

@media (max-width: 720px) {
  .pog-why, .po-when { display: none; }
  .po-row { padding-left: 24px; }
}

/* "showing N of M" inside an opened company. The header count is the truth; this
   says the list under it is a sample, so a company that rejected sixty roles is
   never mistaken for one that rejected twenty five. */
.po-row.po-note { color: var(--faint); font-size: 11px; font-style: italic; }


/* A ticked company in the passed over trail. Floated to the top and marked,
   rather than the others being hidden: the facet says what to scan next, this
   panel says what already happened, and one must not silently empty the other. */
.pog-head.pog-picked .pog-co { color: var(--scan); }

/* The run tally under the scan strip: every finished company and what it
   produced, a dense multi column list rather than cards, so forty entries stay
   shallow. Capped and scrolling inside its own box, because the deck is sticky
   on every tab and a long run must never push the board down the page. */
.deck-scan-results { padding: 0 0 10px; }
.sr-head {
  display: flex; align-items: baseline; gap: 8px;
  font: var(--t-label); color: var(--text-subtle); margin-bottom: 4px;
}
.sr-n { color: var(--text-default); }
.sr-sum { color: var(--scan); font-weight: 600; }
.sr-sum.sr-sum-none { color: var(--faint); font-weight: 400; }
.sr-list {
  list-style: none; margin: 0; padding: 0 8px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  column-gap: 28px;
  max-height: 112px; overflow-y: auto;
}
/* Name, then its result right beside it, then the time at the cell's far
   edge. The result hugs the name so the pairing reads at a glance even when
   only a few cells are filled; a long name truncates rather than pushing. */
.sr-row {
  display: grid;
  grid-template-columns: minmax(0, max-content) max-content minmax(12px, 1fr);
  gap: 10px; align-items: baseline; font-size: 12px; padding: 2px 0;
}
.sr-row .sr-t { justify-self: end; }
.sr-co { color: var(--text-default); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-got { color: var(--scan); font-weight: 600; white-space: nowrap; }
/* Nothing new is a RESULT, so it is stated rather than left blank: a company
   that found nothing differs from one the sweep has not reached. */
.sr-none {
  color: var(--faint); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; max-width: 180px;
}
.sr-t { color: var(--text-subtle); font-size: 11px; }

.rt {
  container-type: inline-size;
  position: relative;
  border: 1px solid var(--border);
  border-left: 2px solid var(--border);
  border-radius: var(--r-md);
  background: var(--card);
  padding: 13px 15px 12px;
  overflow: hidden;
  transition: border-color 0.18s ease;
}
.rt[data-busy="true"] { border-left-color: var(--run); }

.rt-sweep {
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  opacity: 0;
  background-image: linear-gradient(90deg, transparent, var(--run), transparent);
  background-size: 40% 100%;
  background-repeat: no-repeat;
  transition: opacity 0.2s ease;
}
.rt[data-busy="true"] .rt-sweep { opacity: 1; animation: sweep 1.4s ease-in-out infinite; }

.rt-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 7px;
}
.rt-t {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--faint);
}
.rt-clock {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--run);
}
.rt-kept {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--scan);
  white-space: nowrap;
}
.rt-help {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
  margin-bottom: 9px;
}
.rt-input {
  width: 100%;
  min-width: 0;
  display: block;
  font: inherit;
  font-size: 13px;
  line-height: 1.45;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--fg);
  resize: vertical;
  transition: border-color 0.13s ease, opacity 0.18s ease;
}
.rt-input::placeholder { color: var(--faint); }
.rt-input:focus { outline: none; border-color: var(--run); }
.rt-input:disabled { opacity: 0.45; cursor: not-allowed; resize: none; }

.rt-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  min-height: var(--h-btn);
}
.rt-foot .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.rt-foot .btn:disabled:hover { border-color: var(--border-2); }

.rt-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--run) 45%, transparent);
  background: color-mix(in srgb, var(--run) 12%, transparent);
  color: var(--run);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.rt-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--run);
  animation: wippulse 1.1s ease-in-out infinite;
}
.rt-note {
  font-size: 12px;
  color: var(--faint);
  flex: 1 1 220px;
  min-width: 0;
}
.rt-note.ok { color: var(--scan); }

.rt-live {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.4;
  color: var(--run);
  min-width: 0;
}
.rt-live span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@container (max-width: 420px) {
  .rt-foot .btn, .rt-foot .rt-status { width: 100%; justify-content: center; }
  .rt-note { flex-basis: 100%; }
}

@supports not (container-type: inline-size) {
  @media (max-width: 560px) {
    .rt-foot .btn, .rt-foot .rt-status { width: 100%; justify-content: center; }
    .rt-note { flex-basis: 100%; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .rt[data-busy="true"] .rt-sweep { animation: none; opacity: 0.55; }
  .rt-dot { animation: none; }
}

.kc-rt {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.01em;
  color: var(--faint);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 1px 7px;
  white-space: nowrap;
}
.kc-rt.fresh {
  color: var(--scan);
  border-color: color-mix(in srgb, var(--scan) 40%, transparent);
  background: color-mix(in srgb, var(--scan) 9%, transparent);
}

.un-rt { color: var(--faint); }
.un-rt.fresh { color: var(--scan); }
.un-row:hover .un-rt { color: var(--muted); }
.un-row:hover .un-rt.fresh { color: var(--scan); }

.un-as {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 22px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 12px) 50%, calc(100% - 8px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  cursor: pointer;
}
.un-as:disabled { opacity: 0.5; cursor: wait; }
.pr-use { color: var(--scan); cursor: help; }
.pr-use.none { color: var(--faint); cursor: default; }

.profpicker { overflow-y: auto; width: min(540px, calc(100vw - 32px)); }
.profpicker .pr-meta { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.45; }
.profpicker .pr-list { max-height: none; overflow: visible; flex: none; }

.pr-co {
  appearance: none;
  -webkit-appearance: none;
  max-width: 150px;
  padding-right: 18px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 9px) 50%, calc(100% - 5px) 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  cursor: pointer;
  text-overflow: ellipsis;
}
.pr-co:disabled { opacity: 0.5; cursor: wait; }

.pv { max-width: 1120px; }
.pv .section-t { margin-top: 26px; }
.pv-head { display: flex; align-items: center; gap: 12px; }
.pv-head .section-t { flex: 1; margin: 0; }
.pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 10px; }
.pv-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 12px 14px 11px; display: flex; flex-direction: column; gap: 5px; min-width: 0;
}
.pv-card.is-default { border-color: color-mix(in srgb, var(--scan) 50%, transparent); }
.pv-card.is-rot { grid-column: 1 / -1; border-color: color-mix(in srgb, var(--run) 45%, transparent); }
.pv-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: nowrap; }
.pv-name { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-acts { margin-left: auto; display: flex; align-items: center; gap: 5px; flex: none; }
.pv-act { font-size: 11px; line-height: 1.2; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--muted); cursor: pointer; white-space: nowrap; }
.pv-act:hover { color: var(--fg); border-color: var(--border-2); }
.pv-act.del { border: 0; padding: 2px 5px; color: var(--faint); font-size: 13px; }
.pv-act.del:hover { color: var(--bad); }
.pv-act:disabled { opacity: .5; cursor: wait; }
.pv-l2 { font-family: var(--mono); font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-l3 { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pv-l3 b { color: var(--fg); font-weight: 600; }
.pv-l3.none { color: var(--faint); }
.pv-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.pv-chip {
  font-family: var(--mono); font-size: 10.5px; line-height: 1.3; padding: 0 7px; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted); background: transparent; cursor: pointer;
}
.pv-chip.rule { border-color: color-mix(in srgb, var(--scan) 45%, transparent); color: var(--scan); }
.pv-chip.more { border-style: dashed; cursor: default; }
.pv-rot-rows { margin-top: 6px; border-top: 1px solid var(--border); }
.pv-rot-row {
  display: grid; grid-template-columns: minmax(90px, 160px) minmax(0, 1fr) 60px 90px auto auto;
  gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--rule-soft, var(--border));
  font-size: 12.5px;
}
.pv-rot-row .mono { font-family: var(--mono); font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-rot-row .used { color: var(--run); font-family: var(--mono); font-size: 11.5px; }
.pv-rules { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); overflow: hidden; }
.pv-rule {
  display: grid; grid-template-columns: minmax(140px, 220px) minmax(220px, 1fr) minmax(180px, 260px);
  gap: 12px; align-items: center; padding: 8px 14px; border-top: 1px solid var(--border); min-height: 40px;
}
.pv-rule:first-child { border-top: 0; }
.pv-rule:hover { background: var(--card-2, var(--sunk, transparent)); }
.pv-rule.head { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); background: var(--sunk, transparent); }
.pv-rule.head:hover { background: var(--sunk, transparent); }
.pv-rule .co { font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-rule .co.rest { font-weight: 500; color: var(--muted); }
.pv-rule .n { font-variant-numeric: tabular-nums; color: var(--muted); font-size: 12.5px; }
.pv-rule .n b { color: var(--fg); font-weight: 600; }
.pv-rule .n .cap { color: var(--run); font-family: var(--mono); font-size: 11.5px; }
.pv-sel {
  width: 100%; max-width: 320px; font: inherit; font-size: 12.5px; padding: 5px 26px 5px 9px;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg); color: var(--fg);
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 10px) 50%; background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
}
.pv-sel:focus { outline: none; border-color: var(--run); }
.pv-sel:disabled { opacity: .5; cursor: wait; }
.pv-rule.add { background: var(--sunk, transparent); gap: 8px; grid-template-columns: minmax(140px, 220px) auto minmax(180px, 260px) auto; }
.pv-rule.add input { font: inherit; font-size: 12.5px; padding: 5px 9px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg); color: var(--fg); width: 100%; }
.pv-rule.add .lbl { font-size: 12px; color: var(--muted); white-space: nowrap; }
.pv-capin { width: 56px; font: inherit; font-size: 12px; padding: 3px 6px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg); color: var(--fg); }
@media (max-width: 720px) {
  .pv-grid { grid-template-columns: 1fr; }
  .pv-rule, .pv-rule.add { grid-template-columns: 1fr; gap: 6px; }
  .pv-rot-row { grid-template-columns: 1fr 1fr; }
}

.pv-act, .pv-chip { height: auto; min-height: 0; }

.jr-prof {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px;
  font-size: 10.5px; line-height: 1.5; vertical-align: 1px; white-space: nowrap;
  color: var(--scan); border: 1px solid color-mix(in srgb, var(--scan) 40%, transparent);
}
.jr-prof.def { color: var(--muted); border-color: var(--border); }
.jr-prof.rot { color: var(--run); border-color: color-mix(in srgb, var(--run) 45%, transparent); }

.jr-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.jr-title-t { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jr-title .jr-prof { flex: none; margin-left: 0; }
.t-role { white-space: nowrap; }
.t-role-t { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.t-role:has(.jr-prof) .t-role-t { max-width: 100%; display: block; }
.t-role .jr-prof { vertical-align: middle; max-width: 100%; margin: 3px 0 0;
                  overflow: hidden; text-overflow: ellipsis; display: inline-block; }

.jr-prof.again { color: var(--info); border-color: color-mix(in srgb, var(--info) 45%, transparent); }
.jr-prof.again.def { color: var(--muted); border-color: var(--border); }

/* Preferences are a workspace: stable position, explicit close, room to edit. */
.preferences-drawer.copicker {
  position: fixed; inset: 16px 16px 16px auto;
  width: min(880px, calc(100vw - 32px)); max-height: none;
  z-index: 1000; border: 1px solid var(--border-2); border-radius: 16px;
  display: flex; flex-direction: column; overflow: auto;
  background: var(--panel-solid); box-shadow: 0 0 0 100vmax #0008, var(--shadow-2);
  isolation: isolate;
}
.preferences-drawer[hidden] { display: none !important; }
.preferences-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 24px 16px; flex: none; }
.preferences-heading small { color: var(--scan); font-size: 10px; letter-spacing: .12em; }
.preferences-heading h2 { font-size: 22px; font-weight: 600; letter-spacing: -.025em; margin: 6px 0 0; color: var(--fg); }
.preference-scope { display: flex; align-items: center; gap: 8px; padding: 0 24px 18px; border-bottom: 1px solid var(--border); flex: none; }
.preference-scope .active { color: var(--scan); border-color: var(--scan); background: color-mix(in srgb, var(--scan) 9%, transparent); }
.preferences-explain { padding: 0 24px; color: var(--muted); line-height: 1.6; }
.preferences-drawer .cp-cols { flex: 1 0 410px; min-height: 410px; }
.preferences-drawer .cp-col-list { flex: 0 0 32%; }
.preferences-drawer .cp-list { max-height: 430px; }
.preferences-drawer .cp-dt-h { padding: 18px; }
.preferences-drawer .cp-dt-body { padding: 8px 20px 20px 12px; gap: 16px; max-height: none; overflow: visible; }
.preferences-drawer .cp-dt-foot { padding: 16px 20px; border-top: 1px solid var(--border); background: var(--panel-solid); }
.preferences-drawer .cp-dt-in, .preferences-drawer .cp-search { font-size: 13px; min-height: 38px; }
.preferences-drawer .cp-foot, .preferences-drawer .cp-prof, .preferences-drawer .cp-window { flex: none; }
.preferences-drawer .cp-add { flex: none; }
.preferences-drawer.prefpicker { width: min(640px, calc(100vw - 32px)); }
.preferences-drawer .pf-body { padding: 8px 24px 24px; overflow: visible; max-height: none; }
.preferences-drawer .cp-role-foot { position: sticky; bottom: 0; margin-top: auto; padding: 18px 24px; background: var(--panel-solid); border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 12px; }
.preferences-drawer .cp-role-foot #pf-state { flex: 1 0 100%; }
body:has(.preferences-drawer:not([hidden])) { overflow: hidden; }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 2px solid var(--scan); outline-offset: 3px; }
.act-review { border: 1px solid var(--border-2); background: var(--card); color: var(--fg); }
.action-status { padding: 10px 14px; margin: 10px 0; background: color-mix(in srgb, var(--scan) 8%, var(--panel)); border: 1px solid var(--border-2); border-radius: 8px; color: var(--fg); font-size: 13px; }
.action-status[aria-busy="true"]::before { content: "●"; color: var(--scan); margin-right: 8px; }
.setup-summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0; font-size: 11px; color: var(--muted); }
.setup-summary #btn-followups { margin-left: auto; color: var(--run); }
.setup-health { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.setup-health[hidden] { display: none; }
.health-item { display: flex; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); font-size: 12px; }
.health-item p { color: var(--muted); line-height: 1.6; margin: 6px 0 0; }
.health-state { color: var(--run); }.health-state.ready { color: var(--scan); }
.scan-stages { flex: 1 0 100%; display: grid; gap: 6px; max-height: 150px; overflow: auto; }
.scan-stage { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 12px; }
.scan-stage button { margin-left: auto; }
.sr-counts { font-size: 11px; color: var(--muted); }
.sr-row { flex-wrap: wrap; }
.tracker-filters { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin: 16px 0; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.tracker-filters label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }
.tracker-filters input, .tracker-filters select { min-height: 36px; width: auto; color-scheme: dark; }
[data-theme="light"] .tracker-filters input, [data-theme="light"] .tracker-filters select { color-scheme: light; }
.tracker-filters .tracker-due-toggle { display: flex; align-items: center; align-self: center; }
.tracker-filters .tracker-due-toggle input { min-height: 0; }
.tracker-count { margin-left: auto; align-self: center; color: var(--muted); font-size: 12px; }
.tracker-outcome, .tracker-followup { display: block; font-size: 11px; color: var(--muted); margin-top: 5px; }
.tracker-followup.due { color: var(--run); }
.tracker-hint { color: var(--muted); font-size: 12px; line-height: 1.6; }
.tracker-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0; }
.tracker-editor .cp-search { width: 100%; min-height: 38px; }
.tracker-actions { display: flex; gap: 12px; align-items: center; margin-top: 14px; }
.tracker-actions button { margin-left: auto; }
#tracker-state { font-size: 12px; color: var(--muted); }
@media (max-width: 600px) {
  .preferences-drawer.copicker { inset: 0; width: 100%; border-radius: 0; }
  .preferences-drawer.prefpicker { width: 100%; }
  .preferences-heading { padding: 20px 16px 14px; }
  .preferences-heading h2 { font-size: 20px; }
  .preference-scope { padding: 0 16px 14px; }
  .preferences-drawer .cp-cols { flex-direction: column; flex-basis: auto; }
  .preferences-drawer .cp-col-list { flex: none; border-right: 0; border-bottom: 1px solid var(--border); }
  .preferences-drawer .cp-list { max-height: 170px; }
  .preferences-drawer .cp-col-detail { flex: none; }
  .preferences-drawer .cp-dt-body { max-height: none; }
  .preferences-drawer .cp-one { flex-wrap: wrap; }
  .setup-health, .tracker-fields { grid-template-columns: 1fr; }
  .tracker-filters { gap: 10px; padding: 12px; }
  .tracker-filters label { flex: 1 1 130px; }
  .tracker-filters input, .tracker-filters select { min-width: 0; width: 100%; }
  .tracker-filters .tracker-due-toggle input { width: auto; }
}
/* Keep the form itself scrollable while the title and Save controls stay put. */
.preferences-drawer .cp-cols { flex: 1 1 auto; min-height: 0; }
.preferences-drawer .cp-dt-body { overflow-y: auto; min-height: 0; }
.preferences-drawer .cp-dt-h, .preferences-drawer .cp-dt-foot { flex: none; }
.preferences-drawer .pf-body { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.preferences-heading .iconbtn { display: inline-flex; flex: 0 0 34px; align-items: center; justify-content: center; }
@media (max-width: 600px) {
  .preferences-drawer .cp-cols { flex: 1 0 auto; }
  .preferences-drawer .cp-dt-body { overflow-y: visible; }
  .preferences-drawer .cp-dt-foot { position: sticky; bottom: 0; z-index: 2; }
  .preferences-drawer .pf-row { flex-wrap: wrap; }
  .preferences-drawer .pf-row .pf-f:first-child { flex-basis: 100%; }
}
.preferences-heading > div { min-width: 0; }
.preferences-heading h2 { overflow-wrap: anywhere; }

/* Compact settings keep the work area visible without stretching short forms. */
.preferences-drawer.copicker {
  inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: min(800px, calc(100vw - 40px));
  height: min(720px, calc(100dvh - 40px));
  border-radius: 12px;
}
.preferences-drawer.prefpicker { width: min(560px, calc(100vw - 40px)); height: min(690px, calc(100dvh - 40px)); }
.preferences-heading { padding: 16px 18px 12px; gap: 10px; }
.preferences-heading h2 { font-size: 19px; margin-top: 4px; }
.preferences-heading small { font-size: 9px; }
.preference-scope { padding: 0 18px 12px; }
.preferences-explain { padding: 0 18px; font-size: 12px; margin: 12px 0; }
.preferences-drawer .cp-dt-h { padding: 12px 14px; }
.preferences-drawer .cp-dt-body { gap: 10px; padding: 4px 14px 12px 8px; }
.preferences-drawer .cp-dt-in, .preferences-drawer .cp-search { min-height: 34px; font-size: 12px; }
.preferences-drawer .cp-dt-foot { padding: 10px 14px; }
.preferences-drawer .pf-body { padding: 2px 18px 14px; gap: 10px; }
.preferences-drawer .cp-role-foot { padding: 12px 18px; gap: 8px; }
.preferences-drawer .cp-role-foot #pf-state { flex: 1 1 100%; }
@media (max-width: 600px) {
  .preferences-drawer.copicker { inset: 0; transform: none; width: 100%; height: 100dvh; border-radius: 0; }
}

.deck-review { display: inline; padding: 0; border: 0; background: none; color: var(--fg); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.health-panel { position: fixed; z-index: 1100; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(540px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; background: var(--panel-solid); border: 1px solid var(--border-2); border-radius: 12px; padding: 18px; box-shadow: 0 0 0 100vmax #0008; }
.health-panel[hidden] { display: none; }
.health-panel .preferences-heading { padding: 0 0 12px; }
.health-panel .health-item { margin-top: 10px; padding: 12px; }

/* Keep the original deck density; align review controls below its measured edge. */
:root { --deck-height: 170px; }
.board.activity-collapsed { grid-template-columns: minmax(0, 1fr); }
.board.activity-collapsed .feedpanel { display: none; }
.work:has(.ps-review) { overflow: clip; }
.ps-review { overflow: visible; }
.review-stage { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; padding: 0 12px; }
.review-stage .locbar { margin: 0; padding: 0; border: 0; }
.review-filters { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px; }
.review-sticky { position: sticky; top: var(--deck-height); z-index: 12; background: var(--panel-solid); border-bottom: 1px solid var(--border-2); box-shadow: 0 2px 4px #0002; }
.review-actions { display: flex; align-items: center; gap: 6px; padding: 8px 12px; flex-wrap: wrap; }
.review-count { margin-right: auto; color: var(--fg); font-weight: 600; font-size: 12px; }
.review-columns, .un-row.review-row { display: grid; grid-template-columns: 18px minmax(150px, 1fr) minmax(90px, 140px) 45px 105px 64px; gap: 10px; align-items: center; padding: 9px 12px; }
.review-columns { padding-top: 2px; padding-bottom: 7px; font-size: 10px; color: var(--muted); }
.review-row .un-sel { opacity: 1; width: 16px; height: 16px; }
.review-row { border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent); }
.review-row:last-child { border-bottom: 0; }
.review-title { padding: 0; border: 0; background: none; color: var(--fg); text-align: left; font: inherit; line-height: 1.5; cursor: pointer; overflow-wrap: anywhere; }
.review-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.review-role { min-width: 0; }
.review-role .kc-prof { margin: 3px 0 0; font-size: 11px; color: var(--muted); }
.review-later { display: block; color: var(--muted); font-size: 11px; margin-top: 3px; }
.review-location { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; line-height: 1.4; }
.review-score { color: var(--fg); font-size: 12px; font-variant-numeric: tabular-nums; }
.review-date { color: var(--muted); font-size: 11px; }
.review-preview { margin: 0; padding: 5px 7px; }
.review-preview:disabled { opacity: .55; }
.review-empty { padding: 16px; font-size: 13px; color: var(--muted); }
.review-notice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 12px 8px; padding: 10px; background: var(--card-2); border-radius: 6px; font-size: 12px; color: var(--fg); }
.review-notice details { flex: 1 1 100%; color: var(--muted); }
.review-notice ul { padding-left: 20px; }
#review-queue, .review-stage { scroll-margin-top: calc(var(--deck-height) + 12px); }
.prep-progress { padding: 6px 0; font-size: 12px; }
.prep-progress[hidden] { display: none; }
.prep-receipt { display: flex; gap: 8px 14px; align-items: center; flex-wrap: wrap; }
.prep-stage { color: var(--muted); max-width: 45%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.prep-receipt progress { width: 90px; height: 5px; accent-color: var(--scan); }

/* Scope controls and form sections share a clear hierarchy across both editors. */
.preference-scope { display: flex; gap: 4px; padding: 4px; margin: 0 18px; border: 1px solid var(--border); border-radius: 8px; background: var(--card-2); flex: none; }
.preference-scope .chip { flex: 1; padding: 8px 10px; border: 0; border-radius: 5px; text-align: center; color: var(--muted); }
.preference-scope .chip.active { color: var(--fg); background: var(--panel-solid); box-shadow: 0 1px 3px #0003; }
.preferences-explain { color: var(--muted); line-height: 1.5; margin: 8px 0 12px; flex: none; }
.pref-section { border: 0; border-top: 1px solid var(--border); padding: 12px 0 4px; margin: 0 0 14px; display: grid; grid-template-columns: 1fr; gap: 10px; min-width: 0; }
.pref-section legend, .pref-section-title { font-size: 12px; font-weight: 600; color: var(--fg); padding-right: 8px; }
.pref-section-title { margin: 8px 0 0; }
.preferences-drawer .cp-dt-body { display: block; padding: 4px 16px 12px; }
.preferences-drawer .cp-dt-badge { font-size: 10px; }
.preferences-drawer .cp-dt-foot { gap: 8px; }
.preferences-drawer .cp-dt-foot .cp-dt-hint { flex: 1 1 100%; }
.settings-menu-title { font-size: 14px; color: var(--fg); font-weight: 600; padding: 10px 12px 4px; }
.settings-menu-group { padding: 12px 12px 5px; font-size: 10px; color: var(--muted); font-weight: 600; }
#menu { min-width: 275px; max-height: calc(100dvh - 80px); overflow-y: auto; }

@media (max-width: 700px) {
  .review-actions { gap: 6px; }
  .review-count { flex: 1 1 100%; }
  .review-columns { display: none; }
  .un-row.review-row { grid-template-columns: 18px minmax(0, 1fr) auto; gap: 6px 10px; }
  .review-row .un-sel { grid-column: 1; grid-row: 1; align-self: start; margin-top: 4px; }
  .review-role { grid-column: 2 / 4; }
  .review-location { grid-column: 2; }
  .review-score { grid-column: 3; grid-row: 2; font-size: 11px; }
  .review-date { grid-column: 2; }
  .review-preview { grid-column: 3; grid-row: 3; }
  .prep-stage { max-width: 100%; }
  .preference-scope { margin: 0 14px; }
}

/* Long mobile company forms retain their identity and an exit while scrolling. */
.preferences-drawer .preferences-heading { position: sticky; top: 0; z-index: 6; background: var(--panel-solid); }
.preferences-drawer .cp-dt-h { position: sticky; top: 0; z-index: 5; background: var(--panel-solid); }
@media (max-width: 600px) {
  .preferences-drawer .cp-dt-h { top: 76px; }
}

/* Keep status beside each role without adding another wide table column. */
.review-status { display: block; margin-top: 3px; font-size: 11px; color: var(--muted); }
.review-status.waiting { color: var(--run); }
.review-status.applying { color: var(--scan); }
.review-stop { margin-left: auto; }
.review-row:has(.un-sel:disabled) .un-sel { cursor: default; }

.jr-read-note { display: block; margin-top: 3px; font-size: 11px; color: var(--run); }

.review-sort { display: flex; align-items: center; gap: 8px; padding: 0 14px 8px; color: var(--muted); font-size: 12px; }
.review-sort select { min-width: 0; max-width: 100%; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--card); color: var(--fg); padding: 5px 8px; font: inherit; }
.review-day { margin: 0; padding: 8px 12px; border-top: 1px solid var(--border); color: var(--fg); font-size: 12px; font-weight: 600; }

/* Keep the job workflow visible; group secondary views and controls. */
#find-jobs-views { display:flex; gap:8px; padding:10px 14px; border-bottom:1px solid var(--border); }
#find-jobs-views[hidden] { display:none; }
#find-jobs-views .chip.active { background:var(--fg); color:var(--bg); border-color:var(--fg); font-weight:600; }
/* Cosign has its own composer; the pipeline's company filter and search do nothing there. */
.cosign-page #co-filter, .cosign-page #search, .cosign-page #refresh-btn { display:none; }
#tabs { overflow:visible; flex-wrap:wrap; align-items:center; }
.nav-more { position:relative; }
.nav-more > summary { list-style:none; display:flex; gap:8px; align-items:center; cursor:pointer; padding:7px 12px; border:1px solid transparent; border-radius:var(--r-md); font-size:13px; color:var(--muted); }
.nav-more > summary::-webkit-details-marker { display:none; }
.nav-more.active > summary, .nav-more[open] > summary { background:var(--card-2); border-color:var(--border); color:var(--fg); }
.nav-more-panel { position:absolute; top:calc(100% + 8px); left:0; z-index:65; width:280px; max-width:calc(100vw - 40px); max-height:70vh; overflow:auto; padding:8px; background:var(--panel); border:1px solid var(--border-2); border-radius:var(--r-md); box-shadow:0 12px 32px #0003; }
.nav-more-panel > .tab, .nav-more-panel > .skipbtn, .nav-more-panel .queuebtn { display:flex; width:100%; justify-content:flex-start; text-align:left; padding:9px 10px; }
.nav-more-panel > [hidden] { display:none; }
.nav-more-panel .tab-n, .nav-more-panel .skip-count { margin-left:auto; }
.nav-group-label { display:block; padding:9px 10px 5px; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; }
.nav-more-panel .qmgr { display:block; width:100%; }
#qpicker { position:fixed; top:80px; right:24px; left:auto; width:min(420px, calc(100vw - 32px)); max-height:calc(100dvh - 104px); z-index:85; }
#qpicker > .cp-role-h { display:flex; align-items:center; justify-content:space-between; }
@media(max-width:600px) { #qpicker { top:24px; right:16px; max-height:calc(100dvh - 48px); } }
#profmgr[hidden] { display:none; }
@media(max-width:600px) {
  #tabs { gap:2px; width:100%; }
  #tabs > .tab, .nav-more > summary { padding:7px 8px; font-size:12px; }
  .nav-more-panel { position:fixed; left:16px; right:16px; top:auto; width:auto; margin-top:8px; }
}
/* Shared instructions stay outside the polling dashboard and preserve drafts. */
.steering-dialog { width:100%; box-sizing:border-box; margin:14px 0; padding:0; border:1px solid var(--border-2); border-radius:var(--r-md); background:var(--panel-solid, var(--panel)); color:var(--fg); }
.steering-dialog:not([hidden]) { display:flex; flex-direction:column; }
.steering-dialog[hidden] { display:none; }
.steering-page #pane, .steering-page .workbar-right { display:none; }
.steering-dialog header, .steering-dialog footer { display:flex; align-items:center; gap:12px; padding:18px 22px; flex-shrink:0; }
.steering-dialog header { justify-content:space-between; border-bottom:1px solid var(--border); }
.steering-dialog h2 { font-size:19px; margin:0 0 6px; }
.steering-dialog p { margin:0; font-size:12px; color:var(--muted); line-height:1.6; }
.steering-body { padding:20px 22px; overflow:auto; }
.steering-body > label { display:block; font-size:12px; margin-bottom:8px; }
.steering-import { display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:18px 0; font-size:11px; color:var(--muted); }
.steering-import label { position:relative; overflow:hidden; cursor:pointer; }
.steering-file { position:absolute; inset:0; width:100%; opacity:0; cursor:pointer; }
.steering-import label:focus-within { outline:2px solid var(--scan); }
#steering-content { width:100%; min-height:260px; box-sizing:border-box; resize:vertical; padding:14px; color:var(--fg); background:var(--card); border:1px solid var(--border-2); border-radius:var(--r-sm); font:13px/1.7 monospace; }
#steering-content:focus { outline:2px solid var(--scan); outline-offset:2px; }
.steering-meta { display:flex; justify-content:space-between; gap:12px; font-size:10px; color:var(--muted); margin-top:10px; }
.steering-dialog footer { border-top:1px solid var(--border); flex-wrap:wrap; }
.steering-status { flex:1; min-width:150px; font-size:12px; line-height:1.5; color:var(--muted); }
.steering-save { background:var(--scan); color:var(--scan-ink); border-color:var(--scan); }
@media(max-width:600px) { .steering-dialog header, .steering-dialog footer, .steering-body { padding:14px; } .steering-status { flex-basis:100%; } .steering-meta { flex-wrap:wrap; } }

/* ─── Cosign polish ──────────────────────────────────────────────────────────
   Quieter surfaces in the Cosign board's style. Amber keeps its meaning (needs
   attention), so the Needs you section and its cards use it rather than green. */

/* Status breakdown: one slim bar, the counts as a quiet legend under it. */
.deck-breakdown { display: block; padding: 4px 0 10px; }
.bd-bar { display: flex; gap: 2px; height: 6px; margin-bottom: 7px; border-radius: 999px; overflow: hidden; background: var(--card-2); }
.bd-seg { display: block; flex: 0 1 0; min-width: 3px; height: 100%; background: var(--faint);
  transition: flex-grow .6s cubic-bezier(.16, 1, .3, 1); }
.bd-seg.s-ok { background: var(--scan); }
.bd-seg.s-warn, .bd-seg.s-live { background: var(--run); }
.bd-seg.s-bad { background: var(--bad); }
.bd-seg.s-found { background: var(--info); }
.bd-seg.s-work { background: color-mix(in srgb, var(--scan) 55%, var(--faint)); }
.bd-seg.s-dim { background: var(--border-2); }
.bd-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--muted); }

/* The how-to line recedes once it has been read a few times. */
.deck-help { font-size: 12px; color: var(--faint); }
.deck-help b { color: var(--muted); font-weight: 600; }

/* Link chips as icons. */
.rowlk { display: inline-flex !important; align-items: center; justify-content: center; width: 26px; height: 24px; padding: 0;
  border-radius: 7px; font-family: inherit; text-transform: none; letter-spacing: 0; vertical-align: middle;
  transition: color .15s cubic-bezier(.2, 0, 0, 1), border-color .15s cubic-bezier(.2, 0, 0, 1), background .15s cubic-bezier(.2, 0, 0, 1), transform .12s cubic-bezier(.2, 0, 0, 1); }
.rowlk:hover { background: var(--card-2); }
.rowlk:active { transform: scale(.94); }
.rowlk.off { opacity: .22; }

/* Needs you: white cards on the page, an amber edge for "waiting on you". */
.ps-needs.has { border-color: color-mix(in srgb, var(--run) 40%, var(--border)); }
.ps-needs.has > .ps-head { background: color-mix(in srgb, var(--run) 7%, var(--card)); }
.ncard { background: var(--card); border-left-color: var(--run); border-radius: 10px; padding: 12px 14px; gap: 9px;
  transition: border-color .15s cubic-bezier(.2, 0, 0, 1), transform .18s cubic-bezier(.16, 1, .3, 1), box-shadow .2s cubic-bezier(.2, 0, 0, 1); }
.ncard:hover { border-left-color: var(--run); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.ncard:active { transform: translateY(0) scale(.99); }
.nc-gate { color: color-mix(in srgb, var(--run) 75%, var(--muted)); border-color: color-mix(in srgb, var(--run) 35%, var(--border)); }
@media (prefers-reduced-motion: reduce) { .bd-seg, .ncard, .rowlk { transition: none; } }