/* =====================================================================
   سجلّ العيادة — shared components
   Requires tokens.css. Written with logical properties (inline-start/end)
   so the English (LTR) version mirrors without new rules.
   Pages must not add component styles; page <style> = layout only.
   ===================================================================== */

/* ---------- Base / reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: var(--font); background: var(--bg); color: var(--ink);
  font-size: var(--fs-base); line-height: 1.6;
  /* App frame: bar on top, <main> fills and scrolls on its own */
  display: grid; grid-template-rows: var(--bar-h) minmax(0, 1fr); overflow: hidden;
}
body[data-area="auth"] { display: block; overflow: auto; }
bdi, kbd, .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
button, input, select, textarea { font: inherit; color: inherit; border: 0; background: none; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .55; }
a { color: inherit; }
img { max-width: 100%; display: block; }
ul, ol { list-style: none; }
::selection { background: var(--primary-tint); color: var(--ink); }
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 3px; }
.bar :focus-visible { outline-color: var(--sidebar-active-ink); }
[hidden] { display: none !important; }
/* Visually hidden, still read by screen readers (pinned to the inline start so it never widens a phone page) */
.sr { position: absolute; inset-inline-start: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Text helpers */
.muted { color: var(--muted); }
.ink-2 { color: var(--ink-2); }
.strong { font-weight: 800; }
.link { color: var(--primary); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; }
.link:hover { text-decoration: underline; }
.is-up { color: var(--accent2-ink); }
.sep { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background: var(--muted); flex: none; }

/* ---------- Keyboard key ---------- */
kbd {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: var(--r-tag);
  font-size: 11px; font-weight: 500; line-height: 1; white-space: nowrap;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
}

/* ---------- Title bar (rendered by shell.js into <header id="app-bar">) ---------- */
.bar {
  display: flex; align-items: center; gap: 4px; padding: 0 14px; min-width: 0;
  background: var(--sidebar-bg); color: var(--sidebar-ink); border-bottom: 1px solid var(--edge);
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 15px; color: var(--sidebar-strong); margin-inline-end: 14px; white-space: nowrap; text-decoration: none; }
.mark { width: 30px; height: 30px; border-radius: var(--r-row); background: var(--sidebar-active-bg); color: var(--sidebar-active-ink); display: grid; place-items: center; font-size: 17px; flex: none; }
.nav { display: flex; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 10px; border-radius: var(--r-ctl); color: var(--sidebar-ink); text-decoration: none; font-weight: 700; font-size: 13px; white-space: nowrap; }
.nav a i { font-size: 17px; }
.nav a:hover { background: color-mix(in srgb, var(--sidebar-ink) 12%, transparent); color: var(--sidebar-strong); }
.nav a.on { background: var(--sidebar-active-bg); color: var(--sidebar-active-ink); }
.tools { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; }
/* Bar button */
.hbtn { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 11px; border-radius: var(--r-ctl); font-weight: 700; font-size: 12.5px; color: var(--sidebar-strong); white-space: nowrap; text-decoration: none; }
.hbtn:hover { background: color-mix(in srgb, var(--sidebar-ink) 12%, transparent); }
.hbtn i { font-size: 16px; }
.bar kbd { margin-inline-start: auto; background: transparent; color: var(--sidebar-ink); border-color: color-mix(in srgb, var(--sidebar-ink) 35%, transparent); }
.hbtn.search { flex: 0 1 220px; min-width: 0; background: color-mix(in srgb, var(--sidebar-ink) 12%, transparent); color: var(--sidebar-ink); font-weight: 400; }
/* Working-clinic selector */
.hbtn.clinic { flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; line-height: 1.25; padding-inline-end: 26px; position: relative; }
.hbtn.clinic small { font-size: 11px; font-weight: 400; color: var(--sidebar-ink); }
.hbtn.clinic span { display: flex; align-items: center; gap: 6px; }
.hbtn.clinic .ph-caret-down { position: absolute; inset-inline-end: 8px; top: 50%; translate: 0 -50%; font-size: 13px; color: var(--sidebar-ink); }
.hbtn.lang { font-family: var(--font-num); font-weight: 600; font-size: 12px; border: 1px solid color-mix(in srgb, var(--sidebar-ink) 35%, transparent); padding: 0 10px; }
.hbtn.sync { gap: 6px; border: 1px solid color-mix(in srgb, var(--sidebar-ink) 28%, transparent); }
.hbtn.sync .ph-cloud-arrow-up, .hbtn.sync .ph-cloud-check { color: var(--sidebar-active-ink); }
.fail { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: var(--r-tag); background: var(--accent1); color: var(--accent1-on); font-size: 11px; font-weight: 800; }
.owner-flag { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: var(--r-tag); background: var(--sidebar-active-bg); color: var(--sidebar-active-ink); font-size: 11.5px; font-weight: 800; white-space: nowrap; margin-inline-end: 10px; }
/* Signed-in user */
.me { position: relative; display: flex; align-items: center; gap: 8px; height: 36px; padding-inline: 11px 0; border-radius: var(--r-ctl); margin-inline-start: 2px; white-space: nowrap; }
.me::before { content: ""; position: absolute; inset-inline-start: 0; top: 2px; bottom: 2px; width: 1px; background: color-mix(in srgb, var(--sidebar-ink) 22%, transparent); }
.me:hover { background: color-mix(in srgb, var(--sidebar-ink) 12%, transparent); }
.me .av { width: 32px; height: 32px; border-radius: 50%; background: var(--sidebar-active-bg); color: var(--sidebar-active-ink); font-size: 12.5px; }
.me b { font-size: 12.5px; color: var(--sidebar-strong); }
/* Phone menu button: shown under 720px, where nav, clinic, language and user menu move into #appmenu */
.menu-btn { display: none; }

/* Clinic colour dot (clinic1 by default, .n = clinic2 النصر) */
.cdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--accent2); flex: none; }
.cdot.n { background: var(--accent1); }

/* ---------- Page layout (standard pages) ---------- */
/* <main class="page"><div class="page-inner"> page-head + content </div></main> */
.page { overflow: auto; min-height: 0; padding: 20px 24px 40px; }
.page-inner { max-width: 1360px; margin-inline: auto; display: flex; flex-direction: column; gap: 16px; }
.page-head { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-bottom: 4px; }
.page-head > div:first-child { min-width: 0; }
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: var(--fs-xs); color: var(--muted); margin-bottom: 4px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--primary); }
.crumbs i { font-size: 11px; }
.page-title { font-size: var(--fs-2xl); font-weight: 800; line-height: 1.3; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-sub { margin-top: 4px; font-size: 13px; color: var(--muted); display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.page-actions { margin-inline-start: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Layout helpers (the only layout classes pages need most of the time) */
.stack { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.stack.tight { gap: 8px; }
.cluster { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.spacer { margin-inline-start: auto; }
.grid { display: grid; gap: 16px; min-width: 0; }
.grid > * { min-width: 0; }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.split.wide-aside { grid-template-columns: minmax(0, 1fr) 420px; }

/* ---------- Pane (card) ---------- */
.pane { background: var(--surface); border-radius: var(--r-pane); box-shadow: var(--depth); border: 1px solid var(--edge); min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.pane-head { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-bottom: 1px solid var(--line); min-height: 52px; }
.pane-head h2, .pane-head h3 { font-size: 15px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.pane-head h2 i, .pane-head h3 i { color: var(--primary); font-size: 18px; }
.pane-head small { font-size: var(--fs-xs); color: var(--muted); font-weight: 400; }
.pane-head .acts { margin-inline-start: auto; display: flex; gap: 8px; align-items: center; }
.pane-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 16px; }
.pane-body.flush { padding: 0; gap: 0; }
.pane-foot { display: flex; align-items: center; gap: 8px; padding: 10px 18px; background: var(--surface-2); border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); }
/* Inner block on surface-2 (used for med rows, file rows, small cards) */
.tile { padding: 10px 12px; border-radius: var(--r-row); background: var(--surface-2); }

/* ---------- Section label (small muted heading with icon + trailing action) ---------- */
.blk > h2, .sect-label { font-size: 12.5px; font-weight: 800; color: var(--muted); margin-bottom: 6px; display: flex; align-items: center; gap: 7px; }
.blk > h2 i, .sect-label i { color: var(--primary); font-size: 16px; }
.blk > h2 > a, .blk > h2 > button, .sect-label > a, .sect-label > button { margin-inline-start: auto; display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--primary); text-decoration: none; }
.blk > h2 .count { margin-inline-start: 2px; }
.blk > h2 > select { margin-inline-start: auto; width: auto; height: 28px; font-size: 12px; font-weight: 700; color: var(--ink-2); }

/* ---------- Buttons ----------
   .btn + one of .primary | .ghost | .soft | .danger | .quiet ; sizes .sm | .lg ; .icon = square */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--r-ctl); font-weight: 800; font-size: 13px; white-space: nowrap; text-decoration: none; transition: transform .15s var(--ease), background .15s, border-color .15s; }
.btn:active { transform: translateY(1px); }
.btn i { font-size: 17px; }
.btn kbd { height: 18px; font-size: 10.5px; margin-inline-start: 2px; }
.btn.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--muted); }
.btn.soft { background: var(--primary-tint); color: var(--primary-strong); }
.btn.soft:hover { background: color-mix(in srgb, var(--primary-tint) 70%, var(--primary) 12%); }
.btn.primary { background: var(--primary); color: var(--primary-ink); box-shadow: 0 6px 14px -8px rgba(var(--shadow), .6); }
.btn.primary:hover { background: var(--primary-strong); }
.btn.primary kbd { background: transparent; color: var(--primary-ink); border-color: color-mix(in srgb, var(--primary-ink) 40%, transparent); }
.btn.danger { background: var(--danger); color: var(--danger-on); }
.btn.danger:hover { background: var(--danger-ink); }
.btn.danger.ghost { background: var(--surface); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--line)); }
.btn.quiet { color: var(--primary); padding: 0 8px; }
.btn.quiet:hover { background: var(--primary-tint); }
.btn.quiet.danger { background: none; color: var(--danger); }
.btn.quiet.danger:hover { background: var(--danger-tint); }
.btn.sm { height: 30px; padding: 0 10px; font-size: 12px; gap: 5px; }
.btn.sm i { font-size: 15px; }
.btn.lg { height: 42px; padding: 0 18px; font-size: 14px; }
.btn.icon { width: 36px; padding: 0; }
.btn.icon.sm { width: 30px; }
.btn.block { width: 100%; }
/* Plain icon button (close ×, row actions) */
.ibtn { width: 30px; height: 30px; border-radius: var(--r-row); display: inline-grid; place-items: center; color: var(--muted); font-size: 16px; flex: none; text-decoration: none; }
.ibtn:hover { background: var(--surface-2); color: var(--ink); }

