/* ============================================================
   Candidate screening — demo styling
   Palette and type follow the Velzora brand: violet #7C3AED on a
   deep violet-black ground, Inter Tight for interface, Instrument
   Serif italic for the one display moment, JetBrains Mono for
   anything numeric (scores, ids, model names) so figures line up
   in columns and stay scannable.
   ============================================================ */

:root {
  --bg:         #0B0916;
  --surface:    #14111F;
  --surface-2:  #1B1729;
  --raised:     #221D33;
  --line:       rgba(167, 139, 250, 0.14);
  --line-soft:  rgba(167, 139, 250, 0.07);

  --violet:     #7C3AED;
  --violet-lt:  #A78BFA;
  --violet-pale:#C4B5FD;
  --cyan:       #22D3EE;
  --green:      #22C55E;
  --amber:      #F59E0B;

  --text:       #EDEAF6;
  --text-2:     #B4ADC9;
  --muted:      #8B849F;

  --rail-w: 296px;
  --topbar-h: 60px;
  --filters-h: 98px;   /* replaced at runtime by measureFilters() */

  --sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, sans-serif;
  --serif: 'Instrument Serif', Georgia, serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* A single violet bloom behind the whole page rather than a gradient
   wash on each panel — keeps the surfaces flat and readable. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(760px 420px at 18% -8%, rgba(124, 58, 237, 0.20), transparent 65%),
    radial-gradient(620px 400px at 92% 4%, rgba(34, 211, 238, 0.07), transparent 60%);
  z-index: 0;
}

:focus-visible {
  outline: 2px solid var(--violet-lt);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------------- topbar ---------------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--topbar-h);
  border-bottom: 1px solid var(--line);
  background: rgba(11, 9, 22, 0.86);
  backdrop-filter: blur(12px);
}

.topbar-in {
  height: 100%;
  padding: 0 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
  text-decoration: none;
  color: var(--text);
}

.brand img {
  height: 26px;
  width: auto;
  display: block;
}

.brand-div {
  width: 1px;
  height: 20px;
  background: var(--line);
}

.brand-name {
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: -0.01em;
}

.topbar-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

.topbar-meta b {
  color: var(--violet-pale);
  font-weight: 500;
}

/* ---------------- shell ---------------- */

.shell {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  min-height: calc(100vh - var(--topbar-h));
}

/* ---------------- candidate rail ---------------- */

.rail {
  border-right: 1px solid var(--line);
  padding: 22px 0 40px;
  position: sticky;
  top: calc(var(--topbar-h) + var(--filters-h));
  height: calc(100vh - var(--topbar-h) - var(--filters-h));
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.rail-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 20px 14px;
}

.rail-head h2 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-2);
}

