/* Ready — Talk About Therapy
   A pediatric therapy practice's own paperwork, redrawn 2026-09-21 on the owner's word: the
   checklist IS the form, nothing overexplains itself, and nothing is mis-aligned because nothing
   is positioned by hand. The voice is a children's-therapy front desk, not a hospital form:
   warm paper, a calm teal for the work, and ONE playful hue - apple green - used only for
   progress and for Finished. Rounding is on the things a person touches and nowhere else.

   Every text pair below meets WCAG AA on every ground it lands on, in light and in dark, and
   tests/test_look.py measures them. Status never arrives as colour alone: it carries its word.
   System fonts only. No frameworks, no external assets, no images, nothing fetched at runtime -
   the app's Content-Security-Policy allows no external stylesheet, so the stacks name the faces
   the design asks for (Public Sans, Nunito, IBM Plex Mono) and fall back to the system's own.
   The design of record is docs/design/ready-redesign-mockup-2026-09-21.html. */

/* ---------------------------------------------------------------- tokens */
/* Two names for one palette. The first block is the design's own vocabulary (paper, sheet, rule,
   ink, accent, done); the second maps the names the rest of this sheet and the older pages already
   use onto exactly the same values, so one palette moves everything. */
:root{
  color-scheme:light;

  /* the design's vocabulary */
  --paper:#fff8f0;          /* warm off-white page ground                          */
  --sheet:#fffdfb;          /* the form surface: typed values read as ink on paper  */
  --field:#fffdfb;          /* what you type into                                  */
  --inset:#fbf0e4;          /* wells, tracks, the number beside a section          */
  --rule:#e2d2bf;           /* hairline between sections                           */
  --rule-soft:#efe3d6;      /* hairline between rows                               */
  --ink:#23201c;
  --ink-soft:#5a5046;
  --accent:#0f5f6c;         /* calm teal: the open section, links, primary buttons  */
  --accent-ink:#0b454f;
  --accent-soft:#dcedef;
  --on-accent:#fffdfb;
  --done:#4c6b10;           /* apple green: finished, and nothing else             */
  --done-soft:#eef5d9;
  --done-fill:#659115;      /* the progress bar — 3.3:1 on its own track           */
  --attention:#8a5212;
  --attention-soft:#fbebd4;
  --blocked:#b03f2b;

  /* the same palette under the names the rest of this sheet uses */
  --paper-2:#fdf3ea;        /* rail and header                                     */
  --card:var(--sheet);
  --card-2:var(--inset);
  --line:var(--rule);
  --line-soft:var(--rule-soft);
  --field-line:#8a7358;     /* form control edge — 4.5:1 on --card, 4.0 on --card-2 */
  --edge:var(--accent);     /* dashed drop target                                  */
  --muted:#665c52;
  --placeholder:#6f6559;
  --accent-strong:var(--accent-ink);
  --accent-fill:#2f8b99;    /* illustration only                                   */
  --accent-tint:var(--accent-soft);
  --accent-tint-2:#b9d9de;
  --coral:var(--blocked);
  --coral-fill:#f2705a;     /* illustration only                                   */
  --coral-tint:#ffe9e3;
  --coral-line:#f6c3b5;
  --sun:var(--attention);
  --sun-fill:#f7b53c;       /* illustration only                                   */
  --sun-tint:var(--attention-soft);
  --sun-line:#f2d9a8;
  --sky:#17608e;
  --sky-fill:#63b3e4;       /* illustration only                                   */
  --sky-tint:#e3f0fa;
  --sky-line:#b9daf1;
  --ok:var(--done);   --ok-bg:var(--done-soft);   --ok-line:#cfe0a4;
  --warn:var(--attention); --warn-bg:var(--attention-soft); --warn-line:#f0d6a6;
  --chip:var(--accent-fill);

  /* Type. The faces the design asks for come first; ui-rounded is SF Pro Rounded on Apple
     devices, where most therapists open this, and the system sans everywhere else. */
  --sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;
  --display:Nunito,ui-rounded,"SF Pro Rounded","Hiragino Maru Gothic ProN","Varela Round",
            -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --step--2:.8125rem;   /* 13px — smallest print stays readable on a phone */
  --step--1:.8125rem;   /* 13px — small print                          */
  --step-0:1rem;        /* 16px — body; iOS never zooms on focus       */
  --step-1:1.0625rem;   /* 17px — lead-in rows                         */
  --step-2:1.375rem;    /* 22px — h2                                   */
  --step-3:clamp(1.75rem,1.3rem + 1.9vw,2.25rem); /* h1                */

  /* Space */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem;
  --s5:1.5rem; --s6:2rem; --s7:2.75rem; --s8:4rem;

  /* Shape — rounded where a finger lands, hairlines everywhere else */
  --r1:12px; --r2:18px; --r3:22px; --r-pill:999px;
  --lift:0 1px 0 rgba(90,64,32,.04),0 8px 18px -16px rgba(90,64,32,.40);
  --lift-2:0 1px 0 rgba(90,64,32,.06),0 16px 28px -18px rgba(90,64,32,.45);
  --rail:252px;
  --page:1180px;
  --ease:180ms cubic-bezier(.2,.6,.3,1);
}

/* Dark comes free: only the tokens move. Every pair re-measured. The media query is guarded so an
   explicit light choice wins, and [data-theme=dark] states it the other way round. */
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    color-scheme:dark;
    --paper:#191614; --sheet:#221e1b; --field:#2a2522; --inset:#2f2925;
    --rule:#463d35; --rule-soft:#372f29;
    --ink:#f6eee4; --ink-soft:#d2c6b9;
    --accent:#6fc2cf; --accent-ink:#a2dce5; --accent-soft:#17383d; --on-accent:#141110;
    --done:#b3d964; --done-soft:#25301a; --done-fill:#b3d964;
    --attention:#ebb35f; --attention-soft:#3a2c13; --blocked:#ff9b85;
    --paper-2:#221e1b; --field-line:#8d8071;
    --muted:#b5a99c; --placeholder:#a2968a;
    --accent-fill:#6fc2cf; --accent-tint-2:#2a5259;
    --coral-fill:#ff9b85; --coral-tint:#3a231d; --coral-line:#59352b;
    --sun-fill:#f3bd63; --sun-line:#54401f;
    --sky:#7cc0ef; --sky-fill:#7cc0ef; --sky-tint:#1b2f40; --sky-line:#2b4a63;
    --ok-line:#3c5227; --warn-line:#56401c;
    --lift:0 1px 0 rgba(0,0,0,.3),0 10px 22px -18px rgba(0,0,0,.8);
    --lift-2:0 1px 0 rgba(0,0,0,.4),0 18px 30px -20px rgba(0,0,0,.85);
  }
}
:root[data-theme=dark]{
  color-scheme:dark;
  --paper:#191614; --sheet:#221e1b; --field:#2a2522; --inset:#2f2925;
  --rule:#463d35; --rule-soft:#372f29;
  --ink:#f6eee4; --ink-soft:#d2c6b9;
  --accent:#6fc2cf; --accent-ink:#a2dce5; --accent-soft:#17383d; --on-accent:#141110;
  --done:#b3d964; --done-soft:#25301a; --done-fill:#b3d964;
  --attention:#ebb35f; --attention-soft:#3a2c13; --blocked:#ff9b85;
  --paper-2:#221e1b; --field-line:#8d8071;
  --muted:#b5a99c; --placeholder:#a2968a;
  --accent-fill:#6fc2cf; --accent-tint-2:#2a5259;
  --coral-fill:#ff9b85; --coral-tint:#3a231d; --coral-line:#59352b;
  --sun-fill:#f3bd63; --sun-line:#54401f;
  --sky:#7cc0ef; --sky-fill:#7cc0ef; --sky-tint:#1b2f40; --sky-line:#2b4a63;
  --ok-line:#3c5227; --warn-line:#56401c;
  --lift:0 1px 0 rgba(0,0,0,.3),0 10px 22px -18px rgba(0,0,0,.8);
  --lift-2:0 1px 0 rgba(0,0,0,.4),0 18px 30px -20px rgba(0,0,0,.85);
}

