/* ============================================================
   SESSION STYLES, /test-drive-fairchild
   Two layouts share variables/tokens from test-drive.css + styles.css
   ============================================================ */

/* Derived tokens resolve against the themed body, not :root, so they inherit
   the coffee palette. */
body{
  --s-rule: rgba(231,235,242,0.14);
  --s-rule-strong: rgba(231,235,242,0.28);
  --s-paper: var(--paper);
  --s-paper-2: var(--paper-2);
  --s-ink: var(--ink);
  --s-ink-2: var(--ink-2);
  --s-accent: var(--accent);
}

/* ---------- Slim session nav ---------- */
.session-nav{
  background: var(--s-paper);
  border-bottom: 1px solid var(--s-rule);
  position: sticky; top: 0; z-index: 40;
}
.session-nav .nav-inner{padding:14px 40px;display:flex;align-items:center;gap:24px}
.session-nav .nav-logo{flex:0 0 auto}
/* Smaller than the site nav’s 54px, the room is the subject here,
   not the brand. */
.session-nav .nav-logo img{height:38px;width:auto;display:block}
.session-nav-mid{
  flex:1; display:flex; align-items:center; gap:12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--s-ink-2);
}
.sn-kicker{color: var(--s-accent)}
.sn-sep{opacity:.4}
.sn-title{color: var(--s-ink); letter-spacing: 0.18em}
/* margin-left keeps the exit on the right whether or not the room
   carries a middle block. */
.session-nav-right{flex:0 0 auto; margin-left:auto}
.session-exit{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--s-ink); text-decoration: none; padding: 8px 14px;
  border: 1px solid var(--s-rule-strong); transition: all .2s;
}
.session-exit:hover{background: var(--s-ink); color: var(--s-paper)}

/* At phone width the logo and a full-width exit do not fit inside the 40px
   gutters, and the room scrolled sideways. Everything tightens rather than
   the label being cut. */
@media(max-width:640px){
  .session-nav .nav-inner{padding:12px 20px; gap:12px}
  .session-nav .nav-logo img{height:30px}
  .session-exit{padding:7px 10px; font-size:9.5px; letter-spacing:0.14em}
}

/* ============================================================
   OPTION A, COURTROOM DOCKET
   ============================================================ */
.session-a{background: var(--s-paper-2); min-height: calc(100vh - 68px)}

/* Case strip */
.case-strip{
  background: var(--s-paper); color: var(--s-ink);
  border-bottom: 1px solid var(--s-rule);
}
.cs-inner{
  max-width: 1600px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 1.4fr 2fr 1.1fr; gap: 40px;
  padding: 18px 40px;
}
.cs-kicker{
  display:block;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--s-ink-2); margin-bottom: 4px;
}
.cs-val{
  font-family: var(--serif, 'Instrument Serif'); font-size: 18px; color: var(--s-ink);
}

/* Docket grid */
.docket{
  max-width: 1600px; margin: 0 auto;
  display: grid; grid-template-columns: 320px 1fr 320px; gap: 28px;
  padding: 32px 40px 80px;
}
.rail-kicker{
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--s-accent); display: block;
}
.rail-kicker.light{color: var(--accent)}

/* Left rail: topics */
.docket-left{
  background: var(--s-paper); border: 1px solid var(--s-ink);
  padding: 22px 22px 18px; position: sticky; top: 88px; align-self: start;
  max-height: calc(100vh - 108px); overflow: auto;
}
.rail-head{margin-bottom: 18px}
.rail-head h2{
  font-family: var(--serif); font-weight: 600; font-size: 30px; line-height: 1.1;
  margin: 6px 0 8px; color: var(--s-ink);
}
.rail-head h2 em{color: var(--s-accent); font-weight: 500}
.rail-note{
  font-family: var(--serif);  font-size: 13px; color: var(--s-ink-2); margin: 0;}

.topic-list{list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--s-rule)}
.topic{border-bottom: 1px solid var(--s-rule)}
.topic-btn{
  display: grid; grid-template-columns: 28px 1fr 20px; gap: 10px; align-items: baseline;
  width: 100%; background: transparent; border: 0; padding: 12px 4px;
  font-family: inherit; color: inherit; cursor: pointer; text-align: left;
  transition: background .2s;
}
.topic-btn:hover{background: rgba(126,155,200,0.06)}
.topic-roman{
  font-family: var(--serif);  font-size: 15px; color: var(--s-accent);}
.topic-title{
  font-family: var(--serif); font-size: 15px; color: var(--s-ink); line-height: 1.3;
}
.topic-chev{
  font-family: var(--mono); font-size: 14px; color: var(--s-ink-2); text-align: right;
  transition: transform .3s;
}
.topic.open .topic-chev{transform: rotate(45deg); color: var(--s-accent)}
/* Animating to a fixed max-height clipped anything longer than it, the
   oral-argument grounds run several sentences and lost their last lines.
   Grid rows animate to the content’s own height, whatever that is. */