/* ---------- Tags, chips, badges ---------- */
/* Clinic tag: .tag.c1 (الرمال) / .tag.c2 (النصر) */
.tag { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 9px; border-radius: var(--r-tag); white-space: nowrap; line-height: 1.6; }
.c1 { background: var(--clinic1); color: var(--clinic1-ink); }
.c2 { background: var(--clinic2); color: var(--clinic2-ink); }
/* Unsigned note */
.drafttag { display: inline-block; font-size: 11px; font-weight: 800; padding: 1px 8px; border-radius: var(--r-tag); border: 1px dashed color-mix(in srgb, var(--accent1) 75%, transparent); background: color-mix(in srgb, var(--accent1-tint) 60%, transparent); color: var(--accent1-ink); white-space: nowrap; line-height: 1.6; }
/* ICD-10 code */
.code { font-family: var(--font-num); font-weight: 600; font-size: 12px; min-width: 56px; text-align: center; padding: 2px 8px; border-radius: var(--r-row); background: var(--primary-tint); color: var(--primary-strong); white-space: nowrap; }
/* Status badge: .badge + .ok (signed/paid/active) | .warn (failed, suspended) | .info | .err | .mute; tinted ones carry a hairline of their own hue */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800; padding: 2px 9px; border-radius: var(--r-tag); white-space: nowrap; line-height: 1.6; background: var(--surface-2); color: var(--ink-2); }
.badge i { font-size: 13px; }
.badge.ok { background: var(--accent2-tint); color: var(--accent2-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent2) 30%, transparent); }
.badge.warn { background: var(--accent1-tint); color: var(--accent1-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent1) 45%, transparent); }
.badge.info { background: var(--primary-tint); color: var(--primary-strong); }
.badge.err { background: var(--danger-tint); color: var(--danger-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 25%, transparent); }
.badge.mute { background: transparent; color: var(--muted); border: 1px solid var(--line); }
.badge.solid-warn { background: var(--accent1); color: var(--accent1-on); }
/* Dose change pill */
.dose-chg { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: var(--r-tag); background: var(--accent2-tint); color: var(--accent2-ink); white-space: nowrap; }
.dose-chg.same { background: var(--surface-2); color: var(--ink-2); font-weight: 700; }
/* Counter inside tabs/buttons */
.count { font-family: var(--font-num); font-size: 11px; background: var(--surface-2); color: var(--ink-2); border-radius: var(--r-tag); padding: 0 6px; line-height: 18px; font-weight: 500; }

/* Filter chips: role="radiogroup" > button.chip[role=radio][aria-checked] (shell.js toggles) */
.filter { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 8px 18px; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.filter > span { margin-inline-end: 2px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: var(--r-tag); border: 1px solid var(--line); background: var(--surface); font-size: 12px; font-weight: 700; color: var(--ink-2); white-space: nowrap; text-decoration: none; }
.chip:hover { border-color: var(--muted); }
.chip[aria-checked="true"], .chip[aria-pressed="true"], .chip.on { background: var(--primary-tint); border-color: transparent; color: var(--primary-strong); }
.chip .cdot { width: 8px; height: 8px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); }
.chip b { font-family: var(--font-num); font-weight: 500; font-size: 11px; color: var(--muted); }
.chip .x { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: var(--r-tag); margin-inline-end: -4px; font-size: 12px; color: var(--muted); }
.chip .x:hover { background: var(--surface-2); color: var(--danger); }
.chip.add { border-style: dashed; color: var(--primary); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---------- Tabs ----------
   Underline tabs: nav.tabs > a[.on] (links) or div.tabs[role=tablist] > button[role=tab][aria-selected] (in-page, shell.js) */
.tabs { display: flex; padding: 0 12px; border-bottom: 1px solid var(--line); }
.tabs > a, .tabs > button { position: relative; display: flex; align-items: center; gap: 4px; padding: 10px 8px 11px; font-size: 12.5px; font-weight: 700; color: var(--muted); text-decoration: none; white-space: nowrap; }
.tabs > a:hover, .tabs > button:hover { color: var(--ink); }
.tabs > a small, .tabs > button small { font-family: var(--font-num); font-size: 11px; background: var(--surface-2); color: var(--ink-2); border-radius: var(--r-tag); padding: 0 6px; line-height: 18px; }
.tabs > .on, .tabs > [aria-selected="true"] { color: var(--primary-strong); }
.tabs > .on::after, .tabs > [aria-selected="true"]::after { content: ""; position: absolute; inset-inline: 6px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); }
.tabs.lg > a, .tabs.lg > button { font-size: 13.5px; padding: 12px 10px 13px; }
/* Document tabs (open notes on the note pane) */
.doctabs { display: flex; align-items: flex-end; gap: 4px; padding: 10px 14px 0; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.doctabs [role="tablist"] { display: flex; gap: 4px; }
.dt { display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border-radius: 5px 5px 0 0; font-size: 12.5px; font-weight: 700; color: var(--muted); white-space: nowrap; text-decoration: none; }
.dt:hover { color: var(--ink); }
.dt[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 -1px 0 var(--line), 1px 0 0 var(--line), -1px 0 0 var(--line); margin-bottom: -1px; height: 39px; }
.dt i { font-size: 15px; }
.dt .ph-seal-check { color: var(--accent2-ink); }
.dt .ph-pencil-simple-line { color: var(--accent1-ink); }
.dt .x { font-size: 12px; color: var(--muted); width: 20px; height: 20px; display: grid; place-items: center; border-radius: var(--r-tag); }
.dt .x:hover { background: var(--surface-2); color: var(--ink); }
.dt.add { width: 36px; justify-content: center; padding: 0; }
.docact { margin-inline-start: auto; display: flex; gap: 8px; padding-bottom: 8px; }
/* Segmented control: div.seg[role=radiogroup] > button[role=radio][aria-checked] */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-ctl); background: var(--surface-2); border: 1px solid var(--line); }
.seg > button { height: 28px; padding: 0 12px; border-radius: var(--r-row); font-size: 12px; font-weight: 700; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.seg > button:hover { color: var(--ink); }
.seg > [aria-checked="true"] { background: var(--surface); color: var(--primary-strong); box-shadow: 0 1px 2px rgba(var(--shadow), .14); }

/* ---------- Tables ----------
   <div class="table-wrap"><table class="table"> ... ; th[aria-sort] for sortable look;
   tr[aria-selected=true]; td.num for numbers (aligned to end) */
.table-wrap { overflow: auto; min-width: 0; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: start; font-size: 12px; font-weight: 800; color: var(--muted); padding: 9px 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); white-space: nowrap; position: sticky; top: 0; z-index: 1; }
.table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table th:first-child, .table td:first-child { padding-inline-start: 18px; }
.table th:last-child, .table td:last-child { padding-inline-end: 18px; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: color-mix(in srgb, var(--surface-2) 70%, transparent); }
.table tbody tr[aria-selected="true"], .table tbody tr:target { background: var(--primary-tint); }
.table tbody tr.alert { background: color-mix(in srgb, var(--accent1-tint) 45%, transparent); }
.table tr[data-href] { cursor: pointer; }
.table .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; text-align: end; }
.table th.num { font-family: inherit; }
.table .t-main { font-weight: 700; color: var(--ink); text-decoration: none; }
.table a.t-main:hover { color: var(--primary); }
.table .t-sub { display: block; font-size: var(--fs-xs); color: var(--muted); font-weight: 400; }
.table .t-acts { text-align: end; white-space: nowrap; width: 1%; }
.table td.shrink, .table th.shrink { width: 1%; white-space: nowrap; }
.table tfoot td { font-weight: 800; background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 0; }
/* Totals footer under line items (invoice): <table class="table totals"> … <tfoot><tr><td class="lbl">… ; tr.due = total row */
.table.totals tfoot td { background: var(--surface); border-top: 0; font-weight: 700; }
.table.totals tfoot tr:first-child td { border-top: 1px solid var(--line); }
.table.totals tfoot td.lbl { text-align: end; color: var(--muted); }
.table.totals tfoot tr.due td { background: var(--surface-2); font-weight: 800; }
/* Sortable header look: <th aria-sort="ascending|descending|none"><button class="th-sort">…<i class="ph ph-caret-up-down"></i></button></th> */
.th-sort { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; color: inherit; }
.th-sort i { font-size: 12px; opacity: .6; }
.table th[aria-sort="ascending"], .table th[aria-sort="descending"] { color: var(--primary-strong); }
.table th[aria-sort="ascending"] .th-sort i, .table th[aria-sort="descending"] .th-sort i { opacity: 1; }
/* Patient cell (avatar + name + file no) */
.who-cell { display: flex; align-items: center; gap: 10px; min-width: 0; }
.who-cell .av { width: 32px; height: 32px; font-size: 11.5px; }
/* Pagination */
.pager { display: flex; align-items: center; gap: 4px; padding: 10px 18px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); }
.pager > span:first-child { margin-inline-end: auto; }
.pager button, .pager a { min-width: 30px; height: 30px; padding: 0 8px; border-radius: var(--r-row); display: inline-grid; place-items: center; font-family: var(--font-num); font-weight: 600; color: var(--ink-2); text-decoration: none; }
.pager button:hover, .pager a:hover { background: var(--surface-2); }
.pager [aria-current="page"] { background: var(--primary-tint); color: var(--primary-strong); }
/* Toolbar above a table (search + chips + actions) */
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 18px; border-bottom: 1px solid var(--line); }
.toolbar .input-search { width: 300px; }

/* ---------- Forms ----------
   .form-sec > .form-sec-head + .fields (grid) > .field > label.label + control + .hint/.error */
.form-sec { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px 28px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.form-sec:first-child { padding-top: 0; }
.form-sec:last-child { border-bottom: 0; }
.form-sec-head h3 { font-size: 14px; font-weight: 800; color: var(--ink); }
.form-sec-head p { font-size: var(--fs-xs); color: var(--muted); margin-top: 4px; line-height: 1.55; }
.form-sec.stacked { grid-template-columns: 1fr; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; align-content: start; }
.fields.cols-1 { grid-template-columns: minmax(0, 1fr); }
.fields.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fields .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.label { font-size: 12.5px; font-weight: 700; color: var(--ink-2); display: flex; align-items: center; gap: 4px; }
.label small { font-weight: 400; color: var(--muted); margin-inline-start: auto; }
.req { color: var(--danger); font-weight: 800; }
.hint { font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.error-text { font-size: var(--fs-xs); color: var(--danger); font-weight: 700; display: flex; align-items: center; gap: 4px; }
/* Text input / select / textarea (also date, number, search) */
.input { width: 100%; height: 36px; padding: 0 11px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 13.5px; transition: border-color .15s, box-shadow .15s; }
.input::placeholder { color: var(--muted); opacity: .8; }
.input:hover { border-color: color-mix(in srgb, var(--muted) 55%, var(--line)); }
.input:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); }
.input:disabled, .input[readonly] { background: var(--surface-2); color: var(--ink-2); }
.input.num, input.input[type="tel"], input.input[type="number"], input.input[type="date"] { font-family: var(--font-num); }
[dir="rtl"] input.input[type="tel"], [dir="rtl"] input.input[dir="ltr"] { text-align: end; }
textarea.input { height: auto; min-height: 96px; padding: 9px 11px; line-height: 1.75; resize: vertical; }
textarea.input.note { min-height: 140px; font-size: 14px; }
/* Chevron drawn with two gradients so it takes the --muted token; sits at the inline-end */
select.input { appearance: none; padding-inline-end: 32px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-size: 5px 5px; background-repeat: no-repeat; background-position: left 14px center, left 19px center; }
[dir="ltr"] select.input, select.input[dir="ltr"] { background-position: right 19px center, right 14px center; }
select.input[dir="rtl"] { background-position: left 14px center, left 19px center; }
.input.sm { height: 30px; font-size: 12.5px; }
/* Error state: add .is-error on .field */
.field.is-error .input { border-color: var(--danger); }
.field.is-error .input:focus { box-shadow: 0 0 0 3px var(--danger-tint); }
.field.is-error .label { color: var(--danger-ink); }
/* Search input with icon: <label class="input-search"><i class="ph ph-magnifying-glass"></i><input placeholder=…></label> */
.input-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 11px; border-radius: var(--r-ctl); border: 1px solid var(--line); background: var(--surface); min-width: 0; }
.input-search:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint); }
.input-search i { color: var(--muted); font-size: 16px; }
.input-search input { flex: 1; min-width: 0; outline: 0; font-size: 13.5px; }
.input-search input::placeholder { color: var(--muted); }
.input-search kbd { flex: none; }
/* Large primary search (patients registry) */
.input-search.lg { height: 50px; padding-inline: 16px; gap: 12px; border-width: 1.5px; }
.input-search.lg > i { font-size: 21px; color: var(--primary); }
.input-search.lg input { font-size: 16px; }
/* Input with fixed affix (unit, currency): <div class="input-affix"><input class="input"><span>د.أ</span></div> */
.input-affix { position: relative; display: flex; min-width: 0; }
.input-affix .input { padding-inline-end: 52px; }
/* A dir="ltr" number inside an RTL page: its own inline-start is the side the affix sits on */
[dir="rtl"] .input-affix .input[dir="ltr"], [dir="ltr"] .input-affix .input[dir="rtl"] { padding-inline: 52px 11px; }
.input-affix > span { position: absolute; inset-inline-end: 1px; top: 1px; bottom: 1px; display: grid; place-items: center; min-width: 40px; padding: 0 8px; font-size: 12px; color: var(--muted); border-inline-start: 1px solid var(--line); background: var(--surface-2); border-start-end-radius: calc(var(--r-ctl) - 1px); border-end-end-radius: calc(var(--r-ctl) - 1px); pointer-events: none; white-space: nowrap; }
/* Checkbox / radio: native inputs, tinted. <label class="check"><input type="checkbox"> نص</label> */
.check { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); cursor: pointer; line-height: 1.4; }
.check input { width: 16px; height: 16px; accent-color: var(--primary); flex: none; margin: 0; }
.check small { display: block; color: var(--muted); font-size: var(--fs-xs); }
.check.top { align-items: flex-start; }
.check.top input { margin-top: 2px; }
.checks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.checks.col { flex-direction: column; }
/* Switch: <label class="check"><input type="checkbox" class="switch"> نص</label> */
input.switch { appearance: none; width: 34px; height: 20px; border-radius: 10px; background: var(--line); position: relative; cursor: pointer; transition: background .15s; flex: none; }
input.switch::after { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgba(var(--shadow), .3); transition: inset-inline-start .15s var(--ease); }
input.switch:checked { background: var(--primary); }
input.switch:checked::after { inset-inline-start: 16px; }
.sw-state { font-size: 12px; font-weight: 700; color: var(--muted); min-width: 40px; }
.sw-state::before { content: attr(data-off); }
.switch:checked + .sw-state { color: var(--primary); }
.switch:checked + .sw-state::before { content: attr(data-on); }
/* Form action bar at the end of a form */
.form-actions { display: flex; align-items: center; gap: 8px; padding-top: 16px; border-top: 1px solid var(--line); }

