/* spa-audit — view styles.
 * Loaded AFTER app/tokens.css, which owns the palette, type scale, spacing and
 * the four confidence-tier classes. Nothing here re-defines a colour literal
 * except the two hatches, which are patterns rather than palette entries.
 *
 * Design intent (04-ui.md §8): a lab notebook or a bank statement, not a police
 * dashboard. Flat cards, hairlines, exactly one shadow, no green in the
 * confidence scale, red only for a broken recorder.
 */

/* ============================ 0. base ============================ */

html { height: 100%; }
body { min-height: 100%; padding-bottom: env(safe-area-inset-bottom); }

/* The hidden attribute must ALWAYS win. Any author `display:` on a matching
   selector silently overrides the UA sheet's `[hidden] { display:none }`,
   which is how the dialog backdrop once shipped as an invisible full-screen
   click shield. This guard makes that whole bug class impossible. */
[hidden] { display: none !important; }

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

.skip { position: absolute; left: -9999px; top: 0; z-index: 90;
        background: var(--surface); padding: var(--s3) var(--s4); }
.skip:focus { left: var(--s3); top: var(--s3); }

a { color: var(--accent); }
a:hover { color: var(--accent-hover); }

h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-size: var(--fs-lg); line-height: var(--lh-lg); }
h2 { font-size: var(--fs-md); line-height: var(--lh-md); }
h3 { font-size: var(--fs-base); line-height: var(--lh-base); }
p  { margin: 0 0 var(--s3); }
p:last-child { margin-bottom: 0; }

/* min-height:44px from tokens.css is right for real controls and wrong for
   inline links inside a sentence. Opt those back out. */
a.inline, a.tlink, .rowlink { min-height: 0; }

/* ============================ 1. buttons, chips ============================ */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  min-height: var(--tap); padding: 0 var(--s4);
  border: var(--hairline) solid var(--border-strong); border-radius: var(--r-ctl);
  background: var(--surface); color: var(--ink);
  font: 600 var(--fs-sm) / 1 var(--font-ui); text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.btn:hover { background: var(--surface-2); color: var(--ink); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: default; }
/* --bg as the foreground keeps this readable in BOTH themes: dark ink on the
   light-theme teal, near-black on the dark-theme teal. Never a hard-coded #fff. */
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.btn.primary:hover { background: var(--accent-hover); color: var(--bg); }
.btn.ghost { border-color: transparent; background: transparent; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.sm { min-height: 32px; padding: 0 var(--s3); font-size: var(--fs-xs); }
.btn.ico { padding: 0 var(--s2); font-size: var(--fs-md); }
.btn.wide { width: 100%; }

.chip {
  display: inline-flex; align-items: center; gap: var(--s1);
  min-height: 30px; padding: 0 var(--s3);
  border: var(--hairline) solid var(--border-strong); border-radius: var(--r-chip);
  background: var(--surface); color: var(--ink-2);
  font: 600 var(--fs-xs) / 1 var(--font-ui); cursor: pointer;
  white-space: nowrap;
}
.chip[aria-pressed="true"], .chip.on {
  background: var(--accent-soft); border-color: var(--accent); color: var(--accent);
}
.chip.plain { cursor: default; }

/* the confidence chip itself is defined in tokens.css (.conf). It is a button. */
.conf { cursor: pointer; border-width: 1px; }
.conf.static { cursor: default; }

/* ============================ 2. chrome ============================ */

#chrome {
  position: sticky; top: 0; z-index: 40;
  height: var(--h-header); background: var(--surface);
  border-bottom: var(--hairline) solid var(--border);
}
.chrome-in {
  display: flex; align-items: center; gap: var(--s4);
  height: 100%; max-width: var(--w-content); margin: 0 auto; padding: 0 var(--s4);
}
.wordmark { font-weight: 600; font-size: var(--fs-base); letter-spacing: .01em; }

.tabs { display: flex; gap: var(--s1); }
.tab {
  display: inline-flex; align-items: center; height: var(--h-header); padding: 0 var(--s3);
  border-bottom: 2px solid transparent; color: var(--ink-2);
  font: 600 var(--fs-sm) / 1 var(--font-ui); text-decoration: none;
}
.tab:hover { color: var(--ink); }
.tab[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); }

