/* =========================================================================
   Operations console
   =========================================================================

   A second shell on the same design system. The candidate-facing product is a
   quiet single column; this is a dense two-pane application that an operator
   keeps open all day, so it trades whitespace for information — but it uses
   the same tokens, so the two never read as different products.

   Everything here composes design/tokens.css. No new colours, no new easings.
   ========================================================================= */

.console-body { background: var(--bg-deep); }

.console {
  display: grid;
  grid-template-columns: 16.5rem minmax(0, 1fr);
  min-height: 100vh; min-height: 100dvh;
}

/* -------------------------------------------------------------------------
   Navigation
   ------------------------------------------------------------------------- */

.console__nav {
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; gap: var(--s-6);
  padding: var(--s-5) var(--s-4);
  background: var(--surface);
  border-right: 1px solid var(--line);
  overflow-y: auto;
}

.console__brand { display: flex; align-items: baseline; gap: var(--s-3);
  padding: 0 var(--s-3); }
.console__wordmark {
  font-weight: var(--w-semibold); letter-spacing: -.015em;
  color: var(--ink-display); text-decoration: none; font-size: 1rem;
}
.console__env {
  font-size: var(--t-micro-size); letter-spacing: var(--t-micro-track);
  text-transform: uppercase; font-weight: var(--w-semibold);
  color: var(--ink-faint);
}

.console__nav nav { flex: 1; display: grid; gap: var(--s-5); align-content: start; }
.console__group { display: grid; gap: 2px; }
.console__grouphead {
  margin: 0 0 var(--s-2); padding-inline: var(--s-3);
  font-size: var(--t-micro-size); letter-spacing: var(--t-micro-track);
  text-transform: uppercase; font-weight: var(--w-semibold); color: var(--ink-faint);
}

.console__link {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-md);
  color: var(--ink-secondary); text-decoration: none;
  font-size: var(--t-body-size); font-weight: var(--w-medium);
  transition: background-color var(--t-control), color var(--t-control);
}
.console__link .icon { color: var(--ink-faint); transition: color var(--t-control); }
.console__link:hover { background: var(--bg-deep); color: var(--ink); }
.console__link:hover .icon { color: var(--ink-secondary); }
.console__link.is-active { background: var(--accent-soft); color: var(--accent-press); }
.console__link.is-active .icon { color: var(--accent); }

.console__who {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: var(--s-3); padding: var(--s-3);
  border-top: 1px solid var(--line);
}
.console__avatar {
  width: 2rem; height: 2rem; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-press);
  font-size: var(--t-micro-size); font-weight: var(--w-semibold); letter-spacing: .04em;
}
.console__whotext { display: grid; min-width: 0; }
/* A display name is a person's own text and can be long. It gets one line and
   an ellipsis rather than wrapping into the sign-out control beside it. */
.console__whotext b { font-size: var(--t-small-size); font-weight: var(--w-medium);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console__whotext span { font-size: var(--t-micro-size); color: var(--ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.console__who .link-btn { white-space: nowrap; }

/* -------------------------------------------------------------------------
   Main
   ------------------------------------------------------------------------- */

.console__main { min-width: 0; padding: var(--s-8) clamp(var(--s-5), 3vw, var(--s-10)) var(--s-16); }

.console__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-6) var(--s-8); flex-wrap: wrap; margin-bottom: var(--s-8);
}
.console__title {
  font-family: var(--font-display); margin: var(--s-2) 0 0;
  font-size: var(--t-h1-size); line-height: var(--t-h1-lh);
  letter-spacing: var(--t-h1-track); font-weight: var(--w-regular);
  color: var(--ink-display);
}
.console__sub { margin: var(--s-2) 0 0; color: var(--ink-muted);
  font-size: var(--t-small-size); max-width: var(--measure); }
.console__foot { margin: var(--s-8) 0 0; font-size: var(--t-small-size);
  color: var(--ink-faint); max-width: var(--measure); line-height: 1.6; }

.console__gate { display: grid; place-items: center; min-height: 100vh; padding: var(--gutter); }
/* Hiding is enforced globally in design/system.css - see the note there. */

/* -------------------------------------------------------------------------
   Segmented time range
   ------------------------------------------------------------------------- */

.seg { display: inline-flex; gap: 2px; padding: 3px;
  background: var(--surface-sunken); border-radius: var(--r-pill); }
.seg__btn {
  min-height: 2rem; padding: 0 var(--s-3); border: 0; box-shadow: none;
  border-radius: var(--r-pill); background: transparent;
  font: inherit; font-size: var(--t-small-size); font-weight: var(--w-medium);
  color: var(--ink-muted); cursor: pointer;
  transition: background-color var(--t-control), color var(--t-control);
}
.seg__btn:hover { color: var(--ink); }
.seg__btn.is-on { background: var(--surface); color: var(--ink-display);
  box-shadow: 0 1px 2px rgba(23, 28, 34, .06); }

/* -------------------------------------------------------------------------
   Tiles
   ------------------------------------------------------------------------- */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--s-4); }