/* ---------- Allergy band (danger is reserved for this + errors) ---------- */
.allergy { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 10px; align-items: center; padding: 8px 12px; border-radius: var(--r-row); background: var(--danger-tint); color: var(--danger-ink); font-size: 12.5px; }
.allergy > i { font-size: 20px; color: var(--danger); }
.allergy p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; }
.allergy b { font-size: 13.5px; font-weight: 800; }
.allergy span { color: var(--danger-ink); }
.allergy.none { background: var(--surface-2); color: var(--muted); }
.allergy.none > i { color: var(--muted); }
.allergy:has(> a) { grid-template-columns: auto minmax(0, 1fr) auto; }
.allergy > a { font-size: 12px; font-weight: 700; color: var(--danger-ink); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Notices: .notice + .info | .warn | .error | .ok ----------
   <div class="notice warn"><i class="ph-fill ph-warning"></i><div><b>عنوان</b><p>نص</p></div><div class="acts">…</div></div> */
.notice { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 2px 10px; align-items: start; padding: 10px 14px; border-radius: var(--r-row); font-size: 12.5px; line-height: 1.55; background: var(--primary-tint); color: var(--primary-strong); }
.notice > i { font-size: 19px; margin-top: 1px; }
.notice b { display: block; font-size: 13.5px; font-weight: 800; }
.notice p { margin-top: 1px; }
.notice .acts { display: flex; gap: 6px; align-self: center; }
.notice .acts .btn { height: 30px; font-size: 12px; padding: 0 12px; background: var(--surface); color: inherit; box-shadow: 0 1px 2px rgba(var(--shadow), .12); border: 0; }
.notice.warn { background: var(--accent1-tint); color: var(--accent1-ink); }
.notice.error { background: var(--danger-tint); color: var(--danger-ink); }
.notice.error > i { color: var(--danger); }
.notice.ok { background: var(--accent2-tint); color: var(--accent2-ink); }
/* Signed/locked state block */
.signed { display: flex; align-items: center; gap: 9px; padding: 7px 12px; border-radius: var(--r-row); background: var(--accent2-tint); color: var(--accent2-ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent2) 30%, transparent); font-size: 12px; line-height: 1.45; }
.signed > i { font-size: 20px; }
.signed b { display: flex; align-items: center; gap: 5px; font-size: 13px; }
.signed b i { font-size: 13px; }

/* ---------- Empty state ---------- */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 40px 20px; color: var(--muted); font-size: 13px; }
.empty > i { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--primary); font-size: 24px; margin-bottom: 6px; }
.empty b { color: var(--ink); font-size: 15px; font-weight: 800; }
.empty p { max-width: 42ch; line-height: 1.6; }
.empty .cluster { margin-top: 10px; justify-content: center; }

/* ---------- Avatars ----------
   .av = 34px square list avatar; .av.lg = 52px patient avatar; .av.round = person (staff/doctor) */
