/* ==========================================================================
   Swati Clinic — design system
   --------------------------------------------------------------------------
   One restrained accent, one geometry, one type scale. Every measurement here
   is chosen for a screen somebody looks at forty times a day: 14px body, 13px
   in tables, 32px rows, 4px radii. Status colour appears only where it is
   operational (appointment outcome, letter stage, priority, transcript) and
   never carries meaning on its own — every state keeps its word, because
   roughly one man in twelve has some degree of colour blindness.

   Stage 7 (18 Sept 2026, STAGE7-DESIGN-BRIEF.md section 6): colour is split
   by MEANING, not hue. Alert (red) is reserved for clinical safety -- an
   allergy, a safeguarding line. Attention (deep orange) is work waiting for a
   person -- letters to type or sign, amendments. Danger is failure and armed
   deletes. A red that means "a letter is waiting" teaches the eye to discount
   the red that means "anaphylaxis". Every text/ground pair below is checked
   at >= 4.5:1; --faint is for rules, dots and icons only, --faint-text for
   any tertiary text.
   ======================================================================== */

:root{
  /* ground and ink */
  --bg:#f3f5f6;
  --surface:#ffffff;
  --surface-2:#f8fafb;
  --surface-3:#eef2f4;
  --ink:#16212b;
  --ink-2:#33434f;
  --muted:#5c6b7a;       /* secondary text, >= 4.7:1 on every neutral ground */
  --faint-text:#61707d;  /* tertiary TEXT, >= 4.5:1 on every neutral ground */
  --faint:#8797a4;       /* non-text only: rules, dots, icons (3:1 is enough) */
  --line:#e1e7eb;
  --line-2:#edf1f4;
  --line-strong:#c9d4db;

  /* the single accent */
  --accent:#12506b;
  --accent-hi:#17637f;
  --accent-soft:#e8f0f4;
  --accent-line:#a7c4d2;

  /* operational status */
  --ok:#1c6b3e;      --ok-soft:#e4f0e8;    --ok-line:#bcd9c7;
  --warn:#8a5a00;    --warn-soft:#fbf1dd;  --warn-line:#ecd6a8;
  --err:#a3231d;     --err-soft:#fbe8e6;   --err-line:#eec4c0;
  --info:#1f5d7a;    --info-soft:#e7eff5;  --info-line:#b6cedc;
  --neutral:#4a5b68; --neutral-soft:#eceff2;

  /* semantic roles (Stage 7). --err stays as an alias so no rule breaks. */
  --alert:#a3231d;   --alert-soft:#fbe8e6; --alert-line:#eec4c0;   /* clinical safety only */
  --danger:#a3231d;  --danger-soft:#fbe8e6;--danger-line:#eec4c0;  /* failure, armed delete */
  --attn:#9a3d0a;    --attn-soft:#fdefe4;  --attn-line:#f0c9a9;    /* work waiting on a person */

  /* geometry */
  --r-sm:4px; --r:6px; --r-lg:10px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px;
  --h-xs:24px; --h-sm:28px; --h-md:32px; --h-lg:40px; --h-touch:44px;
  --sidebar:232px; --sidebar-min:56px; --topbar:48px;
  /* Flat by default: panels no longer carry a shadow. Only things that float
     above the page (dialogs, popovers, toasts) get --shadow-float. */
  --shadow-1:none;
  --shadow-2:0 10px 30px rgba(16,36,48,.16);
  --shadow-float:var(--shadow-2);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* type scale. Sentence case throughout: 11px letter-spaced capitals are
     the least legible style there is, and they were on the most-read text. */
  --t-display:1.5rem;  /* 24px                               */
  --t-name:1.25rem;    /* 20px patient name                  */
  --t-title:1.125rem;  /* 18px page title                    */
  --t-head:.9375rem;   /* 15px panel and section heading     */
  --t-read:1.0625rem;  /* 17px clinical reading (21 Sept 2026: was 16) */
  --t-body:.9375rem;   /* 15px body (21 Sept 2026: was 14)   */
  --t-tbl:.8125rem;    /* 13px table content                 */
  --t-meta:.75rem;     /* 12px metadata, table headers       */
  --t-micro:.6875rem;  /* 11px keyboard hints and counts only */
}
/* A finger, not a mouse: the iPad and the phone. Controls grow to 40/44px and
   the top bar to 52px; desktop density is untouched. */
@media (pointer:coarse){
  :root{--topbar:52px}
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--t-body)/1.5 var(--font);
     -webkit-font-smoothing:antialiased}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:1px;border-radius:2px}
::placeholder{color:var(--faint-text);opacity:1}

h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.005em}
h1{font-size:var(--t-title);line-height:1.25}
h2{font-size:var(--t-head)}
h3{font-size:var(--t-body)}
h4{font-size:var(--t-tbl);font-weight:600;color:var(--ink-2);letter-spacing:0}
p{margin:0 0 .5rem}
p:last-child{margin-bottom:0}
.muted{color:var(--muted);font-size:var(--t-meta)}
.num,.age,.rec-clock,td.num{font-variant-numeric:tabular-nums}
.err{color:var(--err);font-size:var(--t-meta);margin-top:.45rem;min-height:1em}

/* ------------------------------------------------------------- layout -- */

body.signed-in{padding-left:var(--sidebar);padding-top:var(--topbar);
     transition:padding-left .12s ease}
body.signed-in.nav-min{padding-left:var(--sidebar-min)}
main{padding:1.1rem 1.25rem 4rem;max-width:1680px}
body.login-mode #sidebar,body.login-mode #topbar{display:none}
body.login-mode{padding:0;background:var(--surface-2)}
body.login-mode main{padding:0;max-width:none}
@media (prefers-reduced-motion:reduce){body.signed-in{transition:none}}

/* ------------------------------------------------------------ sidebar -- */

/* Dark navy again (18 Sept 2026, Pravin, after seeing the light one on demo):
   production's colours on the Stage 7 layout. Muted text lifted so every
   pair clears 4.5:1 on #0f2430 (the old caps and version line did not). */
#sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);z-index:120;
     background:#0f2430;color:#c7d7e0;display:flex;flex-direction:column;
     border-right:1px solid #0a1a23;transition:width .12s ease}
body.nav-min #sidebar{width:var(--sidebar-min)}
.brand{display:flex;align-items:center;gap:.55rem;height:var(--topbar);flex:none;
     padding:0 .7rem;border-bottom:1px solid #16323f;overflow:hidden;
     padding-top:max(0px,env(safe-area-inset-top))}
.brand-mark{width:26px;height:26px;flex:none;border-radius:var(--r);display:grid;
     place-items:center;background:#1c4b61;color:#e8f2f6;font-size:.7rem;font-weight:700;
     letter-spacing:.02em}
.brand-text{min-width:0}
.brand-name{display:block;font-size:var(--t-meta);font-weight:600;color:#fff;
     white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.brand-sub{display:block;font-size:var(--t-micro);color:#8fa9b7;white-space:nowrap;line-height:1.2}
body.nav-min .brand-text{display:none}

#nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:.5rem 0}
#nav a{display:flex;align-items:center;gap:.6rem;padding:.44rem .7rem;margin:0 .35rem 1px;
     border-radius:var(--r);color:#b6cad5;text-decoration:none;font-size:var(--t-body);
     line-height:1.35;white-space:nowrap;position:relative;transition:background .12s,color .12s}
#nav a:hover{background:rgba(255,255,255,.06);color:#fff}
#nav a.on{background:#1a4258;color:#fff;font-weight:600}
#nav a.on::before{content:"";position:absolute;left:-.35rem;top:5px;bottom:5px;width:3px;
     border-radius:0 2px 2px 0;background:#5fb0d6}
#nav a svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;
     stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
#nav a.on svg{opacity:1}
#nav a.has-badge::after{content:"";position:absolute;right:.5rem;top:.55rem;width:6px;height:6px;
     border-radius:50%;background:#e8762b;display:none}
body.nav-min #nav a.has-badge::after{display:block;right:.6rem;top:.5rem}
.nav-label{overflow:hidden;text-overflow:ellipsis}
.nav-badge{margin-left:auto;font-size:var(--t-micro);font-weight:700;padding:0 .3rem;
     min-width:1.1rem;text-align:center;border-radius:8px;background:#2c5468;color:#fff}
.nav-sep{height:1px;background:#16323f;margin:.5rem .7rem}
/* Letters waiting on Swati: a solid, prominent count (15 Sept 2026) -- now in
   the Attention tone rather than red, so red keeps meaning a patient alert
   (Stage 7, D-A). Still solid, still the loudest thing in the sidebar. */
#nav a.urgent .nav-badge{background:#e8762b;color:#10202a}
#nav a.urgent .nav-label{color:#ffb27a;font-weight:600}
.nav-cap{font-size:var(--t-meta);font-weight:600;
     color:#8fa9b7;padding:.6rem .7rem .2rem;white-space:nowrap}
body.nav-min .nav-label,body.nav-min .nav-cap,body.nav-min .nav-badge,
body.nav-min .nav-version{display:none}
body.nav-min #nav a{justify-content:center;padding:.44rem 0}
.nav-foot{flex:none;border-top:1px solid #16323f;padding:.35rem .35rem calc(.35rem + env(safe-area-inset-bottom))}
.nav-version{padding:.25rem .7rem .3rem;color:#7e9aa9;font-size:var(--t-micro);white-space:nowrap}
#navCollapse{display:flex;align-items:center;gap:.6rem;width:100%;margin:0;padding:.44rem .7rem;
     background:none;border:0;border-radius:var(--r);color:#8fa9b7;font-size:var(--t-meta);
     cursor:pointer;white-space:nowrap}
#navCollapse:hover:not(:disabled){background:rgba(255,255,255,.06);color:#fff}
#navCollapse svg{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6}
body.nav-min #navCollapse{justify-content:center;padding:.44rem 0}
body.nav-min #navCollapse svg{transform:scaleX(-1)}
#sidebar :focus-visible{outline-color:#5fb0d6}

/* ------------------------------------------------------------- top bar -- */

#topbar{position:fixed;top:0;left:var(--sidebar);right:0;height:var(--topbar);z-index:110;
     background:var(--surface);border-bottom:1px solid var(--line);
     display:flex;align-items:center;gap:.55rem;padding:0 .85rem;transition:left .12s ease}
body.nav-min #topbar{left:var(--sidebar-min)}
#navOpen{display:none}

.gsearch{position:relative;flex:1 1 24rem;max-width:32rem;min-width:0}
.gsearch-field{display:flex;align-items:center;gap:.45rem;height:30px;padding:0 .5rem;
     border:1px solid var(--line-strong);border-radius:var(--r);background:var(--surface-2);
     transition:border-color .12s,background .12s,box-shadow .12s}
.gsearch-field:focus-within{background:var(--surface);border-color:var(--accent);
     box-shadow:0 0 0 3px rgba(18,80,107,.1)}
.gsearch-field svg{width:15px;height:15px;flex:none;stroke:var(--faint);fill:none;stroke-width:1.7}
#globalSearch{flex:1;min-width:0;width:auto;height:26px;margin:0;padding:0;border:0;
     background:none;font:inherit;font-size:var(--t-body);color:var(--ink)}
#globalSearch:focus{outline:none}
#globalSearch::-webkit-search-cancel-button{display:none}
.kbd{font:600 var(--t-micro)/1 var(--font);color:var(--faint-text);border:1px solid var(--line);
     border-radius:3px;padding:.2rem .3rem;background:var(--surface);white-space:nowrap}
.gsearch-pop{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:200;
     background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);
     box-shadow:var(--shadow-2);max-height:22rem;overflow:auto;padding:.25rem}
.gs-row{display:grid;grid-template-columns:1fr auto auto;gap:.6rem;align-items:baseline;
     padding:.4rem .5rem;border-radius:var(--r);cursor:pointer;font-size:var(--t-tbl)}
.gs-row:hover,.gs-row.sel{background:var(--accent-soft)}
.gs-row .gs-name{font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-row .gs-meta{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.gs-note{padding:.5rem .6rem;color:var(--muted);font-size:var(--t-meta)}
.gs-head{padding:.35rem .6rem .2rem;color:var(--faint-text);font-size:var(--t-meta);font-weight:600}

.topbar-spacer{flex:1 1 auto}
.topbar-sites{display:flex;gap:.3rem;align-items:center}
/* A button, not a label: pressing one opens Today already filtered to that
   site. Geometry is stated here rather than inherited, because the shared
   button rule would otherwise give it a 28px height and an accent fill. */
.site-chip{font-family:inherit;font-size:var(--t-micro);font-weight:500;color:var(--muted);
     background:var(--surface-2);border:1px solid var(--line);border-radius:999px;
     padding:.1rem .5rem;min-height:0;white-space:nowrap;cursor:pointer;
     transition:background .12s,border-color .12s,color .12s}
.site-chip:hover:not(:disabled){background:var(--surface-3);border-color:var(--line-strong);color:var(--ink)}
.site-chip.empty:hover:not(:disabled){background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.site-chip b{color:var(--ink);font-variant-numeric:tabular-nums}
/* A clinic running today with an empty list: visible, and visibly not the
   same as one with patients on it. */
.site-chip.empty{border-color:var(--warn-line);background:var(--warn-soft);color:var(--warn)}
.site-chip.empty b{color:var(--warn)}
#todayEmpty p{margin:0 0 .25rem}
#todayEmpty p:last-child{margin-bottom:0}

.qa{position:relative}
.qa-pop{position:absolute;right:0;top:calc(100% + 4px);z-index:200;min-width:13rem;
     background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);
     box-shadow:var(--shadow-2);padding:.25rem}
.qa-pop button{display:flex;width:100%;align-items:center;gap:.5rem;margin:0;padding:.45rem .55rem;
     background:none;border:0;border-radius:var(--r);color:var(--ink);font-size:var(--t-tbl);
     text-align:left;cursor:pointer}
.qa-pop button:hover{background:var(--accent-soft)}

#topbarTasks{display:flex;align-items:center;gap:.35rem;text-decoration:none;color:var(--muted);
     font-size:var(--t-meta);padding:.2rem .45rem;border-radius:var(--r);white-space:nowrap}
#topbarTasks:hover{background:var(--surface-3);color:var(--ink)}
#topbarTasks .n{font-weight:700;font-variant-numeric:tabular-nums;color:var(--attn)}
#topbarTasks.clear .n{color:var(--muted)}

.userchip{display:flex;align-items:center;gap:.45rem;padding-left:.55rem;
     border-left:1px solid var(--line);white-space:nowrap}
.avatar{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;flex:none;
     background:var(--accent-soft);color:var(--accent);font-size:var(--t-micro);font-weight:700}
#who{font-size:var(--t-meta);color:var(--ink-2);max-width:12rem;overflow:hidden;
     text-overflow:ellipsis;margin:0}
#who .role{color:var(--faint-text)}

/* --------------------------------------------------------- page frame -- */

.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
     flex-wrap:wrap;margin-bottom:.85rem}
.page-head .page-title{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.page-head .page-sub{color:var(--muted);font-size:var(--t-meta);margin:.15rem 0 0}
/* Today's title is the date in full (Stage 7 brief, 7.2). */
.page-head h1.today-title{font-size:1.75rem;line-height:1.2;letter-spacing:-.015em;font-weight:650}
#viewToday .page-head .page-sub{font-size:var(--t-body);margin-top:.3rem}
@media (max-width:700px){.page-head h1.today-title{font-size:1.35rem}}
.page-actions{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.crumb{display:inline-flex;align-items:center;gap:.3rem;margin-bottom:.5rem;
     color:var(--muted);font-size:var(--t-meta)}

.panel,.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
     margin-bottom:.85rem;box-shadow:var(--shadow-1)}
.panel > h2,.card > h2,.panel-head{display:flex;align-items:center;justify-content:space-between;
     gap:.75rem;flex-wrap:wrap;padding:.65rem .85rem;margin:0;border-bottom:1px solid var(--line-2);
     font-size:var(--t-head);background:var(--surface);border-radius:var(--r-lg) var(--r-lg) 0 0}
.panel-head h2{padding:0;border:0;background:none}
.panel-body,.card > :not(h2):not(.panel-head):not(.tablewrap):not(table){padding-left:.85rem;padding-right:.85rem}
.card > :not(h2):not(.panel-head):first-child{padding-top:.85rem}
.card > :last-child{padding-bottom:.85rem}
.panel-body{padding:.85rem}
.panel-foot{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.55rem .85rem;
     border-top:1px solid var(--line-2);background:var(--surface-2);
     border-radius:0 0 var(--r-lg) var(--r-lg);font-size:var(--t-meta);color:var(--muted)}
.card > .muted:first-of-type{margin-top:0}
.tablewrap{overflow-x:auto}
.panel > .tablewrap,.card > .tablewrap{border-radius:0 0 var(--r-lg) var(--r-lg)}

/* --------------------------------------------------------------- type -- */

.grid{display:grid;gap:.55rem .7rem}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:760px){.g2,.g3,.g4{grid-template-columns:1fr}}

label{display:block;font-size:var(--t-tbl);font-weight:500;color:var(--ink-2);margin:.55rem 0 .25rem}
.grid label{margin-top:0}
input,select,textarea{width:100%;padding:.3rem .5rem;border:1px solid var(--line-strong);
     border-radius:var(--r);font-family:inherit;font-size:var(--t-body);line-height:1.4;
     background:var(--surface);color:var(--ink);min-height:var(--h-md)}
input:hover,select:hover,textarea:hover{border-color:var(--accent-line)}
/* 2px accent ring plus a soft 3px halo */
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);
     box-shadow:0 0 0 1px var(--accent),0 0 0 4px rgba(18,80,107,.12)}
