/* Director's Chair - page styles. Uses tokens.css. No external requests. */
*{box-sizing:border-box}
html{-webkit-tap-highlight-color:transparent}
body{min-height:100vh;display:flex;flex-direction:column;padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 24px;border-bottom:1px solid var(--line)}
.brandname{font-weight:var(--w-bold);font-size:var(--t-headline)}
#app{flex:1;padding:24px;max-width:1500px;width:100%;margin:0 auto}
.loading{font-size:var(--t-headline)}
.muted{color:var(--muted)}
.ic img{width:48px;height:48px;display:block}
.dc-btn .ic{flex:none}
.dc-btn{max-width:100%;text-align:center;line-height:1.15}
.dc-btn span{min-width:0}
.dc-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;border-style:dashed}
.dc-btn--small{min-height:var(--target);font-size:var(--t-caption);padding:0 16px}
[data-mode="trudy"] .dc-btn--auto{width:auto}
.row{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:stretch}
.row>.dc-btn{flex:1 1 200px}
.row.three>.dc-btn{flex:1 1 150px;padding:0 12px}
.dc-btn--primary .ic img{filter:brightness(0) invert(1)}
@media (prefers-color-scheme: dark){.dc-btn--primary .ic img{filter:brightness(0)}}
h1,h2,h3{margin:0 0 12px;line-height:var(--lh-tight)}
h1{font-size:var(--t-hero)}h2{font-size:var(--t-title)}h3{font-size:var(--t-headline)}

/* tabs (pro and attorney) */
.tabs{display:flex;gap:8px;padding:8px 24px;border-bottom:1px solid var(--line);overflow-x:auto}
.tab{font:inherit;font-weight:var(--w-semibold);min-height:var(--target);padding:0 20px;border-radius:var(--r-pill);border:2px solid var(--control-line);background:var(--surface);color:var(--text);cursor:pointer;white-space:nowrap}
.tab[aria-selected="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

/* Trudy home tiles */
.welcome{font-size:var(--t-headline);margin:0 0 24px}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:24px}
.tile{font:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-height:260px;padding:24px;border-radius:var(--r-card);border:4px solid var(--control-line);background:var(--surface);color:var(--text);cursor:pointer;touch-action:manipulation}
.tile .ic img{width:96px;height:96px}
.tile b{font-size:var(--t-hero)}
.tile small{font-size:var(--t-body);color:var(--muted)}

