/* Palette: the chERP brand - teal, ochre and charcoal on white.

   Deliberately single-theme. The brand is white, so the page commits to light
   and paints every colour explicitly rather than following the viewer's OS.

   ONE RULE GOVERNS THIS FILE: green belongs to the SUDS ramp and to nothing
   else. The brand carries a sage green, and it is deliberately absent from the
   interface below - a sage chip beside a mid-green distress swatch would put a
   success state and a severity reading in the same hue on the same screen.
   Teal, ochre and charcoal do all the interface work. Before adding a green
   anywhere here, read the ramp comment further down. */
/* Helvetica set at Garamond's visual size.
   The type sizes across the app were tuned for EB Garamond, whose lowercase
   is small; the same px in Helvetica reads about a quarter larger. Rather
   than re-tune every size, "chERP Sans" is the device's own Helvetica (or
   Arial where there is none) scaled by size-adjust, so it sits beside the
   Garamond headings at the size the layout was designed for. One face per
   weight and style, so bold and italic are the real cuts, not faked. */
@font-face{font-family:"chERP Sans"; font-weight:400; font-style:normal; size-adjust:86%;
  src:local("Helvetica Neue"),local("HelveticaNeue"),local("Helvetica"),local("Arial"),local("ArialMT")}
@font-face{font-family:"chERP Sans"; font-weight:400; font-style:italic; size-adjust:86%;
  src:local("Helvetica Neue Italic"),local("HelveticaNeue-Italic"),local("Helvetica Oblique"),local("Helvetica-Oblique"),local("Arial Italic"),local("Arial-ItalicMT")}
@font-face{font-family:"chERP Sans"; font-weight:500; font-style:normal; size-adjust:86%;
  src:local("Helvetica Neue Medium"),local("HelveticaNeue-Medium"),local("Helvetica Bold"),local("Helvetica-Bold"),local("Arial Bold"),local("Arial-BoldMT")}
@font-face{font-family:"chERP Sans"; font-weight:600; font-style:normal; size-adjust:86%;
  src:local("Helvetica Neue Bold"),local("HelveticaNeue-Bold"),local("Helvetica Bold"),local("Helvetica-Bold"),local("Arial Bold"),local("Arial-BoldMT")}
@font-face{font-family:"chERP Sans"; font-weight:700; font-style:normal; size-adjust:86%;
  src:local("Helvetica Neue Bold"),local("HelveticaNeue-Bold"),local("Helvetica Bold"),local("Helvetica-Bold"),local("Arial Bold"),local("Arial-BoldMT")}

:root{
  color-scheme: light;

  /* Neutrals carry a trace of the brand teal rather than being flat grey, so
     surfaces sit under the accent instead of beside it.

     --ink-3 is the muted label colour: 5.88:1 on white, 5.46:1 on --sunk (table
     headers, panel heads), 5.20:1 on --surface-2 (chips) and 4.88:1 on the dim
     paper. The earlier #70756B passed on white but fell under AA on --sunk,
     --surface-2 and dim mode, which are exactly where the small labels sit.
     --ink-4 was referenced by a few rows but never defined; it is the same
     muted tone rather than a lighter one, so nothing drops below AA. */
  --paper:#F9FAFA; --surface:#FFFFFF; --surface-2:#EDF2F3; --sunk:#F4F7F8;
  --ink:#2C302A; --ink-2:#565B52; --ink-3:#62665C; --ink-4:var(--ink-3);
  --rule:#DFE5E6; --rule-strong:#C2CBCD;

  --accent:#33707F; --accent-hover:#275966; --accent-soft:#E7F1F3; --accent-ink:#245361;
  --on-accent:#FFFFFF;

  /* The brand ochre, for fills and marks. It is too light to be text on white
     (about 2.5:1), so --warn is a darker cut of the same hue and the swatch
     itself is never asked to carry a word. */
  --ochre:#CE9352;
  --warn:#8C5A1E; --warn-soft:#FAF0E2;
  /* No red anywhere (design/ 1a): errors and refusals use the brand charcoal -
     grave without being alarming. Clinical risk uses --risk. */
  --bad:#383C33; --bad-soft:#ECEEEA;

  /* SUDS ramp: one green family (design/ chERP OCD.dc.html, 1a), lightness falling
     strictly as distress rises, so severity still reads in grayscale, in print and
     with colour-vision deficiency. The pale steps are fills, not text colours -
     every use site prints the number on the swatch, in --s-on-*.

     Unchanged through the rebrand, on purpose: these eleven steps were generated
     in OKLCH at fixed lightness targets and verified for contrast, and a brand
     refresh is not a reason to re-derive a scale a clinician reads distress off.
     What changed is the reasoning that protects it. It used to be "green, not
     blue, because blue neighbours the violet interface". The interface is teal
     now, so the rule is the other way round: the interface holds no green at
     all, and the brand's sage is reserved for this ramp rather than spent on a
     success chip. The ramp must never read as UI, and now the UI cannot read as
     the ramp either. */
  --s0:#F2F7EF; --s10:#E9F2E4; --s20:#D3E6CC; --s30:#B6D5AE; --s40:#93C08E; --s50:#6CA76F;
  --s60:#3F7A4A; --s70:#2F6039; --s80:#21472A; --s90:#143019; --s100:#0C2011;
  --s-on-light:#12300F; --s-on-dark:#FFFFFF;
  --risk:var(--s80);

  /* Note provenance: roles, not hues, so the notetaker's transcript state can
     slot in later without a palette argument. */
  --prov-captured:#EAF1F3; --prov-captured-edge:#A8C6CD;
  --prov-written:#33707F; --prov-unresolved:#33707F;
  --ink-hair:#E3E9EA;

  /* Dim: a device-level setting for a dim therapy room. Paper and surfaces
     drop; ink and the whole SUDS ramp are untouched, so contrast holds. */
  --paper-dim:#E6EBEC; --surface-dim:#F1F5F6;

  /* Garamond, per the brand, for display and headings. Body copy is
     Helvetica (design/system/01-type): Helvetica Neue and Helvetica first,
     Arial for Windows and Android, which ship neither.

     The smallest labels - eyebrows, chips, table headers - stay on the mono,
     which is also where the data that has to line up in columns already
     lives. */
  --f-disp:"EB Garamond",Garamond,"Adobe Garamond Pro","Apple Garamond",Georgia,serif;
  --f-body:"chERP Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --shadow:0 1px 2px rgba(28,24,39,.06), 0 8px 24px -14px rgba(28,24,39,.22);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
:root[data-dim]{
  --paper:var(--paper-dim); --surface:var(--surface-dim); --sunk:#E7ECED; --surface-2:#DFE7E8;
  --shadow:0 1px 2px rgba(28,24,39,.05);
}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
tr[tabindex]:focus-visible{outline-offset:-2px}
/* For screen readers only: text that sighted users get from layout or colour. */
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
/* Skip link: hidden until focused, then the first thing on the page. */
.skip{position:absolute; left:.5rem; top:-3rem; z-index:100; padding:.6rem .9rem; border-radius:4px;
  background:var(--accent); color:var(--on-accent); font-weight:600; text-decoration:none}
.skip:focus{top:.5rem}
main:focus{outline:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
a{color:var(--accent)}
h1,h2,h3,h4{margin:0; letter-spacing:-.015em; text-wrap:balance; font-family:var(--f-disp)}

/* ---------- banner ---------- */
.banner{
  background:var(--warn-soft); color:var(--warn); border-bottom:1px solid var(--rule);
  font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.06em; text-transform:uppercase;
  padding:.45rem 1.25rem; text-align:center;
}
/* A heading's count, e.g. "Clients 12": the noun is the heading, the number is secondary. */
.h-count{font-family:var(--f-mono); font-size:.8125rem; font-weight:500; color:var(--ink-3); margin-left:.35rem; letter-spacing:0; vertical-align:.15em}
/* Section headings are h2 for a correct outline; .h3 keeps the old, smaller size. */
h2.h3{font-size:1.1rem; font-weight:600}
a.btn{display:inline-block; text-decoration:none}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600}
.btn.primary:hover{background:var(--accent-hover); border-color:var(--accent-hover)}
.rowlink{color:inherit; text-decoration:none}
.rowlink:hover{text-decoration:underline}
/* ---------- shell: icon rail ---------- */
/* 64px of icons that expands to 216px on hover or focus, and is absent in a
   running session. Scales sideways as billing and the notetaker arrive,
   where top tabs would wrap. */
.rail{
  position:fixed; inset:0 auto 0 0; z-index:20; width:64px; overflow:hidden;
  display:flex; flex-direction:column; gap:.25rem; padding:.875rem .75rem;
  background:#F0F4F5; border-right:1px solid var(--ink-hair);
  transition:width .16s ease, box-shadow .16s ease;
}
.rail:hover,.rail:focus-within,.rail:has(details[open]){width:216px; box-shadow:var(--shadow)}
/* The rail is 64px wide until it is hovered, so the mark here is the bird
   alone - the word would be clipped for most of its life. */
.rail-mark{
  flex:none; display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; text-decoration:none; margin-bottom:.75rem;
}
.rail-mark img{width:auto; height:30px}
.rail nav,.rail-foot{display:flex; flex-direction:column; gap:.25rem}
.rail-foot{margin-top:auto}
.rail a:not(.rail-mark),.rail summary{
  display:flex; align-items:center; gap:.75rem; height:40px; padding:0 10px; border-radius:8px;
  color:var(--ink-2); text-decoration:none; font-size:.8125rem; font-weight:500; white-space:nowrap;
}
.rail a:not(.rail-mark):hover,.rail summary:hover{background:var(--surface-2); color:var(--ink)}
.rail a.on{background:var(--accent-soft); color:var(--accent-ink)}
.rail a span,.rail summary span{opacity:0; transition:opacity .12s ease}
.rail:hover span,.rail:focus-within span,.rail:has(details[open]) span{opacity:1}
.rail svg{flex:none; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round}
.rail summary i{
  flex:none; width:24px; height:24px; margin-left:-2px; border-radius:50%; background:var(--accent-soft); color:var(--accent-ink);
  font:500 .625rem/24px var(--f-mono); font-style:normal; text-align:center;
}
.rail .menu-body{position:static; margin:.25rem 0 0; box-shadow:none; min-width:0}
.menu-who{font-family:var(--f-mono); font-size:.6875rem; color:var(--ink-3); padding:.45rem .6rem; white-space:normal}
.menu-body a.menu-mobile{display:none}
body.has-rail{padding-left:64px}
body.in-session .rail{display:none}
body.in-session{padding-left:0}
@media (max-width:680px){
  /* Phones: the rail becomes a bottom bar of icons. */
  .rail,.rail:hover,.rail:focus-within{inset:auto 0 0 0; width:auto; height:60px; flex-direction:row; padding:.5rem; box-shadow:none;
    border-right:0; border-top:1px solid var(--ink-hair); overflow-x:auto}
  .rail nav,.rail-foot{flex-direction:row; margin-top:0}
  .rail-mark,.rail span{display:none}
  .rail .menu{position:static}
  .rail .menu-body{position:fixed; right:.5rem; bottom:64px; box-shadow:var(--shadow); min-width:13rem}
  .rail .menu-body span{display:inline}
  body.has-rail{padding-left:0; padding-bottom:60px}
}
main{max-width:74rem; margin:0 auto; padding:1.75rem 1.25rem 5rem}

/* ---------- typography ---------- */
.eyebrow{
  font-family:var(--f-mono); font-size:.625rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-3);
}
/* A link in an eyebrow ("Clients / Rosa Alvarez") is a way back, not
   decoration. Its teal is 1.05:1 against the grey around it, so it carries an
   underline too, and padding makes it a 24px target without moving the line. */