.tile {
  display: grid; gap: var(--s-2); align-content: start;
  padding: var(--s-5); border-radius: var(--r-lg);
  background: var(--surface); border: 1px solid var(--line);
}
.tile--link { text-decoration: none; transition: border-color var(--t-control), box-shadow var(--t-control); }
.tile--link:hover { border-color: var(--accent-line); box-shadow: var(--shadow-1); }

.tile__label { font-size: var(--t-small-size); color: var(--ink-muted); }
.tile__value {
  font-family: var(--font-display); font-size: 2rem; line-height: 1;
  font-weight: var(--w-light); letter-spacing: -.03em; color: var(--ink-display);
}
.tile__na { font-size: var(--t-body-size); color: var(--ink-faint); font-style: italic; }
.tile__why { font-size: var(--t-micro-size); color: var(--ink-faint); line-height: 1.5;
  text-transform: none; letter-spacing: 0; }
.tile__hint { font-size: var(--t-small-size); color: var(--ink-muted); }
.tile__hint--ok { color: var(--ok); }
.tile__hint--warn { color: var(--warn); }
.tile__hint--danger { color: var(--danger); }

/* -------------------------------------------------------------------------
   Panels
   ------------------------------------------------------------------------- */

.panel--console { background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: var(--s-6); }
.panel__head { display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); margin-bottom: var(--s-5); }
.panel__title { margin: 0; font-size: var(--t-h3-size); font-weight: var(--w-semibold);
  letter-spacing: var(--t-h3-track); color: var(--ink-display);
  display: flex; align-items: baseline; gap: var(--s-2); }