input[type=file]{padding:.25rem;font-size:var(--t-meta)}
textarea{min-height:4rem;resize:vertical;line-height:1.5}
fieldset{border:1px solid var(--line);border-radius:var(--r);padding:0 .75rem .75rem;margin:.75rem 0 0}
legend{font-size:var(--t-tbl);color:var(--ink-2);padding:0 .3rem;font-weight:600}

/* ------------------------------------------------------------ buttons -- */
/* One geometry and one set of tints. The <a> variants are listed alongside
   their <button> twins so an anchor that starts an OAuth redirect looks
   identical to the button beside it. */

button,a.button,label.upload{display:inline-flex;align-items:center;justify-content:center;
     gap:.35rem;margin:0;padding:.32rem .75rem;min-height:var(--h-md);border:1px solid var(--accent);
     border-radius:var(--r);background:var(--accent);color:#fff;font-family:inherit;
     font-size:var(--t-tbl);font-weight:500;line-height:1.3;text-decoration:none;cursor:pointer;
     white-space:nowrap;transition:background .12s,border-color .12s,color .12s}
button:hover:not(:disabled),a.button:hover,label.upload:hover{background:var(--accent-hi);
     border-color:var(--accent-hi)}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.45;cursor:default}
button.sm,a.button.sm{padding:.22rem .6rem;min-height:var(--h-sm);font-size:var(--t-meta)}
button.ghost,a.button.ghost,label.upload{background:var(--surface);color:var(--accent);
     border-color:var(--line-strong)}
button.ghost:hover:not(:disabled),a.button.ghost:hover,label.upload:hover{background:var(--accent-soft);
     border-color:var(--accent-line);color:var(--accent)}
button.ghost.on,button.ghost.on:hover:not(:disabled){background:var(--accent-soft);border-color:var(--accent);
     color:var(--accent);font-weight:600;box-shadow:inset 0 0 0 1px var(--accent)}
button.link,a.link,.link{background:none;border:0;padding:.1rem .15rem;min-height:0;
     color:var(--accent);font-size:var(--t-meta);font-weight:500;text-decoration:none;cursor:pointer}
button.link:hover,a.link:hover{background:none;color:var(--accent-hi);text-decoration:underline}
button.danger{background:none;border-color:transparent;color:var(--danger);padding:.22rem .45rem;
     min-height:var(--h-sm);font-size:var(--t-meta)}
button.danger:hover:not(:disabled){background:var(--danger-soft);border-color:var(--danger-line);color:var(--danger)}
button.confirming,.row-actions button.confirming,.task-drawer button.confirming{
     background:var(--warn);border-color:var(--warn);color:#fff}
button.danger.confirming,.row-actions button.danger.confirming,
.task-drawer button.danger.confirming{background:var(--danger);border-color:var(--danger);color:#fff}
.row-actions{display:flex;gap:.3rem;align-items:center}
#todayRows .row-actions button{border-color:transparent;background:none;color:var(--accent);
     padding:.2rem .4rem;font-size:var(--t-meta)}
#todayRows .row-actions button:hover{background:var(--accent-soft);border-color:var(--accent-line)}
#todayRows td select{min-width:6.4rem;max-width:7.5rem}
#todayRows td[data-label="Insurer"],#todayRows td[data-label="Site"]{white-space:nowrap}
/* Today's table fits its screen (Stage 7 phase 2.1, 18 Sept 2026). Before
   this it was 56px too wide at 1440 and up to 216px at 1280, so the Invoice
   action sat off the right edge on every laptop and iPad.
   - The "Finalise note" / "Approve letter" markers sit on their own line
     under the name instead of beside it, which is what made Patient the
     widest column on the page.
   - Site is not shown on screen: the grey hospital row above each group
     (and the site filter, when one is chosen) already says it. It still
     prints, because the paper list has no filter chips. */
@media screen{
  #todayRows td.name .pend-marks{display:flex;flex-wrap:wrap;margin:.2rem 0 .1rem}
  #todayTable th:nth-child(6),#todayRows td[data-label="Site"]{display:none}
}
.noteactions,.hdr-actions,.pa-actions,.od-actions,.task-actions,.recordTabPanel-actions{
     display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.noteactions{margin-top:.55rem}
/* Correcting a document's title, type or date (22 Sept 2026). */
.doc-edit{margin-top:.55rem;padding-top:.55rem;border-top:1px solid var(--line)}
.doc-edit .err{margin:0;align-self:center}
.urgent-tick{display:inline-flex;align-items:center;gap:.3rem;font-size:.85rem;color:var(--err);white-space:nowrap;cursor:pointer}
.urgent-tick[hidden]{display:none}
.urgent-tick:has(input:disabled){cursor:default;opacity:.8}
.iconbtn{width:var(--h-md);min-height:var(--h-md);padding:0;background:none;border-color:transparent;color:var(--muted)}
.iconbtn:hover:not(:disabled){background:var(--surface-3);border-color:var(--line);color:var(--ink)}
.iconbtn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;
     stroke-linecap:round;stroke-linejoin:round}

/* ------------------------------------------------------------- tables -- */

table{width:100%;border-collapse:collapse;font-size:var(--t-tbl)}
th{position:sticky;top:0;z-index:1;text-align:left;font-size:var(--t-meta);font-weight:500;
   color:var(--muted);background:var(--surface-2);
   padding:.4rem .5rem;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:.28rem .5rem;border-bottom:1px solid var(--line-2);vertical-align:middle;height:32px}
tbody tr:last-child td{border-bottom:0}
tr.row,tr.task-row{cursor:pointer}
tr.row:focus-visible td,tr.task-row:focus-visible td{box-shadow:inset 0 2px 0 var(--accent),inset 0 -2px 0 var(--accent)}
tr.row:focus-visible,tr.task-row:focus-visible{outline:none}
tr.row:hover td,tr.task-row:hover td,tbody tr.hoverable:hover td{background:var(--surface-2)}
td.name,.name{font-weight:600}
td.name{white-space:nowrap}
td input,td select{min-height:26px;padding:.15rem .35rem;font-size:var(--t-meta)}
td select{min-width:6.2rem}
td input[type=number]{width:4.4rem}
td input[type=time]{width:6.2rem}
td input[type=text],td input:not([type]){min-width:5rem}
tfoot th{position:static;background:var(--surface-2);border-top:1px solid var(--line);
     border-bottom:0;text-transform:none;font-size:var(--t-tbl);color:var(--ink)}
.table-empty{padding:1.5rem .85rem;text-align:center;color:var(--muted);font-size:var(--t-meta)}
tr.done td{color:var(--faint-text)}
tr.dna td{background:color-mix(in srgb,var(--alert-soft) 45%,var(--surface))}

/* Where the day changes hospital. Tuesday is Claremont in the morning and
   Thornbury in the evening, so the combined list needs to say where it turns
   over rather than leaving it to the Site column. */
tr.site-group td{background:var(--surface-3);border-bottom:1px solid var(--line);
     padding:.3rem .5rem;height:auto;font-size:var(--t-meta)}
tr.site-group .sg-site{font-weight:700;color:var(--ink);letter-spacing:.01em}
tr.site-group .sg-when{margin-left:.5rem;color:var(--muted);font-variant-numeric:tabular-nums}
tr.site-group .sg-n{margin-left:.5rem;color:var(--faint-text)}
tr.site-group:hover td{background:var(--surface-3)}

/* status spine down the first cell */
td.spine{border-left:3px solid transparent;padding-left:.4rem}
td.spine.s-booked{border-left-color:var(--faint)}
td.spine.s-arrived{border-left-color:var(--warn)}
td.spine.s-seen{border-left-color:var(--ok)}
td.spine.s-dna{border-left-color:var(--alert)}
td.spine.s-cancelled{border-left-color:var(--line-strong)}

/* ---------------------------------------------------- status vocabulary -- */
/* ONE badge for every state label in the product (Stage 7): 22px, 4px
   radius, 12px medium, sentence case, tint ground with a dark word. .pill,
   .st, .ty, .tag and .tstate are four historical names for it, mapped here by
   grouped selectors so no renderer had to change. The word is always there;
   the tint is never the only carrier of meaning. */

.pill,.st,.ty,.tag,.tstate{display:inline-flex;align-items:center;gap:.3rem;
     min-height:22px;padding:0 .45rem;border-radius:var(--r-sm);
     font-size:var(--t-meta);font-weight:500;letter-spacing:0;text-transform:none;
     line-height:1.3;white-space:nowrap;vertical-align:middle;
     background:var(--neutral-soft);color:var(--neutral)}
.st::before,.tstate::before,.pill.draft::before,.pill.final::before,.pill.filed::before,
.pill.notfiled::before,.pill.urgent::before,.pill[class*="st-"]::before{
     content:"";display:inline-block;width:6px;height:6px;border-radius:50%;
     background:currentColor;flex:none;opacity:.85}
/* Some renderers pass the raw state ("complete", "now"); the badge still reads
   in sentence case. */
.pill::first-letter,.st::first-letter,.ty::first-letter,.tag::first-letter,
.tstate::first-letter{text-transform:uppercase}
/* appointment */
.st-booked{background:var(--neutral-soft);color:var(--neutral)}
.st-arrived{background:var(--warn-soft);color:var(--warn)}
.st-seen{background:var(--ok-soft);color:var(--ok)}
/* Did not attend: the word and an outline, never a red fill -- a missed
   appointment is not an allergy. */
.st-dna{background:var(--surface);color:var(--alert);box-shadow:inset 0 0 0 1px var(--alert-line)}
.st-cancelled{background:var(--neutral-soft);color:var(--muted);text-decoration:line-through}
/* appointment type */
.ty-new{background:var(--info-soft);color:var(--info)}
.ty-followup{background:var(--neutral-soft);color:var(--neutral)}
.ty-procedure{background:#ece4f5;color:#523481}

/* The appointment type is a dropdown (13 Sept 2026). The segmented .seg
   toggle that briefly lived here was removed with it -- nothing else used it.
   Each option carries its own length, so the Mins box stays gone: the server
   derives duration_min from the type and ignores anything a client sends. */

/* Dates a PATIENT cannot attend (13 Sept 2026). Amber, never the red of an
   allergy: this is administrative, and the red chip has to keep meaning
   "stop and read". The plane rather than the warning triangle .flag carries,
   for the same reason. */
.flag.away{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.flag.away::before{content:"\2708"}
.flag.away.current{background:var(--warn);color:#fff}

/* The notice that meets her when the record opens. Not a modal: a dialog on
   every open is dismissed unread within a fortnight, and this has to still
   work on the hundredth time. Sits above the tabs, in flow, so it moves the
   record down and cannot be scrolled past without being seen. */
.away-notice{display:flex;align-items:flex-start;gap:.55rem;margin:.6rem 0 0;
     padding:.55rem .7rem;border:1px solid var(--warn-line);border-left-width:3px;
     border-radius:var(--r);background:var(--warn-soft);color:var(--warn);
     font-size:var(--t-body)}
.away-notice b{font-weight:700}
.away-notice .grow{flex:1;min-width:0}
.away-notice button{margin-left:auto}
#awayRows li{display:flex;align-items:center;gap:.5rem;padding:.3rem 0;
     border-bottom:1px solid var(--line-2);font-size:var(--t-body)}
#awayRows{list-style:none;margin:.5rem 0 0;padding:0}
#awayRows li:last-child{border-bottom:0}
#awayRows .when{font-weight:600}
/* Today's list: booked on a day she said she was away. */
.ty.away-badge{background:var(--warn-soft);color:var(--warn)}
/* note */
.pill.draft,.pill.st-draft{background:var(--warn-soft);color:var(--warn)}
.pill.final,.pill.filed{background:var(--ok-soft);color:var(--ok)}
/* letter: waiting on a person is Attention; a filing failure is Danger */
.pill.notfiled{background:var(--danger-soft);color:var(--danger)}
.pill.urgent{background:var(--attn);color:#fff}
.pill.routine{background:none;color:var(--faint-text);padding-left:0}
.pill.st-pending,.pill.st-awaiting_secretary_input{background:var(--attn-soft);color:var(--attn)}
.pill.st-in_progress{background:var(--warn-soft);color:var(--warn)}
.pill.st-awaiting_approval{background:var(--attn-soft);color:var(--attn);box-shadow:inset 0 0 0 1px var(--attn-line)}
.pill.st-approved{background:var(--ok-soft);color:var(--ok)}
.pill.st-sent{background:var(--neutral-soft);color:var(--muted)}
/* transcript */
.tstate.processing{background:var(--warn-soft);color:var(--warn)}
.tstate.complete{background:var(--ok-soft);color:var(--ok)}
.tstate.failed{background:var(--danger-soft);color:var(--danger)}
.tstate.purged{background:var(--neutral-soft);color:var(--muted)}

/* --------------------------------------------------------- tabs, chips -- */

.tabs{display:flex;gap:.15rem;align-items:center;flex-wrap:wrap;border-bottom:1px solid var(--line);
     padding:0 .85rem;background:var(--surface-2)}
.tabs .tab{background:none;border:0;border-bottom:2px solid transparent;border-radius:0;
     color:var(--muted);font-size:var(--t-tbl);font-weight:600;padding:.5rem .65rem;min-height:0;
     margin-bottom:-1px;cursor:pointer;white-space:nowrap}
.tabs .tab:hover{background:none;color:var(--ink)}
.tabs .tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.tabs .tab .cnt{font-variant-numeric:tabular-nums;color:var(--faint-text);font-weight:600}
.tabs .tab.on .cnt{color:var(--accent)}

.chipbar{display:flex;gap:.3rem;align-items:center;flex-wrap:wrap}

/* New clinic: two equal actions that each CREATE a clinic. Deliberately not a
   segmented control and deliberately not primary-plus-ghost — either shape
   says one of them is already chosen, and neither chooses anything. Kept
   large because this is a decision made once per clinic, often standing up
   between patients. */
.site-choice{display:flex;flex-wrap:wrap;gap:.6rem}
button.site-btn{flex:1 1 8rem;justify-content:center;padding:.7rem 1rem;
     min-height:44px;font-size:var(--t-body);font-weight:600;border-radius:var(--r)}
button.site-btn::before{content:"+";font-weight:700;opacity:.75;margin-right:.15rem}
button.site-btn:disabled{opacity:.55}
/* Phase 4 (7 Oct 2026): the four create buttons as a fixed 2 x 2. */
.site-choice.site-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
/* Virtual list: owed but not yet inside the 48-hour deadline reads amber;
   .unpaid-badge (red) is kept for overdue, as on the clinic rows. */
.ty.unpaid-badge.not-due{background:var(--warn-soft);color:var(--warn)}
.chip{display:inline-flex;align-items:center;gap:.3rem;padding:.15rem .6rem;min-height:var(--h-xs);
     border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);
     color:var(--muted);font-size:var(--t-meta);font-weight:500;cursor:pointer;white-space:nowrap}
/* :not(:disabled) is load-bearing, not decoration: without it these lose to
   button:hover:not(:disabled) above, which is one pseudo-class more specific,
   and the chip paints solid accent with dark text. */
.chip:hover:not(:disabled){background:var(--surface-3);border-color:var(--line-strong);color:var(--ink)}
.chip.on,.chip.on:hover:not(:disabled){background:var(--accent-soft);
     border-color:var(--accent);color:var(--accent);font-weight:600}
.chip .cnt{font-variant-numeric:tabular-nums;color:var(--faint-text)}
/* The day's site filter is a primary control now that it sits under the date,
   so it is sized like one rather than like a tag. */
.chipbar-lg{margin:0 0 .7rem}
.chipbar-lg .chip{min-height:30px;padding:.25rem .8rem;font-size:var(--t-tbl)}
.chipbar-lg .chip .cnt{font-weight:700}
.chip.on .cnt{color:var(--accent)}

/* ------------------------------------------------------------ banners -- */

.banner{background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--warn);
     border-radius:var(--r);padding:.45rem .65rem;font-size:var(--t-meta);margin-bottom:.7rem}
.banner.bad{background:var(--danger-soft);border-color:var(--danger-line);color:var(--danger)}
.aiwarn{background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--warn);
     border-radius:var(--r);padding:.45rem .65rem;margin:0 0 .6rem;font-size:var(--t-meta)}
#opsBanner{margin:0 0 .7rem}
/* Solid and prominent, as asked on 15 Sept -- in the Attention tone (D-A). */
.approval-bar{display:flex;align-items:center;gap:.4rem 1rem;flex-wrap:wrap;margin:0 0 .7rem;
     padding:.5rem .75rem;border-radius:var(--r);background:var(--attn);color:#fff;
     font-size:var(--t-tbl);font-weight:700}
.approval-bar-go{margin-left:auto;color:var(--attn);background:#fff;border-radius:var(--r);
     padding:.2rem .65rem;text-decoration:none;font-weight:700;white-space:nowrap}
.approval-bar-go:hover{background:var(--attn-soft)}

/* --------------------------------------------------- Today work strip -- */

.worklane{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.25rem,1fr));gap:.5rem;
     margin-bottom:.85rem}