.hsearch { flex: 1 1 auto; max-width: 420px; margin-left: auto; }
.hsearch input, input[type="search"], input[type="text"], input[type="password"], textarea, select {
  width: 100%; min-height: 34px; padding: 0 var(--s3);
  border: var(--hairline) solid var(--border-strong); border-radius: var(--r-ctl);
  background: var(--surface); color: var(--ink);
  font: var(--fs-sm) / 1.4 var(--font-ui);
}
textarea { min-height: 72px; padding: var(--s2) var(--s3); resize: vertical; }
select { min-height: 34px; }

.chrome-right { display: flex; align-items: center; gap: var(--s1); }
.chrome-right .live { color: var(--ink-3); }

#tabbar { display: none; }

/* ============================ 3. banners, toasts ============================ */

#banners:empty { display: none; }
.banner {
  display: flex; align-items: flex-start; gap: var(--s3);
  padding: var(--s3) var(--s4);
  font-size: var(--fs-sm); line-height: var(--lh-sm);
  border-bottom: var(--hairline) solid var(--border);
}
.banner .b-act { margin-left: auto; }
/* the ONLY red on the site: the recorder is not running (04-ui.md 4.3 rule 6) */
.banner.fault  { background: var(--fault-soft);   color: var(--ink); border-bottom-color: var(--fault); }
.banner.warn   { background: var(--probable-soft); color: var(--ink); }
.banner.info   { background: var(--surface-2);     color: var(--ink-2); }
.banner strong { font-weight: 600; }

/* demo/fixture mode. Deliberately loud and deliberately NOT the fault colour:
   nothing here is a system fault, it is fabricated data. */
.banner.demo {
  background: var(--surface-2); color: var(--ink);
  border-top: 3px solid transparent; border-bottom: 3px solid transparent;
  background-image:
    repeating-linear-gradient(45deg, var(--gap-hatch) 0 6px, transparent 6px 12px);
}
.pill-demo {
  display: inline-flex; align-items: center; height: 20px; padding: 0 var(--s2);
  border: 1px dashed var(--ink-3); border-radius: var(--r-chip);
  font: 700 11px/1 var(--font-mono); letter-spacing: .08em; color: var(--ink-2);
}

#toasts {
  position: fixed; left: 50%; bottom: calc(var(--s6) + env(safe-area-inset-bottom));
  transform: translateX(-50%); z-index: 70;
  display: flex; flex-direction: column; gap: var(--s2); align-items: center;
  pointer-events: none;
}
.toast {
  padding: var(--s2) var(--s4); border-radius: var(--r-chip);
  background: var(--surface); border: var(--hairline) solid var(--border-strong);
  box-shadow: var(--shadow-pop); font-size: var(--fs-sm); color: var(--ink);
  max-width: 90vw;
}

/* ============================ 4. layout scaffolding ============================ */

#view { display: block; outline: none; }
.wrap { max-width: var(--w-content); margin: 0 auto; padding: var(--s5) var(--s4) var(--s7); }
.wrap.narrow { max-width: var(--w-card); }
.wrap.full { max-width: none; padding: 0; }