.eyebrow a{color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px;
  display:inline-block; padding:.45rem 0; margin:-.45rem 0}
.page-h{display:flex; align-items:flex-end; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem}
.page-h h1{font-size:1.5rem; font-weight:600}
.page-h p{margin:.25rem 0 0; color:var(--ink-2); font-size:.875rem}
.prose{font-family:var(--f-body); font-size:1rem; line-height:1.6; color:var(--ink-2)}

/* ---------- buttons / inputs ---------- */
button,.btn{
  font-family:var(--f-body); font-size:.8125rem; font-weight:500; cursor:pointer;
  border:1px solid var(--rule-strong); background:var(--surface); color:var(--ink);
  padding:.4rem .8rem; border-radius:4px; line-height:1.4;
}
button:hover:not(:disabled){background:var(--surface-2)}
button:disabled{opacity:.45; cursor:not-allowed}
button.primary{background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:600}
button.primary:hover:not(:disabled){background:var(--accent-hover); border-color:var(--accent-hover)}
button.ghost{border-color:transparent; background:transparent; color:var(--ink-2)}
button.ghost:hover{background:var(--surface-2)}
button.tiny{font-size:.6875rem; padding:.2rem .5rem}
input,textarea,select{
  font-family:var(--f-body); font-size:.875rem; color:var(--ink);
  background:var(--surface); border:1px solid var(--rule-strong);
  padding:.45rem .6rem; border-radius:4px; width:100%; line-height:1.45;
}
textarea{font-family:var(--f-body); font-size:.9375rem; resize:vertical; min-height:4.5rem}
input:focus,textarea:focus,select:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px var(--accent-soft)}
/* The soft glow above is about 1.1:1 against white - not a visible focus
   indicator on its own. A keyboard user gets a real ring as well. */
input:focus-visible,textarea:focus-visible,select:focus-visible,.prov textarea:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
h1[tabindex="-1"]:focus{outline:none}
input.bad,textarea.bad{border-color:var(--bad)}
label{display:block; font-size:.75rem; font-weight:500; color:var(--ink-2); margin-bottom:.25rem}
label .hint{font-weight:400; color:var(--ink-3)}
.field{margin-bottom:.85rem}
.field-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(8rem,1fr)); gap:.85rem}

/* ---------- cards & tables ---------- */
.panel{background:var(--surface); border:1px solid var(--rule); border-radius:5px; box-shadow:var(--shadow); overflow:hidden}
.panel-h{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:.65rem .9rem; background:var(--sunk); border-bottom:1px solid var(--rule);
}
.panel-h h2,.panel-h h3{font-size:.875rem; font-weight:600}
.panel-h .eyebrow{font-size:.625rem}
.panel-b{padding:.9rem}
.grid{display:grid; gap:1rem}
/* Panels stack, one above the next, rather than splitting the page into
   columns: a screen reads top to bottom, in the order it was written. Rows of
   small comparison cards (.cols-3, .stats) stay side by side. */
.cols-2{grid-template-columns:minmax(0,1fr)}
.cols-3{grid-template-columns:repeat(auto-fit,minmax(14rem,1fr))}
.scroll{overflow-x:auto}
table{border-collapse:collapse; width:100%; font-size:.8125rem}
th,td{text-align:left; padding:.5rem .75rem; border-bottom:1px solid var(--rule); vertical-align:top}
thead th{
  font-family:var(--f-mono); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); background:var(--sunk); font-weight:500; white-space:nowrap;
}
tbody tr:last-child td{border-bottom:none}
tbody tr.click{cursor:pointer}
tbody tr.click:hover{background:var(--surface-2)}
td.mono,.mono{font-family:var(--f-mono); font-size:.75rem; font-variant-numeric:tabular-nums}
td.num{text-align:right; font-family:var(--f-mono); font-variant-numeric:tabular-nums}

/* ---------- chips ---------- */
.chip{
  display:inline-block; font-family:var(--f-mono); font-size:.625rem; letter-spacing:.08em;
  text-transform:uppercase; padding:.15rem .4rem; border-radius:3px; white-space:nowrap;
  background:var(--surface-2); color:var(--ink-2);
}
.chip.ok{background:var(--accent-soft); color:var(--accent-ink)}
.chip.warn{background:var(--warn-soft); color:var(--warn)}
.chip.bad{background:var(--bad-soft); color:var(--bad)}

/* ---------- SUDS ---------- */
.suds-val{font-family:var(--f-mono); font-weight:600; font-variant-numeric:tabular-nums}
.bar{height:6px; border-radius:3px; background:var(--surface-2); overflow:hidden; min-width:3rem}
.bar i{display:block; height:100%; border-radius:3px}
.step-row{display:grid; grid-template-columns:2.5rem minmax(0,1fr) 6.5rem 6rem; gap:.9rem; align-items:center; padding:.6rem .9rem}
.step-row + .step-row{border-top:1px solid var(--rule)}
.step-row .lab{font-size:.875rem; line-height:1.35}
.step-row .lab i{
  display:block; font-style:normal; font-family:var(--f-mono); font-size:.625rem;
  color:var(--ink-3); margin-top:.15rem;
}
@media (max-width:680px){
  .step-row{grid-template-columns:2.5rem minmax(0,1fr); gap:.5rem .9rem}
  .step-row .bar-wrap,.step-row .act{grid-column:2}
}

/* ---------- tabs ---------- */
.tabs{display:flex; gap:.15rem; border-bottom:1px solid var(--rule-strong); margin-bottom:1.25rem; overflow-x:auto}
.tabs button{
  border:none; background:none; border-bottom:2px solid transparent; border-radius:0;
  padding:.5rem .75rem; color:var(--ink-3); font-weight:500; font-size:.8125rem; white-space:nowrap;
}
.tabs button:hover{background:var(--surface-2); color:var(--ink)}
.tabs button.on{color:var(--accent); border-bottom-color:var(--accent)}

/* ---------- alerts ---------- */
.alert{
  border-left:2px solid var(--bad); background:var(--bad-soft); color:var(--bad);
  padding:.7rem .9rem; border-radius:0 4px 4px 0; font-size:.8125rem; margin-bottom:.85rem;
}
.alert.info{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink)}
.alert ul{margin:.4rem 0 0; padding-left:1.1rem}
.alert li{margin-bottom:.2rem}
.alert b{display:block; font-size:.8125rem; margin-bottom:.15rem}