.av { width: 34px; height: 34px; border-radius: var(--r-row); background: var(--surface-2); color: var(--primary-strong); display: grid; place-items: center; font-weight: 800; font-size: 12px; flex: none; white-space: nowrap; }
.av.lg { width: 52px; height: 52px; border-radius: var(--r-tag); background: var(--primary); color: var(--primary-ink); font-size: 18px; }
.av.round { border-radius: 50%; background: var(--primary-tint); }
/* Doctor identity (owner's combined view) */
.av.doc-a { background: var(--doc-a-tint); color: var(--doc-a-ink); }
.av.doc-b { background: var(--doc-b-tint); color: var(--doc-b-ink); }
/* Patient avatar: neutral silhouette by gender instead of initials (class pt-m / pt-f, built by EMR.avatar) */
.av.pt-m, .av.pt-f { position: relative; overflow: hidden; font-size: 0; color: transparent; background: color-mix(in srgb, var(--muted) 38%, var(--surface)); }
.av.pt-m::after, .av.pt-f::after { content: ""; position: absolute; inset: 0; background: var(--surface); -webkit-mask: var(--sil) center bottom / 100% 100% no-repeat; mask: var(--sil) center bottom / 100% 100% no-repeat; }
.av.pt-m { --sil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='40' r='19'/%3E%3Cpath d='M14 100C14 76 31 66 50 66s36 10 36 34Z'/%3E%3C/svg%3E"); }
.av.pt-f { --sil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 15C34 15 25 27 25 43c0 14-2 23-7 31h64c-5-8-7-17-7-31 0-16-9-28-25-28Z'/%3E%3Cpath d='M17 100c0-20 15-32 33-32s33 12 33 32Z'/%3E%3C/svg%3E"); }
.av.lg.pt-m, .av.lg.pt-f { background: color-mix(in srgb, var(--primary) 22%, var(--surface)); }

/* ---------- Key-value list ----------
   <dl class="kv"><div><dt>…</dt><dd>…</dd></div>…</dl> ; .cols-2 for two columns; --kv-dt sets label width */
.kv { display: grid; grid-template-columns: 1fr; gap: 0 22px; }
.kv.cols-2 { grid-template-columns: 1fr 1fr; }
.kv > div { display: flex; gap: 10px; font-size: 13.5px; padding: 7px 0; border-bottom: 1px dashed var(--line); min-width: 0; }
.kv dt { min-width: var(--kv-dt, 64px); color: var(--muted); font-weight: 700; flex: none; }
.kv dd { color: var(--ink); min-width: 0; }
.kv.split-ends dd { margin-inline-start: auto; text-align: end; font-weight: 700; }
/* Comparison rows (label left, value right) */
.delta { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.delta span { color: var(--muted); }
.delta b { font-weight: 700; text-align: end; }

/* ---------- Stat tiles (dashboard, reports; restrained) ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stat { background: var(--surface); border-radius: var(--r-pane); box-shadow: var(--depth); border: 1px solid var(--edge); padding: 14px 18px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.stat > span { font-size: 12.5px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.stat > span i { color: var(--primary); font-size: 16px; }
.stat > b { font-family: var(--font-num); font-size: 24px; font-weight: 600; color: var(--ink); line-height: 1.35; font-variant-numeric: tabular-nums; }
.stat > b small { font-size: 13px; font-weight: 500; color: var(--muted); margin-inline-start: 4px; }
.stat > small { font-size: var(--fs-xs); color: var(--muted); }
.stat > small .is-up { font-weight: 700; }
[dir="ltr"] .stat > b small:first-child { margin-inline: 0 6px; }
/* Stat inside a pane-body (no card chrome) */
.stat.inset { box-shadow: none; border: 0; padding: 0; background: none; }
.status-on { color: var(--accent2-ink); }
.status-off { color: var(--accent1-ink); }
/* Big figure inside a .tile (patient invoice totals) */
.figure { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px 14px; }
.figure > span { font-size: 12.5px; font-weight: 700; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.figure > span i { color: var(--primary); font-size: 16px; }
.figure > b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.figure > b small { font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--muted); margin-inline-start: 4px; }
.figure > small { font-size: var(--fs-xs); color: var(--muted); }
.figure .btn { align-self: flex-start; margin-top: 8px; }
/* Grand total line: label + big number; .sum adds a rule above (summary card) */
.grand { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.grand.sum { padding-top: 10px; border-top: 1px solid var(--line); }
.grand span { font-weight: 800; }
.grand b { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-size: var(--fs-2xl); font-weight: 600; }
.grand b small { font-family: var(--font); font-size: 13px; font-weight: 500; color: var(--muted); margin-inline-start: 4px; }
/* Simple bar meter (reports): <div class="meter"><i style="--v:62%"></i></div>; .n for clinic2 */
.meter { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.meter > i { display: block; height: 100%; width: var(--v, 0%); background: var(--accent2); border-radius: 4px; }
.meter.n > i { background: var(--accent1); }
.meter.p > i { background: var(--primary); }
/* Vertical bar chart: <div class="bars"><div><i style="--v:70%" class="c1"></i><i style="--v:40%" class="c2"></i><span>مايو</span></div>…</div> */
.bars { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 14px; align-items: end; height: 200px; padding-top: 8px; }
.bars > div { display: grid; grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: 4px 3px; height: 100%; align-items: end; }
.bars > div > i { height: var(--v, 0%); border-radius: 3px 3px 0 0; background: var(--accent2); min-height: 2px; }
.bars > div > i.c2 { background: var(--accent1); }
.bars > div > span { grid-column: 1 / -1; text-align: center; font-size: var(--fs-xs); color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--fs-xs); color: var(--muted); }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--accent2); }
.legend i.c2 { background: var(--accent1); }
.legend i.doc-a { background: var(--doc-a); }
.legend i.doc-b { background: var(--doc-b); }

/* ---------- Clinical blocks (patient record) ---------- */
/* Diagnosis row: .dx > .code + p + em */
.dx { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.dx + .dx { border-top: 1px dashed var(--line); }
.dx p { font-size: 14px; font-weight: 700; flex: 1; min-width: 0; }
.dx em { font-style: normal; font-size: 12px; color: var(--muted); }
/* Medication row: .med > .ic + div(b + small) + .dose-chg */
.med { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-radius: var(--r-row); background: var(--surface-2); }
.med + .med { margin-top: 6px; }
.med .ic { width: 32px; height: 32px; border-radius: var(--r-row); background: var(--surface); color: var(--med); display: grid; place-items: center; font-size: 17px; }
.med b { font-size: 14px; font-weight: 800; }
.med b bdi { font-weight: 600; color: var(--primary-strong); }
.med small { display: block; font-size: 12px; color: var(--muted); line-height: 1.45; }
.med.stopped { background: transparent; border: 1px dashed var(--line); }
.med.stopped b { color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--muted); }
/* In the record pane: plain rows in the same rhythm as diagnoses and visits (no grey cards) */
.rec .med { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 0; background: none; border-radius: 0; }
.rec .med + .med { margin-top: 0; border-top: 1px dashed var(--line); }
.rec .med .ic { display: none; }
.rec .med.stopped { border: 0; }
/* "See more" under a section: a real link with a count and a caret */
a.blk-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 2px 0; color: var(--primary); font-size: 12.5px; font-weight: 700; text-decoration: none; }
a.blk-more:hover { text-decoration: underline; text-underline-offset: 3px; }
a.blk-more > i { font-size: 12px; }
/* Visit row: a.vrow > .d (date) + .t (title) + .cl (clinic) + .st (one status: Draft | Signed); .draft for unsigned; aria-current for open */
.visits { display: flex; flex-direction: column; gap: 2px; }
.vrow { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: var(--r-row); font-size: 13px; text-decoration: none; color: inherit; position: relative; }
.vrow:hover { background: var(--surface-2); }
.vrow[aria-current="true"] { background: var(--primary-tint); }
.vrow .d { font-family: var(--font-num); font-size: 12px; color: var(--ink-2); }
.vrow .t { font-weight: 700; display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vrow .t small { font-weight: 400; font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 3px; }
.vrow .cl { font-size: 12px; color: var(--muted); white-space: nowrap; }
.vrow .st { display: flex; align-items: center; justify-content: flex-end; min-width: 66px; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.vrow .s-now { display: none; color: var(--primary-strong); }
.vrow.draft .st { color: var(--accent1-ink); }
/* File / attachment row */
.file-row { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--r-row); background: var(--surface-2); font-size: 12.5px; color: var(--ink-2); text-decoration: none; line-height: 1.4; }
.file-row + .file-row { margin-top: 6px; }
.file-row:hover { color: var(--ink); background: color-mix(in srgb, var(--surface-2) 70%, var(--line)); }
.file-row > i { font-size: 18px; color: var(--primary); flex: none; }
.file-row small { display: block; color: var(--muted); font-size: 11.5px; }

/* ---------- Split desk (patient file: record pane | grip | work pane) ---------- */
.desk { display: grid; grid-template-columns: var(--rec-w) 16px minmax(0, 1fr); padding: 14px; min-height: 0; }
.desk.is-collapsed { grid-template-columns: 68px 16px minmax(0, 1fr); }
.grip { position: relative; display: grid; place-items: center; cursor: col-resize; touch-action: none; border-radius: var(--r-row); }
.grip::before { content: ""; width: 4px; height: 52px; border-radius: 4px; background: var(--line); transition: background .15s, height .2s var(--ease); }
.grip:hover::before, .grip:focus-visible::before, .grip.dragging::before { background: var(--primary); height: 84px; }
.fold { position: absolute; top: 10px; inset-inline-start: -4px; width: 24px; height: 24px; border-radius: var(--r-row); display: grid; place-items: center; background: var(--surface); color: var(--ink-2); box-shadow: 0 1px 3px rgba(var(--shadow), .18); border: 1px solid var(--line); cursor: pointer; font-size: 12px; }
.fold::before { content: ""; position: absolute; inset: -8px; }
.fold:hover { color: var(--primary); border-color: var(--primary); }
.is-collapsed .fold i { rotate: 180deg; }
/* Record pane */
.rail { display: none; flex-direction: column; align-items: center; gap: 12px; padding: 16px 0; }
.is-collapsed .rec > :not(.rail) { display: none; }
.is-collapsed .rail { display: flex; }
.rail .av.lg { width: 44px; height: 44px; font-size: 15px; }
.rail .rallergy { width: 40px; height: 40px; border-radius: var(--r-row); display: grid; place-items: center; background: var(--danger-tint); color: var(--danger); font-size: 20px; }
/* Record pane: one scroll container, only the tabs stick */
.rec { overflow-y: auto; overscroll-behavior: contain; }
.rec > * { flex: none; }
.rec > .tabs { position: sticky; top: 0; z-index: 2; background: var(--surface); }
/* Patient banner (who you are treating); the edit button sits in an implicit third column */
.who { padding: 12px 18px; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 0 12px; align-items: center; background: var(--banner); border-bottom: 1px solid color-mix(in srgb, var(--primary) 12%, var(--line)); }
.who > .av { grid-row: span 2; }
.who > .av.lg { width: 40px; height: 40px; }
.who > .edit { grid-column: 3; grid-row: 1 / span 2; align-self: start; width: 36px; height: 36px; }
/* Unsigned draft for this patient: the one way back into it from any patient page */
.resume { grid-column: 1 / -1; margin-top: 8px; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-row); background: var(--accent1-tint); color: var(--accent1-ink); font-size: 12px; text-decoration: none; }
.resume > i { font-size: 18px; }
.resume span { display: flex; flex-direction: column; }
.resume b { font-size: 13px; font-weight: 800; }
.resume em { margin-inline-start: auto; font-style: normal; font-weight: 800; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.resume:hover em { text-decoration: underline; text-underline-offset: 3px; }
.pname { font-size: 18px; font-weight: 800; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.pname a { text-decoration: none; }
.pmeta { display: flex; flex-wrap: wrap; gap: 0 10px; color: var(--muted); font-size: 12px; }
.pmeta span { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.pmeta i { font-size: 14px; color: var(--primary); }
.who .allergy { grid-column: 1 / -1; margin-top: 10px; padding: 7px 10px; }
.rec-body { padding: 16px 18px 22px; display: flex; flex-direction: column; gap: 22px; }

/* ---------- Clinical note (viewer) ---------- */
.note { flex: 1; overflow: auto; display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 0 34px; align-content: start; padding: 24px 34px 28px; }
.note.single { grid-template-columns: minmax(0, 1fr); }
.note-head { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: 16px; padding-bottom: 18px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.note-head h2 { font-size: var(--fs-3xl); font-weight: 800; line-height: 1.25; }
.note-head .sub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.note-head .sub .sep { width: 3px; height: 3px; }
.note-head .sub a { color: var(--primary); font-weight: 700; text-decoration: none; }
.note-state { margin-inline-start: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
/* Compact signed badge under the note title */
.signed-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 3px 10px; border-radius: var(--r-tag); background: var(--accent2-tint); color: var(--accent2-ink); font-size: 12px; }
.signed-tag > i { font-size: 15px; }
.signed-tag b { font-weight: 800; }
/* Documents issued at this visit, as one row under the note head */
.issued { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -8px 0 24px; }
.issued > h3 { font-size: 12.5px; font-weight: 800; color: var(--muted); display: flex; align-items: center; gap: 6px; }
.issued > h3 i { color: var(--primary); font-size: 15px; }
.issued .file-row + .file-row { margin-top: 0; }
.note-state .acts { display: flex; gap: 8px; }
/* Note sections: each part reads as its own block (viewer + editor) */
.note-body { max-width: 66ch; display: flex; flex-direction: column; gap: 0; }
.note-sec { padding-block: 20px; }
.note-sec:first-child { padding-block-start: 4px; }
.note-sec + .note-sec { border-top: 1px solid var(--line); }
.note-sec h3 { display: flex; align-items: center; gap: 10px; font-size: var(--fs-lg); font-weight: 800; margin-bottom: 10px; color: var(--primary-strong); }
.note-sec h3::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--primary); flex: none; }
.note-sec p { color: var(--ink-2); font-size: 14px; line-height: 1.85; }
.note-sec .kv { margin-top: 2px; }
/* Plan list: li.hl = dose change, li.at = needs attention, a.ref = jump link */
.plan { display: flex; flex-direction: column; gap: 6px; }
.plan li { position: relative; font-size: 14px; color: var(--ink-2); padding: 6px 12px; padding-inline-start: 37px; }
.plan li > i { position: absolute; inset-inline-start: 12px; top: 10px; color: var(--primary); font-size: 15px; }
.plan li.hl { background: var(--accent2-tint); color: var(--accent2-ink); border-radius: var(--r-row); font-weight: 700; }
.plan li.hl i { color: var(--accent2-ink); }
.plan li.at { background: var(--accent1-tint); color: var(--accent1-ink); border-radius: var(--r-row); font-weight: 700; }
.plan li.at i { color: var(--accent1-ink); }
.plan li .ref { float: inline-end; margin-inline-start: 12px; font-size: 12px; font-weight: 700; color: var(--primary); text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
/* Dated addendum on a signed note */
.addendum { border: 1px dashed color-mix(in srgb, var(--primary) 45%, var(--line)); background: color-mix(in srgb, var(--primary-tint) 45%, var(--surface)); border-radius: var(--r-row); padding: 14px 16px; }
.addendum h3 { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 800; color: var(--primary-strong); margin-bottom: 6px; flex-wrap: wrap; }
.addendum h3 i { font-size: 17px; }
.addendum h3 span { font-weight: 400; font-size: 12px; color: var(--muted); }
.addendum p { font-size: 14px; color: var(--ink-2); line-height: 1.8; }
/* Side margin of a note */
.note-margin { display: flex; flex-direction: column; gap: 20px; position: sticky; top: 0; align-self: start; }
.mblk h3 { font-size: 12.5px; font-weight: 800; color: var(--muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.mblk h3 i { color: var(--primary); font-size: 15px; }
.note-foot { grid-column: 1 / -1; display: flex; gap: 16px; align-items: center; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.note-foot a, .note-foot button { color: var(--primary); font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: 5px; font-size: 12px; }
.note-foot .keys { margin-inline-start: auto; color: var(--muted); font-weight: 400; gap: 6px; }
.note-foot .keys:hover { color: var(--ink); }
/* Note editor section (visit forms): numbered 4-part note */
.note-part { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 12px; }
/* Only a note-part with its heading becomes a card; a bare <span class="note-part"><span class="n"> number chip stays unboxed */
.note-part:has(> h3) { padding: 14px 18px 18px; border: 1px solid var(--line); border-radius: var(--r-pane); background: var(--surface); gap: 10px 12px; }
.note-part > .n { align-self: start; width: 28px; height: 28px; border-radius: var(--r-row); background: var(--primary-tint); color: var(--primary-strong); display: grid; place-items: center; font-family: var(--font-num); font-weight: 600; font-size: 13px; }
.note-part > h3 { font-size: var(--fs-lg); font-weight: 800; color: var(--primary-strong); align-self: center; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.note-part > :not(.n):not(h3) { grid-column: 2; }
/* The "Before signing" card is the finish line, so it alone takes the signed (teal) tone */
.note-part:has(> #review-title) { background: color-mix(in srgb, var(--accent2-tint) 40%, var(--surface)); border-color: color-mix(in srgb, var(--accent2) 32%, var(--line)); }
.note-part:has(> #review-title) > .n { background: var(--accent2-ink); color: var(--primary-ink); }
.note-part:has(> #review-title) > h3 { color: var(--accent2-ink); border-bottom-color: color-mix(in srgb, var(--accent2) 25%, var(--line)); }

/* ---------- List rows (sync list, activity, finder results) ----------
   ul.rows > li > .ic + div(b + small) + trailing ; li.bad = needs attention */
.rows { padding: 0 8px 8px; }
.rows > li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 8px; font-size: 12.5px; line-height: 1.45; }
.rows > li + li { border-top: 1px dashed var(--line); }
.rows .ic { width: 30px; height: 30px; border-radius: var(--r-row); display: grid; place-items: center; background: var(--surface-2); color: var(--ink-2); font-size: 16px; }
.rows .bad .ic { background: var(--accent1-tint); color: var(--accent1-ink); }
.rows .ok .ic { background: var(--accent2-tint); color: var(--accent2-ink); }
.rows b { display: block; font-size: 13px; }
.rows small { color: var(--muted); font-size: 12px; }
.rows .bad small { color: var(--accent1-ink); }
.rows li > button, .rows li > a.mini { height: 28px; padding: 0 10px; border-radius: var(--r-row); font-size: 12px; font-weight: 800; color: var(--primary); border: 1px solid var(--line); text-decoration: none; display: inline-flex; align-items: center; }
.rows.flush { padding: 0; }
.rows.flush > li { padding-inline: 18px; }

/* ---------- Timeline (dose history, audit, visit history) ----------
   ol.timeline > li > time + div ; li.ok / li.warn / li.info colour the dot */
.timeline { position: relative; display: flex; flex-direction: column; }
.timeline > li { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 14px; padding: 0 0 18px; padding-inline-start: 22px; font-size: 13px; }
.timeline > li::before { content: ""; position: absolute; inset-inline-start: 4px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--surface); border: 2px solid var(--muted); }
.timeline > li::after { content: ""; position: absolute; inset-inline-start: 8px; top: 18px; bottom: 0; width: 1px; background: var(--line); }
.timeline > li:last-child::after { display: none; }
.timeline > li.ok::before { border-color: var(--accent2); background: var(--accent2); }
.timeline > li.warn::before { border-color: var(--accent1); background: var(--accent1); }
.timeline > li.info::before { border-color: var(--primary); background: var(--primary); }
.timeline > li.doc-a::before { border-color: var(--doc-a); background: var(--doc-a); }
.timeline > li.doc-b::before { border-color: var(--doc-b); background: var(--doc-b); }
/* Gap marker between distant entries: <li class="gap">نحو 16 شهراً دون زيارات</li> */
.timeline > li.gap { display: flex; align-items: center; gap: 10px; padding-inline-start: 0; font-size: var(--fs-xs); color: var(--muted); }
.timeline > li.gap::before, .timeline > li.gap::after { content: ""; position: static; flex: 1; width: auto; height: 0; border: 0; border-top: 1px dashed var(--line); border-radius: 0; background: none; }
.timeline a { color: var(--primary); font-weight: 700; text-decoration: none; }
.timeline time { font-family: var(--font-num); font-size: 12px; color: var(--ink-2); }
.timeline b { font-weight: 800; }
.timeline small { display: block; color: var(--muted); font-size: 12px; }

/* ---------- Popovers / menus (native [popover]) ---------- */
[popover] { position: fixed; margin: 0; inset: auto; border: 1px solid var(--edge); border-radius: var(--r-pane); background: var(--surface); color: var(--ink); box-shadow: var(--pop); padding: 0; overflow: hidden; }
[popover]::backdrop { background: color-mix(in srgb, var(--sidebar-bg) 22%, transparent); }
[popover].menu::backdrop, [popover].pop-anchored::backdrop { background: transparent; }
.pophead { display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; font-weight: 800; font-size: 14px; }
.pophead > i { color: var(--primary); font-size: 17px; }
.pophead small { font-weight: 400; font-size: 12px; color: var(--muted); margin-inline-start: auto; }
.popfoot { display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--surface-2); border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.popfoot .btn { height: 32px; font-size: 12.5px; margin-inline-start: auto; }
/* Menu: <div popover class="menu"> .menu-head? + a/button.menu-item + .menu-sep */
.menu { min-width: 240px; padding: 6px; }
.menu-head { padding: 8px 10px 6px; font-size: 12px; color: var(--muted); }
.menu-head b { display: block; color: var(--ink); font-size: 13.5px; }
.menu-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: var(--r-row); font-size: 13px; font-weight: 700; color: var(--ink); text-decoration: none; text-align: start; }
.menu-item:hover, .menu-item:focus-visible { background: var(--surface-2); }
.menu-item > i { font-size: 17px; color: var(--primary); }
.menu-item small { display: block; font-size: 11.5px; font-weight: 400; color: var(--muted); }
.menu-item .end { margin-inline-start: auto; color: var(--primary); }
.menu-item > .cdot { width: 10px; height: 10px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent); }
.menu-item[aria-checked="true"] { background: var(--primary-tint); }
.menu-item.danger, .menu-item.danger > i { color: var(--danger); }
.menu-sep { height: 1px; background: var(--line); margin: 6px 4px; }
/* Shell popovers */
#syncbox { top: 62px; inset-inline-end: 14px; width: 400px; }
#finder { top: 72px; inset-inline: 0; margin-inline: auto; width: min(600px, calc(100vw - 32px)); }
#keys { inset: 0; margin: auto; height: fit-content; width: min(460px, calc(100vw - 32px)); }
.finput { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.finput i { font-size: 20px; color: var(--primary); }
.finput input { flex: 1; font-size: 15px; outline: 0; }
.finput input::placeholder { color: var(--muted); }
.fhint { padding: 8px 16px 0; font-size: 12px; color: var(--muted); }
.recent { padding: 6px 8px 8px; max-height: 360px; overflow: auto; }
.recent a { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; border-radius: var(--r-row); text-decoration: none; font-size: 12.5px; color: var(--muted); }
.recent a:hover, .recent a.hot { background: var(--primary-tint); }
.recent b { display: block; color: var(--ink); font-size: 13.5px; }
.recent a > kbd, .recent a.hot > .tag { display: none; }
.recent a.hot > kbd { display: inline-flex; }
.recent .none { padding: 18px 8px; text-align: center; font-size: 12.5px; color: var(--muted); }
.klist { display: grid; grid-template-columns: 1fr auto; gap: 0 16px; padding: 4px 16px 16px; font-size: 13px; }
.klist dt, .klist dd { padding: 7px 0; border-bottom: 1px dashed var(--line); }
.klist dd { display: flex; gap: 4px; justify-content: flex-end; }

/* ---------- Dialogs + drawers (native <dialog>; open with data-open="id", close with data-close) ----------
   <dialog class="dialog" id="x"><div class="dialog-head"><h2>…</h2><button class="ibtn" data-close>×</button></div>
   <div class="dialog-body">…</div><div class="dialog-foot">…buttons</div></dialog> */
.dialog, .drawer { border: 1px solid var(--edge); border-radius: var(--r-pane); background: var(--surface); color: var(--ink); box-shadow: var(--pop); padding: 0; width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 64px); margin: auto; overflow: hidden; flex-direction: column; }
.dialog[open], .drawer[open] { display: flex; }
.dialog.wide { width: min(760px, calc(100vw - 32px)); }
.dialog.sm { width: min(420px, calc(100vw - 32px)); }
.dialog::backdrop, .drawer::backdrop { background: color-mix(in srgb, var(--sidebar-bg) 35%, transparent); }
.dialog-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px; }
.dialog-head h2 { font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.dialog-head h2 i { color: var(--primary); font-size: 20px; }
.dialog-head .ibtn { margin-inline-start: auto; }
.dialog-head p { font-size: var(--fs-xs); color: var(--muted); }
.dialog-body { padding: 4px 18px 18px; overflow: auto; display: flex; flex-direction: column; gap: 14px; font-size: 13.5px; color: var(--ink-2); }
.dialog-foot { display: flex; align-items: center; gap: 8px; justify-content: flex-end; padding: 12px 18px; background: var(--surface-2); border-top: 1px solid var(--line); }
.dialog-foot .start { margin-inline-end: auto; font-size: var(--fs-xs); color: var(--muted); }
/* Drawer: side sheet pinned to the inline-start edge (right in Arabic, left in English) and sliding in from it */
.drawer { --drawer-from: 28px; margin: 0; margin-inline-end: auto; height: 100vh; max-height: 100vh; width: min(460px, 100vw); border-radius: 0; border-inline-end: 1px solid var(--line); }
[dir="ltr"] .drawer { --drawer-from: -28px; }
.drawer .dialog-body { flex: 1; }

/* ---------- Toasts (shell.js: EMR.toast('…', 'ok'|'warn'|'info')) ---------- */
.toasts { position: fixed; bottom: 20px; inset-inline: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 1000; pointer-events: none; }
.toast { display: flex; align-items: center; gap: 9px; padding: 10px 16px; border-radius: var(--r-ctl); background: var(--sidebar-bg); color: var(--sidebar-strong); font-size: 13px; font-weight: 700; box-shadow: var(--pop); pointer-events: auto; }
.toast i { font-size: 17px; color: var(--sidebar-active-ink); }
.toast.ok i { color: var(--toast-ok); }
.toast.warn i { color: var(--accent1); }

/* ---------- Print preview "paper" (A4) for prescriptions, reports, invoices ----------
   <div class="paper-desk"><article class="paper"><header class="letterhead">…</header>…<footer class="paper-foot">…</footer></article></div> */
.paper-desk { display: flex; justify-content: center; padding: 8px 0 24px; }
.paper { width: 794px; max-width: 100%; aspect-ratio: 210 / 297; background: var(--paper); color: var(--paper-ink); box-shadow: var(--depth), 0 0 0 1px var(--line); border-radius: 2px; padding: 48px 56px 40px; display: flex; flex-direction: column; font-size: 13.5px; line-height: 1.7; }
.letterhead { display: flex; align-items: center; gap: 16px; padding-bottom: 16px; border-bottom: 2px solid var(--primary); }
.letterhead .logo { width: 56px; height: 56px; border-radius: var(--r-row); background: var(--primary); color: var(--primary-ink); display: grid; place-items: center; font-size: 30px; flex: none; }
.letterhead h1 { font-size: 19px; font-weight: 800; color: var(--primary-strong); line-height: 1.3; }
.letterhead p { font-size: 12px; color: var(--muted); }
.letterhead .lh-end { margin-inline-start: auto; text-align: end; font-size: 12px; color: var(--ink-2); line-height: 1.6; }
.letterhead .lh-end b { display: block; font-size: 14px; color: var(--ink); }
.paper-title { text-align: center; font-size: 18px; font-weight: 800; margin: 22px 0 14px; color: var(--ink); }
.paper-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; padding: 10px 14px; background: var(--surface-2); border-radius: var(--r-row); font-size: 12.5px; margin-bottom: 18px; }
.paper-meta span { color: var(--muted); }
.paper-meta b { font-weight: 700; color: var(--ink); }
.paper-body { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.paper .table th { background: transparent; border-bottom: 1.5px solid var(--ink-2); position: static; }
.paper .table td { padding-block: 8px; }
.rx-mark { font-family: 'Times New Roman', serif; font-size: 30px; font-weight: 700; color: var(--primary); line-height: 1; }
.paper-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-top: 18px; margin-top: 18px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); }
.sign-line { min-width: 200px; text-align: center; color: var(--ink-2); font-size: 12px; }
.sign-line::before { content: ""; display: block; border-top: 1px solid var(--ink-2); margin-bottom: 6px; }

/* ---------- Skeleton / loading ---------- */
.skel { display: block; height: 12px; border-radius: var(--r-tag); background: linear-gradient(90deg, var(--surface-2) 25%, color-mix(in srgb, var(--line) 70%, var(--surface-2)) 50%, var(--surface-2) 75%); background-size: 200% 100%; }
.skel.lg { height: 20px; }
.skel.block { height: 64px; border-radius: var(--r-row); }
.skel.w-50 { width: 50%; }
.skel.w-75 { width: 75%; }
.spin { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin { to { rotate: 360deg; } }

/* ---------- Auth pages (login, 2FA) ---------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; background: var(--bg); }
.auth-card { width: min(420px, 100%); background: var(--surface); border-radius: var(--r-pane); box-shadow: var(--depth); padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 16px; }
.auth-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; color: var(--primary-strong); }
.auth-brand .mark { background: var(--primary); color: var(--sidebar-active-ink); }
.auth-card h1 { font-size: 21px; font-weight: 800; }
.auth-card > p { font-size: 13px; color: var(--muted); margin-top: -10px; }

/* ---------- Auth: split card (form + brand panel), password eye, 2FA bits ---------- */
.auth-split { width: min(1040px, 100%); min-height: 600px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--surface); border-radius: var(--r-pane); box-shadow: var(--depth); overflow: hidden; }
.auth-split .auth-card { width: 100%; box-shadow: none; border-radius: 0; padding: 32px 48px 28px; justify-content: center; }
.auth-top { display: flex; align-items: center; gap: 8px; }
.auth-split .auth-top .auth-brand { display: none; }
.auth-top > .btn, .auth-top > .link { margin-inline-start: auto; }
.auth-top > .link { font-size: var(--fs-sm); }
.auth-panel { background: var(--sidebar-bg); color: var(--sidebar-ink); padding: 40px 44px 32px; display: flex; flex-direction: column; gap: 18px; }
.auth-panel .auth-brand { color: var(--sidebar-strong); }
.auth-panel .auth-brand .mark { background: var(--sidebar-active-bg); }
.auth-panel h2 { margin-top: auto; font-size: var(--fs-2xl); font-weight: 800; line-height: 1.45; color: var(--sidebar-strong); max-width: 18ch; text-wrap: balance; }
.auth-panel > p { font-size: var(--fs-base); line-height: 1.8; max-width: 40ch; }
.auth-points { display: flex; flex-direction: column; gap: 10px; font-size: var(--fs-sm); margin-bottom: auto; }
.auth-points li { display: flex; align-items: center; gap: 10px; }
.auth-points i { color: var(--sidebar-active-ink); font-size: 17px; }
.auth-row { display: flex; align-items: center; gap: 8px; }
.auth-row .link { margin-inline-start: auto; font-size: var(--fs-sm); }
.auth-legal { font-size: var(--fs-xs); color: var(--muted); text-align: center; }
.alt-line { display: flex; justify-content: center; border-top: 1px solid var(--line); padding-top: 14px; }
/* Password with show/hide: <div class="pw"><input class="input" type="password"><button class="ibtn">…</button></div> */
.pw { position: relative; }
.pw .input { padding-inline-end: 42px; }
.pw .ibtn { position: absolute; inset-inline-end: 3px; top: 3px; }

/* ---------- Dashboard / lists ---------- */
/* Draft rows: three lines need air between them */
.rows > li:has(.draft-excerpt) { padding-block: 14px; gap: 14px; }
.rows > li:has(.draft-excerpt) > div { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.rows > li:has(.draft-excerpt) > div > b { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; line-height: 1.5; }
.rows > li:has(.draft-excerpt) small { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; line-height: 1.5; }
.rows > li:has(.draft-excerpt) .draft-excerpt { font-size: 12.5px; line-height: 1.7; }
/* Allergy marker in a table cell */
.allergy-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-tag); background: var(--danger-tint); color: var(--danger-ink); font-size: 12px; font-weight: 800; white-space: nowrap; }
.allergy-tag > i { color: var(--danger); font-size: 14px; }
/* "Did you mean" line under a search */
.suggest { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 9px 12px; border-radius: var(--r-row); background: var(--surface-2); font-size: 13px; color: var(--ink-2); }
.suggest > i { color: var(--primary); font-size: 17px; }
.suggest button { color: var(--primary); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.suggest small { color: var(--muted); font-size: var(--fs-xs); }
/* One-line summary strip under a pane head */
.summary { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 12px 18px; border-bottom: 1px solid var(--line); font-size: 12.5px; color: var(--muted); }
.summary b { color: var(--ink); font-weight: 700; }
/* Permission / options matrix: <table class="table matrix"> th.c / td.c centred, tr.grp = group heading */
.matrix th.c, .matrix td.c { text-align: center; width: 112px; }
.matrix th.c small { display: block; font-weight: 400; font-size: 11px; }
.matrix td.c .check { justify-content: center; }
.matrix td.c .ph-lock-simple { color: var(--muted); font-size: 15px; }
.matrix tr.grp th { background: var(--surface); color: var(--primary-strong); font-size: 12px; padding-top: 14px; position: static; }

/* ---------- Sync failure item ---------- */
.fail-item { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px 28px; }
.fail-item .kv { --kv-dt: 110px; }
.fail-acts { display: flex; flex-direction: column; gap: 8px; }
.fail-acts .btn { justify-content: flex-start; }

/* ---------- Patient file work pane ---------- */
/* Scrolling body of a .pane.work next to the record pane */
.work-body { flex: 1; min-height: 0; overflow: auto; }
/* Document type icon in a row */
.doc-ic { width: 32px; height: 32px; border-radius: var(--r-row); display: grid; place-items: center; background: var(--surface-2); color: var(--primary); font-size: 17px; flex: none; }
/* Upload drop zone. <label class="dropzone"><i class="ph …"></i><div><b>…</b>…</div><span class="btn">…</span><input type="file"></label>
   With a current file: <div class="dropzone"><span class="thumb">…</span><div>…</div><div class="cluster">…</div></div> */
.dropzone { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1.5px dashed color-mix(in srgb, var(--primary) 35%, var(--line)); border-radius: var(--r-row); background: color-mix(in srgb, var(--primary-tint) 35%, var(--surface)); transition: background .15s, border-color .15s; }
label.dropzone { cursor: pointer; padding: 16px 18px; }
label.dropzone:hover, .dropzone.is-over { border-color: var(--primary); background: var(--primary-tint); }
.dropzone > i { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); color: var(--primary); font-size: 22px; flex: none; box-shadow: 0 1px 2px rgba(var(--shadow), .12); }
.dropzone > div { min-width: 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; }
.dropzone > div b { display: block; font-size: 14px; color: var(--ink); }
.dropzone > .btn, .dropzone > .cluster { margin-inline-start: auto; flex-wrap: nowrap; }
.dropzone > input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dropzone .thumb { width: 132px; height: 60px; flex: none; display: grid; place-items: center; border-radius: var(--r-row); background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.dropzone .thumb.sq { width: 60px; }

/* ---------- Clinical editors (visit notes) ---------- */
/* Section navigator in the note margin: a.done / a.part / a[aria-current] */
.secnav { display: flex; flex-direction: column; gap: 1px; }
.secnav a { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 8px; border-radius: var(--r-row); font-size: 12.5px; font-weight: 700; color: var(--ink-2); text-decoration: none; line-height: 1.35; }
.secnav a:hover { background: var(--surface-2); color: var(--ink); }
.secnav a[aria-current="true"] { background: var(--primary-tint); color: var(--primary-strong); }
.secnav a > i { font-size: 16px; color: var(--muted); }
.secnav a.done > i { color: var(--accent2); }
.secnav a.part > i { color: var(--accent1); }
.secnav small { font-family: var(--font-num); font-size: 11px; color: var(--muted); font-weight: 500; }
.progress-line { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.progress-line b { color: var(--ink); font-weight: 800; }
/* Autosave status: .autosave (saved) / .autosave.busy */
.autosave { display: inline-flex; align-items: center; gap: 5px; }
.autosave i { color: var(--accent2-ink); font-size: 14px; }
.autosave.busy i { color: var(--muted); }
/* Mental-state row: label + (chips + note). Editor (settings): .mse-row.edit */
.mse-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 6px 14px; padding: 10px 0; border-bottom: 1px dashed var(--line); align-items: start; }
.mse-row:last-child { border-bottom: 0; }
.mse-row > .label { padding-top: 5px; }
.mse-row > .label.filled::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent2); margin-inline-start: 4px; }
.mse-row:not(.edit) > div { display: grid; grid-template-columns: minmax(0, 1fr) 180px; gap: 6px 10px; align-items: start; position: relative; }
/* Free note stays out of sight until used: "+ note" focuses it; it stays once it has text */
.mse-row:not(.edit) .input.sm:placeholder-shown:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; clip-path: inset(50%); }
.note-add { justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.note-add:hover { color: var(--primary); }
.mse-row .input.sm:not(:placeholder-shown) + .note-add, .mse-row .input.sm:focus + .note-add { display: none; }
.mse-row.edit { grid-template-columns: 30px 22px 190px minmax(0, 1fr) auto; gap: 10px; padding: 10px 18px; border-bottom: 0; border-top: 1px solid var(--line); background: var(--surface); }
.mse-row.edit:first-child { border-top: 0; }
.mse-row.edit .grip-h { cursor: grab; }
.mse-row.edit .n { font-family: var(--font-num); font-size: 12px; color: var(--muted); padding-top: 5px; text-align: center; }
.mse-row.edit .opts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.mse-row.edit .opts .input { width: 130px; }
.mse-row.edit > .check { padding-top: 5px; }
.mse-row.edit.off .input, .mse-row.edit.off .opts { opacity: .45; }
.mse-row.edit.dragging { opacity: .4; }
.mse-row.edit.over { box-shadow: inset 0 2px 0 var(--primary); }
/* Combobox: <div class="combo"><label class="input-search">…</label><div class="combo-list" role="listbox"> button[role=option] | .drug-opt </div></div> */
.combo { position: relative; }
.combo-list { position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 5; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pane); box-shadow: var(--pop); padding: 6px; max-height: 300px; overflow: auto; }
.combo-list > button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 8px; border-radius: var(--r-row); font-size: 13px; text-align: start; }
.combo-list > button:hover, .combo-list > button:focus-visible { background: var(--surface-2); }
.combo-list > button[aria-disabled="true"] { color: var(--muted); cursor: default; }
.combo-list > button[aria-disabled="true"] small { margin-inline-start: auto; font-size: 11.5px; }
.drug-opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; padding: 8px; border-radius: var(--r-row); }
.drug-opt + .drug-opt { border-top: 1px dashed var(--line); }
.drug-opt b { font-size: 13.5px; }
.drug-opt small { display: block; font-size: 11.5px; color: var(--muted); }
.drug-opt .chips { justify-content: flex-end; gap: 4px; }
.drug-opt .chip { height: 26px; font-family: var(--font-num); }
.drug-opt .danger-text { color: var(--danger); }
/* Prescription line item (editor) */
.rx-items { display: flex; flex-direction: column; gap: 10px; }
.rx-item { display: flex; flex-direction: column; gap: 10px; }
.rx-item-head { display: flex; align-items: center; gap: 10px; }
.rx-item-head .n { width: 24px; height: 24px; border-radius: var(--r-row); background: var(--surface); color: var(--primary-strong); display: grid; place-items: center; font-family: var(--font-num); font-weight: 600; font-size: 12px; flex: none; }
.rx-item-head b { font-size: 14px; font-weight: 800; }
.rx-item-head .t-sub { font-size: 12px; color: var(--muted); }
.rx-item-head .ibtn { margin-inline-start: auto; }
.rx-item .fields { gap: 10px 12px; }
.rx-item .sig { font-size: 12.5px; color: var(--ink-2); display: flex; gap: 6px; align-items: baseline; }
.rx-item .sig i { color: var(--primary); }
.rx-item.is-conflict { box-shadow: inset 0 0 0 1px var(--danger); }
/* Segmented control stretched to full width */
.seg.block { display: flex; }
.seg.block > button { flex: 1; justify-content: center; height: 34px; font-size: 12.5px; }
/* Computed day count (sick leave) */
.days { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: var(--r-ctl); background: var(--accent2-tint); color: var(--accent2-ink); font-weight: 800; font-size: 13.5px; }
/* Auto-filled facts tile */
.tile.auto { padding: 10px 14px; }
.tile.auto .kv > div { padding: 5px 0; font-size: 13px; }
.tile.auto .kv > div:last-child { border-bottom: 0; }