.row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.row.tight { gap: var(--s2); }
.spacer { flex: 1 1 auto; }
.muted { color: var(--ink-2); }
.dim   { color: var(--ink-3); }
.small { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.xs    { font-size: var(--fs-xs); line-height: var(--lh-xs); }
.mono  { font-family: var(--font-mono); }
.nowrap { white-space: nowrap; }
.stack > * + * { margin-top: var(--s3); }

.card {
  background: var(--surface); border: var(--hairline) solid var(--border);
  border-radius: var(--r-card); padding: var(--s4);
}
.card + .card { margin-top: var(--s4); }
.well {
  background: var(--surface-2); border-radius: var(--r-ctl); padding: var(--s3);
}

hr.rule { border: 0; border-top: var(--hairline) solid var(--border); margin: var(--s4) 0; }

.skel {
  background: var(--surface-2); border-radius: var(--r-ctl); height: 14px;
}
.skel.card-skel { height: 132px; margin-bottom: var(--s4); }

/* ============================ 5. confidence enforcement ============================ */

/* Any figure derived from tier Probable or Unclear renders in that tier's face
   with a mandatory trailing "?" supplied by the markup (04-ui.md 4.3 rule 1). */
.figure { font-variant-numeric: tabular-nums; font-weight: 600; }
.figure.t-record   { color: var(--ink); }
.figure.t-measured { color: var(--ink); }
.figure.t-probable { color: var(--probable); }
.figure.t-unclear  { color: var(--unclear); font-style: italic; }

.block { border-radius: var(--r-ctl); padding: var(--s3); background: var(--surface); }
.block.t-record   { border: var(--hairline) solid var(--border); border-left: 3px solid var(--record); }
.block.t-measured { border: var(--hairline) solid var(--border); border-left: 3px solid var(--measured); }
/* tier C: dashed box + a 3px HATCHED left edge (04-ui.md 8.4) */
.block.t-probable {
  border: 1px dashed var(--probable);
  border-left: 3px solid transparent;
  background-image: repeating-linear-gradient(45deg,
      var(--probable) 0 2px, transparent 2px 5px);
  background-size: 3px 100%; background-repeat: no-repeat; background-position: left top;
  background-origin: border-box; background-clip: border-box;
}
.block.t-unclear { border: 1px dashed var(--unclear); opacity: .82; font-style: italic; }

.warn-unclear {
  margin-top: var(--s2); padding: var(--s2) var(--s3);
  background: var(--unclear-soft); border-radius: var(--r-ctl);
  font-size: var(--fs-sm); line-height: var(--lh-sm); font-style: normal;
  color: var(--ink-2);
}
.warn-unclear strong { color: var(--ink); }

.evidence-ledger {
  margin-top: var(--s3); padding-top: var(--s3);
  border-top: var(--hairline) solid var(--border);
  font-size: var(--fs-sm); color: var(--ink-2);
}

/* the manager's own record, quoted. monospace = "this is a quotation" */
.ledger-quote {
  font: var(--fs-sm) / 1.5 var(--font-mono);
  background: var(--surface-2); border-left: 3px solid var(--record);
  border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
  padding: var(--s3); white-space: pre-wrap; overflow-x: auto;
}
.ledger-quote .k { color: var(--ink-3); }

.popover {
  position: fixed; z-index: 80; max-width: 320px;
  background: var(--surface); border: var(--hairline) solid var(--border-strong);
  border-radius: var(--r-card); box-shadow: var(--shadow-pop);
  padding: var(--s3); font-size: var(--fs-sm); line-height: var(--lh-sm);
}

/* ============================ 6. review view ============================ */

.dayhead { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.dayhead h1 { font-size: var(--fs-lg); }
.daynav { display: inline-flex; gap: var(--s1); }

.honesty {
  margin: var(--s3) 0 var(--s4); padding: var(--s3);
  border-left: 3px solid var(--border-strong); background: var(--surface-2);
  border-radius: 0 var(--r-ctl) var(--r-ctl) 0;
  font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink-2);
}
.honesty strong { color: var(--ink); }

.summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.sumcard {
  background: var(--surface); border: var(--hairline) solid var(--border);
  border-radius: var(--r-card); padding: var(--s3) var(--s4);
}
.sumcard .lab { font-size: var(--fs-xs); color: var(--ink-2); text-transform: none; }
.sumcard .val { font-size: var(--fs-xl); line-height: var(--lh-xl); font-variant-numeric: tabular-nums; }
.sumcard .sub { font-size: var(--fs-sm); color: var(--ink-2); }
.sumcard .val .of { font-size: var(--fs-md); color: var(--ink-2); }

.filters { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center;
           margin: var(--s4) 0 var(--s3); }

.fcard { max-width: var(--w-card); }
.fcard .fc-head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.fcard .fc-badge {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-md); font-weight: 600;
}
.fcard .fc-when { margin-left: auto; color: var(--ink-2); font-size: var(--fs-sm);
                  font-variant-numeric: tabular-nums; }
.fcard .fc-headline { margin: var(--s3) 0 0; font-size: var(--fs-md); line-height: var(--lh-md); }
.fcard .fc-support { margin-top: var(--s2); color: var(--ink-2); font-size: var(--fs-sm);
                     line-height: var(--lh-sm); }
.fcard.reviewed { opacity: .78; border-style: dashed; }
.fcard .fc-foot {
  margin-top: var(--s3); padding-top: var(--s3);
  border-top: var(--hairline) solid var(--border);
  display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center;
}

.twocol { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
          gap: var(--s4); margin-top: var(--s3); }