.topic-body{
  display: grid; grid-template-rows: 0fr; overflow: hidden;
  padding: 0 4px 0 42px;
  transition: grid-template-rows .35s ease, padding .25s ease;
}
.topic-body > *{min-height: 0}
.topic.open .topic-body{grid-template-rows: 1fr; padding: 0 4px 14px 42px}
.topic-body p{
  font-family: var(--serif);  font-size: 13.5px; line-height: 1.55;
  color: var(--s-ink-2); margin: 0;}
.rail-back{
  display: block; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--s-rule);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--s-ink); text-decoration: none;
}
.rail-back:hover{color: var(--s-accent)}

/* Center: bench */
.docket-center{display: flex; flex-direction: column; gap: 24px}
.bench-head{
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 10px; border-bottom: 1px solid var(--s-rule);
}
.bh-kicker{
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--s-accent);
}
.bh-rule{flex: 1; height: 1px; background: var(--s-rule)}
.bh-status{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--s-ink-2);
}
.bh-status .dot{
  width: 8px; height: 8px; border-radius: 50%; background: var(--s-ink-2); display: inline-block;
}
.bh-status .dot.live{background: var(--s-accent); box-shadow: 0 0 0 4px rgba(126,155,200,0.25); animation: pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{box-shadow: 0 0 0 8px rgba(126,155,200,0.05)}}
.bh-status.muted{opacity: .6}

.bench-frame{
  position: relative; aspect-ratio: 16/10; overflow: hidden;
  background: var(--s-ink); border: 1px solid var(--s-ink);
}
.bench-video{width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.95)}
.bench-frame .film-stamp{
  position: absolute; top: 16px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.28em; text-transform: uppercase; color: #fff; opacity: .85;
  background: rgba(0,0,0,0.4); padding: 6px 12px; border: 1px solid rgba(255,255,255,0.25);
  z-index: 2;
}
.bench-frame .film-stamp.tl{left: 16px}
.bench-frame .film-stamp.tr{right: 16px}
.bench-nameplate{
  position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 2;
  display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: end;
  color: #fff;
}
.np-roman{font-family: var(--serif);  font-size: 56px; line-height: .9; color: var(--accent)}
.np-title{
  display: block;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(255,255,255,0.7); margin-bottom: 2px;
}
.bench-nameplate h3{
  font-family: var(--serif); font-weight: 500; font-size: 32px; line-height: 1; margin: 0;
  color: #fff;
}
.bench-nameplate h3 em{color: var(--accent)}
.np-sub{
  display: block; margin-top: 4px;
  font-family: var(--serif);  font-size: 14px; color: rgba(255,255,255,0.7);}

/* Control bar */
.ctrl-bar{
  display: grid; grid-template-columns: auto auto 1fr; gap: 14px; align-items: center;
  padding: 18px 20px; background: var(--s-paper); border: 1px solid var(--s-ink);
}
.ctrl-primary{
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--s-ink); color: var(--s-paper); border: 0;
  padding: 14px 22px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  transition: all .2s;
}
.ctrl-primary:hover:not(:disabled){background: var(--s-accent)}
.ctrl-primary:disabled{opacity: .45; cursor: not-allowed}
.cp-dot{width: 8px; height: 8px; background: var(--accent); border-radius: 50%; display: inline-block}
.ctrl-secondary{
  background: transparent; color: var(--s-ink); border: 1px solid var(--s-ink);
  padding: 14px 20px; cursor: pointer;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  transition: all .2s;
}
.ctrl-secondary:hover:not(:disabled){background: var(--s-ink); color: var(--s-paper)}
.ctrl-secondary:disabled{opacity: .35; cursor: not-allowed}

.ctrl-clock{
  justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  padding-left: 22px; border-left: 1px solid var(--s-rule); margin-left: 10px;
}
.clock-face{
  font-family: var(--serif); font-size: 38px; line-height: 1; color: var(--s-ink);
  letter-spacing: 0.02em; font-feature-settings: "tnum" 1;
}
.clock-face .colon{color: var(--s-accent); margin: 0 2px}
.clock-label{
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--s-ink-2);
}

/* Time is up. The clock stops here; the room stays open until the exchange
   on the record lands, so this has to be impossible to miss, otherwise the
   session looks like it simply forgot to end. See TestDrive.grace. */
.ctrl-clock.is-up .clock-face{color: #c96b6b}
.ctrl-clock.is-up .clock-label{color: #c96b6b; opacity: 1}
.ctrl-clock.is-up{animation: clockAlarm 1.1s ease-in-out 3}
@keyframes clockAlarm{0%,100%{opacity: 1}50%{opacity: .45}}

/* Transcript */
.transcript{background: var(--s-paper); border: 1px solid var(--s-rule-strong)}
.tr-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px; border-bottom: 1px dashed var(--s-rule-strong);
}
.tr-body{padding: 22px 24px; min-height: 120px}
.tr-empty{
  font-family: var(--serif);  font-size: 15px; color: var(--s-ink-2); margin: 0;}
.tr-empty em{color: var(--s-accent);}
.tr-you{
  display: flex; align-items: center; gap: 12px;
  font-family: var(--serif); font-size: 15px; color: var(--s-ink); margin: 0;
}
.tr-spk{
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--s-accent); padding: 4px 8px; border: 1px solid var(--s-accent);
}
.tr-dots{color: var(--s-accent); letter-spacing: 2px; animation: dots 1.4s steps(3) infinite}
@keyframes dots{0%,33%{opacity:.3}66%{opacity:.7}100%{opacity:1}}