/* ----------------------------------------------------------------- base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:var(--step-0)/1.6 var(--sans);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none!important}
img{max-width:100%;height:auto}
svg{display:block}
hr{border:0;border-top:2px solid var(--line);border-radius:2px;margin:var(--s5) 0}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em;background:var(--card-2);border:1px solid var(--line);border-radius:8px;padding:1px 6px;overflow-wrap:anywhere}

a{color:var(--accent);text-decoration:none;text-underline-offset:3px}
a:hover{text-decoration:underline}

/* Focus: one visible ring everywhere, including keyboard-only summaries.
   No border-radius here — the ring follows the control's own shape. */
:is(a,button,.button,summary,[tabindex],input,select,textarea):focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--accent)}

.skip{position:absolute;left:-9999px}
.skip:focus{
  left:var(--s4);top:var(--s4);z-index:50;
  background:var(--card);color:var(--ink);
  padding:var(--s3) var(--s4);border-radius:var(--r1);
  border:2px solid var(--accent);box-shadow:var(--lift-2);
}

/* ------------------------------------------------------------- headings */
h1,h2,h3,h4{font-family:var(--display);color:var(--ink);font-weight:700}
h1{font-size:var(--step-3);line-height:1.1;letter-spacing:-.025em;margin:0;font-weight:800}
h2{font-size:var(--step-2);line-height:1.25;letter-spacing:-.015em;margin:0 0 var(--s4);font-weight:750}
h3{font-size:var(--step-1);font-weight:750;letter-spacing:-.01em;margin:var(--s5) 0 var(--s3)}
/* Every section heading carries a small rounded block — the same shape family as the
   motifs. Decorative only: it never says anything the words do not. */
h2::before{
  content:"";display:inline-block;flex:none;
  width:.7em;height:.7em;margin-right:.45em;border-radius:.22em;
  background:var(--chip);
}
h2:has(.section-mark)::before{display:none}
.section-mark{display:inline-block;width:1.35em;height:1.35em;margin-right:.4em;vertical-align:-.3em;flex:none}
p{margin:0 0 var(--s4)}
p:last-child{margin-bottom:0}
strong{font-weight:700}
small{display:block;color:var(--muted);font-size:var(--step--1);line-height:1.5}
.breakable{overflow-wrap:anywhere}
.date{white-space:nowrap;overflow-wrap:normal}
.subtle{color:var(--muted)}
.eyebrow{
  font-family:var(--sans);font-size:var(--step--2);font-weight:800;
  letter-spacing:.06em;color:var(--accent);margin:0 0 var(--s2);
}
.intro{color:var(--ink-soft);font-size:var(--step-1);line-height:1.6;max-width:62ch;margin:0 0 var(--s6)}
.narrow{max-width:44rem}
.preserve-lines{white-space:pre-wrap;overflow-wrap:anywhere}
.success{color:var(--ok);font-weight:700}
.blocked-label{color:var(--warn);font-weight:700}

/* --------------------------------------------------------------- layout */
.sidebar{
  position:fixed;inset:0 auto 0 0;width:var(--rail);
  display:flex;flex-direction:column;
  padding:var(--s6) var(--s4) var(--s5);
  background:var(--paper-2);
  border-right:1px solid var(--line);
  overflow-y:auto;
}
.brand{
  display:flex;align-items:center;gap:var(--s3);
  font-family:var(--display);font-size:1.5rem;font-weight:800;
  letter-spacing:-.03em;color:var(--ink);
}
.brand:hover{text-decoration:none;color:var(--accent-strong)}
.mark{
  display:grid;place-items:center;width:2.5rem;height:2.5rem;flex:none;
  background:var(--card);color:var(--accent);
  border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--lift);
  font:800 1.25rem/1 var(--display);
}
.mark svg{width:1.5rem;height:1.5rem}
.brand-sub{
  font-size:var(--step--2);letter-spacing:.06em;font-weight:700;
  color:var(--muted);margin:var(--s3) 0 var(--s5) calc(2.5rem + var(--s3));
}
.sidebar nav{display:flex;flex-direction:column;gap:var(--s1);flex-shrink:0}
nav a{
  display:flex;align-items:center;min-height:2.75rem;
  padding:var(--s2) var(--s4);border-radius:var(--r-pill);
  color:var(--ink-soft);font-size:.9375rem;font-weight:600;line-height:1.35;
  transition:background var(--ease),color var(--ease);
}
nav a:hover{background:var(--card);color:var(--accent-strong);text-decoration:none}
/* Current page: a filled pill, a heavier weight and aria-current — three signals, not one colour. */
nav a[aria-current=page]{background:var(--accent);color:var(--on-accent);font-weight:750}
nav a[aria-current=page]:hover{background:var(--accent-strong);color:var(--on-accent)}
.identity{margin-top:auto;padding-top:var(--s4);border-top:1px solid var(--line)}
.identity small{margin-top:var(--s2);overflow-wrap:anywhere}

.workspace{margin-left:var(--rail);min-height:100vh;display:flex;flex-direction:column}
header{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;
  gap:var(--s3);min-height:4rem;padding:var(--s3) var(--s7);
  background:var(--paper-2);border-bottom:1px solid var(--rule);
  font-size:var(--step--1);color:var(--ink-soft);font-weight:600;
}
header form{margin:0}
header .portal-session-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--s2)}
main{width:100%;max-width:var(--page);margin:0 auto;padding:var(--s7) var(--s7) var(--s8);flex:1}
footer{padding:0 var(--s7) var(--s6);color:var(--muted);font-size:var(--step--2);letter-spacing:.02em}
section[id],details[id]{scroll-margin-top:var(--s5)}

.page-heading{
  position:relative;
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  gap:var(--s4);padding-bottom:var(--s5);margin-bottom:var(--s5);
}
.page-heading > div{min-width:0}
.page-heading .button + .button{margin-left:var(--s2)}

