/* ===========================================================================
   Pearl Women's Hospital — Online Consultation module
   Shipped from 06-website/design/online-consultation/project/oc.css with the
   canvas-only chrome (.sheet .cap .bnote .cells .c2 .c3 .c4 .ph .fr) left out.

   Every token below is copied verbatim from 07-build/assets/css/pearl.css.
   Nothing here was invented. Pearl's brand is light-only by instruction.

   Loaded AFTER /assets/css/pearl.css on every page of the module. The last
   two sections of this file are not on the canvas: "additions" are the pieces
   a drawing does not need and a working page does (a dialog has to sit over
   something), and "living beside pearl.css" undoes the few pearl.css rules
   that would otherwise leak into these components. Neither adds a colour or
   a size outside the token set.
   =========================================================================== */
:root{
  --pearl-maroon:#903848; --pearl-maroon-dark:#7A2F3D;
  --pearl-blue:#1860A8; --pearl-blue-dark:#124A82;
  --pearl-cream:#F8F0E8; --pearl-blush:#F0C8C0;
  --pearl-shell:#584838; --pearl-shell-line:#6F5C48;
  --ink:#2B2320; --ink-muted:#6B5D57; --ink-faint:#A8968C;
  --line:#E4DAD4; --line-strong:#C7B6A6;
  --surface:#FFFFFF; --surface-2:#F8F0E8; --surface-3:#EAE0D6;
  --success:#1E7A5A; --success-bg:#E4F2ED;
  --warning:#9A6410; --warning-bg:#FBF1DF;
  --danger:#B3261E;  --danger-bg:#FBEAE8;
  --info-bg:#E8F0F9;
  --on-dark:#F8F0E8; --on-dark-faint:#C7B6A6;
  --font-display:'Playfair Display',Georgia,'Times New Roman',serif;
  --font-body:Inter,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --r-card:4px; --r-chip:2px;
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--pearl-cream);color:var(--ink);font-family:var(--font-body);
  font-size:15px;line-height:24px;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:600;margin:0;text-wrap:balance;color:var(--ink)}
p{margin:0}
a{color:var(--pearl-blue);text-decoration:none}
a:hover{color:var(--pearl-blue-dark);text-decoration:underline}
:focus-visible{outline:2px solid var(--pearl-maroon);outline-offset:2px;border-radius:var(--r-chip)}
svg{display:block;flex-shrink:0}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--ink-muted)}
.small{font-size:13px;line-height:20px}
.micro{font-size:12px;line-height:18px}
.label{font-size:12px;line-height:18px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.eyebrow{font-size:12px;line-height:18px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--pearl-maroon)}
.h1{font-size:39px;line-height:48px}
.h2{font-size:31px;line-height:40px}
.h3{font-size:25px;line-height:32px}
.h4{font-family:var(--font-body);font-size:16px;line-height:24px;font-weight:700}
.oc .wrap{max-width:1200px;margin:0 auto;padding:0 var(--s6)}
.stack{display:flex;flex-direction:column}
.rowx{display:flex;align-items:center;flex-wrap:wrap}
.g2{gap:var(--s2)} .g3{gap:var(--s3)} .g4{gap:var(--s4)} .g5{gap:var(--s5)} .g6{gap:var(--s6)}
.oc .grow{flex:1 1 0;min-width:0}

/* ---------- site shell: token band + header, as on every public page ---- */
.ubar{background:var(--pearl-shell);color:var(--on-dark);font-size:13px;line-height:20px}
.ubar .wrap{display:flex;gap:var(--s4);align-items:center;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.ubar a{color:var(--on-dark);font-weight:600;text-decoration:underline}
.ubar .sep{color:var(--on-dark)}
.ubar b{font-variant-numeric:tabular-nums}
.mast{background:var(--surface);border-bottom:1px solid var(--line)}
.mast .wrap{display:flex;align-items:center;gap:var(--s5);padding-top:var(--s3);padding-bottom:var(--s3);flex-wrap:wrap}
.oc .logo{font-family:var(--font-display);font-weight:700;font-size:19px;line-height:24px;color:var(--pearl-maroon)}
.oc .logo span{display:block;font-family:var(--font-body);font-size:10px;line-height:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-muted)}
.mast nav{display:flex;gap:var(--s4);flex-wrap:wrap;font-size:13px;margin-left:auto}
.mast nav a{color:var(--ink);padding:10px 0}
.mast nav a[aria-current]{color:var(--pearl-maroon);font-weight:600;box-shadow:inset 0 -2px 0 var(--pearl-maroon)}
.mini{background:var(--surface);border-bottom:1px solid var(--line);padding:var(--s3) var(--s4);display:flex;align-items:center;gap:var(--s3)}
.mini .menu{margin-left:auto;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid var(--line-strong);border-radius:var(--r-card);color:var(--ink);font:inherit;font-size:13px;font-weight:600;padding:0 var(--s3)}
.foot{background:var(--pearl-shell);color:var(--on-dark);padding:var(--s6) 0;font-size:13px;line-height:21px}
.foot dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5);margin:0}
.foot dt{font-size:12px;line-height:18px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark)}
.foot dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.foot dd small{display:block;font-weight:400;font-size:12px;line-height:18px;color:var(--on-dark)}