/* ---------- Compose layout: editor form | live print preview (prescription, report) ---------- */
.compose { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 468px; }
.compose-form { overflow: auto; padding: 16px 18px 24px; display: flex; flex-direction: column; gap: 14px; }
.compose-preview { overflow: auto; background: var(--surface-2); border-inline-start: 1px solid var(--line); padding: 14px 16px; }
.compose-preview .sect-label { margin-bottom: 8px; }
.compose-preview .paper-desk { padding: 0; }
.compose-preview .paper { zoom: .548; flex: none; }

/* ---------- Paper sheet extras ---------- */
.paper.a5 { width: 560px; aspect-ratio: 148 / 210; padding: 34px 38px 28px; }
.paper .kv > div { font-size: 13px; padding: 5px 0; }
.paper .to { font-weight: 700; }
.paper .rec-box { padding: 10px 14px; border-radius: var(--r-row); background: var(--surface-2); }
.paper .fine { font-size: 12px; color: var(--muted); }
.paper .allergy-line { color: var(--danger-ink); font-weight: 700; }
.paper .rx-note { font-size: 12.5px; color: var(--ink-2); }
/* Numbered prescription list on the sheet */
.rx-list { display: flex; flex-direction: column; }
.rx-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.rx-list li > span:first-child { font-family: var(--font-num); font-weight: 600; color: var(--muted); }
.rx-list b { font-size: 15px; }
.rx-list .lat { font-family: var(--font-num); font-weight: 500; color: var(--ink-2); }
.rx-list p { grid-column: 2; color: var(--ink-2); }
.rx-list .qty { text-align: end; white-space: nowrap; font-weight: 700; }
/* Totals block on a printed invoice */
.paper-totals { margin-inline-start: auto; width: 300px; }
/* Scaled live preview of a sheet: <figure class="preview"><div class="paper-desk"><article class="paper">…</article></div><figcaption>…</figcaption></figure>
   Scale with --preview-zoom on the figure. */