/* Right rail */
.docket-right{
  display: flex; flex-direction: column; gap: 20px;
  position: sticky; top: 88px; align-self: start;
}
.coach-card, .progress-card{
  background: var(--s-paper); border: 1px solid var(--s-ink); padding: 22px 22px 20px;
}
.coach-card h3{
  font-family: var(--serif); font-weight: 600; font-size: 22px; line-height: 1.2;
  margin: 10px 0 10px; color: var(--s-ink);
}
.coach-card p{
  font-family: var(--serif); font-size: 14.5px; line-height: 1.55; color: var(--s-ink-2); margin: 0;
}
.progress-card{padding-bottom: 18px}
.prog-row{
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0; border-bottom: 1px dashed var(--s-rule);
  font-family: var(--mono); font-size: 11px;
}
.prog-row:last-of-type{border-bottom: 0}
.prog-k{letter-spacing: 0.2em; text-transform: uppercase; color: var(--s-ink-2)}
.prog-v{color: var(--s-ink); font-family: var(--serif); font-size: 14px;}
.prog-v .muted{color: var(--s-ink-2); opacity: .6}
.prog-bar{
  height: 3px; background: var(--s-rule); margin: 12px 0 8px; overflow: hidden;
}
.prog-fill{display: block; height: 100%; background: var(--s-accent); transition: width .4s ease}
.prog-foot{
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--s-ink-2); opacity: .8;
}
.legal-fineprint{
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--s-ink-2); opacity: .55; line-height: 1.6; padding: 4px 4px;
}

/* ============================================================
   OPTION B, DEPOSITION ROOM
   ============================================================ */
.session-b{
  display: grid; grid-template-columns: 380px 1fr;
  min-height: calc(100vh - 68px); background: var(--paper);
}

/* Left: counsel's clipboard (dark panel) */
.depo-left{background: var(--paper-2); border-right: 1px solid rgba(231,235,242,0.12); color: var(--ink)}
.depo-left-inner{
  padding: 32px 28px 24px; display: flex; flex-direction: column; height: 100%;
}
.clip-head{margin-bottom: 18px}
.clip-head h2{
  font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.05;
  margin: 8px 0 10px; color: var(--ink);
}
.clip-head h2 em{color: var(--accent); font-weight: 500}
.clip-theme{
  font-family: var(--serif);  font-size: 14px; color: var(--ink-2); margin: 0;
  padding-bottom: 14px; border-bottom: 1px solid rgba(231,235,242,0.12);}
.clip-list{
  list-style: none; padding: 0; margin: 0; flex: 1;
  overflow: auto; max-height: calc(100vh - 340px);
}
.clip-item{border-bottom: 1px dashed rgba(231,235,242,0.12)}
.clip-btn{
  display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: baseline;
  width: 100%; background: transparent; border: 0; padding: 14px 4px;
  font-family: inherit; color: inherit; cursor: pointer; text-align: left;
  transition: all .2s;
}
.clip-btn:hover{background: rgba(126,155,200,0.07)}
.clip-num{
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--accent); padding-top: 2px;
}
.clip-q{
  font-family: var(--serif); font-size: 14.5px; line-height: 1.4; color: var(--ink);
  transition: color .2s;
}
.clip-item.asked .clip-q{color: var(--ink-2); text-decoration: line-through; text-decoration-color: rgba(126,155,200,0.45)}
.clip-item.asked .clip-num{color: var(--ink-2)}
.clip-foot{
  padding-top: 18px; margin-top: 14px; border-top: 1px solid rgba(231,235,242,0.12);
  display: flex; flex-direction: column; gap: 22px;
}
.clip-back{
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-2); text-decoration: none;
}
.clip-back:hover{color: var(--accent)}
.clip-sig{display: flex; flex-direction: column; gap: 4px}
.sig-line{display: block; height: 1px; background: var(--ink-2); width: 60%}
.sig-label{
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-2);
}

/* Right: deposition stage */
.depo-right{
  position: relative; overflow: hidden; background: #0c1220;
}
.depo-video{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.9) contrast(1.02);
}
.depo-scrim{
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, transparent 25%, transparent 60%, rgba(0,0,0,0.75) 100%);
  pointer-events: none;
}

.depo-stamp-tl, .depo-stamp-tr{
  position: absolute; top: 28px; color: #fff; z-index: 4;
  display: flex; flex-direction: column; gap: 4px;
}
.depo-stamp-tl{left: 28px}
.depo-stamp-tr{right: 28px; text-align: right}
.ds-kicker{
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent);
}
.ds-name{
  font-family: var(--serif);  font-size: 16px; color: rgba(255,255,255,0.9);}

