/* F@B AI VETTING — reviewer console. App shell: collapsible sidebar +
   role-scoped workspace, white surfaces, F@B accents. Tokens come from
   delivery.css. */

.review-body {
  display: flex;
  min-height: 100vh;
  background: var(--paper);
  flex-direction: row;
}

/* ---------- sidebar ---------- */
.sidenav {
  width: 248px;
  flex: none;
  background: var(--paper-raised);
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  transition: width .18s ease;
  overflow: visible;
}
.nav-collapsed .sidenav { width: 64px; }
.nav-collapsed .nav-label { display: none; }

.sidenav-top { padding: 1rem .8rem .6rem; }
.sidenav-logo {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--ink);
  margin-bottom: .9rem; padding: 0 .1rem;
}
.logo-mark {
  width: 32px; height: 32px; border-radius: 8px; flex: none;
  background: var(--teal); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: 1.15rem;
}
.logo-word {
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: 1.2rem; letter-spacing: .03em;
  white-space: nowrap;
}
.logo-word em { font-style: normal; color: var(--teal); }

.role-switch { position: relative; }
.role-btn {
  width: 100%; display: flex; align-items: center; gap: .55rem;
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: 8px; padding: .45rem .55rem;
  cursor: pointer; font-family: var(--sans); font-size: .85rem; color: var(--ink);
}
.role-btn:hover { border-color: var(--teal); }
.role-avatar {
  width: 24px; height: 24px; border-radius: 6px; flex: none;
  background: var(--teal); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 600;
}
.role-name {
  flex: 1; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chev { color: var(--ink-faint); flex: none; }
.role-menu {
  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0;
  width: 230px; padding: .35rem;
  background: var(--paper-raised);
  border: 1px solid var(--hairline); border-radius: 10px;
  box-shadow: 0 10px 30px -12px rgba(16,29,32,.25);
}
.role-item {
  display: flex; gap: .5rem; align-items: flex-start;
  padding: .5rem .6rem; border-radius: 7px;
  text-decoration: none; color: var(--ink); font-size: .88rem;
}
.role-item:hover, .role-item.on { background: var(--paper); }
.role-item .role-check { visibility: hidden; color: var(--teal); flex: none; }
.role-item.on .role-check { visibility: visible; }

.nav-section {
  padding: .9rem 1rem .3rem;
  font-family: var(--display); font-weight: 400; font-size: .74rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); white-space: nowrap;
}
.sidenav-nav { display: flex; flex-direction: column; gap: .15rem; padding: 0 .55rem; }
.nav-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .55rem .55rem; border-radius: 8px;
  color: var(--ink-soft); text-decoration: none;
  /* Nav labels are Bebas per the Bible split — one weight, so the active
     state is carried by color/background, never font-weight. */
  font-family: var(--display); font-weight: 400; text-transform: uppercase;
  font-size: .95rem; letter-spacing: .05em; line-height: 1.1;
  white-space: nowrap;
}
.nav-item svg { flex: none; }
.nav-item:hover { background: var(--paper); color: var(--ink); }
.nav-item.is-active {
  background: rgba(20,77,83,.08);
  color: var(--teal-deep);
}

.sidenav-foot { margin-top: auto; padding: .8rem .7rem; border-top: 1px solid var(--hairline); }
.user-chip { display: flex; align-items: center; gap: .6rem; }
.user-avatar {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--paper); border: 1px solid var(--hairline);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; color: var(--ink-soft);
}
.user-meta { display: flex; flex-direction: column; line-height: 1.3; font-size: .82rem; white-space: nowrap; }
.signout { font-size: .72rem; color: var(--ink-faint); text-align: left; font-weight: 400; }
.signout:hover { color: var(--error); }

/* ---------- main column ---------- */
.review-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; align-items: center; gap: .8rem;
  padding: .6rem 1.2rem;
  background: var(--paper-raised);
  border-bottom: 1px solid var(--hairline);
  position: sticky; top: 0; z-index: 20;
}
.collapse-btn {
  display: flex; padding: .35rem; border: none; border-radius: 6px;
  background: none; color: var(--ink-soft); cursor: pointer;
}
.collapse-btn:hover { background: var(--paper); color: var(--ink); }
.topbar-rule { width: 1px; height: 1.1rem; background: var(--hairline); }
.topbar-crumb { font-size: .85rem; color: var(--ink-soft); }

.review-sheet {
  width: 100%;
  max-width: 76rem;
  padding: 1.6rem clamp(1.2rem, 3vw, 2.4rem) 3rem;
  flex: 1;
}
.review-foot {
  padding: .9rem 1.6rem;
  border-top: 1px solid var(--hairline);
  color: var(--ink-faint);
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
}