/* ---------- stat tiles ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:.75rem; margin-bottom:1.25rem}
.stat{background:var(--surface); border:1px solid var(--rule); border-radius:5px; padding:.7rem .85rem}
.stat .k{font-family:var(--f-mono); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.stat .v{font-family:var(--f-disp); font-size:1.375rem; font-weight:600; font-variant-numeric:tabular-nums; margin-top:.2rem; letter-spacing:-.02em}
.stat .s{font-size:.6875rem; color:var(--ink-3); font-family:var(--f-mono)}

/* ---------- login ---------- */
.login-wrap{max-width:24rem; margin:5rem auto; padding:0 1.25rem}
.login-wrap h1{font-size:1.375rem; font-weight:600; margin-bottom:.35rem}
.login-wrap .prose{font-size:.9375rem; margin-bottom:1.5rem}
.creds{
  margin-top:1.25rem; padding:.75rem .85rem; background:var(--surface-2); border-radius:4px;
  font-family:var(--f-mono); font-size:.6875rem; color:var(--ink-2); line-height:1.8;
}
.creds b{color:var(--ink); font-weight:500}

/* ---------- group note composer ---------- */
.frame{
  display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; padding:.75rem .9rem;
  background:var(--accent-soft); border-radius:4px; margin-bottom:1rem;
  font-family:var(--f-mono); font-size:.6875rem; color:var(--accent-ink);
}
.frame b{font-weight:500}
.frame .full{flex-basis:100%; font-family:var(--f-body); font-size:.875rem; line-height:1.5}
.member{border:1px solid var(--rule); border-radius:5px; background:var(--surface); margin-bottom:.75rem; overflow:hidden}
.member.signed{opacity:.72}
.member-h{
  display:flex; align-items:center; gap:.75rem; padding:.6rem .9rem;
  background:var(--sunk); border-bottom:1px solid var(--rule); cursor:pointer; flex-wrap:wrap;
}
.member-h h4{font-size:.875rem; font-weight:600; flex:1; min-width:8rem}
.member-b{padding:.9rem}
.empty{padding:2rem 1rem; text-align:center; color:var(--ink-3); font-size:.875rem}
.spread{display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap}
.row-gap{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center}


/* ---------- charts ---------- */
.chart{width:100%; display:block; overflow:visible}
.chart .grid{stroke:var(--rule); stroke-width:1}
.chart .axis{stroke:var(--rule-strong); stroke-width:1}
.chart .tick{fill:var(--ink-3); font-family:var(--f-mono); font-size:9px; font-variant-numeric:tabular-nums}
.chart .axis-label{fill:var(--ink-3); font-family:var(--f-mono); font-size:8.5px; letter-spacing:.1em; text-transform:uppercase}
.chart .line{fill:none; stroke:var(--s60); stroke-width:2; stroke-linejoin:round; stroke-linecap:round}
.chart .ref{stroke:var(--ink-3); stroke-width:1; stroke-dasharray:3 3; opacity:.7}
.chart .ref-text{fill:var(--ink-3); font-family:var(--f-mono); font-size:8.5px}
.chart .pt{stroke:var(--s80); stroke-width:1.5}
.chart .pt-label{fill:var(--ink); font-family:var(--f-mono); font-size:9.5px; font-weight:500; font-variant-numeric:tabular-nums}
.chart .hit{fill:transparent; cursor:pointer}
.chart .hit:hover ~ .pt, .chart .pt:hover{stroke:var(--ink)}
/* Response prevention not maintained: a hollow ring, so the difference is a
   shape and survives grayscale. The tooltip, key and table say it in words. */
.chart .pt-open{fill:var(--surface); stroke:var(--ink); stroke-width:1.75}
/* The point a keyboard user has moved to, or tapped: charts.js also raises
   its radius to 6, so it stands out by size as well as by its ink ring. */
.chart .pt.on{stroke:var(--ink); stroke-width:3}
/* A chart that takes the arrow keys shows it has focus. Square, because the
   outline follows the plot's edge rather than a button's corners. */
.chart[data-keys]:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:0}
/* A tap or click focuses the chart too, and Chrome then draws its own blue
   ring on an SVG. Only keyboard focus is shown; a tap shows its tooltip. */
.chart[data-keys]:focus:not(:focus-visible){outline:none}
.hw-chart-box{padding:.25rem 1rem 1rem; border-bottom:1px solid var(--rule)}
/* Drawn at its own size, not stretched to a wide panel, so the type stays chart-sized. */
.hw-chart-box .chart{max-width:600px}
/* Larger than the other chart legends: it names the hollow point and the
   reference line, which the graph cannot be read without. Two classes so it
   wins over .chart-legend below; the portal's own rule still wins over this. */
.chart-legend.hw-key{font-size:.75rem; color:var(--ink-2)}
.hw-key span{display:inline-flex; align-items:center; gap:.35rem}
.chart-data summary{cursor:pointer; color:var(--accent); font-size:.75rem; display:flex; align-items:center; min-height:44px}
.chart-legend{
  display:flex; gap:1rem; flex-wrap:wrap; margin-top:.5rem;
  font-family:var(--f-mono); font-size:.625rem; color:var(--ink-3); letter-spacing:.04em;
}
.chart-legend b{color:var(--ink); font-weight:500}
.tip{
  position:fixed; pointer-events:none; z-index:60; background:var(--ink); color:#FFFFFF;
  padding:.35rem .5rem; border-radius:4px; font-family:var(--f-mono); font-size:.6875rem;
  line-height:1.5; box-shadow:var(--shadow); white-space:nowrap;
}
/* ---------- generated note draft ---------- */
.draft-badge{
  display:inline-flex; align-items:center; gap:.35rem; font-family:var(--f-mono);
  font-size:.625rem; letter-spacing:.08em; text-transform:uppercase;
  background:var(--accent-soft); color:var(--accent-ink); padding:.2rem .45rem; border-radius:3px;
}
.sources{
  display:flex; gap:1.25rem; flex-wrap:wrap; font-family:var(--f-mono); font-size:.6875rem;
  color:var(--ink-3); padding:.6rem .9rem; background:var(--sunk); border-radius:4px; margin-bottom:.9rem;
}
.sources b{color:var(--ink); font-weight:500}

/* ---------- Google sign-in ---------- */
.btn.google{
  display:flex; align-items:center; justify-content:center; gap:.6rem; width:100%;
  padding:.6rem .8rem; text-decoration:none; font-weight:600; font-size:.875rem;
  color:var(--ink); background:var(--surface); border:1px solid var(--rule-strong);
  border-radius:4px; margin-bottom:1rem;
}
.btn.google:hover{background:var(--surface-2)}
.or{
  display:flex; align-items:center; gap:.75rem; margin:0 0 1rem;
  font-family:var(--f-mono); font-size:.625rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3);
}
.or::before,.or::after{content:""; flex:1; height:1px; background:var(--rule)}

/* ---------- hierarchy: client's own SUD anchors ---------- */
.anchor-row{
  display:grid; grid-template-columns:2.5rem minmax(0,1fr); gap:.75rem;
  align-items:center; margin-bottom:.5rem;
}

/* ---------- treatment plan objectives ---------- */
.obj{
  border:1px solid var(--rule); border-radius:5px; padding:.8rem;
  margin-bottom:.75rem; background:var(--sunk);
}

/* ---------- settings menu ---------- */
.menu{position:relative}
.menu summary{
  list-style:none; cursor:pointer; padding:.3rem .45rem; border-radius:4px;
  font-size:1rem; line-height:1; color:var(--ink-2);
}
.menu summary::-webkit-details-marker{display:none}
.menu summary:hover{background:var(--surface-2); color:var(--ink)}
.menu-body{
  position:absolute; right:0; top:100%; margin-top:.35rem; z-index:30;
  background:var(--surface); border:1px solid var(--rule-strong); border-radius:5px;
  box-shadow:var(--shadow); min-width:11rem; display:flex; flex-direction:column; padding:.25rem;
}
.menu-body a,.menu-body button{
  text-align:left; text-decoration:none; color:var(--ink); background:none; border:none;
  font-family:var(--f-body); font-size:.8125rem; padding:.45rem .6rem; border-radius:4px; cursor:pointer;
}
.menu-body a:hover,.menu-body button:hover{background:var(--surface-2)}

/* ---------- today ---------- */
.q{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.6rem .9rem; text-decoration:none; color:inherit;
}
.q + .q{border-top:1px solid var(--rule)}
.q:hover{background:var(--surface-2)}
.q strong{font-size:.875rem; font-weight:600}
.q-sub{font-size:.8125rem; color:var(--ink-2); margin-top:.1rem; line-height:1.4}
.q-go{font-family:var(--f-mono); color:var(--ink-3)}
.q-line{display:flex; gap:.5rem; align-items:center; padding:.3rem 0; font-size:.875rem}
.q-line a{font-size:.8125rem}
.panel.alarm{border-color:var(--bad)}
.risk-dot{
  display:inline-block; width:.5rem; height:.5rem; border-radius:50%;
  background:var(--bad); box-shadow:0 0 0 3px var(--bad-soft);
}

/* ---------- second-level chart navigation ----------
   The sections of the tab above, so they read as a level below it: led by
   that tab's name, no rule of their own, and the chosen one marked with a
   teal bar under the word and dark text (the tab above marks itself in
   teal). Pills made them look like filters. */
.subtabs{display:flex; align-items:center; gap:.25rem 1.25rem; flex-wrap:wrap; margin:-.5rem 0 1.25rem}
.subtabs-label{font-family:var(--f-mono); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)}
.subtabs button{
  border:0; background:none; border-radius:0; padding:.5rem 0;
  color:var(--ink-2); font-size:.8125rem; font-weight:500;
  box-shadow:inset 0 -2px 0 transparent;
}
.subtabs button:hover{background:none; color:var(--ink); box-shadow:inset 0 -2px 0 var(--rule-strong)}
.subtabs button.on{color:var(--ink); font-weight:600; box-shadow:inset 0 -2px 0 var(--accent)}

