/* Night Shift styles, taken from the DUI Executive Assistant mockup and shared by the Case Report Assistant builders. */
[hidden]{display:none!important}
/* Layout: phone-width entry pane on the left, the Word-style report on the right; on a phone, one pane at a time with a bottom switcher. Dark first for night shifts. */
:root{
  --chart-head:#2b3339; --chart-line:#4b555d;
  --bg:#0e1113; --panel:#161b1f; --raised:#1e252a; --line:#2c343b;
  --fg:#e4e8ea; --muted:#8d979f; --accent:#f0b03a; --on-accent:#1b1304;
  --gap-bg:#4a3b0f; --gap-fg:#ffd977; --warn:#f2896d; --ok:#71c9a0;
  --paper:#1a1f23; --ink:#e9ecee;
  /* see-through tints of the accent, warning and ok colours, for browsers without color-mix() (iOS before 16.2, Chrome
     before 111); newer browsers use the color-mix() line that follows each of them */
  --accent-tint:rgba(240,176,58,.18); --warn-tint:rgba(242,137,109,.25); --ok-tint:rgba(113,201,160,.18);
  --ui:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --doc:"Tinos","Times New Roman",Times,serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark;
}
/* Themes (Josh, 2026-11-12). Dark above is the default for everyone, whatever the phone is set to: the app is made for night
   shifts. Two day themes are chosen in the Display panel (the Aa button on every screen) and set as data-theme on the page: Warm paper and Cool blue.
   Every colour in the app comes from these tokens, so a theme is this list and nothing else. The printed report is always
   black on white (the print rules below), whichever theme is on screen. */
:root[data-theme="paper"]{
  --chart-head:#e2d9c6; --chart-line:#3a3a3a;
  --bg:#f3eee2; --panel:#fbf8f0; --raised:#f1ebdc; --line:#ddd3bd;
  --fg:#221d14; --muted:#655c4c; --accent:#855600; --on-accent:#ffffff;
  --gap-bg:#ffe9a3; --gap-fg:#5a4300; --warn:#a8371c; --ok:#2a6b46;
  --paper:#fffdf8; --ink:#15120c; color-scheme:light;
  --accent-tint:rgba(133,86,0,.16); --warn-tint:rgba(168,55,28,.2); --ok-tint:rgba(42,107,70,.16)}
:root[data-theme="blue"]{
  --chart-head:#cfd8e3; --chart-line:#2f3a48;
  --bg:#e8edf2; --panel:#ffffff; --raised:#f1f5f9; --line:#cbd5df;
  --fg:#101a26; --muted:#51606f; --accent:#1d438a; --on-accent:#ffffff;
  --gap-bg:#fff0b0; --gap-fg:#5a4300; --warn:#b23b1e; --ok:#1f7a4d;
  --paper:#ffffff; --ink:#0d1320; color-scheme:light;
  --accent-tint:rgba(29,67,138,.14); --warn-tint:rgba(178,59,30,.2); --ok-tint:rgba(31,122,77,.16)}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--ui);font-size:calc(15px*var(--fs,1));line-height:1.45}