/* ---------- login ---------- */
.login-field { margin-bottom: 1rem; }
.login-field label {
  display: block; font-size: .66rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: .4rem;
}
.login-field input {
  width: 100%; font-family: var(--sans); font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: 4px; padding: .7rem .85rem;
  transition: border-color .15s, box-shadow .15s;
}
.login-field input:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(20,77,83,.12);
}

@media (max-width: 52rem) {
  .sidenav { width: 64px; }
  .sidenav .nav-label { display: none; }
}

/* ---------- list page ---------- */
.review-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.4rem;
}
.review-head h1 { margin-bottom: 0; }
.stat-strip { display: flex; gap: 1.1rem; flex-wrap: wrap; color: var(--ink-soft); }
.stat strong { color: var(--ink); font-weight: 600; }

.filter-bar {
  display: flex; gap: .6rem; flex-wrap: wrap; align-items: center;
  margin-bottom: 1.2rem;
}
.filter-search { flex: 1; min-width: 14rem; }
.filter-bar input[type="search"], .filter-bar select {
  font-family: var(--sans); font-size: .95rem; color: var(--ink);
  background: var(--paper-raised); border: 1px solid var(--hairline);
  border-radius: 3px; padding: .55rem .8rem;
}
.filter-bar input[type="search"]:focus, .filter-bar select:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(20,77,83,.12);
}
.filter-bar .btn-ghost { padding: .55rem 1.1rem; }