/* ---------------------------------------------------------------- cards */
.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r3);
  box-shadow:var(--lift);
  padding:var(--s6);
  margin:0 0 var(--s5);
  min-width:0;
}
/* The heading block rotates through the four colours down a page. */
.panel:nth-of-type(4n+2){--chip:var(--sun-fill)}
.panel:nth-of-type(4n+3){--chip:var(--coral-fill)}
.panel:nth-of-type(4n+4){--chip:var(--sky-fill)}
.panel > h2:first-child,.panel > .section-heading:first-child{margin-top:0}
.panel h3{font-size:var(--step-1)}
.panel > form:last-child > button:last-child{margin-bottom:0}
.columns{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:var(--s5);align-items:start}
.columns > div{min-width:0}
.columns > div > .panel:last-child{margin-bottom:var(--s5)}
.section-heading{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:var(--s3);margin-bottom:var(--s4)}
.section-heading h2{margin:0}
.section-heading a{font-size:var(--step--1);font-weight:700}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:var(--s4)}
.cards > div,.cards > a,.cards > section{min-width:0}
.cards > .panel{margin:0}
.cards > div > h3:first-child{margin-top:0}
.cards a{overflow-wrap:anywhere}
.setting-card{display:block;color:var(--ink);margin:0;transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease)}
.setting-card h2{font-size:var(--step-1);font-weight:750;margin-bottom:var(--s2)}
.setting-card h2::before{display:none}
.setting-card span{display:block;font-size:var(--step--1);color:var(--muted);line-height:1.5}
.setting-card:hover{text-decoration:none;border-color:var(--accent);box-shadow:var(--lift-2);transform:translateY(-2px)}
.settings-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s4);margin-bottom:var(--s6)}
.settings-grid .setting-card{grid-column:span 2;padding:var(--s5)}
.setting-art{width:5.5rem;height:auto;margin:0 0 var(--s4);color:var(--ink)}
.setting-permissions{background:var(--sun-tint);border-color:var(--sun-line)}
.setting-payers{background:var(--sky-tint);border-color:var(--sky-line)}
.setting-training{background:var(--accent-tint);border-color:var(--accent-tint-2)}
.setting-practice{background:var(--coral-tint);border-color:var(--coral-line)}
.setting-operations{background:var(--accent-tint);border-color:var(--accent-tint-2)}
.setting-connections{background:var(--card-2)}
.settings-tabs{margin-top:var(--s6)}
.permission-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin-bottom:var(--s5)}
.permission-card{margin:0;padding:var(--s5)}
.permission-card label{margin-bottom:0}
.permission-card textarea{min-height:9rem}
.permission-owners{background:var(--sun-tint);border-color:var(--sun-line)}
.permission-pd{background:var(--sky-tint);border-color:var(--sky-line)}
.permission-admin_staff{background:var(--accent-tint);border-color:var(--accent-tint-2)}
.role-art{width:8rem;max-width:75%;height:auto;margin:0 auto var(--s4);color:var(--ink)}
.permission-save{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);max-width:none}
.permission-save p{flex:1 1 32rem}
.source-card{
  border:1px solid var(--line);background:var(--card-2);
  border-radius:var(--r2);padding:var(--s4);
  display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center;margin-bottom:var(--s4);
}
.source-card small{width:100%;margin:0}

/* ---------------------------------------------------------------- rows */
.items{display:block}
.item{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;
  gap:var(--s2) var(--s5);
  padding:var(--s4) var(--s3);
  margin:0 calc(var(--s3) * -1);
  border-top:1px solid var(--line-soft);
  color:var(--ink);overflow-wrap:anywhere;border-radius:var(--r2);
  transition:background var(--ease);
}
.item:first-of-type,.items .item:first-child{border-top:0}
a.item:hover{background:var(--accent-tint);text-decoration:none}
.item strong{font-size:.9375rem;font-weight:700}
.item small{margin-top:2px}
.item > div{min-width:0}
.item > div:last-child{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);justify-content:flex-end}
.item > div:last-child > small{white-space:nowrap}
.item form{margin:0}
.text-link{display:inline-block;margin-top:var(--s4);font-size:var(--step--1);font-weight:700}

/* An empty list is a drawing, not an apology. */
.empty{text-align:center;padding:var(--s7) var(--s5);color:var(--muted);font-size:var(--step--1)}
.empty p{margin:var(--s4) 0 0;font-size:var(--step-0);color:var(--ink-soft);max-width:36ch;margin-inline:auto}
.empty-icon{display:block;margin:0 auto;width:7.5rem;max-width:60%;font-size:2rem;line-height:1;color:var(--accent-tint-2)}
.empty-icon svg{width:100%;height:auto}

.timeline{margin-top:var(--s6)}
.timeline-entry{border-left:3px solid var(--accent-tint-2);padding:0 0 var(--s5) var(--s4);margin-left:var(--s1);position:relative}
.timeline-entry::before{content:"";position:absolute;left:-7px;top:.5rem;width:11px;height:11px;border-radius:50%;background:var(--accent-fill);border:2px solid var(--card)}
.timeline-entry p{font-size:.9375rem;margin:var(--s2) 0}
.process-list,.requirements{padding-left:1.35rem;margin:0 0 var(--s4)}
.process-list{color:var(--muted);font-size:.9375rem}
.process-list li,.requirements li{margin:var(--s2) 0}
/* A requirement is a fact, not a link: colour here read as something to click. */
.requirements li{color:var(--ink)}
.requirements li::marker{color:var(--muted)}

dl{margin:0}
dt{font-size:var(--step--1);color:var(--muted);margin-top:var(--s4);font-weight:700}
dd{font-family:var(--display);font-size:var(--step-1);font-weight:600;margin:var(--s1) 0 var(--s3);overflow-wrap:anywhere}

/* --------------------------------------------------------------- stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:var(--s4);margin:var(--s5) 0 var(--s6)}
.stat{
  display:block;background:var(--accent-tint);border:1px solid var(--accent-tint-2);
  border-radius:var(--r3);box-shadow:var(--lift);padding:var(--s5);color:var(--ink);
  transition:transform var(--ease),box-shadow var(--ease),border-color var(--ease);
}
.stats > .stat:nth-child(4n+2){background:var(--sun-tint);border-color:var(--sun-line)}
.stats > .stat:nth-child(4n+3){background:var(--coral-tint);border-color:var(--coral-line)}
.stats > .stat:nth-child(4n+4){background:var(--sky-tint);border-color:var(--sky-line)}
a.stat:hover{text-decoration:none;border-color:var(--accent);box-shadow:var(--lift-2);transform:translateY(-2px)}
.stat span{display:block;font-size:var(--step--1);color:var(--ink-soft);font-weight:650}
.stat strong{display:block;font-family:var(--display);font-weight:800;font-size:2.75rem;line-height:1.15;letter-spacing:-.03em}
.stat small{font-size:var(--step--2)}
.stat a{display:inline-block;margin-top:var(--s2);font-size:var(--step--1);font-weight:700}
.word-stat{font-size:1.5rem;line-height:1.4}

/* --------------------------------------------------------------- forms */
button,input,select,textarea{font:inherit;color:inherit}
label{display:block;font-size:var(--step--1);font-weight:700;margin:0 0 var(--s5);min-width:0}
label small{font-weight:400;margin-top:var(--s2)}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(16rem,1fr));gap:0 var(--s5)}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select,textarea{
  display:block;width:100%;margin-top:var(--s2);
  padding:.7rem .85rem;min-height:2.875rem;
  font-weight:400;font-size:var(--step-0);
  color:var(--ink);background:var(--card);
  /* the only thing that says "this is a box you type in": 4.07:1 against the card behind it */
  border:1px solid var(--field-line);border-radius:var(--r1);
  transition:border-color var(--ease),box-shadow var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--placeholder)}