/* ---------- buttons ----------------------------------------------------- */
.oc .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:44px;padding:0 var(--s5);
  border-radius:var(--r-card);font-family:inherit;font-size:15px;line-height:22px;font-weight:600;text-decoration:none;
  border:1px solid transparent;cursor:pointer;white-space:nowrap}
.oc .btn-primary{background:var(--pearl-maroon);color:var(--surface)}
.oc .btn-primary:hover{background:var(--pearl-maroon-dark);color:var(--surface);text-decoration:none}
.oc .btn-ghost{background:var(--surface);color:var(--pearl-maroon);border-color:var(--line-strong)}
.oc .btn-ghost:hover{border-color:var(--pearl-maroon);color:var(--pearl-maroon);text-decoration:none}
.oc .btn-danger{background:var(--surface);color:var(--danger);border-color:var(--danger)}
.oc .btn-block{width:100%}
.oc .btn-sm{min-height:36px;padding:0 var(--s3);font-size:13px;line-height:20px}
.oc .btn[disabled]{background:var(--surface-3);color:var(--ink-muted);border-color:var(--surface-3);cursor:not-allowed}
.oc .btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.linkbtn{background:none;border:none;padding:0;font:inherit;color:var(--pearl-blue);text-decoration:underline;cursor:pointer;min-height:24px}

/* ---------- messages ---------------------------------------------------- */
.msg{display:flex;gap:var(--s3);padding:var(--s4);border-radius:var(--r-card);font-size:14px;line-height:22px;background:var(--pearl-cream);color:var(--ink)}
.msg-warn{background:var(--warning-bg);box-shadow:inset 3px 0 0 var(--warning)}
.msg-info{background:var(--info-bg);box-shadow:inset 3px 0 0 var(--pearl-blue)}
.msg-ok{background:var(--success-bg);box-shadow:inset 3px 0 0 var(--success)}
.msg-bad{background:var(--danger-bg);box-shadow:inset 3px 0 0 var(--danger)}
.msg p + p{margin-top:var(--s2)}
.msg b{font-weight:700}
.msg svg{margin-top:2px}

/* ---------- cards, lists ------------------------------------------------ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s5)}
.card-tight{padding:var(--s4)}
.kv{margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);font-size:14px;line-height:22px}
.kv dt{color:var(--ink-muted)}
.kv dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.steps{list-style:none;margin:0;padding:0;counter-reset:st}
.steps li{display:grid;grid-template-columns:32px 1fr;gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--line);counter-increment:st}
.steps li:first-child{border-top:none;padding-top:0}
.steps li::before{content:counter(st);width:28px;height:28px;border-radius:50%;background:var(--pearl-cream);color:var(--pearl-maroon);
  font-weight:700;font-size:13px;line-height:28px;text-align:center;font-variant-numeric:tabular-nums}
.steps b{display:block}
.steps span{font-size:14px;line-height:22px;color:var(--ink-muted)}

/* ---------- forms ------------------------------------------------------- */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4)}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f.wide{grid-column:1 / -1}
.f label,.f .lab,fieldset.f legend{font-size:14px;line-height:22px;font-weight:600;color:var(--ink)}
fieldset.f legend{padding:0}
fieldset.f{border:none;margin:0;padding:0}
.f .hint{font-size:12px;line-height:18px;color:var(--ink-muted);font-weight:400}
.f input[type=text],.f input[type=tel],.f input[type=password],.f input[type=search],.f input[type=number],.f select,.f textarea{min-height:44px;padding:0 var(--s3);
  font:inherit;font-size:15px;color:var(--ink);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-card);width:100%}