.wq{display:block;text-align:left;padding:.5rem .65rem;background:var(--surface);
     border:1px solid var(--line);border-left:3px solid var(--line-strong);border-radius:var(--r);
     text-decoration:none;color:inherit;box-shadow:var(--shadow-1);transition:border-color .12s,background .12s}
.wq:hover{background:var(--surface-2);border-color:var(--line-strong)}
.wq .wq-n{display:block;font-size:1.35rem;font-weight:600;line-height:1.15;
     font-variant-numeric:tabular-nums;color:var(--ink)}
.wq .wq-l{display:block;font-size:var(--t-meta);color:var(--muted);margin-top:.1rem}
.wq.zero .wq-n{color:var(--faint-text);font-weight:500}
/* "Not yet typed" is work waiting, not a failure: Attention, not red. */
.wq.s-err{border-left-color:var(--attn)}
.wq.s-warn{border-left-color:var(--warn)}
.wq.s-info{border-left-color:var(--info)}
.wq.s-ok{border-left-color:var(--ok)}
/* Each box keeps its own edge at zero (18 Sept 2026); only the number greys. */

/* The day strip (Stage 7, 7.2): Day · Practice letters · Billing returns.
   Numbers link to their worklist tab; a non-zero number takes its role
   tone; "—" means not known, never 0. */
.daystrip{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:.85rem}
.daystrip-tiles{margin-bottom:.85rem}
.daystrip-tiles .worklane{margin-bottom:0}
.daystrip-tiles .strip-state{margin:.35rem 0 0}
.strip-group{flex:1 1 16rem;background:var(--surface);border:1px solid var(--line);
     border-radius:var(--r-lg);padding:.5rem .75rem .6rem;min-width:0}
.strip-title{font-size:var(--t-meta);font-weight:600;color:var(--ink-2);margin:0 0 .3rem}
.strip-scope{font-weight:400;color:var(--muted)}
.strip-row{display:flex;flex-wrap:wrap;gap:.25rem 1rem;align-items:baseline}
.strip-item{display:inline-flex;align-items:baseline;gap:.3rem;text-decoration:none;color:var(--muted);
     font-size:var(--t-tbl);border-radius:var(--r-sm)}
a.strip-item:hover .strip-l{text-decoration:underline}
.strip-n{font-size:1.25rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink)}
.strip-item.zero .strip-n{color:var(--faint-text);font-weight:500}
.strip-item.t-attn .strip-n,.t-attn{color:var(--attn)}
.strip-item.t-warn .strip-n{color:var(--warn)}
.strip-item.t-ok .strip-n{color:var(--ok)}
.strip-item.t-info .strip-n{color:var(--info)}
.strip-state{font-size:var(--t-meta);color:var(--muted)}
.strip-state.bad{color:var(--danger);font-weight:600}
.strip-state.warn{color:var(--warn)}
.strip-fin{display:flex;flex-wrap:wrap;gap:.1rem .6rem;align-items:baseline;text-decoration:none;
     color:var(--ink-2);font-size:var(--t-tbl);font-variant-numeric:tabular-nums}
.strip-fin:hover .strip-fin-site{text-decoration:underline}
.strip-fin-site{color:var(--accent)}
.strip-fin .t-attn{font-weight:600}

/* Today: the list with Needs you beside it on a wide screen, under it below. */
.today-layout{display:block}
@media screen and (min-width:1440px){
  .today-layout{display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:.75rem;align-items:start}
}
/* With Needs you beside it the list is narrower: until the screen is wide
   enough for every column, Hospital no. and Insurer step back as they do on
   an iPad (they are on the record and the clinic list), so nothing -- least
   of all Billing return -- runs off the right. */
@media screen and (min-width:1440px) and (max-width:1679px){
  #todayTable .drop-md{display:none!important}
  #todayRows .row-actions{gap:0}
  #todayRows .row-actions button{padding-left:.35rem;padding-right:.35rem}
}
.ny-group+.ny-group{margin-top:.8rem}
.ny-title{font-size:var(--t-tbl);font-weight:600;color:var(--ink-2);margin:0 0 .2rem}
.ny-group .mini-list li{padding-left:0;padding-right:0}
.ny-row{display:flex;gap:.6rem;width:100%;text-decoration:none;color:var(--ink)}
.ny-row:hover .what-name{text-decoration:underline}
.ny-row .end{margin-left:auto;color:var(--muted);font-size:var(--t-meta);white-space:nowrap}
.ny-empty{margin:0}

/* S1: the alert flag on a Today row; S2: the booking's own paperwork. */
button.row-alert,button.row-alert:hover:not(:disabled){display:inline-flex;align-items:center;gap:.2rem;
     min-height:0;margin:0 0 0 .4rem;padding:0 .35rem;border:1px solid var(--alert-line);
     border-left:3px solid var(--alert);border-radius:var(--r-sm);background:var(--alert-soft);
     color:var(--alert);font-size:var(--t-meta);font-weight:700;vertical-align:1px}
button.row-alert::before{content:"\26A0"}
.dob-inline{display:none;color:var(--muted);font-size:var(--t-meta);font-weight:400;margin-top:.1rem}
.paperwork{white-space:normal;min-width:6.5rem;max-width:8.5rem}
button.pw,button.pw:hover:not(:disabled){display:inline-flex;flex-direction:column;align-items:flex-start;gap:.15rem;min-height:0;padding:0;
     border:0;background:none;color:inherit;font-weight:inherit}
button.pw:hover .pill{text-decoration:underline}
.pw-none{color:var(--faint-text);font-size:var(--t-meta);white-space:normal}
/* The DOB column steps back where space is short; the date moves under
   the name so identity is not lost. */
#todayRows td.name .row-alert{display:flex;width:max-content;margin:.2rem 0 0}
@media screen and (min-width:1680px) and (max-width:1799px){
  #todayTable .drop-md{display:none!important}
}
@media screen and (max-width:1799px){
  #todayTable th:nth-child(3),#todayRows td[data-label="DOB"]{display:none}
  #todayRows .dob-inline{display:block}
  #todayRows .row-actions{gap:0}
  #todayRows .row-actions button{padding-left:.35rem;padding-right:.35rem}
  #todayRows td select{min-width:5.8rem}
}
@media (max-width:820px){ .paperwork .pill:not(.pw-primary){display:none} }

/* "Next": the first patient still to come. */
#todayRows tr.next-row td{box-shadow:inset 0 2px 0 var(--accent)}
.pill.next-badge{background:var(--info-soft);color:var(--info);margin-right:.4rem;font-weight:600}
/* Status select tinted by its state, so it reads before it is opened. */
select.st-select.s-arrived{border-color:var(--warn-line);background-color:var(--warn-soft)}
select.st-select.s-seen{border-color:var(--ok-line);background-color:var(--ok-soft)}
select.st-select.s-dna{border-color:var(--alert-line);color:var(--alert)}
select.st-select.s-cancelled{color:var(--muted)}

/* Stage 7 phase 6 -------------------------------------------------------- */
/* Worklist: at laptop widths the secondary columns step back so the Open
   button is never off the right edge; the drawer still shows them. */
@media screen and (max-width:1499px){
  .tasks-table tr:not(.task-drawer) > :nth-child(10),
  .tasks-table tr:not(.task-drawer) > :nth-child(3){display:none}
}
@media screen and (max-width:1399px){
  .tasks-table tr:not(.task-drawer) > :nth-child(9){display:none}
}
.amend-flag{text-transform:none}
/* Sign-in two-step set-up: the Confirm button sits clear of the code box. */
#enrolPanel input + button,#enrolPanel input + .err + button{margin-top:.5rem}
/* Settings: the switch-off form is a column, not three touching boxes. */
.mfa-off{display:grid;gap:.5rem;max-width:24rem}
.mfa-off .muted{margin:0}
.mfa-off button{justify-self:start;white-space:normal;text-align:left}
/* Phone: More holds Upload and Edit details. */
.pb-more{display:none}
@media (max-width:700px){
  .pb-more{display:inline-flex}
  .pb-more-cluster:not(.open) > :not(.pb-more){display:none}
  .pb-more-cluster.open .pb-more{background:var(--accent-soft)}
}
.mini-list{list-style:none;margin:0;padding:0}
.mini-list li{display:flex;align-items:baseline;gap:.6rem;padding:.32rem .85rem;
     border-bottom:1px solid var(--line-2);font-size:var(--t-tbl)}
.mini-list li:last-child{border-bottom:0}
.mini-list .when{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.mini-list .what{color:var(--muted)}
.mini-list .end{margin-left:auto;color:var(--muted);font-size:var(--t-meta);white-space:nowrap}
.mini-list a{color:inherit;text-decoration:none}
.mini-list li:hover{background:var(--surface-2)}

/* --------------------------------------------------- patient identity -- */

/* Stage 7 phase 3: the full banner scrolls with the page; #pbCompact is the
   one thing pinned (below). A sticky banner that changed height as it stuck
   would move the text under the reader's eye. */
.patient-banner{position:relative;background:var(--surface);
     border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-1);
     margin-bottom:.7rem}
.pb-surname{letter-spacing:.01em}
.pb-main{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;padding:.55rem .85rem}
.pb-id{min-width:0}
.pb-name{font-size:var(--t-name);font-weight:600;line-height:1.25;margin:0}
.pb-facts{display:flex;gap:.5rem;flex-wrap:wrap;align-items:baseline;margin:.1rem 0 0;
     font-size:var(--t-meta);color:var(--muted)}
#patientSub,#patientGp{display:flex;gap:.5rem .75rem;flex-wrap:wrap;margin:0}
.pb-facts .f{white-space:nowrap}
.pb-facts .f b{color:var(--ink-2);font-weight:600;font-variant-numeric:tabular-nums}
.pb-flags{display:flex;gap:.35rem;flex-wrap:wrap;align-items:center;padding:0 .85rem .6rem}
.pb-flags[hidden]{display:none}
.pb-actions{margin-left:auto;display:flex;gap:.35rem .9rem;flex-wrap:wrap;align-items:center}
.pb-cluster{display:inline-flex;gap:.35rem;flex-wrap:wrap}

/* Tier 2: the alert strip. Full width, the word "Alert", never an ellipsis:
   two lines, then "Show all" in place. */
.pb-alert{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;margin:0 .85rem .6rem;
     padding:.4rem .65rem;border-radius:var(--r);font-size:var(--t-tbl);line-height:1.5}
.pb-alert.has-alert{background:var(--alert-soft);border:1px solid var(--alert-line);
     border-left:3px solid var(--alert);color:var(--alert)}