input:hover,select:hover,textarea:hover{border-color:var(--accent)}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-tint)}
textarea{min-height:7rem;line-height:1.6;resize:vertical}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-soft) 50%),linear-gradient(135deg,var(--ink-soft) 50%,transparent 50%);background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;background-size:7px 7px,7px 7px;background-repeat:no-repeat;padding-right:2.25rem}
select[multiple]{background-image:none;padding-right:.85rem;min-height:9rem}
input[type=checkbox],input[type=radio]{width:1.15rem;height:1.15rem;margin:0 var(--s2) 0 0;accent-color:var(--accent);vertical-align:-3px}
input[type=checkbox]{box-shadow:0 0 0 1px var(--field-line);border-radius:3px}
input[type=file]{padding:.5rem;background:var(--card-2)}
input[type=file]::file-selector-button{
  font:inherit;font-size:var(--step--1);font-weight:700;margin-right:var(--s3);
  padding:.45rem .85rem;border-radius:var(--r-pill);cursor:pointer;
  color:var(--accent);background:var(--card);border:1px solid var(--field-line);
}
input[type=date]{min-width:0}
fieldset{border:1px solid var(--line);border-radius:var(--r2);padding:var(--s5);margin:0 0 var(--s5);min-width:0;background:var(--card-2)}
legend{font-family:var(--display);font-size:var(--step-0);font-weight:750;letter-spacing:-.01em;padding:0 var(--s2);color:var(--ink)}
fieldset label{font-weight:400;margin-bottom:var(--s4)}
fieldset p:last-child,fieldset small:last-child{margin-bottom:0}
.checks{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s5)}
.checks label{display:flex;align-items:center;font-weight:400;margin:0;min-height:2.25rem}
.inline-form{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s3);margin-top:var(--s4)}
.inline-form label{flex:1 1 13rem;margin:0}
.inline-form button,.inline-form small,.inline-form span{margin:0}
.compact{margin:0;gap:var(--s2)}
.compact select,.compact input{min-width:7.5rem;max-width:11rem;margin:0}
.compact button{padding:.45rem .85rem;min-height:2.5rem;font-size:var(--step--1)}
.search{max-width:24rem;margin-bottom:var(--s5)}
.filters{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s5)}
.button-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);margin:var(--s4) 0 0}
.dropzone{
  border:3px dashed var(--edge);background:var(--accent-tint);
  border-radius:var(--r3);padding:var(--s6) var(--s4);text-align:center;
}
.dropzone input{margin:var(--s4) auto!important;max-width:26rem}
progress{display:block;width:100%;height:1rem;margin-top:var(--s3);border:0;border-radius:var(--r-pill);background:var(--card-2);accent-color:var(--accent);appearance:none;overflow:hidden}
progress::-webkit-progress-bar{background:var(--card-2);border-radius:var(--r-pill)}
progress::-webkit-progress-value{background:var(--accent-fill);border-radius:var(--r-pill)}
progress::-moz-progress-bar{background:var(--accent-fill);border-radius:var(--r-pill)}
.setup-progress{margin:0 0 var(--s5);font-size:.9375rem}
.setup-progress strong{font-family:var(--display);font-size:var(--step-1)}
#welcome-message{min-height:26rem}
#copy-status{color:var(--muted);font-size:var(--step--1);margin-top:var(--s2)}

/* ------------------------------------------------------------- buttons */
/* Chunky: a pill with a solid bottom edge that presses down when you push it. */
button,.button{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:2.875rem;padding:.65rem 1.35rem;
  font-size:.9375rem;font-weight:750;line-height:1.2;white-space:nowrap;text-decoration:none;
  color:var(--on-accent);background:var(--accent);border:1px solid var(--accent);
  border-radius:var(--r-pill);cursor:pointer;
  box-shadow:0 3px 0 var(--accent-strong);
  transition:background var(--ease),border-color var(--ease),transform var(--ease),box-shadow var(--ease);
}
button:hover,.button:hover{background:var(--accent-strong);border-color:var(--accent-strong);color:var(--on-accent);text-decoration:none}
button:active,.button:active{transform:translateY(2px);box-shadow:0 1px 0 var(--accent-strong)}
button.secondary,.button.secondary{background:var(--card);color:var(--accent);border-color:var(--accent-tint-2);box-shadow:0 3px 0 var(--accent-tint-2)}
button.secondary:hover,.button.secondary:hover{background:var(--accent-tint);border-color:var(--accent);color:var(--accent-strong)}
button.secondary:active,.button.secondary:active{box-shadow:0 1px 0 var(--accent-tint-2)}
button:disabled,.button[aria-disabled=true]{background:var(--line);border-color:var(--line);color:var(--ink-soft);cursor:not-allowed;transform:none;box-shadow:none}
button.secondary:disabled{background:var(--card-2);color:var(--ink-soft);box-shadow:none}
.filters button{min-height:2.5rem;padding:.4rem 1rem;font-size:var(--step--1)}

/* ---------------------------------------------------------------- tabs */
.tabs{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s5);padding:0}
.tabs a{
  display:inline-flex;align-items:center;min-height:2.375rem;
  padding:var(--s2) var(--s4);border-radius:var(--r-pill);
  background:var(--card);border:1px solid var(--accent-tint-2);
  color:var(--ink-soft);font-size:var(--step--1);font-weight:700;
}
.tabs a:hover{background:var(--accent-tint);border-color:var(--accent);color:var(--accent-strong);text-decoration:none}

/* -------------------------------------------------------------- tables */
.table-scroll{overflow-x:auto;max-width:100%;border:1px solid var(--line);border-radius:var(--r2);background:var(--card);-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:.9375rem}
th{
  text-align:left;white-space:nowrap;
  padding:var(--s3) var(--s4);
  background:var(--accent-tint);color:var(--accent-strong);
  font-size:var(--step--2);font-weight:800;letter-spacing:.03em;
  border-bottom:1px solid var(--accent-tint-2);
}
td{padding:var(--s4);border-bottom:1px solid var(--line-soft);vertical-align:middle}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--card-2)}
td small{margin-top:2px}
td .inline-form{margin-top:0}

/* -------------------------------------------------------------- badges */
/* Status reads as a word first. The dot repeats it in colour AND in shape, so the
   meaning survives a monochrome screen and colour-blind sight. */