.colhead { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em;
           text-transform: uppercase; color: var(--ink-3); margin-bottom: var(--s2); }

.thumbs { display: flex; gap: var(--s2); flex-wrap: wrap; }
.thumb {
  width: 160px; height: 90px; border-radius: var(--r-media);
  border: var(--hairline) solid var(--border);
  background: var(--surface-2) center/cover no-repeat; position: relative;
  cursor: pointer; padding: 0; overflow: hidden;
  min-height: 0;
}
.thumb .t-lab {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.55); color: #fff;
  font: 600 11px/16px var(--font-mono); text-align: center;
}
.thumb.sm { width: 96px; height: 54px; }
.thumb.none { display: grid; place-items: center; font-size: var(--fs-xs); color: var(--ink-3); }

details.why { margin-top: var(--s3); }
details.why > summary {
  cursor: pointer; font-size: var(--fs-sm); font-weight: 600; color: var(--accent);
  list-style: none; padding: var(--s2) 0;
}
details.why > summary::-webkit-details-marker { display: none; }
details.why > summary::before { content: "\25B8 "; }
details.why[open] > summary::before { content: "\25BE "; }
details.why .why-body {
  padding: var(--s3); background: var(--surface-2); border-radius: var(--r-ctl);
  font-size: var(--fs-sm); line-height: 1.55;
}
details.why ul { margin: var(--s2) 0 0; padding-left: 1.1em; }
details.why li { margin: 2px 0; }

.patterns table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.patterns th, .patterns td { text-align: left; padding: var(--s2) var(--s3);
                             border-bottom: var(--hairline) solid var(--border); }
.patterns td.num, .patterns th.num { text-align: right; font-variant-numeric: tabular-nums; }
.patterns tbody tr:nth-child(odd) { background: var(--surface-2); }

.empty {
  padding: var(--s5); text-align: center; color: var(--ink-2);
  background: var(--surface); border: var(--hairline) dashed var(--border-strong);
  border-radius: var(--r-card);
}

/* ============================ 7. timeline / scrubber ============================ */

.tl-top {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s3) var(--s4); border-bottom: var(--hairline) solid var(--border);
  background: var(--surface);
}
.daystrip { display: flex; gap: 2px; }
.daystrip .d {
  min-height: 32px; padding: 0 var(--s2); border-radius: var(--r-ctl);
  border: var(--hairline) solid transparent; background: transparent;
  color: var(--ink-2); font: 600 var(--fs-xs)/1 var(--font-ui); cursor: pointer;
}
.daystrip .d[aria-current="true"] { background: var(--accent-soft); color: var(--accent);
                                    border-color: var(--accent); }
.daystrip .d.nav { padding: 0 8px; font-size: 18px; line-height: 1; }
.daystrip .d.nav[disabled] { opacity: .3; cursor: default; }
.daystrip .d.empty { opacity: .45; }
.daystrip .datepick {
  width: auto; min-height: 32px; margin-left: 6px; padding: 0 var(--s2);
  border: var(--hairline) solid var(--border); color: var(--ink-2);
  font: 600 var(--fs-xs)/1 var(--font-ui); background: transparent; cursor: pointer;
}
/* video-only deployment: no transcript rail, the video takes the full width */
.tl-main.norail { grid-template-columns: minmax(0, 1fr); }

.tl-main {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--w-rail);
  gap: 0; align-items: stretch;
}
.tl-left { min-width: 0; padding: var(--s4); }
.tl-rail {
  border-left: var(--hairline) solid var(--border); background: var(--surface);
  min-width: 0; display: flex; flex-direction: column; max-height: calc(100vh - 300px);
}

.stage { position: relative; background: #000; border-radius: var(--r-media);
         aspect-ratio: 16 / 9; overflow: hidden; }