.table-wrap { overflow-x: auto; }
.review-table {
  width: 100%; border-collapse: collapse;
  background: var(--paper-raised);
  border: 1px solid var(--hairline); border-radius: 4px;
  font-size: .95rem;
}
.review-table th {
  font-family: var(--mono); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--ink-faint); font-weight: 500;
  text-align: left; padding: .7rem .9rem;
  border-bottom: 1px solid var(--hairline); background: var(--paper);
  /* Wraps (2026-10-06). With nowrap headers, the partial-status badge and a
     one-line date, the table ran ~240px wider than a 1216px sheet and the
     Recommendation column -- the one reviewers triage on -- sat off-screen
     behind a horizontal scroll. */
  white-space: normal;
}
.review-table td {
  padding: .75rem .9rem; border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.review-table tbody tr:last-child td { border-bottom: 0; }
.row-link { cursor: pointer; transition: background .12s; }
.row-link:hover { background: rgba(20,77,83,.05); }
.cand-name { display: block; color: var(--ink); font-weight: 600; text-decoration: none; }
.cand-name:hover { color: var(--teal); }
.cand-email { color: var(--ink-faint); font-size: .68rem; }
.td-date { color: var(--ink-soft); min-width: 5.5rem; }
.dim-col { text-align: center; }
/* The number leads and the band follows it, because Sage reads the figure
   first and uses the word to interpret it. Stacked rather than inline so a
   four-column row does not force a horizontal scroll on a laptop. */
.dim-mean { display: block; font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.dim-level { font-weight: 600; }
.dim-mean + .dim-level { display: block; font-weight: 500; font-size: .8rem; color: var(--ink-soft, #55524a); }
.dim-empty { color: var(--ink-faint); }
.empty-row { text-align: center; color: var(--ink-faint); padding: 2rem !important; }
.table-note { margin-top: .7rem; color: var(--ink-faint); }

/* badges */
.badge {
  display: inline-block; font-family: var(--mono); font-size: .62rem;
  text-transform: uppercase; letter-spacing: .1em;
  padding: .18rem .5rem; border-radius: 999px;
  border: 1px solid var(--hairline); color: var(--ink-soft);
  background: var(--paper); white-space: nowrap;
}
/* Semantic badge colors (contrast-checked): mint and sun appear only as
   washes/borders with teal or ink TEXT on top — never as the text itself. */
.badge.st-submitted { color: var(--teal); border-color: var(--mint); background: var(--mint-wash); }
.badge.st-in_progress { color: var(--ink); border-color: var(--sun); background: var(--sun-wash); }
.badge.st-abandoned, .badge.st-expired, .badge.st-voided { color: var(--error); border-color: var(--error); background: var(--error-wash); }
.badge.rec-advance, .badge.mh-pass { color: var(--teal); border-color: var(--mint); background: var(--mint-wash); }
.badge.rec-human_review, .badge.mh-question { color: var(--ink); border-color: var(--sun); background: var(--sun-wash); }
.badge.rec-do_not_advance, .badge.mh-fail { color: var(--error); border-color: var(--error); background: var(--error-wash); }
.badge.rec-pending, .badge.mh-pending, .badge.mh-not_assessed { color: var(--ink-faint); border-style: dashed; }
/* The reviewer-facing suggestion (apps/scoring/suggestion.py). Colour-coded
   at Elijah's request (2026-10-06) so a reviewer can triage a long list at a
   glance: green, apple green, pink. Text colours are chosen for contrast on
   their own fill, not taken from the brand palette, which has no green or red
   strong enough to carry this. */
.badge.rec-highly_recommended { color: #ffffff; border-color: #1f7a44; background: #1f7a44; }
.badge.rec-recommended { color: #2f5d12; border-color: #8ccb5e; background: #dcf3c8; }
.badge.rec-not_recommended { color: #9b1c1c; border-color: #f0a3a3; background: #fde2e2; }
.badge.rec-too_little { color: var(--ink-faint); border-style: dashed; }
.badge.action-badge { color: var(--teal-deep); background: rgba(20,77,83,.07); }
.badge.distractor-badge { color: var(--ink-faint); border-style: dotted; }

/* ---------- dossier ---------- */
.crumb { margin-bottom: 1rem; }
.crumb a { color: var(--ink-faint); text-decoration: none; }
.crumb a:hover { color: var(--teal); }
.dossier-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 2rem; flex-wrap: wrap; margin-bottom: 1.6rem;
}
.dossier-head h1 { margin-bottom: .4rem; }
.dossier-meta { color: var(--ink-faint); font-size: .74rem; }
.dossier-facts { min-width: 18rem; }
.dossier-facts > div {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: .8rem;
  padding: .35rem 0; border-bottom: 1px solid var(--hairline);
}
.dossier-facts dt {
  font-family: var(--mono); font-size: .64rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--ink-faint); padding-top: .2rem;
}
.dossier-facts dd { font-size: .92rem; overflow-wrap: anywhere; }

.panel {
  background: var(--paper-raised);
  border: 1px solid var(--hairline); border-radius: 4px;
  padding: 1.3rem 1.5rem 1.5rem;
  margin-bottom: 1.4rem;
  box-shadow: 0 1px 0 rgba(16,29,32,.04);
}
.panel-tag {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .2em;
  color: var(--teal); margin-bottom: .9rem;
}
.faint { color: var(--ink-faint); }

.rec-panel.rec-highly_recommended .rec-line { color: #1f7a44; }
.rec-panel.rec-recommended .rec-line { color: #2f5d12; }
.rec-panel.rec-not_recommended .rec-line { color: #9b1c1c; }
.rec-panel .rec-line {
  font-family: var(--sans); font-weight: 700; font-size: 1.45rem;
}
.rec-panel.rec-advance { border-left: 3px solid var(--mint); }
.rec-panel.rec-human_review { border-left: 3px solid var(--sun); }
.rec-panel.rec-do_not_advance { border-left: 3px solid var(--error); }
.rec-panel.rec-pending { border-left: 3px dashed var(--hairline); }
.rec-panel.rec-highly_recommended { border-left: 4px solid #1f7a44; }
.rec-panel.rec-recommended { border-left: 4px solid #8ccb5e; }
.rec-panel.rec-not_recommended { border-left: 4px solid #e57a7a; }
.rec-panel.rec-too_little { border-left: 3px dashed var(--hairline); }
.rec-reasons { margin: .4rem 0 0; padding-left: 1.1rem; color: var(--ink-soft); max-width: 46rem; }
.rec-suggested { font-size: .66rem; color: var(--ink-faint); letter-spacing: .06em; text-transform: uppercase; }
.rec-panel.rec-pending .rec-line { color: var(--ink-faint); }
.rec-note { color: var(--ink-soft); margin-top: .4rem; max-width: 46rem; }

.dim-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: .9rem;
}
.dim-card {
  border: 1px solid var(--hairline); border-radius: 4px;
  padding: .9rem 1rem 1rem; background: var(--paper);
}
.dim-card.dim-awaiting { border-style: dashed; }
.dim-name { font-size: .62rem; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-faint); margin-bottom: .4rem; }
.dim-level-big { font-family: var(--sans); font-weight: 700; font-size: 1.25rem; margin-bottom: .3rem; }
.dim-awaiting .dim-level-big { color: var(--ink-faint); }
.dim-narrative { font-size: .9rem; color: var(--ink-soft);
  /* Safety net. A long unbroken token, a file path being the case that
     actually happened, otherwise pushes the text past the card edge
     instead of wrapping. The path is gone from the narrative now, but a
     reviewer's screen should not depend on prose never containing one. */
  overflow-wrap: anywhere; }

.gates-table td { font-size: .92rem; }
.evidence-cell { color: var(--ink-soft); font-size: .88rem; }

.hl-kind { font-size: .64rem; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-faint); margin: .8rem 0 .3rem; }
.hl-list { list-style: none; display: flex; flex-direction: column; gap: .4rem; }
.evidence { color: var(--ink-soft); font-style: italic; }
.evidence::before { content: " “"; }
.evidence::after { content: "”"; }

.answers > div {
  display: grid; grid-template-columns: minmax(16rem, 2fr) 3fr; gap: 1rem;
  padding: .55rem 0; border-bottom: 1px solid var(--hairline);
}
.answers > div:last-child { border-bottom: 0; }
.answers dt { color: var(--ink-soft); font-size: .95rem; }
.answers dd { color: var(--ink); }

.scenario-block { margin-bottom: 1.6rem; }
.scenario-block:last-child { margin-bottom: 0; }
.scenario-title {
  font-family: var(--sans); font-weight: 600; font-size: 1.15rem;
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  margin-bottom: .3rem;
}
.scenario-code { color: var(--ink-faint); font-size: .66rem; }
.scenario-instructions { font-size: .92rem; margin-bottom: .8rem; }

.response-block {
  border: 1px solid var(--hairline); border-radius: 4px;
  background: var(--paper); padding: .9rem 1.1rem 1rem;
  margin-bottom: .8rem;
}
.response-head {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  margin-bottom: .6rem;
}
.response-kind { font-size: .62rem; text-transform: uppercase; letter-spacing: .16em; color: var(--ink-faint); }
.response-subject { font-weight: 600; font-size: .95rem; }
.response-text {
  background: var(--paper-raised); border: 1px solid var(--hairline);
  border-radius: 3px; padding: .8rem 1rem; font-size: .95rem;
}
.response-text p { margin-bottom: .6rem; }
.response-text p:last-child { margin-bottom: 0; }

.dossier-thread { display: flex; flex-direction: column; gap: .5rem; margin: .4rem 0; }
.dossier-thread .bubble { animation: none; font-size: .92rem; }
.bubble-name { display: block; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin-bottom: .15rem; }

.revisions { margin-top: .6rem; }
.revisions summary { cursor: pointer; color: var(--ink-faint); font-size: .68rem; }
.revisions summary:hover { color: var(--teal); }
.revision { margin: .6rem 0 0 .4rem; border-left: 2px solid var(--hairline); padding-left: .8rem; }
.revision-meta { font-size: .62rem; color: var(--ink-faint); margin-bottom: .2rem; }
.revision-text {
  font-family: var(--mono); font-size: .74rem; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink-soft);
  background: var(--paper-raised); border: 1px solid var(--hairline);
  border-radius: 3px; padding: .5rem .7rem; max-height: 14rem; overflow-y: auto;
}

.score-list { list-style: none; margin-top: .6rem; display: flex; flex-direction: column; gap: .3rem; font-size: .92rem; }
.score-awaiting { margin-top: .6rem; font-size: .62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }

@media (max-width: 56rem) {
  .dossier-head { flex-direction: column; }
  .answers > div { grid-template-columns: 1fr; gap: .15rem; }
}

/* ---------- invite a candidate ---------- */
.invite-form, .invite-result { max-width: 44rem; }
.invite-field { display: block; margin-bottom: 1.1rem; }
.invite-field-narrow { max-width: 12rem; }
.invite-label {
  display: block; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: .35rem;
}
.invite-field input {
  width: 100%; font-family: var(--sans); font-size: .95rem; color: var(--ink);
  background: var(--paper-raised); border: 1px solid var(--hairline);
  border-radius: 3px; padding: .55rem .8rem;
}
.invite-field input:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(20,77,83,.12);
}
.invite-hint {
  display: block; font-size: .8rem; color: var(--ink-faint); margin-top: .35rem;
  max-width: 30rem;
}
.invite-actions {
  display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: flex-start;
  border-top: 1px solid var(--hairline); padding-top: 1.2rem; margin-top: .4rem;
}
.invite-send { display: flex; flex-direction: column; gap: .1rem; }
.invite-sent {
  max-width: 44rem; font-size: .9rem; color: var(--ink);
  background: var(--mint-wash);
  border: 1px solid var(--mint); border-radius: 3px;
  padding: .7rem .9rem; margin: 0 0 1rem;
}
.btn-secondary {
  font-family: var(--sans); font-size: .92rem;
  background: var(--paper-raised); color: var(--ink-soft);
  border: 1px solid var(--hairline); border-radius: 3px;
  padding: .6rem 1.1rem; cursor: pointer;
}
.btn-secondary[disabled] { opacity: .55; cursor: not-allowed; }
.invite-note { font-size: .82rem; color: var(--ink-soft); margin: .8rem 0 0; max-width: 34rem; }
.invite-error {
  max-width: 44rem; font-size: .9rem; color: var(--error);
  background: var(--error-wash); border: 1px solid rgba(156,58,47,.3);
  border-radius: 3px; padding: .7rem .9rem; margin-bottom: 1.2rem;
}
.invite-result { border-color: var(--mint); }
.invite-result-lede { font-size: .98rem; color: var(--ink); margin: 0 0 1rem; }
.invite-link { display: flex; gap: .5rem; align-items: stretch; }
.invite-link-field {
  flex: 1; font-family: var(--mono); font-size: .84rem; color: var(--ink);
  background: var(--paper); border: 1px solid var(--hairline);
  border-radius: 3px; padding: .6rem .7rem;
}
.btn-copy {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--teal); color: #fff; border: 0; border-radius: 3px;
  padding: 0 1rem; cursor: pointer; min-width: 5.5rem;
}
.btn-copy:hover { background: var(--teal-deep); }
.invite-again {
  display: inline-block; margin-top: 1.1rem; font-size: .9rem;
  color: var(--teal); border-bottom: 1px solid var(--mint); padding-bottom: 1px;
}
[x-cloak] { display: none !important; }

/* ---------- score rows, history, reviewer override ---------- */
/* Brand note: mint/sun are fills only (they fail as text on light), so the
   reviewer badge is dark ink on a mint wash rather than mint text. */
.score-row { border-top: 1px solid var(--hairline); padding: .55rem 0; }
.score-row:first-child { border-top: 0; }
.score-head { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }
.score-value { font-size: 1.05rem; }
.score-badge {
  font-size: .6rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-soft); border: 1px solid var(--hairline);
  border-radius: 999px; padding: .1rem .45rem;
}
.score-badge-human {
  background: var(--mint-wash); border-color: var(--mint); color: var(--ink);
}
.score-override-btn {
  margin-left: auto; background: none; border: 1px solid var(--hairline);
  border-radius: 999px; padding: .16rem .6rem; cursor: pointer;
  font-size: .62rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--teal);
}
.score-override-btn:hover { border-color: var(--teal); background: var(--paper); }

.score-history { margin-top: .45rem; }
.score-history > summary {
  cursor: pointer; font-size: .62rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-faint);
}
.score-history-row {
  margin: .4rem 0 0; padding-left: .7rem;
  border-left: 2px solid var(--hairline);
}

.score-override {
  margin-top: .6rem; padding: .8rem; background: var(--paper);
  border: 1px solid var(--hairline); border-radius: 6px;
  display: flex; flex-wrap: wrap; gap: .7rem;
}
.score-override-field { display: flex; flex-direction: column; gap: .25rem; }
.score-override-field input { width: 6rem; }
.score-override-why { flex: 1 1 18rem; }
.score-override-why textarea { width: 100%; resize: vertical; }
.score-override-actions {
  flex: 1 1 100%; display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
}

/* ---------- flash messages ---------- */
.flash-stack { margin-bottom: 1rem; display: flex; flex-direction: column; gap: .4rem; }
.flash {
  padding: .6rem .85rem; border-radius: 6px; font-size: .92rem;
  border: 1px solid var(--hairline); background: var(--paper-raised);
}
.flash-success { background: var(--mint-wash); border-color: var(--mint); }
.flash-error { background: var(--error-wash); border-color: var(--error); }

/* ---------- media playback ---------- */
.media-list { display: flex; flex-direction: column; gap: 1rem; margin-top: .6rem; }
.media-item {
  padding: .8rem; border: 1px solid var(--hairline);
  border-radius: 6px; background: var(--paper);
}
.media-meta { color: var(--ink-soft); margin-bottom: .5rem; }
.media-flag {
  margin-left: .4rem; padding: .08rem .4rem; border-radius: 999px;
  background: var(--sun-wash); border: 1px solid var(--sun); color: var(--ink);
}
.media-player { width: 100%; display: block; }
/* Cap the video so a screen recording does not dominate the dossier; the
   reviewer can full-screen it from the native controls. */
.media-video { max-height: 22rem; background: var(--ink); border-radius: 4px; }
.media-note { color: var(--ink-faint); margin-top: .8rem; }

/* A refused recording must read as a stated fact, not an absence. */
.media-alert {
  padding: .8rem 1rem; margin-bottom: 1rem; border-radius: 6px;
  background: var(--sun-wash); border: 1px solid var(--sun);
}
.media-alert-head { font-weight: 600; margin-bottom: .3rem; }
.media-alert-body { font-size: .9rem; color: var(--ink-soft); }
.rec-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.rec-table th, .rec-table td {
  text-align: left; padding: .4rem .6rem; border-bottom: 1px solid var(--hairline);
}
.rec-table th {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink-faint);
}

/* ---------- card explanations ----------
   Two ways into the same text (apps/review/panel_help.py): a popover on the
   info button, and an inline description under every heading when explain mode
   is on.

   The popover is anchored to .panel-head, NOT to the button. The button sits
   right after the label, so its horizontal position depends on the label's
   length; anchoring to it threw the popover off the left edge of the screen on
   a short label like "Media". Anchored to the head it starts at the panel's own
   left edge every time, whatever the heading says.

   It opens UPWARD. Reviewers read down a dossier, so a card that opens
   downward covers the rows the reader was heading for. JS in base.html adds
   .drops-down when there is not enough room above, which is the only case a
   fixed direction cannot handle. */
.panel-head {
  position: relative;
  display: flex; align-items: center; gap: .45rem;
}
.panel-head .panel-tag { margin-bottom: 0; }
.panel-head + * { margin-top: .9rem; }

.info { position: static; display: inline-flex; flex: none; line-height: 0; }
.info-btn {
  width: 15px; height: 15px; border-radius: 50%;
  display: grid; place-items: center; cursor: help; padding: 0;
  background: none;
  border: 1px solid var(--ink-faint); color: var(--ink-faint);
  font: italic 600 10px/1 var(--sans);
  transition: background .13s ease, color .13s ease, border-color .13s ease;
}
.info-btn::after { content: "i"; transform: translateY(.5px); }
.info-btn:hover, .info-btn:focus-visible, .info.pinned .info-btn {
  background: var(--teal); border-color: var(--teal); color: #fff;
}
.info-btn:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }

.info-pop {
  position: absolute; z-index: 40;
  left: 0; bottom: calc(100% - 2px);
  width: min(420px, 100%);
  display: flex; flex-direction: column; gap: .45rem;
  background: var(--paper-raised);
  border: 1px solid var(--hairline);
  border-left: 2px solid var(--teal);
  border-radius: 4px;
  padding: .7rem .85rem .75rem;
  box-shadow: 0 -12px 32px -14px rgba(16,29,32,.34);
  text-align: left; text-transform: none; letter-spacing: normal;
  opacity: 0; visibility: hidden; transform: translateY(3px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
}
/* Only when there is no room above: see fabInfoPopovers in base.html. */
.info-pop.drops-down {
  bottom: auto; top: calc(100% - 2px);
  transform: translateY(-3px);
  box-shadow: 0 12px 32px -14px rgba(16,29,32,.34);
}
.info:hover .info-pop,
.info:focus-within .info-pop,
.info.pinned .info-pop { opacity: 1; visibility: visible; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .info-pop { transition: none; } }

.pop-body {
  font-family: var(--sans); font-size: .82rem; line-height: 1.5;
  color: var(--ink-soft); text-transform: none;
}
.pop-src {
  padding-top: .45rem; border-top: 1px solid var(--hairline);
  font-size: .64rem; color: var(--ink-faint);
}

/* explain mode */
.explain-bar {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-bottom: 1.4rem; padding: .4rem .65rem;
  background: var(--paper-raised);
  border: 1px solid var(--hairline); border-radius: 4px;
  cursor: pointer; color: var(--ink-faint);
  font-size: .66rem; text-transform: uppercase; letter-spacing: .14em;
}
.explain-bar:hover { border-color: var(--teal); color: var(--ink-soft); }
.explain-bar.is-on { border-color: var(--teal); color: var(--teal); }
.explain-bar:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
.switch {
  width: 28px; height: 16px; border-radius: 20px; flex: none;
  background: var(--hairline); position: relative;
  transition: background .16s ease;
}
.switch::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(16,29,32,.3);
  transition: transform .16s ease;
}
.explain-bar.is-on .switch { background: var(--teal); }
.explain-bar.is-on .switch::after { transform: translateX(12px); }
@media (prefers-reduced-motion: reduce) {
  .switch, .switch::after { transition: none; }
}