.badge{
  display:inline-flex;align-items:center;gap:var(--s2);
  padding:.25rem .7rem;border-radius:var(--r-pill);
  background:var(--card-2);border:1px solid var(--line);color:var(--ink-soft);
  font-size:var(--step--2);font-weight:750;letter-spacing:.02em;white-space:nowrap;
}
.dot{width:.5rem;height:.5rem;border-radius:50%;flex:none;background:var(--muted)}
.badge.good{background:var(--ok-bg);border-color:var(--ok-line);color:var(--ok)}
.badge.good .dot{background:var(--ok);border-radius:50%}
.badge.attention{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
/* a diamond, not a circle: shape carries the difference as well as colour */
.badge.attention .dot{background:var(--warn);border-radius:1px;transform:rotate(45deg)}

/* ------------------------------------------------------------ feedback */
.notice{
  padding:var(--s5);margin:0 0 var(--s5);
  background:var(--warn-bg);border:1px solid var(--warn-line);border-left:8px solid var(--sun-fill);
  border-radius:var(--r2);color:var(--ink);font-size:.9375rem;
}
.notice h3{margin:0 0 var(--s2)}
.notice :last-child{margin-bottom:0}
.save-notice{
  padding:var(--s5);margin:0 0 var(--s5);
  background:var(--ok-bg);border:1px solid var(--ok-line);border-left:8px solid var(--accent-fill);
  border-radius:var(--r2);color:var(--ink);font-size:.9375rem;font-weight:650;
}
.setup-banner{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s4);
  padding:var(--s5);margin:0 0 var(--s5);
  background:var(--sky-tint);border:1px solid var(--sky-line);
  border-radius:var(--r3);color:var(--ink);
}
.setup-banner:hover{text-decoration:none;border-color:var(--sky);box-shadow:var(--lift)}
.setup-banner strong{display:block;font-family:var(--display);font-size:var(--step-1)}
.setup-banner small{margin-top:var(--s1)}
.setup-banner span{color:var(--sky);font-size:var(--step--1);font-weight:750}
.profile-strip{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s3);
  padding:var(--s5);margin:0 0 var(--s5);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r3);box-shadow:var(--lift);
}
.profile-strip > div{min-width:0}
.profile-strip strong{font-family:var(--display);font-size:var(--step-2);font-weight:800;letter-spacing:-.02em}

/* ------------------------------------------- previewing a therapist's view */
/* A standing strip, not a tint: it says in words whose view this is and how to leave. */
.preview-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:var(--s2) var(--s4);
  padding:var(--s3) var(--s4);
  padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom,0px));
  background:var(--coral-tint);color:var(--ink);
  border-top:4px solid var(--coral-fill);
  font-size:var(--step--1);text-align:center;
}
.preview-bar svg{width:1.5rem;height:1.5rem;flex:none;color:var(--coral)}
.preview-bar strong{font-weight:750}
.preview-name{font-weight:750;color:var(--coral)}
.preview-bar .button,.preview-exit{flex:none}
body:has(.preview-bar) .workspace{padding-bottom:5.5rem}

/* ------------------------------------------------------------- details */
details{border-top:1px solid var(--line-soft);padding:var(--s4) 0}
details:last-child{padding-bottom:0}
summary{cursor:pointer;font-size:.9375rem;font-weight:750;padding:var(--s1) 0;border-radius:var(--r1)}
summary::marker{color:var(--accent)}
summary:hover{color:var(--accent-strong)}
summary h2{display:inline;font-size:var(--step-2);margin:0}
.disclosure{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s3);
  list-style:none;
}
.disclosure::-webkit-details-marker{display:none}
.disclosure h2{display:block}
details[open] > .disclosure > .caret svg{transform:rotate(180deg)}
.person-panel h2::before{display:none}
details form{margin-top:var(--s4)}
details[open] > summary{margin-bottom:var(--s2)}
details.panel{border:1px solid var(--line);padding:var(--s6)}
.setting-value{float:right;max-width:50%;color:var(--muted);font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --------------------------------------------- the quiet pages ----------
   A social security number, a tax ID and a payer submission are not the place for
   party colours. These sections keep the shapes and lose the brightness: a plain
   card, a sky-blue block instead of a rotating one, and no tinted ground. */
#sensitive,#tax-id,#payer-file,#roster,#status-check,#submission,#account{
  --chip:var(--sky-fill);
  background:var(--card);border-color:var(--sky-line);
}
#sensitive > summary,#tax-id h2,#payer-file h2,#roster h2{color:var(--ink)}
[data-sensitive]{
  background:var(--card-2);border:1px solid var(--line);
  border-radius:var(--r2);padding:var(--s5);margin:0 0 var(--s5);
}
[data-sensitive] dd{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--step-0)}

/* ---------------------------------------------------- illustration ------
   Flat shapes with a dark outline, like a good picture book. The outline is
   currentColor at --ink, so every motif still reads on a dim screen, in greyscale
   or against any of the four fills. Motif fills are set here, never in the markup:
   the templates carry no style attribute and no colour value. */
.empty-icon,.section-mark,.mark svg,.preview-bar svg{color:var(--ink)}
.m-green{fill:var(--accent-fill)}
.m-sun{fill:var(--sun-fill)}
.m-coral{fill:var(--coral-fill)}
.m-sky{fill:var(--sky-fill)}
.m-line{fill:none;stroke:currentColor}

/* ------------------------------------------------------------ training --
   The course itself is somebody else's HTML in a frame, so this file styles
   only what sits around it: the standing line above, the frame's own box, and
   the certificate, which is written to be printed. */
.course-line{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin:0 0 var(--s4)}
.player{
  border:1px solid var(--line);border-radius:var(--r2);background:var(--card);
  overflow:hidden;box-shadow:var(--lift);margin:0 0 var(--s5);
}
.player iframe{display:block;width:100%;height:min(80vh,44rem);border:0;background:var(--card)}
/* What the app answered the last time the course saved. The course is told "true" by a
   runtime that has already posted, so this line is the only honest word about it. */
.save-line{
  padding:var(--s3) var(--s5);margin:0 0 var(--s5);
  background:var(--ok-bg);border:1px solid var(--ok-line);border-left:8px solid var(--accent-fill);
  border-radius:var(--r2);color:var(--ink);font-size:.9375rem;font-weight:650;
}
.save-line.bad{background:var(--warn-bg);border-color:var(--warn-line);border-left-color:var(--sun-fill)}
.remote-hosts{color:var(--ink);overflow-wrap:anywhere}
.certificate{text-align:center;max-width:44rem;margin-inline:auto}
.certificate h2{justify-content:center}
.certificate h2::before{display:none}
.certificate-name{font-size:var(--step-2);font-weight:750;margin:var(--s2) 0 var(--s4)}
.certificate-detail{
  display:grid;grid-template-columns:auto auto;justify-content:center;gap:var(--s2) var(--s5);
  text-align:left;margin:var(--s5) 0;
}
.certificate-detail dt{color:var(--muted);font-size:var(--step--1)}
.certificate-detail dd{margin:0;font-weight:650}

/* ------------------------------------------------ the sheet: one ruled form column
   The redesign of 2026-09-21. A person's page is one sheet of hairline-separated bands, so the
   checklist and the form are the same object: no card floats, nothing is absolutely positioned
   and nothing overlaps, because every band is a grid row and every row wraps. */