.stage video { width: 100%; height: 100%; display: block; object-fit: contain; background: #000; }
.stage.scrubbing video { opacity: .55; }
.stage .stage-note {
  position: absolute; inset: auto var(--s3) var(--s3) var(--s3);
  background: rgba(0,0,0,.6); color: #fff; border-radius: var(--r-ctl);
  padding: var(--s2) var(--s3); font-size: var(--fs-xs); pointer-events: none;
}
.stage .stage-cover {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
  background: var(--surface-2); color: var(--ink-2); padding: var(--s4);
  font-size: var(--fs-sm);
}
.stage .pip {
  position: absolute; right: var(--s3); bottom: var(--s3); width: 240px; height: 135px;
  border: 2px solid var(--surface); border-radius: var(--r-media); overflow: hidden;
}

.transport {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  margin-top: var(--s3);
}
.transport .btn { min-height: 48px; }
.transport .tclock {
  font: 600 var(--fs-md)/1 var(--font-mono); font-variant-numeric: tabular-nums;
  padding: 0 var(--s2);
}
.hintline { margin-top: var(--s2); font-size: var(--fs-xs); color: var(--ink-3); }
.hintline kbd {
  font: 600 11px/1 var(--font-mono); border: var(--hairline) solid var(--border-strong);
  border-radius: 4px; padding: 2px 4px; background: var(--surface-2);
}

/* --- the bars --- */
.bars { padding: 0 var(--s4) var(--s4); }
.bar-head { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
            font-size: var(--fs-xs); color: var(--ink-2); margin: var(--s3) 0 var(--s1); }
.bar-head .lane-key { display: inline-flex; align-items: center; gap: var(--s1); }
.swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.swatch.motion { background: var(--motion); }
.swatch.voice  { background: var(--voice); }
.swatch.gapkey { background: var(--surface-2); border: 1px solid var(--border-strong); }

.tlbar {
  position: relative; width: 100%; user-select: none; touch-action: none;
  background: var(--surface); border: var(--hairline) solid var(--border);
  border-radius: var(--r-ctl); overflow: hidden;
}
.tlbar canvas { display: block; width: 100%; height: 100%; }
.tlbar .lens {
  position: absolute; top: 0; bottom: 0; border: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 3px; cursor: grab;
}
.tlbar .playhead {
  position: absolute; top: 0; bottom: 0; width: 2px; background: var(--accent);
  pointer-events: none; will-change: transform;
}
.tlbar .playhead::before {
  content: ""; position: absolute; top: -1px; left: -4px; width: 10px; height: 6px;
  background: var(--accent); border-radius: 2px;
}
#daybar { height: 44px; }
#winbar { height: 104px; }

.ruler { position: relative; height: 16px; margin-top: 2px; }
.ruler .tick {
  position: absolute; top: 0; font: var(--fs-xs)/16px var(--font-mono);
  color: var(--ink-3); transform: translateX(-50%); white-space: nowrap;
}
.ruler .tick::before {
  content: ""; position: absolute; left: 50%; top: -3px; width: 1px; height: 3px;
  background: var(--border-strong);
}

.foldgutter {
  position: absolute; top: 0; bottom: 0; width: 28px;
  background-image: repeating-linear-gradient(45deg,
      var(--gap-hatch) 0 4px, transparent 4px 8px);
  border-left: 1px dashed var(--border-strong);
  border-right: 1px dashed var(--border-strong);
  display: grid; place-items: center; font-size: 10px; color: var(--ink-3);
  cursor: help;
}
.sessblock {
  position: absolute; height: 18px; border-radius: 3px;
  background: var(--record-soft); border: 1px solid var(--record);
  color: var(--ink); font: 600 10px/16px var(--font-ui);
  overflow: hidden; white-space: nowrap; padding: 0 4px;
}
.flagtick {
  position: absolute; width: 0; height: 0; border-left: 5px solid transparent;
  border-right: 5px solid transparent; border-top: 7px solid var(--probable);
}

.compressed-chip {
  display: inline-flex; align-items: center; gap: var(--s1); min-height: 26px;
  padding: 0 var(--s2); border-radius: var(--r-chip);
  border: 1px dashed var(--border-strong); background: var(--surface-2);
  color: var(--ink-2); font: 600 var(--fs-xs)/1 var(--font-ui); cursor: pointer;
}

/* --- sprite storyboard rendering ---------------------------------------
   Every scrub frame is a tile inside a pre-rendered sheet, positioned with
   background-position. The rules below are the ONLY place a sheet is drawn, and
   they exist so js/sprites.js writes nothing but the three background-* values.

   image-rendering stays `auto`: these are 160x90 photographic stills scaled up,
   and pixelated would make a person at the door harder to recognise, not easier.

   `data-state` is set by paintTile() and is what keeps a hole in the recording
   from being drawn as a dark room. NO FRAME and NO RECORDING are different
   sentences and get different faces.                                        */
.pv-frame, .thumb, .cell .cf {
  background-repeat: no-repeat;
  background-color: var(--surface-2);
  image-rendering: auto;
}
[data-state="no_recording"] {
  background-image: repeating-linear-gradient(45deg,
      var(--gap-hatch) 0 5px, transparent 5px 10px) !important;
}
[data-state="no_recording"]::after {
  content: "NO RECORDING";
  position: absolute; inset: auto 0 6px 0; text-align: center;
  font: 600 10px/1 var(--font-mono); letter-spacing: .06em; color: var(--ink-3);
}
[data-state="not_built"]::after {
  content: "NO FRAME YET";
  position: absolute; inset: auto 0 6px 0; text-align: center;
  font: 600 10px/1 var(--font-mono); letter-spacing: .06em; color: var(--ink-3);
}
[data-state="loading"] { opacity: .7; }

/* --- hover preview card. The single most latency-critical element. --- */
#preview {
  position: fixed; z-index: 60; pointer-events: none;
  background: var(--surface); border: var(--hairline) solid var(--border-strong);
  border-radius: var(--r-card); box-shadow: var(--shadow-pop); overflow: hidden;
  width: 320px;
}
#preview.big { width: 480px; }
#preview .pv-frame {
  position: relative;
  width: 100%; aspect-ratio: 16/9; background: var(--surface-2) no-repeat;
  image-rendering: auto;
}
#preview .pv-meta { padding: var(--s2) var(--s3); font-size: var(--fs-xs); line-height: 1.5; }
#preview .pv-t { font: 600 var(--fs-sm)/1.4 var(--font-mono); font-variant-numeric: tabular-nums; }
#preview .pv-coarse {
  position: absolute; top: var(--s2); right: var(--s2);
  background: rgba(0,0,0,.55); color: #fff; border-radius: 3px;
  font: 600 10px/1 var(--font-mono); padding: 3px 5px;
}