.rail-count {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

.clist {
  list-style: none;
  margin: 0;
  padding: 4px 8px 10px;
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  overscroll-behavior: contain;   /* stop the page scrolling when the list ends */
  scrollbar-width: thin;
  scrollbar-color: rgba(167, 139, 250, 0.28) transparent;
}

.clist::-webkit-scrollbar { width: 10px; }
.clist::-webkit-scrollbar-track { background: transparent; }

.clist::-webkit-scrollbar-thumb {
  background: rgba(167, 139, 250, 0.22);
  border-radius: 6px;
  /* inset with a transparent border so the bar reads as a thin line rather
     than a chunky column against the rail edge */
  border: 3px solid transparent;
  background-clip: content-box;
}

.clist::-webkit-scrollbar-thumb:hover { background: rgba(167, 139, 250, 0.4); background-clip: content-box; }

.clist-loading {
  padding: 10px 12px;
  color: var(--muted);
  font-size: 13px;
}

.cand {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-radius: 9px;
  padding: 11px 12px;
  margin-bottom: 2px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 3px 10px;
  align-items: center;
  transition: background 0.13s ease;
}

.cand:hover { background: var(--surface); }

.cand[aria-current='true'] {
  background: var(--surface-2);
  box-shadow: inset 2px 0 0 var(--violet);
}

.cand-name {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.005em;
}

.cand-id {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  justify-self: end;
}

.cand-role {
  grid-column: 1;
  font-size: 12.5px;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* score chip once a run has finished, so you can see the rail fill in */
.cand-score {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--raised);
}

.cand-score.hi   { color: var(--green);     background: rgba(34, 197, 94, 0.11); }
.cand-score.mid  { color: var(--violet-pale); background: rgba(124, 58, 237, 0.16); }
.cand-score.lo   { color: var(--muted); }
.cand-score.err  { color: var(--amber);     background: rgba(245, 158, 11, 0.11); }

/* ---------------- detail pane ---------------- */

.detail {
  padding: 30px 34px 90px;
  max-width: 940px;
}

.empty {
  padding: 90px 0 0;
  max-width: 430px;
}

.empty-mark {
  color: var(--violet);
  width: 40px;
  margin-bottom: 20px;
}

.empty-mark svg { width: 100%; display: block; }

.empty h3 {
  margin: 0 0 10px;
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.empty p {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
}

/* ---- candidate header ---- */

.chead { margin-bottom: 26px; }

.chead h1 {
  margin: 0 0 6px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.032em;
}

/* the one display moment on the page */
.chead h1 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

.chead-sub {
  color: var(--muted);
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: center;
}

.chead-sub .mono {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--violet-pale);
  background: rgba(124, 58, 237, 0.13);
  padding: 2px 7px;
  border-radius: 5px;
}

.facts {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  overflow: hidden;
}

.fact {
  background: var(--surface);
  padding: 11px 14px;
}

.fact dt {
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 3px;
}

.fact dd {
  margin: 0;
  font-size: 13.5px;
  font-weight: 500;
}

/* ---- run button ---- */

.runbar {
  margin: 24px 0 6px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.btn-run {
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  background: linear-gradient(180deg, #8B4CF0, var(--violet));
  border: 0;
  border-radius: 9px;
  padding: 11px 20px;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,0.14) inset, 0 6px 18px rgba(124,58,237,0.28);
  transition: filter 0.14s ease;
}

.btn-run:hover:not(:disabled) { filter: brightness(1.1); }
.btn-run:disabled { opacity: 0.5; cursor: default; box-shadow: none; }

.runbar-note {
  font-size: 12.5px;
  color: var(--muted);
}

/* ---- stage stream ---- */

.stages {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.stage {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--surface);
  padding: 18px 20px;
}

.stage-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.stage-h h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.stage-h .tag {
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--raised);
  color: var(--text-2);
}

.stage-h .tag.warn  { background: rgba(245,158,11,0.13); color: var(--amber); }
.stage-h .tag.ok    { background: rgba(34,197,94,0.12);  color: var(--green); }

/* ---- the score track: the centrepiece ----
   Two model scores plotted on one 0-100 line so the distance between
   them is the thing you see first. A number pair in a table hides
   exactly the fact this whole pipeline exists to surface. */

.track {
  padding: 26px 4px 6px;
}

.track-line {
  position: relative;
  height: 3px;
  border-radius: 2px;
  background: var(--raised);
}

.track-gap {
  position: absolute;
  top: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--green);
  transition: left 0.5s cubic-bezier(.4,0,.2,1), width 0.5s cubic-bezier(.4,0,.2,1);
}

.track-gap.over { background: var(--amber); }

.pin {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: left 0.5s cubic-bezier(.4,0,.2,1);
}

.pin-dot {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2.5px solid var(--bg);
  background: var(--violet-lt);
}

.pin.b .pin-dot { background: var(--cyan); }

.pin-label {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
}

.pin.a .pin-label { bottom: 15px; }
.pin.b .pin-label { top: 15px; }

.pin-label b {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.track-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 34px;
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(139, 132, 159, 0.6);
}

.gap-read {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
  color: var(--text-2);
}

.gap-read b {
  font-family: var(--mono);
  font-weight: 700;
  color: var(--text);
}

.gap-read.over b { color: var(--amber); }
.gap-read.under b { color: var(--green); }

/* ---- per-model analysis ---- */