/* ---------- session screen ---------- */
/* Laid out for a tablet held one-handed with attention on the client:
   large targets, a single column, one step visible at a time. */
.session-top{
  display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap;
  padding-bottom:1rem; margin-bottom:1.25rem; border-bottom:1px solid var(--rule-strong);
}
.session-top h1{font-size:1.5rem; font-weight:600; letter-spacing:-.02em}
.session-top .back{
  font-family:var(--f-mono); font-size:.75rem; text-decoration:none; color:var(--ink-2);
  padding:.35rem .6rem; border-radius:4px; min-height:44px; display:inline-flex; align-items:center;
}
.session-top .back:hover{background:var(--surface-2); color:var(--ink)}
.session-top > .btn{margin-left:auto}
.session-sub{font-family:var(--f-mono); font-size:.6875rem; color:var(--ink-3); margin-top:.15rem}

.step{background:var(--surface); border:1px solid var(--rule); border-radius:6px;
  box-shadow:var(--shadow); margin-bottom:1rem; overflow:hidden}
.step-head{display:flex; align-items:center; gap:.7rem; padding:.7rem .9rem;
  background:var(--sunk); border-bottom:1px solid var(--rule)}
.step-head h2{font-size:1rem; font-weight:600; margin:0}
.step-head .chip{margin-left:auto}
.step-n{
  width:1.5rem; height:1.5rem; border-radius:50%; background:var(--accent); color:var(--on-accent);
  display:grid; place-items:center; font-family:var(--f-mono); font-size:.75rem; font-weight:600; flex:none;
}
.step-body{padding:1rem}
.field-label{display:block; font-size:.75rem; font-weight:500; color:var(--ink-2); margin:.9rem 0 .35rem}

button.big{width:100%; padding:.8rem 1rem; font-size:.9375rem; margin-top:.6rem}
.row-gap button.big{width:auto; flex:1; min-width:12rem}

/* SUD pad: thumb-sized, colour carries magnitude, number carries the value */
.sudpad-row{display:grid; grid-template-columns:repeat(11,1fr); gap:.25rem}
.sudpad-row button{
  padding:.7rem .1rem; font-family:var(--f-mono); font-size:.75rem; font-variant-numeric:tabular-nums;
  border-radius:5px; border:0; background:var(--tint); color:var(--tint-on);
}
.sudpad-row button[aria-pressed="true"]{
  outline:2.5px solid var(--accent); outline-offset:2px; font-weight:600;
}
.sudpad-fine{display:flex; align-items:center; gap:.6rem; margin-top:.45rem}
.sudpad-fine button{padding:.45rem .8rem; font-family:var(--f-mono); font-size:.8125rem}
.sudpad-fine output{
  font-family:var(--f-mono); font-size:1.5rem; font-weight:600; font-variant-numeric:tabular-nums;
  min-width:3rem; text-align:center;
}
.trials{display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; margin-bottom:.6rem}
.trial{
  display:inline-grid; place-items:center; min-width:2.2rem; padding:.35rem .5rem;
  border-radius:4px; font-family:var(--f-mono); font-size:.8125rem; font-weight:600;
}
/* A SUDS value printed on its own swatch. */
.sw{display:inline-block; min-width:2.2em; padding:.1em .4em; border-radius:4px; text-align:center;
    font-family:var(--f-mono); font-variant-numeric:tabular-nums}
.trial-arrow{color:var(--ink-3); font-family:var(--f-mono)}
.tick{display:flex; gap:.5rem; align-items:flex-start; font-weight:400; font-size:.875rem; margin-bottom:.3rem}
.tick input{width:auto; margin-top:.2rem}

/* ---------- session run: two rails (design/ 1b) ---------- */
/* Left is operated, right is read. The pad sits in the bottom third where a
   held tablet is gripped; the note beside it fills as the session is captured. */
body.in-session main{max-width:none; padding:0}
.sess{min-height:100vh; display:flex; flex-direction:column; background:var(--paper)}
.sess-h{
  position:sticky; top:0; z-index:15; display:flex; align-items:center; gap:1rem;
  padding:.875rem 1.25rem; background:var(--surface); border-bottom:1px solid var(--ink-hair);
}
.sess-back{font-family:var(--f-mono); text-decoration:none; color:var(--ink-2); padding:.4rem .55rem; border-radius:6px;
  min-width:44px; min-height:44px; display:inline-flex; align-items:center; justify-content:center}
.sess-back:hover{background:var(--surface-2); color:var(--ink)}
.avatar{flex:none; width:38px; height:38px; border-radius:50%; background:#E6EFF1; border:1px solid #BCD2D8;
  font:500 13px/36px var(--f-mono); color:var(--accent-ink); text-align:center}
.sess-who{min-width:0}
.sess-who b,.sess-who .sess-name{font-size:1rem; font-weight:600}
.sess-who .sess-name{display:inline; letter-spacing:0}
.sess-who .mono{font-size:.6875rem; color:var(--ink-3); margin-left:.4rem}
.tags{margin-top:.3rem; display:flex; gap:.5rem; flex-wrap:wrap}
.tag{font:500 .625rem/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2);
  padding:4px 7px; border:1px solid var(--ink-hair); border-radius:4px; background:var(--paper); text-decoration:none}
.tag.risk{background:var(--risk); border-color:var(--risk); color:#fff}
.sess-clock{margin-left:auto; text-align:right; padding-right:1rem; border-right:1px solid var(--ink-hair)}
.sess-clock .mono{margin-top:.2rem; font-size:1.0625rem; font-variant-numeric:tabular-nums}
.sess-sign{display:flex; flex-direction:column; align-items:flex-end; gap:.3rem; position:relative}
.sess-sign button:disabled{background:var(--surface); border-color:var(--rule-strong); color:var(--ink-3); opacity:1; cursor:not-allowed}
.unres summary{list-style:none; cursor:pointer; font:500 .625rem/1 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--accent);
  display:inline-flex; align-items:center; min-height:44px}
.unres summary::-webkit-details-marker{display:none}
.unres ul{position:absolute; right:0; top:100%; margin:.4rem 0 0; padding:.6rem .9rem .6rem 1.8rem; min-width:16rem; z-index:20;
  background:var(--surface); border:1px solid var(--rule-strong); border-radius:6px; box-shadow:var(--shadow); font-size:.8125rem}
.unres li{margin:.15rem 0}

.sess-body{flex:1; display:grid; grid-template-columns:minmax(0,1.45fr) minmax(20rem,1fr); align-items:start}
.operate{border-right:1px solid var(--ink-hair); min-height:100%}
.sec-h{display:flex; align-items:baseline; gap:.6rem; margin-bottom:.6rem}
.muted{font-size:.625rem; color:var(--ink-3)}
.muted-p{margin:0; font-size:.875rem; color:var(--ink-2)}
.lbl{font:500 .625rem/1.2 var(--f-mono); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3)}