/* --- transcript rail --- */
.rail-head {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3); border-bottom: var(--hairline) solid var(--border);
  font-size: var(--fs-xs); color: var(--ink-2);
}
.rail-body { overflow-y: auto; padding: var(--s2) var(--s3) var(--s6); flex: 1 1 auto; }
.seg { padding: var(--s2) var(--s2) var(--s2) var(--s3); border-left: 3px solid transparent;
       content-visibility: auto; contain-intrinsic-size: 88px; }
.seg.here { border-left-color: var(--accent); background: var(--accent-soft); }
.seg .seg-top { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.seg .seg-t {
  background: none; border: 0; padding: 0; min-height: 0; cursor: pointer;
  font: 600 var(--fs-sm)/1.4 var(--font-mono); color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.seg .seg-text { display: block; margin-top: 2px; font-size: var(--fs-base); line-height: 1.55; }
.seg .seg-en { display: block; margin-top: 2px; font-size: var(--fs-sm); font-style: italic;
               color: var(--ink-3); }
.seg .seg-acts { display: flex; gap: var(--s2); margin-top: var(--s1); }
.seg .seg-acts .btn { min-height: 28px; padding: 0 var(--s2); font-size: var(--fs-xs); }
.seg.collapsed {
  display: flex; align-items: center; gap: var(--s2);
  border: 1px dashed var(--unclear); border-radius: var(--r-ctl);
  opacity: .82; font-style: italic; color: var(--unclear);
  margin: var(--s2) 0; font-size: var(--fs-sm);
}
.money-chip {
  display: inline-flex; align-items: center; gap: 3px; min-height: 20px; padding: 0 6px;
  border-radius: var(--r-chip); border: 1px solid currentColor;
  font: 600 var(--fs-xs)/1 var(--font-ui);
}
.follow-pill {
  position: sticky; bottom: var(--s2); margin: var(--s2) auto 0; display: block;
}

/* --- contact sheet --- */
.sheetwrap { padding: var(--s4); }
.sheet-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
              margin-bottom: var(--s3); }
.sheet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
              gap: var(--s2); }