.reads {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.read {
  background: var(--surface-2);
  border-radius: 10px;
  padding: 14px 15px;
  border-left: 2px solid var(--violet-lt);
}

.read.b { border-left-color: var(--cyan); }

.read-h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.read-model {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
}

.read-score {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
}

.read-move {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  margin-left: 6px;
}

.read p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
}

/* ---- dispute ---- */

.stage.dispute {
  border-color: rgba(245, 158, 11, 0.22);
  background: linear-gradient(180deg, rgba(245,158,11,0.045), transparent 60%), var(--surface);
}

.brief {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-2);
  margin: 0 0 14px;
}

.qlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.qlist li {
  background: var(--surface-2);
  border-radius: 9px;
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-2);
}

.qlist .qtopic {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--amber);
  margin-bottom: 3px;
}

/* ---- working indicator ---- */

.working {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 20px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  font-size: 13.5px;
  color: var(--text-2);
}

.spin {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  border: 2px solid rgba(167,139,250,0.25);
  border-top-color: var(--violet-lt);
  animation: spin 0.75s linear infinite;
  flex: none;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ---- final result ---- */

.stage.result {
  border-color: rgba(124, 58, 237, 0.3);
  background: linear-gradient(180deg, rgba(124,58,237,0.07), transparent 55%), var(--surface);
}

.verdict {
  display: flex;
  gap: 22px;
  align-items: flex-start;
}

.verdict-score {
  flex: none;
  text-align: center;
  min-width: 92px;
  padding: 14px 8px 12px;
  background: var(--surface-2);
  border-radius: 11px;
}

.verdict-score .n {
  display: block;
  font-family: var(--mono);
  font-size: 38px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
}

.verdict-score .n.hi  { color: var(--green); }
.verdict-score .n.mid { color: var(--violet-pale); }
.verdict-score .n.lo  { color: var(--text-2); }
.verdict-score .n.err { color: var(--amber); font-size: 26px; }

.verdict-score .of {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 5px;
  display: block;
}

.verdict-body { flex: 1; min-width: 0; }

.verdict-summary {
  margin: 0 0 12px;
  font-size: 16.5px;
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.012em;
}

.verdict-analysis {
  margin: 0;
  font-size: 14px;
  line-height: 1.68;
  color: var(--text-2);
  max-width: 66ch;
}

.verdict-path {
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---- source documents ---- */

.docs { margin-top: 26px; }

.doc {
  border: 1px solid var(--line-soft);
  border-radius: 11px;
  background: var(--surface);
  margin-bottom: 10px;
  overflow: hidden;
}

.doc > summary {
  padding: 13px 18px;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 9px;
}

.doc > summary::-webkit-details-marker { display: none; }

.doc > summary::before {
  content: '';
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(-45deg);
  transition: transform 0.16s ease;
}

.doc[open] > summary::before { transform: rotate(45deg); }

.doc-body {
  padding: 4px 18px 18px;
  border-top: 1px solid var(--line-soft);
}

/* ---- rendered résumé ----
   Set in the interface face rather than mono: this is prose a person reads,
   not code. The left rule and the indent give the work history a spine so
   roles and their bullets read as groups. */

.cv { margin-top: 16px; }

.cv-name {
  margin: 0 0 2px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--text);
}

.cv-contact {
  margin: 0 0 4px;
  font-size: 12.5px;
  color: var(--muted);
}

.cv-section {
  margin: 24px 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--violet-lt);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line-soft);
}

.cv-role {
  margin: 16px 0 1px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.008em;
}

.cv-meta {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
}

.cv-para {
  margin: 0 0 9px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-2);
  max-width: 72ch;
}

.cv-bullets {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--line);
}

.cv-bullets li {
  position: relative;
  margin: 0;
  padding: 3px 0 3px 18px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 72ch;
}

.cv-bullets li::before {
  content: '';
  position: absolute;
  left: -2.5px;
  top: 13px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--violet);
}

/* job description reads as prose too */
.jd-text {
  margin: 16px 0 0;
  font-size: 13.5px;
  line-height: 1.68;
  color: var(--text-2);
  max-width: 72ch;
}