.f textarea{min-height:76px;padding:var(--s2) var(--s3);line-height:24px;resize:vertical}
.f input::placeholder,.f textarea::placeholder{color:var(--ink-faint)}
.f input:focus-visible,.f select:focus-visible,.f textarea:focus-visible{outline:2px solid var(--ink);outline-offset:1px;border-color:var(--pearl-maroon)}
.f.err input,.f.err select{border-color:var(--danger);border-width:2px}
.errmsg{display:flex;gap:6px;font-size:13px;line-height:20px;color:var(--danger);font-weight:600}
.phonepair{display:grid;grid-template-columns:112px 1fr;gap:var(--s2)}
.opts{display:grid;gap:var(--s2)}
.opts-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.opt{display:flex;gap:var(--s3);align-items:flex-start;min-height:56px;padding:var(--s3) var(--s4);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r-card);cursor:pointer;font-weight:400}
.opt:hover{border-color:var(--pearl-maroon)}
.opt input{width:20px;height:20px;margin:2px 0 0;flex-shrink:0;accent-color:var(--pearl-maroon)}
.opt b{display:block;font-size:15px;line-height:22px;font-weight:600}
.opt span span{display:block;font-size:13px;line-height:20px;color:var(--ink-muted)}
.opt:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.opt.on{border:2px solid var(--pearl-maroon);padding:11px 15px;background:var(--pearl-cream)}
.opt.off{background:var(--surface-2);border-style:dashed;cursor:not-allowed}
.opt.off b{color:var(--ink-muted)}
.consent{display:flex;gap:var(--s3);align-items:flex-start;background:var(--pearl-cream);border-radius:var(--r-card);padding:var(--s4)}
.consent input{width:22px;height:22px;margin:1px 0 0;flex-shrink:0;accent-color:var(--pearl-maroon)}
.consent label{font-size:13px;line-height:21px;font-weight:400}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--s2)}
.slot{min-height:56px;padding:var(--s2) var(--s3);background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-card);
  font-family:inherit;text-align:left;cursor:pointer;color:var(--ink)}
.slot b{display:block;font-size:16px;line-height:22px;font-weight:700;font-variant-numeric:tabular-nums}
.slot span{display:block;font-size:12px;line-height:18px;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.slot.on{border:2px solid var(--pearl-maroon);background:var(--pearl-cream);padding:7px 11px}
.slot[disabled]{background:var(--surface-2);border-style:dashed;cursor:not-allowed}
.slot[disabled] b{color:var(--ink-muted);font-weight:500;text-decoration:line-through}

/* ---------- status chips: always a word, never colour alone ------------- */
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-chip);padding:2px var(--s2);font-size:12px;line-height:18px;font-weight:700;white-space:nowrap}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;flex-shrink:0}
.chip-us{background:var(--warning-bg);color:var(--ink)}
.chip-us::before{background:var(--warning)}
.chip-them{background:var(--surface-3);color:var(--ink-muted)}
.chip-ok{background:var(--success-bg);color:var(--success)}
.chip-bad{background:var(--danger-bg);color:var(--danger)}
.chip-info{background:var(--info-bg);color:var(--pearl-blue)}
.chip-them::before{background:none;border:2px solid currentColor}
.chip-bad::before{border-radius:0}
.tag{display:inline-flex;align-items:center;gap:var(--s1);background:var(--pearl-cream);border-radius:var(--r-chip);padding:2px var(--s2);
  font-size:11px;line-height:16px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);white-space:nowrap}