/* player */
.player{display:grid;gap:24px}
@media (min-width:1000px){.player{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:start}}
.vwrap{position:relative;background:#000;border-radius:var(--r-card);overflow:hidden;aspect-ratio:16/9}
.vwrap video{width:100%;height:100%;display:block;background:#000}
.caps{--capk:1;margin-top:12px;min-height:calc(2.6em * var(--capk));padding:12px 16px;border-radius:var(--r-control);background:#000;color:#fff;font-size:calc(var(--t-caption) * 1.15 * var(--capk));line-height:1.35;text-align:center;border:2px solid var(--control-line)}
.caps[data-off="1"]{display:none}
.blockedcard{padding:32px;border:4px solid var(--block);background:var(--block-soft);border-radius:var(--r-card)}
.blockedcard h2{color:var(--block)}
.ctl{display:grid;gap:var(--s-2)}
.where{font-size:var(--t-headline);font-weight:var(--w-bold)}
.where small{display:block;font-weight:var(--w-regular);font-size:var(--t-caption);color:var(--muted)}
.strip{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x proximity}
.chap{font:inherit;flex:0 0 auto;width:170px;min-height:var(--target);scroll-snap-align:start;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px;padding:8px 14px;border-radius:var(--r-control);border:3px solid var(--control-line);background:var(--surface);color:var(--text);cursor:pointer;text-align:left;touch-action:manipulation}
[data-mode="trudy"] .chap{min-height:110px}
.chap b{font-size:var(--t-body)}
.chap span{font-size:var(--t-caption);line-height:1.15;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.chap em{font-style:normal;font-size:var(--t-caption);font-weight:var(--w-semibold)}
.chap[aria-current="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 3px var(--accent)}
.chap[data-st="good"] em{color:var(--pass)}.chap[data-st="unsure"] em{color:var(--warn)}.chap[data-st="fix"] em{color:var(--block)}
.banner{padding:16px 20px;border-radius:var(--r-control);border:3px solid var(--control-line);background:var(--surface-2);font-size:var(--t-body);display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.banner[hidden]{display:none}
.banner.hold{border-color:var(--warn);background:var(--warn-soft)}
.noteline{padding:16px 20px;border-radius:var(--r-control);border:2px solid var(--line);background:var(--surface-2)}
.noteline .st{display:flex;gap:12px;align-items:center;font-weight:var(--w-semibold)}
.noteline .st .ic img{width:36px;height:36px}
.noteline p{margin:8px 0}
.dock{position:sticky;bottom:0;z-index:5;display:flex;gap:16px;padding:12px 24px calc(12px + env(safe-area-inset-bottom));background:var(--bg);border-top:3px solid var(--control-line)}
.dock .dc-btn{flex:1 1 0}
.tinytile{flex:0 0 auto}
.foot{padding:16px 24px;border-top:1px solid var(--line);display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between;color:var(--muted);font-size:var(--t-caption)}
.foot .notice{font-weight:var(--w-semibold);color:var(--text)}

/* sheets */
.sheet{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.55);display:flex;align-items:flex-end;justify-content:center;overflow:auto}
.sheet[hidden]{display:none}
.sheet .panel{background:var(--surface);color:var(--text);width:min(900px,100%);max-height:92vh;overflow:auto;border-radius:var(--r-card) var(--r-card) 0 0;padding:24px;display:grid;gap:16px}
.sheet textarea{font:inherit;font-size:var(--t-headline);width:100%;min-height:150px;padding:14px;border-radius:var(--r-control);border:3px solid var(--control-line);background:var(--surface);color:var(--text)}
.marks{display:flex;gap:10px;flex-wrap:wrap}
.mark{font:inherit;font-size:var(--t-caption);font-weight:var(--w-semibold);min-height:var(--target);padding:0 16px;border-radius:var(--r-pill);border:2px solid var(--control-line);background:var(--surface);color:var(--text);cursor:pointer}
.mark[aria-pressed="true"]{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
[data-mode="trudy"] .mark{min-height:90px}
.warn{padding:12px 16px;border-radius:var(--r-control);border:2px solid var(--warn);background:var(--warn-soft)}
audio{width:100%}
.rec{color:var(--block);font-weight:var(--w-bold)}

/* lists + attorney */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:20px;box-shadow:var(--shadow-card);margin-bottom:16px}
.card h3{margin-bottom:6px}
.lamps{display:grid;gap:10px;margin:12px 0}
.lamp{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;border-radius:var(--r-control);border:2px solid var(--control-line)}
.lamp.pass{border-color:var(--pass);background:var(--pass-soft)}
.lamp.block{border-color:var(--block);background:var(--block-soft)}
.lamp.note{border-color:var(--warn);background:var(--warn-soft)}
.lamp .ic img{width:40px;height:40px}
.lamp b{display:block}
.lamp code,.hash{font-family:var(--f-mono);word-break:break-all}
.cov{width:100%;border-collapse:collapse;margin-top:8px}
.cov th,.cov td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.bar{display:inline-block;width:120px;height:12px;border-radius:6px;background:var(--line);vertical-align:middle;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent)}
.bar.ok i{background:var(--pass)}
.sel{font:inherit;min-height:var(--target);padding:0 12px;border-radius:var(--r-control);border:2px solid var(--control-line);background:var(--surface);color:var(--text)}
.list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.item{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--surface)}
.item .meta{color:var(--muted);font-size:var(--t-caption)}
details>summary{cursor:pointer;min-height:var(--target);display:flex;align-items:center;font-weight:var(--w-semibold)}
.bigmsg{max-width:900px;margin:8vh auto;text-align:center}
.bigmsg h1{font-size:44px}.bigmsg p{font-size:30px;line-height:1.4}
.bigmsg .ic img{width:96px;height:96px;margin:0 auto 16px}
.row.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.row.three>.dc-btn{flex-direction:column;gap:6px;padding:8px 6px;font-size:calc(var(--t-button) * .85)}
.row.three>.dc-btn .ic img{width:40px;height:40px}

/* R4PHONE (11/03/26): iPhone portrait fixes. Trudy-mode type scaled down, compact dock, sticky video. */
@media (max-width:600px){
  :root{--t-body:17px;--t-headline:21px;--t-title:26px;--t-hero:30px;--t-button:18px;--t-caption:14px}
  [data-mode="trudy"]{--target:56px;--s-2:12px;--s-3:16px;--s-4:20px}
  .top,.tabs,.foot{padding-left:16px;padding-right:16px}
  .top{padding-top:10px;padding-bottom:10px}
  #app{padding:14px 16px}
  .dc-btn .ic img{width:30px;height:30px}
  .dock{gap:10px;padding:8px 16px calc(8px + env(safe-area-inset-bottom))}
  .dock .dc-btn{min-height:56px;padding:0 8px;font-size:15px;gap:6px;flex-direction:row;white-space:nowrap}
  .dock .dc-btn .ic img{width:22px;height:22px}
  [data-mode="trudy"] .dc-btn{min-height:56px}
  .tiles{grid-template-columns:1fr;gap:14px}
  .tile{min-height:140px;padding:16px;border-width:3px}
  .tile .ic img{width:60px;height:60px}
  .player{gap:14px}
  .vwrap{position:sticky;top:0;z-index:4;border-radius:12px;box-shadow:0 6px 14px rgba(0,0,0,.45)}
  .caps{margin-top:8px;padding:8px 12px;min-height:calc(2.4em * var(--capk))}
  .row.three>.dc-btn{min-height:76px;padding:6px 4px;font-size:15px}
  .row.three>.dc-btn .ic img{width:30px;height:30px}
  [data-mode="trudy"] .chap{min-height:84px;width:150px}
  .chap{width:150px}
  .card{padding:14px}
  .sheet .panel{padding:16px;max-height:88vh}
  .sheet textarea{font-size:18px;min-height:120px}
  .mark{min-height:48px}
  .banner{padding:12px 14px}
}

/* R4DEVICES (11/03/26): one layout that sizes itself to any screen. Fluid Trudy-mode type; phone, tablet, laptop and large-monitor tiers. */
[data-mode="trudy"]{--t-body:clamp(19px,2.3vw + 8px,28px);--t-headline:clamp(22px,2.7vw + 9px,34px);--t-title:clamp(27px,3.4vw + 10px,44px);--t-hero:clamp(31px,4.2vw + 12px,56px);--t-button:clamp(18px,2.6vw + 6px,34px);--t-caption:clamp(15px,1.7vw + 6px,24px)}
.bigmsg h1{font-size:clamp(30px,5vw,44px)}.bigmsg p{font-size:clamp(20px,3vw,30px)}
img,video{max-width:100%}
@media (min-width:601px) and (max-width:999px){            /* tablets, portrait */
  #app{padding:20px 24px}
  .vwrap{position:sticky;top:0;z-index:4;box-shadow:0 6px 14px rgba(0,0,0,.35)}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dock .dc-btn{font-size:clamp(18px,2.4vw,26px)}
}
@media (min-width:1000px) and (max-width:1399px){           /* tablets in landscape, small laptops */
  .player{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:20px}
  .vwrap{position:sticky;top:12px}
}
@media (min-width:1400px){                                   /* large monitors: keep lines readable */
  #app{max-width:1600px}
  .player{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:32px}
  .vwrap{position:sticky;top:16px}
}
@media (max-height:500px) and (orientation:landscape){      /* phones turned sideways: do not let the pinned video fill the screen */
  .vwrap{position:static;max-height:70vh;margin-inline:auto}
  .dock{position:static}
}
@media (hover:hover) and (pointer:fine){ .dc-btn:hover{filter:brightness(1.08)} }
@media (max-width:389px){ .dock .dc-btn .ic{display:none} .dock .dc-btn{font-size:16px} }

/* R4DOCK: fixed header, scrolling middle, fixed Message/Call strip. Nothing sits on top of anything else. */
html,body{height:100%}
body{height:100vh;height:100dvh;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.top,.tabs{flex:none}
#scroller{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#scroller #app{flex:none;padding-bottom:24px}
#dockbar{flex:none}
#dockbar:empty{display:none}
.dock{position:static}
.dockspace{display:none}