.cell { position: relative; }
.cell .cf {
  width: 100%; aspect-ratio: 16/9; border-radius: var(--r-media);
  background: var(--surface-2) no-repeat; border: var(--hairline) solid var(--border);
  cursor: pointer; display: block; padding: 0; min-height: 0;
}
.cell .cf:hover { outline: 2px solid var(--accent); outline-offset: 1px; }
.cell .cbar { height: 3px; margin-top: 2px; background: var(--surface-2); border-radius: 2px; }
.cell .cbar i { display: block; height: 100%; border-radius: 2px; background: var(--motion); }
.cell .clab { font: 11px/14px var(--font-mono); color: var(--ink-3); }
.sheet-divider {
  grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s3);
  padding: var(--s2) var(--s3); border-radius: var(--r-ctl);
  background-image: repeating-linear-gradient(45deg, var(--gap-hatch) 0 4px, transparent 4px 8px);
  font-size: var(--fs-sm); color: var(--ink-2);
}

/* ============================ 8. search ============================ */

.searchbox { display: flex; gap: var(--s2); }
.searchbox input { min-height: 44px; font-size: var(--fs-md); }
.interp {
  margin-top: var(--s3); padding: var(--s3); border-radius: var(--r-ctl);
  background: var(--accent-soft); color: var(--ink); font-size: var(--fs-sm);
}
.interp .q { font-weight: 600; }

.res-day { margin-top: var(--s5); }
.res-day > summary { cursor: pointer; font-size: var(--fs-md); font-weight: 600;
                     padding: var(--s2) 0; list-style: none; }
.res-day > summary::-webkit-details-marker { display: none; }
.res-day > summary::before { content: "\25B8 "; color: var(--ink-3); }
.res-day[open] > summary::before { content: "\25BE "; color: var(--ink-3); }

.compare {
  border: var(--hairline) solid var(--border-strong); border-radius: var(--r-card);
  padding: var(--s3); margin: var(--s2) 0 var(--s3); background: var(--surface);
}
.compare .cmp-lab { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em;
                    text-transform: uppercase; color: var(--ink-3); }
.compare table { width: 100%; border-collapse: collapse; margin-top: var(--s2); }
.compare td { padding: 3px 0; font-size: var(--fs-sm); vertical-align: baseline; }
.compare td:first-child { width: 92px; color: var(--ink-2); }
.compare td.v { font-variant-numeric: tabular-nums; font-weight: 600; }
.compare .weakest { margin-top: var(--s2); font-size: var(--fs-xs); color: var(--ink-2); }

.hit { display: flex; gap: var(--s3); padding: var(--s3) 0;
       border-bottom: var(--hairline) solid var(--border); }
.hit .hthumb { flex: 0 0 160px; }
.hit .hbody { min-width: 0; flex: 1 1 auto; }
.hit .hhead { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap;
              font-size: var(--fs-sm); color: var(--ink-2); }
.hit .hhead .conf { margin-left: auto; }
.hit .hacts { display: flex; gap: var(--s2); margin-top: var(--s2); flex-wrap: wrap; }
.hit .hacts .btn { min-height: 32px; font-size: var(--fs-xs); }
.glyphthumb {
  width: 160px; height: 90px; border-radius: var(--r-media);
  border: var(--hairline) solid var(--border); background: var(--surface-2);
  display: grid; place-items: center; font-size: 26px; color: var(--ink-3);
}
.miniplayer { margin-top: var(--s2); height: 48px; display: flex; align-items: center;
              gap: var(--s3); background: var(--surface-2); border-radius: var(--r-ctl);
              padding: 0 var(--s3); }
.miniplayer canvas { flex: 1 1 auto; height: 28px; }

.daystrip-mini { height: 18px; width: 100%; display: block; border-radius: 3px;
                 background: var(--surface-2); }

/* ============================ 9. dialogs, evidence, access ============================ */

/* Scoped to :not([hidden]): a bare `#overlay { display:grid }` overrides the
   browser's own `[hidden] { display:none }` (author CSS always beats the UA
   sheet), which kept the empty backdrop rendered - invisible, fixed, inset 0,
   z-index 75 - and swallowing every click on every page, sign-in included. */
#overlay:not([hidden]) {
  position: fixed; inset: 0; z-index: 75; background: rgba(20,24,22,.35);
  display: grid; place-items: center; padding: var(--s4);
}
.dialog {
  background: var(--surface); border-radius: var(--r-card); box-shadow: var(--shadow-pop);
  border: var(--hairline) solid var(--border);
  width: min(560px, 100%); max-height: 86vh; overflow: auto; padding: var(--s5);
}
.dialog h2 { margin-bottom: var(--s3); }
.dialog .dlg-foot { display: flex; gap: var(--s2); justify-content: flex-end;
                    margin-top: var(--s4); }