.checkin{padding:.875rem 1.25rem; border-bottom:1px solid var(--ink-hair); background:#FBFCFC}
.ci-cards{display:flex; gap:.6rem}
.ci-card{flex:1; padding:.55rem .7rem; background:var(--surface); border:1px solid var(--ink-hair); border-radius:6px}
.ci-card .v{margin-top:.35rem; font:400 1.0625rem/1 var(--f-mono); font-variant-numeric:tabular-nums}
.ci-quote{margin:.7rem 0 0; padding-left:.7rem; border-left:2px solid #BCD2D8; font:italic 400 .8125rem/1.55 var(--f-body); color:var(--ink-2)}
.ci-more{margin-top:.5rem; font-size:.8125rem; color:var(--ink-2)}
.ci-more summary{cursor:pointer; color:var(--accent); font-size:.75rem; display:flex; align-items:center; min-height:44px}
.ci-more p{margin:.2rem 0 .5rem; font-family:var(--f-body)}

.exposure{padding:1rem 1.25rem 1.25rem}
.ex-title{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:.75rem}
.ex-title h2{margin-top:.45rem; font:400 1.1875rem/1.3 var(--f-body)}
.ex-ant{flex:none; text-align:right}
.ex-ant .sw.ant{margin-top:.3rem; font-size:.8125rem; padding:.25em .5em; border:1.5px solid var(--s70); background:var(--surface); color:var(--s80)}
.rtable{width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--ink-hair); border-radius:8px; overflow:hidden; background:var(--surface)}
.rtable th{background:#F2F6F7; font:500 .625rem/1 var(--f-mono); letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3); text-align:left; padding:.5rem .65rem}
.rtable td{padding:.4rem .65rem; border-top:1px solid #E7EDEE; font-size:.75rem}
.recorder{margin-top:.875rem; padding:.875rem 1rem; border:1px solid #BCD2D8; border-radius:8px; background:#F4F8F9}
.recorder .rec-h{margin-bottom:.75rem}
.recorder .mono.big{font-size:1.875rem; letter-spacing:-.02em; font-variant-numeric:tabular-nums; margin-right:.5rem}
.eyebrow.accent{color:var(--accent)}
.recorder .sudpad{margin-top:.45rem}
.recorder .sudpad-row{gap:4px}
.recorder .sudpad-row button{height:56px; font-size:.8125rem}
.anchors{margin-top:.5rem; font:400 .625rem/1.4 var(--f-mono); color:var(--ink-3)}
.expect{margin-top:.875rem; display:flex; gap:.6rem; align-items:flex-start}
.ex-card{flex:1; min-width:0; padding:.7rem .8rem; border:1px solid var(--ink-hair); border-radius:7px; background:var(--surface)}
.ex-card p{margin:.45rem 0 0; font:400 .78125rem/1.45 var(--f-body); color:var(--ink-2)}
.ex-card.after{border:1.5px dashed var(--prov-captured-edge); background:#FAFCFD}
.ex-card.after summary{list-style:none; cursor:pointer; display:flex; flex-direction:column; gap:.45rem}
.ex-card.after summary::-webkit-details-marker{display:none}
.ex-card.after summary .lbl{color:var(--accent)}
.ex-card.after summary span:last-child{font-size:.78125rem; color:var(--ink-3)}
.ex-card.after[open]{flex-basis:100%}
.expect:has(.after[open]){flex-direction:column; align-items:stretch}

.evidence{position:sticky; top:var(--hh,67px); max-height:calc(100vh - var(--hh,67px) - var(--above,0px)); display:flex; flex-direction:column; background:var(--surface)}
.ev-h{padding:.875rem 1.125rem; border-bottom:1px solid var(--ink-hair)}
.ev-b{flex:1; overflow:auto; padding:1rem 1.125rem}
.ev-f{padding:.8rem 1.125rem; border-top:1px solid var(--ink-hair); background:#FBFCFC; font-size:.6875rem; color:var(--ink-2)}
.ev-f p{margin:0 0 .5rem}
.ev-f strong{color:var(--ink)}
.ev-more summary{cursor:pointer; color:var(--accent); font-size:.75rem; margin-bottom:.4rem}
.ev-f > button{margin-top:.4rem}
.legend{margin-top:.2rem; display:flex; flex-wrap:wrap; gap:.75rem; font-size:.6875rem; color:var(--ink-2)}
.legend span{display:flex; align-items:center; gap:5px}
.legend i{display:inline-block; width:12px; height:12px; border-radius:2px}
.legend .l-cap{background:var(--prov-captured); border-left:2px solid var(--prov-captured-edge)}
.legend .l-wr{height:2px; background:var(--prov-written)}
.legend .l-un{border:1.5px dashed var(--prov-captured-edge)}

/* Provenance: captured is tinted with a hairline; the clinician's own text is
   underlined in violet; unresolved is a dashed slot. */
.n-sec{margin-bottom:.9rem}
.n-sec > .lbl{display:block; margin-bottom:.45rem}
.prov{border-radius:0 6px 6px 0}
.prov textarea{display:block; width:100%; min-height:3rem; resize:none; overflow:hidden; border:0; background:transparent; padding:0;
  font:400 .8125rem/1.62 var(--f-body); color:#262A24}
.prov textarea:focus{outline:none}
.prov.captured{background:var(--prov-captured); border-left:2px solid var(--prov-captured-edge); padding:.45rem .6rem}
.prov.written{border-left:2px solid var(--prov-written); padding:.45rem .6rem; background:color-mix(in srgb, var(--prov-written) 5%, transparent)}
.prov.written textarea{text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--prov-written) 55%, transparent); text-underline-offset:3px}
.prov.unresolved{border:1.5px dashed var(--prov-captured-edge); border-radius:6px; background:#FAFCFD; padding:.6rem .7rem}
.prov.unresolved .lbl{color:var(--prov-unresolved); margin-bottom:.35rem}
.prov:focus-within{box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent)}
.prov.captured.edited{border-left-color:var(--prov-written)}
.prov.captured.edited > .lbl{color:var(--accent-ink); margin-bottom:.3rem}
.prov.evidence{margin-bottom:.45rem}
.prov.evidence p,.prov.running p{margin:.3rem 0 0; font:400 .78125rem/1.55 var(--f-body); color:var(--ink-2)}
.prov.running{margin-bottom:.45rem; border-left-style:dashed}

@media (max-width:900px){
  /* Portrait: stack, note below. The design's portrait layout (1c) is not built. */
  .sess-body{grid-template-columns:1fr}
  .operate{border-right:0}
  .evidence{position:static; max-height:none; border-top:1px solid var(--ink-hair)}
  .sess-h{flex-wrap:wrap}
  .ci-cards{flex-wrap:wrap}
}

/* ---------- group session: roster + one member ---------- */
.group-layout{display:grid; grid-template-columns:15rem minmax(0,1fr); gap:1rem; align-items:start}
@media (max-width:820px){.group-layout{grid-template-columns:1fr}}
.roster{background:var(--surface); border:1px solid var(--rule); border-radius:6px;
  box-shadow:var(--shadow); overflow:hidden; position:sticky; top:4.5rem}
@media (max-width:820px){.roster{position:static}}
.roster-head{font-family:var(--f-mono); font-size:.625rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-3); padding:.6rem .8rem; background:var(--sunk); border-bottom:1px solid var(--rule)}
.roster-row{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem; width:100%;
  border:none; border-bottom:1px solid var(--rule); border-radius:0; background:none;
  padding:.6rem .8rem; text-align:left;
}
.roster-row:last-of-type{border-bottom:none}
.roster-row:hover{background:var(--surface-2)}
.roster-row.on{background:var(--accent-soft)}
.roster-row.on .roster-name{color:var(--accent-ink); font-weight:600}
.roster-name{font-size:.875rem}
.roster-done{padding:.6rem .8rem; font-family:var(--f-body); font-size:.8125rem; color:var(--ink-3);
  border-top:1px solid var(--rule)}
.member-pane{background:var(--surface); border:1px solid var(--rule); border-radius:6px; box-shadow:var(--shadow); overflow:hidden}
.pane-head{display:flex; align-items:center; gap:.7rem; padding:.7rem .9rem;
  background:var(--sunk); border-bottom:1px solid var(--rule); flex-wrap:wrap}
.pane-head h2,.pane-head h3{font-size:1rem; font-weight:600; margin:0}
.pane-body{padding:1rem}
.progress-pill{
  margin-left:auto; font-family:var(--f-mono); font-size:.75rem; color:var(--ink-2);
  background:var(--surface-2); padding:.4rem .7rem; border-radius:99px;
}
.progress-pill.done{background:var(--accent-soft); color:var(--accent-ink)}
.progress-pill strong{font-size:.9375rem}

/* ---------- in-app dialogs ---------- */
/* Replaces window.prompt and window.confirm. <dialog> gives focus trapping,
   Escape and the backdrop from the platform; everything visible is ours. */
dialog.modal{
  border:none; border-radius:8px; padding:0; max-width:32rem; width:calc(100% - 2rem);
  background:var(--surface); color:var(--ink);
  box-shadow:0 4px 12px rgba(28,24,39,.12), 0 24px 56px -20px rgba(28,24,39,.35);
}
dialog.modal::backdrop{background:rgba(28,24,39,.35)}
dialog.modal form{padding:1.25rem}
dialog.modal h3{
  font-family:var(--f-disp); font-size:1.125rem; font-weight:600;
  letter-spacing:-.015em; margin:0 0 .4rem;
}
.modal-intro{
  font-family:var(--f-body); font-size:.9375rem; line-height:1.55;
  color:var(--ink-2); margin:0 0 1rem;
}
.modal-hint{
  font-family:var(--f-body); font-size:.8125rem; color:var(--ink-3);
  margin:.1rem 0 .35rem; line-height:1.45;
}
dialog.modal .field:last-of-type{margin-bottom:0}
.modal-actions{
  display:flex; gap:.6rem; justify-content:flex-end; align-items:center;
  margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--rule);
}
.modal-actions button{padding:.5rem .9rem}
button.primary.danger{background:var(--bad); border-color:var(--bad)}
button.primary.danger:hover:not(:disabled){filter:brightness(1.08)}
#modal-err .alert{margin-bottom:.9rem}
#modal-err ul{margin:0; padding-left:1.1rem}

@media (max-width:520px){
  dialog.modal{max-width:none; width:100%; margin:auto 0 0; border-radius:8px 8px 0 0}
  .modal-actions{flex-direction:column-reverse; align-items:stretch}
  .modal-actions button{width:100%}
}


/* ---------- sign in ---------- */
/* One centred card. The two audiences - staff and clients - are a tab inside
   it rather than two columns, because on a phone two columns is just one card
   pushed below the fold. */
.signin{max-width:26rem; margin:3.5rem auto 2rem; padding:0 1.25rem}
/* The lockup: the bird, then the word.
   The wordmark is live text in the brand face rather than a second image, so
   it stays sharp at any size, can be selected and read aloud, and never drifts
   out of step with the rest of the interface's type. The bird carries the
   rotation baked in, exactly as the brand sheet draws it. */
.brand-mark{
  display:flex; align-items:center; gap:.6rem; margin-bottom:1rem;
  font-family:var(--f-disp); font-weight:600; font-size:2rem; line-height:1;
  letter-spacing:-.01em; color:var(--accent);
}
.brand-mark img{width:auto; height:2.6rem; flex:none}
.signin h1{
  font-family:var(--f-disp); font-size:1.5rem; font-weight:600; letter-spacing:-.02em;
  margin:0 0 1.25rem;
}
.signin .tabs{margin-bottom:1.1rem}
.signin .door{padding:1.25rem 1.25rem 1.1rem}

/* The card itself. Also used by the enquiry form and the attestation screen. */
.door{
  background:var(--surface); border:1px solid var(--rule-strong); border-radius:8px;
  box-shadow:var(--shadow); padding:1.25rem;
}
.door-head{display:flex; align-items:center; gap:.6rem; margin-bottom:1rem}
.door-head h2{font-family:var(--f-disp); font-size:1.125rem; font-weight:600; margin:0}
.door-head .chip{margin-left:auto}
.door-body{font-family:var(--f-body); font-size:.9375rem; line-height:1.6; color:var(--ink-2); margin:0 0 1rem}
.door-note{
  font-family:var(--f-body); font-size:.8125rem; line-height:1.5;
  color:var(--ink-3); margin:.6rem 0 0;
}
.signin-alt{
  font-family:var(--f-body); font-size:.875rem; color:var(--ink-2);
  margin:1.1rem 0 0;
}
.signin-foot{
  font-family:var(--f-mono); font-size:.6875rem; line-height:1.8; color:var(--ink-3);
  margin:1.75rem 0 0; padding-top:1rem; border-top:1px solid var(--rule);
}
@media (max-width:620px){
  .signin{margin-top:2rem}
}

.demo-accounts{margin-top:1rem}
.demo-accounts summary{
  cursor:pointer; font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3);
}
.demo-accounts summary:hover{color:var(--ink-2)}
.demo-accounts .creds{margin-top:.5rem}
/* A button that reads as a link. Used where the action is a POST but the
   affordance should be quiet - signing out from a screen you cannot navigate
   away from, for instance. */
.linklike{
  background:none; border:0; padding:0; font:inherit; color:var(--accent-ink);
  text-decoration:underline; text-underline-offset:2px; cursor:pointer;
}
.linklike:hover{color:var(--accent)}
.linklike:disabled{opacity:.45}
.rail .menu summary{font-size:.8125rem; line-height:normal; padding:0 10px}

/* ---------- two-factor sign-in: passkeys and the app ---------- */
/* 44px on every screen size, not just phones: sign-in and these controls are
   used with a security key in one hand or a phone held up to a laptop. */
.tall{min-height:44px}
/* Padding rather than flex for the height, so the disclosure triangle stays:
   without it a summary reads as a label, not something that opens. */
.tall-summary{cursor:pointer; font-size:.875rem; line-height:1.4; color:var(--ink-2); padding:.75rem 0}
.field-err{margin:.35rem 0 0; font:600 .875rem/1.4 var(--f-body); color:var(--bad)}
.field-err::before{content:"\2192\00a0"}
.mfa-choice{margin-bottom:1rem}
.mfa-choice button{width:100%}
.mfa-choice .modal-hint{margin:.4rem 0 0}
.ts-h{font-size:.9375rem; font-weight:600; margin:1.25rem 0 .5rem}
.pk-list{list-style:none; margin:0 0 .75rem; padding:0}
.pk-row{display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap;
  min-height:44px; padding:.5rem 0; border-top:1px solid var(--rule)}
.pk-row:last-child{border-bottom:1px solid var(--rule)}
.pk-meta{font-family:var(--f-mono); font-size:.6875rem; color:var(--ink-3); margin-top:.15rem}


/* ---------- trial ladder (design/ 1e) ---------- */
.ladder-wrap select{margin-top:.35rem; max-width:28rem}
.ld-step{margin-top:.35rem; font:400 1.0625rem/1.3 var(--f-body)}
.ld{display:grid; gap:5px; align-items:center; max-width:40rem}
.ld-h{font:500 .625rem/1 var(--f-mono); color:var(--ink-3); text-align:center}
.ld-l{font-size:.6875rem; text-align:right; padding-right:.5rem; color:var(--ink)}
.ld-l.muted{color:var(--ink-3)}
.ld-c{height:36px; border-radius:5px; font:500 .875rem/36px var(--f-mono); text-align:center; font-variant-numeric:tabular-nums}
.ld-c.ant{height:28px; line-height:25px; border:1.5px dashed var(--s70); color:var(--s80); font-size:.75rem}
.ld-c.none{background:transparent}
.ld-gap{grid-column:1/-1; height:1px; background:var(--ink-hair); margin:4px 0}
.ld-cap{margin:.8rem 0 0; font-size:.8125rem; color:var(--ink-2); max-width:40rem}

/* ---------- note provenance, sentence level (design/ 1f) ---------- */
.prose-view{font:400 .8125rem/1.62 var(--f-body); color:#262A24; cursor:text; border-radius:3px}
.prose-view:hover{outline:1px dashed var(--rule-strong); outline-offset:3px}
.prose-view .mine{text-decoration:underline; text-decoration-color:var(--prov-written); text-decoration-thickness:1.5px;
  text-underline-offset:3px; background:color-mix(in srgb, var(--prov-written) 6%, transparent)}
.prov.written .prose-view{text-decoration:none}
.prov.written{background:transparent}
.note-doc{max-width:46rem}
.note-doc .n-sec{margin-bottom:1.1rem}
.signbar{position:sticky; bottom:0; z-index:5; display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  margin:1rem -1rem 0; padding:.8rem 1rem; background:var(--surface); border-top:1px solid var(--ink-hair);
  box-shadow:0 -6px 16px -12px rgba(28,24,39,.25)}
.signbar-t{display:flex; flex-direction:column; gap:.15rem; margin-right:auto}
.signbar-t b{font-size:.875rem}
.signbar-t span{font-size:.75rem; color:var(--ink-3)}
.signbar button.primary:disabled{background:var(--surface); border-color:var(--rule-strong); color:var(--ink-3); opacity:1; cursor:not-allowed}
.prov [hidden]{display:none}

/* ---------- group note: signing paused (design/ 1h) ---------- */
/* No red: the near-black ink surface makes it grave without alarm. */
.gpause{border:1.5px solid #383C33; border-radius:10px; overflow:hidden; background:var(--surface); margin-bottom:1rem}
.gpause-top{padding:.875rem 1rem; background:#383C33}
.gpause-top .lbl{color:#A8C6CD; letter-spacing:.1em}
.gpause-top p{margin:.5rem 0 0; font:400 1rem/1.35 var(--f-body); color:#fff}
.gpause-b{padding:.875rem 1rem}
.gpause .why{margin:0 0 .8rem; font-size:.8125rem; color:var(--ink-2)}
.gpair{display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-bottom:.9rem}
.gpair > div{padding:.6rem .7rem; border:1px solid var(--ink-hair); border-radius:6px; background:var(--paper)}
.gpair p{margin:.4rem 0 .5rem; font:400 .8125rem/1.55 var(--f-body); color:#262A24;
  background:#EDF2EA; box-shadow:0 1px 0 var(--s70); display:inline}
.gnums{margin-top:.5rem; font-size:.75rem; display:flex; align-items:center; gap:.35rem; flex-wrap:wrap}
.chip.copies{background:#383C33; color:#fff}
.roster-row .sw{font-size:.625rem; margin-left:auto; margin-right:.35rem}
@media (max-width:620px){.gpair{grid-template-columns:1fr}}

/* ---------- today (design/ 1i) ---------- */
.today-h{font-family:var(--f-disp); font-weight:400; font-size:1.75rem; letter-spacing:-.01em}
.today{display:grid; grid-template-columns:minmax(0,1fr); gap:1rem; align-items:start}
.today > div{display:flex; flex-direction:column; gap:1rem}
.sched{display:flex; align-items:center; gap:.9rem; padding:.7rem .9rem; text-decoration:none; color:inherit}
.sched + .sched{border-top:1px solid var(--rule)}
.sched:hover{background:var(--surface-2)}
.sched.done{opacity:.65}
.sched-t{flex:none; width:4.5rem; font-size:.8125rem; color:var(--ink-2); font-variant-numeric:tabular-nums}
.sched-w{flex:1; min-width:0; display:flex; flex-direction:column}
/* Clinical signal uses the deep end of the distress ramp, never the violet interface. */
.risk-tag{display:inline-block; flex:none; font:500 .625rem/1 var(--f-mono); letter-spacing:.05em; text-transform:uppercase;
  padding:5px 7px; border-radius:4px; background:var(--risk); color:#fff; white-space:nowrap}
.needs{display:flex; flex-direction:column; gap:.6rem}
.risk-card{padding:.85rem 1rem; background:var(--surface); border:1px solid var(--ink-hair); border-left:3px solid var(--risk); border-radius:0 8px 8px 0}
.risk-card-h{display:flex; align-items:center; justify-content:space-between; gap:.6rem}
.risk-card .muted{font-size:.625rem; color:var(--ink-3)}
.risk-who{margin:.55rem 0 0; font-size:.875rem}
.risk-why{margin:.3rem 0 0; font-size:.8125rem; color:var(--ink-2)}
.risk-note{margin:.4rem 0 0; font:italic 400 .8125rem/1.5 var(--f-body); color:var(--ink-2)}
.risk-card .btn{margin-top:.6rem}
@media (max-width:860px){.today{grid-template-columns:1fr} .sched{flex-wrap:wrap} .sched .risk-tag{order:3; margin-left:5.4rem}}
.mtags{display:flex; flex-direction:column; align-items:flex-start; gap:.25rem}

/* Group member picker */
.mp-list{display:grid; gap:.25rem; max-height:18rem; overflow-y:auto}
.mp-row{display:flex; align-items:center; gap:.6rem; padding:.45rem .65rem; border:1px solid var(--rule); border-radius:5px;
  margin:0; font:400 .9375rem/1.35 var(--f-body); color:var(--ink)}
label.mp-row{cursor:pointer}
.mp-row input{width:auto; margin:0; accent-color:var(--accent); flex:none}
.mp-row > span:first-of-type{flex:1; min-width:0}
.mp-row .mp-clin{font-size:.8125rem; color:var(--ink-3)}
label.mp-row:has(input:checked){border-color:var(--accent); background:var(--accent-soft)}

/* Measure items. The question leads in the label face; the answers sit
   below it at body weight, all in view, so the two never read alike. */
.mq-section{margin-bottom:1.5rem}
.mq-sec-title{font:600 1.1875rem/1.3 var(--f-disp); color:var(--ink); margin:0}
.mq{border:0; margin:0 0 1.35rem; padding:0; min-width:0}
.mq legend{display:flex; gap:.55rem; align-items:baseline; padding:0; margin-bottom:.35rem;
  font:600 1.0625rem/1.35 var(--f-disp); color:var(--ink)}
.mq legend .hint{font:400 .8125rem/1.3 var(--f-body)}
.mq-n{flex:none; font:500 .75rem/1 var(--f-mono); color:var(--ink-3); min-width:1.25rem}
.mq-ask{margin:0 0 .5rem 1.8rem; font:italic 400 .9375rem/1.45 var(--f-body); color:var(--ink-2)}
.mq-opts{display:grid; gap:.25rem; margin-left:1.8rem}
.mq-opts.two{grid-template-columns:repeat(2,minmax(0,8rem))}
.mq-opt{display:flex; gap:.6rem; align-items:flex-start; margin:0; padding:.45rem .7rem; cursor:pointer;
  border:1px solid var(--rule); border-radius:5px; background:var(--surface);
  font:400 .9375rem/1.4 var(--f-body); color:var(--ink-2)}
.mq-opt:hover{border-color:var(--rule-strong)}
.mq-opt input{width:auto; flex:none; margin:.2rem 0 0; accent-color:var(--accent); box-shadow:none}
.mq-opt:has(input:checked){border-color:var(--accent); background:var(--accent-soft); color:var(--ink)}
.mq-opt:has(input:focus-visible){box-shadow:0 0 0 3px var(--accent-soft); border-color:var(--accent)}
.mq.missing legend{color:var(--bad)}
.mq.missing .mq-opts{box-shadow:-3px 0 0 var(--bad); padding-left:.5rem}
@media (max-width:620px){
  .mq-ask,.mq-opts{margin-left:0}
}

/* Inbox */
.rail a{position:relative}
.rail-badge{position:absolute; top:.2rem; left:1.55rem; min-width:1.05rem; height:1.05rem; padding:0 .25rem;
  border-radius:999px; background:var(--accent); color:var(--on-accent); font:600 .625rem/1.05rem var(--f-mono); text-align:center}
.inbox-row{display:grid; grid-template-columns:.6rem minmax(0,1fr) auto; gap:.25rem .75rem; align-items:baseline;
  padding:.8rem 1rem; border-bottom:1px solid var(--rule); color:var(--ink-2)}
.inbox-who{text-decoration:none}
.inbox-who:hover b{text-decoration:underline}
.inbox-mark{grid-column:3; grid-row:2; justify-self:end}
.inbox-row:last-child{border-bottom:0}
.inbox-row:hover{background:var(--surface-2)}
.inbox-dot{width:.5rem; height:.5rem; border-radius:50%; align-self:center}
.inbox-row.unread .inbox-dot{background:var(--accent)}
.inbox-who{display:flex; gap:.5rem; align-items:baseline; flex-wrap:wrap; font:400 1rem/1.35 var(--f-disp); color:var(--ink)}
.inbox-row.unread .inbox-who b{font-weight:600}
.inbox-row:not(.unread) .inbox-who b{font-weight:500}
.inbox-count{font:500 .75rem/1 var(--f-mono); color:var(--accent-ink)}
.inbox-preview{grid-column:2; font:400 .9375rem/1.45 var(--f-body); color:var(--ink-2); overflow-wrap:anywhere}
.inbox-when{grid-column:3; grid-row:1; font-size:.75rem; color:var(--ink-3)}

/* ---------- phones ----------
   Tables marked .stack become one card per row, each value with its column
   name beside it, instead of a table scrolled sideways. Form fields go to
   16px so iOS does not zoom the page when one is focused, and small buttons
   grow to a size a thumb can hit. */
@media (max-width:680px){
  main{padding:1.25rem 1rem 5rem}
  .rail nav,.rail-foot{gap:0}
  .rail nav{flex:1; justify-content:space-around}
  .rail a:not(.rail-mark),.rail summary{padding:0 7px; justify-content:center}
  .rail{padding-bottom:calc(.5rem + env(safe-area-inset-bottom)); height:calc(60px + env(safe-area-inset-bottom))}
  body.has-rail{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  .rail-badge{left:50%; margin-left:.3rem; top:0}

  input,select,textarea{font-size:16px}
  /* Thumb-sized targets: 44px is the WCAG 2.5.5 / platform guideline. */
  button,.btn,select,.menu-body a{min-height:44px}
  button.tiny,.btn.tiny{min-height:44px; padding:.35rem .8rem; font-size:.8125rem}
  a.btn{display:inline-flex; align-items:center}
  .linklike{min-height:0}
  .tabs button,.subtabs button{min-height:44px}
  /* The bottom bar keeps a short word under each icon: a row of bare glyphs
     makes a phone user guess, and one guess wrong is a chart opened by mistake. */
  .rail nav a,.rail-foot > a{flex-direction:column; justify-content:center; gap:2px; height:44px; min-width:2.75rem; padding:0 3px}
  /* Seven destinations and the account menu fit a 375px phone; Team and the
     audit log, used least, move into the account menu there. */
  .rail.rail-clin a.rail-desk{display:none}
  .rail .menu-body a.menu-mobile{display:block}
  .rail nav a span,.rail-foot > a span{display:block; opacity:1; font-size:.625rem; line-height:1.1; font-weight:500}
  .rail summary{height:44px}
  .page-h > div[style*="margin-left:auto"]{margin-left:0!important; width:100%}
  .page-h input{width:100%!important}
  .page-h h1{font-size:1.5rem}

  table.stack thead{display:none}
  table.stack, table.stack tbody, table.stack tr, table.stack td{display:block; width:100%}
  table.stack tr{padding:.65rem .9rem; border-bottom:1px solid var(--rule)}
  table.stack tbody tr:last-child{border-bottom:0}
  table.stack td{border:0; padding:.2rem 0; display:flex; gap:.75rem; align-items:baseline}
  table.stack td[data-label]::before{content:attr(data-label); flex:none; width:6.5rem;
    font:500 .625rem/1.6 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3)}
  table.stack td.stack-lead{font-size:1rem; padding-bottom:.35rem}
  table.stack td:empty{display:none}
  table.stack td > .row-gap{justify-content:flex-start!important}

  .inbox-row{grid-template-columns:.6rem minmax(0,1fr); padding:.8rem}
  .inbox-when{grid-column:2; grid-row:auto}
  .inbox-mark{grid-column:2; grid-row:auto; justify-self:start}
  .mq-opt{padding:.6rem .75rem}
  dialog.modal{width:calc(100% - 1rem); max-height:calc(100dvh - 2rem)}
}

/* ---------- admin overview ---------- */
.seg{display:inline-flex; gap:.25rem; flex-wrap:wrap}
.seg button[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:#fff}
th.num{text-align:right}
.todo{list-style:none; margin:0; padding:0; display:grid; gap:.4rem}
.todo b{display:inline-block; min-width:2.25rem; font-variant-numeric:tabular-nums}
.trends{display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:.75rem; margin-bottom:1.25rem}
.trend{margin:0; background:var(--surface); border:1px solid var(--rule); border-radius:5px; padding:.7rem .85rem}
.trend figcaption{display:flex; justify-content:space-between; align-items:baseline; font-size:.8125rem; margin-bottom:.4rem}
.trend figcaption b{font-size:1.125rem; font-variant-numeric:tabular-nums}
.trend svg{display:block; width:100%; height:3rem}
.trend .s{font-size:.6875rem; color:var(--ink-3); font-family:var(--f-mono); margin-top:.3rem}
.kv{display:grid; grid-template-columns:max-content 1fr; gap:.45rem 1rem; margin:0; font-size:.875rem}
.kv dt{color:var(--ink-3)}
.kv dd{margin:0}
.links{margin:0; padding:0; list-style:none; display:grid; gap:.5rem; font-size:.9375rem}
.links a{display:inline-block; min-height:44px; line-height:44px}
@media (min-width:681px){.links a{min-height:0; line-height:inherit}}

/* ---------- my tasks (Today) ----------
   The whole row is the target: the label toggles the checkbox, and every row
   and button is at least 44px tall. Done is struck through and muted, never
   green (green is the SUDS ramp's). */
#tasks{margin-top:1rem}
.task-add{display:grid; grid-template-columns:1fr auto auto; gap:.6rem; align-items:end; padding:.9rem .9rem 0}
.task-add .field{margin:0}
.task-add button{min-height:44px}
#task-msg{padding:0 .9rem}
#task-msg > *{margin:.5rem 0 0}
.tasks{list-style:none; margin:.75rem 0 0; padding:0}
.task{display:flex; align-items:center; gap:.6rem; min-height:44px; padding:0 .9rem; border-top:1px solid var(--rule)}
.task input[type="checkbox"]{width:1.15rem; height:1.15rem; flex:none; margin:0; accent-color:var(--accent)}
.task label{flex:1; min-width:0; padding:.6rem 0; cursor:pointer; overflow-wrap:anywhere}
.task.done label{color:var(--ink-3); text-decoration:line-through}
.task-due{font-size:.75rem; color:var(--ink-3); white-space:nowrap}
.task-del{min-height:44px; font-size:.8125rem}
.tasks-done summary{display:flex; align-items:center; min-height:44px; padding:0 .9rem; border-top:1px solid var(--rule);
  cursor:pointer; font-size:.875rem; color:var(--ink-2)}
@media (max-width:560px){
  .task-add{grid-template-columns:1fr auto}
  .task-add .field:first-child{grid-column:1 / -1}
}

/* ---------- a note on one SUDS reading (session runner) ---------- */
.recorder .trial-note{margin:.75rem 0 .5rem}
.recorder .trial-note input{width:100%}
.rtable td.rnote{font-size:.8125rem; color:var(--ink-2); overflow-wrap:anywhere}
.rnote-edit{display:flex; gap:.35rem; align-items:center; flex-wrap:wrap}
.rnote-edit input{flex:1; min-width:8rem}

/* "Show password" on the setup pages: a real checkbox, a 44px row. */
.field label.showpw{display:inline-flex; align-items:center; gap:.45rem; min-height:44px; margin-top:.25rem;
  font-weight:400; font-size:.875rem; color:var(--ink-2); cursor:pointer}
.showpw input{width:1.05rem; height:1.05rem; margin:0; accent-color:var(--accent)}

/* ---------- sandbox guide (public/sandbox.js) ----------
   A card in the corner: the current task, one question after it. It sits
   over the app rather than beside it, so it collapses to its header, and on
   a phone it becomes a bar along the bottom. */
.sbx{position:fixed; right:1rem; bottom:1rem; z-index:40; width:22rem; max-width:calc(100vw - 2rem);
  background:var(--surface); border:1px solid var(--rule-strong); border-top:3px solid var(--accent);
  border-radius:6px; box-shadow:0 12px 32px -12px rgba(28,24,39,.35); font-size:.875rem}
.sbx-toggle{display:flex; align-items:center; gap:.6rem; width:100%; min-height:44px; padding:.5rem .9rem;
  border:0; border-radius:0; background:transparent; text-align:left; font-weight:600; font-size:.875rem}
.sbx-toggle svg{width:12px; height:12px; margin-left:auto; fill:none; stroke:currentColor; stroke-width:1.5}
.sbx-eyebrow{font-family:var(--f-mono); font-size:.75rem; font-weight:400; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-ink); margin:0}
.sbx-body{padding:0 .9rem .9rem; max-height:min(70dvh,34rem); overflow:auto}
.sbx-bar{display:grid; grid-template-columns:repeat(5,1fr); gap:3px; margin-bottom:.75rem}
.sbx-bar i{height:4px; border-radius:2px; background:var(--rule)}
.sbx-bar i.on{background:var(--accent)}
.sbx-bar i.now{background:var(--ochre)}
.sbx-title{font-size:1.125rem; font-weight:600; line-height:1.3}
.sbx-title:focus{outline:none}
.sbx-steps{margin:.5rem 0 0; padding-left:1.2rem; line-height:1.5}
.sbx-steps li{margin-bottom:.2rem}
.sbx-hint,.sbx-p{color:var(--ink-2); line-height:1.5; margin:.5rem 0 0}
.sbx-seen{margin:.5rem 0 0; color:var(--accent-ink)}
.sbx-actions{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.85rem}
.sbx-actions button,.sbx-actions .btn{min-height:44px; padding:.45rem .9rem; display:inline-flex; align-items:center}
.sbx-fine{font-size:.8125rem; color:var(--ink-3); margin:.85rem 0 0; line-height:1.45}
.sbx label{font-size:.8125rem; margin-top:.75rem}
.sbx-scale{border:0; padding:0; margin:.75rem 0 0; min-width:0}
.sbx-scale legend{font-size:.875rem; font-weight:500; color:var(--ink); padding:0; margin-bottom:.45rem; line-height:1.4}
.sbx-dots{display:grid; grid-template-columns:repeat(5,1fr); gap:.35rem}
.sbx .sbx-dots label,.sbx-dialog .sbx-dots label{margin:0; position:relative}
.sbx-dots input{position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer}
.sbx-dots span{display:flex; align-items:center; justify-content:center; min-height:44px; border:1px solid var(--rule-strong);
  border-radius:4px; font-family:var(--f-mono); font-size:.9375rem; color:var(--ink); background:var(--surface)}
.sbx-dots input:hover + span{background:var(--surface-2)}
.sbx-dots input:checked + span{border-color:var(--accent); box-shadow:inset 0 0 0 2px var(--accent); background:var(--accent-soft); color:var(--accent-ink); font-weight:600}
.sbx-dots input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px}
.sbx-ends{display:flex; justify-content:space-between; font-size:.75rem; color:var(--ink-3); margin-top:.3rem; font-family:var(--f-mono)}
.sbx-note{margin:.5rem 0 0; color:var(--warn); background:var(--warn-soft); border-radius:4px; padding:.45rem .6rem; line-height:1.45}
.sbx-skip{text-decoration:underline; text-underline-offset:2px}
.sbx textarea{scroll-margin-bottom:40vh}
/* Maya's tab: in the flow at the top of the page, never over her form. */
.sbx.sbx-client{position:static; width:auto; max-width:34rem; margin:1rem auto 0; box-shadow:var(--shadow)}
.sbx-client .sbx-body{padding-top:.8rem; max-height:none}
/* The card never hides what it points at: a column of its own on wide
   screens, and room at the foot of the page (its own height) elsewhere. */
body.has-sbx{padding-bottom:var(--sbx-h, 6rem)}
@media (min-width:1200px){ body.has-sbx{padding-right:23.5rem; padding-bottom:0} body.has-sbx .banner{margin-right:-23.5rem} }
@media (max-width:680px){
  .sbx:not(.sbx-client){right:0; left:0; bottom:0; width:auto; max-width:none; border-radius:6px 6px 0 0; border-left:0; border-right:0; border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom)}
  .sbx-body{max-height:55dvh}
}

.sbx-dialog{width:min(36rem,calc(100vw - 2rem)); max-height:calc(100dvh - 2rem); overflow:auto; border:1px solid var(--rule-strong);
  border-radius:6px; padding:1.25rem 1.25rem 1rem; box-shadow:var(--shadow); color:var(--ink); background:var(--surface)}
.sbx-dialog::backdrop{background:rgba(28,24,39,.4)}
.sbx-dialog h2{font-size:1.5rem; font-weight:600}
.sbx-dialog h2:focus{outline:none}
.sbx-checks{border:0; padding:0; margin:1.1rem 0 0; min-width:0}
.sbx-checks legend{font-size:.875rem; font-weight:500; padding:0; margin-bottom:.35rem; line-height:1.4}
.sbx-checks > label{display:flex; align-items:center; gap:.6rem; min-height:44px; margin:0; font-size:.9375rem; font-weight:400; color:var(--ink); cursor:pointer}
.sbx-checks > label input{width:1.1rem; height:1.1rem; margin:0; accent-color:var(--accent); flex:none}
.sbx-dialog #sbx-who{margin-top:1rem; padding-top:.25rem; border-top:1px solid var(--rule)}
.sbx-dialog .field label{margin-top:.6rem}

/* ---------- sandbox feedback (admin) ---------- */
.fb-dist{width:94px; height:24px; vertical-align:middle}
.fb-comments{margin-bottom:.75rem}
.fb-comments summary{cursor:pointer; font-weight:600; min-height:44px; display:flex; align-items:center}
.fb-comments ul,.fb-quotes{list-style:none; margin:0; padding:0; display:grid; gap:.5rem}
.fb-comments li{border-left:2px solid var(--rule-strong); padding:.15rem 0 .15rem .75rem}
.fb-comments li p{margin:0 0 .15rem; line-height:1.5}
.fb-bars{list-style:none; margin:0; padding:0; display:grid; gap:.45rem}
.fb-bars li{display:grid; grid-template-columns:11rem 1fr 2rem; align-items:center; gap:.6rem; font-size:.8125rem}
.fb-bars i{display:block; height:.6rem; min-width:2px; background:var(--accent); border-radius:2px}
.fb-bars b{text-align:right; font-variant-numeric:tabular-nums}
.fb-sub{font-size:.875rem; font-weight:600; margin:1rem 0 .5rem}
.fb-quotes li{line-height:1.5}
@media (max-width:680px){ .fb-bars li{grid-template-columns:8rem 1fr 2rem} }