/* ============================================================
   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}
.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}
.session-nav-right{flex:0 0 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)}

/* ============================================================
   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)}
.topic-body{
  max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .25s ease;
}
.topic.open .topic-body{max-height: 200px; 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);
}

/* 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}
}