.panel-help {
  margin: .55rem 0 0; padding-left: .7rem;
  border-left: 2px solid var(--mint);
  font-size: .84rem; line-height: 1.55; color: var(--ink-soft);
  max-width: 68ch;
}
.panel-help + * { margin-top: .9rem; }

/* An upload failure is our fault, so it must not look like the amber
   "candidate declined" notice sitting next to it. Different cause, different
   colour, different sentence. */
.media-alert-ours {
  background: var(--error-wash);
  border-color: var(--error);
}
.media-alert-ours .media-alert-head { color: var(--error); }

/* The recording timeline, collapsed. A failing session logs one row per
   chunk; leaving 25+ rows expanded above the video meant a reviewer scrolled
   through our debug output to reach the recording they came for. */
.rec-timeline { margin-top: 1.1rem; border-top: 1px solid var(--hairline); }
.rec-timeline > summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; gap: .5rem;
  padding: .6rem .1rem;
  color: var(--ink-soft);
}
.rec-timeline > summary::-webkit-details-marker { display: none; }
.rec-timeline > summary::before {
  content: "▸"; color: var(--ink-faint); font-size: .7rem;
  transition: transform .14s ease;
}
.rec-timeline[open] > summary::before { transform: rotate(90deg); }
.rec-timeline > summary:hover { color: var(--ink); }
.rec-timeline > summary:focus-visible { outline: 2px solid var(--sun); outline-offset: 2px; }
.rec-timeline-label {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .14em;
}
.rec-timeline-count { font-size: .66rem; color: var(--ink-faint); margin-left: auto; }
.rec-timeline-body { padding-bottom: .6rem; }
/* Long timelines scroll inside the disclosure rather than growing the page. */
.rec-timeline-body .table-wrap { max-height: 22rem; overflow-y: auto; }
@media (prefers-reduced-motion: reduce) {
  .rec-timeline > summary::before { transition: none; }
}