.panel__count { font-size: var(--t-small-size); font-weight: var(--w-regular);
  color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.kv { display: grid; gap: 1px; background: var(--line); border-radius: var(--r-md); overflow: hidden; }
.kv__row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  padding: var(--s-3) var(--s-4); background: var(--surface); font-size: var(--t-small-size); }
.kv__row span { color: var(--ink-muted); }
.kv__row b { font-weight: var(--w-medium); color: var(--ink); display: inline-flex;
  align-items: center; gap: var(--s-2); font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------------------
   Charts
   ------------------------------------------------------------------------- */

.barchart { display: grid; gap: var(--s-3); }
.barchart__row { display: grid; grid-template-columns: minmax(4rem, 8rem) 1fr auto;
  align-items: center; gap: var(--s-4); }
.barchart__label { font-size: var(--t-small-size); color: var(--ink-secondary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barchart__track { height: .5rem; background: var(--surface-sunken);
  border-radius: var(--r-pill); overflow: hidden; }
.barchart__fill { display: block; height: 100%; width: var(--w, 0%);
  border-radius: inherit; background: var(--viz-1);
  transition: width var(--d-scene) var(--ease-out); }
.barchart__fill--sand { background: var(--viz-2); }
.barchart__value { font-size: var(--t-small-size); color: var(--ink-muted);
  font-variant-numeric: tabular-nums; min-width: 2.5rem; text-align: right; }

.chart { margin: 0; }
.chart svg { width: 100%; height: 10rem; overflow: visible; }
.chart__area { fill: var(--accent-soft); }
.chart__line { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; }
.chart__line--1 { stroke: var(--accent-line); }
.chart__line--2 { stroke: var(--viz-1); }
.chart__dot { fill: var(--viz-1); opacity: 0; transition: opacity var(--t-control); }
.chart:hover .chart__dot { opacity: 1; }
.chart__axis { display: flex; justify-content: space-between; margin-top: var(--s-2);
  font-size: var(--t-micro-size); color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.chart__legend { display: flex; gap: var(--s-4); align-items: center; margin-top: var(--s-3);
  font-size: var(--t-small-size); color: var(--ink-muted); flex-wrap: wrap; }
.chart__key { display: inline-flex; align-items: center; gap: var(--s-2); }
.chart__key::before { content: ""; width: .75rem; height: 2px; border-radius: 2px; }
.chart__key--1::before { background: var(--accent-line); }
.chart__key--2::before { background: var(--viz-1); }
.chart__peak { margin-left: auto; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.funnel { display: grid; gap: var(--s-3); }
.funnel__row { display: grid; grid-template-columns: 6rem 1fr auto 3rem;
  align-items: center; gap: var(--s-3); }
.funnel__stage { font-size: var(--t-small-size); color: var(--ink-secondary); }
.funnel__track { height: 1.5rem; background: var(--surface-sunken); border-radius: var(--r-sm); overflow: hidden; }
.funnel__fill { display: block; height: 100%; width: var(--w, 0%);
  background: var(--accent-soft); border-left: 3px solid var(--viz-1);
  transition: width var(--d-scene) var(--ease-out); }
.funnel__count { font-size: var(--t-small-size); font-variant-numeric: tabular-nums;
  color: var(--ink); }
.funnel__drop { font-size: var(--t-small-size); color: var(--ink-faint);
  font-variant-numeric: tabular-nums; text-align: right; }
.funnel__drop.is-bad { color: var(--warn); font-weight: var(--w-medium); }

.progress { display: inline-flex; align-items: center; gap: var(--s-2); }
.progress__track { width: 4rem; height: .375rem; background: var(--surface-sunken);
  border-radius: var(--r-pill); overflow: hidden; }
.progress__fill { display: block; height: 100%; width: var(--w, 0%);
  background: var(--viz-1); border-radius: inherit; }

/* -------------------------------------------------------------------------
   Tables
   ------------------------------------------------------------------------- */

.tablewrap { overflow-x: auto; margin-inline: calc(var(--s-6) * -1); padding-inline: var(--s-6); }
.dtable { width: 100%; border-collapse: collapse; font-size: var(--t-small-size); }
.dtable th {
  position: sticky; top: 0; z-index: 1; background: var(--surface);
  text-align: left; padding: var(--s-2) var(--s-3);
  font-size: var(--t-micro-size); letter-spacing: var(--t-micro-track);
  text-transform: uppercase; color: var(--ink-faint); font-weight: var(--w-semibold);
  border-bottom: 1px solid var(--line);
}
.dtable td { padding: var(--s-3); border-bottom: 1px solid var(--line); vertical-align: middle; }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable tbody tr:hover { background: var(--bg-deep); }
.dtable .num, .dtable th.num { text-align: right; font-variant-numeric: tabular-nums; }
.t-danger { color: var(--danger); }

/* -------------------------------------------------------------------------
   States
   ------------------------------------------------------------------------- */

.state {
  display: grid; place-items: center; gap: var(--s-3);
  padding: var(--s-10) var(--s-6); text-align: center;
  border: 1px dashed var(--line-strong); border-radius: var(--r-lg);
  color: var(--ink-muted);
}
.state .icon { color: var(--ink-faint); }
.state__title { margin: 0; font-size: var(--t-body-size); font-weight: var(--w-medium);
  color: var(--ink); text-transform: lowercase; }
.state__body { margin: 0; font-size: var(--t-small-size); max-width: 40ch; line-height: 1.6; }
.state--error { border-color: var(--danger); background: var(--danger-soft); }
.state--error .icon, .state--error .state__title { color: var(--danger); }
.state--muted { border-style: solid; border-color: var(--line); background: var(--bg-deep); }

/* A skeleton shaped like the thing that is coming, not a spinner. */
.skel { border-radius: var(--r-lg); background: var(--surface);
  border: 1px solid var(--line); position: relative; overflow: hidden; }
.skel::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(23, 28, 34, .04), transparent);
  animation: skel 1.4s var(--ease-in-out) infinite;
}
@keyframes skel { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } }

/* -------------------------------------------------------------------------
   Drill-downs
   -------------------------------------------------------------------------
   A list, a record, and the evidence behind it are three depths of the same
   view rather than three places in the navigation. These are what make the
   second and third depths read as pages and not as a modal that lost its
   frame.
   ------------------------------------------------------------------------- */

.crumb {
  display: inline-flex; align-items: center; gap: var(--s-2);
  text-decoration: none;
}
.crumb:hover { color: var(--ink-display); }
.crumb svg { flex: none; }

.rowlink { font-weight: var(--w-medium); color: var(--ink-display); text-decoration: none; }
.rowlink:hover { color: var(--accent); text-decoration: underline; }

.pagehead { margin: 0 0 var(--s-7); }
.pagehead__name {
  font-family: var(--font-display); font-size: var(--t-h2-size);
  font-weight: var(--w-light); letter-spacing: -0.02em; line-height: 1.1;
  color: var(--ink-display); margin: 0;
}
.pagehead__meta {
  margin: var(--s-2) 0 0; font-size: var(--t-small-size); color: var(--ink-muted);
}

/* A segmented control whose segments are links, so each tab has a real URL. */
.seg--links { margin-bottom: var(--s-6); }
.seg--links .seg__btn {
  display: inline-flex; align-items: center; text-decoration: none; line-height: 2rem;
}

/* -------------------------------------------------------------------------
   Score card
   ------------------------------------------------------------------------- */

.scorecard {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-8);
  align-items: center;
  padding: var(--s-7); border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface);
}
.scorecard__dial { display: grid; place-items: center; }
.scorecard__body { display: grid; gap: var(--s-6); }
.scorecard__rollups { display: flex; gap: var(--s-8); flex-wrap: wrap; }
.scorecard__rollups .stat__value { font-size: 2rem; }
.scorecard__meters { display: grid; }