/* ---------- the patient's own page -------------------------------------- */
.me{padding:var(--s5) var(--s4) var(--s6);display:flex;flex-direction:column;gap:var(--s4)}
.me h1{font-size:25px;line-height:32px;overflow-wrap:anywhere}
.now{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--pearl-maroon);border-radius:var(--r-card);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.now.yours{border-top-color:var(--warning)}
.now.good{border-top-color:var(--success)}
.now.bad{border-top-color:var(--danger)}
.now h2{font-size:21px;line-height:28px}
.now p{font-size:14px;line-height:22px}
.whose{font-size:12px;line-height:18px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted)}
.yours .whose{color:var(--warning)}
.good .whose{color:var(--success)}
.bad .whose{color:var(--danger)}
.big,.now p.big{font-size:25px;line-height:32px;font-weight:700;font-variant-numeric:tabular-nums}
.prog{list-style:none;margin:0;padding:0}
.prog li{display:grid;grid-template-columns:20px 1fr;gap:var(--s3);padding:10px 0;border-top:1px solid var(--line);font-size:14px;line-height:22px}
.prog li:first-child{border-top:none}
.prog li::before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid var(--line-strong);background:var(--surface);margin-top:4px}
.prog .done::before{background:var(--success);border-color:var(--success)}
.prog .at::before{background:var(--pearl-maroon);border-color:var(--pearl-maroon);box-shadow:0 0 0 3px var(--pearl-blush)}
.prog .at{font-weight:700}
.prog .todo{color:var(--ink-muted)}
.prog small{display:block;font-size:12px;line-height:18px;font-weight:400;color:var(--ink-muted)}
.skel{border-radius:var(--r-card);background:linear-gradient(90deg,var(--surface-2) 0%,var(--surface-3) 50%,var(--surface-2) 100%);border:1px solid var(--line)}

/* ---------- desk --------------------------------------------------------- */
.desk{padding:var(--s5) var(--s5) var(--s7);max-width:1440px;margin:0 auto}
.desk-top{display:flex;align-items:baseline;gap:var(--s4);flex-wrap:wrap;margin-bottom:var(--s4)}
.desk-top h1{font-size:31px;line-height:40px}
.tabs{display:flex;gap:var(--s1);flex-wrap:wrap;border-bottom:1px solid var(--line-strong)}
.tab{min-height:44px;padding:0 var(--s4);background:none;border:none;border-bottom:3px solid transparent;font:inherit;font-size:14px;font-weight:600;color:var(--ink-muted);cursor:pointer;display:inline-flex;align-items:center;gap:var(--s2)}
.tab[aria-selected=true]{color:var(--pearl-maroon);border-bottom-color:var(--pearl-maroon)}
.tab .n{font-variant-numeric:tabular-nums;font-size:12px;line-height:18px;background:var(--surface-3);color:var(--ink);border-radius:var(--r-chip);padding:0 6px}
.tools{display:flex;gap:var(--s3);align-items:flex-end;flex-wrap:wrap;margin:var(--s4) 0}
.tools .f{flex:0 1 200px}
.tools .f.s{flex:1 1 280px}
.tools .f label{font-size:12px;line-height:18px}
.tools .f input,.tools .f select{min-height:36px;font-size:14px}
.tick{display:inline-flex;align-items:center;gap:var(--s2);min-height:44px;font-size:14px;line-height:22px;cursor:pointer}
.tick input{width:20px;height:20px;margin:0;flex-shrink:0;accent-color:var(--pearl-maroon)}
.stack > *{min-width:0}
.tw{position:relative;max-width:100%;min-width:0;overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card)}
.q{width:100%;border-collapse:collapse;font-size:14px;line-height:21px}
.q th{text-align:left;background:var(--pearl-cream);font-size:12px;line-height:18px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-muted);
  padding:var(--s2) var(--s3);border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0}
.q td{padding:var(--s2) var(--s3);border-bottom:1px solid var(--line);vertical-align:top}
.q tr:last-child td{border-bottom:none}
.q tr.us td:first-child{box-shadow:inset 3px 0 0 var(--warning)}
.q tr.late td:first-child{box-shadow:inset 3px 0 0 var(--danger)}
.q tr.sel td{background:var(--pearl-cream)}
.q .who{max-width:196px}
.q .who b,.q .two b{display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q .two .chip{margin-bottom:2px}
.q .who span,.q .two > span:not(.chip){display:block;font-size:12px;line-height:18px;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.q .two b{font-variant-numeric:tabular-nums}
.q .age{font-variant-numeric:tabular-nums;color:var(--ink-muted);white-space:nowrap}
.q .age.bad{color:var(--danger);font-weight:700}
.q .r{text-align:right;white-space:nowrap}
.pager{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:var(--s3);font-size:13px;line-height:20px;color:var(--ink-muted)}
.side{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s4)}
.side h2{font-size:21px;line-height:28px;overflow-wrap:anywhere}
.logline{font-size:13px;line-height:20px;color:var(--ink-muted);padding:2px 0;font-variant-numeric:tabular-nums}
.modal{background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-card);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s4)}
.modal h3{font-size:21px;line-height:28px}
.modal .acts{display:flex;gap:var(--s3);flex-wrap:wrap;justify-content:flex-end}
.wa{background:var(--pearl-cream);border-radius:var(--r-card);padding:var(--s3) var(--s4);font-size:14px;line-height:22px;white-space:pre-line}
.dcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s3) var(--s4);display:flex;flex-direction:column;gap:var(--s2)}

