/* Rights register, triage keyboard bar, tranche ledger, delivery gates.
   Owned by the admin build.

   Nothing here invents a colour, a radius or a typeface: every value is a
   token from styles.css. The triage queue is the same studio-ledger surface as
   the rest of the admin, wound tighter for 950 tapes. */

/* The UA's `[hidden] { display: none }` is a bare type-less rule and loses to
   ANY author display rule, so `.btn { display: inline-flex }` quietly wins and
   el.hidden = true stops doing anything visible. The toast's Undo button was
   live proof: `.btn` outranked [hidden] and the button showed on every toast,
   undoable or not.

   One guard, scoped to the app shell and specific enough (0,2,0) to beat the
   component rules, rather than a list that has to be extended by whoever adds
   the next panel and never is. The explicit list is kept underneath because a
   panel outside .shell would otherwise fall through. */
.shell [hidden] { display: none; }
.selbar[hidden], .toast[hidden], .helpsheet[hidden], .tapeslot[hidden], tr.qedit[hidden] { display: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Locale quota strip: the tally light, now with four numbers ───────── */
.coverage.quota .note .loud { color: var(--amber); }
.cov.qcell {
  flex-direction: column; align-items: flex-start; gap: 1px;
  min-height: 62px; padding: 8px 12px; line-height: 1.25;
}
.cov.qcell b { font-size: 12px; letter-spacing: .02em; }
.cov.qcell .qn { font-family: var(--display); font-size: 17px; font-weight: 700; letter-spacing: -.02em; }
.cov.qcell .qn i { font-style: normal; font-weight: 500; color: var(--dark-dim); font-size: 13px; }
.cov.qcell .qsub { font-size: 11px; color: var(--dark-dim); font-weight: 500; }
.cov.qcell.filled { border-color: rgba(47,158,95,.55); }
.cov.qcell.filled .qn { color: var(--ok); }
/* Nobody cast against a real target. This is where the next hour goes, so it
   is the one filled shape in the strip. */
.cov.qcell.urgent { background: var(--amber); border-color: var(--amber); color: #2A1B05; }
.cov.qcell.urgent .qn i, .cov.qcell.urgent .qsub { color: #6B4405; }
.cov.qcell:hover { border-color: var(--amber); }
.cov.qcell[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--amber); }

/* ── Verdict tabs ─────────────────────────────────────────────────────── */
.qtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 14px; }
.qtab {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 42px; padding: 0 16px;
  border: 1px solid var(--line); border-bottom-color: var(--line);
  border-radius: var(--r-md);
  background: var(--panel); color: var(--dim);
  font-size: 14px; font-weight: 600; text-decoration: none;
}
.qtab .n {
  background: #F2ECE1; color: var(--dim);
  border-radius: var(--r-pill); padding: 2px 9px; font-size: 12.5px;
}
.qtab:hover { color: var(--ink); }
.qtab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.qtab[aria-selected="true"] .n { background: rgba(255,255,255,.15); color: var(--paper); }

/* ── Filters and the keyboard legend ──────────────────────────────────── */
.qcard { padding-top: 18px; }
.qfilters { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.qfilters input[type=search], .qfilters select {
  width: auto; min-width: 130px; min-height: 40px; padding: 0 14px; font-size: 14px;
}
.qfilters input[type=search] { min-width: 200px; flex: 1 1 200px; padding-right: 14px; }
.qfilters select { padding-right: 34px; }
.qfilters .btn { min-height: 40px; }

.keyline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  margin: 14px 0 2px; padding: 10px 0 0;
  border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--dim);
}
.keyline > svg { width: 16px; height: 16px; color: var(--amber); }
.keyline span { display: inline-flex; align-items: center; gap: 6px; }
kbd {
  font-family: var(--ui); font-size: 11.5px; font-weight: 700; line-height: 1;
  padding: 4px 7px; border-radius: 6px;
  background: #F2ECE1; color: var(--ink); border: 1px solid var(--line);
  border-bottom-width: 2px;
}