/* Typographic clock (right-center, floating) */
.depo-clock{
  position: absolute; top: 72px; right: 28px; z-index: 3;
  font-family: var(--serif); color: #fff; text-align: right;
  line-height: .85;
}
.depo-clock .dc-m, .depo-clock .dc-s{font-size: 72px; font-feature-settings: "tnum" 1}
.depo-clock .dc-colon{font-size: 72px; color: var(--depo-accent, var(--accent)); margin: 0 2px}
.depo-clock .dc-label{
  display: block; margin-top: 6px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

/* Witness plate (bottom-left) */
.depo-plate{
  position: absolute; left: 36px; bottom: 120px; z-index: 3;
  max-width: min(420px, calc(100% - 380px));
  display: grid; grid-template-columns: 68px 1fr; gap: 16px; align-items: end;
  color: #fff; max-width: 520px;
}
.dp-roman{font-family: var(--serif);  font-size: 68px; line-height: .9; color: var(--accent)}
.dp-kicker{
  display: block;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: rgba(255,255,255,0.65); margin-bottom: 2px;
}
.depo-plate h3{
  font-family: var(--serif); font-weight: 500; font-size: 34px; line-height: 1.05; margin: 0;
  color: #fff;
}
.depo-plate h3 em{color: var(--accent)}
.dp-cred{
  display: block; margin-top: 4px;
  font-family: var(--serif);  font-size: 13px; color: rgba(255,255,255,0.7);}

/* Controls (bottom-center) */
.depo-controls{
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 40px; z-index: 4;
  display: flex; gap: 14px;
}
.ctrl-primary.dark{
  background: var(--accent); color: var(--paper); padding: 16px 28px;
}
.ctrl-primary.dark:hover:not(:disabled){background: var(--accent)}
.ctrl-primary.dark .cp-dot{background: var(--s-accent)}
.ctrl-secondary.light{
  background: transparent; color: var(--ink); border-color: rgba(231,235,242,0.55); padding: 16px 22px;
}
.ctrl-secondary.light:hover:not(:disabled){background: rgba(231,235,242,0.08); color: #fff}

/* Status chip */
.depo-status{
  position: absolute; top: 28px; right: 28px; z-index: 3;
  transform: translateY(76px);
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px;
  background: rgba(0,0,0,0.5); border: 1px solid rgba(255,255,255,0.15);
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.depo-status .dot{
  width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.5); display: inline-block;
}
.depo-status .dot.live{background: var(--accent); box-shadow: 0 0 0 4px rgba(126,155,200,0.28); animation: pulse 1.8s ease-in-out infinite}

/* Coaching strip (right edge, below clock) */
.depo-coach{
  position: absolute; right: 28px; bottom: 40px; z-index: 3;
  max-width: 300px; padding: 18px 20px;
  background: rgba(10,7,6,0.7); border: 1px solid rgba(126,155,200,0.35); color: var(--ink);
  backdrop-filter: blur(6px);
}
.depo-coach h4{
  font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.15; margin: 8px 0 8px;
  color: #fff;
}
.depo-coach p{
  font-family: var(--serif);  font-size: 13.5px; line-height: 1.5;
  color: rgba(231,235,242,0.85); margin: 0;}

/* ============================================================
   TWEAKS PANEL
   ============================================================ */
.tweaks-panel{
  position: fixed; right: 20px; bottom: 20px; width: 320px; z-index: 200;
  background: var(--s-ink); color: var(--s-paper); border: 1px solid #000;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.5);
}
.tweaks-head{
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid rgba(231,235,242,0.15);
}
.tweaks-head .rail-kicker{color: var(--accent)}
.tweaks-close{
  background: transparent; border: 0; color: var(--s-paper); cursor: pointer; font-size: 22px;
  width: 28px; height: 28px; line-height: 1;
}
.tweaks-body{padding: 16px 18px 20px; display: flex; flex-direction: column; gap: 16px}
.tweak-row label{
  display: block; margin-bottom: 8px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(231,235,242,0.6);
}
.seg{display: flex; flex-wrap: wrap; gap: 6px}
.seg.vertical{flex-direction: column}
.seg button{
  background: transparent; border: 1px solid rgba(231,235,242,0.25); color: var(--s-paper);
  padding: 8px 12px; cursor: pointer; text-align: left;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  transition: all .2s;
}
.seg button:hover{border-color: var(--accent); color: var(--accent)}
.seg button.on{background: var(--accent); color: var(--s-ink); border-color: var(--accent)}

/* Color swatch segments (accent / room tone) */
.seg.color-seg{flex-wrap: wrap; gap: 8px}
.seg.color-seg button{
  padding: 4px; width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(231,235,242,0.25);
  background: transparent;
}
.seg.color-seg button:hover{border-color: rgba(231,235,242,0.6)}
.seg.color-seg button.on{
  border-color: var(--accent); background: transparent;
  box-shadow: 0 0 0 2px rgba(126,155,200,0.35);
}
.seg.color-seg .sw{
  display: block; width: 100%; height: 100%;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.2);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1280px){
  .docket{grid-template-columns: 280px 1fr 280px; gap: 20px}
  .cs-inner{grid-template-columns: 1fr 1.2fr 1.5fr; gap: 24px}
  .cs-inner .cs-right{display: none}
  .depo-clock{top: 64px}
  .depo-clock .dc-m, .depo-clock .dc-s, .depo-clock .dc-colon{font-size: 60px}
  .depo-plate{max-width: min(360px, calc(100% - 340px))}
  .depo-plate h3{font-size: 26px}
  .depo-coach{max-width: 260px}
}
@media (max-width: 1024px){
  .docket{grid-template-columns: 1fr; gap: 24px}
  .docket-left, .docket-right{position: static; max-height: none}
  /* Stack deposition room: left column, then right column flows normally */
  .session-b{grid-template-columns: 1fr}
  .depo-left{border-right: 0; border-bottom: 1px solid var(--depo-panel-rule, rgba(231,235,242,0.12))}
  .depo-right{display: flex; flex-direction: column; min-height: auto}
  .depo-video{position: static; width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover}
  .depo-scrim{display: none}
  .depo-stamp-tl, .depo-stamp-tr, .depo-clock, .depo-plate, .depo-controls, .depo-coach, .depo-status{
    position: static; margin: 0;
  }
  .depo-stamp-tl, .depo-stamp-tr{
    display: flex; flex-direction: row; justify-content: space-between; align-items: baseline;
    padding: 14px 24px; background: var(--depo-panel, var(--paper-2));
    border-bottom: 1px solid var(--depo-panel-rule, rgba(231,235,242,0.12));
  }
  .depo-stamp-tr{display: none}
  .depo-clock{
    text-align: left; padding: 20px 24px 12px;
    background: var(--depo-panel, var(--paper-2));
  }
  .depo-clock .dc-m, .depo-clock .dc-s, .depo-clock .dc-colon{font-size: 56px}
  .depo-plate{
    max-width: none; padding: 20px 24px; grid-template-columns: 60px 1fr;
    background: var(--depo-panel, var(--paper-2));
  }
  .depo-plate h3{font-size: 26px}
  .depo-coach{
    max-width: none; margin: 0 24px 20px; padding: 18px 20px;
  }
  .depo-controls{padding: 0 24px 16px; justify-content: flex-start}
  .depo-status{padding: 12px 24px 24px}
}
@media (max-width: 720px){
  .session-b{grid-template-columns: 1fr}
  .depo-left{border-right: 0; border-bottom: 1px solid rgba(231,235,242,0.12)}
  .cs-inner{grid-template-columns: 1fr; gap: 12px; padding: 14px 20px}
  .ctrl-bar{grid-template-columns: 1fr; gap: 10px}
  .ctrl-clock{justify-self: start; padding-left: 0; border-left: 0; margin-left: 0; padding-top: 12px; border-top: 1px solid var(--s-rule); width: 100%}
  .bench-nameplate h3{font-size: 24px}
  .depo-coach{display: none}
}


/* ==================================================================
   THE POST-SESSION REPORT
   Shared by every test-drive room: the wait, the memo, the seat swap.
   The markup that uses these is built by /test-drive/report.js.
   ================================================================== */
/* ---------- The report ----------
   Unlike the voir dire reveal, this cannot be computed here: the
   backend reads the transcript back and writes it, which takes about
   eighty-five seconds. So the wait is designed rather than spinnered,
   and the one question worth asking of somebody who is already
   waiting lives inside it. The report is never gated on answering. */
.report{display:none;padding:56px 0 12px;border-top:1px solid var(--s-rule);margin-top:40px}
.report.is-on{display:block}
.report-inner{max-width:1180px;margin:0 auto;padding:0 24px}
.report-head{max-width:820px;margin-bottom:36px}
.report-head h2{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(34px,5vw,52px);line-height:1.06;letter-spacing:-0.02em;
  color:var(--s-ink);margin:10px 0 0;
}
.report-head h2 em{color:var(--s-accent);font-style:italic}
/* Headlines come back anywhere from one short line to a full paragraph.
   Display type at 52px turns 180 characters into five lines and most of
   a screen, so the scale steps down by length. */
.report-head h2[data-len="medium"]{font-size:clamp(27px,3.6vw,38px);line-height:1.16}
.report-head h2[data-len="long"]{font-size:clamp(23px,2.8vw,30px);line-height:1.3;letter-spacing:-0.01em}
.report-sub{font-family:var(--serif);font-size:17px;line-height:1.6;color:var(--s-ink-2);margin:12px 0 0}
/* Sets the register before the first line of the memo does it for
   us. Without this the third person reads as a mistake. */
.report-frame{font-family:var(--serif);font-size:15.5px;line-height:1.62;color:var(--s-ink-2);
  margin:14px 0 0;max-width:700px;padding-left:14px;border-left:2px solid var(--s-rule)}

/* Wait phase. The steps describe what the scorer is doing and the
   last one holds rather than pretending to finish early. */
.rp-steps{list-style:none;margin:0 0 34px;padding:0;max-width:520px}
.rp-steps li{
  display:flex;align-items:center;gap:12px;padding:9px 0;
  font-family:var(--mono);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--s-ink-2);opacity:.4;transition:opacity .4s ease,color .4s ease;
}
.rp-steps .rp-tick{
  width:9px;height:9px;border:1px solid var(--s-ink-2);border-radius:50%;flex-shrink:0;
  transition:background .4s ease,border-color .4s ease;
}
.rp-steps li.is-doing{opacity:1;color:var(--s-ink)}
.rp-steps li.is-doing .rp-tick{border-color:var(--s-accent);animation:rpPulse 1.3s ease-in-out infinite}
.rp-steps li.is-done{opacity:.75}
.rp-steps li.is-done .rp-tick{background:var(--s-accent);border-color:var(--s-accent);animation:none}
@keyframes rpPulse{0%,100%{transform:scale(.85);opacity:.5}50%{transform:scale(1);opacity:1}}