@media (max-width:760px){
  .oc .wrap{padding:0 var(--s4)}
  .grid2,.opts-3,.foot dl{grid-template-columns:minmax(0,1fr)}
  .mast nav{display:none}
  .h1{font-size:31px;line-height:40px}
  .h2{font-size:25px;line-height:32px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ===========================================================================
   ADDITIONS — not on the canvas, needed by a page that runs.
   Tokens only. Nothing here changes how a drawn component looks.
   =========================================================================== */

/* The hidden attribute must win over the display values set above. */
[hidden]{display:none!important}

/* Text for screen readers only. The canvas writes this out inline each time. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* The three-across grid of Main.dc.html. The canvas borrows its own layout
   class (.cells .c3) for it; this is the same grid under a product name. */
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6) var(--s5);align-items:start}

/* The hero of the request page: 48/56 at 1440, the .h1 scale below 760. */
.hero-h{font-weight:700;font-size:48px;line-height:56px;max-width:22ch;margin-bottom:var(--s4)}
.hero-p{font-size:20px;line-height:32px;max-width:62ch}

/* Rules.dc.html: the patient's page and the consultant's list are one 720px
   column, centred, at 1024 and 1440; full width with 16px gutters at 390. */
.col720{max-width:720px;margin:0 auto}
.mini .back{margin-left:auto;font-size:13px;line-height:20px;min-height:44px;display:inline-flex;align-items:center}

/* Links and submit buttons standing where the canvas drew plain buttons. A
   day or a time is a link, so choosing one works with JavaScript off. */
a.slot{display:block;text-decoration:none}
a.slot:hover{border-color:var(--pearl-maroon);text-decoration:none}
a.tab{text-decoration:none}
a.tab:hover{color:var(--pearl-maroon);text-decoration:none}
.opt input[type=checkbox]{width:20px;height:20px}
.f input[readonly]{background:var(--surface-2)}
.f.err textarea{border-color:var(--danger);border-width:2px}
.consent.err{box-shadow:inset 0 0 0 2px var(--danger)}
.inline{display:inline}

/* A dialog over the desk. 560px at 1024 and 1440; a full-screen sheet with its
   actions fixed at the bottom at 390. The scrim is ink at half strength. */
.scrim{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--ink);opacity:.5;z-index:20}
.dialog{position:fixed;top:0;right:0;bottom:0;left:0;z-index:21;display:flex;align-items:flex-start;justify-content:center;
  padding:var(--s7) var(--s4);overflow-y:auto}
.dialog .modal{width:560px;max-width:100%}

/* The settings screen: section list at 200px beside the cards. */
.setnav{flex:1 1 200px;min-width:0;max-width:240px;display:flex;flex-direction:column}
.setnav a{min-height:44px;display:flex;align-items:center;padding:0 var(--s3);color:var(--ink)}
.setnav a[aria-current]{font-weight:600;color:var(--pearl-maroon);box-shadow:inset 3px 0 0 var(--pearl-maroon)}
.setmenu{display:none}
.sel-sm{min-height:36px;font:inherit;font-size:14px;border:1px solid var(--line-strong);border-radius:var(--r-card);background:var(--surface);color:var(--ink);padding:0 var(--s2)}

/* The desk's filters sit behind one button at 390 (see the media query). */
.oc .filt-btn{display:none}
.tools-more{display:contents}

@media (min-width:761px){
  .me .btn,.col720 .dcard .btn{align-self:flex-start}
  .me form.stack .btn{align-self:flex-start}
}