.flaglist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.flaglist__item { display: flex; gap: var(--s-3); align-items: baseline; }

/* -------------------------------------------------------------------------
   Answers
   ------------------------------------------------------------------------- */

.answer {
  padding: var(--s-5) 0; border-top: 1px solid var(--line);
}
.answer:first-child { border-top: 0; padding-top: 0; }
.answer--empty { opacity: .72; }
.answer__head { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.answer__spacer { flex: 1 1 auto; }
.answer__transcript {
  margin: var(--s-3) 0 0; font-size: var(--t-body-size); line-height: 1.6;
  color: var(--ink); max-width: var(--measure);
}
.answer__audio { margin-top: var(--s-3); }
.answer__audio audio { width: min(24rem, 100%); height: 2rem; }
.answer__analytics { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.answer__flags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.answer__detail { margin-top: var(--s-3); }
.answer__detail summary {
  cursor: pointer; font-size: var(--t-small-size); color: var(--ink-muted);
}
.answer__detail summary:hover { color: var(--ink); }
.answer__detail .kv { margin-top: var(--s-3); }

.pillstat {
  display: inline-flex; align-items: baseline; gap: var(--s-2);
  padding: var(--s-1) var(--s-3); border-radius: var(--r-pill);
  background: var(--surface-sunken); font-size: var(--t-small-size);
}
.pillstat b { font-weight: var(--w-medium); color: var(--ink-muted); }

/* -------------------------------------------------------------------------
   Assignments
   -------------------------------------------------------------------------
   Prompt audio is the item bank, so the players are collapsed until asked
   for: opening one assignment is 151 signed requests.
   ------------------------------------------------------------------------- */

.assignlist { display: grid; gap: var(--s-6); }
.assign {
  padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface);
}
.assign__head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--s-5); flex-wrap: wrap;
}
.assign__name {
  font-family: var(--font-display); font-size: var(--t-h3-size);
  font-weight: var(--w-light); letter-spacing: -0.02em; margin: var(--s-2) 0 0;
  color: var(--ink-display);
}
.assign__meta { margin: var(--s-1) 0 0; font-size: var(--t-small-size); color: var(--ink-muted); }