.rp-capture{max-width:520px;padding:24px 26px;border:1px solid var(--s-rule);border-left:2px solid var(--s-accent)}
.rp-capture h3{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.2;margin:0 0 6px;color:var(--s-ink)}
.rp-capture h3 em{color:var(--s-accent);font-style:italic}
.rp-capture p{font-family:var(--serif);font-size:15px;line-height:1.6;color:var(--s-ink-2);margin:0 0 16px}
.rp-form{display:flex;gap:8px;flex-wrap:wrap}
.rp-form input{
  flex:1 1 240px;min-width:0;padding:11px 13px;
  font-family:var(--mono);font-size:12px;letter-spacing:0.04em;
  color:var(--s-ink);background:transparent;border:1px solid var(--s-rule);
}
.rp-form input:focus{outline:none;border-color:var(--s-accent)}
.rp-form input:disabled{opacity:.5}
.rp-form button{
  padding:11px 18px;cursor:pointer;
  font-family:var(--mono);font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--s-paper);background:var(--s-ink);border:1px solid var(--s-ink);
}
.rp-form button:disabled{opacity:.45;cursor:default}
.rp-note{font-family:var(--mono);font-size:8.5px;letter-spacing:0.16em;text-transform:uppercase;
  color:var(--s-ink-2);opacity:.8;margin:12px 0 0;line-height:1.7}