.preview { --preview-zoom: .46; background: var(--surface-2); border-radius: var(--r-row); padding: 14px 0 8px; }
.preview .paper-desk { padding: 0; }
.preview .paper { zoom: var(--preview-zoom); }
.preview figcaption { display: flex; justify-content: space-between; gap: 8px; padding: 10px 16px 0; font-size: var(--fs-xs); color: var(--muted); }
/* Compact sheet inside a drawer (documents preview) */
.preview-sheet { background: var(--surface-2); border-radius: var(--r-row); padding: 18px; }
.preview-sheet .paper { aspect-ratio: auto; padding: 22px 24px; font-size: 12px; box-shadow: var(--depth); }
.preview-sheet .letterhead { gap: 10px; padding-bottom: 10px; }
.preview-sheet .letterhead .logo { width: 36px; height: 36px; font-size: 19px; }
.preview-sheet .letterhead h1 { font-size: 14px; }
.preview-sheet .letterhead p { font-size: 10.5px; }
.preview-sheet .paper-title { font-size: 14px; margin: 14px 0 10px; }
.preview-sheet .paper-meta { font-size: 11px; grid-template-columns: 1fr; margin-bottom: 12px; }
.preview-sheet .paper-foot { font-size: 10.5px; }
.preview-sheet .sign-line { min-width: 120px; font-size: 11px; }
/* Placeholder for a non-rendered file (PDF) */
.file-ph { display: grid; place-items: center; gap: 6px; text-align: center; padding: 34px 16px; color: var(--muted); font-size: 12.5px; }
.file-ph > i { font-size: 44px; color: var(--primary); }