.reqs { margin: 14px 0 0; padding: 0; list-style: none; font-size: 13.5px; }
.reqs li { padding: 5px 0 5px 18px; position: relative; color: var(--text-2); }
.reqs li::before {
  content: '';
  position: absolute;
  left: 2px; top: 12px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--violet);
}
.reqs li.hard::before { background: var(--amber); }

.reqs-h {
  font-size: 12px;
  color: var(--muted);
  margin: 16px 0 0;
}

/* ---- failure ---- */

.stage.failed { border-color: rgba(245,158,11,0.3); }
.stage.failed .brief { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .rail {
    position: static;
    height: auto;
    max-height: 42vh;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    max-height: 42vh;
  }
  .detail { padding: 24px 18px 70px; }
  .chead h1 { font-size: 24px; }
  .verdict { flex-direction: column; gap: 16px; }
  .verdict-score { min-width: 0; width: 100%; }
}

/* secondary action beside Run */
.btn-rerun {
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 11px 16px;
  cursor: pointer;
  transition: color 0.14s ease, border-color 0.14s ease;
}
.btn-rerun:hover:not(:disabled) { color: var(--text); border-color: var(--violet-lt); }
.btn-rerun:disabled { opacity: 0.45; cursor: default; }


/* ============================================================
   Filter bar
   ============================================================ */