.rp-note.is-bad{color:#8c4a4a;opacity:1}

.rp-sharpest{margin-top:34px;padding:26px 28px;border:1px solid var(--s-rule);
  border-left:2px solid var(--s-accent);max-width:900px}
.rp-sharpest .rp-k{font-family:var(--mono);font-size:9px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--s-ink-2);display:block;margin-bottom:6px}
.rp-sharpest .rp-q{font-family:var(--serif);font-size:20px;line-height:1.4;color:var(--s-ink);margin:0 0 18px}
.rp-sharpest .rp-a{font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.5;
  color:var(--s-ink-2);margin:0 0 18px}
.rp-sharpest .rp-why{font-family:var(--serif);font-size:15.5px;line-height:1.6;color:var(--s-ink);margin:0}
.rp-gate{margin-top:34px;padding-top:26px;border-top:1px solid var(--s-rule);max-width:820px}
.rp-mailme{max-width:520px;margin:0;padding:22px 24px;border:1px solid var(--s-rule);
  border-left:2px solid var(--s-accent)}
.rp-mailme h3{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.2;
  margin:0 0 14px;color:var(--s-ink)}
.rp-mailme h3 em{color:var(--s-accent);font-style:italic}
/* ---------- The number ----------
   All that survives of the scorecard on this page. The rest is
   sealed and mailed as a PDF. */
