/* Patient sign-up (ADR 0015). Built from the design pack of 11 Nov 2026 (boards/signup.css): the phone screen is .ph, the desktop
   shell is .dk (boards Main and ReviewDesktop). Board-only rules (the artboard, captions, tags) are left out; the phone frame's
   border and corners belong to the artboard, so on a real phone the screen fills the page. Colours are the Divia tokens
   (divia-tokens.json). Motion (boards MotionSpec, MotionSpec2): opacity and transform only, nothing loops except the sending dots,
   and reduced motion cuts everything to instant. Fonts are self-hosted (byte copies of apps/website/styles/fonts). */
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans-Variable.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Divia Nastaliq"; src: url("fonts/DiviaNastaliq-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "Divia Nastaliq"; src: url("fonts/DiviaNastaliq-Medium.woff2") format("woff2"); font-weight: 500 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("fonts/PlexSansArabic-400.woff2") format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("fonts/PlexSansArabic-500.woff2") format("woff2"); font-weight: 500; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }
@font-face { font-family: "IBM Plex Sans Arabic"; src: url("fonts/PlexSansArabic-600.woff2") format("woff2"); font-weight: 600 700; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F; }

:root{--surface:#f8f4ec;--alt:#ebe6df;--raised:#ffffff;--ink:#0e2a22;--muted:#4f5a54;--line:#d6cfc4;--bs:#66756e;--sage:#a9b8a0;--saf:#d9a35b;--safink:#7a4e14;--hint:#3b4943;
  --sans:"Instrument Sans","Segoe UI",system-ui,sans-serif;--urdu:"Divia Nastaliq","Noto Nastaliq Urdu",serif;--urdu-ui:"IBM Plex Sans Arabic","Noto Sans Arabic",system-ui,sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--surface);color:var(--ink);font-family:var(--sans)}