.wrap{max-width:calc(1440px*var(--fs,1));margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 110px}
.top{display:flex;flex-wrap:wrap;gap:8px 32px;align-items:end;margin-bottom:20px}
@media (max-width:899px){.top{flex-wrap:nowrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px}.top .lede{display:none}.top .eyebrow{display:none}.top h1{font-size:calc(20px*var(--fs,1))}.top .eyebrow{margin-bottom:2px}}
.eyebrow{margin:0 0 4px;font:500 calc(11px*var(--fs,1))/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
h1{margin:0;font-size:calc(26px*var(--fs,1));letter-spacing:-.01em;text-wrap:balance}
.lede{margin:0;color:var(--muted);max-width:56ch}

.app{display:grid;gap:20px}
.phases{scrollbar-width:none}.phases::-webkit-scrollbar{display:none}
@media print{
  @page{margin:1in}
  body{background:#fff!important;color:#000!important}
  header.top,.phases,.enter-pane,.bottombar,.nosave,.example-bar,.hdr-btns,.tour,.cb-modal,.modal,.stepnav{display:none!important}
  .wrap,.app{display:block!important;max-width:none!important;padding:0!important;margin:0!important}
  .report-pane{display:block!important;position:static!important;max-height:none!important;overflow:visible!important}
  .paper{border:0!important;box-shadow:none!important;padding:0!important;background:#fff!important;color:#000!important;border-radius:0!important}
  .paper .bar{display:none!important}
  .paper mark.gap{background:#eee!important;color:#000!important;outline:1px solid #999}
  .rp{break-inside:avoid;margin:0 0 .6em!important;padding:0!important;border-radius:0!important;cursor:auto}
  .rp.head{break-after:avoid}.rp .elem{font-size:.92em}.rp ul{break-inside:auto}
  .paper[data-print-head]::before{content:attr(data-print-head);display:block;font:10pt system-ui,sans-serif;color:#444;margin:0 0 12pt;text-indent:0}
  .report-pane .nosave{display:none!important}
}
.enter-pane{background:var(--panel);border:1px solid var(--line);border-radius:18px;min-width:0;overflow:clip}
.report-pane{min-width:0}
.nosave{margin:10px 0 0;font-size:calc(13px*var(--fs,1));color:var(--muted);text-align:center}
.example-bar{margin:0 0 12px;padding:8px 12px;border-radius:10px;background:var(--raised);border:1px dashed var(--accent);color:var(--fg);font-size:calc(13px*var(--fs,1));line-height:1.4}
@media (min-width:900px){
  /* the entry side grows with the text size, and the page with it, so the tabs stay on one row at the largest text
     (Josh, 2026-11-12: at the largest size Check was off the edge while the screen had room to spare) */
  .app{grid-template-columns:minmax(360px,min(calc(520px*var(--fs,1)),52%)) minmax(0,1fr);align-items:start}
  .app .phases button{padding:10px 9px}
  /* about half the page at most (52%: six tabs still fit one row on a 1366 laptop at the largest text), so the report keeps room on a narrower screen at large text; the tabs then take two rows */
  .app .phases{flex-wrap:wrap}
  .report-pane{position:sticky;top:16px;max-height:calc(100vh - 32px);overflow:auto;border-radius:6px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  /* the report's own scrollbar is thin and quiet, so it does not sit as a second full scrollbar beside the page's */
  .report-pane::-webkit-scrollbar{width:6px}.report-pane::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}.report-pane::-webkit-scrollbar-track{background:transparent}
  .bottombar{display:none!important}
}
@media (max-width:899px){
  .app[data-view="enter"] .report-pane{display:none}
  .app[data-view="report"] .enter-pane{display:none}
}

/* phase nav */
.phases{display:flex;gap:4px;padding:10px;border-bottom:1px solid var(--line);overflow-x:auto;position:sticky;top:env(safe-area-inset-top,0px);border-radius:18px 18px 0 0;background:var(--panel);z-index:2}
.phases button{flex:1 0 auto;min-height:44px;position:relative;border:0;background:transparent;color:var(--muted);font:600 calc(13px*var(--fs,1)) var(--ui);padding:10px 12px;border-radius:10px;cursor:pointer}
.phases button[aria-current="step"]{background:var(--raised);color:var(--fg)}
.phases .n{font:500 calc(11px*var(--fs,1)) var(--mono);opacity:.7;margin-right:6px}
.phases button{white-space:nowrap}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* on a phone the page title and the tabs stay at the top while the tab scrolls under them (Josh, 2026-11-12). The tabs stick
   just below the title; builder.js measures the title into --toph. */
@media (max-width:899px){
  header.top{position:sticky;top:0;z-index:3;background:var(--bg);margin:0;padding:20px 0 12px}
  .phases{top:var(--toph,0px)}
  /* they start where they stick, so nothing slides when scrolling begins; square top corners on the tab bar and its card, so a
     box scrolling under them (its yellow outline) cannot show through rounded corners (Josh, 2026-11-12) */
  .wrap{padding-top:0}
  .phases,.enter-pane{border-top-left-radius:0;border-top-right-radius:0}
}
.phases .dot{position:absolute;top:4px;left:50%;margin-left:-3px;width:6px;height:6px;border-radius:50%;background:var(--accent)}

.phase{padding:16px;display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.lbl{font-size:calc(12px*var(--fs,1));font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.fluid{font-style:normal;text-transform:none;letter-spacing:0;font-weight:600;color:var(--accent);margin-left:6px}
.opt{font-style:normal;text-transform:none;letter-spacing:0;font-weight:400;margin-left:6px}
select,input[type=text],input[type=number],input[type=date],input[type=email],textarea{width:100%;min-height:44px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--raised);color:var(--fg);font:max(16px,calc(16px*var(--fs,1))) var(--ui)}
/* never under 16px: an iPhone zooms in on a box with smaller text (Josh, 2026-11-12), so the smallest text size keeps boxes at 16 */
textarea{resize:vertical;line-height:1.4}
input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible,.rp:focus-visible,.chk input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.row3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hint{margin:-8px 0 0;font-size:calc(13px*var(--fs,1));color:var(--muted)}
.hint b{color:var(--fg)}

.seg{display:flex;background:var(--raised);border:1px solid var(--line);border-radius:12px;padding:3px;gap:3px}
.seg button{flex:1;min-height:44px;border:0;border-radius:9px;background:transparent;color:var(--fg);font:600 calc(14px*var(--fs,1)) var(--ui);cursor:pointer;padding:0 6px}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent)}
.seg.stack{flex-direction:column}
.seg.wrap{flex-wrap:wrap}
.seg.wrap button{flex:1 1 calc(33.33% - 3px);overflow-wrap:normal;white-space:nowrap}
.seg.stack button{text-align:left;padding:0 14px;min-height:44px}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button,.chk span{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--raised);color:var(--fg);font:600 calc(14px*var(--fs,1)) var(--ui);cursor:pointer}
.chips button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.chk{display:inline-flex;position:relative}
.chk input{position:absolute;opacity:0;width:1px;height:1px}
.chk span{position:relative;--pad:14px;padding-left:var(--pad)}
.chk span::before{content:"";flex:none;width:40px;height:24px;border-radius:12px;background:var(--line);margin-right:10px;transition:background .18s}
.chk span::after{content:"";position:absolute;top:50%;left:calc(var(--pad) + 2px);width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transform:translateY(-50%);transition:left .18s}
.chk input:checked+span::before{background:var(--accent)}
.chk input:checked+span::after{left:calc(var(--pad) + 18px)}
.chkrow{display:flex;flex-wrap:wrap;gap:8px}
.evlist{display:flex;flex-direction:column;gap:8px}
.stepper{display:grid;grid-template-columns:56px minmax(0,1fr) 56px;gap:8px}
.stepper input{text-align:center;font:600 calc(22px*var(--fs,1)) var(--mono);min-height:52px}
.stepper .btn{padding:0;font-size:calc(24px*var(--fs,1));min-height:52px}
.pf{display:flex;flex-direction:column;gap:14px}
.linkbtn{border:0;background:none;color:var(--accent);font:600 calc(13px*var(--fs,1)) var(--ui);padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px;padding:12px 0;min-height:44px}
.pfh{margin:10px 0 -4px;font:500 calc(11px*var(--fs,1))/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.vlist{display:flex;flex-direction:column;gap:10px}
.pfmenu{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--raised)}
.pfrow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 10px;min-height:60px;padding:10px 14px;background:transparent;border:0;border-top:1px solid var(--line);color:var(--fg);text-align:left;font:inherit;cursor:pointer}
.pfrow:first-child{border-top:0}
.pfrow:hover{background:var(--panel)}
.pfrow b{font-size:calc(16px*var(--fs,1))}
.pfrow small{grid-column:1;color:var(--muted);font-size:calc(13.5px*var(--fs,1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pfrow .chev{grid-column:2;grid-row:1/3;color:var(--muted);font-size:calc(22px*var(--fs,1))}
.pg-slot{display:flex;flex-direction:column;gap:14px}
.pg-slot h2{margin:0}
details.vd{border:1px solid var(--line);border-radius:12px;background:var(--raised)}
details.vd>summary{list-style:none;cursor:pointer;min-height:56px;padding:10px 14px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:2px 10px}
details.vd>summary::-webkit-details-marker{display:none}
details.vd>summary b{font-size:calc(15px*var(--fs,1))}
details.vd>summary small{grid-column:1;color:var(--muted);font-size:calc(13px*var(--fs,1));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
details.vd>summary .chev{grid-column:2;grid-row:1/3;color:var(--muted);transition:transform .15s}
details.vd[open]>summary .chev{transform:rotate(90deg)}
details.vd .vrow{border:0;border-top:1px solid var(--line);border-radius:0 0 12px 12px}
.vrow{display:flex;flex-direction:column;gap:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--raised)}
.vrow .vfoot{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.vrow input[type=text],.vrow textarea{background:var(--panel)}
.pf h3{margin:10px 0 -4px;font:500 calc(11px*var(--fs,1))/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.chk.solo span{--pad:0px;padding:0;border:0;background:none}
.chk.solo span::before{margin-right:0}

.card{border:1px solid var(--line);border-radius:14px;overflow:hidden}
.card>header{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 14px;background:var(--raised)}
.card>header h3{margin:0;font-size:calc(15px*var(--fs,1))}
.card .body{padding:14px;display:flex;flex-direction:column;gap:14px}
.count{font:500 calc(12px*var(--fs,1)) var(--mono);color:var(--muted);white-space:nowrap}
.count b{color:var(--accent);font-size:calc(14px*var(--fs,1))}

/* HGN eyes */
.eyes{display:grid;grid-template-columns:1fr 64px 64px;gap:8px 10px;align-items:center}
.eyehead{font:600 calc(12px*var(--fs,1)) var(--ui);text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:center}
.cluename{font-size:calc(14px*var(--fs,1))}
.eye{width:64px;height:44px;border-radius:50%/50%;border:2px solid var(--line);background:var(--raised);cursor:pointer;position:relative}
.eye::after{content:"";position:absolute;inset:0;margin:auto;width:16px;height:16px;border-radius:50%;background:var(--muted);opacity:.5}
.eye[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-tint);background:color-mix(in srgb,var(--accent) 22%,var(--raised))}
.eye[aria-pressed="true"]::after{background:var(--accent);opacity:1;width:20px;height:20px}
.eye:disabled{cursor:not-allowed;border-style:dashed;background:transparent}
.eye:disabled::after{content:"\2715";background:none;opacity:.7;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font:700 calc(15px*var(--fs,1)) var(--ui);color:var(--muted);border-radius:0}

/* step and seconds strips */
.strip{display:grid;grid-template-columns:44px repeat(9,minmax(0,1fr));gap:4px;align-items:center}
.strip .rl{font:600 calc(11px*var(--fs,1)) var(--ui);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.strip button,.secs button,.ftn button{min-height:44px;border-radius:8px;border:1px solid var(--line);background:var(--raised);color:var(--fg);font:500 calc(13px*var(--fs,1)) var(--mono);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1;padding:0}
.strip button small{font:700 calc(11px*var(--fs,1)) var(--mono)}
.strip button[data-s="miss"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.strip button[data-s="off"]{background:var(--warn);border-color:var(--warn);color:var(--on-accent)}
.strip button[data-s="both"]{background:linear-gradient(135deg,var(--accent) 50%,var(--warn) 50%);border-color:var(--warn);color:var(--on-accent)}
.ftn{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.ftn button{min-height:52px}
.ftn button small{font:700 calc(11px*var(--fs,1)) var(--mono);opacity:.7}
.ftn button[data-s="pad"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.ftn button[data-s="miss"]{background:var(--warn);border-color:var(--warn);color:var(--on-accent)}
.ftn button[data-s] small{opacity:1}
.aride{margin:6px 0 -4px;font:500 calc(11px*var(--fs,1))/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.secs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.secs button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:calc(12px*var(--fs,1));color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}

.stepnav{display:flex;justify-content:space-between;gap:10px;padding-top:4px}
.btn{min-height:46px;padding:0 18px;border-radius:12px;border:1px solid var(--line);background:var(--raised);color:var(--fg);font:600 calc(15px*var(--fs,1)) var(--ui);cursor:pointer}
.stcard{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--raised)}
.stcard h3{margin:0;font-size:calc(16px*var(--fs,1))}
.stcard textarea{min-height:150px}
.tokrow .btn{font-size:calc(14px*var(--fs,1));padding:8px 12px}
.stprev{background:var(--paper);color:var(--ink);font-family:var(--doc);font-size:calc(15px*var(--fs,1));line-height:1.5;border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.stprev p{margin:0 0 .6em}.stprev p:last-child{margin:0}
.sendrow{display:flex;gap:10px;flex-wrap:wrap}
.btn.danger-o{background:transparent;border-color:var(--warn);color:var(--warn)}
.newzone{display:flex;flex-direction:column;gap:6px;align-items:flex-start;margin-top:18px;padding-top:16px;border-top:1px dashed var(--line)}
.warnbox{border-color:var(--warn)}
.warnbox ul{margin:6px 0 10px;padding-left:1.2em}
@media (max-width:899px){#copyBtn{display:none}}
@media (min-width:900px){#copyBtn{order:-1;background:var(--accent);border-color:var(--accent);color:var(--on-accent)}#sendBtn{background:var(--raised);border-color:var(--line);color:var(--fg)}}
.btn.danger{background:var(--warn);border-color:var(--warn);color:var(--on-accent)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.setup{font-size:calc(13px*var(--fs,1));color:var(--muted);border-top:1px dashed var(--line);padding-top:12px}
.setup code{font:500 calc(12px*var(--fs,1)) var(--mono);color:var(--fg)}
.q{font-size:calc(12px*var(--fs,1));color:var(--accent);font-weight:600}

/* checks */
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.checks li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;background:var(--raised);border:1px solid var(--line)}
.checks .tag{font:700 calc(11px*var(--fs,1)) var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:3px 6px;border-radius:5px;flex:none;margin-top:2px}
.checks .gap .tag{background:var(--gap-bg);color:var(--gap-fg)}
.checks .warn .tag{background:var(--warn-tint);background:color-mix(in srgb,var(--warn) 25%,transparent);color:var(--warn)}
.checks .info .tag{background:var(--ok-tint);background:color-mix(in srgb,var(--ok) 20%,transparent);color:var(--ok)}
/* on the day themes a tinted tag left its small text under the contrast standard (about 3 to 1); there the tag is solid */
:root[data-theme] .checks .warn .tag{background:var(--warn);color:var(--on-accent)}:root[data-theme] .checks .info .tag{background:var(--ok);color:var(--on-accent)}
.checks .txt{flex:1;min-width:0}
.checks button{border:0;background:none;color:var(--accent);font:600 calc(14px*var(--fs,1)) var(--ui);cursor:pointer;padding:10px 0;min-height:44px}
.allclear{padding:12px;border-radius:10px;background:var(--ok-tint);background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok);font-weight:600}
.msg{font-size:calc(14px*var(--fs,1));color:var(--muted);min-height:1.4em}
.msg:empty{min-height:0;margin:0}
#obNextBtn{margin-left:auto}
h2[tabindex="-1"]:focus{outline:none}
.pg-slot .row2{align-items:end}
.stfoot{position:sticky;bottom:-24px;margin:0 -16px -16px;padding:12px 16px;background:var(--panel);border-top:1px solid var(--line);border-radius:0 0 16px 16px;display:flex;flex-direction:column;gap:6px}
#styleModal .modal-card{max-height:none}
@media (max-width:420px){.seg:has(> button:nth-child(4):last-child) button{font-size:calc(12.5px*var(--fs,1));padding:0 2px;overflow-wrap:normal}}

/* report paper */
.paper{background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:6px;padding:clamp(20px,5vw,56px);font-family:var(--doc);font-size:calc(16px*var(--fs,1));line-height:1.55}
.fmt-sample{padding:0}
.fmt-sample p{margin:0 0 .6em}
.paper.noindent .rp.ind{text-indent:0}
.paper .bar{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font:500 calc(11px*var(--fs,1)) var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:22px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.rp{margin:0 0 12px;padding:3px 6px;margin-left:-6px;margin-right:-6px;border-radius:5px;cursor:pointer;transition:background .15s}
.rp:hover{background:var(--accent-tint);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.rp.ind{text-indent:2.5em}
.rp ul{margin:4px 0 0;padding-left:2.2em;text-indent:0}
.rp.head{font-weight:700;margin-bottom:4px}
.rp.foot{font-weight:700}
mark.gap{background:var(--gap-bg);color:var(--gap-fg);padding:0 3px;border-radius:3px;font-family:var(--ui);font-size:calc(13px*var(--fs,1));font-weight:700;letter-spacing:.02em}

.bottombar{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;gap:8px;background:var(--panel);border-top:1px solid var(--line);padding-top:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.bottombar button{flex:1;min-height:46px;border-radius:12px;border:1px solid var(--line);background:var(--raised);color:var(--fg);font:600 calc(15px*var(--fs,1)) var(--ui);cursor:pointer}
.bottombar button[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
/* first-run setup */
.onboard{max-width:440px;margin:0 auto}
#adminPanel.onboard{max-width:760px}
.hdr-btns{display:flex;gap:8px;flex:none;flex-wrap:wrap;align-items:center;max-width:100%}
.mcard{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--raised)}
.mhead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap}
.mhead b{display:block;font-size:calc(15px*var(--fs,1))}
.mhead small{color:var(--muted);font-size:calc(13px*var(--fs,1));overflow-wrap:anywhere}
.pfrow b .dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--warn);margin-left:8px;vertical-align:middle}
.adm-sec{display:flex;flex-direction:column;gap:14px}.adm-sec[hidden]{display:none}
.mcard.chg{gap:6px;padding:12px 14px}.chg-head{flex-wrap:nowrap;align-items:flex-start}.chg-t{flex:1;min-width:0;font-size:calc(15px*var(--fs,1));line-height:1.35}.chg-t code{font:500 calc(13px*var(--fs,1)) var(--mono);color:var(--accent)}.chg-t b{display:inline;font-size:calc(15px*var(--fs,1))}
.btn.sm{min-height:36px;padding:0 12px;font-size:calc(13px*var(--fs,1));flex:none}
.chg-meta{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;color:var(--muted);font-size:calc(13px*var(--fs,1))}
.gpill{font:600 calc(11px*var(--fs,1)) var(--ui);letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:2px 8px;color:var(--muted);white-space:nowrap}.gpill.M{color:var(--ok);border-color:var(--ok)}.gpill.F{color:var(--warn);border-color:var(--warn)}
/* the order list with its mock report: stacked on a phone, side by side on a wide screen (the page widens to make room) */
.laywrap{display:flex;flex-direction:column;gap:14px}
.laymockbox{display:flex;flex-direction:column;gap:8px;min-width:0}
.laymock{padding:16px 18px;font-size:calc(13px*var(--fs,1));line-height:1.45}
.laymock p{margin:0 0 .7em;text-indent:2em}.laymock p.flat{text-indent:0}.paper.laymock ul{margin:-.3em 0 .7em;padding-left:1.6em}.paper.laymock li{margin:0}
.laymock .mb{border-left:2px solid transparent;margin-left:-10px;padding-left:8px;transition:background .2s,border-color .2s}
.laymock .mb.on{border-left-color:var(--accent);background:var(--accent-tint);background:color-mix(in srgb,var(--accent) 16%,transparent)}
@media (min-width:900px){
  #profile.onboard:has(.laywrap),#adminPanel.onboard:has(.adm-sec[data-sec="lay"]:not([hidden])){max-width:1000px}
  .laywrap{display:grid;grid-template-columns:minmax(300px,380px) minmax(0,1fr);gap:18px;align-items:start}
  .laymockbox{position:sticky;top:12px}.laymock{max-height:calc(100vh - 110px);overflow:auto}
}
/* on a phone the preview sits under the list, out of sight while dragging; "Pin the preview" docks it to the foot of the screen */
.laypeek{display:none}
@media (max-width:899px){
  .laypeek{display:inline-flex;align-self:flex-start}
  .laymockbox .laypeek{display:none}
  .laymockbox.peek{position:fixed;left:0;right:0;bottom:0;z-index:40;height:42vh;padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));background:var(--panel);border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(0,0,0,.5);overflow-y:auto;overscroll-behavior:contain}
  .laymockbox.peek>.hint{display:none}
  .laymockbox.peek .laypeek{display:inline-flex}
  .laymockbox.peek>.mrow{position:sticky;top:-10px;z-index:1;background:var(--panel);padding:8px 0 6px;margin-top:-10px}
  body.lay-peeking{padding-bottom:44vh}
}
.laylist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.laylist li{display:flex;align-items:center;gap:6px;min-height:52px;padding:3px 12px;border:1px solid var(--line);border-radius:12px;background:var(--raised);font-size:calc(15px*var(--fs,1));line-height:1.3}
.laylist li::before{content:attr(data-n);flex:none;width:1.5em;color:var(--accent);font:600 calc(13px*var(--fs,1)) var(--mono)}
.laylist .layname{flex:1;min-width:0}
.laylist li.pin{background:transparent;border-style:dashed;color:var(--muted);padding-right:12px}.laylist li.pin small{font-size:calc(12px*var(--fs,1));white-space:nowrap}
.laygrip{flex:none;width:36px;height:44px;border:0;padding:0;background:none;color:var(--muted);cursor:grab;touch-action:none;display:grid;place-items:center;border-radius:9px;-webkit-user-select:none;user-select:none}
.laylist li.pin .laygrip{cursor:default}
.laygrip:focus-visible{outline:2px solid var(--accent)}
@media (hover:hover){.laylist li[data-lay]{cursor:grab}}
/* while a row is dragged: the others slide out of its way; the dragged one follows the pointer with no easing, then eases into its slot */
.laylist.sorting{-webkit-user-select:none;user-select:none}
.laylist.sorting li[data-lay]{transition:transform .2s cubic-bezier(.2,.8,.2,1);will-change:transform}
.laylist li.dragging{position:relative;z-index:2;border-color:var(--accent);background:var(--panel);box-shadow:0 10px 24px rgba(0,0,0,.45);cursor:grabbing;transition:box-shadow .15s}
.laylist.sorting li.dragging{transition:box-shadow .15s}.laylist.sorting li.dragging.settling{transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s;box-shadow:none}
.laylist li.dragging .laygrip{cursor:grabbing;color:var(--accent)}
@media (prefers-reduced-motion:reduce){.laylist.sorting li[data-lay],.laylist.sorting li.dragging.settling{transition:none}}
.excrow{flex-wrap:nowrap;justify-content:space-between;padding:6px 8px 6px 12px;border:1px solid var(--line);border-radius:12px;background:var(--raised)}.excrow span{flex:1;min-width:0;overflow-wrap:anywhere}
.chg-more summary{cursor:pointer;color:var(--accent);font:600 calc(13px*var(--fs,1)) var(--ui);min-height:32px;display:flex;align-items:center}
.chg-more .chg-elem{margin:6px 0;font:calc(15px*var(--fs,1))/1.5 var(--doc);white-space:pre-wrap;overflow-wrap:anywhere}
.chg-more .hint+.hint{margin-top:4px!important}
.pill{font:600 calc(11px*var(--fs,1)) var(--ui);text-transform:uppercase;letter-spacing:.05em;padding:4px 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.pill.ok{color:var(--ok);border-color:var(--ok)}
.pill.wait{color:var(--accent);border-color:var(--accent)}
.logrow{display:grid;grid-template-columns:120px 170px minmax(0,1fr);gap:4px 12px;font-size:calc(13px*var(--fs,1));padding:9px 0;border-bottom:1px solid var(--line)}
.logrow span:not(:last-child){color:var(--muted)}
@media (max-width:620px){.logrow{grid-template-columns:1fr}}
.mrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.mrow select{width:auto;min-width:140px}
.invite{display:flex;gap:8px}
.invite input{flex:1;min-width:0}
#profile.onboard{max-width:640px}
.ob-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.ob-prog{display:flex;gap:4px;padding:16px 16px 0}
.ob-prog i{flex:1;height:4px;border-radius:2px;background:var(--line)}
.ob-prog i.on{background:var(--accent)}
.ob-step{padding:16px 16px 4px;display:flex;flex-direction:column;gap:14px}
.ob-step h2{margin:0;font-size:calc(22px*var(--fs,1));line-height:1.2;text-wrap:balance}
.ob-kicker{margin:0;font:500 calc(11px*var(--fs,1))/1.3 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.ob-step>p{margin:0;color:var(--muted)}
.ob-step ul{margin:0;padding-left:1.2em;display:flex;flex-direction:column;gap:4px}
.ob-note{padding:12px 14px;border-radius:12px;background:var(--raised);border:1px solid var(--line);font-size:calc(14px*var(--fs,1))}
.ob-note b{display:block;margin-bottom:2px}
.host{border:1px dashed var(--muted);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:12px}
input[readonly],textarea[readonly]{opacity:.7}
#invMsg{opacity:1;font-size:calc(14px*var(--fs,1));line-height:1.45}
.jp-screen{border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--bg);display:flex;flex-direction:column;gap:10px}
.jp-screen h3{margin:0;font-size:calc(18px*var(--fs,1))}
.jp-screen p{margin:0}
.ob-foot{padding:12px 16px 16px;display:flex;flex-direction:column;gap:8px}
.need{margin:0;color:var(--warn);font-size:calc(13px*var(--fs,1));font-weight:600;min-height:1.2em}
.mini{padding:18px 20px;font-size:calc(15px*var(--fs,1))}
.mini p{margin:0 0 8px}
.sum{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 14px;margin:0;font-size:calc(14px*var(--fs,1))}
.sum dt{color:var(--muted)}
.sum dd{margin:0;overflow-wrap:anywhere}
/* phone fixes */
input[type=date]{-webkit-appearance:none;appearance:none;min-width:0;display:block}
input[type=date]::-webkit-date-and-time-value{text-align:left;margin:0}
.seg button{min-width:0;overflow-wrap:anywhere;line-height:1.15;padding:4px 6px}
@media (max-width:520px){
  .phases{gap:2px;padding:8px}
  .phases button{flex:1 1 0;min-width:0;padding:10px 2px;font-size:calc(12.5px*var(--fs,1))}
  .phases .n{display:none}
  .phases[data-n="6"]{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 2px}      /* six tabs: two rows of three (Josh) */
  .row3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .strip{grid-template-columns:34px repeat(9,minmax(0,1fr));gap:3px}
  .seg button{font-size:calc(13.5px*var(--fs,1))}
}
.modal{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.6);display:flex;align-items:flex-start;justify-content:center;overflow-y:auto;padding-top:max(24px,env(safe-area-inset-top,0px));padding-bottom:24px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;max-width:560px;width:100%;padding:16px;display:flex;flex-direction:column;gap:12px}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.modal-head h2{margin:0;font-size:calc(20px*var(--fs,1))}
.mx-wrap{overflow-x:auto}
.mx{width:100%;border-collapse:collapse;font-size:calc(14px*var(--fs,1))}
.mx th,.mx td{border:1px solid var(--line);padding:9px 6px;text-align:center}
.mx th{font:600 calc(11px*var(--fs,1)) var(--ui);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:var(--raised)}
.mx td:first-child{text-align:left;font-weight:600}
.mx .y{color:var(--accent);font-weight:700}
.mx-foot{margin:0;font-size:calc(12px*var(--fs,1));color:var(--muted)}
.mx-foot p{margin:0 0 6px}
#matrix .mx-foot{display:grid;gap:8px 28px}
@media (min-width:700px){#matrix .mx-foot{grid-template-columns:1fr 1fr}}
.mx-foot ol{margin:0 0 4px;padding-left:1.4em}
.mx-foot h4,.mxd h4{margin:12px 0 6px;font:600 calc(11px*var(--fs,1))/1.3 var(--ui);text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.mx-foot .mxg dd{color:var(--fg)}
#matrix .modal-card{max-width:1160px}
#examples .modal-card{max-width:1000px}
.exsheet{background:var(--paper);color:var(--ink);border:2px solid var(--chart-line);border-radius:4px;padding:16px 20px 20px;font-family:Arial,"Helvetica Neue",var(--ui)}
.exsheet .extitle{margin:0 0 10px;text-align:center;font-weight:700;font-size:calc(16px*var(--fs,1));text-decoration:underline;text-underline-offset:3px}
.exgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 32px;margin-bottom:14px}
.exsheet h3{margin:12px 0 6px;font-size:calc(15px*var(--fs,1));font-weight:700;text-decoration:underline;text-underline-offset:3px}
.exsheet h4{margin:10px 0 4px;font-size:calc(14px*var(--fs,1));font-weight:500;text-decoration:underline;text-underline-offset:3px}
.exsheet ul{list-style:none;margin:0;padding:0 0 0 12px;font-size:calc(14px*var(--fs,1));line-height:1.45}
@media (max-width:700px){.exgrid{grid-template-columns:1fr}}
.sym-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:2px solid var(--chart-line);border-radius:4px}
.sym{border-collapse:collapse;font-family:var(--doc);font-size:calc(14px*var(--fs,1));line-height:1.3;color:var(--ink);background:var(--paper);min-width:880px;width:100%}
.sym th,.sym td{border:1px solid var(--chart-line);padding:6px 8px;text-align:center;vertical-align:middle}
.sym thead th{background:var(--chart-head);font-weight:700;font-size:calc(15px*var(--fs,1))}
.sym th.lab{background:var(--chart-head);text-align:left;font-weight:700;position:sticky;left:0;z-index:1;width:132px;min-width:132px;box-shadow:1px 0 0 var(--chart-line)}
.sym td.list{text-align:left;vertical-align:top}
.sym tr.big th.lab{vertical-align:middle;text-align:center}
@media (max-width:520px){.sym{font-size:calc(13px*var(--fs,1));min-width:820px}.sym th.lab{width:100px;min-width:100px;font-size:calc(12px*var(--fs,1));padding:6px}}
.mx-swipe{display:none}
@media (max-width:900px){.mx-swipe{display:block}}
.mxd{border-top:1px solid var(--line);padding-top:10px}
.mxd h3{margin:0;font-size:calc(18px*var(--fs,1))}
.mxg{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0;font-size:calc(14px*var(--fs,1))}
.mxg dt{color:var(--muted)}
.mxg dd{margin:0;font-weight:600}
.mxg dd.y{color:var(--accent)}
.mxl{margin:0;padding-left:1.1em;columns:2;column-gap:20px;font-size:calc(14px*var(--fs,1))}
.mxl li{break-inside:avoid;margin-bottom:2px}
@media (max-width:380px){.mxl{columns:1}}
@media (max-width:520px){
  .modal-card{padding:12px}
  .stfoot{margin:0 -12px -12px;padding:12px}
  .mx thead{display:none}
  .mx,.mx tbody{display:block}
  .mx tr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:10px;margin-bottom:8px;overflow:hidden}
  .mx td{border:0;padding:7px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:calc(13px*var(--fs,1))}
  .mx td:first-child{grid-column:1/-1;align-items:flex-start;background:var(--raised);padding:8px 10px}
  .mx td::before{content:attr(data-label);font:600 calc(11px*var(--fs,1)) var(--ui);text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
  .mx td:first-child::before{content:none}
}
.card,.field,.chkrow,.evlist{scroll-margin-top:76px}
.flash{animation:flash 1.8s ease-out}
@keyframes flash{0%,40%{box-shadow:0 0 0 3px var(--accent)}100%{box-shadow:0 0 0 3px transparent}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}.flash{animation:none;box-shadow:0 0 0 3px var(--accent)}}
.note.build{font:500 calc(12px*var(--fs,1)) var(--mono);letter-spacing:.04em;color:var(--muted)}
.stars{display:flex;gap:6px}
.stars button{width:48px;height:48px;padding:0;border-radius:12px;border:1px solid var(--line);background:var(--raised);color:var(--muted);font-size:calc(26px*var(--fs,1));line-height:1;cursor:pointer}
.stars button.on{color:var(--accent);border-color:var(--accent)}.stars button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.vbar b{min-width:0}
/* Profile's four pages: tabs across the top, one section in front, one Save for all of them */
.pgtabs{flex-wrap:wrap}.pgtabs button{flex:1 1 calc(50% - 3px);min-height:44px;white-space:normal}
@media (min-width:700px){.pgtabs button{flex:1 1 0}}
.pgpart{display:flex;flex-direction:column;gap:14px}.pgpart .row2{align-items:end}
.parthead{margin:4px 0 0;font-size:calc(17px*var(--fs,1))}
.adm-subhead{margin:8px 0 0;font-size:calc(17px*var(--fs,1))}.adm-sec+.adm-sec .adm-subhead{padding-top:14px;border-top:1px solid var(--line)}
/* Display: one Aa button on every screen. On a phone it sits at the top right of the hub, level with the title; on a wide screen it
   ends the row of header buttons. In the bar over a report it is pushed to the right. */
.lookbtn{flex:none;min-width:48px;min-height:44px;padding:0 12px;border-radius:999px;font:700 15px var(--ui)}
.vbar .lookbtn{margin-left:auto;min-height:40px}
.kb .bottombar{display:none!important}.kb .wrap{padding-bottom:24px}      /* the keyboard is up (index.html sets .kb): no Enter / Report bar */
textarea.narrbig{min-height:max(320px,55vh);line-height:1.5}      /* the Narrative tab's box: room to write a full narrative */
.phrases .btn{font-size:calc(14px*var(--fs,1));padding:8px 12px;text-align:left;max-width:100%;white-space:normal}   /* phrase chips read left to right on every page */
.hubhead{position:relative}
@media (max-width:699px){.hubhead>div:first-child{padding-right:60px}.hdr-btns .lookbtn{position:absolute;top:0;right:0}}
/* the panel: fixed, placed under the button by script; always inside the screen */
.lookpop{position:fixed;z-index:60;width:min(320px,calc(100vw - 16px));display:flex;flex-direction:column;gap:14px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--fg);box-shadow:0 14px 36px rgba(0,0,0,.45);font:15px var(--ui)}
.lp-head{display:flex;justify-content:space-between;align-items:center}.lp-head b{font-size:16px}.lp-head .linkbtn{padding:6px 0;min-height:32px}
.lp-row{display:flex;flex-direction:column;gap:8px}
.themecards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.themecards button{display:flex;flex-direction:column;gap:6px;align-items:stretch;padding:6px 6px 8px;border:1px solid var(--line);border-radius:12px;background:var(--raised);color:var(--fg);font:600 12.5px var(--ui);cursor:pointer;text-align:center}
.themecards button i{display:block;position:relative;height:46px;border-radius:8px;background:var(--a);border:1px solid rgba(128,128,128,.45)}
.themecards button i::before{content:"";position:absolute;left:6px;right:6px;top:7px;height:16px;border-radius:4px;background:var(--p);border:1px solid rgba(128,128,128,.25)}
.themecards button i::after{content:"";position:absolute;left:6px;bottom:7px;width:26px;height:9px;border-radius:5px;background:var(--b)}
.themecards button[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}.themecards button:focus-visible,.fsrow button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.fsrow{display:flex;align-items:center;gap:6px}
.fs-a{flex:none;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--raised);color:var(--fg);font:700 14px var(--ui);cursor:pointer}.fs-a.big{font-size:22px}.fs-a:disabled{opacity:.4;cursor:default}
.fsdots{flex:1;display:flex;justify-content:space-between;align-items:center;position:relative;padding:0 2px}
.fsdots::before{content:"";position:absolute;left:14px;right:14px;top:50%;height:2px;background:var(--line);transform:translateY(-50%)}
.fsdots button{position:relative;width:32px;height:44px;padding:0;border:0;background:none;display:grid;place-items:center;cursor:pointer}
.fsdots button i{width:12px;height:12px;border-radius:50%;background:var(--panel);border:2px solid var(--muted)}
.fsdots button[aria-pressed="true"] i{width:18px;height:18px;background:var(--accent);border-color:var(--accent)}
.lp-sample{margin:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--raised);font:calc(15px*var(--fs,1))/1.4 var(--ui)}
.greet{margin:6px 0 0;color:var(--muted);font-size:calc(15px*var(--fs,1))}
.tile{position:relative}.tilemark{position:absolute;top:14px;right:14px;font:600 11px var(--ui);letter-spacing:.05em;text-transform:uppercase;padding:4px 8px;border-radius:999px;background:var(--accent);color:var(--on-accent)}
@media print{html{--fs:1!important}.lookpop,.lookbtn{display:none!important}}