.rp-verdictline{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.rp-score{display:flex;align-items:baseline;gap:3px;font-family:var(--serif);color:var(--s-ink)}
.rp-score b{font-size:46px;font-weight:400;line-height:1;color:var(--band, var(--s-ink))}
.rp-score i{font-style:normal;font-family:var(--mono);font-size:11px;letter-spacing:0.16em;color:var(--s-ink-2)}

/* The number is the first thing read, so it says which kind of day it was
   before the verdict sentence gets a chance to. */
.rp-verdictline.is-poor{--band:#c96b6b}
.rp-verdictline.is-fair{--band:#c9a961}
.rp-verdictline.is-strong{--band:#7fae7f}.rp-verdict{font-family:var(--serif);font-size:16.5px;line-height:1.55;color:var(--s-ink-2);
  margin:16px 0 0;max-width:820px}

/* ---------- The seat swap ----------
   Built from existing tokens only. The headline is the largest type
   on the page on purpose: it is the moment the demo stops being one
   exercise and becomes a set. */
.swap{margin-top:44px;padding-top:36px;border-top:1px solid var(--s-rule)}
.swap-stamp{
  font-family:var(--mono);font-size:9px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--s-ink-2);margin:10px 0 0;
}
.swap-setup{
  font-family:var(--serif);font-size:clamp(19px,2vw,24px);line-height:1.4;
  color:var(--s-ink-2);margin:30px 0 6px;max-width:900px;
}
.swap-turn{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(46px,7vw,104px);line-height:.98;letter-spacing:-0.025em;
  color:var(--s-ink);margin:0;max-width:14ch;
}
.swap-turn em{color:var(--s-accent);font-style:italic}

.swap-cta{
  display:inline-flex;align-items:center;gap:28px;margin-top:38px;
  padding:22px 34px;text-decoration:none;
  background:var(--s-ink);border:1px solid var(--s-ink);
  transition:background .25s ease,border-color .25s ease,gap .25s ease;
}
.swap-cta:hover{background:var(--s-accent);border-color:var(--s-accent);gap:40px}
.swap-cta .sc-seat{
  font-family:var(--mono);font-size:9px;letter-spacing:0.22em;text-transform:uppercase;
  color:var(--s-paper);opacity:.7;display:block;margin-bottom:6px;
}
.swap-cta .sc-label{font-family:var(--serif);font-size:26px;line-height:1;color:var(--s-paper)}
.swap-cta .sc-arrow{font-family:var(--serif);font-size:26px;color:var(--s-paper);line-height:1}

/* The report and the full set are still reachable, just no longer
   the loudest thing on the screen. */
.swap-links{display:flex;flex-wrap:wrap;gap:26px;margin:30px 0 0}
.swap-links a{
  font-family:var(--mono);font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;
  color:var(--s-ink-2);text-decoration:none;border-bottom:1px solid var(--s-rule);padding-bottom:3px;
  transition:color .2s ease,border-color .2s ease;
}
.swap-links a:hover{color:var(--s-accent);border-color:var(--s-accent)}
@media(max-width:640px){
  .swap-cta{gap:20px;padding:18px 22px}
  .swap-cta:hover{gap:26px}
}


/* Sits between the section kicker and the frame, so the room says what
   is about to happen before the face does. */
.room-title{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(30px,3.2vw,44px);line-height:1.06;letter-spacing:-0.02em;
  color:var(--s-ink);margin:0 0 4px;max-width:20ch;
}
.room-title em{color:var(--s-accent);font-style:italic}

/* ==================================================================
   LIVE COACHING
   Shared by every room. The markup is built by /test-drive/room.js.
   ================================================================== */
/* ---------- Live coaching ----------
   The static tip is the resting state; this is the same panel with a
   question box on it. Streams, and that is the point, the first
   words land in about a second against ninety for the report. */
.coach-live{margin-top:18px;padding-top:16px;border-top:1px solid var(--s-rule)}
.coach-form{display:flex;gap:6px}
.coach-form input{flex:1 1 auto;min-width:0;padding:9px 11px;
  font-family:var(--mono);font-size:11px;color:var(--s-ink);background:transparent;
  border:1px solid var(--s-rule)}
.coach-form input:focus{outline:none;border-color:var(--s-accent)}
.coach-form button{padding:9px 13px;cursor:pointer;font-family:var(--mono);font-size:8.5px;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--s-paper);background:var(--s-ink);
  border:1px solid var(--s-ink)}
.coach-form button:disabled{opacity:.45;cursor:default}
.coach-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.coach-chips button{cursor:pointer;padding:4px 8px;background:transparent;
  font-family:var(--mono);font-size:8px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--s-ink-2);border:1px solid var(--s-rule)}
.coach-chips button:hover{color:var(--s-ink);border-color:var(--s-accent)}
/* "What do I say?" leads in every room. A visitor who is simply lost
   shouldn't have to compose a sentence to get help, so it takes the whole
   first row and reads as the way in rather than as one option of five. */
.coach-chips button.chip-open{
  flex:1 0 100%;padding:6px 9px;margin-bottom:2px;text-align:left;
  color:var(--s-accent);border-color:var(--s-accent);letter-spacing:0.18em;
}
.coach-chips button.chip-open:hover{background:rgba(126,155,200,0.1);color:var(--s-ink)}
.coach-out{margin-top:14px}
.coach-say{font-family:var(--serif);font-size:15.5px;line-height:1.55;color:var(--s-ink);
  margin:0;padding-left:12px;border-left:2px solid var(--s-accent);white-space:pre-wrap}
.coach-why{font-family:var(--serif);font-size:13.5px;line-height:1.6;color:var(--s-ink-2);
  margin:10px 0 0;white-space:pre-wrap}
.coach-out.is-bad .coach-say{border-left-color:#8c4a4a;color:#8c4a4a}
.coach-cursor::after{content:"▍";color:var(--s-accent);animation:cBlink 1s step-end infinite}
@keyframes cBlink{50%{opacity:0}}

/* Name field. Counsel uses no name when it is absent, which is right, 
   better than the invented one it used to reach for. */
.ctrl-name{display:flex;flex-direction:column;gap:3px;margin-right:4px}
.ctrl-name span{font-family:var(--mono);font-size:8px;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--s-ink-2)}
.ctrl-name input{width:150px;padding:7px 9px;font-family:var(--mono);font-size:11px;
  color:var(--s-ink);background:transparent;border:1px solid var(--s-rule)}
.ctrl-name input:focus{outline:none;border-color:var(--s-accent)}
.ctrl-name input:disabled{opacity:.5}

/* The record rows no longer expand: ws/room serves the six sworn
   lines but carries no per-line note, so there is nothing behind a
   chevron. Same row layout, minus the affordance. */
.topic-btn.is-static{cursor:default}
.topic-btn.is-static:hover{background:transparent}

/* Counsel pick, before the room goes live. Three across, same card
   treatment as /stand and /judge. */