/* ---------- media as one collapsible row per recording ----------
   Was a list of titles followed by a separate stack of always-rendered
   players, which on a five-recording session filled the panel with video the
   reviewer had not asked for. Each recording is now its own row that opens to
   play. Unplayable ones stay flat: a disclosure triangle promises something
   behind it, and there is nothing. */
.media-row {
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--paper);
  overflow: hidden;
}
.media-row + .media-row { margin-top: .5rem; }
.media-sum {
  display: flex; align-items: center; gap: .65rem;
  padding: .6rem .75rem;
  cursor: pointer; list-style: none;
  font-size: .9rem; color: var(--ink);
}
.media-sum::-webkit-details-marker { display: none; }
.media-sum::before {
  content: "▸"; flex: none; color: var(--ink-faint); font-size: .7rem;
  transition: transform .14s ease;
}
.media-row[open] .media-sum::before { transform: rotate(90deg); }
.media-sum:hover { background: var(--paper-raised); }
.media-sum:focus-visible { outline: 2px solid var(--sun); outline-offset: -2px; }
.media-kind {
  flex: none; padding: .1rem .4rem;
  border: 1px solid var(--hairline); border-radius: 4px;
  background: var(--paper-raised); color: var(--ink-faint);
  font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
}
.media-where { font-weight: 600; }
/* Pushed right and tabular so the numbers line up down the column. */
.media-facts {
  margin-left: auto; flex: none;
  font-size: .68rem; color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.media-body {
  padding: .75rem; border-top: 1px solid var(--hairline);
  background: var(--paper-raised);
}
.media-item-flat {
  padding: .7rem .75rem;
  border: 1px solid var(--hairline); border-radius: 6px;
  background: var(--paper);
}
.media-item-flat + .media-row,
.media-row + .media-item-flat,
.media-item-flat + .media-item-flat { margin-top: .5rem; }
@media (max-width: 40rem) {
  .media-sum { flex-wrap: wrap; }
  .media-facts { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .media-sum::before { transition: none; }
}

/* ---------- pipeline analytics ----------
   Modelled on Skillfully's campaign analytics, and diverging from it where
   copying would put a false statement on a hiring screen. See
   apps/review/analytics.py for the three divergences and the reason for each. */

.an-h { font-family: var(--display); font-weight: 400; font-size: 1.05rem; margin: 0 0 .2rem; }
.an-sub { color: var(--ink-soft); font-size: .88rem; margin: 0 0 1.1rem; max-width: 62ch; line-height: 1.5; }
.an-sub em { font-style: italic; }

.an-note {
  border-left: 2px solid var(--sun);
  background: var(--sun-wash);
  padding: .7rem .9rem; margin: 0 0 1.1rem;
  font-size: .86rem; color: var(--ink); line-height: 1.5; max-width: 68ch;
}

.an-stages { display: flex; gap: .7rem; flex-wrap: wrap; }
.an-stage {
  flex: 1 1 150px; min-width: 150px;
  border: 1px solid var(--hairline); border-radius: 10px;
  background: var(--paper-raised); padding: .85rem .95rem;
}
.an-stage-label {
  font-family: var(--display); font-weight: 400; font-size: .74rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint);
  margin: 0 0 .35rem;
}
.an-stage-count { font-size: 2rem; line-height: 1.1; margin: 0; font-variant-numeric: tabular-nums; }
.an-stage-pct { font-size: .8rem; color: var(--ink-soft); margin: .25rem 0 0; }
.an-stage-lost { font-size: .78rem; color: var(--error); margin: .3rem 0 0; font-variant-numeric: tabular-nums; }

/* The stage we cannot measure. Deliberately drawn, deliberately inert: a
   funnel that simply stopped at "scored" would read as complete. */
.an-stage.is-untracked { border-style: dashed; background: transparent; }
.an-stage .an-none { color: var(--ink-faint); }
.an-stage-why { font-size: .76rem; color: var(--ink-faint); margin: .35rem 0 0; line-height: 1.45; }

.an-metrics { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.an-metric-label {
  font-family: var(--display); font-weight: 400; font-size: .72rem;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 .2rem;
}
.an-metric { font-size: 1.6rem; margin: 0; font-variant-numeric: tabular-nums; }
.an-metric span { font-size: .8rem; color: var(--ink-soft); margin-left: .25rem; }

.an-routing { max-width: 480px; }

.an-cohorts { display: flex; align-items: flex-end; gap: .45rem; height: 150px; }
.an-cohort { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.an-bar {
  width: 100%; min-height: 4px; display: flex; flex-direction: column-reverse;
  border-radius: 4px 4px 0 0; overflow: hidden;
}
.an-bar .seg { display: block; width: 100%; }
.seg-scored { background: var(--teal); }
.seg-submitted { background: var(--mint); }
.seg-started { background: var(--sun); }
.seg-noshow { background: var(--hairline); }
.an-cohort-n { font-size: .74rem; color: var(--ink-soft); margin: .3rem 0 0; }
.an-cohort-week { font-size: .7rem; color: var(--ink-faint); margin: 0; }

.an-legend { font-size: .74rem; color: var(--ink-soft); margin: .9rem 0 0; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.an-legend .key { width: 10px; height: 10px; border-radius: 2px; display: inline-block; margin-left: .6rem; }
.an-legend .key:first-child { margin-left: 0; }
.key-scored { background: var(--teal); }
.key-submitted { background: var(--mint); }
.key-started { background: var(--sun); }
.key-noshow { background: var(--hairline); }

.an-stage-gained { font-size: .78rem; color: var(--ink-soft); margin: .3rem 0 0; font-variant-numeric: tabular-nums; }

.an-scope { font-size: .82rem; color: var(--ink-soft); margin: 0 0 1rem; max-width: 74ch; line-height: 1.5; }
.an-stage-note {
  font-family: var(--display); font-weight: 400; font-size: .72rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); margin: .15rem 0 0;
}
.an-flag { font-size: .72rem; color: var(--ink-faint); margin: .3rem 0 0; font-style: italic; }
.an-stage-pct .mono { font-size: .74rem; color: var(--ink-faint); }

.an-timings { display: flex; gap: 1.2rem; flex-wrap: wrap; }
.an-timing {
  flex: 1 1 300px; min-width: 280px;
  border: 1px solid var(--hairline); border-radius: 10px;
  background: var(--paper-raised); padding: .95rem 1.05rem;
}
.an-timing.is-untracked { border-style: dashed; background: transparent; }
.an-timing-desc { font-size: .8rem; color: var(--ink-soft); margin: .3rem 0 .9rem; line-height: 1.5; }
.an-timing .an-metrics { gap: 1.1rem; }
.an-timing .an-metric { font-size: 1.25rem; }

.seg-pending { background: var(--sun); }
.seg-abandoned { background: var(--hairline); }
.key-pending { background: var(--sun); }
.key-abandoned { background: var(--hairline); }
.an-cohort.is-maturing .an-bar { opacity: .62; }
.an-maturing-dot { color: var(--ink-faint); margin-left: .25rem; }
.is-untracked-row td { opacity: .72; }

/* A scenario captured for a human rather than scored. Marked as information,
   not as a warning: nothing is wrong with it. */
.scenario-capture-only {
  margin: .6rem 0 1rem;
  padding: .7rem .9rem;
  font-size: .9rem;
  background: var(--paper-raised, #fff);
  border-left: 3px solid var(--teal, #144D53);
  border-radius: 3px;
}

/* A voice answer's own recording, inline with the answer it belongs to.
   Voice assets hang off the response, not the attempt, so they never appeared
   in the recordings panel and there was nowhere on the page to play one. */
.response-audio { margin-top: .6rem; }
.response-audio .media-player { width: 100%; margin-top: .5rem; }

/* A purge-emptied attempt, shown to superusers only. Quiet enough to stay out
   of the way, explicit enough that a nameless row does not read as a bug. */
.cand-note {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  opacity: 0.75;
}

/* A scenario or attempt submitted with items unanswered (possible before
   2026-09-24). Deliberately NOT the green "completed" style: a reviewer must
   not read a partial sitting as a finished one at a glance. */
.badge.st-partial { color: var(--ink); border-color: var(--sun); background: var(--sun-wash); border-style: dashed;
  white-space: normal; max-width: 11rem; border-radius: 10px; line-height: 1.5; }