.pb-alert-label{font-weight:700;white-space:nowrap}
.pb-alert-label::before{content:"\26A0";margin-right:.3rem}
.pb-alert-text{flex:1 1 20rem;min-width:0;font-weight:600;white-space:pre-wrap;
     display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.pb-alert.open .pb-alert-text{-webkit-line-clamp:unset;display:block}
button.link.pb-alert-more,button.link.pb-alert-more:hover{color:var(--alert);font-weight:600}
.pb-noalert{color:var(--muted);font-size:var(--t-meta)}
.pb-alert:not(.has-alert){padding-top:0;padding-bottom:0;margin-top:-.2rem}
.flag.attn{background:var(--attn-soft);color:var(--attn);border-color:var(--attn-line)}

/* The compact identity strip, pinned under the top bar once the banner has
   gone: SURNAME, Forename · DOB (age) · hospital number · Alert. Its left
   edge follows the top bar's at every width. */
.pb-compact{position:fixed;top:var(--topbar);left:var(--sidebar);right:0;z-index:100;
     background:var(--surface);border-bottom:1px solid var(--line-strong);
     box-shadow:0 2px 6px rgba(16,36,48,.08);padding:.35rem 1.25rem;min-height:40px}
body.nav-min .pb-compact{left:var(--sidebar-min)}
.pb-compact[hidden]{display:none}
.pbc-line{display:flex;align-items:center;gap:.4rem .9rem;flex-wrap:wrap;min-height:30px}
.pbc-name{font-weight:700;font-size:var(--t-body);color:var(--ink)}
.pbc-fact{font-size:var(--t-tbl);color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.pbc-away{font-size:var(--t-meta);font-weight:600;color:var(--warn);background:var(--warn-soft);
     border:1px solid var(--warn-line);border-radius:var(--r-sm);padding:0 .35rem;white-space:nowrap}
.pbc-away.current{background:var(--warn);color:#fff;border-color:var(--warn)}
button.pbc-alert-btn,button.pbc-alert-btn:hover:not(:disabled){min-height:26px;padding:.05rem .55rem;
     background:var(--alert-soft);color:var(--alert);border:1px solid var(--alert-line);
     border-left:3px solid var(--alert);font-weight:700;font-size:var(--t-meta)}
button.pbc-alert-btn::before{content:"\26A0";margin-right:.25rem}
.pbc-alert-text{display:none;margin:.3rem 0 .1rem;padding:.3rem .55rem;border-radius:var(--r-sm);
     background:var(--alert-soft);color:var(--alert);border-left:3px solid var(--alert);
     font-size:var(--t-tbl);font-weight:600;line-height:1.45;white-space:pre-wrap}
.pb-compact.alert-open .pbc-alert-text{display:block}
/* While a consultation note is open for editing the alert TEXT is on
   screen, not a tap away. */
body:has(#viewPatient .sec textarea) .pb-compact.has-alert .pbc-alert-text{display:block}
body:has(#viewPatient .sec textarea) .pb-compact.has-alert .pbc-alert-btn{display:none}
/* Anything scrolled to (a marker's target, a focused field) lands below the
   pinned strip rather than under it. */
html:has(#viewPatient:not([hidden])){scroll-padding-top:calc(var(--topbar) + var(--pb-compact-h,0px) + 12px)}
.flag{display:inline-flex;align-items:center;gap:.3rem;max-width:34rem;padding:.1rem .45rem;
     border-radius:var(--r-sm);font-size:var(--t-meta);font-weight:600;line-height:1.5;
     background:var(--alert-soft);color:var(--alert);border:1px solid var(--alert-line)}
.flag .flag-body{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.flag.due{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-line)}
.flag.info{background:var(--info-soft);color:var(--info);border-color:var(--info-line)}
#alertBox{margin:0}
.pb-panel{border-top:1px solid var(--line-2);padding:.7rem .85rem;background:var(--surface-2);
     border-radius:0 0 var(--r-lg) var(--r-lg)}

/* -------------------------------------------------------- record tabs -- */

#recordPanel{overflow:visible}
/* Only ONE thing sticks on a record screen, and it is the identity strip.
   The tab row used to stick at the same offset and simply slid underneath
   it; it sits near the top of the panel in any case. */
#recordTabs{border-radius:var(--r-lg) var(--r-lg) 0 0}
.recordTabPanel{padding:.85rem}
.recordTabPanel-rule{margin:1rem 0;border:0;border-top:1px solid var(--line)}
.note-entry-body{white-space:pre-wrap}
.panel-count{color:var(--faint-text);font-weight:500;font-size:var(--t-meta)}

/* ---------------------------------------------------------- summary -- */

.sumgrid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:.7rem;align-items:start}
@media (max-width:1080px){.sumgrid{grid-template-columns:1fr}}

/* The clinical context column (Stage 7): beside the tabs at 1280px and wider,
   with its own scroll; below that its cards are in the Summary tab. */
.record-layout{display:block}
.record-context{display:none}
@media (min-width:1280px){
  .record-layout{display:grid;grid-template-columns:minmax(0,1fr) 18rem;gap:.75rem;align-items:start}
  /* Context column on the RIGHT (18 Sept 2026, Pravin); source order unchanged. */
  .record-context{order:2}
  .record-context{display:block;position:sticky;top:calc(var(--topbar) + var(--pb-compact-h,0px) + 8px);
    max-height:calc(100vh - var(--topbar) - var(--pb-compact-h,0px) - 16px);overflow-y:auto;
    overscroll-behavior:contain}
  .record-context .sumbox{margin-bottom:.6rem}
  .sumgrid{grid-template-columns:minmax(0,1fr)}
  .sumgrid .sum-side{display:none}
  #recordTabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
  #recordTabs .tab{padding-left:.55rem;padding-right:.55rem}
}
.reading p,.sum-note.reading p{font-size:var(--t-read);line-height:1.6;max-width:72ch}
.sum-note.reading h4{font-size:var(--t-tbl)}
.sum-head{display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.lr-main{display:flex;align-items:baseline;gap:.25rem .6rem;flex-wrap:wrap;min-width:0}
.letter-rows li{align-items:center}
.doc-link{font-size:var(--t-meta)}
.todo .stepper li{border:0;padding:0;display:inline}
.stepper{display:flex;flex-wrap:wrap;gap:.1rem .2rem;list-style:none;margin:0;padding:0;
     font-size:var(--t-meta);color:var(--faint-text)}
.stepper li+li::before{content:"\203A";margin:0 .3rem 0 .1rem;color:var(--faint)}
.stepper li.done{color:var(--ink-2)}
.stepper li.now{color:var(--ink);font-weight:600}
.ctx-caveat{margin:0 0 .5rem}
.ctx-background h4{margin:.6rem 0 .1rem;font-size:var(--t-meta);color:var(--ink-2)}
.ctx-old{color:var(--warn);font-weight:500}
.ctx-note,.ctx-empty{font-size:var(--t-meta);margin:.3rem 0 0}
.ctx-draft{margin-top:.6rem;padding:.45rem .6rem;border:1px solid var(--warn-line);
     border-left:3px solid var(--warn);border-radius:var(--r-sm);background:var(--warn-soft)}
.ctx-draft-head{margin:0 0 .25rem;color:var(--warn);font-weight:600;font-size:var(--t-meta)}
.clamp{white-space:pre-wrap;margin:0;font-size:var(--t-tbl);line-height:1.5;
     display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--clamp,4);overflow:hidden}
.clamp-wrap.open .clamp{-webkit-line-clamp:unset;display:block}
.clamp-more{font-size:var(--t-meta)}
.deflist dd.not-recorded{color:var(--faint-text);font-style:italic}
.sumbox{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);margin-bottom:.7rem}
.sumbox > summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;
     padding:.5rem .65rem;background:var(--surface-2);border-radius:var(--r);
     font-size:var(--t-tbl);font-weight:600;color:var(--ink-2)}
.sumbox > summary::-webkit-details-marker{display:none}
.sumbox[open] > summary{border-bottom:1px solid var(--line-2);border-radius:var(--r) var(--r) 0 0}
.sumbox > summary::before{content:"\25B8";font-size:.7em;transition:transform .12s;color:var(--faint)}
.sumbox[open] > summary::before{transform:rotate(90deg)}
.sumbox > summary .s-end{margin-left:auto;text-transform:none;letter-spacing:0;
     font-weight:500;font-size:var(--t-meta);color:var(--faint-text)}
.sumbody{padding:.6rem .65rem;font-size:var(--t-tbl)}
.sumbody > :last-child{margin-bottom:0}
.sum-note h4{margin:.7rem 0 .15rem}
.sum-note h4:first-child{margin-top:0}
.sum-note p{white-space:pre-wrap;margin:0 0 .1rem;font-size:var(--t-tbl);line-height:1.55}
.deflist{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.15rem .7rem;
     font-size:var(--t-tbl);margin:0}
.deflist dt{color:var(--muted);white-space:nowrap}
.deflist dd{margin:0;color:var(--ink)}
.todo{list-style:none;margin:0;padding:0}
.todo li{display:flex;gap:.5rem;align-items:baseline;padding:.25rem 0;
     border-bottom:1px solid var(--line-2);font-size:var(--t-tbl)}
.todo li:last-child{border-bottom:0}
.todo .end{margin-left:auto}

/* ------------------------------------------------ record finance (B9) -- */
.fin-clinics{margin:.3rem 0 .8rem}
.fin-title{font-size:var(--t-head);margin:0 0 .4rem}
.fin-table{max-width:40rem}
.fin-table td.num{text-align:right}
.fin-table th:last-child{text-align:right}
.fin-note td{height:auto;font-size:var(--t-meta);padding-top:0}
.fin-filing{margin:.6rem 0 0;font-size:var(--t-meta)}

/* --------------------------------------------------------- timeline -- */

.tl-filters{display:flex;gap:.3rem;flex-wrap:wrap;margin-bottom:.7rem}
.timeline{position:relative;margin:0;padding:0 0 0 1.1rem;list-style:none}
.timeline::before{content:"";position:absolute;left:4px;top:.4rem;bottom:.4rem;width:1px;
     background:var(--line-strong)}
.tl-coverage{font-size:var(--t-meta);margin:0 0 .6rem;max-width:80ch}
.tl-month{list-style:none;margin:.9rem 0 .2rem -1.1rem;padding:0 0 .2rem;border-bottom:1px solid var(--line);
     font-size:var(--t-tbl);font-weight:600;color:var(--ink-2);background:var(--surface);position:relative;z-index:1}
.tl-month:first-child{margin-top:0}
.tl .tl-top{display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap}
.tl .tl-type{font-size:var(--t-meta);font-weight:600;color:var(--ink-2);white-space:nowrap}
.tl .tl-title{font-weight:600;min-width:0}
.tl .tl-detail{grid-column:1/-1;margin:.2rem 0 .3rem;padding:.45rem .6rem;border-left:2px solid var(--line-strong);
     background:var(--surface-2);border-radius:0 var(--r-sm) var(--r-sm) 0}
.tl .tl-detail[hidden]{display:none}
.tl .tl-detail h4{margin:0 0 .15rem;font-size:var(--t-meta)}
.tl .tl-detail p{margin:0;white-space:pre-wrap;font-size:var(--t-tbl);line-height:1.55;max-width:72ch}
.tl-notetext{white-space:pre-wrap}
.tl{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;
     gap:.6rem;align-items:baseline;padding:.35rem 0;border-bottom:1px solid var(--line-2);
     font-size:var(--t-tbl)}
.tl:last-child{border-bottom:0}
.tl::before{content:"";position:absolute;left:-1.1rem;top:.7rem;width:9px;height:9px;
     border-radius:50%;background:var(--surface);border:2px solid var(--line-strong);
     transform:translateX(0)}
.tl.k-encounter::before{border-color:var(--accent)}
.tl.k-letter::before{border-color:var(--info)}
.tl.k-document::before{border-color:var(--ok)}
.tl.k-note::before{border-color:var(--warn)}
.tl.k-audio::before{border-color:#7a5aa8}
.tl.k-appointment::before{border-color:var(--line-strong)}
.tl .tl-when{color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.tl .tl-what{min-width:0}
.tl .tl-what b{font-weight:600}
.tl .tl-what .sub{color:var(--muted);display:block;font-size:var(--t-meta);
     overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl .tl-end{white-space:nowrap;display:flex;gap:.3rem;align-items:center}
@media (max-width:700px){.tl{grid-template-columns:1fr}.tl .tl-end{flex-wrap:wrap}}

/* --------------------------------------------------- entries (lists) -- */

.entry{border:1px solid var(--line);border-radius:var(--r);margin-bottom:.4rem;overflow:hidden;
     background:var(--surface)}
.entry > summary{list-style:none;cursor:pointer;padding:.4rem .6rem;display:grid;
     grid-template-columns:7.5rem minmax(6rem,auto) minmax(0,1fr) auto;gap:.6rem;
     align-items:baseline;background:var(--surface-2);font-size:var(--t-tbl)}
.entry > summary::-webkit-details-marker{display:none}
.entry > summary:hover{background:var(--surface-3)}
.entry[open] > summary{border-bottom:1px solid var(--line)}
.entry .when{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.entry .what{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.amend-flag{font-weight:600}
.tasks-table .amend-flag{display:flex;width:max-content;margin:.15rem 0 0}
.amend-box{background:var(--attn-soft);border:1px solid var(--attn-line);border-left:4px solid var(--attn);
     color:var(--attn);border-radius:var(--r);padding:.5rem .7rem;margin:0 0 .6rem;font-size:var(--t-meta)}
.amend-box .amend-meta{margin-left:.35rem;font-weight:400}
.approval-note{margin:.6rem 0 .2rem}
.approval-note label{display:block}
.approval-note-label{display:block;font-size:.85rem;margin-bottom:.2rem}
.approval-note textarea{width:100%;box-sizing:border-box}
.approval-note-box{background:var(--attn-soft);border:1px solid var(--attn-line);border-radius:6px;padding:.6rem .8rem;margin:.6rem 0}
.approval-note-box .amend-meta{margin-left:.35rem;font-weight:400}
.approval-note-box p{margin:.3rem 0 0;color:var(--ink);white-space:pre-wrap}
.approval-note-pill{margin-left:.35rem;cursor:help}
.amend-box p{margin:.3rem 0 0;color:var(--ink);white-space:pre-wrap}
button.reject-btn{color:var(--err);border-color:var(--err-line);background:var(--surface)}
button.reject-btn:hover:not(:disabled){background:var(--err-soft);border-color:var(--err);color:var(--err)}
.reject-panel{border:1px solid var(--err-line);border-left:4px solid var(--err);border-radius:var(--r);
     background:var(--surface);padding:.6rem .7rem;margin:.6rem 0}
.reject-panel h4{margin:0 0 .4rem;color:var(--err)}
.reject-panel textarea,.task-drawer .reject-panel textarea{width:100%;height:5.5rem;margin-bottom:.5rem}
.reject-panel .dict-player{width:100%;margin:.4rem 0}
.entry .letter-flag-awaiting{color:var(--attn);font-weight:700;white-space:nowrap}
.entry .body{padding:.7rem}
@media (max-width:860px){
  .entry > summary{grid-template-columns:1fr auto;row-gap:.2rem}
  .entry > summary .when{grid-column:1}
}
.sec{margin-bottom:.6rem}
.sec:last-child{margin-bottom:0}
.sec h4{margin:0 0 .1rem}
.sec p{margin:0;white-space:pre-wrap;font-size:var(--t-tbl);line-height:1.55}
.sec textarea{min-height:3rem}

/* ------------------------------------------------ consultation workspace -- */

/* The note column stretches to the rail's height and its action row (Edit
   note / Save / Finalise / Done editing) is pushed to the bottom of it, so the
   buttons sit at the foot of the consultation box rather than floating up
   under a short note (Pravin, 16 Sept 2026). */
.consult{display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:.75rem;align-items:stretch}
.consult-main{min-width:0;display:flex;flex-direction:column}
.consult-main > .noteactions{margin-top:auto;padding-top:.55rem}
.consult-side{min-width:0;display:flex;flex-direction:column;gap:.6rem}
.side-box{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
     overflow:hidden}
.side-box > h4{padding:.6rem .85rem;background:var(--surface);border-bottom:1px solid var(--line-2);
     margin:0;font-size:var(--t-head);font-weight:600;color:var(--ink)}
.side-box > .side-body{padding:.65rem .85rem;font-size:var(--t-head);line-height:1.5;color:var(--ink)}
.side-box > .side-body > :last-child{margin-bottom:0}
.side-actions{display:flex;flex-direction:column;gap:.35rem;padding:.65rem .85rem;font-size:var(--t-body)}
.side-actions button,.side-actions a.button{width:100%;justify-content:flex-start;font-size:var(--t-body);min-height:var(--h-md)}
.side-box .auto-draft,.side-actions .auto-draft{font-size:var(--t-body);color:var(--ink-2);
     align-items:center;white-space:normal;gap:.5rem}
/* A checkbox is a 16px square, not a 32px form control. */
.side-box .auto-draft input[type="checkbox"]{width:16px;height:16px;min-height:0;flex:none}
.side-box .side-body .link{font-size:inherit}
/* The letter from the note, under the recording (18 Sept 2026). */
.rec-letter{display:flex;flex-direction:column;gap:.3rem;margin-top:.65rem;padding-top:.65rem;
     border-top:1px solid var(--line-2)}
.rec-letter button{width:100%;justify-content:flex-start;font-size:var(--t-body);min-height:var(--h-md)}
.rec-letter .muted,.rec-letter .err{font-size:var(--t-meta)}
.prev-note{max-height:15rem;overflow:auto;overscroll-behavior:contain}
.prev-note h4{margin:.55rem 0 .1rem;font-size:var(--t-body);font-weight:600;color:var(--ink-2)}
.prev-note h4:first-child{margin-top:0}
.prev-note p{white-space:pre-wrap;margin:0;font-size:var(--t-head);line-height:1.55;color:var(--ink)}
@media (max-width:900px){.consult{grid-template-columns:1fr}}

/* ---------------------------------------- consultation workspace (Stage 7) --
   #/patient/:id/visits/:encounterId. The rail is earned by measurement (B10):
   .with-rail when the note keeps ~600px beside it, .stacked otherwise, set by
   a ResizeObserver -- never by a breakpoint. Nothing here moves a node. */
details.entry.workspace{overflow:visible;border-color:var(--line-strong)}
details.entry.workspace > summary{cursor:default;background:var(--surface);padding:.6rem .8rem;
     grid-template-columns:auto auto minmax(0,1fr) auto;font-size:var(--t-body)}
details.entry.workspace > summary:hover{background:var(--surface)}
details.entry.workspace > summary .name{font-weight:600}
details.entry.workspace > .body{padding:.8rem}
.ws-back{margin:0 0 .5rem}
.consult.with-rail{grid-template-columns:minmax(0,1fr) 20rem}
.consult.stacked{grid-template-columns:minmax(0,1fr)}
.consult.stacked .consult-side{display:contents}
.consult.stacked .rail-rec{order:-1}
.consult.stacked .rail-video{order:-2}
.consult.stacked .consult-main{order:0}
.consult.stacked .consult-side > :not(.rail-rec):not(.rail-video){order:1}
.consult-side .rail-video{order:0}
.consult-side .rail-rec{order:1}
.consult-side .rail-prev{order:2}
.consult-side .rail-docs{order:3}
.consult-side .rail-end{order:4}
.consult-side .rail-paper{order:5}
.consult-side .rail-del{order:6;border:0;background:none;border-top:1px dashed var(--line-strong);
     border-radius:0;padding-top:.3rem}
.rail-prev > h4{display:flex;align-items:center;gap:.5rem}
.rail-prev > h4 .link{margin-left:auto}
.rail-prev .prev-note{max-height:40vh}
/* Stacked: Note | Previous | More. Hidden parts keep running. */
.ws-seg{display:none;gap:.3rem;margin:.1rem 0 .6rem;flex-wrap:wrap}
.ws-seg:has(+ .consult.stacked){display:flex}
.ws-seg .chip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
.consult.stacked[data-seg="note"] .consult-side > :not(.rail-rec):not(.rail-video){display:none}
.consult.stacked[data-seg="previous"] > .consult-main,
.consult.stacked[data-seg="previous"] .consult-side > :not(.rail-prev){display:none}
.consult.stacked[data-seg="more"] > .consult-main,
.consult.stacked[data-seg="more"] .consult-side > .rail-rec,
.consult.stacked[data-seg="more"] .consult-side > .rail-video,
.consult.stacked[data-seg="more"] .consult-side > .rail-prev{display:none}

/* Reading density for clinical text (16/1.6, 72ch, 24px between sections).
   The worklist, clinic list and billing return keep operational density. */
.density-reading .sec{margin-bottom:1.1rem}
.density-reading .sec h4{font-size:var(--t-head);color:var(--ink-2);margin:0 0 .2rem}
.density-reading .sec p{font-size:var(--t-read);line-height:1.6;max-width:72ch}
.density-reading .sec textarea{font-size:var(--t-read);line-height:1.6;min-height:4.9rem}
.not-recorded{font-size:var(--t-meta);margin:.2rem 0 0}
.aiwarn-meta{font-weight:400}
.patient-notes-line{flex-basis:100%;margin:.2rem 0 0;font-size:var(--t-meta)}

/* Section jump list (New proforma, edit mode): one scrolling line, sticky
   inside the note column only, on screens wide enough to afford it. */
.jumplist{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 .9rem;padding:.35rem 0;
     background:var(--surface)}
.jumplist .chip{flex:none;font-size:var(--t-tbl);min-height:28px;padding:.2rem .7rem}
.jumplist .chip:not(.has-text){color:var(--faint-text);border-color:var(--line)}
.jumplist .chip.has-text{color:var(--accent);border-color:var(--accent-line)}
.jumplist .chip.has-text::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
/* One line that scrolls, on a phone, rather than five rows of chips. */
@media (max-width:700px){.jumplist{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}}
.sec{scroll-margin-top:calc(var(--topbar) + var(--pb-compact-h,0px) + 12px)}

/* The note's action bar and its save state: Saved, Unsaved changes and a
   named failure look different and never stand in for each other. */
.note-bar{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;border-top:1px solid var(--line-2)}
.note-bar-main{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;flex:1 1 20rem}
.note-bar .finalise{margin-left:auto}
.save-state{font-size:var(--t-meta);flex-basis:100%}
.save-state.ok{color:var(--ok)}
.save-state.dirty{color:var(--attn);font-weight:600}
.save-state.bad{color:var(--danger);font-weight:600}
.save-state.idle,.note-state{color:var(--muted);font-size:var(--t-meta)}

/* While recording: clock and Stop stay in reach at the top of the note. */
.rec-bar{position:sticky;top:calc(var(--topbar) + var(--pb-compact-h,0px) + 4px);z-index:6;display:flex;
     align-items:center;gap:.6rem;flex-wrap:wrap;padding:.35rem .6rem;margin:0 0 .6rem;
     background:var(--danger-soft);border:1px solid var(--danger-line);border-radius:var(--r);
     color:var(--danger);font-weight:600;font-size:var(--t-tbl)}
.rec-bar[hidden]{display:none}
.rec-bar-label::before{content:"";display:inline-block;width:.55rem;height:.55rem;border-radius:50%;
     background:currentColor;margin-right:.35rem;animation:recpulse 1.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.rec-bar-label::before{animation:none}}
.rec-bar-clock{font-variant-numeric:tabular-nums}
.rec-bar button{margin-left:auto}
.consult-index td.name{white-space:normal}
.leave-dialog{max-width:30rem}
@media (max-width:1279px){
  #recordTabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
}
@media (min-width:1280px){
  .record-layout.ws-open{grid-template-columns:minmax(0,1fr)}
  .record-layout.ws-open .record-context{display:none}
}
/* Context column on every tab, Consultations list included (21 Sept 2026,
   Pravin); an open consultation workspace hides it (ws-open). Below 1280px
   the same cards stay inside the Summary tab, as before. */
@media (min-width:1280px){
  .record-layout:not(.ctx-on){grid-template-columns:minmax(0,1fr)}
  .record-layout:not(.ctx-on) .record-context{display:none}
}

/* --------------------------------------------------- secretary worklist -- */

.tasks-table td{vertical-align:middle}
/* The date and the age columns of a task ROW stay on one line. Scoped away
   from tr.task-drawer, which is a row whose single full-width cell IS its
   nth-child(1) -- so this rule was making the whole drawer nowrap, and
   white-space inherits: the letter editor inside it put the entire inserted
   transcript on one unwrappable 3,200px line running off the right of the
   box (Pravin, 14 Sept 2026: "puts all dictation in one line. It is not
   possible to format"). It was not a rich-text or transcript bug at all.
   Anything that adds a full-width cell to this table needs the same care. */
.tasks-table tr:not(.task-drawer)>td:nth-child(1),
.tasks-table tr:not(.task-drawer)>td:nth-child(9){white-space:nowrap}
.tasks-table tr.urgent td:first-child{box-shadow:inset 3px 0 0 var(--attn)}
.age{white-space:nowrap}
.age.warn{color:var(--warn);font-weight:600}
.age.bad{color:var(--attn);font-weight:700}
.note-cell{max-width:13rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
     color:var(--muted);font-size:var(--t-meta)}
.tasks-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;
     flex-wrap:wrap}
.tasks-pager{display:flex;gap:.35rem;align-items:center}
.tasks-pager select{width:auto;min-height:24px;padding:.1rem .3rem;font-size:var(--t-meta)}
.tasks-pager label{margin:0;display:flex;gap:.3rem;align-items:center}
.tasks-count{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
.task-empty{text-align:center;color:var(--muted);padding:1.4rem 0;font-size:var(--t-meta)}
.task-drawer > td{background:var(--surface-2);padding:.75rem;height:auto;
     box-shadow:inset 0 1px 0 var(--line),inset 0 -1px 0 var(--line)}
.drawer-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:.75rem;
     align-items:start}
@media (max-width:1100px){.drawer-grid{grid-template-columns:1fr}}
.task-drawer textarea{width:100%;height:16rem;font-size:var(--t-tbl);line-height:1.55}
.task-drawer audio{width:100%;margin-bottom:.5rem}
.task-actions{margin-top:.6rem;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.task-actions .task-actions-end{display:flex;gap:.4rem;align-items:center;margin-left:auto}
/* Ready for review stands apart, at the right; Discard, if offered, after it. */
.task-actions .task-primary{order:5;margin-left:auto}
.task-actions .task-primary ~ .task-actions-end{order:6;margin-left:.4rem}
.task-actions .task-record{margin-left:.3rem}

/* The secretary's list (Stage 7, phase 8). One line per row where it can be;
   sent letters are finished work and read quieter; Open is a link. */
.tasks-table td.nowrap{white-space:nowrap}
.tasks-table tr.task-row.sent > td{color:var(--muted)}
.tasks-table tr.task-row.sent .pill{opacity:.85}
.tasks-table .task-open{font-size:var(--t-tbl);white-space:nowrap;padding:.2rem .3rem}
/* The drawer: the letter gets the width; recording and transcript stay in
   view beside it as she types down a long letter. */
@media (min-width:1101px){
  .drawer-grid:not(.with-preview){grid-template-columns:minmax(0,1fr) 21rem}
  .drawer-grid:not(.with-preview) > .drawer-side{position:sticky;top:calc(var(--topbar) + .75rem)}
}
.drawer-side audio{height:36px}
.task-notes{margin-top:.75rem;border:1px solid var(--line);border-radius:var(--r);
     background:var(--surface);padding:.6rem .75rem}
.task-notes-title{font-weight:600;margin:0 0 .3rem;color:var(--ink)}
/* The letter reference, at the top of the drawer's typing column. */
.letter-ref{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap;margin:0 0 .6rem}
.letter-ref .muted{font-size:.88rem}
.letter-ref-site{width:auto;padding:.25rem .35rem;font:inherit;font-size:.85rem;
      border:1px solid var(--line);border-radius:5px}
.drawer-heading{margin:0 0 .3rem}
.transcript-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
     padding:.5rem .6rem;margin:.4rem 0}
.transcript-text{white-space:pre-wrap;font-size:var(--t-meta);max-height:11rem;overflow-y:auto;
     margin:.25rem 0 0;line-height:1.55}
.dispatch-box{margin-top:.7rem;border-top:1px solid var(--line);padding-top:.6rem}
.dispatch-list{list-style:none;margin:0 0 .5rem;padding:0}
.dispatch{display:flex;gap:.4rem;align-items:baseline;flex-wrap:wrap;font-size:var(--t-meta);margin:.2rem 0}
.dispatch-note{font-size:var(--t-micro)}
.dispatch.voided .dispatch-line{text-decoration:line-through;color:var(--muted)}
.dispatch-void{font-size:var(--t-micro)}
.dispatch-form{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.dispatch-form select,.dispatch-form input{width:auto;min-height:26px;font-size:var(--t-meta)}
.dispatch-form input{min-width:10rem;flex:1 1 10rem;max-width:18rem}

.task-notes .note{font-size:var(--t-meta);margin:.2rem 0}
.task-notes .note .who{color:var(--muted);font-size:var(--t-micro)}
.task-note-add{display:flex;gap:.35rem;margin-top:.4rem}
.task-note-add input{flex:1;min-width:0}

/* ------------------------------------------------- pickers and results -- */

.results{border:1px solid var(--line);border-radius:var(--r);margin-top:.3rem;
     max-height:13rem;overflow:auto;background:var(--surface)}
.results div{padding:.35rem .55rem;cursor:pointer;font-size:var(--t-tbl);
     border-bottom:1px solid var(--line-2)}
.results div:last-child{border-bottom:0}
.results div:hover,.results div.sel{background:var(--accent-soft)}
.chosen{display:flex;justify-content:space-between;align-items:center;gap:1rem;
     background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:var(--r);
     padding:.35rem .55rem;margin-top:.3rem;font-size:var(--t-tbl)}
.hdr{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;flex-wrap:wrap}

/* ------------------------------------------------------- paper archive -- */

.pa-box{margin-top:.85rem;padding:.65rem;border:1px solid var(--line);border-radius:var(--r);
     background:var(--surface-2)}
.pa-box h3{margin:0 0 .2rem;font-size:var(--t-tbl);font-weight:600;color:var(--ink-2)}
.pa-box p{margin:0 0 .4rem;font-size:var(--t-meta)}
.pa-match{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;padding:.35rem .5rem;
     margin-top:.35rem;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
     font-size:var(--t-tbl)}
.pa-match .fn{font-weight:600;word-break:break-word}
.pa-match .sz{color:var(--muted);font-size:var(--t-meta)}
.pa-match .sp{margin-left:auto}

/* ------------------------------------------------ dictation and scribe -- */

.dictation{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
     padding:.55rem .6rem;margin-bottom:.6rem}
/* Inside the rail's own white card the recording needs no second box. */
.side-box .dictation{border:0;border-radius:0;padding:0;margin:0}
.dictation input[type="file"]{width:auto;max-width:100%;margin-right:.4rem}
.dict-head{display:flex;gap:.45rem;align-items:center;flex-wrap:wrap}
.dict-msg{flex:1 1 10rem;min-width:0;font-size:var(--t-meta);color:var(--muted)}
/* The checkbox must not inherit the form-control width rule, or it stretches
   across the panel head and pushes the message off the row. */
.auto-draft{display:inline-flex;align-items:center;gap:.3rem;font-size:var(--t-meta);
     color:var(--muted);white-space:nowrap;cursor:pointer}
.auto-draft input[type="checkbox"]{width:auto;min-width:0;margin:0;flex:none}
/* Both of these are a state class stacked on a later-defined layout class,
   so they must qualify themselves or the layout rule's colour wins on source
   order at equal specificity -- the same trap as button:hover:not(:disabled).
   Until 12 Sept 2026 a scribe failure was painted var(--muted) and read as
   an ordinary status line. */
.dict-msg.err{color:var(--err)}
/* Consent to record (039): inline, in the panel, never a browser dialog. */
.rec-consent{margin:.5rem 0 .2rem;padding:.55rem .65rem;border:1px solid var(--line);
     border-radius:6px;background:var(--surface, #fff)}
.rec-consent p{margin:0 0 .35rem}
.rec-consent .rc-q{font-weight:600;color:var(--ink)}
.rec-consent .rc-standing{font-size:var(--t-meta)}
.rec-consent .rc-declined{color:var(--err)}
.rec-consent .rc-future{white-space:normal;margin:.1rem 0 .5rem}
.rc-actions{display:flex;gap:.45rem;flex-wrap:wrap}
.consent-warn{color:var(--err);font-size:var(--t-meta)}
.consent-note{font-size:var(--t-meta)}
.consent-hint{font-size:var(--t-meta);margin:.5rem 0 0}
.tscript-msg{margin:.4rem 0 0;font-size:var(--t-meta);color:var(--muted)}
.tscript-msg.err{color:var(--err)}
button.rec::before{content:"";display:inline-block;width:.5rem;height:.5rem;border-radius:50%;
     background:currentColor;opacity:.9}
button.rec.recording{background:var(--err);border-color:var(--err);color:#fff}
button.rec.recording::before{animation:recpulse 1.4s ease-in-out infinite}
@keyframes recpulse{50%{opacity:.2}}
@media (prefers-reduced-motion:reduce){button.rec.recording::before{animation:none}}
.rec-clock{font-weight:600;color:var(--err);font-size:var(--t-meta)}
.dict-player{display:block;width:100%;margin-bottom:.4rem}
label.upload{font-size:var(--t-meta)}
/* Patient header facts, header buttons and the recording controls at the
   page's body size (21 Sept 2026, Pravin): they had stayed at 12px when body
   text went to 15px, and read as smaller than everything around them. */
.pb-facts{font-size:var(--t-body)}
.pb-actions button,.pb-actions a.button,
.dictation button,.dictation label.upload{font-size:var(--t-body)}
.tscript-list:not(:empty){margin-top:.55rem;display:flex;flex-direction:column;gap:.45rem}
.tscript{border:1px solid var(--line);border-left:3px solid var(--line-strong);
     border-radius:var(--r);background:var(--surface);padding:.45rem .55rem}
.tscript.t-processing{border-left-color:var(--warn)}
.tscript.t-complete{border-left-color:var(--ok)}
.tscript.t-failed{border-left-color:var(--err)}
.tscript.t-purged{border-left-color:var(--line-strong)}
.tscript-head{display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap;font-size:var(--t-meta)}
.tscript-text{margin-top:.4rem}
.tscript-text > summary{cursor:pointer;color:var(--accent);font-size:var(--t-meta)}
.tscript-text p{white-space:pre-wrap;margin:.4rem 0 0;max-height:14rem;overflow-y:auto;
     background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r);
     padding:.5rem;font-size:var(--t-meta);line-height:1.55}

/* ------------------------------------------------------ letter editing -- */

textarea.letterbody{min-height:15rem;line-height:1.55}
.richletter{margin:.3rem 0}
.richletter-toolbar{display:flex;gap:.25rem;flex-wrap:wrap;align-items:center;padding:.3rem;
     background:var(--surface-2);border:1px solid var(--line);border-bottom:0;
     border-radius:var(--r) var(--r) 0 0}
.richletter-btn{margin:0;padding:.2rem .5rem;min-height:24px;border:1px solid var(--line-strong);
     background:var(--surface);color:var(--ink);border-radius:3px;font-size:var(--t-meta);font-weight:500}
.richletter-btn:hover:not(:disabled){background:var(--surface-3);border-color:var(--line-strong);color:var(--ink)}
.richletter-font,.richletter-size{width:auto;min-height:24px;padding:.15rem .3rem;font-size:var(--t-micro)}
.richletter-body{min-height:14rem;max-height:34rem;overflow:auto;border:1px solid var(--line);
     border-radius:0 0 var(--r) var(--r);padding:1.1rem 1.4rem;background:var(--surface);
     box-shadow:0 1px 2px rgba(16,36,48,.06),0 4px 14px rgba(16,36,48,.06);
     font-family:"Times New Roman",Times,serif;font-size:14px;line-height:1.5}
.richletter-body:focus{outline:2px solid var(--accent);outline-offset:-2px}
.richletter-body p{margin:0 0 .8em}
.richletter-body table{border-collapse:collapse;margin:.5em 0}
.richletter-body td,.richletter-body th{border:1px solid #999;padding:4px 8px;min-width:2rem;
     position:static;background:none;text-transform:none;font-size:inherit;letter-spacing:0;color:inherit}
.letterhead-preview{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
     padding:.7rem .85rem;margin-bottom:.4rem;text-align:center;
     font-family:"Times New Roman",Times,serif;font-size:.8rem;color:var(--ink);line-height:1.4}
.letterhead-preview .title{font-weight:700;margin-bottom:.5rem}
.letterhead-preview .sites{display:flex;justify-content:center;gap:1.4rem;text-align:left;flex-wrap:wrap}
.richletter-preview-link{font-size:var(--t-micro);margin-left:.4rem}
/* Full letter preview (15 Sept 2026) -- see createLetterPreview in app.js. */
.drawer-grid.with-preview{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  grid-template-areas:"main preview" "side preview";align-items:start}
.drawer-grid.with-preview>.drawer-main{grid-area:main}
.drawer-grid.with-preview>.drawer-side{grid-area:side}
.drawer-grid.with-preview>.letter-preview{grid-area:preview}
.letter-entry-grid.with-preview{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:.75rem;align-items:start}
.letter-preview{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);
  border-radius:var(--r);background:var(--surface);white-space:normal}
.letter-preview-side{position:sticky;top:.5rem;max-height:calc(100vh - 1rem)}
.letter-preview-head{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;
  padding:.45rem .6rem;border-bottom:1px solid var(--line)}
.letter-preview-status{font-size:var(--t-micro)}
.letter-preview-status.err{color:var(--err)}
.letter-preview-tools{display:flex;gap:.4rem;align-items:center;margin-left:auto;flex-wrap:wrap}
.letter-preview-tools button,.letter-preview-tools a{margin:0}
.letter-preview-page{overflow:auto;background:#8a949c;min-height:12rem;flex:1 1 auto}
.letter-preview-page .docx-wrapper{background:transparent;padding:8px}
.letter-preview-page .docx-wrapper>section.docx{margin:0 auto;box-shadow:0 1px 6px rgba(0,0,0,.35)}
.letter-preview-dialog{padding:0;border:0;border-radius:var(--r-lg);box-shadow:var(--shadow-2);
  width:min(900px,calc(100vw - 1rem));height:calc(100vh - 1rem);max-width:none;max-height:none}
.letter-preview-dialog::backdrop{background:rgba(16,36,48,.55)}
.letter-preview-dialog>.letter-preview{height:100%;border:0}
/* File preview pop-up (6 Oct 2026) -- see openFilePreview in app.js. */
.file-preview-page{display:flex;flex-direction:column;align-items:center;gap:10px;padding:10px}
.file-preview-page>.docx-wrapper{align-self:stretch}
.file-preview-pdfpage{display:block;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.35);max-width:100%;height:auto}
.file-preview-img{display:block;max-width:100%;height:auto;background:#fff;box-shadow:0 1px 6px rgba(0,0,0,.35)}
/* Additional cc (036) -- see createLetterCcBox in app.js. */
.letter-cc{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);
  padding:.6rem .75rem;margin:.75rem 0 0;white-space:normal}
.letter-cc-title{font-weight:600;margin:0 0 .2rem}
.letter-cc-row{display:flex;gap:.5rem;align-items:flex-start;margin:.45rem 0}
.letter-cc-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:.5rem;flex:1 1 auto;min-width:0}
/* .task-drawer textarea is 16rem tall for the letter body; a cc address is not. */
.task-drawer .letter-cc-fields textarea{height:auto;min-height:4.6rem}
.letter-cc-left{display:flex;flex-direction:column;gap:.4rem;min-width:0}
@media (max-width:700px){.letter-cc-fields{grid-template-columns:1fr}}
.letter-cc-tools{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.35rem}
.letter-cc-readonly{margin:.2rem 0 .6rem;white-space:pre-line;line-height:1.35}
.letter-cc-encl-label{display:block;margin-top:.7rem}
.letter-cc>input{width:100%;max-width:40rem}

/* -------------------------------------------------------------- billing -- */

.billing-table input,.billing-table select{width:100%;margin:0}
.billing-table td{vertical-align:middle}
.billing-table td.nofee{white-space:nowrap}
.billing-table td.nofee input{width:auto;margin:0 .4em 0 0}
.billing-table .num{text-align:right}
.billing-table .num input{text-align:right}
.billing-table tr.unpriced input.amount{background:var(--warn-soft);border-color:var(--warn-line)}
details#billingFeesCard > summary{cursor:pointer;list-style:none;display:flex;align-items:center;
     gap:.5rem;padding:.6rem .85rem;background:var(--surface-2);border-radius:var(--r-lg);
     font-size:var(--t-head);font-weight:600}
details#billingFeesCard[open] > summary{border-bottom:1px solid var(--line-2);
     border-radius:var(--r-lg) var(--r-lg) 0 0}
details#billingFeesCard > summary::-webkit-details-marker{display:none}
details#billingFeesCard > summary::before{content:"\25B8";font-size:.75em;color:var(--faint);
     transition:transform .12s}
details#billingFeesCard[open] > summary::before{transform:rotate(90deg)}

/* ------------------------------------------------------------ dialogs -- */

.notice-dialog{border:1px solid var(--line);border-radius:var(--r-lg);padding:1rem 1.15rem;
     max-width:26rem;box-shadow:var(--shadow-2);color:var(--ink);font:inherit}
.notice-dialog::backdrop{background:rgba(16,36,48,.38)}
.notice-dialog h2{margin:0 0 .4rem;font-size:1.05rem}
.notice-dialog p{margin:.25rem 0;font-size:var(--t-tbl)}
.notice-dialog .notice-count{font-weight:700;font-variant-numeric:tabular-nums}
.notice-actions{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.9rem}

.offline-queue-banner{position:fixed;right:1rem;bottom:1rem;z-index:500;max-width:320px;
     background:var(--warn-soft);border:1px solid var(--warn-line);color:var(--warn);
     border-radius:var(--r);padding:.55rem .7rem;font-size:var(--t-meta);
     display:flex;align-items:center;gap:.5rem;box-shadow:var(--shadow-2)}
.offline-queue-banner button{flex-shrink:0}
.offline-queue-lost-container{position:fixed;right:1rem;bottom:5rem;z-index:500;max-width:320px;
     display:flex;flex-direction:column-reverse;gap:.4rem}
.offline-queue-lost{background:var(--err-soft);border:1px solid var(--err-line);color:var(--err);
     border-radius:var(--r);padding:.55rem .7rem;font-size:var(--t-meta)}
.offline-queue-lost a{color:var(--err);font-weight:600}

#pwMsg.bad{color:var(--err)}
#pwMsg.good{color:var(--ok)}
.qr{display:inline-block;margin:.5rem 0;padding:.5rem;background:#fff;border:1px solid var(--line);
     border-radius:var(--r);line-height:0}
.qr svg{display:block;width:13.75rem;height:13.75rem;max-width:100%}

/* -------------------------------------------------------------- sign in -- */
/* Same accent, same geometry, no gradients: the first screen of the day is
   part of the same product as the rest of it. */

.login-shell{min-height:100vh;min-height:100dvh;display:flex;align-items:center;
     justify-content:center;padding:2rem 1.25rem;background:var(--surface-2)}
.login-card{display:grid;grid-template-columns:1fr 1fr;width:min(56rem,100%);
     background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
     overflow:hidden;box-shadow:0 12px 40px rgba(16,36,48,.1)}
.login-hero{background:var(--accent);color:#e3eef3;padding:2.25rem 2rem;display:flex;
     flex-direction:column;justify-content:space-between;gap:1.75rem}
.login-mark{display:flex;align-items:center;gap:.6rem}
.login-monogram{width:2.2rem;height:2.2rem;border-radius:var(--r);display:grid;place-items:center;
     background:rgba(255,255,255,.14);color:#fff;font-weight:700;font-size:.8rem}
.login-mark-text{font-size:var(--t-meta);font-weight:600;color:#cfe1e9}
.login-hero h2{margin:0 0 .3rem;font-size:1.4rem;color:#fff;line-height:1.25}
.login-hero-role{margin:0 0 .8rem;font-size:var(--t-meta);color:#cfe1e9}
.login-hero-blurb{margin:0;font-size:var(--t-tbl);line-height:1.6;color:#dbe8ee;max-width:22rem}
.login-sites{display:flex;flex-wrap:wrap;gap:.4rem}
.login-site{font-size:var(--t-meta);padding:.15rem .5rem;border-radius:999px;color:#e3eef3;
     background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14)}
.login-panel{padding:2.25rem 2rem;display:flex;flex-direction:column;justify-content:center}
.login-panel h3{margin:0 0 .25rem;font-size:1.2rem;font-weight:600;color:var(--ink)}
.login-sub{margin:0 0 1rem;font-size:var(--t-meta);color:var(--muted)}
.login-panel label{font-size:var(--t-meta);font-weight:600;color:var(--ink-2);margin:.7rem 0 .25rem}
.login-panel input{min-height:34px;font-size:var(--t-body)}
button.login-go{width:100%;margin-top:1rem;min-height:34px;font-size:var(--t-body);font-weight:600}
button.ghost.login-go{margin-top:.4rem}
.login-panel .err{margin-top:.6rem;min-height:0}
.login-help{margin-top:.7rem;font-size:var(--t-meta);color:var(--ink-2)}
.login-help > summary{cursor:pointer;color:var(--accent);font-weight:600;width:max-content;max-width:100%}
.login-help > summary:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:2px}
.login-help-body{margin-top:.5rem;padding:.6rem .75rem;border:1px solid var(--line-2);border-radius:var(--r);
     background:var(--surface-2);line-height:1.5}
.login-help-body p{margin:0 0 .45rem}
.login-help-body ol{margin:0 0 .55rem;padding-left:1.2rem}
.login-help-body li{margin:.15rem 0}
.login-help-body p:last-child{margin-bottom:0}
.login-hint{margin:.7rem 0 0;font-size:var(--t-meta);color:var(--muted)}
#resetForm .login-hint{margin:.35rem 0 0}
.login-help-form{margin:.2rem 0 .7rem}
.login-help-form label{margin-top:.2rem}
.login-help-form input{width:100%;background:var(--surface)}
.login-help-msg{margin:.45rem 0 0;color:var(--ink-2)}
.login-help-msg:empty{display:none}
.login-sub.ok{color:var(--ok);font-weight:600}
.login-foot{display:flex;gap:.45rem;align-items:flex-start;margin:1.2rem 0 0;padding-top:.9rem;
     border-top:1px solid var(--line-2);font-size:var(--t-micro);line-height:1.45;color:var(--muted)}
.login-lock{width:.9rem;height:.9rem;flex:none;margin-top:.1rem;color:var(--faint)}
@media (max-width:860px){
  .login-shell{padding:1rem;align-items:flex-start}
  .login-card{grid-template-columns:1fr;width:min(28rem,100%);margin:auto}
  .login-hero{padding:1.5rem}
  .login-hero-blurb{display:none}
  .login-panel{padding:1.5rem}
}

/* A search box is a target, not a banner: past about 30rem the caret ends up
   a long way from where the eye starts reading. */
#psTerm{max-width:30rem}

/* ------------------------------------------------------------ oddments -- */

/* A derived flag in the patient banner is a button (it jumps to the tab that
   explains it), so it has to shed the button geometry and keep the chip's. */
button.flag{min-height:0;font-family:inherit;cursor:pointer}
/* Pending-paperwork markers on Today / Recent records rows (16 Sept 2026).
   Amber = the record header's "not finalised" flag. Qualified with :not(:disabled)
   on hover because button:hover:not(:disabled) is (0,2,1) and would win. */
.pend-marks{display:inline-flex;gap:.3rem;margin-left:.5rem;vertical-align:middle}
button.pend{display:inline-flex;align-items:center;gap:.25rem;min-height:0;padding:.05rem .45rem;
  font:inherit;font-size:var(--t-meta);font-weight:600;line-height:1.5;cursor:pointer;
  border:1px solid var(--warn-line);border-radius:999px;background:var(--warn-soft);color:var(--warn)}
button.pend:hover:not(:disabled){background:var(--warn);border-color:var(--warn);color:#fff}
button.pend:focus-visible{outline:2px solid var(--warn);outline-offset:1px}
.pend-ico{font-size:.9em;line-height:1}
details.entry.pend-target{box-shadow:0 0 0 3px var(--warn-line);border-color:var(--warn);scroll-margin-top:9rem;
  transition:box-shadow .4s}
@media print{.pend-marks{display:none}}
button.flag:hover{filter:brightness(.97)}

/* Drawer and workspace columns: without min-width:0 a grid child refuses to
   shrink below its content and the whole row scrolls sideways. */
.drawer-main,.drawer-side{min-width:0}
.drawer-side{display:flex;flex-direction:column;gap:.5rem}
.dispatch-log{min-width:0}
.offline-queue-text{flex:1;min-width:0}

/* A bare flag with no word beside it is just a red box; every alert keeps a
   marker as well as its text. */
.flag::before{content:"\26A0";font-size:.9em;line-height:1}
.flag.info::before{content:"\2192"}

/* ------------------------------------------------------ coarse pointer -- */
/* The iPad and the phone (Stage 7). Desktop is untouched; a finger gets 40px
   small controls, 44px default controls and inputs, 44px table rows, and 8px
   between adjacent buttons. Inputs go to 16px, which is also the size below
   which iOS zooms the page on focus. Rich-letter toolbar and dense in-table
   selectors grow too, because that is where a finger actually misses. */
@media (pointer:coarse){
  button,a.button,label.upload{min-height:var(--h-touch);padding-left:.9rem;padding-right:.9rem}
  button.sm,a.button.sm,button.danger,.richletter-btn{min-height:var(--h-lg)}
  .iconbtn{width:var(--h-touch);min-height:var(--h-touch)}
  button.link,a.link,.link{min-height:var(--h-lg);padding:.3rem .35rem;display:inline-flex;align-items:center}
  .chip,.chipbar-lg .chip,.site-chip{min-height:var(--h-lg);padding-left:.8rem;padding-right:.8rem}
  .tabs .tab{min-height:var(--h-touch);padding-left:.8rem;padding-right:.8rem}
  input,select,textarea{min-height:var(--h-touch);font-size:1rem}
  td input,td select,.tasks-pager select,.dispatch-form select,.dispatch-form input,
  .richletter-font,.richletter-size{min-height:var(--h-lg);font-size:1rem}
  input[type=checkbox],input[type=radio]{min-height:0;width:1.25rem;height:1.25rem}
  td input[type=time]{width:8.4rem}
  td input[type=number]{width:5.4rem}
  td{height:var(--h-touch)}
  #nav a{padding-top:.65rem;padding-bottom:.65rem}
  .gsearch-field{height:var(--h-lg)}
  #globalSearch{height:36px;font-size:1rem}
  .page-actions,.noteactions,.hdr-actions,.pa-actions,.od-actions,.task-actions,
  .recordTabPanel-actions,.row-actions,.chipbar,.rc-actions,.notice-actions,
  .side-actions,.pb-actions{gap:var(--sp-2)}
  button.flag,button.pend{min-height:36px}
}

/* Motion is 120-150ms and entirely off for anyone who asks for less. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:0s!important;scroll-behavior:auto!important}
}

/* ---------------------------------------------------------- responsive -- */
/* Desktop density is never reduced to suit a phone: columns are dropped only
   below 900px, and only ones that are not clinically load-bearing. */

@media (max-width:1180px){
  body.signed-in{padding-left:var(--sidebar-min)}
  #sidebar{width:var(--sidebar-min)}
  #sidebar .brand-text,#sidebar .nav-label,#sidebar .nav-cap,
  #sidebar .nav-badge,#sidebar .nav-version{display:none}
  #sidebar #nav a,#sidebar #navCollapse{justify-content:center;padding-left:0;padding-right:0}
  #topbar{left:var(--sidebar-min)}
  .pb-compact{left:var(--sidebar-min)}
  #navCollapse{display:none}
}
/* Column shedding is pinned to the two devices this is used on rather than to
   round numbers: an iPad in landscape is 1024 and in portrait 768, and both
   were still being handed every column and a sideways scroll. A 1280 laptop
   keeps the lot. */
@media (max-width:1100px){
  .drop-md{display:none!important}
}
@media (max-width:900px){
  .gsearch{flex:1 1 auto;max-width:none}
  .gsearch .kbd,.topbar-sites{display:none}
}
@media (max-width:820px){
  .drop-sm{display:none!important}
}
@media (max-width:760px){
  body.signed-in{padding-left:0}
  #sidebar{transform:translateX(-100%);width:var(--sidebar);transition:transform .14s ease}
  body.nav-open #sidebar{transform:none;box-shadow:var(--shadow-float)}
  body.nav-open #sidebar .brand-text,body.nav-open #sidebar .nav-label,
  body.nav-open #sidebar .nav-cap,body.nav-open #sidebar .nav-badge{display:revert}
  body.nav-open #sidebar #nav a{justify-content:flex-start;padding-left:.7rem;padding-right:.7rem}
  #topbar{left:0;padding-left:.35rem}
  #navOpen{display:inline-flex}
  #who{display:none}
  main{padding:.85rem .7rem 4rem}
  .page-head{margin-bottom:.6rem}
  .pb-compact{left:0;padding:.3rem .7rem}
  .pb-actions{margin-left:0;width:100%}
  .tabs{padding:0 .5rem;overflow-x:auto;flex-wrap:nowrap}
  .recordTabPanel,.panel-body{padding:.6rem}
}
/* The day's list on a handset: one card per patient, the shape the hospital's
   own app uses. Kept from the previous design — it was right. */
@media (max-width:700px){
  .todaytbody tr{display:block;border:1px solid var(--line);border-radius:var(--r);
     margin-bottom:.5rem;padding:.4rem .6rem;background:var(--surface)}
  .todaytbody td{display:flex;justify-content:space-between;gap:1rem;border:0;
     padding:.15rem 0;height:auto;align-items:baseline}
  .todaytbody td::before{content:attr(data-label);color:var(--muted);font-size:var(--t-meta)}
  .todaytbody td.name{font-size:var(--t-body);white-space:normal}
  /* Phase 2.1: a card is exactly the width of the screen. The long name, the
     markers and the status dropdown wrap or shrink inside it instead of
     pushing the right-hand values off the edge. */
  #todayTable,.todaytbody{display:block;width:100%}
  .todaytbody td{min-width:0}
  .todaytbody td > *{min-width:0}
  /* The name is the card's title, so it needs no "Patient" label; every
     other value sits together on the right, however many parts it has
     ("FU" and "AWAY" were being spread across the card). */
  .todaytbody td{justify-content:flex-start;column-gap:.4rem}
  .todaytbody td::before{margin-right:auto}
  .todaytbody td.name{flex-wrap:wrap;column-gap:.5rem}
  .todaytbody td.name::before{content:none}
  .todaytbody td.name .pend-marks{margin:.15rem 0 0}
  .todaytbody td select{max-width:60%;min-width:0}
  .todaytbody td.spine{border-left:0;padding-left:0}
  /* the card layout turns every row into a box; the group banner stays a
     banner rather than becoming an empty-looking card of its own */
  .todaytbody tr.site-group{display:block;border:0;background:none;
     margin:.6rem 0 .3rem;padding:0}
  .todaytbody tr.site-group td{display:block;background:none;border:0;
     border-bottom:1px solid var(--line-strong);padding:0 0 .15rem}
  .todaytbody tr.site-group td::before{content:none}
  #todayTable thead{display:none}
}
.print-only{display:none}

/* ------------------------------------------------------------- printing -- *
 * A clinic list on paper is a real part of the day -- it gets carried, ticked
 * and left on a desk -- so it prints as a list and not as a screenshot of an
 * application. Everything that is a control rather than information comes
 * off, and the form fields the clinic screen is built from print as their
 * values rather than as empty boxes.
 * ------------------------------------------------------------------------ */
@media print{
  @page{margin:14mm}
  :root{--t-tbl:10.5pt;--t-meta:9pt;--t-micro:8pt}
  body{background:#fff;color:#000;font-size:10.5pt}
  body.signed-in{padding:0}
  main{padding:0;max-width:none}

  /* chrome, controls and anything that only makes sense on a screen */
  #sidebar,#topbar,.page-actions,.worklane,.daystrip,.daystrip-tiles,.today-side,.tabs,.chipbar,.banner,#opsBanner,
  .row-actions,.panel-foot button,.tasks-pager,.crumb,.pb-actions,
  #clinicAddCard,#patientForm,#uploadDocForm,.offline-queue-banner,
  .offline-queue-lost-container,.sumbox .noteactions,.recordTabPanel-actions{
    display:none!important}

  .print-only{display:block}
  #printHead{margin:0 0 8pt;padding-bottom:6pt;border-bottom:1pt solid #000}
  #printHead .ph-practice{font-size:12pt;font-weight:700}
  #printHead .ph-what{font-size:11pt}
  #printHead .ph-when{font-size:8pt;color:#444}

  .panel,.card{box-shadow:none;border:0;margin:0 0 8pt}
  .panel > .panel-head,.card > h2{background:none;border:0;padding:0 0 3pt;
    font-size:11pt;font-weight:700}
  .page-head{margin:0 0 6pt}
  h1{font-size:13pt}

  /* Form controls print as what they hold, not as boxes to fill in. The
     clinic list is built entirely from inputs and selects; without this it
     prints as a sheet of empty rectangles. */
  input,select,textarea{border:0!important;background:none!important;
    padding:0!important;min-height:0!important;color:#000;font:inherit;
    -webkit-appearance:none;appearance:none;width:auto}
  select{background-image:none;padding-right:0!important}
  /* The time field's picker button prints as a stray clock glyph. */
  input::-webkit-calendar-picker-indicator,
  input::-webkit-inner-spin-button,
  input::-webkit-outer-spin-button{display:none!important;appearance:none}
  input[type=number]{width:3em}
  input[type=time]{width:5em}

  table{font-size:10.5pt}
  thead{display:table-header-group}          /* repeat headings on every page */
  tr{break-inside:avoid}
  th{background:none;border-bottom:.75pt solid #000;color:#000;
    text-transform:none;font-size:9pt;letter-spacing:0}
  td{border-bottom:.25pt solid #bbb;height:auto;padding:2.5pt 4pt}
  td.spine{border-left:0;padding-left:4pt}
  tr.done td,tr.dna td{color:#000;background:none}

  /* Status and type keep their word; the tint does not survive a mono
     printer and was never the thing carrying the meaning. */
  .next-badge{display:none!important}
  .dob-inline{display:none!important}
  button.row-alert{background:none!important;border:0!important;color:#000!important;padding:0!important;
    font-weight:700}
  select.st-select{color:#000!important;background:none!important}
  #todayRows tr.next-row td{box-shadow:none}
  .pill,.st,.ty,.tag,.tstate{background:none!important;color:#000!important;border:0;
    padding:0;font-size:inherit;text-transform:none;letter-spacing:0;font-weight:400;
    box-shadow:none!important;min-height:0;display:inline}
  .approval-bar{display:none!important}
  .panel-foot{background:none;border-top:.25pt solid #999;color:#000}
  .no-print{display:none!important}
  .st-cancelled{text-decoration:line-through}

  .table-empty{padding:6pt 0;text-align:left}
  /* Patient names are buttons that open the record; on paper they are just
     names, and accent blue costs colour ink for nothing. */
  a,button.link,a.link,.link{color:#000!important;text-decoration:none}
  #apptRows button.link,#todayRows button.link{font-weight:600}
  /* #printHead is the title of the sheet, so the screen's own title is one
     restatement too many. */
  .page-title{display:none!important}
  .entry{border:.25pt solid #999;break-inside:avoid}
  .entry > summary{background:none}
  .patient-banner{position:static;border:0;border-bottom:1pt solid #000;
    box-shadow:none;border-radius:0}
  #recordPanel{border:0}
  .pb-compact,.record-context,.pb-alert-more{display:none!important}
  .pb-alert-text{-webkit-line-clamp:unset!important;display:block!important}
  .recordTabPanel[hidden]{display:none!important}
}

/* Transcript in the Audio tab */
.audio-tscript{margin-top:.5rem}
.audio-tscript summary{cursor:pointer;color:var(--link,#1d4e6b)}
.audio-tscript .transcript-text{white-space:pre-wrap;max-width:80ch;line-height:1.6;margin:.5rem 0}
.dl-link{display:inline-block;margin:.35rem 0;font-size:var(--t-meta)}

/* ------------------------------------------ information leaflets (044) -- */
.leaflet-box{margin-top:.7rem;border-top:1px solid var(--line);padding-top:.6rem}
.leaflet-hint{font-size:var(--t-micro);margin:0 0 .3rem}
.leaflet-list{list-style:none;margin:0 0 .4rem;padding:0}
.leaflet{display:flex;gap:.5rem;align-items:flex-start;font-size:var(--t-meta);margin:.3rem 0}
.leaflet-text{flex:1 1 auto;min-width:0;display:flex;gap:.1rem .4rem;align-items:baseline;flex-wrap:wrap}
.leaflet-retired-note{flex-basis:100%;margin-top:.1rem;min-height:0}
.leaflet-none{font-size:var(--t-meta)}
.leaflet-title{min-width:0;overflow-wrap:anywhere}
.leaflet-meta{font-size:var(--t-micro)}
.leaflet .leaflet-remove{flex:none}
.leaflet.retired .leaflet-title{text-decoration:line-through}
.leaflet-add{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.leaflet-select{width:auto;flex:1 1 12rem;min-width:0;min-height:26px;font-size:var(--t-meta)}
.leaflet-msg{display:block;font-size:var(--t-meta);margin-top:.25rem}
.leaflet-msg:empty{display:none}
.lf-list{list-style:none;margin:.4rem 0 .8rem;padding:0}
.lf-item{border-top:1px solid var(--line);padding:.5rem 0}
.lf-item:first-child{border-top:0}
.lf-head{display:flex;gap:.5rem;align-items:baseline;flex-wrap:wrap}
.lf-title{font-weight:600;overflow-wrap:anywhere}
.lf-meta{font-size:var(--t-micro)}
.lf-tools{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center;margin-top:.35rem}
.lf-upload{display:flex;gap:.5rem;flex-wrap:wrap;align-items:center;margin-top:.4rem}
.lf-upload input[type=text]{flex:1 1 16rem;min-width:0;width:auto}
.lf-upload input[type=file]{flex:1 1 14rem;min-width:0;width:auto}
.leaflet-send{display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;margin-top:.6rem}
.leaflet-send button{white-space:normal;text-align:left;max-width:100%}
.leaflet-send .muted:empty,.leaflet-send .err:empty{display:none}

/* Today on a handset — card repair (21 Sept 2026). Same cards, same colours;
   what was broken was the card's inside: the time and name sat in label
   rows, "No consultation linked" wrapped into three lines, the Next marker
   drew a rule under every field and the DNA tint filled only some fields.
   The time and name now head the card; every other field is one label/value
   line; row-level states (Next, DNA) are drawn on the card, not per field. */
@media (max-width:700px){
  .todaytbody tr[data-appt]{display:grid;grid-template-columns:auto minmax(0,1fr);
     column-gap:.6rem;row-gap:.15rem;align-items:baseline}
  .todaytbody tr[data-appt] > td{grid-column:1 / -1;background:none!important;box-shadow:none!important}
  .todaytbody tr[data-appt] > td.spine{grid-column:1;grid-row:1;font-weight:700;font-size:var(--t-body);
     font-variant-numeric:tabular-nums;padding-top:.1rem}
  .todaytbody tr[data-appt] > td.spine::before{content:none}
  .todaytbody tr[data-appt] > td.name{grid-column:2;grid-row:1;padding-bottom:.35rem;
     border-bottom:1px solid var(--line-2)!important;margin-bottom:.2rem}
  .todaytbody tr[data-appt] > td.name .row-alert{display:inline-flex;margin:.15rem 0 0}
  .todaytbody tr[data-appt] > td.name{row-gap:0}
  .todaytbody tr[data-appt] > td.name .dob-inline{display:block;flex-basis:100%;margin-top:0}
  .todaytbody tr[data-appt] > td.paperwork{max-width:none;min-width:0}
  .todaytbody tr[data-appt] > td.paperwork > *{text-align:right}
  .todaytbody .pw-none{white-space:nowrap}
  .todaytbody button.pw{flex-direction:row;flex-wrap:wrap;justify-content:flex-end;gap:.25rem}
  .todaytbody .paperwork .pill:not(.pw-primary){display:inline-flex}
  /* the card carries the row's state */
  .todaytbody tr[data-appt].dna{background:color-mix(in srgb,var(--alert-soft) 55%,var(--surface));
     border-color:var(--alert-line)}
  .todaytbody tr[data-appt].next-row{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
  .todaytbody tr[data-appt] .next-badge{margin-right:.35rem}
}

/* GP-letter dictation bar (22 Sept 2026). Fixed to the foot of the window so
   Stop and send is reachable from any screen -- the consultation transcript
   included -- while a dictation runs. See `dictation` in app.js. */
.dictation-bar{position:fixed;left:50%;transform:translateX(-50%);
     bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:90;display:flex;align-items:center;
     gap:.6rem;flex-wrap:wrap;width:max-content;max-width:calc(100vw - 32px);box-sizing:border-box;
     padding:.45rem .5rem .45rem .8rem;background:var(--surface);color:var(--ink);
     border:1px solid var(--danger-line);border-left:4px solid var(--danger);border-radius:var(--r-lg);
     box-shadow:var(--shadow-float);font-size:var(--t-tbl)}
.dictation-bar[hidden]{display:none}
/* Room under the page so the bar never sits over its last lines. */
body:has(#dictationBar:not([hidden])){padding-bottom:88px}
.dictation-bar-label{font-weight:600;color:var(--danger)}
.dictation-bar-label::before{content:"";display:inline-block;width:.55rem;height:.55rem;border-radius:50%;
     background:currentColor;margin-right:.4rem;animation:recpulse 1.4s ease-in-out infinite}
.dictation-bar[data-state=paused] .dictation-bar-label::before{animation:none;opacity:.45}
@media (prefers-reduced-motion:reduce){.dictation-bar-label::before{animation:none}}
.dictation-bar-clock{font-variant-numeric:tabular-nums;font-weight:600;color:var(--danger)}
.dictation-bar-acts{display:flex;gap:.4rem;flex-wrap:wrap;margin-left:auto}
.dictation-bar button.stop{background:var(--danger);border-color:var(--danger);color:#fff}
.dictation-bar button.confirming{color:var(--danger);border-color:var(--danger)}
.dictation-bar[data-state=uploading]{border-color:var(--info-line);border-left-color:var(--info)}
.dictation-bar[data-state=sent]{border-color:var(--ok-line);border-left-color:var(--ok)}
.dictation-bar[data-state=sent] .dictation-bar-msg{color:var(--ok);font-weight:600}
.dictation-bar[data-state=failed] .dictation-bar-msg{color:var(--danger);font-weight:600}

/* Medicolegal (048, 6 Oct 2026). The ML tag beside a claimant's name, and
   the note as a blank page: one box, no heading, tall enough to write in. */
.ml-tag{display:inline-block;margin-left:.45rem;padding:0 .4rem;border:1px solid var(--accent);
     border-radius:4px;color:var(--accent);background:var(--accent-soft);font-size:var(--t-micro);
     font-weight:700;letter-spacing:.04em;vertical-align:middle;line-height:1.5}
.note-sections.blank-page .sec{border:0;padding:0}
.density-reading .sec textarea.blank-page-text,
.sec textarea.blank-page-text{min-height:24rem}

/* ---------------------------------------------------- video call (050) --
   The dock is fixed to the corner and outlives every route change; the
   patient is heard through its <audio>, so Hide shrinks it to the header
   without dropping the sound. Larger is for when the face matters. */
.video-dock{position:fixed;right:var(--sp-4);top:calc(var(--topbar) + var(--sp-3));z-index:450;width:340px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--r-lg);
  box-shadow:0 10px 30px rgba(16,24,32,.18);display:flex;flex-direction:column;overflow:hidden}
.video-dock.large{width:min(640px,calc(100vw - 2 * var(--sp-4)))}
.vd-head{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);
  border-bottom:1px solid var(--line);background:var(--surface-2);cursor:move;touch-action:none;user-select:none}
.video-dock.dragging{box-shadow:0 16px 40px rgba(16,24,32,.28)}
.vd-title{font-size:var(--t-meta, 13px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.vd-status{font-size:12px;color:var(--muted);margin-left:auto;white-space:nowrap}
.vd-stage{position:relative;background:#0f1418;aspect-ratio:4/3}
.vd-remote{width:100%;height:100%;object-fit:cover;display:block}
.vd-wait{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:var(--sp-4);text-align:center;color:#dfe6ea;font-size:14px}
.vd-self{position:absolute;right:8px;bottom:8px;width:28%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r);border:1px solid rgba(255,255,255,.5);background:#000;transform:scaleX(-1)}
.vd-msg{margin:0;padding:var(--sp-2) var(--sp-3);font-size:13px;color:var(--muted)}
.vd-msg.err{color:var(--danger);background:var(--danger-soft)}
.vd-controls{display:flex;flex-wrap:wrap;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3)}
.vd-controls .on{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn)}
.vd-controls .danger{margin-left:auto}
.video-dock.minimised .vd-stage,.video-dock.minimised .vd-controls .vd-size{display:none}
.vd-audio{display:none}
@media (max-width:600px){
  .video-dock,.video-dock.large{left:var(--sp-2)!important;right:var(--sp-2)!important;width:auto;
    top:auto!important;bottom:var(--sp-2)!important}
  body:has(#dictationBar:not([hidden])) .video-dock{bottom:96px!important}
  .vd-head{cursor:default}
  /* Room to scroll anything (the Record button above all) clear of it. */
  body:has(.video-dock:not([hidden]):not(.minimised)){padding-bottom:400px}
  body:has(.video-dock.minimised:not([hidden])){padding-bottom:72px}
  .vd-controls .vd-size{display:none}
  .vd-stage{aspect-ratio:16/10}
}
@media print{.video-dock{display:none!important}}
.rail-video .side-body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--sp-2)}
.rail-video .side-body p{margin:0}
.video-link-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--sp-2);margin-top:4px;
  font-size:12px;color:var(--muted);white-space:normal}
.video-link-line .vl-status.sent{color:var(--ok)}
.video-link-line .vl-joined{color:var(--info)}
.video-link-line button{font-size:12px}
#clinicBanner{overflow-wrap:anywhere}
/* Virtual clinic payment (051). */
.pay-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--sp-2);margin-top:4px;
  font-size:12px;color:var(--muted);white-space:normal}
.pay-line button{font-size:12px}
.pay-state{font-weight:600;padding:1px 6px;border-radius:4px}
.pay-state.none{background:var(--line-2);color:var(--muted)}
.pay-state.unpaid{background:var(--warn-soft);color:var(--warn)}
.pay-state.overdue{background:var(--danger-soft);color:var(--danger)}
.pay-state.paid{background:var(--ok-soft);color:var(--ok)}
.pay-state.refunded{background:var(--info-soft);color:var(--info)}
tr.pay-row>td{background:var(--line-2);white-space:normal}
.pay-panel{display:flex;flex-direction:column;gap:var(--sp-2);padding:var(--sp-2) 0;font-size:13px;max-width:100%}
.pay-panel p{margin:0}
.pay-warn{color:var(--danger)}
.pay-ok{color:var(--ok);font-weight:600}
.pay-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-2)}
.pay-actions-main,.pay-actions-end{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.pay-form{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.pay-form select,.pay-form input{width:auto;flex:0 0 auto;min-height:var(--h-sm);font-size:13px}
.pay-form input[type=text]{min-width:12rem;flex:1 1 12rem;max-width:22rem}
.pay-form input[type=number]{width:7rem}
.pay-form .pay-hint{flex-basis:100%}
.pay-history a{color:var(--accent)}
.ty.unpaid-badge{background:var(--danger-soft);color:var(--danger)}
/* Virtual clinic workflow (8 Oct 2026). */
.pay-check{display:inline-flex;align-items:center;gap:.3rem;font-size:13px;white-space:nowrap}
.pay-check input{width:auto;min-height:0}
.pay-later{color:var(--warn);font-weight:600}
.pay-join{margin:0 0 var(--sp-2);font-size:13px}
.pay-join.pay-warn{font-weight:700}
.pay-state.later{background:var(--warn-soft);color:var(--warn)}
.virtual-create{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center}
.virtual-create input{width:auto;flex:0 1 12rem}
#virtualRows td{vertical-align:top}
#virtualRows tr.clickable,#virtualClinicRows tr.clickable{cursor:pointer}
#virtualRows tr.clickable:hover,#virtualClinicRows tr.clickable:hover{background:var(--line-2)}
#nav .nav-badge.alert{background:var(--danger);color:#fff}
/* On a phone the clinic table scrolls sideways; keep the panel in view. */
@media (max-width:760px){.pay-panel{position:sticky;left:0;max-width:calc(100vw - 64px)}}
@media print{.pay-line button,tr.pay-row{display:none!important}}

/* Reopen for correction (7 Oct 2026) -- reason box inline in the action strip. */
.reopen-letter{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.35rem}
.reopen-letter .reopen-box{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.35rem}
.reopen-letter .reopen-box[hidden]{display:none}
.reopen-letter .reopen-reason{min-width:16rem;max-width:100%}

/* Possible duplicate records on the patient record (058, 27 Oct 2026). */
.dup-strip{margin:.6rem 0 0}
.dup-strip .dup-line{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .75rem;margin-top:.35rem}
.dup-strip .dup-line a{color:inherit;text-decoration:underline;overflow-wrap:anywhere}
.dup-strip .merge-panel{flex-basis:100%;background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:8px;padding:.6rem .75rem;margin-top:.25rem}
.dup-strip .merge-panel p{margin:.25rem 0}
.dup-strip .merge-panel .warnline{color:var(--warn)}

/* Multi-file document upload (1 Nov 2026) */
.ud-list{list-style:none;margin:.6rem 0 0;padding:0;border:1px solid var(--line);border-radius:8px;max-height:16rem;overflow:auto;background:var(--surface)}
.ud-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.1rem .75rem;padding:.4rem .65rem;border-top:1px solid var(--line-2);font-size:.88rem}
.ud-item:first-child{border-top:0}
.ud-name{overflow-wrap:anywhere;font-weight:500;color:var(--ink)}
.ud-size{text-align:right;white-space:nowrap}
.ud-item .ud-state{grid-column:1/-1;font-size:.82rem;color:var(--muted)}
.ud-item.ud-busy .ud-state{color:var(--accent)}
.ud-item.ud-done .ud-state{color:var(--ok)}
.ud-item.ud-dup .ud-state{color:var(--warn)}
.ud-item.ud-fail .ud-state{color:var(--err);font-weight:500}
#uploadDocForm.ud-drop{outline:2px dashed var(--accent);outline-offset:-4px;background:var(--accent-soft)}

/* Seen -- no letter (2 Nov 2026): Needs you group and the Tasks panel. */
.ny-missing .ny-title{color:var(--warn)}
.missing-letters{margin-bottom:1rem;border-color:var(--warn-line)}
.missing-letters .panel-head{flex-wrap:wrap}
.missing-letters .panel-head h2{color:var(--warn)}
.missing-letters .panel-head .page-sub{flex-basis:100%;margin:.2rem 0 0}
.missing-letters .mini-list li{padding-left:0;padding-right:0}