/* ---------- Invoice editor ---------- */
.lines-box { border: 1px solid var(--line); border-radius: var(--r-row); overflow: hidden; }
/* Picked patient tile */
.pick { display: flex; align-items: center; gap: 12px; }
.pick .who-cell { flex: 1; }
.pick .who-cell small { display: block; font-size: var(--fs-xs); }

/* ---------- Settings sub-navigation ---------- */
.setnav { padding: 6px; position: sticky; top: 0; }
.menu-item[aria-current="page"] { background: var(--primary-tint); color: var(--primary-strong); }
.setnav-foot { display: flex; gap: 8px; padding: 10px 10px 6px; margin-top: 6px; border-top: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted); line-height: 1.55; }
.setnav-foot i { color: var(--primary); font-size: 15px; margin-top: 2px; }
/* Settings page grid: setnav | content */
.settings { display: grid; grid-template-columns: 252px minmax(0, 1fr); gap: 16px; align-items: start; }
.settings > .stack { min-width: 0; }

/* ---------- Charts (reports): inline SVG columns, bar list, split bar, rate ---------- */
.chart { width: 100%; min-height: 200px; }
.chart svg { display: block; overflow: visible; }
.chart .grid-l { stroke: var(--line); stroke-width: 1; }
.chart .axis { stroke: var(--muted); stroke-width: 1; }
.chart text { font-family: var(--font-num); font-size: 11px; fill: var(--muted); }
.chart text.mo { font-family: var(--font); font-size: 12px; fill: var(--ink-2); }
.chart text.val { fill: var(--ink-2); font-weight: 600; }
.chart .s-rimal { fill: var(--accent2); }
.chart .s-nasr { fill: var(--accent1); }
.chart .off { opacity: .32; }
.chart rect.hit { fill: transparent; }
.chart g.grp:hover rect.hit { fill: var(--surface-2); }
/* Label | meter | value rows; .grp-h = group heading spanning the row */
.barlist { display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr) auto; gap: 10px 12px; align-items: center; font-size: 13px; }
.barlist .meter { height: 12px; }
.barlist .meter, .barlist .meter > i { border-start-start-radius: 0; border-end-start-radius: 0; border-start-end-radius: 3px; border-end-end-radius: 3px; }
.barlist .lbl { display: flex; align-items: center; gap: 8px; min-width: 0; }
.barlist .lbl span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barlist .v { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-weight: 600; text-align: end; min-width: 56px; }
.barlist .v small { color: var(--muted); font-weight: 400; margin-inline-start: 4px; }
.barlist .grp-h { grid-column: 1 / -1; font-size: 12.5px; font-weight: 800; color: var(--ink-2); margin-top: 4px; }
.barlist .grp-h:first-child { margin-top: 0; }
/* Proportional split: <div class="splitbar"><i style="--v:2240"></i><i class="c2" style="--v:860"></i></div> */
.splitbar { display: flex; gap: 2px; height: 16px; }
.splitbar > i { display: block; flex: var(--v) 0 0; background: var(--accent2); min-width: 2px; }
.splitbar > i:first-child { border-start-start-radius: 4px; border-end-start-radius: 4px; }
.splitbar > i:last-child { border-start-end-radius: 4px; border-end-end-radius: 4px; }
.splitbar > i.c2 { background: var(--accent1); }
.splitbar > i.off { opacity: .32; }
.rate { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; }
.rate .meter { grid-column: 1 / -1; height: 10px; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  .note { animation: rise .45s var(--ease) both; }
  @keyframes rise { from { transform: translateY(6px); } to { transform: none; } }
  [popover]:popover-open, .dialog[open] { animation: pop .18s var(--ease); }
  @keyframes pop { from { opacity: 0; scale: .98; } }
  .drawer[open] { animation: slide .25s var(--ease); }
  @keyframes slide { from { translate: var(--drawer-from) 0; opacity: 0; } }
  .desk { transition: grid-template-columns .25s var(--ease); }
  .toast { animation: pop .2s var(--ease); }
  .skel { animation: shimmer 1.4s linear infinite; }
  @keyframes shimmer { to { background-position: -200% 0; } }
}

/* ---------- Domain icon colours: medication = teal, money = clay, unsigned work = amber; the rest stay navy ---------- */
:is(.pane-head h2, .pane-head h3, .blk > h2, .sect-label, .mblk h3, .stat > span, .dialog-head h2, .pophead, .figure > span) > i:is(.ph-pill, .ph-prescription),
:is(.med .ic, .doc-ic, .file-row, .rows li:not(.bad) .ic) > i:is(.ph-pill, .ph-prescription) { color: var(--med); }
:is(.pane-head h2, .pane-head h3, .blk > h2, .sect-label, .mblk h3, .stat > span, .dialog-head h2, .pophead, .figure > span) > i:is(.ph-receipt, .ph-receipt-x, .ph-coins, .ph-invoice),
:is(.doc-ic, .file-row, .rows li:not(.bad) .ic) > i:is(.ph-receipt, .ph-receipt-x, .ph-coins, .ph-invoice) { color: var(--money); }
:is(.stat > span, .rows li .ic, .pane-head h2) > i.ph-pencil-simple-line { color: var(--accent1-ink); }

/* ---------- Medication list (patient medications tab) ----------
   ul.mlist > li.mrow > .mrow-line( button.mrow-main[aria-expanded][aria-controls] (caret + b + small) + .dose-chg? + .mrow-acts ) + .mrow-more[hidden]
   One quiet row per drug; details (facts + dose history) open on demand. */