.sheet{
  background:var(--sheet);border:1px solid var(--rule);border-radius:var(--r2);
  box-shadow:var(--lift);display:grid;margin:0 0 var(--s5);overflow:hidden;min-width:0;
}
.sheet-head{display:grid;gap:var(--s3);padding:var(--s5) var(--s6);border-bottom:1px solid var(--rule)}
.head-row{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);align-items:baseline;justify-content:space-between}
.head-row > div{min-width:0}
.sheet-head h2{margin:0}
.sheet-head h2::before{display:none}
.person-role{font-family:var(--display);font-size:var(--step-1);font-weight:700;color:var(--ink-soft);margin:0}
.facts{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s5);font-size:var(--step--1);color:var(--muted);margin:0}
.progress-line{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;font-size:var(--step--1);margin:0}
.progress-line strong{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}
/* The progress bar is a real <progress>, so it needs no inline width and says its own value to a
   screen reader. The element's own margin and full width are undone here: it is a flex item in a
   line of text, and a margin-top would sit it below the words it belongs to. */
progress.bar{
  flex:1 1 11rem;width:auto;height:8px;margin:0;
  border-radius:var(--r-pill);overflow:hidden;
  background:var(--inset);border:1px solid var(--rule);appearance:none;
}
progress.bar::-webkit-progress-bar{background:var(--inset)}
progress.bar::-webkit-progress-value{background:var(--done-fill);border-radius:0}
progress.bar::-moz-progress-bar{background:var(--done-fill)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.meta{font-size:var(--step--1);color:var(--muted);margin:0}

/* chips — a word, and a shape that survives greyscale */
.chip{
  display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap;
  font-size:var(--step--2);font-weight:700;letter-spacing:.02em;
  padding:.16rem .55rem;border-radius:var(--r-pill);
  border:1px solid var(--rule);color:var(--ink-soft);background:var(--inset);
}
.chip-done{color:var(--done);border-color:var(--done);background:var(--done-soft)}
.chip-open{color:var(--accent);border-color:var(--accent);background:var(--sheet)}
.chip-attention{color:var(--sheet);border-color:var(--attention);background:var(--attention)}
.tick{
  display:inline-grid;place-items:center;width:1.05rem;height:1.05rem;flex:none;
  border-radius:50%;background:var(--done);color:var(--sheet);
}
.tick svg{width:.7rem;height:.7rem}

/* sections: the checklist IS the form */
.sections{display:grid}
.sec{border-bottom:1px solid var(--rule-soft);min-width:0}
.sec:last-child{border-bottom:0}
.sec-head{font:inherit;margin:0}
.sec-toggle{
  display:grid;grid-template-columns:2.1rem minmax(0,1fr) auto auto;
  gap:var(--s2) var(--s3);align-items:center;width:100%;text-align:start;
  background:none;border:0;border-radius:0;box-shadow:none;cursor:pointer;
  padding:var(--s3) var(--s6);color:inherit;min-height:0;white-space:normal;
}
.sec-toggle:hover,.sec-toggle:active{background:none;color:inherit;box-shadow:none;transform:none}
.sec-toggle:hover .sec-title{color:var(--accent-ink)}
.sec-num{
  font-family:var(--mono);font-size:var(--step--1);width:2.1rem;height:2.1rem;
  display:grid;place-items:center;border:1px solid var(--rule);border-radius:var(--r-pill);
  color:var(--ink-soft);background:var(--inset);
}
.sec-title{font-family:var(--display);font-weight:700;font-size:var(--step-1);min-width:0}
.sec-state{display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:flex-end}
.caret{display:grid;place-items:center;color:var(--muted)}
.caret svg{width:.9rem;height:.9rem;transition:transform 140ms ease}
.sec-toggle[aria-expanded=true] .caret svg{transform:rotate(180deg)}
.sec[data-state=finished] .sec-num{color:var(--done);border-color:var(--done);background:var(--done-soft)}
.sec[data-state=open] .sec-num{color:var(--on-accent);border-color:var(--accent);background:var(--accent)}
.sec[data-state=open]{background:var(--accent-soft)}
.sec[data-state=todo] .sec-title{color:var(--ink-soft)}
.sec-body{
  display:grid;gap:var(--s4);padding:var(--s1) var(--s6) var(--s5);
  padding-inline-start:calc(var(--s6) + 2.1rem + var(--s3));min-width:0;
}
.sec-body > form{display:grid;gap:var(--s4);margin:0;min-width:0}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:var(--s3) var(--s4)}
.fields.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.sec-body label:not(.checkline),.person-body label:not(.checkline),.add-panel label{display:grid;gap:var(--s1);margin:0;min-width:0}
/* The label owns the gap above its control, so nothing in a section carries a margin of its own:
   one rhythm, and no row that lands half a line lower than the row beside it. */
.sec-body :is(input,select,textarea),.person-body :is(input,select,textarea),
.add-panel :is(input,select,textarea),.strip :is(input,select,textarea){margin-top:0}
.lbl{
  font-size:var(--step--2);letter-spacing:.02em;font-weight:700;
  color:var(--muted);display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;
}
.lbl .opt{text-transform:none;letter-spacing:0;font-weight:400}
.mono-input{font-family:var(--mono);font-variant-numeric:tabular-nums}
.upload{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s3) var(--s4);border:1px dashed var(--field-line);background:var(--inset);
  border-radius:var(--r1);padding:var(--s3);min-width:0;
}
.upload-note{grid-column:1/-1;font-size:var(--step--1);color:var(--muted);margin:0}
.filed{display:grid;gap:var(--s1);align-items:start;font-size:var(--step--1);margin:0}
.filed > a{justify-self:start}
.sec-actions{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}
.upload-actions{justify-content:flex-end}
.sec-body .checks{display:grid;gap:var(--s2)}
.sec-body .checks label{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--s2);
  font-size:var(--step--1);font-weight:400;margin:0;min-height:0}
.status{font-size:var(--step--1);color:var(--done);font-weight:600;margin:0}
.status.warn{color:var(--attention)}
.linkish{
  font:inherit;background:none;border:0;padding:0;min-height:0;box-shadow:none;cursor:pointer;
  color:var(--accent);text-decoration:underline;text-underline-offset:2px;white-space:normal;
}
.linkish:hover{background:none;color:var(--accent-ink);box-shadow:none}
button.small,.button.small{min-height:2.25rem;padding:.35rem .8rem;font-size:var(--step--2);letter-spacing:.03em}

