/* The clinic's own typeface, all nine weights as the designer drew them.
   One family covering Latin and Arabic — which is the whole reason the
   interface can be bilingual without a mismatch on every line. */
@font-face{font-family:'Ping AR + LT';src:url(/static/fonts/Ping-Hairline.woff) format('woff');
 font-weight:100;font-style:normal;font-display:swap}
@font-face{font-family:'Ping AR + LT';src:url(/static/fonts/Ping-Thin.woff) format('woff');
 font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Ping AR + LT';src:url(/static/fonts/Ping-ExtraLight.woff) format('woff');
 font-weight:250;font-style:normal;font-display:swap}
@font-face{font-family:'Ping AR + LT';src:url(/static/fonts/Ping-Light.woff) format('woff');
 font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Ping AR + LT';src:url(/static/fonts/Ping-Regular.woff) format('woff');
 font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Ping AR + LT';src:url(/static/fonts/Ping-Medium.woff) format('woff');
 font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Ping AR + LT';src:url(/static/fonts/Ping-Bold.woff) format('woff');
 font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Ping AR + LT';src:url(/static/fonts/Ping-Heavy.woff) format('woff');
 font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Ping AR + LT';src:url(/static/fonts/Ping-Black.woff) format('woff');
 font-weight:900;font-style:normal;font-display:swap}


*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* overflow-wrap on the body, so that a long word breaks instead of taking the
   page with it.
   Every field a person types into is capped — a name at 120 characters, a
   diagnosis at 600, a note at 4000 — and the caps work. But 120 characters with
   no space in them is still one word, and one word wider than the screen makes
   the whole page scroll sideways: measured at 6,238px on a 390px phone for a
   patient whose name had no spaces in it. A pasted URL in a note, a long Latin
   term in a diagnosis, a file number somebody ran together — all of them are the
   same shape and all of them are things people actually type.
   break-word only acts on a word that would otherwise overflow. Ordinary text,
   in either language, is untouched. */
body{margin:0;font-family:'Ping AR + LT',system-ui,'Segoe UI',sans-serif;
 background:#F5F7F0;color:#212121;font-size:15px;line-height:1.5;
 overflow-wrap:break-word}