.filterbar {
  position: sticky;
  top: var(--topbar-h);
  z-index: 15;
  padding: 14px 22px 13px;
  border-bottom: 1px solid var(--line);
  background: #0E0B1B;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.fb-label { font-size: 12.5px; color: var(--muted); }
.fb-right { margin-left: auto; }

.fb-search {
  position: relative;
  flex-grow: 1;
  max-width: 330px;
  min-width: 200px;
  color: var(--muted);
}

.fb-search svg {
  position: absolute;
  left: 11px;
  top: 11px;
  width: 14px;
  height: 14px;
  pointer-events: none;
}

.fb-search input {
  width: 100%;
  box-sizing: border-box;
  height: 36px;
  padding: 0 12px 0 32px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
}

.fb-search input:focus { border-color: var(--violet); outline: none; }

.fb-select {
  height: 36px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}

/* An active filter is marked, so a short list is never a mystery. */
.fb-select.active {
  border-color: var(--violet);
  background: rgba(124, 58, 237, 0.13);
}

.seg {
  display: flex;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.seg button {
  border: 0;
  background: var(--surface);
  color: var(--text-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  padding: 0 13px;
  cursor: pointer;
}

.seg button + button { border-left: 1px solid var(--line); }
.seg button.on { background: var(--violet); color: #fff; font-weight: 600; }

.fb-clear {
  height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.fb-clear:hover { color: var(--text); border-color: var(--violet-lt); }

/* ---- requisition picker ---- */

.picker { position: relative; }

.picker-btn {
  height: 36px;
  min-width: 250px;
  padding: 0 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
}

.picker-btn.active { border-color: var(--violet); background: rgba(124, 58, 237, 0.13); }
.picker-btn svg { width: 11px; height: 11px; flex: none; color: var(--muted); }
.picker-btn span {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.picker-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 40;
  width: 430px;
  max-width: 88vw;
  border: 1px solid var(--violet);
  border-radius: 10px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
}

.picker-search { padding: 10px; border-bottom: 1px solid var(--line); }

.picker-search input {
  width: 100%;
  box-sizing: border-box;
  height: 34px;
  padding: 0 12px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
}

.picker-search input:focus { border-color: var(--violet-lt); outline: none; }

.picker-meta {
  padding: 8px 16px 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
}

.picker-loading {
  padding: 14px 16px;
  font-size: 13px;
  color: var(--muted);
}

.picker-list {
  max-height: 300px;
  overflow-y: auto;
  padding: 0 6px 6px;
}

.picker-row {
  width: 100%;
  border: 0;
  border-radius: 7px;
  padding: 9px 10px;
  background: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 9px;
  align-items: center;
}

.picker-row:hover, .picker-row.on { background: var(--surface-2); }

.picker-id {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--violet-pale);
}

.picker-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.picker-n {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-2);
}

.picker-n.zero { color: rgba(139, 132, 159, 0.45); }

.picker-clear {
  width: 100%;
  text-align: left;
  border: 0;
  border-top: 1px solid var(--line-soft);
  background: none;
  padding: 11px 16px;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.picker-clear:hover { color: var(--text); }

/* ============================================================
   Count strip
   ============================================================ */

.countstrip {
  position: sticky;
  top: calc(var(--topbar-h) + 63px);
  z-index: 14;
  padding: 9px 22px;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(11, 9, 22, 0.94);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
}

.countstrip b { color: var(--text); font-weight: 700; }
.countstrip b.good { color: var(--green); }
.countstrip b.pale { color: var(--violet-pale); }
.countstrip b.warn { color: var(--amber); }
.countstrip .sep { color: rgba(167, 139, 250, 0.3); }

/* ============================================================
   Pager
   ============================================================ */

.pager {
  flex: none;
  border-top: 1px solid var(--line);
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pager button {
  height: 30px;
  padding: 0 11px;
  border-radius: 7px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.pager button:hover:not(:disabled) { border-color: var(--violet-lt); }

.pager button:disabled {
  background: var(--surface);
  color: var(--muted);
  cursor: default;
  opacity: 0.6;
}

.pager-n { font-family: var(--mono); font-size: 11px; color: var(--muted); }

@media (max-width: 860px) {
  .filterbar { position: static; }
  .countstrip { position: static; }
  .fb-right { margin-left: 0; }
  .picker-btn { min-width: 0; }
}

/* timestamp beside the "stored result" tag */
.tag-plain {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
}

/* standalone pages (login) reuse the same background bloom */
.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(760px 420px at 18% -8%, rgba(124, 58, 237, 0.20), transparent 65%),
    radial-gradient(620px 400px at 92% 4%, rgba(34, 211, 238, 0.07), transparent 60%);
}

/* signed-in identity in the topbar */
.tb-sep { color: rgba(167, 139, 250, 0.3); }
.tb-who { color: var(--text-2); }

.tb-out {
  font: inherit;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
}

.tb-out:hover { color: var(--text); border-color: var(--violet-lt); }

/* ============================================================
   Automatic scoring page
   ============================================================ */

.brand-nav { display: flex; align-items: center; gap: 16px; }

.brand-nav a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
}

.brand-nav a:hover { color: var(--text-2); }
.brand-nav a.on { color: var(--text); font-weight: 600; }

.auto-page {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  padding: 28px 30px 80px;
}

.auto-page h1 {
  margin: 0 0 4px;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.auto-page h1 em {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
}

.auto-lede {
  margin: 0 0 22px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 68ch;
}

.auto-loading { padding: 20px; color: var(--muted); font-size: 14px; }

/* ---- status card ---- */

.auto-status {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  padding: 20px 22px;
  margin-bottom: 14px;
}

.auto-status.live {
  border-color: rgba(124, 58, 237, 0.42);
  background: linear-gradient(180deg, rgba(124,58,237,0.09), transparent 60%), var(--surface);
}

.auto-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.auto-head h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.auto-head .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--muted);
  flex: none;
}

.auto-head .dot.live {
  background: var(--cyan);
  animation: pulse 1.8s ease-in-out infinite;
}

@keyframes pulse { 50% { opacity: 0.35; } }

.auto-sub { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

.auto-btn {
  margin-left: auto;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 9px 15px;
  cursor: pointer;
}

.auto-btn:hover:not(:disabled) { color: var(--text); border-color: var(--violet-lt); }
.auto-btn:disabled { opacity: 0.5; cursor: default; }

.auto-btn.stop {
  color: var(--amber);
  background: rgba(245, 158, 11, 0.1);
  border-color: rgba(245, 158, 11, 0.3);
}

.auto-progress-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 8px;
}

.auto-progress-line b { color: var(--text); font-weight: 700; }
.auto-dim { color: var(--muted); font-size: 11.5px; }

.auto-bar {
  height: 8px;
  border-radius: 5px;
  background: var(--raised);
  overflow: hidden;
  margin-bottom: 16px;
}

.auto-bar-fill {
  height: 100%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--violet), var(--cyan));
  transition: width 0.6s ease;
}

.auto-inflight {
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 16px;
}

.auto-inflight-row {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
  background: var(--surface-2);
  font-size: 13.5px;
}

.auto-inflight-row + .auto-inflight-row { border-top: 1px solid var(--line-soft); }
.auto-inflight-row .grow { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.auto-inflight-row .mono { font-family: var(--mono); font-size: 11px; }
.auto-inflight-row .dim { color: var(--violet-pale); }
.auto-inflight-row .stage { color: var(--cyan); }

.auto-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  overflow: hidden;
}

.auto-stat { background: var(--surface-2); padding: 13px 16px; }
.auto-stat-l { font-size: 11.5px; color: var(--muted); margin-bottom: 4px; }

.auto-stat-v {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.auto-stat-v.pale { color: var(--violet-pale); }
.auto-stat-v.good { color: var(--green); }
.auto-stat-v.warn { color: var(--amber); }

/* ---- panels ---- */

.auto-grid {
  display: grid;
  grid-template-columns: 420px minmax(0, 1fr);
  gap: 14px;
}

.auto-panel {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface);
  padding: 18px 20px 20px;
}

.auto-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.auto-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--violet-lt);
}