button,input{font-family:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
form{margin:0}

/* The phone screen */
.ph{min-height:100vh;min-height:100dvh;max-width:480px;margin:0 auto;padding:24px 20px;display:flex;flex-direction:column;gap:20px;font-size:19px;line-height:28px;color:var(--ink);background:var(--surface)}
.stage{display:flex;flex-direction:column;gap:20px;flex:1;min-width:0}
.stage>form{display:flex;flex-direction:column;gap:20px;flex:1}
.top{display:flex;flex-direction:column;gap:10px;align-items:stretch}
.top .bk{align-self:flex-start}
.pg{display:flex;flex-direction:column;gap:10px;font-size:19px;line-height:26px;color:var(--hint)}
.bar{height:12px;background:var(--raised);border:1.5px solid var(--bs);border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;width:100%;background:var(--ink);transform-origin:left center;transform:scaleX(var(--to,0));animation:grow 300ms ease-out both}
@keyframes grow{from{transform:scaleX(var(--from,var(--to,0)))}to{transform:scaleX(var(--to,0))}}
.bar i.p1{--to:0.0667}.bar i.p2{--to:0.1333}.bar i.p3{--to:0.2000}.bar i.p4{--to:0.2667}.bar i.p5{--to:0.3333}.bar i.p6{--to:0.4000}.bar i.p7{--to:0.4667}.bar i.p8{--to:0.5333}.bar i.p9{--to:0.6000}.bar i.p10{--to:0.6667}.bar i.p11{--to:0.7333}.bar i.p12{--to:0.8000}.bar i.p13{--to:0.8667}.bar i.p14{--to:0.9333}.bar i.p15{--to:1.0000}
.bar i.f0{--from:0.0000}.bar i.f1{--from:0.0667}.bar i.f2{--from:0.1333}.bar i.f3{--from:0.2000}.bar i.f4{--from:0.2667}.bar i.f5{--from:0.3333}.bar i.f6{--from:0.4000}.bar i.f7{--from:0.4667}.bar i.f8{--from:0.5333}.bar i.f9{--from:0.6000}.bar i.f10{--from:0.6667}.bar i.f11{--from:0.7333}.bar i.f12{--from:0.8000}.bar i.f13{--from:0.8667}.bar i.f14{--from:0.9333}.bar i.f15{--from:1.0000}
[dir=rtl] .bar i{transform-origin:right center}
.q{margin:0;font-size:28px;line-height:34px;font-weight:600;letter-spacing:-.02em}
.q:focus{outline:none}
.hint{margin:0;color:var(--hint)}
.lbl{display:flex;flex-direction:column;gap:8px;font-weight:600}
.in{height:56px;border:1.5px solid var(--bs);border-radius:10px;background:var(--raised);padding:0 16px;font-size:19px;font-weight:400;color:var(--ink);width:100%}
.in[aria-invalid=true]{border-color:var(--ink);border-width:3px}
.err{margin:0;font-weight:600}
.opt{display:flex;align-items:center;gap:14px;min-height:60px;padding:10px 16px;border:1.5px solid var(--bs);border-radius:10px;background:var(--raised);font-size:19px;line-height:26px;color:var(--ink);text-align:start;width:100%;cursor:pointer;transition:background-color 120ms ease-out}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt:has(input:checked){background:var(--sage);border-color:var(--ink)}
.opt:has(input:focus-visible){outline:3px solid var(--ink);outline-offset:3px}
.opts{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;border:0;min-width:0}
.mk{flex:none;width:26px;height:26px;border:2px solid var(--ink);border-radius:50%;background:var(--raised);display:block;position:relative}
.mk.sq{border-radius:6px}
.opt:has(input:checked) .mk{background:var(--ink);box-shadow:inset 0 0 0 5px var(--sage)}
.opt:has(input:checked) .mk.sq{box-shadow:none}
.mk.sq::after{content:"";position:absolute;left:7px;top:2px;width:7px;height:13px;border:solid var(--surface);border-width:0 3px 3px 0;transform:rotate(45deg) scale(0);opacity:0;transition:transform 150ms ease-out,opacity 150ms ease-out}
.opt:has(input:checked) .mk.sq::after{transform:rotate(45deg) scale(1);opacity:1}
.btn{min-height:56px;border-radius:10px;border:1.5px solid var(--ink);background:var(--ink);color:var(--surface);font-size:19px;font-weight:600;width:100%;cursor:pointer;display:flex;align-items:center;justify-content:center;text-decoration:none;padding:0 16px;text-align:center;transition:background-color 120ms ease-out,color 120ms ease-out}
.btn.sec{background:transparent;color:var(--ink)}
.btn[disabled],.btn[aria-disabled=true]{background:var(--line);border-color:var(--line);color:var(--muted);cursor:default}
.lnk{background:none;border:0;font-size:19px;color:var(--ink);text-decoration:underline;text-underline-offset:4px;padding:12px 0;align-self:center;min-height:48px;cursor:pointer}
.lnk.st{align-self:flex-start}
.bk{align-self:flex-start;min-height:48px;padding:0 20px;border:1.5px solid var(--ink);border-radius:10px;background:transparent;color:var(--ink);font-size:19px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;text-decoration:none}
.sp{flex:1}
.acts{display:flex;flex-direction:column;gap:12px}
.note{background:var(--raised);border:1px solid var(--line);border-radius:10px;padding:14px 16px;color:var(--ink);margin:0}
.code{direction:ltr;font-size:44px;line-height:52px;font-weight:600;letter-spacing:.14em;text-align:center;background:var(--raised);border:1.5px dashed var(--bs);border-radius:10px;padding:18px 8px;margin:0}
.pre{direction:ltr;display:flex;gap:8px}
.pre .cc{flex:none;height:56px;min-width:76px;border:1.5px solid var(--bs);border-radius:10px;background:var(--alt);display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:600}
dl{margin:0}
.rv{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:10px 0;border-bottom:1px solid var(--line);align-items:center}
.rv dt{color:var(--muted);font-size:19px;grid-column:1}
.rv dd{margin:0;font-weight:600;grid-column:1;overflow-wrap:anywhere}
.rv .lnk{grid-column:2;grid-row:1 / span 2;align-self:center}
.mid{display:flex;flex-direction:column;gap:20px;justify-content:center;flex:1}
.dots{display:flex;gap:10px;justify-content:center;padding:20px 0}
.dots i{width:14px;height:14px;border-radius:50%;background:var(--ink);opacity:.35}
.sending .dots i{animation:dot 900ms ease-in-out infinite}
.sending .dots i:nth-child(2){animation-delay:300ms}
.sending .dots i:nth-child(3){animation-delay:600ms}
@keyframes dot{0%,100%{opacity:.35}50%{opacity:1}}
.dots-static{display:none;text-align:center;font-weight:600}
.center{text-align:center}
.resume{word-break:break-all}

/* Urdu script: right to left; Nastaliq for reading, IBM Plex Sans Arabic for buttons and labels; numbers stay left to right */
.ur{direction:rtl;font-family:var(--urdu);line-height:2.2}
.ur .pg,.ur .btn,.ur .lbl,.ur .opt,.ur .lnk,.ur .bk,.ur .rv dt,.ur .cc,.ur .in{font-family:var(--urdu-ui);line-height:1.7}
.ur .q{font-size:30px;line-height:2.1;letter-spacing:0;font-weight:500}
.ur .hint,.ur .note,.ur .rv dd{line-height:2.1}
.ur bdi,.ur .num{direction:ltr;unicode-bidi:isolate}
[lang=ur].alt-script{font-family:var(--urdu);line-height:2.1}

/* Desktop (boards Main and ReviewDesktop): the step list on the left, the question on the right */
.dk-rail{display:none}
.only-desk{display:none}
@media (min-width:1024px){
  body{background:var(--surface)}
  .dk{display:flex;min-height:100vh;max-width:1440px;margin:0 auto;font-size:19px;line-height:28px}
  .dk-rail{display:flex;width:340px;flex:none;background:var(--alt);padding:40px 32px;flex-direction:column;gap:28px}
  .brand{margin:0;font-size:24px;font-weight:600;letter-spacing:-.02em}
  .steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;counter-reset:s}
  .steps li{counter-increment:s;display:flex;gap:12px;align-items:center;min-height:36px;color:var(--muted)}
  .steps li::before{content:counter(s);flex:none;width:30px;height:30px;border-radius:50%;border:1.5px solid var(--bs);display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:600;background:var(--raised);color:var(--ink);transition:background-color 120ms ease-out,color 120ms ease-out}
  .steps li.cur{color:var(--ink);font-weight:600}
  .steps li.cur::before{background:var(--saf);border-color:var(--ink)}
  .steps li.done::before{content:"\2713";background:var(--ink);color:var(--surface);border-color:var(--ink)}
  .dk-rail p.sm{margin:0;font-size:17px;line-height:25px;color:var(--muted)}
  .dk .ph{max-width:none;margin:0;flex:1;padding:48px 64px;gap:28px;min-width:0}
  .dk .stage,.dk .stage>form{gap:28px}
  .dk .q{font-size:44px;line-height:48px;font-weight:500;letter-spacing:-.03em;max-width:700px}
  .dk.ur .q{font-size:44px;line-height:2}
  .dk .pg{max-width:520px}
  .dk .in,.dk .opts,.dk .pre{max-width:460px}
  .dk dl,.dk .note{max-width:640px}
  .dk .sp{display:none}
  .dk .acts{flex-direction:row;flex-wrap:wrap;align-items:center;gap:16px}
  .dk .btn{width:auto;min-width:180px;padding:0 28px}
  .dk .lnk{align-self:center}
  .only-desk{display:block}
  .only-phone{display:none}
}

/* Motion (MotionSpec): a step comes in from 16px toward the reader's forward direction, 200 ms; Back comes from the other side;
   right to left mirrors both. Results and states fade in. The emergency screen has no motion (.still). */
@keyframes in-fwd{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes in-back{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.enter-fwd .stage{animation:in-fwd 200ms ease-out both}
.enter-back .stage{animation:in-back 200ms ease-out both}
[dir=rtl].enter-fwd .stage,[dir=rtl] .enter-fwd .stage{animation-name:in-back}
[dir=rtl].enter-back .stage,[dir=rtl] .enter-back .stage{animation-name:in-fwd}
.enter-fade .stage{animation:fade 200ms ease-out both}
.err-fade{animation:fade 150ms ease-out both}
.still,.still *{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .sending .dots{display:none}
  .sending .dots-static{display:block}
}

/* Consents: the button stays off until the box is ticked (board Consents). Without script the server refuses an unticked form. */
form:has(.agree-box:not(:checked)) .agree-go{background:var(--line);border-color:var(--line);color:var(--muted);cursor:default}