.mlist { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.mrow { border-bottom: 1px solid var(--line); }
.mrow-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 12px 6px; }
.mrow-main { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px 8px; align-items: center; text-align: start; min-width: 0; border-radius: var(--r-row); }
.mrow-main > i { grid-row: span 2; align-self: start; margin-top: 6px; font-size: 13px; color: var(--muted); rotate: -90deg; transition: rotate .15s var(--ease); }
[dir="rtl"] .mrow-main > i { rotate: 90deg; }
.mrow-main[aria-expanded="true"] > i { rotate: 0deg; }
.mrow-main b { font-size: 15px; font-weight: 800; color: var(--ink); }
.mrow-main b bdi { font-weight: 600; color: var(--primary-strong); }
.mrow-main:hover b { color: var(--primary); }
.mrow-main small { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.mrow-main small i { font-size: 15px; color: var(--med); }
.mrow-acts { display: flex; gap: 4px; }
.mrow-more { display: flex; flex-direction: column; gap: 16px; padding: 0 6px 20px; padding-inline-start: 32px; }
.mrow:has(> .mrow-more:not([hidden])) { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
/* Inline facts: dl.facts > div > dt + dd */
.facts { display: flex; flex-wrap: wrap; gap: 8px 32px; }
.facts dt { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.facts dd { font-size: 13px; color: var(--ink); }
/* Collapsed group: <details class="grp-fold"><summary><i class="ph-bold ph-caret-down"></i>…<span class="count">2</span></summary>…</details> */
.grp-fold > summary { list-style: none; display: flex; align-items: center; gap: 8px; padding: 6px; border-radius: var(--r-row); cursor: pointer; font-size: 12.5px; font-weight: 800; color: var(--muted); }
.grp-fold > summary::-webkit-details-marker { display: none; }
.grp-fold > summary:hover { color: var(--ink); }
.grp-fold > summary > i { font-size: 13px; rotate: -90deg; transition: rotate .15s var(--ease); }
[dir="rtl"] .grp-fold > summary > i { rotate: 90deg; }
.grp-fold[open] > summary > i { rotate: 0deg; }
.grp-fold > div { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 0; padding-inline-start: 26px; }
.grp-fold > div > .btn { align-self: flex-start; }

/* ---------- Responsive: tablet (≤1100) and phone (≤720); touch targets on coarse pointers ---------- */
@media (max-width: 1100px) {
  .grip { display: none; }
  .note, .split, .split.wide-aside, .form-sec, .compose, .settings { grid-template-columns: minmax(0, 1fr); }
  .stats, .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hbtn.search { flex: none; }
  .nav a span { display: none; }
  .setnav { position: static; }
}
@media (max-width: 720px) {
  .page { padding: 16px; }
  .g-2, .g-3, .g-4, .stats, .fields, .fields.cols-3, .kv.cols-2 { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 1100px) {
  /* Bar: labels collapse to icons; text stays for screen readers */
  .hbtn.search span, .hbtn-text, .me b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bar kbd { display: none; }
  /* Split desk becomes one scrolling column: patient banner (sticky, allergy always in view), tabs, record, work pane */
  .desk { display: flex; flex-direction: column; padding: 0; gap: 0; overflow: auto; }
  .desk > .rec { display: contents; }
  .desk .rail, .fold { display: none; }
  .desk.is-collapsed .rec > .who { display: grid; }
  .desk.is-collapsed .rec > :is(.tabs, .rec-body) { display: flex; }
  .who { position: sticky; top: 0; z-index: 3; }
  .rec > .tabs { position: static; background: var(--surface); }
  /* The tab's own content comes right under the tabs; the record summary (dx, meds, visits) follows it */
  .rec-body { order: 2; margin-top: 8px; background: var(--surface); border-block: 1px solid var(--edge); }
  .desk > .pane:not(.rec) { order: 1; flex: none; min-height: auto; overflow: visible; border-radius: 0; border-inline: 0; box-shadow: none; }
  .work-body, .note, .compose-form, .compose-preview { overflow: visible; }
  .compose { flex: none; }
  .compose-preview { border-inline-start: 0; border-top: 1px solid var(--line); }
  .note-margin { position: static; }
  /* Closing bars (sign, save) stay reachable at the bottom of the screen while their pane is in view */
  .desk > .pane > .pane-foot { position: sticky; bottom: 0; z-index: 2; flex-wrap: wrap; }
  .btn kbd { display: none; }
  /* Stacked splits: a sticky aside would sit on top of the content */
  .page .split > * { position: static; }
  /* Tabs scroll sideways instead of wrapping */
  .tabs, .doctabs, .doctabs [role="tablist"] { overflow-x: auto; scrollbar-width: none; }
  .tabs > .on::after, .tabs > [aria-selected="true"]::after { bottom: 0; }
  .doctabs > *, .tabs > * { flex: none; }
  .doctabs > [role="tablist"] { flex: 1 1 auto; min-width: 0; }
  /* Overlays fit the screen and scroll inside */
  .dialog, .dialog.wide, .dialog.sm { max-height: calc(100dvh - 32px); }
  .drawer { height: 100dvh; max-height: 100dvh; }
  [popover] { max-width: calc(100vw - 16px); }
  .menu { max-height: calc(100dvh - var(--bar-h) - 16px); overflow: auto; }
  /* phone: settings nav */
  /* Settings sub-nav: one compact row of the four section links (current one tinted) instead of a tall list; 2 × 2 on phones */
  .setnav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .setnav .menu-item small, .setnav-foot { display: none; }
  .setnav .menu-item { line-height: 1.35; }
  @media (max-width: 720px) {
    .setnav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .setnav .menu-item { min-height: 44px; padding: 6px 8px; gap: 8px; font-size: 12.5px; }
  }
  /* end phone: settings nav */
}
@media screen and (max-width: 720px) {
  /* Bar: brand, search, sync count and the menu button; everything else is in #appmenu */
  .bar { padding: 0 8px; gap: 2px; }
  .brand { margin-inline-end: 6px; }
  .nav, .hbtn.clinic, .hbtn.lang, .me, .tools > a.hbtn { display: none; }
  .menu-btn { display: flex; }
  .hbtn, .hbtn.search { justify-content: center; min-width: 44px; padding: 0 10px; }
  #appmenu, #syncbox { inset-inline: 8px; width: auto; max-height: calc(100dvh - var(--bar-h) - 16px); overflow: auto; }
  #syncbox { top: calc(var(--bar-h) + 6px); }
  #finder { top: calc(var(--bar-h) + 8px); }
  #finder .recent { max-height: calc(100dvh - var(--bar-h) - 180px); }
  /* Patient banner: compact (no avatar), edit button at the end, allergy full width */
  .who { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 16px; }
  .who > .av { display: none; }
  .who > .edit { grid-column: 2; }
  .who > :is(.pname, .pmeta) { grid-column: 1; }
  .who .allergy { margin-top: 8px; }
  .resume { margin-top: 6px; padding: 7px 10px; }
  .rec-body { padding: 14px 16px 18px; }
  .note { padding: 16px; }
  .note-head { flex-wrap: wrap; }
  .note-state { margin-inline-start: 0; align-items: flex-start; }
  .note-head h2 { font-size: var(--fs-2xl); }
  .compose-form { padding: 16px; }
  .compose-preview .paper { zoom: .4; }
  .preview { --preview-zoom: .38; }
  /* The sheet reflows on screen (print keeps A4) */
  .paper { aspect-ratio: auto; padding: 24px 18px 20px; }
  .paper-meta { grid-template-columns: minmax(0, 1fr); }
  .paper-totals { width: 100%; }
  /* Forms and lists: one column, 16px text in fields (no iOS zoom) */
  .input, .input.sm, .input-search input, .finput input, select, textarea { font-size: 16px; }
  .toolbar .input-search { width: 100%; }
  .page-actions { margin-inline-start: 0; }
  .form-actions, .dialog-foot, .pane-foot, .pager, .popfoot, .pane-head, .pane-head .acts, .notice .acts { flex-wrap: wrap; }
  .notice { grid-template-columns: auto minmax(0, 1fr); }
  .notice .acts { grid-column: 2; }
  .mrow-line { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .mrow-line > .dose-chg { justify-self: start; margin-inline-start: 26px; }
  .mrow-acts { flex-wrap: wrap; padding-inline-start: 26px; }
  .fail-item { grid-template-columns: minmax(0, 1fr); }
  .barlist { grid-template-columns: minmax(0, 120px) minmax(0, 1fr) auto; }
  .dropzone { flex-wrap: wrap; }
  .mse-row { grid-template-columns: minmax(0, 1fr); }
  .mse-row:not(.edit) > div { grid-template-columns: minmax(0, 1fr); }
  .mse-row.edit { grid-template-columns: 30px 22px minmax(0, 1fr) auto; }
  .mse-row.edit .opts { grid-column: 1 / -1; }
  .auth-split { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .auth-split .auth-card { padding: 24px 20px; }
  .auth-split .auth-top .auth-brand { display: flex; }
  .auth-panel { display: none; }
  /* phone: list cards */
  /* Opt-in: <table class="table cards"> turns each row into a stacked, tappable card (desktop table unchanged).
     Cell roles: td.c-main = primary line · td.c-end = trailing item on the primary line (amount, status, allergy)
     · td.c-sub = full-width second line · td.c-hide = not shown on phones · any other td = secondary meta (small, wraps).
     data-label="…" prefixes a meta cell, data-unit="…" suffixes it (currency). Empty cells collapse. tfoot = one summary line. */
  .table.cards, .table.cards tbody, .table.cards tfoot { display: block; }
  .table.cards thead { display: none; }
  .table.cards tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
  .table.cards tbody tr::before { content: ""; order: -1; flex-basis: 100%; }
  .table.cards tbody tr:last-child { border-bottom: 0; }
  .table.cards tr[data-href] { min-height: 56px; }
  .table.cards td { display: block; width: auto; padding: 0; border: 0; min-width: 0; }
  .table.cards :is(td:empty, .c-hide) { display: none; }
  .table.cards .c-main { order: -3; flex: 1 1 0; font-size: var(--fs-base); }
  .table.cards .c-end { order: -2; flex: none; max-width: 55%; text-align: end; font-weight: 700; }
  .table.cards .c-sub { order: -1; flex-basis: 100%; }
  .table.cards tbody td:not(.c-main, .c-end, .c-sub) { font-size: var(--fs-xs); color: var(--muted); text-align: start; }
  .table.cards td:not(.c-main) .t-sub { display: inline; margin-inline-start: 6px; }
  .table.cards td:not(.c-main) .av { display: none; }
  .table.cards td[data-label]::before { content: attr(data-label) " "; }
  .table.cards td[data-unit]::after { content: " " attr(data-unit); }
  .table.cards td[data-unit]::after, .table.cards .c-end[data-label]::before { font-size: var(--fs-xs); font-weight: 500; color: var(--muted); }
  .table.cards tfoot tr { justify-content: space-between; background: var(--surface-2); border-top: 1px solid var(--line); border-bottom: 0; }
  .table.cards tfoot td { background: none; border: 0; }
  .table.cards tfoot td:first-child { flex: 1; }
  /* end phone: list cards */
}
/* Touch: every control at least 44px tall */
@media screen and (pointer: coarse) {
  :is(.btn, .hbtn, .input, .input-search, .menu-item, .chip, .seg > button, .tabs > a, .tabs > button, .dt, .pager a, .pager button, .rows li > a.mini, .rows li > button, .check, .vrow, .recent a, .file-row, a.blk-more, .note-add, .secnav a, .th-sort) { min-height: 44px; }
  :is(.pager a, .pager button) { min-width: 44px; }
  /* Tiny targets keep their look but get a 44px tap area */
  .chip .x { position: relative; }
  .chip .x::before { content: ""; position: absolute; inset: -14px; }
  :is(.crumbs a, a.link, button.link) { display: inline-block; padding-block: 12px; margin-block: -12px; }
  :is(.ibtn, .btn.icon) { min-width: 44px; min-height: 44px; }
  /* Small links in section headings get the full target without growing the heading */
  :is(.blk > h2, .sect-label) > :is(a, button) { min-height: 44px; margin-block: -12px; }
}

/* ---------- Print: only the paper sheet ----------
   Works for standard pages (.page) and the split desk (.desk: record pane and grip carry .no-print). */
@media print {
  @page { size: A4; margin: 0; }
  html, body { height: auto; }
  body { display: block; overflow: visible; background: var(--paper); }
  .bar, .page-head, .no-print, .toasts, [popover], dialog { display: none !important; }
  .page, .desk { display: block; padding: 0; overflow: visible; min-height: 0; }
  .desk > .pane { display: block; box-shadow: none; border: 0; overflow: visible; background: none; }
  .compose { display: block; }
  .compose-preview, .preview { background: none; border: 0; padding: 0; overflow: visible; }
  .paper-desk { display: block; padding: 0; }
  .paper, .compose-preview .paper, .preview .paper { zoom: 1; box-shadow: none; width: 210mm; max-width: none; aspect-ratio: auto; min-height: 297mm; border-radius: 0; break-inside: avoid; }
  .paper.a5 { width: 148mm; min-height: 210mm; }
}

/* English (LTR): pages are authored for RTL, so directional glyphs flip instead of being renamed */
[dir="ltr"] :is(.ph-caret-left, .ph-caret-right, .ph-arrow-left, .ph-arrow-right, .ph-arrow-u-up-left, .ph-arrow-u-up-right, .ph-caret-double-left, .ph-caret-double-right) { display: inline-block; transform: scaleX(-1); }