/* staff: the roster, and one opened row */
.table-head{
  display:grid;grid-template-columns:minmax(0,2.1fr) 5rem minmax(0,1fr) minmax(0,7rem) 1rem;
  gap:var(--s4);padding:var(--s2) var(--s6);border-bottom:1px solid var(--rule);
  font-size:var(--step--2);letter-spacing:.03em;color:var(--muted);font-weight:700;
}
.roster{display:grid}
.person{border-bottom:1px solid var(--rule-soft);min-width:0}
.person:last-child{border-bottom:0}
.row-toggle{
  display:grid;grid-template-columns:minmax(0,2.1fr) 5rem minmax(0,1fr) minmax(0,7rem) 1rem;
  gap:var(--s1) var(--s4);align-items:center;width:100%;text-align:start;cursor:pointer;
  background:none;border:0;border-radius:0;box-shadow:none;padding:var(--s3) var(--s6);
  color:inherit;min-height:4.125rem;white-space:normal;
}
.row-toggle:hover,.row-toggle:active{background:none;color:inherit;box-shadow:none;transform:none}
.row-toggle:hover .pname{color:var(--accent-ink)}
.row-toggle > span{min-width:0}
.pname{font-weight:700}
.pmail{display:block;font-size:var(--step--1);color:var(--muted);overflow-wrap:anywhere}
.pdisc{font-family:var(--mono);font-size:var(--step--1);color:var(--ink-soft)}
.plink{font-size:var(--step--1);color:var(--muted)}
.pstatus{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;font-size:var(--step--1)}
.ticks{display:flex;gap:2px}
.ticks i{box-sizing:border-box;width:9px;height:9px;border:2px solid var(--field-line);background:var(--sheet);display:block;border-radius:2px}
.ticks i.on{background:var(--done-fill);border-color:var(--done)}
.person[data-open=true]{background:var(--accent-soft)}
.person-body{display:grid;gap:var(--s4);padding:var(--s1) var(--s6) var(--s5);min-width:0}
.person-preview{justify-self:start}
.strip{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s4);align-items:center;justify-content:space-between;
  border:1px solid var(--rule);border-radius:var(--r1);background:var(--sheet);padding:var(--s3);min-width:0;
}
.strip-text{display:grid;gap:2px;min-width:0}
.strip form{margin:0}
.workspace-confirm{align-items:end}
.workspace-confirm .strip-text{flex:1 1 18rem}
.workspace-controls{display:grid;grid-template-columns:minmax(14rem,1fr) auto;align-items:end;gap:var(--s3);flex:1 1 30rem}
.workspace-controls label{min-width:0}
.file-review{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch}
.file-review .strip-text{gap:var(--s3)}
.checkline{display:flex;align-items:flex-start;gap:var(--s2);font-weight:400;margin:0;min-width:0}
.checkline input{flex:none;margin-top:.2rem}
.review-actions{align-self:end}
.task{border-inline-start:3px solid var(--attention);background:var(--attention-soft)}
.task.resolved{border-inline-start-color:var(--done);background:var(--done-soft)}
.prog-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));gap:0 var(--s5)}
.prog-list div{
  display:flex;gap:var(--s3);align-items:baseline;justify-content:space-between;
  font-size:var(--step--1);border-bottom:1px dotted var(--rule-soft);padding-block:var(--s1);
}
.prog-list span:last-child{color:var(--muted);font-size:var(--step--2);letter-spacing:.02em}
.prog-list .is-done span:last-child{color:var(--done);font-weight:700}
.add-panel,.sheet-foot{display:grid;gap:var(--s3);padding:var(--s5) var(--s6);border-top:1px solid var(--rule)}
.add-panel h2,.add-panel h3{margin:0}
.add-panel h2::before{display:none}
.sheet-foot p{margin:0}
.training-only-sheet{max-width:42rem}
.training-only .training-card{display:grid;gap:var(--s3);padding:var(--s5) var(--s6)}
.training-only .training-card h3,.training-only .training-card p{margin:0}
.roster-tools{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--s3) var(--s5)}
.roster-tools .search{flex:1 1 24rem;max-width:35rem;margin:0}

/* the header switch: two views of the same app, for whoever has both */
.switch{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--rule);border-radius:var(--r-pill);overflow:hidden;background:var(--sheet)}
.switch a{
  display:flex;align-items:center;min-height:2.25rem;padding:.35rem .9rem;border-radius:0;
  font-size:var(--step--1);font-weight:600;color:var(--ink-soft);border-inline-end:1px solid var(--rule);
}
.switch a:last-child{border-inline-end:0}
.switch a:hover{background:var(--accent-soft);color:var(--accent-ink);text-decoration:none}
.switch a[aria-current=page]{background:var(--accent);color:var(--on-accent);font-weight:700}

@media (max-width:680px){
  .sheet-head,.sec-toggle,.row-toggle,.table-head,.person-body,.add-panel,.sheet-foot{padding-inline:var(--s4)}
  .sec-body{padding-inline:var(--s4);padding-inline-start:calc(var(--s4) + 2.1rem + var(--s3))}
  .table-head{display:none}
  .row-toggle{grid-template-columns:minmax(0,1fr) auto}
  .row-toggle .pdisc{grid-column:1;grid-row:2}
  .row-toggle .pstatus{grid-column:1;grid-row:3}
  .row-toggle .plink{grid-column:1/-1;grid-row:4}
  .row-toggle .caret{grid-column:2;grid-row:3;align-self:center}
}
@media (max-width:440px){
  .sec-body{padding-inline-start:var(--s4)}
  .sec-toggle{grid-template-columns:2.1rem minmax(0,1fr) auto auto;column-gap:var(--s2)}
  .strip{flex-direction:column;align-items:stretch}
  /* In a column a flex-basis is a height: 18rem and 30rem left the email strip 800px tall. */
  .workspace-confirm .strip-text,.workspace-controls{flex:0 0 auto}
  .upload{grid-template-columns:1fr}
  .workspace-controls{grid-template-columns:minmax(0,1fr) auto}
  .file-review{grid-template-columns:1fr}
  .review-actions{justify-self:start}
}

/* ---------------------------------------------------- phone and tablet */
@media (max-width:1100px){
  :root{--rail:220px;--s7:1.75rem}
  main{padding:var(--s6) var(--s5) var(--s8)}
  header,footer{padding-left:var(--s5);padding-right:var(--s5)}
  .columns{grid-template-columns:1fr}
  .permission-cards{grid-template-columns:1fr}
  .permission-card{display:grid;grid-template-columns:8rem 1fr;align-items:center;gap:var(--s4)}
  .permission-card > small{grid-column:2}
}

@media (max-width:840px){
  .sidebar{
    position:sticky;inset:auto;top:0;width:auto;
    padding:var(--s3) var(--s4) var(--s2);
    border-right:0;border-bottom:1px solid var(--line);
    z-index:20;
  }
  .brand{font-size:1.25rem;gap:var(--s2)}
  .mark{width:2.25rem;height:2.25rem;font-size:1.125rem;border-radius:12px}
  .mark svg{width:1.35rem;height:1.35rem}
  .brand-sub,.identity{display:none}
  /* Every destination is on screen: the pills wrap onto a second row rather than
     running off the edge behind a sideways swipe nobody sees. */
  .sidebar nav{
    flex-direction:row;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s3);
    padding-bottom:var(--s2);
  }
  .sidebar nav a{
    white-space:nowrap;flex:none;
    background:var(--card);border:1px solid var(--accent-tint-2);border-radius:var(--r-pill);
    padding:var(--s2) var(--s4);font-size:var(--step--1);box-shadow:none;
  }
  .sidebar nav a[aria-current=page]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);box-shadow:none}
  .workspace{margin-left:0}
  header{min-height:auto;padding:var(--s3) var(--s4);font-size:var(--step--2)}
  header .subtle{display:none}
  header .badge{white-space:normal}
  main{padding:var(--s5) var(--s4) var(--s7)}
  footer{padding:0 var(--s4) var(--s5)}
  section[id],details[id]{scroll-margin-top:5.5rem}
  .settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .settings-grid .setting-card{grid-column:span 1}
  .settings-grid .setting-card:nth-child(odd):last-child{grid-column:1/-1}
}