.assign__parts { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; }
.assign__part {
  display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto auto;
  align-items: center; gap: var(--s-4);
  padding: var(--s-3) 0; border-top: 1px solid var(--line);
}
.assign__partid {
  font-family: var(--font-mono); font-size: var(--t-small-size);
  color: var(--ink-muted); text-align: center;
}
.assign__parttitle { color: var(--ink); }

/* The fold at the bottom of an assignment card. */
.assign__expand {
  display: flex; align-items: center; justify-content: center; gap: var(--s-2);
  width: 100%; margin-top: var(--s-4); padding: var(--s-3);
  border: 0; border-top: 1px solid var(--line); border-radius: 0;
  background: transparent; box-shadow: none; min-height: 0;
  font: inherit; font-size: var(--t-small-size); color: var(--ink-muted);
  cursor: pointer; transition: color var(--t-control);
}
.assign__expand:hover { color: var(--ink-display); }
.assign__expand svg { transition: transform var(--t-control); }
.assign__expand.is-open svg { transform: rotate(180deg); }
.assign__fold { margin-top: var(--s-4); }
.assign__fold .assign__part:first-child { border-top: 0; }

.assign__audio { margin-top: var(--s-6); display: grid; gap: var(--s-6); }
.assign__audiopart { display: grid; gap: var(--s-1); }
.assign__audiohead {
  font-size: var(--t-small-size); font-weight: var(--w-semibold);
  text-transform: uppercase; letter-spacing: var(--t-micro-track);
  color: var(--ink-muted); margin: 0 0 var(--s-2);
}
.audiorow {
  display: grid; grid-template-columns: minmax(7rem, 10rem) auto minmax(0, 1fr);
  align-items: center; gap: var(--s-4);
  padding: var(--s-2) 0; border-top: 1px solid var(--line);
}
.audiorow audio { height: 2rem; width: 16rem; }
.audiorow__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 60rem) {
  .scorecard { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .scorecard__meters { width: 100%; text-align: left; }
  .assign__part { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .audiorow { grid-template-columns: 1fr; }
  .audiorow audio { width: 100%; }
  .audiorow__text { display: none; }
}

/* -------------------------------------------------------------------------
   Review feedback
   ------------------------------------------------------------------------- */

.fbavg { display: grid; gap: var(--s-5); }
.fbavg__row { display: grid; gap: var(--s-2); }
.fbavg__q { display: grid; gap: 2px; }
.fbavg__q b { font-weight: var(--w-medium); color: var(--ink-display); }

/* A comment in a table cell. Capped at the reading measure so one person who
   wrote three hundred characters does not set the width of every other row,
   and clamped to four lines so a page of fifty responses stays scannable. The
   whole comment is in the cell's title, so nothing is lost - only folded. */
.fbcomment {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  overflow: hidden; max-width: var(--measure); white-space: normal;
}

/* -------------------------------------------------------------------------
   Camera wall
   -------------------------------------------------------------------------
   Stills, refreshed - not video. The tiles are deliberately plain: a
   supervisor is scanning a dozen faces for "is that the right person, alone,
   looking at the screen", and anything decorative competes with the only
   thing on the page that matters.
   ------------------------------------------------------------------------- */

.wall {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.walltile {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); overflow: hidden;
  transition: border-color var(--t-surface);
}
.walltile.is-warning { border-color: var(--warn); }

.walltile__frame {
  position: relative; aspect-ratio: 4 / 3; background: var(--surface-sunken);
  display: grid; place-items: center;
}
.walltile__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.walltile__placeholder {
  display: grid; gap: var(--s-2); justify-items: center;
  color: var(--ink-faint); font-size: var(--t-small-size); text-align: center;
  padding: var(--s-4);
}

.walltile__meta {
  display: grid; gap: var(--s-2); padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--line);
}
.walltile__name {
  font-size: var(--t-small-size); font-weight: var(--w-medium); color: var(--ink-display);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.walltile__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.t-ok { color: var(--ok); font-weight: var(--w-medium); }
.t-warn { color: var(--warn); font-weight: var(--w-medium); }

/* -------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------
   Desktop is the priority for operations, but a console that is unusable on a
   phone is a console nobody can check from a corridor.
   ------------------------------------------------------------------------- */

@media (max-width: 60rem) {
  .console { grid-template-columns: 1fr; }
  .console__nav {
    position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line);
    flex-direction: row; align-items: center; gap: var(--s-4); overflow-x: auto;
  }
  .console__nav nav { display: flex; gap: var(--s-1); flex: 1; }
  .console__group { display: flex; gap: var(--s-1); }
  .console__grouphead { display: none; }
  .console__link span { display: none; }
  .console__link { padding: var(--s-3); }
  .console__who { border-top: 0; padding: 0; grid-template-columns: auto auto; }
  .console__whotext { display: none; }
  .console__main { padding: var(--s-6) var(--gutter) var(--s-12); }
}

@media (max-width: 40rem) {
  .tiles { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); }
  .tile__value { font-size: 1.5rem; }
  .funnel__row { grid-template-columns: 4.5rem 1fr auto 2.5rem; }
  .barchart__row { grid-template-columns: minmax(3rem, 5rem) 1fr auto; }
}