/* ── The queue table ──────────────────────────────────────────────────── */
.qtable { min-width: 780px; }
.qtable.working { opacity: .72; }
.qtable td { vertical-align: top; padding-top: 12px; padding-bottom: 12px; }
.qtable tr.qrow { outline: none; }
.qtable tr.qrow td:first-child { position: relative; }
/* The focus rail: at speed the eye needs one moving mark, not a whole row of
   changed colour. */
.qtable tr.qrow.focused td { background: #FDF8EF; }
.qtable tr.qrow.focused td:first-child::before {
  content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 3px;
  border-radius: 3px; background: var(--amber);
}
.qtable tr.qrow.picked td { background: #FBF6EC; }
.qtable tr.qrow.focused.picked td { background: #FCF3E4; }
.qtable tr.qrow.done td { opacity: .5; }
.qtable tr.qrow.undone td { background: var(--ok-soft); }
.qtable tr.qrow:focus-visible td:first-child::before {
  content: ""; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 3px;
  border-radius: 3px; background: var(--amber);
}

.c-pick { width: 34px; padding-right: 6px !important; }
label.pick { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; cursor: pointer; }
label.pick input { width: 17px; height: 17px; accent-color: var(--amber); cursor: pointer; }
.qtable .c-who { min-width: 230px; }
.qtable .c-who .sub { display: block; font-size: 12.5px; color: var(--dim); font-weight: 500; }
.qtable .c-tape { min-width: 190px; }
.qtable .c-rate { white-space: nowrap; }
.qtable .statuscell { display: block; margin-top: 6px; }
.qtable .nofile { font-size: 13px; color: var(--dim); }
.rowacts { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }

.tapeslot { margin-top: 10px; }
audio.rowplayer { width: 100%; max-width: 290px; height: 34px; display: block; }

/* Machine verdict evidence, inside the row. A reason code with no measurement
   is an assertion; the number is what the operator argues with. */
.verdict { margin-top: 9px; padding-left: 41px; }
ul.reasons { margin: 0; padding-left: 17px; font-size: 13.5px; color: var(--ink); }
ul.reasons li { margin-bottom: 3px; }
.reasons-none { margin: 0; font-size: 13.5px; color: var(--dim); }
.evidence { margin: 6px 0 0; font-size: 12.5px; color: var(--dim); }

.chasebtn { border: none; background: none; padding: 0; cursor: pointer; border-radius: var(--r-pill); }
.pill.effort { background: #F2ECE1; color: var(--dim); }
.pill.effort.med { background: var(--warn-soft); color: var(--amber-deep); }
.pill.effort.high { background: var(--ink); color: var(--paper); }

.qedit .chaseform {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  background: #FBF8F2; border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 14px 16px; margin: 2px 0 6px;
}
.qedit td { padding-top: 0 !important; }

.pager { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; font-size: 13.5px; color: var(--dim); }
.pager .num { flex: 1 1 auto; }
.btn.disabled { opacity: .4; pointer-events: none; }

/* ── Batch bar ────────────────────────────────────────────────────────── */
.selbar {
  position: sticky; bottom: 14px; z-index: 30;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  margin-top: 16px; padding: 12px 16px;
  background: var(--dark); color: var(--dark-ink);
  border-radius: var(--r-md);
  box-shadow: 0 18px 40px -22px rgba(27,22,17,.8);
}
.selbar .count { font-size: 13.5px; color: var(--dark-dim); }
.selbar .count b { font-family: var(--display); font-size: 19px; color: var(--dark-ink); margin-right: 5px; }
.selbar .spacer { flex: 1 1 auto; }
.selbar .btn { background: var(--dark-panel); border-color: var(--dark-line); color: var(--dark-ink); }
.selbar .btn:hover { background: #2C251E; }
.selbar .btn.primary { background: var(--amber); border-color: var(--amber); color: #2A1B05; }
.selbar .btn.danger { color: #F0A38C; border-color: #4A342C; }
.selbar .btn.danger:hover { background: #3A2620; }

/* ── Toast ────────────────────────────────────────────────────────────── */
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: 60; display: flex; align-items: center; gap: 14px;
  background: var(--ink); color: var(--paper);
  border-radius: var(--r-md); padding: 12px 14px 12px 18px;
  font-size: 14px; font-weight: 500;
  box-shadow: 0 18px 40px -22px rgba(27,22,17,.9);
  max-width: min(92vw, 560px);
}
.toast .btn { background: transparent; border-color: rgba(255,255,255,.25); color: var(--paper); }
.toast .btn:hover { background: rgba(255,255,255,.1); }

/* ── Shortcut sheet ───────────────────────────────────────────────────── */
.helpsheet {
  position: fixed; inset: 0; z-index: 70;
  background: rgba(27,22,17,.42);
  display: grid; place-items: center; padding: 20px;
  overscroll-behavior: contain;
}
.helpsheet .sheet {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px 24px; width: min(560px, 100%); max-height: 84vh; overflow: auto;
  box-shadow: var(--shadow-card);
}
.helpsheet dl { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 22px; }
.helpsheet dl > div { display: flex; align-items: baseline; gap: 10px; }
.helpsheet dt { flex: none; }
.helpsheet dd { margin: 0; font-size: 14px; color: var(--dim); }
.helpsheet .foot { margin: 18px 0 0; font-size: 13.5px; color: var(--dim); }

/* ── Schedule: callbacks alongside recording blocks ───────────────────── */
.pill.cb { background: var(--ok-soft); color: #1D7544; }
.legend i.c { background: var(--ok); }
.slotcell { display: flex; flex-wrap: wrap; gap: 4px; }

/* ── Casting board: the bench for thin locales ────────────────────────── */
table.data tr.thin td { background: #FDF8EF; }
.benchlist { display: flex; flex-direction: column; gap: 5px; }
.benchrow { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-size: 13.5px; min-height: 26px; }
.benchrow b { font-weight: 600; }
.benchrow:hover b { color: var(--amber-deep); }

/* ── Deletion requests ────────────────────────────────────────────────── */
table.data tr.overdue td { background: var(--bad-soft); }
table.data tr.overdue td:first-child { box-shadow: inset 3px 0 0 var(--bad); }

/* ── Program: the intake funnel ───────────────────────────────────────── */
.funnelgrid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.funnel { display: flex; flex-direction: column; gap: 2px; }
.fstage {
  display: flex; align-items: center; gap: 14px;
  padding: 11px 12px; border-radius: var(--r-md);
  text-decoration: none; color: inherit;
  transition: background-color .14s ease;
}
.fstage:hover { background: #FBF8F2; }
.fico { width: 30px; height: 30px; flex: none; border-radius: var(--r-sm); background: #F2ECE1; color: var(--dim); display: grid; place-items: center; }
.fico svg { width: 16px; height: 16px; }
.fstage.loss .fico { background: var(--bad-soft); color: var(--bad); }
.fstage.end .fico { background: var(--amber-soft); color: var(--amber-deep); }
.fbody { flex: 1 1 auto; min-width: 0; }
.flabel { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.fbar { display: block; height: 8px; border-radius: var(--r-pill); background: var(--line); overflow: hidden; }
.fbar > i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--ink); }
.fstage.loss .fbar > i { background: var(--bad); }
.fstage.end .fbar > i { background: var(--amber); }
.fnum { flex: none; text-align: right; min-width: 132px; }
.fnum b { display: block; font-family: var(--display); font-size: 22px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.fnum small { display: block; font-size: 11.5px; color: var(--dim); }
.fnote { margin: 12px 4px 0; font-size: 12.5px; line-height: 1.55; color: var(--dim); border-left: 2px solid var(--line); padding-left: 12px; }

.reasons-box { background: #FBF8F2; border: 1px solid var(--line); border-radius: var(--r-md); padding: 18px 20px; }
.reasons-box h3 { margin-bottom: 12px; }
table.reasontable { min-width: 0; }
table.reasontable td { font-size: 13.5px; padding: 9px 10px 9px 0; }
table.reasontable td small { color: var(--dim); font-weight: 500; }
.reasons-box .foot { margin: 14px 0 0; font-size: 13px; color: var(--dim); }

/* ── The three meters ──────────────────────────────────────────────────────
   Clock, recorded and accepted, always in that order, always with the meter
   named on the chip. The order is the invariant the numbers have to obey:
   each meter is a subset of the one to its left, and the descending weight of
   the three chips is there so a wrong reading looks wrong.

   Only the clock chip is filled. Wages come off that meter and no other, so it
   is the one place on the surface that spends the amber. */
.meters { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 2px; }
.meter {
  flex: 1 1 120px; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--panel);
}
.meter b { font-family: var(--display); font-size: 23px; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }
.meter span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); font-weight: 600; }
.meter.m-clock { background: var(--amber-soft); border-color: rgba(232, 147, 12, .42); }
.meter.m-clock b { color: var(--amber-deep); }
.meter.unset b { color: var(--dim); font-weight: 500; }
.meterlaw { margin: 14px 0 0; font-size: 13.5px; color: var(--dim); line-height: 1.5; }
.meterwarn {
  margin: 10px 0 0; padding: 10px 12px; font-size: 13.5px;
  background: var(--warn-soft); color: var(--amber-deep); border-radius: var(--r-sm);
}
.meterkey { font-size: 12.5px; color: var(--dim); text-align: right; }

/* A flash the base sheet does not carry: not an error, not a success, a state
   somebody has to go fix before money moves. */
.flash.warn { background: var(--warn-soft); color: var(--amber-deep); }
.flash.warn a { color: inherit; }
.pill.warn { background: var(--warn-soft); color: var(--amber-deep); }
/* On the clock right now. A steady chip, not a blinking dot: it is a state,
   not an alarm, and it has to stay legible for four hours. */
.pill.live { background: var(--ink); color: var(--paper); }

/* A .sr-only label is position:absolute, and .tablewrap is position:static, so
 * inside a table that scrolls sideways the label takes the INITIAL containing
 * block, escapes the wrap's clip, and drags the whole page sideways at 390px.
 * Anchoring the wrap puts the label back inside the thing that clips it. */
.tablewrap:has(.sr-only) { position: relative; }

.delivin { width: 96px; min-height: 34px; font-size: 14px; }

/* ── Session clock ────────────────────────────────────────────────────── */
.clocktable th, .clocktable td { vertical-align: top; }
.clocknote { font-size: 12.5px; color: var(--dim); font-weight: 500; margin-top: 4px; line-height: 1.4; }
.clockacts { margin-top: 8px; display: flex; justify-content: flex-end; }
.clockacts .rowacts { justify-content: flex-end; }
.editflag {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  font-family: var(--ui); font-size: 10.5px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--amber-deep); background: var(--warn-soft);
  border-radius: var(--r-pill); vertical-align: middle;
}
.recform { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.recform input { width: 92px; min-height: 38px; font-size: 14px; }
tr.clockedit-row td { padding-top: 0; border-top: none; }
.clockedit > summary {
  cursor: pointer; font-size: 13px; color: var(--dim); font-weight: 600;
  padding: 6px 2px; min-height: 32px; display: flex; align-items: center;
}
.clockedit > summary:hover { color: var(--ink); }
.clockedit[data-edited] > summary::after {
  content: "corrected"; margin-left: 8px; font-weight: 600; font-size: 10.5px;
  letter-spacing: .08em; text-transform: uppercase; color: var(--amber-deep);
}
.clockform {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
  padding: 14px; margin: 4px 0 8px;
  background: #FBF8F2; border: 1px solid var(--line); border-radius: var(--r-md);
}
.clockform .field { margin: 0; flex: 0 1 210px; min-width: 0; }
.clockform .field.wide { flex: 1 1 300px; }
.clockform input { width: 100%; }
.clockcalc { flex: 1 1 100%; margin: 0; font-size: 13px; color: var(--dim); font-variant-numeric: tabular-nums; }
.clockcalc.bad { color: var(--bad); font-weight: 600; }
.recerr { flex: 1 1 100%; font-size: 12.5px; color: var(--bad); font-weight: 600; text-align: right; line-height: 1.4; }
.recerr:empty { display: none; }
.recform input[aria-invalid="true"] { border-color: var(--bad); }
.clockedit .audit {
  margin: 0 0 10px; font-size: 13px; color: var(--dim);
  padding-left: 12px; border-left: 2px solid var(--amber);
}

/* ── Payout ledger ────────────────────────────────────────────────────── */
.paynote {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 8px 26px;
  padding: 16px 18px; margin-bottom: 18px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md);
}
.paynote p { margin: 0; font-size: 13.5px; color: var(--dim); line-height: 1.5; }
.paynote b { color: var(--ink); }
.paytable .wage { color: var(--amber-deep); }
.paytable .per { display: block; font-size: 11px; letter-spacing: 0; text-transform: none; color: var(--dim); font-weight: 500; }

/* ── Booking, where every no comes with a next ─────────────────────────── */
.capsnote {
  padding: 18px 20px; margin-bottom: 18px;
  background: var(--ink); color: var(--dark-ink);
  border-radius: var(--r-lg);
}
.capsnote h2 { font-size: 17px; margin-bottom: 10px; }
.capsnote ul { margin: 0 0 10px; padding-left: 18px; }
.capsnote li { font-size: 14px; color: var(--dark-dim); line-height: 1.6; }
.capsnote li b { color: var(--dark-ink); }
.capsnote p { margin: 0; font-size: 13px; color: var(--dark-dim); }
.nextlegal .altlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nextlegal .altlist li {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r-md); background: #FBF8F2;
}
.nextlegal .altlist li b { font-family: var(--display); font-size: 15.5px; letter-spacing: -.01em; flex: 1 1 auto; min-width: 0; }
.booktable tr.refused td { background: #FCFAF6; }
.refusal { font-size: 12.5px; color: var(--dim); margin-top: 5px; max-width: 42ch; margin-left: auto; line-height: 1.45; }
.moveform { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.moveform select { min-height: 38px; font-size: 14px; max-width: 260px; }

/* ── Operating calendar ───────────────────────────────────────────────── */
.daypick { border: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.daybox {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--panel); font-size: 14px; font-weight: 600; cursor: pointer;
}
.daybox:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.daybox:has(input:focus-visible) { outline: 2px solid var(--amber); outline-offset: 2px; }
.daybox input { accent-color: var(--amber); width: 16px; height: 16px; }

.card .field > .hint { display: block; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .funnelgrid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .meters { gap: 6px; }
  .meter { flex: 1 1 100%; flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; }
  .meter b { font-size: 20px; }
  .clockform .field, .clockform .field.wide { flex: 1 1 100%; }
  .clockform input { font-size: 16px; min-height: 44px; }
  .recform input { font-size: 16px; min-height: 44px; width: 100%; }
  .recform { width: 100%; }
  .recform .btn.sm { min-height: 44px; }
  .moveform { width: 100%; }
  .moveform select { font-size: 16px; min-height: 44px; width: 100%; max-width: none; }
  .moveform .btn.sm { min-height: 44px; flex: 1 1 auto; }
  .refusal { margin-left: 0; max-width: none; }
  .clockacts { justify-content: flex-start; }
  .meterkey { text-align: left; }
  /* The clock correction is a thumb target on a phone, not a 32px caret. */
  .clockedit > summary { min-height: 44px; display: flex; align-items: center; }
  /* .tap44 marks the page heads this file owns, so the 44px floor lands on the
     session clock and the booking week nav without restyling shared chips. */
  .btnrow.tap44 .chip, .btnrow.tap44 .btn { min-height: 44px; display: inline-flex; align-items: center; }
  .delivin { min-height: 44px; font-size: 16px; }
  /* Two shipped controls that sat under the thumb floor on a phone. */
  .qfilters input[type=search], .qfilters select { min-height: 44px; }
  .rr-sub .chip { min-height: 44px; display: inline-flex; align-items: center; }
}

@media (max-width: 780px) {
  /* The queue stops being a table and becomes a stack of cards: at 390px a
     horizontally scrolling triage list is unusable, and this list is the job. */
  /* :not([hidden]) is load bearing: a bare `.qtable tr { display: block }`
     outranks the [hidden] rules and would reopen every closed chase editor. */
  .qtable, .qtable tbody, .qtable tr:not([hidden]), .qtable td { display: block; width: auto; }
  /* table.data carries min-width: 640px and outranks a bare .qtable selector,
     which is what keeps the stacked cards 640px wide and scrolling sideways. */
  table.qtable { min-width: 0; }
  .card:has(.qtable) .tablewrap, .tablewrap:has(.qtable) { overflow-x: visible; }
  .qtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .qtable tr.qrow {
    position: relative; border: 1px solid var(--line); border-radius: var(--r-md);
    padding: 12px 14px 12px 44px; margin-bottom: 10px; background: var(--panel);
  }
  .qtable tr.qrow td { border: none; padding: 4px 0; }
  .qtable tr.qrow.focused td, .qtable tr.qrow.picked td, .qtable tr.qrow.undone td { background: transparent; }
  .qtable tr.qrow.focused { border-color: var(--amber); background: #FDF8EF; }
  .qtable tr.qrow.picked { background: #FBF6EC; }
  .qtable tr.qrow.undone { background: var(--ok-soft); }
  .qtable tr.qrow.focused td:first-child::before, .qtable tr.qrow:focus-visible td:first-child::before { display: none; }
  .qtable tr.qrow .c-pick { position: absolute; left: 12px; top: 14px; width: auto; }
  .qtable .c-who, .qtable .c-tape { min-width: 0; }
  .qtable .verdict { padding-left: 0; }
  /* Every control a thumb can reach in the queue gets a 44px target. The base
     stylesheet sizes these for a mouse, so each one is restated here. */
  .rowacts { justify-content: flex-start; }
  .qtable .btn.sm, .rowacts .btn.sm { min-height: 44px; }
  .qtable label.pick { min-width: 44px; min-height: 44px; }
  .qtable .playbtn { width: 44px; height: 44px; }
  .qtable .playbtn svg { width: 15px; height: 15px; }
  .qtable .chasebtn { min-height: 44px; display: inline-flex; align-items: center; }
  .qtable .stars button { min-width: 44px; min-height: 44px; }
  .qtable .stars svg { width: 21px; height: 21px; }
  .qedit .chaseform { flex-direction: column; align-items: stretch; }
  .qedit .chaseform .field { width: auto !important; }
  .qtable tr.qedit:not([hidden]) { display: block; }
  .qtable tr.qedit td { padding: 0 !important; }
  .selbar { position: static; }
  .selbar .btn { min-height: 44px; }
  .qtabs .qtab { flex: 1 1 auto; justify-content: center; }
  .qfilters input[type=search], .qfilters select { flex: 1 1 100%; min-width: 0; width: 100%; font-size: 16px; }
  .qfilters .btn { min-height: 44px; }
  .keyline { gap: 5px 10px; font-size: 11.5px; }
  .fnum { min-width: 96px; }
  .fnum small { font-size: 11px; }
  audio.rowplayer { max-width: 100%; }
}