fieldset { border: 0; margin: 0; padding: 0; }
.opt { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s2) 0; }
.opt input { margin-top: 3px; }
.opt.sub { margin-left: var(--s5); }
label { font-size: var(--fs-sm); }

.ev-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s4); }
.ev-side .ev-sec { margin-bottom: var(--s4); }
.ev-side .ev-sec .k { color: var(--ink-3); display: inline-block; width: 74px; }
.ev-side .ev-sec .v { font-family: var(--font-mono); font-size: var(--fs-sm); word-break: break-all; }
.progress { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--accent); }

.logtable { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.logtable th, .logtable td { text-align: left; padding: var(--s2) var(--s3);
                             border-bottom: var(--hairline) solid var(--border); vertical-align: top; }
.logtable td.when { font-family: var(--font-mono); white-space: nowrap; color: var(--ink-2); }
.chain-ok  { color: var(--measured); font-weight: 600; }
.chain-bad { color: var(--fault); font-weight: 600; }

.login-wrap { display: grid; place-items: center; min-height: 100vh; padding: var(--s4); }
.login-card { width: min(360px, 100%); }
.login-card h1 { text-align: center; margin-bottom: var(--s5); font-size: var(--fs-md); }
.login-card label { display: block; margin-bottom: var(--s1); color: var(--ink-2); }
.login-card .fld { margin-bottom: var(--s4); }
.login-err { color: var(--fault); font-size: var(--fs-sm); margin-bottom: var(--s3); }

.kbd-sheet table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.kbd-sheet td { padding: 4px var(--s3); border-bottom: var(--hairline) solid var(--border); }
.kbd-sheet td:first-child { width: 120px; }

/* ============================ 10. phone (< 720px) ============================ */

@media (max-width: 719px) {
  .chrome-in { gap: var(--s2); padding: 0 var(--s3); }
  .tabs, .chrome-right .live, .chrome-right #case-count { display: none; }
  .hsearch { max-width: none; }
  .wordmark { display: none; }

  #tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
    height: calc(var(--h-tabbar) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--surface); border-top: var(--hairline) solid var(--border);
  }
  .tb {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px; text-decoration: none; color: var(--ink-2);
    font: 600 11px/1 var(--font-ui);
  }
  .tb[aria-current="page"] { color: var(--accent); }
  .tb-g { font-size: 17px; }

  body { padding-bottom: calc(var(--h-tabbar) + env(safe-area-inset-bottom)); }

  .wrap { padding: var(--s4) var(--s3) var(--s6); }
  .summary { grid-template-columns: 1fr; gap: var(--s2); }
  .twocol { grid-template-columns: 1fr; gap: var(--s3); }
  .ev-grid { grid-template-columns: 1fr; }
  .tl-main { grid-template-columns: 1fr; }
  .tl-rail { border-left: 0; border-top: var(--hairline) solid var(--border);
             max-height: none; }
  .tl-left { padding: var(--s3); }
  .bars { padding: 0 var(--s3) var(--s4); }
  .stage { position: sticky; top: var(--h-header); z-index: 20; border-radius: 0;
           margin: calc(-1 * var(--s3)) calc(-1 * var(--s3)) 0; }
  #daybar { height: 34px; }
  #winbar { height: 74px; }
  .hit { flex-direction: column; }
  .hit .hthumb, .glyphthumb, .thumb { width: 100%; }
  .thumb { height: auto; aspect-ratio: 16/9; }
  .sheet-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .segmented { display: flex; gap: var(--s1); padding: var(--s2) var(--s3) 0; }
  .segmented .chip { flex: 1 1 0; justify-content: center; }
  #preview { width: 240px; }
  #preview.big { width: 280px; }
  .dialog { padding: var(--s4); }
}

@media (min-width: 720px) {
  .segmented { display: none; }
  .phone-only { display: none !important; }
}
@media (max-width: 719px) {
  .desk-only { display: none !important; }
}

@media print {
  #chrome, #tabbar, #toasts, .transport, .filters { display: none !important; }
  .card { break-inside: avoid; }
}