/* 1024: the record opens over the right-hand side of the table. */
@media (max-width:1200px){
  .side.over{position:fixed;top:0;right:0;bottom:0;width:380px;max-width:100%;z-index:10;overflow-y:auto;
    border-radius:0;border-top:none;border-right:none;border-bottom:none;border-left:1px solid var(--line-strong)}
}
@media (max-width:1100px){
  .cols3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .cols3{grid-template-columns:minmax(0,1fr)}
  .hero-h{font-size:31px;line-height:40px;margin-bottom:var(--s3)}
  .hero-p{font-size:17px;line-height:28px}
  .desk{padding:var(--s4)}
  .desk-top h1{font-size:21px;line-height:28px}

  /* One card per patient, the same facts in the same order as the table. */
  .tw.cards{background:none;border:none;overflow:visible}
  .cards .q,.cards .q tbody{display:block}
  .cards .q thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .cards .q tr{display:grid;grid-template-columns:1fr auto;gap:var(--s2);background:var(--surface);border:1px solid var(--line);
    border-radius:var(--r-card);padding:var(--s3) var(--s4);margin-bottom:var(--s3)}
  .cards .q tr.us{box-shadow:inset 3px 0 0 var(--warning)}
  .cards .q tr.late{box-shadow:inset 3px 0 0 var(--danger)}
  .cards .q td{display:block;padding:0;border:none;grid-column:1 / -1;box-shadow:none!important;background:none!important}
  .cards .q td.who{grid-column:1;grid-row:1;max-width:none}
  .cards .q td.age{grid-column:2;grid-row:1;font-size:13px;line-height:20px}
  .cards .q .who b{white-space:normal;overflow-wrap:anywhere}
  .cards .q td.r{text-align:left}
  .cards .q td.r .btn{width:100%;min-height:44px;font-size:15px;line-height:22px}
  .cards .q td:empty{display:none}

  .tabs{flex-wrap:nowrap;overflow-x:auto}
  .tab{white-space:nowrap}
  .oc .filt-btn{display:inline-flex}
  .tools-more{display:none}
  .tools-more:target{display:contents}
  .tools .f,.tools .f.s{flex:1 1 200px}
  .tools .f input,.tools .f select{min-height:44px}
  .desk .btn-sm{min-height:44px}

  .dialog{padding:0;align-items:stretch}
  .dialog .modal{width:100%;min-height:100%;border:none;border-radius:0;padding:var(--s4) var(--s4) var(--s9)}
  .dialog .modal .acts{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line-strong);
    padding:var(--s3) var(--s4);z-index:22}
  .dialog .modal .acts .btn{flex:1 1 0}
  .side.over{width:100%;border-left:none}

  .js .setnav{display:none}
  .js .setmenu{display:flex}
}

/* The receipt is the one page of the module that is printed. */
@media print{
  body{background:var(--surface)}
  .noprint{display:none!important}
  .card{border:none;padding:0}
}

/* ===========================================================================
   LIVING BESIDE pearl.css — undo the few site rules that would leak in.
   Buttons, .wrap, .grow and .logo are scoped to .oc, so the site's own header
   and footer (read in from /_shell/ on the public page) keep the site's rules.
   pearl.css gives .btn a fixed height, .chip a border and link colour, .logo
   the width of the image logo, and disabled buttons pointer-events:none.
   =========================================================================== */
.oc .btn{height:auto}
.chip{border:0;color:var(--ink)}
.chip-them{color:var(--ink-muted)} .chip-ok{color:var(--success)} .chip-bad{color:var(--danger)} .chip-info{color:var(--pearl-blue)}
.chip:hover{text-decoration:none}
.oc .logo{width:auto}
.oc a.logo:hover{text-decoration:none;color:var(--pearl-maroon)}
.consent{min-height:0;cursor:default}
.consent input[type="checkbox"]{margin:1px 0 0}
.q thead th{padding:var(--s2) var(--s3);font-weight:700;line-height:18px;letter-spacing:.08em}

/* The consultants' registration band on the public page. Light, so it does
   not run into the site's own footer, which is the same brown. */
.foot-light{background:var(--surface);color:var(--ink);border-top:1px solid var(--line)}
.foot-light dt,.foot-light dd small{color:var(--ink-muted)}

/* The site's own header and footer keep the site's own text rhythm. */
.utility,.masthead,.footer,.action-bar{font-size:16px;line-height:26px}