/* -------------------------------------------------------------------------
   Search and filter bar
   -------------------------------------------------------------------------
   One row of compact controls above a list. The search box takes the spare
   width; everything else sizes to its content and wraps on a narrow screen.
   ------------------------------------------------------------------------- */

.filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s-3);
  margin: 0 0 var(--s-5);
}
/* Scoped to the form so it outranks app.css's element-level input rule, which
   carries two :not() selectors and would otherwise reset the padding. */
form.filters .field {
  width: auto; min-height: 2.5rem; padding: var(--s-2) var(--s-3);
  font-size: var(--t-small-size);
}
form.filters select.field { max-width: 16rem; }
.filters__search { position: relative; flex: 1 1 16rem; min-width: 12rem; }
form.filters .filters__search .field { width: 100%; padding-left: 2.25rem; }
.filters__search svg {
  position: absolute; left: var(--s-3); top: 50%; transform: translateY(-50%);
  color: var(--ink-faint); pointer-events: none;
}
/* The label sits beside its date, not above it, so a date is the same height
   as every other control and the bar stays one aligned row. */
form.filters .filters__date {
  display: inline-flex; align-items: center; gap: var(--s-2); margin: 0;
  font-size: var(--t-small-size); font-weight: var(--w-medium); color: var(--ink-muted);
}
.filters__clear { margin-left: auto; }

[data-results] { transition: opacity var(--t-control); }
[data-results][aria-busy="true"] { opacity: .55; }

.pager {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-4); margin: var(--s-4) 0 0;
}

/* -------------------------------------------------------------------------
   Face verification
   -------------------------------------------------------------------------
   Flags are shown where a supervisor already looks - the live table, the
   camera wall, the attempt - rather than on a page of their own. A flagged row
   is tinted, not shouted: it is a prompt to look, not a verdict.
   ------------------------------------------------------------------------- */

.facecell { display: grid; gap: var(--s-1); justify-items: start; }
.facesum { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0 0 var(--s-4); }
/* A bar down the flagged row rather than a fill, so the chips in it keep their
   own colour and a reviewer can still read "Open" against the row. */
.facetable tr.is-flagged td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.facetable tr.is-flagged td { font-weight: var(--w-medium); }
.facereview { display: grid; gap: var(--s-1); justify-items: start; }
.facereview__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

@media (max-width: 40rem) {
  .filters > * { flex: 1 1 100%; }
  form.filters .field, form.filters select.field { width: 100%; max-width: none; }
  form.filters .filters__date { display: grid; grid-template-columns: 3rem 1fr; }
  .filters__clear { margin-left: 0; }
}