a{color:#3F6200}
button{font:inherit}
/* English and Arabic are never allowed to run into each other on one line. A pair of
   .en / .ar siblings always stacks: English on its own line to the left, Arabic on its
   own line to the right. This is the single most important typographic rule in the
   whole project and it is set once, here. */
.en{display:block;direction:ltr;text-align:left}
.ar{display:block;direction:rtl;text-align:right}
/* A number reads the same in both scripts, so a numeric chip shows one form only:
   Latin digits in the bilingual and English views, Arabic-Indic digits in the Arabic
   view. Stacking them would double the height of every value chip for no gain. */
body:not(.only-ar) .numchip .ar{display:none !important}
body.only-ar .numchip .en{display:none !important}
.numchip .en,.numchip .ar{text-align:center}
body.only-en .ar{display:none !important}
body.only-ar .en{display:none !important}
body.only-ar .wrap,body.only-ar .card,body.only-ar .blk{direction:rtl}
body.only-ar table{direction:rtl}
body.only-ar th,body.only-ar td{text-align:right}

/* Sticky furniture: the bar at the top and the note panel at the bottom must never
   sit on top of the control the therapist is reaching for. Anything that can be
   pressed keeps a margin the browser respects when it scrolls it into view. */
.chip,.tk,.pri,.sec,.lnk,input,textarea,select,.psec>h3,.blk,.fieldrow{
 scroll-margin-top:calc(var(--hh,53px) + 60px);scroll-margin-bottom:180px}

/* ---------------- top bar ---------------- */
header.top{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid #D8DED0}
.topin{max-width:1180px;margin:0 auto;padding:9px 16px;display:flex;align-items:center;
 gap:12px;flex-wrap:wrap}
.topin img.logo{height:34px;width:auto;display:block}
.spacer{flex:1 1 auto}
.seg{display:flex;border:1px solid #D8DED0;border-radius:999px;overflow:hidden}
.seg button{font-size:12px;padding:6px 11px;border:0;background:#fff;color:#6E6E6E;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--g-on);color:#fff;font-weight:700}

/* ---------------- screens ---------------- */
.screen{display:none}
.screen.on{display:block}
.wrap{max-width:1180px;margin:0 auto;padding:18px 16px 120px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px}
.dcard{background:#fff;border:1px solid #D8DED0;border-radius:14px;padding:16px;display:flex;
 flex-direction:column;gap:9px}
.dcard .hd{display:flex;align-items:flex-start;gap:10px}
.dcard .abbr{background:var(--g-on);color:#fff;font-weight:700;border-radius:10px;
 min-width:42px;height:42px;display:flex;align-items:center;justify-content:center;font-size:15px}
.dcard h3{margin:0;font-size:16px;line-height:1.25}
.dcard .arn{font-size:14px;font-weight:700;color:#3F6200}
.dcard .mk{font-size:11.5px;color:#6E6E6E}
.dcard .rulebar{background:#FDE4DF;border-left:4px solid #EF3B1D;border-radius:8px;
 padding:8px 10px;font-size:11.5px}
body.only-ar .dcard .rulebar{border-left:0;border-right:4px solid #EF3B1D}
.dcard .acts{display:flex;gap:8px;margin-top:auto;padding-top:6px;flex-wrap:wrap}
.dcard .n{font-size:11px;color:#6E6E6E}

.pri{background:var(--g-on);color:#fff;border:1px solid var(--g-on);border-radius:999px;
 padding:9px 18px;font-size:13px;font-weight:700;cursor:pointer}
.pri:hover{background:#5C8F00;border-color:#5C8F00}
.sec{background:#fff;color:#212121;border:1px solid #D8DED0;border-radius:999px;
 padding:9px 16px;font-size:13px;cursor:pointer}
.sec:hover{border-color:#71B200;color:#3F6200}
.lnk{background:none;border:0;color:#3F6200;text-decoration:underline;cursor:pointer;
 font-size:12.5px;padding:2px 0}

/* ---------------- session ---------------- */
.sesshead{background:#fff;border:1px solid #D8DED0;border-radius:14px;padding:14px 16px;
 margin-bottom:14px}
.sesshead .rule{display:flex;gap:10px;align-items:flex-start}
.sesshead .rule .tag{background:#EF3B1D;color:#fff;font-size:10.5px;font-weight:700;
 border-radius:6px;padding:3px 8px;white-space:nowrap;letter-spacing:.05em}
.sesshead .rule p{margin:0;font-size:13px}
.sesshead .why{margin-top:8px;font-size:11.5px;color:#6E6E6E;display:none}
.sesshead.open .why{display:block}

.blk{background:#fff;border:1px solid #D8DED0;border-radius:14px;margin-bottom:12px;
 overflow:hidden}
.blk>.bh{display:flex;align-items:center;gap:10px;padding:11px 14px;background:#F5F7F0;
 border-bottom:1px solid #D8DED0}
.blk>.bh .st{width:24px;height:24px;border-radius:999px;background:#D8DED0;color:#fff;
 font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.blk.done>.bh .st{background:var(--g-on)}
.blk.bad>.bh .st{background:#EF3B1D}
.blk>.bh h3,.blk>.bh h4{margin:0;font-size:13.5px;font-weight:700}
.blk>.bh .arh4{font-size:12.5px;color:#3F6200;font-weight:700}
.blk>.bh .sum{margin-inline-start:auto;font-size:11.5px;color:#6E6E6E;text-align:end}
.bd{padding:14px}

.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{border:1px solid #D8DED0;background:#fff;border-radius:999px;padding:7px 13px;
 font-size:13px;cursor:pointer;color:#212121;line-height:1.25}
.chip:hover{border-color:#71B200}
.chip[aria-pressed=true]{background:#CFF7B1;border-color:#71B200;font-weight:700;color:#3F6200}
.chip.wide{border-radius:10px;text-align:start;padding:8px 12px}
.chip .s{display:block;font-size:11px;color:#6E6E6E;font-weight:400}
.chip[aria-pressed=true] .s{color:#3F6200}

.lbl{font-size:11.5px;color:#6E6E6E;margin:0 0 6px}
.fieldrow{display:grid;grid-template-columns:minmax(140px,220px) minmax(0,1fr);gap:10px 14px;
 align-items:start;padding:9px 0;border-top:1px solid #F0F2EC}
.fieldrow:first-child{border-top:0}
.fieldrow .fl b{display:block;font-size:12.5px}
.fieldrow .fl span{display:block;font-size:12px;color:#3F6200}
input[type=text],input[type=number],input[type=search],textarea,select{
 font:inherit;font-size:13px;border:1px solid #D8DED0;border-radius:9px;padding:8px 10px;
 background:#fff;color:#212121;width:100%;max-width:320px}
textarea{max-width:100%;min-height:64px;resize:vertical}
input:focus,textarea:focus,select:focus{outline:2px solid #CFF7B1;border-color:#71B200}
.unit{font-size:11.5px;color:#6E6E6E;margin-inline-start:6px}

/* dose strip */
.dose{background:#CFF7B1;border:1px solid #71B200;border-radius:12px;padding:12px 14px;
 margin-top:12px}
.dose h5{margin:0 0 8px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#3F6200}
.dose .vals{display:flex;flex-wrap:wrap;gap:8px}
.dose .v{background:#fff;border:1px solid #71B200;border-radius:9px;padding:6px 11px;font-size:13px}
.dose .v b{display:block;font-size:10.5px;color:#3F6200;font-weight:700;letter-spacing:.04em;
 text-transform:uppercase}
.dose .nt{margin:9px 0 0;font-size:12px}
.gradebadge{display:inline-block;border-radius:6px;padding:2px 8px;font-size:11px;font-weight:700;
 color:#fff;background:#5C8F00}
.gradebadge.C{background:#B36B00}
.gradebadge.D{background:#EF3B1D}

/* callouts */
.co{border-radius:10px;padding:10px 12px;font-size:12.5px;margin-top:10px;border-left:4px solid}
body.only-ar .co{border-left:0;border-right:4px solid}
.co.stop{background:#FDE4DF;border-color:#EF3B1D}
.co.caution{background:#FFF3D6;border-color:#B36B00}
.co.note{background:#F5F7F0;border-color:#71B200}
.co b{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}

.warns{margin-top:10px}
.warn{background:#FDE4DF;border:1px solid #EF3B1D;border-radius:10px;padding:9px 12px;
 font-size:12.5px;margin-top:7px}
/* --red-ink, not --red. Brand red on the red ground is 3.26:1 and on the amber
   ground of a .notice.warn it is 3.58:1; both fail, and both are the emphasised
   sentence of a warning — the line most likely to be read in a hurry. The ink
   token is 8.72:1 on red and 9.57:1 on amber.
   The amber case only exists because two independent styles both claimed the
   name `warn`: .notice.warn sets the amber ground, .warn b sets the red text,
   and <div class="notice warn"> gets one of each. Same species as the .sec
   collision. The second rule keeps the notice's own ink instead. */
.warn b{color:var(--red-ink)}
.notice.warn b{color:inherit}

.checklist{margin:0;padding:0;list-style:none}
.checklist li{display:flex;gap:9px;align-items:flex-start;padding:7px 0;
 border-top:1px solid #F0F2EC;font-size:12.5px}
.checklist li:first-child{border-top:0}
/* An unticked box is empty. Showing a pale tick in it reads as "already done". */
.checklist .tk{flex:0 0 auto;width:22px;height:22px;border-radius:6px;border:1px solid #D8DED0;
 background:#fff;cursor:pointer;color:#fff;font-weight:700;font-size:13px;line-height:1;
 display:flex;align-items:center;justify-content:center}
.checklist .tk:hover{border-color:#71B200}
.checklist .tk[aria-pressed=true]{background:var(--g-on);border-color:var(--g-on);color:#fff}
/* The cross beside each check. "Something failed" used to mark every unticked
   item at once, so one bad item produced a record saying they had all failed.
   A check that did not pass is now named, one at a time. */
.checklist .xk{flex:0 0 auto;width:22px;height:22px;border-radius:6px;
 border:1px solid #D8DED0;background:#fff;cursor:pointer;color:#fff;font-weight:700;
 font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center}
.checklist .xk:hover{border-color:var(--red)}
.checklist .xk[aria-pressed=true]{background:var(--red);border-color:var(--red);color:#fff}
.checklist .tx b{display:block}
.checklist .tx span{display:block;color:#3F6200}
/* Both controls need a real touch target on a phone even though the painted
   box stays small: 22px is a thumb's-width miss. */
@media (max-width:760px){
  .checklist li{padding:11px 0}
  .checklist .tk,.checklist .xk{width:30px;height:30px;font-size:15px}
}

.detail{display:none;margin-top:12px;border-top:1px dashed #D8DED0;padding-top:12px}
.blk.showdetail .detail{display:block}

/* note panel */
.notepanel{position:sticky;bottom:0;z-index:30;background:#fff;border-top:2px solid #71B200;
 box-shadow:0 -3px 14px rgba(0,0,0,.08)}
.notein{max-width:1180px;margin:0 auto;padding:10px 16px}
.noterow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.noterow .prog{font-size:12px;color:#6E6E6E}
.noterow .spacer{flex:1 1 auto}
.noteout{margin-top:9px;max-height:190px;overflow:auto;background:#F5F7F0;
 border:1px solid #D8DED0;border-radius:10px;padding:10px 12px;font-size:12.5px;
 white-space:pre-wrap;display:none}
.notepanel.open .noteout{display:block}
/* The button that opens the note is the same button that closes it, so its label
   has to say which. */
.notepanel .lblhide{display:none}
.notepanel.open .lblshow{display:none}
.notepanel.open .lblhide{display:inline}
/* An open note on a desktop takes about 250 px at the foot of the window. Controls
   scrolled to the bottom edge would sit under it, so the reserved band grows with it. */
body:has(.notepanel.open) .chip,
body:has(.notepanel.open) .tk,
body:has(.notepanel.open) .pri,
body:has(.notepanel.open) .sec,
body:has(.notepanel.open) input,
body:has(.notepanel.open) textarea{scroll-margin-bottom:320px}
/* Controls that live inside the note panel are already in a fixed container; the
   reserved scroll band that protects the page controls must not apply to them, or
   the browser tries to scroll a panel that has nowhere to scroll. */
.notepanel .pri,.notepanel .sec,.notepanel select,.notepanel .noteout{
 scroll-margin:0 !important}

/* ---------------- protocol ----------------
   These are .psec, not .sec.

   They were .sec, and .sec is also the class on every secondary button in the
   application — declared two hundred lines earlier as a white pill. Two
   different components under one name is not a protocol-page problem: the later
   ruleset wins EVERYWHERE, so every secondary button in the clinic system was
   being given border-radius:14px, margin-bottom:12px and overflow:hidden, and
   every protocol section was being given the button's padding, font size and
   inline-block display. Measured in a real browser, not reasoned about: a "Back"
   button on the therapist's home page came out 54 px tall with a 12 px skirt
   under it. */
.protobar{position:sticky;top:var(--hh,53px);z-index:35;background:#F5F7F0;padding:10px 0;
 display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.psec{background:#fff;border:1px solid #D8DED0;border-radius:14px;margin-bottom:12px;overflow:hidden}
.psec>h3{margin:0;font-size:14px}
/* The heading is a button filling the heading, so it can be reached by keyboard
   and announced as a control. It carries the bar's own colour rather than the
   <h3> so that the focus ring lands on what is actually pressed. */
.psec>h3>.sech{display:flex;gap:10px;align-items:baseline;width:100%;
 margin:0;background:var(--g-on);color:#fff;padding:10px 14px;font-size:14px;
 font-weight:700;border:0;cursor:pointer;text-align:start;font-family:inherit}
.psec>h3>.sech:hover{background:#5C8F00}
.psec>h3>.sech .arn{margin-inline-start:auto;font-size:13px}
.psec .secbd{padding:14px;display:none}
.psec.open .secbd{display:block}
table.dt{border-collapse:collapse;width:100%;font-size:12.5px;margin:8px 0}
table.dt th{background:var(--g-on);color:#fff;text-align:start;padding:7px 9px;font-weight:700;
 border:1px solid #fff}
table.dt td{padding:6px 9px;border:1px solid #D8DED0;vertical-align:top}
table.dt tr:nth-child(even) td{background:#F5F7F0}
.tw{overflow-x:auto}
ul.pl{margin:6px 0;padding-inline-start:20px;font-size:13px}
ul.pl li{margin:4px 0}
h3.sub,h4.sub{margin:14px 0 6px;font-size:13px;color:#3F6200;border-bottom:2px solid #CFF7B1;
 padding-bottom:4px;display:flex;gap:10px;align-items:baseline}
h3.sub .arn,h4.sub .arn{margin-inline-start:auto}


/* ---------------- phone ---------------- */
@media (max-width:720px){
 .topin{gap:8px;padding:8px 12px}
 .topin img.logo{height:28px}
 .wrap{padding:14px 12px 150px}
 .grid{grid-template-columns:1fr}
 .fieldrow{grid-template-columns:1fr;gap:6px}
 input[type=text],input[type=number],input[type=search],select{max-width:100%}
 /* On a phone the note is not a strip at the foot of the form — it becomes the
    whole screen, so nothing it could cover is being used while it is open. */
 .notepanel.open{position:fixed;left:0;right:0;top:var(--hh,49px);bottom:0;z-index:50;background:#fff;
  overflow:auto;border-top:0;display:flex;flex-direction:column}
 .notepanel.open .notein{flex:1 1 auto;display:flex;flex-direction:column;
  padding-bottom:20px}
 .notepanel.open .noteout{max-height:none;flex:1 1 auto}
 body:has(.notepanel.open) .chip,body:has(.notepanel.open) .tk,
 body:has(.notepanel.open) .pri,body:has(.notepanel.open) .sec{scroll-margin-bottom:180px}
 /* Closed, the note bar is a strip and not a panel — it must not eat a third of a
    phone screen while the therapist is filling the form. */
 .notepanel:not(.open) .noterow{gap:6px}
 .notepanel:not(.open) .noterow .sec{padding:6px 10px;font-size:12px}
 .notepanel:not(.open) .noterow .pri{padding:8px 14px;font-size:12.5px}
 .notepanel:not(.open) #notelang{max-width:135px;font-size:12px;padding:6px 8px}
 .notepanel:not(.open) .prog{font-size:11px}
 .notepanel:not(.open) .notein{padding:8px 12px}
}
@media print{
 header.top,.seg,.protobar,.notepanel .noterow,.dcard .acts{display:none !important}
 .screen{display:none !important}
 .screen.on{display:block !important}
 body{background:#fff}
 .noteout{display:block !important;max-height:none;border:0;background:#fff}
 /* every folded protocol section opens on paper: printing a protocol with its
    sections collapsed prints the headings and nothing under them */
 .psec .secbd{display:block !important}
}


/* ============================================================================
   THE APPLICATION LAYER
   The hub above defines the clinic's visual language. This layer defines the
   product built on top of it: tokens, elevation, motion, and the components a
   multi-user system needs — a command palette, toasts, a progress rail.
   Every value is a token. Nothing below hard-codes a colour twice.
   ========================================================================== */
:root{
  color-scheme: light;

  /* brand ramp — from the designer's guide, not invented */
  --g-900:#20400A; --g-700:#3F6200; --g-600:#5C8F00; --g-500:#71B200;
  --g-200:#CFF7B1; --g-100:#E9F7DA; --g-050:#F3FAEC;

  /* --g and --pale are the short names the academy layer was written against.
     They were USED there — ten times, with no fallback — and declared nowhere,
     so every one of those declarations was invalid and the browser threw it
     away. What that looked like: the number beside every quiz question was
     white text on a transparent background, which is to say invisible, on
     every question of every module; the correct answer's green border did not
     exist; the weekly case card's accent stripe measured 0px wide.
     Measured in a browser, not reasoned about. */
  --g:#71B200;        /* the same green as --g-500 */
  --pale:#CFF7B1;     /* the same as --g-200: one step up from --g-100 on hover */

  /* GREEN THAT CAN CARRY WHITE TEXT.
     The brand green is #71B200 and it stays the brand green: it is on every
     border, every stripe, every accent, every fill that has no words on it.
     But white text ON it measures 2.60:1, and readable text needs 4.5:1 — so
     every primary button, every table header, every navigation tab and the
     number beside every quiz question were below the line, on a screen a
     therapist reads one-handed in a bright room.
     --g-on is #3F6200, which is --g-700 out of the same designer's ramp, and
     white on it measures 7.10:1. Nothing was invented and no new colour entered
     the palette; the darker step of the same green is used where words sit on
     it. To go back to the lighter green everywhere, set this one line to
     #71B200 — and know that the text on those surfaces stops being readable.
     --amber-on is the same idea: --amber #B36B00 stays on the borders, and text
     on the amber background uses #7A4800, which measures 6.91:1 against it
     where the brand amber measured 3.79:1. */
  --g-on:#3F6200;
  --amber-on:#7A4800;

  --ink:#212121; --ink-2:#4A4A4A; --muted:#6E6E6E; --faint:#8A9184;
  --line:#D8DED0; --line-soft:#EAEEE4;
  --surface:#FFFFFF; --canvas:#F5F7F0; --raised:#FBFCF8;

  --red:#EF3B1D; --red-bg:#FDE4DF; --red-ink:#7A1B0B;
  --amber:#B36B00; --amber-bg:#FFF3D6;
  --wa:#25D366; --wa-dark:#0B7A38; --wa-bg:#E8F8EC;

  /* space — a 4px rhythm */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:22px; --s6:30px; --s7:42px;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

  --sh-1:0 1px 2px rgba(33,33,33,.05), 0 1px 1px rgba(33,33,33,.03);
  --sh-2:0 2px 8px rgba(33,33,33,.06), 0 1px 2px rgba(33,33,33,.04);
  --sh-3:0 10px 30px rgba(33,33,33,.10), 0 2px 8px rgba(33,33,33,.06);
  --sh-4:0 24px 60px rgba(33,33,33,.18), 0 6px 18px rgba(33,33,33,.10);
  --ring:0 0 0 3px var(--g-200);

  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms;
  --ease:cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:1ms !important;animation-iteration-count:1 !important;
   transition-duration:1ms !important;scroll-behavior:auto !important}
}

body{background:var(--canvas)}

/* ---- focus: one visible, consistent ring everywhere -------------------- */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--g-600);outline-offset:2px;border-radius:var(--r-sm)}
.chip:focus-visible,.tk:focus-visible{outline-offset:3px}

/* ---- skip link --------------------------------------------------------- */
/* The skip link is hidden by being CLIPPED to nothing, not by being parked ten
   thousand pixels to the left.
   left:-9999px is harmless in a left-to-right page: the browser does not let you
   scroll to content before the origin. Flip the page to right-to-left — which is
   what the Arabic-only view does, and it is the view this clinic will mostly use
   — and that axis reverses: the link is now ten thousand pixels past the END of
   the page, and every single screen became horizontally scrollable into a field
   of nothing. Measured: scrollWidth 10389 against a 390px phone, and the browser
   really did scroll 1170px when asked. A therapist swiping a table sideways
   would have slid the whole page off the screen.
   Clipping takes it out of the layout in both directions at once. */
.skip{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
 overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip:focus{position:fixed;inset-inline-start:0;top:0;width:auto;height:auto;
 margin:0;overflow:visible;clip:auto;clip-path:none;z-index:200;
 background:var(--g-700);color:#fff;padding:10px 16px;
 border-radius:0 0 var(--r-md) 0;font-weight:700}

/* ---- links dressed as buttons ------------------------------------------ */
/* Inline-block, not flex: a bilingual button holds two block spans that must
   stack — English on its line, Arabic on its own — and a flex row would put them
   side by side, which is the one thing the whole typographic rule forbids. */
a.pri,a.sec,a.btn,a.wabtn,.pri,.sec,.btn,.wabtn{
 display:inline-block;text-align:center;text-decoration:none;vertical-align:middle;
 line-height:1.3;
 transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),
   box-shadow var(--dur-1) var(--ease),transform var(--dur-1) var(--ease),
   opacity var(--dur-2) var(--ease)}
.pri .ar,.sec .ar,.btn .ar,.wabtn .ar{text-align:center}
.pri .en,.sec .en,.btn .en,.wabtn .en{text-align:center}
.pri{box-shadow:var(--sh-1)}
.pri:hover{box-shadow:var(--sh-2)}
.pri:active,.sec:active,.btn:active{transform:translateY(1px)}
.pri[disabled],.sec[disabled],button[disabled]{opacity:.45;cursor:not-allowed;
 transform:none;box-shadow:none}
/* "Working" is shown by the control going quiet and refusing a second press —
   no spinner glyph to fight the two-line bilingual label for space. */
button[aria-busy=true],a[aria-busy=true]{pointer-events:none;animation:pulse 1.1s var(--ease) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
table.list .pri,table.list .sec{white-space:normal}

/* ---- top bar ----------------------------------------------------------- */
header.top{background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(10px);
 -webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);
 transition:box-shadow var(--dur-2) var(--ease)}
header.top.scrolled{box-shadow:var(--sh-2)}
.topin{row-gap:var(--s2);max-width:1180px}
header.top .btn{white-space:nowrap}
.who{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.who b{font-size:12.5px}
.who span{font-size:11px;color:var(--muted)}
.avatar{width:34px;height:34px;border-radius:var(--r-pill);background:var(--g-200);
 color:var(--g-700);font-weight:700;font-size:13px;display:flex;align-items:center;
 justify-content:center;flex:0 0 auto;letter-spacing:.5px}

.nav{display:flex;gap:2px;flex-wrap:wrap}
.nav a{position:relative;font-size:12.5px;padding:8px 14px;border-radius:var(--r-pill);
 text-decoration:none;color:var(--muted);transition:background var(--dur-1) var(--ease),
 color var(--dur-1) var(--ease)}
.nav a:hover{background:var(--g-050);color:var(--ink)}
.nav a[aria-current=page]{background:var(--g-on);color:#fff;font-weight:700}
.badge{display:inline-block;min-width:19px;padding:1px 6px;border-radius:var(--r-pill);
 background:var(--red);color:#fff;font-size:11px;font-weight:700;text-align:center;
 margin-inline-start:6px}
.nav a[aria-current=page] .badge{background:#fff;color:var(--red)}

.seg{align-items:stretch;border-radius:var(--r-pill);overflow:hidden}
.seg .btn,.seg a.btn{border:0;border-radius:0;padding:7px 12px;font-size:12px;
 background:#fff;color:var(--muted)}
.seg .btn + .btn,.seg a.btn + a.btn{border-inline-start:1px solid var(--line)}
.seg a.btn:hover{background:var(--g-050);color:var(--ink)}
.seg a.btn.langon{background:var(--g-on);color:#fff;font-weight:700}
.seg a.btn.langon:hover{background:var(--g-600);color:#fff}

.kbdhint{display:inline-flex !important;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);
 border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 12px;background:#fff;
 cursor:pointer;transition:border-color var(--dur-1) var(--ease)}
.kbdhint:hover{border-color:var(--g-500);color:var(--g-700)}
/* the two labels stack inside the chip; the key badge stays beside them */
.kbdhint .kbdlabel{display:block;line-height:1.3;text-align:start}
kbd{font:inherit;font-size:10.5px;background:var(--canvas);border:1px solid var(--line);
 border-bottom-width:2px;border-radius:5px;padding:1px 5px;color:var(--ink-2)}

/* ---- page furniture ---------------------------------------------------- */
.wrap{max-width:1180px}
h2.pagetitle{margin:0 0 2px;font-size:22px;letter-spacing:-.3px}
p.pagesub{margin:0 0 var(--s4);font-size:12.5px;color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
 padding:var(--s4);margin-bottom:var(--s3);box-shadow:var(--sh-1)}
.card>h2{margin:0 0 2px;font-size:17px;letter-spacing:-.2px}
.card>.sub{font-size:12px;color:var(--muted);margin:0 0 var(--s3)}
.facts{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:flex-start}
.facts .fact{border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 11px;
 background:#fff;font-size:12px;color:var(--ink)}

/* ---- tables ------------------------------------------------------------ */
table.list{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}
table.list th{background:transparent;color:var(--g-700);text-align:start;
 padding:8px 10px;font-weight:700;font-size:11px;letter-spacing:.06em;
 text-transform:uppercase;border-bottom:1px solid var(--line)}
table.list td{padding:11px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top}
table.list tbody tr{transition:background var(--dur-1) var(--ease)}
table.list tbody tr:hover td{background:var(--g-050)}
table.list a{font-weight:700;text-decoration:none}
table.list a:hover{text-decoration:underline}
table.list tr.hidden{display:none}

/* On a phone these tables were wider than the screen and took the whole page
   sideways with them. Measured on a 390px viewport: the physician's own home
   page ran to 613px, the accounts page to 582px, a patient's chart to 454px.
   Seven screens in all, and the physician's is the one most likely to be read
   on a phone between patients.
   The cause is the bilingual rule rather than any one table: every heading cell
   carries an English line and an Arabic line stacked, so the columns are twice
   as wide as their words. That rule is right and stays. The table scrolls
   inside itself instead, and the page no longer moves. */
@media (max-width:760px){
  table.list{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.list thead,table.list tbody{display:table;width:100%;min-width:max-content}
}

.pill{display:inline-block;border-radius:var(--r-pill);
 padding:3px 11px;font-size:11px;font-weight:700;border:1px solid var(--line);
 color:var(--muted);white-space:nowrap;background:#fff}
.pill.sent{background:var(--g-200);border-color:var(--g-500);color:var(--g-700)}
.pill.read{background:var(--g-100);border-color:#9BCB5A;color:var(--g-700)}
.pill.draft{background:var(--amber-bg);border-color:var(--amber);color:var(--amber-on)}
.pill.ack{background:var(--g-on);border-color:var(--g-on);color:#fff}
.pill.wa{background:var(--wa-bg);border-color:var(--wa);color:var(--wa-dark)}

.empty{text-align:center;padding:var(--s6) var(--s4);color:var(--muted)}
.empty .big{font-size:15px;color:var(--ink);font-weight:700;margin-bottom:6px}

/* ---- stat tiles -------------------------------------------------------- */
.stat{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s3)}
.stat .s{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
 padding:var(--s3) var(--s4);box-shadow:var(--sh-1)}
.stat .s b{display:block;font-size:26px;color:var(--g-700);line-height:1.05;
 letter-spacing:-.5px;font-weight:700}
/* A DIRECT child span, not any span inside the card.
   As `.stat .s span` this reached into a button that happened to sit in a stat
   card and painted its label muted grey — grey on the primary green, measured
   at 1.39:1, which is text nobody can read. The "Practice room" button on the
   academy home was exactly that. The label of a button belongs to the button. */
.stat .s>span{font-size:11.5px;color:var(--muted)}
.stat .s.alert b{color:var(--red)}

/* ---- forms ------------------------------------------------------------- */
.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
 gap:var(--s3) var(--s4)}
.field label{display:block;font-size:12px;color:var(--g-700);margin-bottom:5px;font-weight:700}
.field input,.field select,.field textarea{width:100%;max-width:none}
input,select,textarea{transition:border-color var(--dur-1) var(--ease),
 box-shadow var(--dur-1) var(--ease)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--g-500);
 box-shadow:var(--ring)}
.actions{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4);align-items:center}

/* ---- device cards ------------------------------------------------------ */
.dcard{box-shadow:var(--sh-1);transition:box-shadow var(--dur-2) var(--ease),
 transform var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
.dcard:hover{box-shadow:var(--sh-3);transform:translateY(-2px);border-color:var(--g-500)}

/* ---- toasts ------------------------------------------------------------ */
.toasts{position:fixed;z-index:120;inset-inline-end:18px;bottom:18px;display:flex;
 flex-direction:column;gap:10px;max-width:min(420px,calc(100vw - 36px));pointer-events:none}
.toast{pointer-events:auto;background:var(--surface);border:1px solid var(--line);
 border-inline-start:4px solid var(--g-500);border-radius:var(--r-md);
 box-shadow:var(--sh-3);padding:12px 14px;font-size:13px;display:flex;gap:10px;
 align-items:flex-start;animation:toastin var(--dur-3) var(--ease)}
.toast.err{border-inline-start-color:var(--red)}
.toast .x{margin-inline-start:auto;background:none;border:0;color:var(--muted);
 cursor:pointer;font-size:16px;line-height:1;padding:0 2px}
.toast.out{animation:toastout var(--dur-2) var(--ease) forwards}
@keyframes toastin{from{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes toastout{to{opacity:0;transform:translateY(6px) scale(.98)}}

/* ---- command palette --------------------------------------------------- */
.palette{position:fixed;inset:0;z-index:150;display:none;
 background:rgba(33,33,33,.34);backdrop-filter:blur(3px)}
.palette.on{display:block;animation:fade var(--dur-2) var(--ease)}
@keyframes fade{from{opacity:0}}
.palbox{max-width:620px;margin:10vh auto 0;background:var(--surface);
 border-radius:var(--r-xl);box-shadow:var(--sh-4);overflow:hidden;
 animation:rise var(--dur-3) var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(-12px) scale(.985)}}
.palbox input{width:100%;max-width:none;border:0;border-bottom:1px solid var(--line);
 border-radius:0;padding:18px 20px;font-size:16px}
.palbox input:focus{box-shadow:none;border-color:var(--line)}
.palres{max-height:52vh;overflow:auto;padding:6px}
.palres .grp{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;
 color:var(--faint);padding:10px 14px 5px;font-weight:700}
.palres a{display:flex;align-items:center;gap:11px;padding:10px 14px;border-radius:var(--r-md);
 text-decoration:none;color:var(--ink);font-size:13.5px}
.palres a .tag{background:var(--g-200);color:var(--g-700);font-weight:700;font-size:10.5px;
 border-radius:6px;padding:3px 7px;flex:0 0 auto;min-width:30px;text-align:center}
.palres a .sub{color:var(--muted);font-size:11.5px}
.palres a[aria-selected=true]{background:var(--g-050);outline:1px solid var(--g-200)}
.palfoot{border-top:1px solid var(--line);padding:9px 16px;font-size:11px;color:var(--muted);
 display:flex;gap:14px;background:var(--raised)}

/* ---- the session progress rail ---------------------------------------- */
.rail{position:sticky;top:calc(var(--hh,56px));z-index:25;background:var(--canvas);
 padding:10px 0 12px;margin-bottom:var(--s2)}
.railin{display:flex;gap:6px;align-items:stretch;background:var(--surface);
 border:1px solid var(--line);border-radius:var(--r-pill);padding:5px;
 box-shadow:var(--sh-1);overflow-x:auto;scrollbar-width:none}
.railin::-webkit-scrollbar{display:none}
.rail .step{flex:1 1 0;min-width:118px;display:flex;align-items:center;gap:8px;
 border:0;background:transparent;border-radius:var(--r-pill);padding:8px 12px;
 cursor:pointer;color:var(--muted);font-size:12.5px;text-align:start;white-space:nowrap;
 transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease)}
.rail .step:hover{background:var(--g-050);color:var(--ink)}
.rail .step .n{width:21px;height:21px;border-radius:var(--r-pill);background:var(--line);
 color:#fff;font-size:11.5px;font-weight:700;display:flex;align-items:center;
 justify-content:center;flex:0 0 auto;transition:background var(--dur-2) var(--ease)}
.rail .step.done .n{background:var(--g-on)}
.rail .step.bad .n{background:var(--red)}
.rail .step.here{background:var(--g-050);color:var(--ink);font-weight:700}
.rail .step.here .n{box-shadow:0 0 0 3px var(--g-200)}

.blk{box-shadow:var(--sh-1);scroll-margin-top:calc(var(--hh,56px) + 74px)}
.blk>.bh{position:relative}
.blk>.bh .st{transition:background var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.blk.done>.bh .st{transform:scale(1.06)}

.chip{transition:background var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),
 transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.chip:active{transform:scale(.97)}
.chip[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--g-500)}
.dose{animation:dosein var(--dur-3) var(--ease)}
@keyframes dosein{from{opacity:0;transform:translateY(-6px)}}
.warn{animation:dosein var(--dur-2) var(--ease)}

/* ---- WhatsApp panel ---------------------------------------------------- */
.wa{background:var(--surface);border:1px solid var(--wa);border-radius:var(--r-lg);
 padding:var(--s4);box-shadow:var(--sh-1)}
.wa h3{margin:0 0 4px;font-size:15px;color:var(--wa-dark)}
.wa textarea{min-height:190px;font-size:12.5px;line-height:1.55}
.wabtn{background:var(--wa);color:#fff;border:1px solid var(--wa);border-radius:var(--r-pill);
 padding:11px 22px;font-size:13.5px;font-weight:700;cursor:pointer}
.wabtn:hover{background:#1EB955;border-color:#1EB955;color:#fff;box-shadow:var(--sh-2)}

/* ---- the PDF strip ----------------------------------------------------- */
.pdfbar{display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;
 background:linear-gradient(180deg,var(--g-050),var(--surface));
 border:1px solid var(--g-200);border-radius:var(--r-lg);padding:var(--s3) var(--s4);
 margin-bottom:var(--s3);box-shadow:var(--sh-1)}
.pdfbar .ic{width:38px;height:44px;border-radius:6px;background:var(--surface);
 border:1px solid var(--line);position:relative;flex:0 0 auto;box-shadow:var(--sh-1)}
.pdfbar .ic:after{content:"PDF";position:absolute;left:0;right:0;bottom:6px;text-align:center;
 font-size:9px;font-weight:700;color:var(--red)}
.pdfbar .ic:before{content:"";position:absolute;top:6px;left:7px;right:7px;height:2px;
 background:var(--line);box-shadow:0 5px 0 var(--line),0 10px 0 var(--line)}
.pdfbar .txt{flex:1 1 220px;min-width:0}
.pdfbar .txt b{display:block;font-size:13.5px}
.pdfbar .txt span{font-size:11.5px;color:var(--muted)}

/* ---- report on screen -------------------------------------------------- */
.rep{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
 padding:var(--s6) var(--s6);box-shadow:var(--sh-1)}
.rep h1{margin:0;font-size:23px;letter-spacing:-.4px}
.rep .refline{font-size:12px;color:var(--muted);margin:4px 0 var(--s5)}
.rep section{margin:var(--s5) 0}
.rep h2,.rep h3{margin:0 0 var(--s2);font-size:14px;color:var(--g-700);
 border-bottom:2px solid var(--g-200);padding-bottom:5px;display:flex;gap:10px;
 align-items:baseline}
.rep h2 .arn,.rep h3 .arn{margin-inline-start:auto}
.chartcard{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3);
 background:var(--raised);position:relative}
.chartlegend{display:flex;gap:18px;font-size:11.5px;color:var(--muted);margin-top:6px;
 align-items:center;flex-wrap:wrap}
.chartlegend i{display:inline-block;width:10px;height:10px;border-radius:var(--r-pill);
 margin-inline-end:6px;vertical-align:-1px}
.chartlegend .scale{margin-inline-start:auto}
.painchart .dumb{cursor:default}
.painchart .dumb circle{transition:r var(--dur-1) var(--ease)}
.painchart .dumb:hover circle{r:6.5}
.charttip{position:absolute;background:var(--ink);color:#fff;font-size:11.5px;
 padding:7px 10px;border-radius:var(--r-sm);pointer-events:none;opacity:0;
 transition:opacity var(--dur-1) var(--ease);white-space:nowrap;z-index:5;
 box-shadow:var(--sh-3)}
.charttip.on{opacity:1}
.signrow{display:flex;gap:40px;flex-wrap:wrap;margin-top:var(--s6);font-size:12px;
 color:var(--muted)}
.signrow div{min-width:200px;border-top:1px solid var(--line);padding-top:6px}

/* ---- login ------------------------------------------------------------- */
.login{max-width:430px;margin:9vh auto;padding:0 18px}
.login .card{padding:var(--s6);border-radius:var(--r-xl);box-shadow:var(--sh-3)}
.login img{height:46px;display:block;margin:0 auto var(--s5)}

.flash{border-radius:var(--r-md);padding:12px 15px;margin-bottom:var(--s3);font-size:13px}
.flash.ok{background:var(--g-200);border:1px solid var(--g-500);color:var(--g-900)}
.flash.err{background:var(--red-bg);border:1px solid var(--red);color:var(--red-ink)}

/* ---- phone ------------------------------------------------------------- */
@media (max-width:720px){
 .nav a{padding:8px 12px;font-size:12px}
 .who{display:none}
 .rep{padding:var(--s4) var(--s3)}
 .kbdhint{display:none !important}
 .palbox{margin:0;border-radius:0;height:100%;display:flex;flex-direction:column}
 .palres{max-height:none;flex:1 1 auto}
 .toasts{inset-inline:12px;bottom:12px;max-width:none}
 .rail{padding:8px 0 10px}
 .rail .step{min-width:auto;padding:8px 10px}
 .rail .step .lbl{display:none}
 .rail .step.here .lbl{display:inline}
 /* a finger is not a mouse pointer */
 .chip{min-height:40px}
 .tk{width:26px;height:26px}
 .pri,.sec,.btn{min-height:40px}
}

@media print{
 header.top,.nav,.actions,.wa,.noprint,.toasts,.palette,.rail,.pdfbar,.skip{
   display:none !important}
 .rep{border:0;padding:0;box-shadow:none}
 body{background:#fff}
}

/* A notice the session screen writes about itself — distinct from a server
   flash, which becomes a toast. */
.notice{border-radius:var(--r-md);padding:12px 15px;margin-bottom:var(--s3);font-size:13px;
 display:flex;gap:10px;align-items:center;flex-wrap:wrap;animation:dosein var(--dur-2) var(--ease)}
.notice.ok{background:var(--g-200);border:1px solid var(--g-500);color:var(--g-900)}
.notice.err{background:var(--red-bg);border:1px solid var(--red);color:var(--red-ink)}
.notice.warn{background:var(--amber-bg);border:1px solid var(--amber);color:#6B3F00}
.notice .sec{min-height:34px;padding:6px 12px}
/* A sentence inside a notice takes the whole first row, so the two languages
   stack the way they do everywhere else and the buttons wrap underneath. */
.notice .ntx{flex:1 1 100%;min-width:0}
/* Every child of a notice must be allowed to shrink.
   A flex item defaults to min-width:auto, which means it refuses to become
   narrower than its own content. The practice banner holds a table, and on a
   320px phone that table's intrinsic width made the banner 416px wide inside a
   294px column and pushed the whole page sideways — even though the table has
   its own horizontal scroller and would have coped perfectly well.
   Same defect as the quiz fieldset's min-inline-size and the quiz legend's grid
   column: a box that cannot shrink takes the page with it. */
.notice>*{min-width:0}


/* ---- typography: the nine weights, used where each one earns its place ----
   Heavy for the numbers a clinician scans, Bold for headings, Medium for the
   small uppercase labels that would smear at Regular, Light for long muted
   prose. Nothing decorative. */
h2.pagetitle{font-weight:800;letter-spacing:-.4px}
.rep h1{font-weight:800;letter-spacing:-.5px}
.stat .s b{font-weight:800}
table.list th{font-weight:500}
.field label{font-weight:500}
.pill{font-weight:500}
.blk>.bh h3,.blk>.bh h4{font-weight:700}
p.pagesub,.card>.sub,.lbl{font-weight:300}
.who b{font-weight:500}
.dcard h3{font-weight:700}
.rail .step.here{font-weight:500}

/* ---- the patient's context, above the form -------------------------------
   The session number is counted from the record and shown before anything is
   typed, so nobody has to ask the patient how many times they have been. */
.ctxbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:1px;
 background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);
 overflow:hidden;margin:0 0 var(--s3);box-shadow:var(--sh-1)}
.ctxbar .c{background:var(--surface);padding:11px 14px;display:flex;flex-direction:column;
 gap:2px;min-width:0}
.ctxbar .c b{font-size:19px;line-height:1.05;color:var(--g-700);font-weight:800;
 letter-spacing:-.3px}
.ctxbar .c.big{background:linear-gradient(180deg,var(--g-050),var(--surface))}
.ctxbar .c.big b{font-size:30px;color:var(--g-600)}
.ctxbar .c span{font-size:11px;color:var(--muted);font-weight:300;line-height:1.35}
.ctxbar .c.file b{font-size:15px;color:var(--ink)}

/* ---- the session screen: the form, and last time beside it --------------- */
.sessgrid{display:grid;grid-template-columns:minmax(0,1fr) 336px;gap:var(--s4);
 align-items:start}
.prevcol{position:sticky;top:calc(var(--hh,56px) + 74px)}
@media (max-width:1080px){
 .sessgrid{grid-template-columns:1fr}
 .prevcol{position:static;order:-1}
}

.prevcard{background:var(--surface);border:1px solid var(--g-200);border-radius:var(--r-lg);
 box-shadow:var(--sh-1);overflow:hidden}
.prevcard.other{border-color:var(--amber)}
.prevcard.empty2{border-color:var(--line)}
.prevcard .ph{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
 background:var(--g-050);padding:10px 14px;border-bottom:1px solid var(--g-200)}
.prevcard.other .ph{background:var(--amber-bg);border-bottom-color:var(--amber)}
.prevcard .ph b{font-size:13px;font-weight:700}
.prevcard .ph .when{font-size:11.5px;color:var(--muted);font-weight:300}
.prevcard .ph .lnk{margin-inline-start:auto;font-size:11.5px}
.prevcard .pb{padding:12px 14px;max-height:min(62vh,720px);overflow:auto}
.prevcard .pb.hidden{display:none}
dl.pkv{margin:0;display:grid;grid-template-columns:minmax(0,44%) minmax(0,56%);gap:0}
dl.pkv dt{font-size:11px;color:var(--g-700);font-weight:500;padding:5px 0;
 border-top:1px solid var(--line-soft)}
dl.pkv dd{margin:0;font-size:12.5px;padding:5px 0;border-top:1px solid var(--line-soft);
 word-break:break-word}
dl.pkv dt:first-child,dl.pkv dt:first-child + dd{border-top:0}
dl.pkv .painpair{font-size:15px;font-weight:800;color:var(--g-700)}
dl.pkv .lbl{display:block;font-size:10.5px}
.prevfull{margin-top:10px}
.prevfull summary{font-size:11.5px;color:var(--g-700);cursor:pointer;font-weight:500}
.prevfull pre{white-space:pre-wrap;font-size:11px;background:var(--canvas);
 border:1px solid var(--line);border-radius:var(--r-sm);padding:9px;margin:8px 0 0;
 max-height:320px;overflow:auto}

/* ---- the comparison the physician will read, shown before it is sent ---- */
.cmpcard{border-color:var(--g-500);background:linear-gradient(180deg,var(--g-050),var(--surface))}
.cmpcard .headline{background:var(--surface);border:1px solid var(--g-200);
 border-radius:var(--r-md);padding:12px 14px;font-size:14px;font-weight:500;margin:0}

/* A change of sign carries meaning here: pain going down is the good direction,
   so the arrow of improvement is green and a rise is red. Never colour alone —
   the number and its sign say it too. */
.chg{font-weight:800}
.chg.down{color:var(--g-700)}
.chg.up{color:var(--red)}

/* ================================================================= academy */
.modgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
 gap:var(--s3);margin-top:var(--s3)}
.modcard{display:flex;gap:12px;align-items:flex-start;background:#fff;
 border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;
 text-decoration:none;color:inherit;transition:border-color var(--dur-1) var(--ease),
 box-shadow var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
.modcard:hover{border-color:var(--g);box-shadow:var(--sh-2);transform:translateY(-1px)}
.modcard .st{flex:0 0 auto;width:26px;height:26px;border-radius:9px;display:grid;
 place-items:center;background:var(--g-050);border:1px solid var(--line);
 color:var(--g-700);font-weight:800;font-size:14px;margin-top:2px}
.modcard.passed .st{background:var(--g-on);border-color:var(--g-on);color:#fff}
.modcard.tried .st{background:var(--amber-bg);border-color:var(--amber);color:var(--amber-on)}
.modcard .bd{flex:1 1 auto;min-width:0}
.modcard b{display:block;font-size:14.5px;letter-spacing:-.1px}
.modcard .sm{display:block;font-size:12px;color:var(--muted);font-weight:300;margin-top:4px}
.modcard .meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}

.card.weekly{border-inline-start:5px solid var(--g);background:
 linear-gradient(135deg,#fff 0%,var(--g-050) 100%)}
.card.weekly.answered{border-inline-start-color:var(--g-500)}
.card.weekly .wk{display:flex;gap:8px;align-items:center;margin-bottom:6px}

.lesson .ablk-h{margin:26px 0 8px;font-size:16.5px;font-weight:700;color:var(--g-900);
 padding-bottom:5px;border-bottom:2px solid var(--g-100)}
.lesson .ablk-h:first-child{margin-top:0}
.lesson .ablk-p{margin:0 0 12px;font-size:14.5px;line-height:1.75}
.lesson .ablk-s,.lesson .ablk-u{margin:0 0 14px;padding-inline-start:22px;font-size:14.5px}
.lesson .ablk-s li,.lesson .ablk-u li{margin:0 0 9px;line-height:1.7}
.lesson .ablk-q{margin:16px 0;padding:14px 18px;background:var(--g-050);
 border-inline-start:4px solid var(--g-500);border-radius:0 var(--r-md) var(--r-md) 0}
.lesson .ablk-q blockquote{margin:0;font-size:14.5px;line-height:1.7}
.lesson .ablk-q figcaption{margin-top:8px;font-size:11.5px;color:var(--muted);font-weight:300}
.lesson .ablk-r{margin:16px 0;padding:13px 17px;border-radius:var(--r-md);
 border-inline-start:5px solid;font-size:14px;line-height:1.7}
.lesson .ablk-r .tag{display:block;font-size:11px;letter-spacing:.4px;
 text-transform:uppercase;margin-bottom:5px}
.lesson .ablk-r.stop{background:var(--red-bg);border-color:var(--red)}
.lesson .ablk-r.stop .tag{color:var(--red-ink)}
.lesson .ablk-r.warn{background:var(--amber-bg);border-color:var(--amber)}
.lesson .ablk-r.warn .tag{color:#6B3F00}
.lesson .ablk-r.ok{background:var(--g-200);border-color:var(--g);color:var(--g-900)}
.lesson .ablk-r.ok .tag{color:var(--g-900)}
.lesson .ablk-n{margin:18px 0;padding:14px 18px;border:1px dashed var(--line);
 border-radius:var(--r-md);background:#FCFDFA;font-size:13.5px}
.lesson .ablk-n .tag{display:block;font-size:11px;letter-spacing:.4px;
 text-transform:uppercase;color:var(--g-700);margin-bottom:7px}
.lesson .ablk-n ul{margin:0;padding-inline-start:20px}
.lesson .ablk-n li{margin:0 0 7px;line-height:1.65}
table.ablk-f,table.ablk-ex,table.ablk-fi,table.ablk-t{border-collapse:separate;
 border-spacing:0;width:100%;font-size:13.5px;margin:12px 0;background:#fff;
 border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
table.ablk-f th,table.ablk-ex th,table.ablk-fi th,table.ablk-t th{
 background:var(--g-on);color:#fff;font-weight:500;text-align:start;padding:9px 12px;
 font-size:12px;letter-spacing:.2px}
table.ablk-f td,table.ablk-ex td,table.ablk-fi td,table.ablk-t td{padding:10px 12px;
 border-top:1px solid var(--line-soft);vertical-align:top;line-height:1.6}
table.ablk-f td.k{width:34%}
table.ablk-ex td.v,table.ablk-fi td.v{width:30%;font-weight:700;color:var(--g-900);
 white-space:nowrap}
table.ablk-ex th.v,table.ablk-fi th.v{width:30%}
.ablk-tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ablk-ph{margin:20px 0;padding:14px 16px;border:1px solid var(--line);
 border-radius:var(--r-lg);background:#FCFDFA}
.ablk-ph h4{margin:0 0 4px;font-size:15px;font-weight:800;color:var(--g-900)}
.ablk-ph .goal{margin:0 0 8px;font-size:13.5px;color:var(--muted)}
.ablk-dd{display:flex;gap:14px;flex-wrap:wrap;margin:16px 0}
.ablk-dd>div{flex:1 1 280px;padding:13px 16px;border-radius:var(--r-md);font-size:13.5px}
.ablk-dd .do{background:var(--g-200);border:1px solid var(--g-500)}
.ablk-dd .dont{background:var(--red-bg);border:1px solid var(--red)}
.ablk-dd .tag{display:block;font-size:11px;letter-spacing:.4px;text-transform:uppercase;
 margin-bottom:6px}
.ablk-dd ul{margin:0;padding-inline-start:20px}
.ablk-dd li{margin:0 0 6px;line-height:1.6}

button.expl{display:inline;background:var(--g-100);border:1px solid var(--g-500);
 border-radius:6px;padding:0 6px;margin:0 2px;font:inherit;font-size:.92em;
 color:var(--g-900);cursor:pointer;font-weight:500;line-height:1.35;
 vertical-align:baseline}
button.expl:after{content:"?";font-size:.8em;margin-inline-start:4px;opacity:.7;
 font-weight:800}
button.expl:hover{background:var(--pale);border-color:var(--g)}
button.expl .en,button.expl .ar{display:inline}
dialog.termdlg{border:none;border-radius:var(--r-xl);padding:0;max-width:560px;
 width:calc(100% - 32px);box-shadow:var(--sh-3);color:var(--ink)}
dialog.termdlg::backdrop{background:rgba(33,33,33,.45)}
dialog.termdlg .bd{padding:24px 26px 8px}
dialog.termdlg .bd b{display:block;font-size:16px;font-weight:800;color:var(--g-900)}
dialog.termdlg .bd p{margin:10px 0 0;font-size:14px;line-height:1.75}
dialog.termdlg .bd cite{display:block;margin-top:12px;font-size:11.5px;
 color:var(--muted);font-style:normal;font-weight:300}
dialog.termdlg form{padding:14px 26px 22px;text-align:end}

/* min-inline-size:0 is not decoration.
   A <fieldset> defaults to min-inline-size:min-content, which means it refuses
   to become narrower than its longest unbreakable word. One quiz option said
   "accelerations/decelerations." and on a 320 px phone the whole page scrolled
   sideways, taking the answer buttons off the edge of the screen. Measured, not
   guessed: the fieldset was 354 px wide inside a 320 px viewport while every
   child of it was already down to 316 px.
   The pairing with overflow-wrap is deliberate — the first lets the box shrink,
   the second lets a word that still will not fit break instead of pushing. */
fieldset.qz{border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 18px;
 margin:0 0 16px;background:#fff;min-inline-size:0;overflow-wrap:break-word}
fieldset.qz.unanswered{border-color:var(--amber)}
/* A grid, not a flex row.
   As a flex row this put the English and the Arabic of every quiz question SIDE
   BY SIDE on one line — the one thing the bilingual rule says never to do, on
   fourteen modules' worth of questions, while the answer options directly below
   them stacked correctly. Measured in a browser: both spans reported the same
   top, the English starting at x=143 and the Arabic at x=754.
   The badge holds column one; the two languages stack down column two. The
   minmax(0,1fr) is what lets them shrink on a narrow phone instead of pushing
   the page sideways. */
fieldset.qz legend{padding:0 8px;font-weight:700;font-size:14.5px;
 display:grid;grid-template-columns:auto minmax(0,1fr);
 column-gap:9px;row-gap:2px;align-items:start;max-width:100%}
fieldset.qz legend>.n{grid-column:1;grid-row:1;
 width:24px;height:24px;border-radius:8px;
 background:var(--g-on);color:#fff;display:grid;place-items:center;font-size:12.5px}
fieldset.qz legend>.en,fieldset.qz legend>.ar{grid-column:2;min-width:0;
 overflow-wrap:break-word}
fieldset.qz .opt{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;
 border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:9px;
 cursor:pointer;font-size:14px;line-height:1.65;background:#fff;
 transition:border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease)}
fieldset.qz .opt:hover{border-color:var(--g)}
fieldset.qz.done .opt{cursor:default}
fieldset.qz .opt input{margin-top:4px;flex:0 0 auto}
fieldset.qz .opt .bd{flex:1 1 auto;min-width:0}
fieldset.qz .opt.correct{border-color:var(--g);background:var(--g-200)}
fieldset.qz .opt.picked:not(.correct){border-color:var(--red);background:var(--red-bg)}
fieldset.qz .why{display:block;margin-top:8px;font-size:12.8px;line-height:1.7;
 padding-top:8px;border-top:1px dashed rgba(0,0,0,.14)}
fieldset.qz .why .verdict{display:block;font-size:10.5px;letter-spacing:.4px;
 text-transform:uppercase;margin-bottom:4px;color:var(--g-900)}
fieldset.qz .opt.picked:not(.correct) .why .verdict{color:var(--red-ink)}
fieldset.qz .teach{margin-top:10px;padding:11px 14px;background:var(--g-050);
 border-inline-start:4px solid var(--g-500);border-radius:0 var(--r-md) var(--r-md) 0;
 font-size:13.5px;line-height:1.7}
fieldset.qz .teach .tag{display:block;font-size:10.5px;letter-spacing:.4px;
 text-transform:uppercase;color:var(--g-700);margin-bottom:4px}
fieldset.qz .src{margin:8px 0 0;font-size:11px;color:var(--muted);font-weight:300}
.qzleft{margin-inline-start:4px}

input.filter{width:100%;margin-bottom:14px}
.glos{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--s3)}
.gterm{border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;
 background:#fff}
.gterm h3{margin:0 0 6px;font-size:14.5px;font-weight:800;color:var(--g-900)}
.gterm p{margin:0;font-size:13px;line-height:1.7}
.gterm cite{display:block;margin-top:9px;font-size:11px;color:var(--muted);
 font-style:normal;font-weight:300}

.boardwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.board{border-collapse:separate;border-spacing:0;font-size:12.5px;
 background:#fff;border:1px solid var(--line);border-radius:var(--r-md)}
table.board th,table.board td{padding:8px 9px;border-top:1px solid var(--line-soft)}
table.board thead th{background:var(--g-050);border-top:0;vertical-align:bottom}
table.board th.who,table.board td.who{text-align:start;min-width:150px;
 position:sticky;inset-inline-start:0;background:#fff;z-index:1}
table.board thead th.who{background:var(--g-050)}
table.board th.rot{height:130px;white-space:nowrap;width:26px;padding:4px}
table.board th.rot span{display:block;transform:rotate(180deg);writing-mode:vertical-rl;
 font-weight:500;font-size:11px;color:var(--g-700);max-height:120px;overflow:hidden}
table.board td.cell{text-align:center;font-weight:800;color:var(--g-700);
 background:#FBFCF9}
table.board td.cell.passed{background:var(--g-200);color:var(--g-900)}
table.board td.cell.tried{background:var(--amber-bg);color:var(--amber-on)}
table.board td.tot{font-weight:700;white-space:nowrap}
table.list tr.weak td{background:var(--red-bg)}

@media (max-width:680px){
 .modgrid,.glos{grid-template-columns:1fr}
 .lesson .ablk-p,fieldset.qz .opt{font-size:14px}
 table.ablk-f td.k{width:40%}
}
@media print{
 button.expl{border:none;background:none;padding:0;font-weight:700}
 button.expl:after{content:""}
 dialog.termdlg{display:none}
 fieldset.qz{break-inside:avoid}
}

/* An explain button sits INSIDE a line that is already one language, so it must
   show that language only. Without this the button prints its English and its
   Arabic name run together on one line — which is exactly the fault this system
   forbids everywhere else. */
.en button.expl .ar,.ar button.expl .en{display:none}

/* Every academy table becomes its own scrolling strip on a narrow screen.
   Nothing may push the page sideways: a therapist reads this standing up, on a
   phone, and a page that scrolls horizontally is a page they will not read. */
@media (max-width:760px){
 table.ablk-f,table.ablk-ex,table.ablk-fi,table.ablk-t,table.board{
  display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
 .lesson,.card.lesson{overflow-x:hidden}
 fieldset.qz legend{font-size:13.5px}
 .ablk-ph{padding:12px}
 dialog.termdlg .bd{padding:18px 18px 6px}
 dialog.termdlg form{padding:12px 18px 18px}
}

/* the conversation between the therapist and the physician ---------------- */
.notesbox .sub{margin-bottom:10px}
.notes{display:flex;flex-direction:column;gap:10px;margin-top:10px}
.note{border:1px solid var(--line);border-radius:var(--r-md);padding:10px 13px;
      background:var(--surface);border-inline-start:4px solid var(--g-500)}
.note.plan{border-inline-start-color:#2F6FD0;background:#F5F8FE}
.note.plan.unread{border-inline-start-color:var(--red);background:var(--red-bg)}
.note.u-urgent{border-inline-start-color:var(--red)}
.note.u-soon{border-inline-start-color:var(--amber)}
.note .nwho{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13px}
.note .nwho .when{margin-inline-start:auto;font-size:11.5px;color:var(--muted)}
/* --muted is 6.4:1 on white and 4.21:1 on the tinted ground an unread plan
   change gets, so the same token passes in one place and fails in the other.
   The ground changed; the ink has to change with it. --ink-2 is 7.32:1 there
   and still reads as secondary next to the note's own text. */
.note.plan.unread .nwho .when{color:var(--ink-2)}
.note .body{margin:6px 0 0;font-size:13.5px;line-height:1.75;white-space:pre-wrap}
.note .ackd{margin-top:8px;font-size:11.5px;color:var(--g-700)}
.note .waiting{margin-top:8px;font-size:11.5px;color:var(--amber-on)}
.note .ackform{margin-top:9px}
.pill.flag{background:var(--g-100);border-color:#9BCB5A;color:var(--g-700)}
.pill.plan{background:#E6EEFB;border-color:#2F6FD0;color:#1B4C96}
.pill.urg{background:var(--amber-bg);border-color:var(--amber);color:#6B3F00}
.notewrite{margin-top:8px}
.notewrite textarea{width:100%;font:inherit;padding:9px 11px;
      border:1px solid var(--line);border-radius:var(--r-md);background:#fff}
.notice.stop .notes{margin-top:10px}

/* the physician's list, banded by how far the patient has come ------------ */
.rulebox{margin:6px 0 12px;font-size:12.5px}
.rulebox summary{cursor:pointer;color:var(--g-700);font-weight:600}
.rulebox p{margin:8px 0 0;color:var(--muted);line-height:1.8}
.bands{display:flex;flex-direction:column;gap:18px}
.band h3{display:flex;gap:9px;align-items:center;margin:0 0 2px;font-size:15px}
.band h3 .n{background:var(--g-200);color:var(--g-900);border-radius:var(--r-pill);
      padding:1px 9px;font-size:12px;font-weight:700}
.band h3 .arn{margin-inline-start:auto;font-size:14px}
.band .why{margin:0 0 8px;font-size:11.5px;color:var(--muted);line-height:1.75}
.band.marked h3{color:var(--g-700)}
.band.marked h3 .n{background:var(--g-on);color:#fff}
.band.moderate h3{color:#6B3F00}
.band.moderate h3 .n{background:var(--amber-bg);color:#6B3F00}
.band.little h3{color:var(--red)}
.band.little h3 .n{background:var(--red-bg);color:var(--red-ink)}
.band.early h3{color:var(--muted)}
.band td.worse{color:var(--red);font-weight:700}

/* the videos attached to a device module ---------------------------------- */
.vids{display:flex;flex-direction:column;gap:12px}
.vid{border:1px solid var(--line);border-radius:var(--r-md);padding:11px 13px;
     border-inline-start:4px solid var(--g-500);background:var(--surface)}
.vid.sub{border-inline-start-color:var(--amber);background:var(--amber-bg)}
.vid .vhead{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:4px}
.vid .vhead a{font-weight:700;font-size:14px}
.vid .does{margin:7px 0 0;font-size:13px;line-height:1.75}
.vid .doesnt{margin:6px 0 0;font-size:12.5px;line-height:1.75;color:#6B3F00;
     background:var(--amber-bg);border-radius:var(--r-md);padding:7px 10px}

/* the practice room -------------------------------------------------------- */
.prlist{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.pr{border:1px solid var(--line);border-radius:var(--r-md);padding:11px 13px;
    border-inline-start:4px solid var(--line)}
.pr.passed{border-inline-start-color:var(--g-500);background:var(--g-050)}
.pr .prhead{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pr .story{margin:6px 0 9px;font-size:13px;line-height:1.75;color:var(--muted)}
.notice.ok .asked td{background:rgba(255,255,255,.6)}
table.list.asked td{font-size:12.5px;line-height:1.7}

/* accounts ---------------------------------------------------------------- */
.noname{color:var(--amber-on);font-weight:700}
tr.editrow>td{background:var(--g-050);border-top:2px solid var(--g-500)}

/* what I got wrong -------------------------------------------------------- */
.mistake{margin-top:8px;padding:8px 11px;border-radius:var(--r-md);font-size:13px;
   line-height:1.75}
.mistake.wrong{background:var(--red-bg);border:1px solid var(--red)}
.mistake.right{background:var(--g-100);border:1px solid var(--g-500)}
.mistake .why{margin-top:5px;font-size:12.5px;color:var(--muted)}
.nextstep{border:1px solid var(--g-500);background:var(--g-050);
   border-radius:var(--r-lg);padding:14px 16px;margin-bottom:16px;
   border-inline-start:5px solid var(--g)}
.nextstep .k{font-size:11.5px;color:var(--g-700);font-weight:700;
   letter-spacing:.4px;text-transform:uppercase}
.nextstep h3{margin:4px 0 6px;font-size:17px}
.nextstep p{margin:0 0 10px;font-size:13px;color:var(--muted);line-height:1.8}

/* the report: events with their decision, and open questions --------------- */
.evrow{margin-bottom:8px}
.evrow:last-child{margin-bottom:0}
.askrow{border-inline-start:3px solid var(--g-500);padding:6px 11px;margin:8px 0;
   background:var(--g-050);border-radius:var(--r-md)}
.askrow p{margin:4px 0 0;font-size:13px;line-height:1.75;white-space:pre-wrap}
.askrow.urgent{border-inline-start-color:var(--red);background:var(--red-bg)}
/* The decision block at the top of a report: what is being asked, before the
   evidence for it. Framed rather than merely first, because on a phone "first"
   lasts one scroll. */
.rep section.asks{border:1px solid var(--line);border-radius:var(--r-lg);
   padding:12px 14px;background:#fff}
.rep section.asks h2{margin-top:0}
td b.good{color:var(--g-700)}
td b.bad{color:var(--red)}
/* the session screen: the objective measure ------------------------------- */
.baseref{border:1px solid var(--line);border-radius:var(--r-md);padding:9px 12px;
   margin-bottom:12px;background:var(--g-050);font-size:13px}
.baseref .brow{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;margin-top:4px}
/* Each language takes a whole line. .en and .ar are display:block everywhere
   else, but a flex parent lays its children out in a row regardless — so this
   one row put the English and the Arabic side by side, which is the single
   thing the bilingual rule forbids, on every session screen of every patient
   who has been measured before. Sixty-six of them.
   A 100% flex-basis rather than explicit grid rows, because `body.only-ar .en`
   hides one of the two: a hidden flex item takes no line, where a hidden item
   with an assigned grid row would have left an empty one. */
.baseref .brow>.en,.baseref .brow>.ar{flex:1 1 100%;min-width:0}
.baseref .brow .v{margin-inline-start:auto;font-weight:700;color:var(--g-700)}
.mrow{border:1px solid var(--line);border-radius:var(--r-md);padding:10px 12px;
   margin-top:10px;background:var(--surface)}
.mrow .mname{font-weight:700;margin-bottom:6px}
.mrow .field{display:inline-block;margin-inline-end:14px;vertical-align:top}
.mrow .field input,.mrow .field select{font:inherit;padding:7px 9px;
   border:1px solid var(--line);border-radius:var(--r-md);max-width:220px}
.mrow .u{margin-inline-start:6px;color:var(--muted);font-size:12.5px}
.mrow .mnote{margin:8px 0 0}

/* the session: repeat the last prescription, and the patient's own words --- */
.repeatlast{display:flex;flex-wrap:wrap;gap:12px;align-items:center;
   justify-content:space-between;border:1px dashed var(--g-500);
   border-radius:var(--r-md);padding:10px 13px;margin-bottom:12px;
   background:var(--g-050)}
.repeatlast .lbl{margin:2px 0 0}
.said{border-inline-start:3px solid var(--g-500);padding:4px 12px;margin:8px 0}
.said p{margin:2px 0 0;font-size:13.5px;line-height:1.8}