@media (max-width:560px){
  :root{--s6:1.25rem;--s7:1.5rem}
  h2{font-size:1.3125rem}
  /* Two rows of pills belong at the top of the page, not pinned over a fifth of the screen. */
  .sidebar{position:static}
  .sidebar nav{
    flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;
    margin-top:var(--s2);padding-bottom:var(--s1);scrollbar-width:thin;
  }
  .sidebar nav a{padding:var(--s1) var(--s3);min-height:2.25rem}
  .workspace > header > span:first-child{display:none}
  section[id],details[id]{scroll-margin-top:var(--s3)}
  .panel{padding:var(--s5) var(--s4);border-radius:var(--r2)}
  details.panel{padding:var(--s5) var(--s4)}
  .page-heading{align-items:flex-start;gap:var(--s3);margin-bottom:var(--s4)}
  .page-heading .button{width:100%;margin:0}
  .intro{font-size:var(--step-0);margin-bottom:var(--s5)}
  .stats{grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr));gap:var(--s3)}
  .stat{padding:var(--s4);border-radius:var(--r2)}
  .stat strong{font-size:2.125rem}
  .word-stat{font-size:1.1875rem}
  .form-grid{grid-template-columns:1fr}
  .item{padding:var(--s4) var(--s2);margin:0 calc(var(--s2) * -1);gap:var(--s2)}
  .item > div:last-child{justify-content:flex-start}
  .item > div:last-child > small{white-space:normal}
  .inline-form{align-items:stretch}
  .inline-form label{flex:1 1 100%}
  .inline-form > button,.inline-form > .button{width:100%}
  /* a button whose label carries a name or an address wraps here rather than pushing the page sideways */
  button,.button{white-space:normal;text-align:center}
  .compact{flex-wrap:wrap}
  .compact select,.compact input{max-width:none;flex:1 1 8rem}
  .checks{flex-direction:column;gap:var(--s2)}
  .setup-banner{flex-direction:column;align-items:flex-start;gap:var(--s2)}
  .profile-strip{align-items:flex-start}
  .filters button{flex:1 1 auto}
  .empty-icon{width:6rem}
  .preview-bar{
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;
    gap:var(--s2);padding:var(--s2) var(--s3);text-align:left
  }
  .preview-detail{display:none}
  .preview-bar .button{min-height:2.5rem;padding:.45rem .75rem;font-size:var(--step--2)}
  body:has(.preview-bar) .workspace{padding-bottom:4.75rem}
  .player iframe{height:min(70vh,32rem)}
  .certificate-detail{grid-template-columns:1fr;justify-content:start;text-align:left}
  .settings-grid{grid-template-columns:1fr}
  .settings-grid .setting-card:nth-child(odd):last-child{grid-column:auto}
  .permission-card{display:block}
  .role-art{margin-left:0;width:6.5rem}
  th,td{padding:var(--s3)}
  /* The two lists staff open most on a phone stop being a spreadsheet. Same markup as the
     laptop table: the row becomes a card, the columns after the name become labelled lines,
     and nothing is left off-screen behind a sideways scroll. */
  .table-cards{border:0;background:none;box-shadow:none;border-radius:0;overflow-x:visible}
  .stack,.stack tbody,.stack tr,.stack td{display:block}
  .stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .stack tr{
    display:flex;flex-wrap:wrap;align-items:baseline;
    background:var(--card);border:1px solid var(--line);border-radius:var(--r2);
    box-shadow:var(--lift);padding:var(--s4);margin:0 0 var(--s3);
  }
  .stack tr:last-child{margin-bottom:0}
  .stack tbody tr:hover{background:var(--card-2)}
  .stack td{
    order:3;flex:1 1 100%;
    display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--s3);
    border:0;padding:var(--s2) 0 0;
  }
  .stack td::before{
    content:attr(data-label);flex:0 0 6.5rem;
    color:var(--muted);font-size:var(--step--1);font-weight:700;
  }
  .stack td > small{flex:1 1 100%;margin-top:0}
  .stack td.card-lead{order:1;flex:1 1 55%;display:block;padding:0;font-size:var(--step-1)}
  .stack td.card-lead strong,.stack td.card-lead a{font-weight:750}
  .stack td.card-status{order:2;flex:0 0 auto;margin-left:auto;padding:0}
  .stack td.card-lead::before,.stack td.card-status::before{content:none}
  .setting-value{float:none;display:block;max-width:100%;margin-top:var(--s1)}
  dd{font-size:var(--step-0)}
}

/* ------------------------------------------------- sections that fold away */
/* A clinician's page is long because everything on it is wanted. On a laptop each
   secondary section is simply open, with no toggle in the way; on a phone it starts
   folded so the person, their checklist and their documents are the first screen.
   Native <details>: with no CSS and no script at all, everything is still reachable. */
@supports selector(::details-content){
  @media (min-width:561px){
    .open-wide::details-content{content-visibility:visible}
    .open-wide > summary{list-style:none;cursor:default;margin-bottom:var(--s2)}
    .open-wide > summary::-webkit-details-marker{display:none}
  }
}
/* A jump link opens the section it points at, folded or not. */
.open-wide:target::details-content{content-visibility:visible}

/* --------------------------------------------------------------- motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  a.stat:hover,.setting-card:hover,button:active,.button:active{transform:none}
}

/* ---------------------------------------------------------------- print */
@media print{
  :root{
    --paper:#fff;--paper-2:#fff;--card:#fff;--card-2:#fff;
    --line:#b9b1a6;--line-soft:#d5cec4;--field-line:#6d665c;--edge:#6d665c;
    --ink:#000;--ink-soft:#221f1c;--muted:#3d372f;
    --accent:#0d513a;--accent-strong:#0d513a;--on-accent:#fff;
    --accent-tint:#fff;--accent-tint-2:#cfc9bf;--accent-fill:#6d665c;
    --sun-fill:#b9b1a6;--coral-fill:#b9b1a6;--sky-fill:#b9b1a6;
    --ok:#12482e;--ok-bg:#fff;--warn:#5f3a0f;--warn-bg:#fff;
    --sun-tint:#fff;--coral-tint:#fff;--sky-tint:#fff;
    --lift:none;--lift-2:none;
  }
  .sidebar,header,footer,.tabs,.filters,.skip,.dropzone,.preview-bar,
  .page-heading .button,.button-row,form button,.setup-banner{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .workspace{margin:0;min-height:0;padding-bottom:0}
  main{max-width:none;padding:0}
  .panel,.stat,.profile-strip,.table-scroll,.source-card,details.panel{
    border:1px solid var(--line);box-shadow:none;break-inside:avoid;page-break-inside:avoid;
  }
  .stat{background:#fff}
  .certificate{border:2px solid var(--line);padding:var(--s7) var(--s6)}
  .badge{border:1px solid var(--line);background:#fff;color:#000}
  a{color:#000;text-decoration:underline}
  details{page-break-inside:avoid}
  details > summary{list-style:none;font-weight:700}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}
  h2::before{background:#000}
  thead{display:table-header-group}
  tr{break-inside:avoid}
}