.auto-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line-soft);
}

.auto-label { font-size: 14px; font-weight: 500; display: block; }
.auto-hint { font-size: 12px; color: var(--muted); }

.auto-select {
  height: 34px;
  padding: 0 9px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 13.5px;
  flex: none;
  cursor: pointer;
}

.auto-select:disabled { color: var(--muted); cursor: default; }

.auto-seg {
  display: flex;
  height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  flex: none;
}

.auto-seg button {
  border: 0;
  background: var(--surface);
  color: var(--text-2);
  font: inherit;
  font-size: 12.5px;
  padding: 0 14px;
  cursor: pointer;
}

.auto-seg button + button { border-left: 1px solid var(--line); }
.auto-seg button.on.on { background: var(--green); color: #08140c; font-weight: 700; }
.auto-seg button.on.off { background: var(--raised); color: var(--text); font-weight: 700; }
.auto-seg button:disabled { cursor: default; opacity: 0.75; }

.auto-note {
  margin: 16px 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--muted);
}

/* ---- history table ---- */

.auto-table { font-family: var(--mono); font-size: 11.5px; }

.auto-tr {
  display: grid;
  grid-template-columns: 118px 64px 52px 56px 52px minmax(0, 1fr);
  gap: 0 10px;
  align-items: center;
  padding: 9px 0;
  border-bottom: 1px solid var(--line-soft);
}

.auto-tr.head {
  font-size: 10.5px;
  color: var(--muted);
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
}

.auto-tr.live { background: rgba(34, 211, 238, 0.05); }
.auto-tr .dim { color: var(--muted); }
.auto-tr .good { color: var(--green); }
.auto-tr .warn { color: var(--amber); }

.auto-tr .outcome {
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--text-2);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.auto-tr .outcome.warn { color: var(--amber); }
.auto-tr .outcome.cyan { color: var(--cyan); }
.auto-tr .by-hand { color: var(--muted); font-size: 11px; }

@media (max-width: 900px) {
  .auto-grid { grid-template-columns: 1fr; }
  .auto-tr { grid-template-columns: 96px 54px 44px 48px 44px minmax(0, 1fr); font-size: 11px; }
  .auto-btn { margin-left: 0; }
}

.brand-mark { display: block; line-height: 0; }

.auto-fail {
  padding: 18px 20px;
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.06);
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.6;
}

.auto-fail strong { display: block; color: var(--amber); margin-bottom: 6px; font-size: 14.5px; }
.auto-fail p { margin: 0 0 10px; }
.auto-fail .auto-btn { margin-left: 0; }

.auto-note.warn { color: var(--amber); }