.td-counsel{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:1400px){.td-counsel{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.td-counsel{grid-template-columns:1fr}}
.pick-error{
  font-family:var(--serif);font-size:17px;line-height:1.6;color:#c96b6b;
  padding:26px 0;margin:0;
}

/* ==================================================================
   THE RETURN FEED
   Shared. Markup is built by /test-drive/room.js.
   ================================================================== */
/* A video call shows you your own face. These rooms do the same, so
   you see yourself the way the person across from you does. Video
   only: the avatar SDK owns the microphone, and taking audio here as
   well can pull the device out from under it. */
.selfview{
  position:absolute;right:14px;bottom:14px;z-index:6;
  width:26%;min-width:132px;max-width:236px;aspect-ratio:4/3;
  border:1px solid rgba(231,235,242,0.28);
  background:#05080f;overflow:hidden;
  box-shadow:0 8px 28px rgba(0,0,0,0.45);
}
.selfview video{
  width:100%;height:100%;object-fit:cover;display:block;
  /* Mirror it, people expect a mirror when they see themselves. */
  transform:scaleX(-1);
  opacity:0;transition:opacity .4s ease;
}
.selfview.is-on video{opacity:1}
.selfview .sv-label{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  font-family:var(--mono);font-size:8.5px;letter-spacing:0.22em;text-transform:uppercase;
  color:rgba(231,235,242,0.9);background:linear-gradient(to top, rgba(5,8,15,0.85), transparent);
  padding:12px 8px 6px;text-align:center;
}
.selfview .sv-placeholder{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:10px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:0.18em;text-transform:uppercase;
  color:rgba(231,235,242,0.5);line-height:1.6;
}
.selfview.is-on .sv-placeholder{display:none}
.selfview.is-denied{border-color:rgba(201,107,107,0.5)}
.selfview.is-denied .sv-placeholder{color:rgba(201,107,107,0.85)}
@media(max-width:720px){
  .selfview{width:34%;min-width:104px;right:10px;bottom:10px}
}

/* ---- the preview ------------------------------------------------------
   What comes back instead of the scorecard: the number, how it landed,
   the one exchange shown whole, and the category held back. */
.rp-outcome{margin-top:30px;padding:22px 26px;border:1px solid var(--s-rule);
  border-left:2px solid var(--s-accent);max-width:820px}
.rp-outcome .rp-k{display:block;font-family:var(--mono);font-size:9px;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--s-ink-2);margin-bottom:10px}
.rp-outcome-line{font-family:var(--serif);font-size:26px;line-height:1.2;color:var(--s-ink);margin:0}
.rp-outcome-line b{font-weight:400}
.rp-outcome-line span{color:var(--s-ink-2)}
.rp-outcome-sum{font-family:var(--serif);font-size:15.5px;line-height:1.6;
  color:var(--s-ink-2);margin:10px 0 0}
.rp-outcome-sum:empty{display:none}

.rp-payoff-top{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  flex-wrap:wrap;margin-bottom:10px}
.rp-payoff-at{font-family:var(--mono);font-size:9px;letter-spacing:0.2em;
  text-transform:uppercase;color:var(--s-ink-2)}
.rp-payoff-top .rp-k{margin:0}

/* The hook. It sits directly on the form because the unexplained number
   is what earns the address, not the list of what is missing. */
.rp-sting{margin-top:34px;padding:26px 28px;border:1px solid var(--s-accent);
  background:rgba(126,155,200,0.05);max-width:820px}
.rp-sting .rp-k{display:block;font-family:var(--mono);font-size:9px;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--s-accent);margin-bottom:12px}
.rp-sting-line{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.rp-sting-name{font-family:var(--serif);font-size:30px;line-height:1.1;color:var(--s-ink)}
.rp-sting-score{font-family:var(--serif);font-size:46px;line-height:1;
  color:var(--band, var(--s-ink))}
.rp-sting-score.is-poor{--band:#8c4a4a}
.rp-sting-score.is-fair{--band:#8a7433}
.rp-sting-score.is-strong{--band:#4d6b4d}
.rp-sting-note{font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.55;
  color:var(--s-ink-2);margin:14px 0 0}
.rp-sting.is-bare .rp-k,.rp-sting.is-bare .rp-sting-line,.rp-sting.is-bare .rp-sting-note{display:none}

.rp-withheld{list-style:none;margin:18px 0 0;padding:18px 0 0;
  border-top:1px solid var(--s-rule);display:flex;flex-wrap:wrap;gap:8px 28px}
.rp-withheld:empty{display:none}
.rp-withheld li{font-family:var(--mono);font-size:9.5px;letter-spacing:0.16em;
  text-transform:uppercase;color:var(--s-ink-2)}
.rp-withheld b{font-family:var(--serif);font-size:17px;letter-spacing:0;
  color:var(--s-ink);margin-right:6px}

@media(max-width:720px){
  .rp-sting{padding:22px 20px}
  .rp-sting-name{font-size:24px}
  .rp-sting-score{font-size:38px}
  .rp-outcome{padding:18px 20px}
  .rp-outcome-line{font-size:21px}
}