/* Mizan Rx web app styles.
   Tokens and components come from the design prototype (design/prototype/index.html, design/ui-spec.md);
   the block marked "app" at the end adds what the production app needs (app nav, environment banner,
   persona toolbar, print label, report preview). Fonts are self-hosted (no third-party requests). */
@font-face { font-family: "Inter"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/Inter_400Regular.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/Inter_600SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/Inter_700Bold.ttf") format("truetype"); }
@font-face { font-family: "Inter"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/Inter_800ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Readex Pro"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ReadexPro_400Regular.ttf") format("truetype"); }
@font-face { font-family: "Readex Pro"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/ReadexPro_600SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Readex Pro"; font-weight: 700 800; font-style: normal; font-display: swap; src: url("../fonts/ReadexPro_700Bold.ttf") format("truetype"); }

/* Layout concept: one calm working column per role, 12-col grid at 1024+, navy ink on cool paper,
   blue only for actions, red/amber/green only for result severity. */
:root {
  --bg: #F4F7FB; --card: #FFFFFF; --sunken: #EEF3F9; --line: #E4EAF2; --line-strong: #C5D2E3;
  --ink: #0F1E33; --ink2: #51627A; --ink3: #5F7088; --heading: #0B2545;
  --blue: #1F5FA8; --blue-press: #1D4E89; --on-blue: #FFFFFF; --link: #1F5FA8; --focus: #1F5FA8;
  --tint: #EAF2FB; --tint-line: #CFE0F6; --navy: #0B2545; --on-navy: #FFFFFF; --anchor: #123A6B;
  --teal: #12A38B; --teal-ink: #0E7F6C; --teal-bg: #F0FAF7; --field: #8193AB; --gold: #E8AE3F;
  --err: #9C2A5E; --err-bg: #F8E8F0;
  --act-dot: #C0322C; --act-ink: #A12822; --act-bg: #FBE7E6;
  --cau-dot: #D48A06; --cau-ink: #8A5A00; --cau-bg: #FDF1DC;
  --std-dot: #1E8A4C; --std-ink: #15693A; --std-bg: #E6F4EC;
  --und-dot: #94A3B8; --und-ink: #51627A; --und-bg: #EEF3F9;
  --bar: #123A6B; --bar-hi: #1F5FA8; --grid: #E4EAF2;
  --camera: #0E1A2B; --camera-ink: #E7EEF7; --phone: #0B2545;
  --apay-bg: #000000; --apay-ink: #FFFFFF;
  --shadow: 0 1px 2px rgba(11,37,69,.06), 0 6px 20px rgba(11,37,69,.06);
  --shadow-pop: 0 2px 6px rgba(11,37,69,.10), 0 16px 40px rgba(11,37,69,.14);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-code: "Inter", system-ui, "Segoe UI", Arial, sans-serif;
  --fs-display: 36px; --lh-display: 44px;
  --fs-h1: 28px; --lh-h1: 36px;
  --fs-h2: 20px; --lh-h2: 28px;
  --fs-h3: 17px; --lh-h3: 24px;
  --fs-body: 15.5px; --lh-body: 24px;
  --fs-sm: 13.5px; --lh-sm: 20px;
  --fs-xs: 12px; --lh-xs: 16px;
  --track-caps: .07em;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --r-sm: 9px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #08111F; --card: #0F1C30; --sunken: #14243B; --line: #1F3350; --line-strong: #34507A;
    --ink: #E7EEF7; --ink2: #B0C0D6; --ink3: #97A9C2; --heading: #F2F6FB;
    --blue: #6FA8EC; --blue-press: #8AB8F0; --on-blue: #071528; --link: #8AB8F0; --focus: #8AB8F0;
    --tint: #12294A; --tint-line: #2A4D7E; --navy: #DCE7F5; --on-navy: #071528; --anchor: #B7D2F0;
    --teal: #2CC2A6; --teal-ink: #5ED6BE; --teal-bg: #0D2F2A; --field: #5C77A0; --gold: #E8AE3F;
    --err: #F29BC2; --err-bg: #3A1528;
    --act-dot: #F06A62; --act-ink: #FFB1AB; --act-bg: #3D1614;
    --cau-dot: #F0A825; --cau-ink: #F6C96E; --cau-bg: #372608;
    --std-dot: #43C27A; --std-ink: #8ADDA9; --std-bg: #0D2E1D;
    --und-dot: #8496AE; --und-ink: #B0C0D6; --und-bg: #1A2B43;
    --bar: #7FA9DB; --bar-hi: #B7D2F0; --grid: #1F3350;
    --camera: #050B14; --camera-ink: #E7EEF7; --phone: #000000;
    --apay-bg: #FFFFFF; --apay-ink: #000000;
    --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.3);
    --shadow-pop: 0 2px 6px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #08111F; --card: #0F1C30; --sunken: #14243B; --line: #1F3350; --line-strong: #34507A;
  --ink: #E7EEF7; --ink2: #B0C0D6; --ink3: #97A9C2; --heading: #F2F6FB;
  --blue: #6FA8EC; --blue-press: #8AB8F0; --on-blue: #071528; --link: #8AB8F0; --focus: #8AB8F0;
  --tint: #12294A; --tint-line: #2A4D7E; --navy: #DCE7F5; --on-navy: #071528; --anchor: #B7D2F0;
  --teal: #2CC2A6; --teal-ink: #5ED6BE; --teal-bg: #0D2F2A; --field: #5C77A0; --gold: #E8AE3F;
  --err: #F29BC2; --err-bg: #3A1528;
  --act-dot: #F06A62; --act-ink: #FFB1AB; --act-bg: #3D1614;
  --cau-dot: #F0A825; --cau-ink: #F6C96E; --cau-bg: #372608;
  --std-dot: #43C27A; --std-ink: #8ADDA9; --std-bg: #0D2E1D;
  --und-dot: #8496AE; --und-ink: #B0C0D6; --und-bg: #1A2B43;
  --bar: #7FA9DB; --bar-hi: #B7D2F0; --grid: #1F3350;
  --camera: #050B14; --camera-ink: #E7EEF7; --phone: #000000;
  --apay-bg: #FFFFFF; --apay-ink: #000000;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.3);
  --shadow-pop: 0 2px 6px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.5);
  color-scheme: dark;
}
:root:lang(ar) {
  --font: "Readex Pro", "Noto Kufi Arabic", "Geeza Pro", Tahoma, system-ui, sans-serif;
  --fs-display: 40px; --lh-display: 54px;
  --fs-h1: 31px; --lh-h1: 44px;
  --fs-h2: 22px; --lh-h2: 34px;
  --fs-h3: 19px; --lh-h3: 30px;
  --fs-body: 17px; --lh-body: 28px;
  --fs-sm: 15px; --lh-sm: 24px;
  --fs-xs: 13px; --lh-xs: 20px;
  --track-caps: 0;
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: var(--fs-body); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--card); }
h1, h2, h3, p, dl, dd, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { color: var(--heading); text-wrap: balance; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--link); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
:focus, [id] { scroll-margin-top: 96px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.num, .code { font-variant-numeric: tabular-nums; }
.code { font-family: var(--font-code); font-feature-settings: "tnum" 1, "zero" 1; letter-spacing: .01em; unicode-bidi: isolate; direction: ltr; white-space: nowrap; }
:lang(ar) .code { font-size: .9em; }
.t-display { font-size: var(--fs-display); line-height: var(--lh-display); font-weight: 700; letter-spacing: -.01em; }
.t-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); font-weight: 700; letter-spacing: -.01em; }
.t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 600; }
.t-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 600; }
.t-sm { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.t-xs { font-size: var(--fs-xs); line-height: var(--lh-xs); }
:lang(ar) .t-display, :lang(ar) .t-h1 { letter-spacing: 0; }
.muted { color: var(--ink2); }
.eyebrow { font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--track-caps); color: var(--teal-ink); }
.lede { color: var(--ink2); max-width: 64ch; }

/* ---------- App header ---------- */
.app-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--card); border-block-end: 1px solid var(--line); }
.wrap { max-width: 1200px; margin-inline: auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s4); padding-block: 10px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--heading); margin-inline-end: auto; }
.brand svg { width: 36px; height: 36px; flex: none; }
.wordmark { font-family: "Inter", system-ui, sans-serif; font-weight: 800; font-size: 19px; letter-spacing: -.01em; direction: ltr; unicode-bidi: isolate; }
.wordmark b { color: var(--teal); font-weight: 800; }
.proto-tag { font-size: var(--fs-xs); line-height: 1; padding: 5px 8px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); color: var(--ink2); font-weight: 600; }
.controls { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.role-pick { display: flex; align-items: center; gap: var(--s2); }
.role-pick label { font-size: var(--fs-sm); color: var(--ink2); white-space: nowrap; }
select, .input { min-height: 44px; border: 1px solid var(--field); border-radius: var(--r-sm); background: var(--card); padding-inline: 12px; width: 100%; }
.role-pick select { width: auto; min-width: 12rem; font-weight: 600; }
.icon-btn { min-height: 44px; min-width: 44px; padding-inline: 12px; border-radius: var(--r-sm); border: 1px solid var(--field); background: var(--card); cursor: pointer; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.icon-btn:hover { background: var(--sunken); }
.lang-btn { font-family: "Readex Pro", "Inter", sans-serif; }
:lang(ar) .lang-btn { font-family: "Inter", system-ui, sans-serif; }
.synthetic { background: var(--sunken); border-block-end: 1px solid var(--line); }
.synthetic .wrap { display: flex; gap: var(--s2) var(--s3); align-items: baseline; flex-wrap: wrap; padding-block: 8px; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink2); }
.synth-tag { font-weight: 700; color: var(--heading); display: inline-flex; align-items: center; gap: 6px; }
.synth-tag::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--gold); transform: rotate(45deg); }
@media (max-width: 767px) {
  .role-pick { flex: 1 1 100%; order: 3; }
  .role-pick select { flex: 1; min-width: 0; }
  .proto-tag { display: none; }
}

/* ---------- Page ---------- */
main.wrap { padding-block: var(--s6) var(--s8); }
.page-head { display: grid; gap: var(--s2); margin-block-end: var(--s5); }
.subnav { display: flex; gap: 2px; border-block-end: 1px solid var(--line); margin-block-end: var(--s6); overflow-x: auto; scrollbar-width: none; }
.subnav button { min-height: 44px; padding-inline: 14px; background: none; border: 0; border-block-end: 2px solid transparent; color: var(--ink2); font-weight: 600; cursor: pointer; white-space: nowrap; margin-block-end: -1px; }
.subnav button[aria-current="page"] { color: var(--heading); border-block-end-color: var(--blue); }
.subnav button:hover { color: var(--heading); }
.layout { display: grid; gap: var(--s6); }
.layout > * { min-width: 0; }
@media (min-width: 1024px) {
  .layout.with-aside { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .layout.split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .layout.wide-left { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: start; }
  .layout.phone-left { grid-template-columns: 384px minmax(0, 1fr); align-items: start; }
  .sticky-aside { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 96px); }
}
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s5); }
.panel + .panel { margin-block-start: var(--s4); }
.layout > .panel + .panel { margin-block-start: 0; }
.panel h2 { margin-block-end: var(--s3); }
.stack { display: grid; gap: var(--s4); }
.stack-sm { display: grid; gap: var(--s2); }
.stack > *, .stack-sm > *, .panel > * { min-width: 0; }
.row { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.hr { height: 1px; background: var(--line); border: 0; margin-block: var(--s4); }

/* ---------- Buttons ---------- */
.btn { min-height: 44px; padding-inline: 18px; border-radius: 10px; border: 1px solid transparent; background: var(--blue); color: var(--on-blue); font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.btn:hover { background: var(--blue-press); }
.btn.secondary { background: var(--card); color: var(--link); border-color: var(--line-strong); }
.btn.secondary:hover { background: var(--tint); }
.btn.quiet { background: transparent; color: var(--link); padding-inline: 8px; }
.btn.quiet:hover { background: var(--tint); }
.btn.block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--sunken); color: var(--ink3); border-color: var(--line); cursor: not-allowed; }
.btn svg { width: 18px; height: 18px; flex: none; }
[dir="rtl"] .mirror { transform: scaleX(-1); }

/* ---------- Form fields ---------- */
.field { display: grid; gap: 6px; }
.field > label, .field > .label, legend { font-weight: 600; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink); }
.hint { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink2); }
.input { padding-block: 8px; }
.input:focus, select:focus { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.input[aria-invalid="true"] { border-color: var(--err); border-width: 2px; }
.input.id-input { font-family: var(--font-code); font-feature-settings: "tnum" 1, "zero" 1; letter-spacing: .04em; text-transform: uppercase; direction: ltr; text-align: start; }
[dir="rtl"] .input.id-input, [dir="rtl"] .input[type="email"], [dir="rtl"] .input[type="tel"] { text-align: right; }
.msg { display: flex; gap: 6px; align-items: flex-start; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.msg svg { width: 16px; height: 16px; flex: none; margin-block-start: 2px; }
.msg.err { color: var(--err); }
.msg.ok { color: var(--teal-ink); }
.msg.info { color: var(--ink2); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.grid-2 { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.check { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding-block: 10px; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blue); flex: none; }
.notice { display: flex; gap: var(--s3); padding: var(--s3) var(--s4); border-radius: var(--r-sm); background: var(--tint); border: 1px solid var(--tint-line); color: var(--ink); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.notice svg { width: 20px; height: 20px; flex: none; color: var(--link); }
.notice.err { background: var(--err-bg); border-color: var(--err); }
.notice.err svg { color: var(--err); }

/* OTP */
.otp-boxes { display: flex; gap: 8px; direction: ltr; }
.otp-box { width: 48px; height: 56px; text-align: center; font-size: 22px; font-weight: 700; font-family: "Inter", system-ui, sans-serif; border: 1px solid var(--field); border-radius: var(--r-sm); background: var(--card); font-variant-numeric: tabular-nums; }
.otp-box:focus { outline: 3px solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.otp-box[aria-invalid="true"] { border-color: var(--err); border-width: 2px; }
.otp-boxes .sep { width: 8px; }
@media (max-width: 380px) { .otp-box { width: 42px; height: 52px; } }

/* ---------- Pills, chips ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: var(--r-pill); font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 600; white-space: nowrap; border: 1px solid transparent; }
[dir="rtl"] .pill { padding: 3px 8px 3px 10px; }
.pill svg { width: 12px; height: 12px; flex: none; }
.pill.ph-log { background: var(--sunken); color: var(--ink2); border-color: var(--line-strong); }
.pill.ph-lab { background: var(--tint); color: var(--link); border-color: var(--tint-line); }
.pill.ph-sign { background: var(--teal-bg); color: var(--teal-ink); border-color: var(--teal); }
.pill.ph-done { background: var(--navy); color: var(--on-navy); }
.pill.ph-err { background: var(--err-bg); color: var(--err); border-color: var(--err); }
.pill.ph-off { background: transparent; color: var(--ink3); border-color: var(--line-strong); border-style: dashed; }
.sev { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 7px; border-radius: 6px; font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 700; white-space: nowrap; }
[dir="rtl"] .sev { padding: 3px 7px 3px 10px; }
.sev svg { width: 14px; height: 14px; flex: none; }
.sev.ACT { background: var(--act-bg); color: var(--act-ink); } .sev.ACT svg { color: var(--act-dot); }
.sev.CAU { background: var(--cau-bg); color: var(--cau-ink); } .sev.CAU svg { color: var(--cau-dot); }
.sev.STD { background: var(--std-bg); color: var(--std-ink); } .sev.STD svg { color: var(--std-dot); }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; background: var(--sunken); color: var(--ink2); font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 600; white-space: nowrap; }

/* ---------- Tables ---------- */
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); line-height: var(--lh-sm); }
th, td { padding: 10px 14px; text-align: start; border-block-end: 1px solid var(--line); vertical-align: top; }
th { font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 600; color: var(--ink2); text-transform: uppercase; letter-spacing: var(--track-caps); background: var(--sunken); white-space: nowrap; }
tr:last-child td { border-block-end: 0; }
td.n, th.n { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
tbody tr.sel td { background: var(--tint); }
tfoot td { font-weight: 700; background: var(--sunken); border-block-end: 0; }
caption { text-align: start; padding: 12px 14px; font-weight: 600; color: var(--heading); }

/* ---------- Results ---------- */
.meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3) var(--s5); padding-block: var(--s4); border-block: 1px solid var(--line); margin-block-start: var(--s4); }
.meta dt { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--ink2); }
.meta dd { font-weight: 600; }
.sev-summary { display: grid; gap: var(--s3); margin-block: var(--s5); }
@media (min-width: 768px) { .sev-summary { grid-template-columns: repeat(3, 1fr); } }
.sev-card { text-align: start; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "count chip" "count desc"; column-gap: var(--s4); row-gap: 4px; align-items: center; padding: var(--s4); border-radius: var(--r-md); border: 1px solid var(--line); background: var(--card); cursor: pointer; min-height: 44px; }
.sev-card .count { grid-area: count; font-size: var(--fs-display); line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; font-family: "Inter", system-ui, sans-serif; }
.sev-card .sev { grid-area: chip; justify-self: start; }
.sev-card .d { grid-area: desc; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--ink2); }
.sev-card.ACT .count { color: var(--act-ink); } .sev-card.CAU .count { color: var(--cau-ink); } .sev-card.STD .count { color: var(--std-ink); }
.sev-card[aria-pressed="true"] { border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
.sev-card:hover { background: var(--sunken); }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: end; justify-content: space-between; margin-block-end: var(--s4); }
.seg { display: inline-flex; padding: 3px; background: var(--sunken); border-radius: 10px; border: 1px solid var(--line); }
.seg button { min-height: 38px; padding-inline: 14px; border: 0; border-radius: 8px; background: transparent; color: var(--ink2); font-weight: 600; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--card); color: var(--heading); box-shadow: var(--shadow); }
.search { min-width: 0; flex: 1 1 220px; max-width: 320px; }
.group { margin-block-end: var(--s6); }
.group-head { display: flex; align-items: center; gap: var(--s3); padding-block: var(--s3); border-block-start: 2px solid var(--line); }
.group.ACT .group-head { border-block-start-color: var(--act-dot); }
.group.CAU .group-head { border-block-start-color: var(--cau-dot); }
.group.STD .group-head { border-block-start-color: var(--std-dot); }
.group-head .d { color: var(--ink2); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.medlist { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); }
.med { display: grid; gap: 6px var(--s5); padding: var(--s4); border-block-end: 1px solid var(--line); }
.med:last-child { border-block-end: 0; }
.med .name { font-weight: 700; color: var(--heading); }
.med .cls { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--ink2); }
.med .gene { display: flex; flex-wrap: wrap; gap: 2px 8px; align-items: baseline; align-content: start; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.med .gene .g { font-weight: 700; }
.med .pheno { color: var(--ink2); font-size: var(--fs-xs); line-height: var(--lh-xs); flex-basis: 100%; }
.med .mean { font-size: var(--fs-sm); line-height: var(--lh-sm); max-width: 62ch; }
.med-head { display: none; }
@media (min-width: 768px) {
  .med, .med-head { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) minmax(0, 2fr); }
  .med-head { display: grid; gap: var(--s5); padding: 8px var(--s4); background: var(--sunken); border-block-end: 1px solid var(--line); border-start-start-radius: var(--r-md); border-start-end-radius: var(--r-md); font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 600; color: var(--ink2); text-transform: uppercase; letter-spacing: var(--track-caps); }
}
.empty { text-align: center; padding: var(--s7) var(--s4); border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--ink2); display: grid; gap: var(--s2); justify-items: center; }
.empty svg { width: 40px; height: 40px; color: var(--ink3); }
.sig { display: grid; gap: 2px; padding-block: var(--s3); border-block-end: 1px solid var(--line); }
.sig:last-of-type { border-block-end: 0; }
.kv { display: flex; justify-content: space-between; gap: var(--s3); padding-block: 6px; }
.kv dt { color: var(--ink2); }
.kv dd { font-weight: 600; text-align: end; white-space: nowrap; }

/* ---------- Checkout ---------- */
.steps { display: flex; gap: var(--s2); margin-block-end: var(--s5); flex-wrap: wrap; }
.steps li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--ink2); font-weight: 600; }
.steps li + li::before { content: ""; width: 28px; height: 1px; background: var(--line-strong); margin-inline-end: 4px; }
.steps .dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; border: 1px solid var(--line-strong); font-family: "Inter", sans-serif; }
.steps li[aria-current="step"] { color: var(--heading); }
.steps li[aria-current="step"] .dot { background: var(--blue); color: var(--on-blue); border-color: var(--blue); }
.steps li.done .dot { background: var(--teal-bg); color: var(--teal-ink); border-color: var(--teal); }
.pay-methods { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s2); }
.pay-opt { position: relative; }
.pay-opt input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.pay-opt span.box { display: grid; place-items: center; gap: 2px; min-height: 64px; border: 1px solid var(--field); border-radius: var(--r-sm); background: var(--card); padding: 8px; text-align: center; }
.pay-opt input:checked + span.box { border: 2px solid var(--blue); background: var(--tint); }
.pay-opt input:focus-visible + span.box { outline: 3px solid var(--focus); outline-offset: 2px; }
.mark-mada { font-family: "Inter", sans-serif; font-weight: 800; font-size: 17px; letter-spacing: -.02em; color: var(--heading); direction: ltr; }
.mark-visa { font-family: "Inter", sans-serif; font-weight: 800; font-style: italic; font-size: 18px; color: var(--heading); letter-spacing: .02em; }
.mark-mc { display: inline-flex; direction: ltr; }
.mark-mc i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--heading); display: block; }
.mark-mc i + i { margin-inline-start: -7px; }
.pay-opt small { font-size: var(--fs-xs); color: var(--ink2); }
.hosted { border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); padding: var(--s4); display: grid; gap: var(--s3); background: var(--sunken); }
.hosted-head { display: flex; gap: 8px; align-items: center; font-weight: 600; font-size: var(--fs-sm); }
.hosted-head svg { width: 16px; height: 16px; color: var(--teal-ink); }
.hf { display: grid; gap: 4px; }
.hf .label { font-size: var(--fs-xs); font-weight: 600; color: var(--ink2); }
.hf .frame { min-height: 44px; border: 1px solid var(--field); border-radius: var(--r-sm); background: var(--card); display: flex; align-items: center; justify-content: space-between; padding-inline: 12px; color: var(--ink3); font-family: "Inter", sans-serif; letter-spacing: .08em; direction: ltr; }
.hf .frame em { font-style: normal; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink3); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.hf-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); }
.summary dl { display: grid; gap: 0; }
.summary .kv { border-block-end: 1px solid var(--line); padding-block: 10px; }
.summary .kv.total { border-block-end: 0; font-size: var(--fs-h3); line-height: var(--lh-h3); }
.summary .kv.total dt { color: var(--heading); font-weight: 700; }
.summary .kv.total dd { font-weight: 800; color: var(--heading); }
.done-mark { width: 48px; height: 48px; border-radius: 50%; background: var(--teal-bg); color: var(--teal-ink); display: grid; place-items: center; }
.done-mark svg { width: 26px; height: 26px; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-inline-end-color: transparent; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Timeline ---------- */
.timeline { position: relative; display: grid; gap: 0; }
.tl { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: var(--s3); padding-block-end: var(--s5); }
.tl::before { content: ""; position: absolute; inset-inline-start: 13px; top: 28px; bottom: 0; width: 2px; background: var(--line); }
.tl:last-child::before { display: none; }
.tl.done::before { background: var(--teal); }
.tl .node { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line-strong); background: var(--card); color: var(--ink3); }
.tl.done .node { background: var(--teal); border-color: var(--teal); color: var(--card); }
.tl.now .node { border-color: var(--blue); color: var(--blue); }
.tl.now .node::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--blue); }
.tl .node svg { width: 16px; height: 16px; }
.tl .what { font-weight: 600; color: var(--heading); }
.tl.todo .what { color: var(--ink2); font-weight: 400; }
.tl .when { font-size: var(--fs-sm); color: var(--ink2); }
.tl .now-tag { display: inline-block; margin-inline-start: 8px; font-size: var(--fs-xs); font-weight: 700; color: var(--link); }
.orders { display: grid; gap: var(--s2); }
.order-btn { display: grid; gap: 2px; text-align: start; padding: var(--s3) var(--s4); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); cursor: pointer; min-height: 44px; }
.order-btn[aria-pressed="true"] { border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }

/* ---------- Phone (courier) ---------- */
.phone { width: min(360px, 100%); margin-inline: auto; background: var(--phone); border-radius: 40px; padding: 12px; box-shadow: var(--shadow-pop); }
.phone-screen { background: var(--bg); border-radius: 30px; overflow: hidden; min-height: 640px; display: flex; flex-direction: column; }
.ph-status { display: flex; justify-content: space-between; padding: 10px 22px 4px; font-size: 12px; font-weight: 600; font-family: "Inter", sans-serif; direction: ltr; }
.ph-bar { padding: 8px 16px 12px; border-block-end: 1px solid var(--line); background: var(--card); }
.ph-body { padding: 16px; display: grid; gap: 14px; flex: 1; align-content: start; }
.viewfinder { position: relative; aspect-ratio: 4 / 3; max-width: 100%; background: var(--camera); border-radius: 16px; display: grid; place-items: center; overflow: hidden; color: var(--camera-ink); }
.viewfinder .corners { position: absolute; inset: 12% 14% 26%; }
.viewfinder .corners i { position: absolute; width: 26px; height: 26px; border: 3px solid var(--camera-ink); }
.viewfinder .corners i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 6px 0 0 0; }
.viewfinder .corners i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 6px 0 0; }
.viewfinder .corners i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 6px; }
.viewfinder .corners i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 6px 0; }
.viewfinder .laser { position: absolute; left: 16%; right: 16%; height: 2px; background: var(--teal); top: 50%; animation: sweep 2.2s ease-in-out infinite alternate; }
@keyframes sweep { from { top: 16%; } to { top: 70%; } }
.viewfinder p { position: absolute; bottom: 6%; inset-inline: 0; margin: 0; font-size: var(--fs-sm); text-align: center; padding-inline: 20%; }
.tube-list { display: grid; gap: 8px; }
.tube { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: var(--fs-sm); }
.tube .code { font-weight: 600; }
.progress { height: 6px; border-radius: 3px; background: var(--sunken); overflow: hidden; }
.progress i { display: block; height: 100%; background: var(--teal); border-radius: 3px; transition: width .3s; }

/* ---------- Reception label ---------- */
.label-card { background: #FFFFFF; color: #0F1E33; border-radius: 6px; padding: 14px 16px; border: 1px solid var(--line-strong); width: min(100%, 380px); direction: ltr; text-align: left; font-family: "Inter", sans-serif; }
.label-card .lc-top { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.label-card svg.bc { width: 100%; height: 64px; display: block; margin-block: 8px 4px; }
.label-card .lc-code { font-size: 18px; font-weight: 700; letter-spacing: .08em; text-align: center; font-feature-settings: "tnum" 1, "zero" 1; }
.label-card .lc-meta { display: flex; justify-content: space-between; font-size: 11px; color: #51627A; margin-block-start: 4px; gap: 8px; flex-wrap: wrap; }
.checklist { display: grid; }
.checklist .check { border-block-end: 1px solid var(--line); }
.checklist .check:last-child { border-block-end: 0; }
.check .meas { margin-inline-start: auto; font-size: var(--fs-xs); color: var(--ink2); white-space: nowrap; }

/* ---------- Lab ---------- */
.drop { border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); padding: var(--s5); display: grid; gap: var(--s3); justify-items: start; background: var(--sunken); }
.drop input[type="file"] { max-width: 100%; font-size: var(--fs-sm); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--s3); }
.stat { padding: var(--s3); border-radius: var(--r-sm); background: var(--sunken); }
.stat .v { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 700; font-family: "Inter", sans-serif; font-variant-numeric: tabular-nums; color: var(--heading); }
.stat .k { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--ink2); }
.stat.bad .v { color: var(--err); }
.file-name { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: var(--fs-sm); }

/* ---------- Sign-off ---------- */
.rule { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); border-radius: var(--r-md); background: var(--card); border: 1px solid var(--line); margin-block-end: var(--s5); }
.rule .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--tint); color: var(--link); display: grid; place-items: center; flex: none; }
.rule .ic svg { width: 22px; height: 22px; }
.rule strong { color: var(--heading); display: block; }
.sev-counts { display: flex; gap: 6px; flex-wrap: wrap; }
.person { display: inline-flex; align-items: center; gap: 8px; }
.avatar { min-width: 28px; height: 28px; padding-inline: 4px; white-space: nowrap; border-radius: 14px; background: var(--tint); color: var(--link); display: grid; place-items: center; font-size: 11px; font-weight: 700; flex: none; font-family: "Readex Pro", "Inter", sans-serif; }
.blocked { display: flex; gap: 8px; align-items: flex-start; color: var(--ink); background: var(--sunken); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: 8px 10px; font-size: var(--fs-xs); line-height: var(--lh-xs); max-width: 34ch; }
.blocked svg { width: 16px; height: 16px; flex: none; color: var(--ink2); }
.confirm-row td { background: var(--tint); }

/* ---------- Finance ---------- */
.kpis { display: grid; gap: var(--s3); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-block-end: var(--s5); }
.kpis > :first-child { grid-column: 1 / -1; }
@media (min-width: 1024px) { .kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); } .kpis > :first-child { grid-column: auto; } }
.kpi { padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); display: grid; gap: 4px; align-content: start; }
.kpi .k { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--ink2); }
.kpi .v { white-space: nowrap; font-size: clamp(17px, 1.75vw, 24px); line-height: 32px; font-weight: 700; color: var(--heading); font-family: "Inter", system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.kpi .v small { font-size: 14px; font-weight: 600; color: var(--ink2); letter-spacing: 0; }
:lang(ar) .kpi .v small { font-family: "Readex Pro", sans-serif; }
.kpi .s { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--ink2); }
.chart-wrap { overflow-x: auto; }
.chart-wrap svg { display: block; width: 100%; height: auto; }
table.wide { min-width: 640px; }
.chart-wrap text { font-family: var(--font); }
.legend { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: var(--fs-xs); color: var(--ink2); margin-block-start: var(--s2); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-inline-end: 6px; vertical-align: -1px; }

/* ---------- Apple Pay (neutral placeholder; production renders Apple's official button via the gateway) ---------- */
.apay { width: 100%; min-height: 48px; border: 0; border-radius: 10px; background: var(--apay-bg); color: var(--apay-ink); font-weight: 600; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; padding-inline: 16px; }
.apay svg { width: 22px; height: 22px; flex: none; }
.apay[aria-disabled="true"] { opacity: .75; cursor: progress; }
.channel { margin-block-end: var(--s4); justify-items: start; }
.or-rule { display: flex; align-items: center; gap: var(--s3); color: var(--ink2); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.or-rule::before, .or-rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }
textarea.input { min-height: 88px; padding-block: 10px; resize: vertical; line-height: var(--lh-sm); }
[dir="rtl"] .input[type="number"] { text-align: right; }

/* ---------- Doctor ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding-inline-start: 14px; border-radius: var(--r-pill); border: 1px solid var(--tint-line); background: var(--tint); color: var(--heading); font-weight: 600; font-size: var(--fs-sm); max-width: 100%; }
.chip > span { overflow-wrap: anywhere; }
.chip button { width: 44px; height: 44px; flex: none; border: 0; background: none; color: var(--ink2); cursor: pointer; border-radius: var(--r-pill); display: grid; place-items: center; }
.chip button:hover { color: var(--heading); background: var(--sunken); }
.chip button svg { width: 14px; height: 14px; }
.chip.unknown { border-style: dashed; border-color: var(--err); background: var(--card); }
.add-row { display: flex; gap: var(--s2); }
.add-row .input { flex: 1; min-width: 0; }
.outcome { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: start; padding: var(--s4); border-radius: var(--r-md); border: 2px solid var(--blue); background: var(--tint); }
.outcome.no { border: 1px solid var(--line-strong); background: var(--sunken); }
.outcome .ic { width: 40px; height: 40px; border-radius: 10px; background: var(--card); color: var(--link); display: grid; place-items: center; }
.outcome .ic svg { width: 22px; height: 22px; }
.rv { display: grid; gap: var(--s2); padding: var(--s4); border-block-end: 1px solid var(--line); }
.rv:last-child { border-block-end: 0; }
.rv-head { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: flex-start; justify-content: space-between; }
.rv .name { font-weight: 700; color: var(--heading); }
.rv p { max-width: 70ch; }
.gene-table .gname { display: block; font-weight: 700; color: var(--heading); }
.gene-table .gdesc { display: block; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--ink2); max-width: 36ch; }
.gene-table .gres { font-weight: 600; }
@media (max-width: 767px) { .stack-table.gene-table td { row-gap: 2px; } }
.agr { display: grid; gap: 2px; padding-block: var(--s3); border-block-end: 1px solid var(--line); }
.agr:last-of-type { border-block-end: 0; }
.agr strong { color: var(--heading); }

/* ---------- Toast ---------- */
.toasts { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; display: grid; justify-items: center; gap: 8px; padding-bottom: max(16px, env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); pointer-events: none; }
.toast { pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; max-width: 520px; width: 100%; background: var(--navy); color: var(--on-navy); padding: 12px 16px; border-radius: var(--r-md); box-shadow: var(--shadow-pop); font-size: var(--fs-sm); line-height: var(--lh-sm); animation: rise .2s ease-out; }
.toast svg { width: 18px; height: 18px; flex: none; margin-block-start: 1px; }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (max-width: 1023px) { .layout > aside.summary { order: -1; } .kpi .v { font-size: clamp(17px, 5vw, 24px); } .kpis > :first-child .v { font-size: 28px; } }
@media (max-width: 520px) {
  .steps li:not([aria-current]) .lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .steps li + li::before { width: 16px; }
}
@media (max-width: 767px) {
  .stack-table thead { display: none; }
  .stack-table, .stack-table tbody, .stack-table tr, .stack-table td { display: block; width: 100%; }
  .stack-table tr { border-block-end: 1px solid var(--line); padding-block: 8px; }
  .stack-table tr:last-child { border-block-end: 0; }
  .stack-table td { border: 0; padding: 5px 14px; display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 10px; align-items: start; text-align: start; }
  .stack-table td.n { text-align: start; }
  .stack-table td[data-label]:not([data-label=""]) > * { grid-column: 2; justify-self: start; }
  .stack-table td::before { content: attr(data-label); font-size: var(--fs-xs); line-height: var(--lh-sm); color: var(--ink2); font-weight: 600; }
  .stack-table td:not([data-label])::before, .stack-table td[data-label=""]::before { display: none; }
  .stack-table td:not([data-label]), .stack-table td[data-label=""] { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .viewfinder .laser { animation: none; top: 43%; }
}

/* ---------- v0.3: result review, lab statistics, money in and out ---------- */
:root {
  --s1c: #123A6B; --s2c: #1A9C86;
  --c-vslow: #0B2545; --c-slow: #4F86C6; --c-usual: #CBD5E1; --c-fast: #63C7B2; --c-vfast: #0E6B5C;
  --c-vslow-ink: #FFFFFF; --c-slow-ink: #FFFFFF; --c-usual-ink: #0F1E33; --c-fast-ink: #0F1E33; --c-vfast-ink: #FFFFFF;
  --qc-pass: #1A9C86; --qc-warn: #8193AB; --qc-fail: #9C2A5E; --zone-fail: #F8E8F0; --zone-warn: #EEF3F9;
  --paper: #FFFFFF; --paper-ink: #0F1E33; --paper-ink2: #51627A; --paper-line: #D5DEEA; --paper-tint: #F1F5FA;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --s1c: #7FA9DB; --s2c: #4FD1B7;
    --c-vslow: #C9DDF5; --c-slow: #6C9DDA; --c-usual: #3A4D68; --c-fast: #2BA58E; --c-vfast: #8BE6D3;
    --c-vslow-ink: #071528; --c-slow-ink: #071528; --c-usual-ink: #E7EEF7; --c-fast-ink: #071528; --c-vfast-ink: #071528;
    --qc-pass: #4FD1B7; --qc-warn: #8497B5; --qc-fail: #F29BC2; --zone-fail: #2A1220; --zone-warn: #16263D;
  }
}
:root[data-theme="dark"] {
  --s1c: #7FA9DB; --s2c: #4FD1B7;
  --c-vslow: #C9DDF5; --c-slow: #6C9DDA; --c-usual: #3A4D68; --c-fast: #2BA58E; --c-vfast: #8BE6D3;
  --c-vslow-ink: #071528; --c-slow-ink: #071528; --c-usual-ink: #E7EEF7; --c-fast-ink: #071528; --c-vfast-ink: #071528;
  --qc-pass: #4FD1B7; --qc-warn: #8497B5; --qc-fail: #F29BC2; --zone-fail: #2A1220; --zone-warn: #16263D;
}
.pill.ph-warn { background: var(--sunken); color: var(--ink); border-color: var(--field); }
.tabs-count { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding-inline: 6px; margin-inline-start: 6px; border-radius: 10px; background: var(--sunken); color: var(--ink2); font-size: var(--fs-xs); font-family: "Inter", sans-serif; font-variant-numeric: tabular-nums; }
.seg button[aria-pressed="true"] .tabs-count { background: var(--tint); color: var(--link); }
.seg.wrap-seg { flex-wrap: wrap; }
.filters { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: end; margin-block-end: var(--s5); }
.filters .field { min-width: 180px; flex: 0 1 240px; }
.kpis.k4 > :first-child { grid-column: auto; }
@media (min-width: 1024px) { .kpis.k4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grid-charts { display: grid; gap: var(--s4); }
@media (min-width: 1024px) { .grid-charts { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .grid-charts > .span2 { grid-column: 1 / -1; } }
.grid-charts > * { min-width: 0; }
.panel > h2 + .t-sm.muted { margin-block: -6px var(--s3); }
details.data-tbl { margin-block-start: var(--s3); }
details.data-tbl summary { cursor: pointer; color: var(--link); font-weight: 600; font-size: var(--fs-sm); min-height: 44px; display: flex; align-items: center; }
details.data-tbl .table-scroll { margin-block-start: var(--s2); }
.chart-note { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--ink2); margin-block-start: var(--s2); }
.legend i.dash { background: none; border-top: 2px dashed var(--ink2); height: 0; border-radius: 0; width: 14px; vertical-align: 3px; }
.legend i.zone-f { background: var(--zone-fail); outline: 1px solid var(--qc-fail); }
.legend i.zone-w { background: var(--zone-warn); outline: 1px solid var(--qc-warn); }
/* Horizontal bar rows (HTML grid + inline SVG track; the track mirrors in RTL) */
.hb { display: grid; gap: 6px; }
.hb-row { display: grid; grid-template-columns: minmax(7rem, 38%) minmax(0, 1fr) auto; gap: 4px var(--s3); align-items: center; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.hb-row .lbl { overflow-wrap: anywhere; }
.hb-row > svg { width: 100%; height: 16px; display: block; }
[dir="rtl"] .hb-row > svg { transform: scaleX(-1); }
.hb-row .val { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink2); font-size: var(--fs-xs); min-width: 4.5rem; text-align: end; }
.hb-row.total { border-block-start: 1px solid var(--line); padding-block-start: 8px; font-weight: 600; }
@media (max-width: 520px) { .hb-row { grid-template-columns: minmax(0, 1fr) auto; } .hb-row .lbl { grid-column: 1 / -1; } }
/* 100% stacked rows for plain results by gene */
.stk { display: grid; gap: 10px; }
.stk-row { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--s3); align-items: center; }
.stk-bar { display: flex; height: 28px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--card); }
.stk-bar span { display: grid; place-items: center; font-size: 11px; font-weight: 600; font-family: "Inter", sans-serif; font-variant-numeric: tabular-nums; min-width: 0; overflow: hidden; white-space: nowrap; }
.c-vslow { background: var(--c-vslow); color: var(--c-vslow-ink); } .c-slow { background: var(--c-slow); color: var(--c-slow-ink); }
.c-usual { background: var(--c-usual); color: var(--c-usual-ink); } .c-fast { background: var(--c-fast); color: var(--c-fast-ink); }
.c-vfast { background: var(--c-vfast); color: var(--c-vfast-ink); }
@media (max-width: 520px) { .stk-row { grid-template-columns: 1fr; gap: 4px; } }
/* Result review */
.rv-top { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; margin-block-end: var(--s2); }
.stats.qc .stat { display: grid; gap: 2px; align-content: start; }
.stat .s { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--ink2); }
.stat.warn { box-shadow: inset 0 0 0 1px var(--field); }
.stat.bad { box-shadow: inset 0 0 0 1px var(--err); }
.preview-box { border: 1px solid var(--line); border-radius: var(--r-md); padding: var(--s4); background: var(--bg); display: grid; gap: var(--s3); }
.preview-box .group { margin-block-end: 0; }
.preview-box .group-head { padding-block: var(--s2); }
.preview-box .medlist .rv { padding: var(--s3); }
.notes { display: grid; gap: var(--s3); }
.note { padding: var(--s3); border-radius: var(--r-sm); background: var(--sunken); display: grid; gap: 4px; }
.note .who { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: var(--fs-xs); color: var(--ink2); }
.note p { font-size: var(--fs-sm); line-height: var(--lh-sm); overflow-wrap: anywhere; }
.internal { display: inline-flex; gap: 6px; align-items: center; font-size: var(--fs-xs); font-weight: 700; color: var(--ink2); }
.internal svg { width: 14px; height: 14px; }
.timeline.compact .tl { padding-block-end: var(--s4); }
.decision { border: 2px solid var(--blue); }
@media (max-width: 1023px) {
  .rv-layout { display: flex; flex-direction: column; gap: var(--s4); }
  .rv-layout > .rv-col { display: contents; }
  .rv-dec { order: 1; } .rv-calls { order: 2; } .rv-prev { order: 3; } .rv-notes { order: 4; } .rv-hist { order: 5; }
}
/* Modal */
dialog.modal { border: 0; padding: 0; border-radius: var(--r-lg); background: var(--card); color: var(--ink); box-shadow: var(--shadow-pop); width: min(920px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: hidden; }
dialog.modal[open] { display: flex; flex-direction: column; }
dialog.modal::backdrop { background: rgba(8, 17, 31, .58); }
.modal-head { display: flex; gap: var(--s3); align-items: center; justify-content: space-between; padding: 12px 16px 12px 20px; border-block-end: 1px solid var(--line); flex-wrap: wrap; }
[dir="rtl"] .modal-head { padding: 12px 20px 12px 16px; }
.modal-head .row { gap: var(--s2); }
.modal-body { padding: var(--s4); overflow: auto; background: var(--sunken); flex: 1; }
/* Paper mock (always printed colours, both themes) */
.paper { position: relative; background: var(--paper); color: var(--paper-ink); width: 100%; max-width: 794px; margin-inline: auto; padding: 36px 40px; box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 8px 24px rgba(0,0,0,.12); font-size: 12px; line-height: 1.5; font-family: "Inter", "Readex Pro", system-ui, sans-serif; display: grid; gap: 16px; align-content: start; overflow: hidden; }
@media (min-width: 768px) { .paper { aspect-ratio: 210 / 297; } }
@media (max-width: 600px) { .paper { padding: 20px 16px; font-size: 11px; } }
.paper > * { min-width: 0; }
.paper[lang="ar"] { font-family: "Readex Pro", Tahoma, sans-serif; }
.paper h3, .paper h4 { color: var(--paper-ink); margin: 0; }
.paper .p-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; border-block-end: 2px solid var(--paper-ink); padding-block-end: 12px; flex-wrap: wrap; }
.paper .p-brand { display: flex; gap: 10px; align-items: center; }
.paper .p-brand svg { width: 34px; height: 34px; }
.paper .p-brand b { font-family: "Inter", sans-serif; font-weight: 800; font-size: 17px; color: #0B2545; direction: ltr; unicode-bidi: isolate; }
.paper .p-brand b i { color: #12A38B; font-style: normal; }
.paper .p-muted { color: var(--paper-ink2); }
.paper .p-title { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 19px; font-weight: 700; color: #0B2545; }
.paper .p-title [lang="ar"] { font-family: "Readex Pro", Tahoma, sans-serif; }
.paper .bi { display: flex; justify-content: space-between; gap: 8px; }
.paper bdi[lang="ar"] { font-family: "Readex Pro", Tahoma, sans-serif; }
.paper .bi [lang="ar"] { font-family: "Readex Pro", Tahoma, sans-serif; direction: rtl; text-align: right; }
.paper .p-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; }
@media (max-width: 600px) { .paper .p-grid { grid-template-columns: 1fr; } }
.paper .p-box { border: 1px solid var(--paper-line); border-radius: 6px; padding: 10px 12px; display: grid; gap: 4px; }
.paper .p-k { font-size: 10px; color: var(--paper-ink2); }
.paper .p-v { font-weight: 600; }
.paper table { font-size: 10.5px; line-height: 1.4; }
.paper th { background: var(--paper-tint); color: var(--paper-ink2); text-transform: none; letter-spacing: 0; font-size: 9.5px; white-space: normal; padding: 6px 8px; border-block-end: 1px solid var(--paper-line); }
.paper th [lang="ar"] { display: block; font-family: "Readex Pro", Tahoma, sans-serif; font-weight: 600; }
.paper td { white-space: nowrap; padding: 5px 8px; border-block-end: 1px solid var(--paper-line); color: var(--paper-ink); }
.paper .p-tblwrap { overflow-x: auto; }
.paper .p-tot { justify-self: end; width: min(100%, 340px); display: grid; }
.paper .p-tot .bi { padding: 5px 0; border-block-end: 1px solid var(--paper-line); }
.paper .p-tot .bi.grand { font-weight: 800; font-size: 13px; border-block-end: 2px solid var(--paper-ink); }
.paper .p-foot { display: flex; gap: 16px; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; margin-block-start: auto; border-block-start: 1px solid var(--paper-line); padding-block-start: 12px; }
.paper .qr { width: 96px; height: 96px; flex: none; }
.paper .wm { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font-size: 90px; font-weight: 800; color: rgba(156, 42, 94, .08); transform: rotate(-24deg); font-family: "Inter", "Readex Pro", sans-serif; }
.paper .p-sev { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.paper .p-sev > div { border-radius: 6px; padding: 8px 10px; display: grid; gap: 2px; }
.paper .p-sev .n { font-size: 22px; font-weight: 700; font-family: "Inter", sans-serif; }
.paper .p-ACT { background: #FBE7E6; color: #A12822; } .paper .p-CAU { background: #FDF1DC; color: #8A5A00; } .paper .p-STD { background: #E6F4EC; color: #15693A; }
.paper .p-row { display: grid; grid-template-columns: 1fr 1.1fr 2fr; gap: 10px; padding: 7px 0; border-block-end: 1px solid var(--paper-line); }
.paper .p-row b { color: #0B2545; }
.paper .p-stmt { background: var(--paper-tint); border-radius: 6px; padding: 8px 10px; }
.paper .code { font-size: 1em; }
/* Money */
.rule.maker .ic { background: var(--teal-bg); color: var(--teal-ink); }
.attn { display: grid; }
.attn li { display: flex; gap: var(--s3); align-items: center; justify-content: space-between; padding-block: 10px; border-block-end: 1px solid var(--line); flex-wrap: wrap; }
.attn li:last-child { border-block-end: 0; }
.attn .what { display: grid; gap: 2px; }
.attn .what strong { color: var(--heading); }
.attn .n-badge { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding-inline: 8px; border-radius: 14px; background: var(--tint); color: var(--link); font-weight: 700; font-family: "Inter", sans-serif; margin-inline-end: 10px; }
.attn .n-badge.bad { background: var(--err-bg); color: var(--err); }
.sub-steps { display: flex; gap: var(--s2); flex-wrap: wrap; margin-block-end: var(--s3); }
.attach { display: inline-flex; gap: 8px; align-items: center; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--sunken); font-size: var(--fs-sm); max-width: 100%; }
.attach svg { width: 18px; height: 18px; flex: none; color: var(--err); }
.deliv { display: grid; gap: 4px; }
td .btn { min-height: 36px; padding-inline: 12px; font-size: var(--fs-sm); }
td .row { gap: var(--s2); }
.btn.sm { min-height: 36px; padding-inline: 12px; font-size: var(--fs-sm); }
.match-tiles .stat .v { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.amt-in { max-width: 11rem; }
.sum-line { display: flex; gap: var(--s4); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--ink2); }
.sum-line strong { color: var(--heading); font-variant-numeric: tabular-nums; }
table.tight th, table.tight td { padding: 8px 10px; }
@media (max-width: 767px) {
  .stack-table tfoot, .stack-table tfoot tr, .stack-table tfoot td { display: block; width: 100%; }
  .stack-table tfoot td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 10px; padding: 5px 14px; border: 0; }
  .stack-table tfoot td:empty { display: none; }
  .stack-table tfoot td::before { content: attr(data-label); font-size: var(--fs-xs); color: var(--ink2); font-weight: 600; }
  .stack-table tfoot td.n { text-align: start; }
  .stack-table td .blocked { max-width: none; }
  .filters .field { flex: 1 1 100%; }
}

/* ======================= app (production web app additions) ======================= */
h1[tabindex="-1"]:focus { outline: none; }
.skip-link { position: absolute; inset-inline-start: 8px; top: 8px; transform: translateY(-200%); z-index: 60; background: var(--card); color: var(--link); padding: 10px 14px; border-radius: var(--r-sm); box-shadow: var(--shadow-pop); font-weight: 600; }
.skip-link:focus { transform: none; }
.app-header .bar { padding-block: 8px; }
.who { display: grid; text-align: end; line-height: 1.2; margin-inline-end: var(--s2); max-width: 22rem; }
.who-name { font-weight: 600; font-size: var(--fs-sm); color: var(--heading); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-role { font-size: var(--fs-xs); color: var(--ink2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appnav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: thin; }
.appnav a { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 12px; color: var(--ink2); font-weight: 600; text-decoration: none; border-block-end: 2px solid transparent; white-space: nowrap; font-size: var(--fs-sm); }
.appnav a:hover { color: var(--heading); }
.appnav a[aria-current="page"] { color: var(--heading); border-block-end-color: var(--blue); }
.subnav a { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 14px; color: var(--ink2); font-weight: 600; text-decoration: none; border-block-end: 2px solid transparent; margin-block-end: -1px; white-space: nowrap; }
.subnav a[aria-current="page"] { color: var(--heading); border-block-end-color: var(--blue); }
.envbar .synth-tag { white-space: nowrap; }
[data-persona] .app-header { box-shadow: inset 0 -3px 0 var(--gold); }
@media (max-width: 767px) {
  .who { display: none; }
  .hide-sm { display: none; }
  .app-header .controls { gap: 6px; }
}
.narrow { max-width: 560px; }
.narrow.wide-narrow { max-width: 760px; }
.mt { margin-block-start: var(--s4); }
.mt-sm { margin-block-start: var(--s2); }
.mb { margin-block-end: var(--s4); }
.right { margin-inline-start: auto; }
.nowrap { white-space: nowrap; }
.loading { display: flex; gap: 8px; align-items: center; padding-block: var(--s5); }
.field-err:empty { display: none; }
.form-msg:empty { display: none; }
.kvs { display: grid; }
.kvs .kv { border-block-end: 1px solid var(--line); padding-block: 8px; }
.kvs .kv:last-child { border-block-end: 0; }
.kvs .kv dd { white-space: normal; overflow-wrap: anywhere; }
.grid-3 { display: grid; gap: var(--s4); align-items: start; }
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.actions { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.section-title { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); align-items: center; justify-content: space-between; margin-block-end: var(--s3); }
.section-title h2 { margin: 0; }
section + section { margin-block-start: var(--s6); }
.toast-err { background: var(--err-bg); color: var(--err); border: 1px solid var(--err); }
.idle-toast .btn { margin-inline-start: auto; }
.inline-form { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: end; }
.inline-form .field { flex: 1 1 180px; min-width: 0; }
details.more > summary { cursor: pointer; color: var(--link); font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.big-code { font-family: var(--font-code); font-size: 26px; font-weight: 700; letter-spacing: .18em; direction: ltr; unicode-bidi: isolate; font-feature-settings: "tnum" 1, "zero" 1; }
.totp-key { font-family: var(--font-code); font-size: 16px; font-weight: 700; letter-spacing: .06em; overflow-wrap: anywhere; direction: ltr; unicode-bidi: isolate; }
.enrol { display: grid; gap: var(--s4); grid-template-columns: auto minmax(0, 1fr); align-items: center; margin-block-end: var(--s4); }
.enrol .qr svg { width: 180px; height: 180px; display: block; background: #fff; border-radius: 8px; }
.enrol .qr svg path, .enrol .qr svg rect { shape-rendering: crispEdges; }
@media (max-width: 520px) { .enrol { grid-template-columns: 1fr; justify-items: center; } }
.btn.danger { background: var(--card); color: var(--err); border-color: var(--err); }
.btn.danger:hover { background: var(--err-bg); }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.lock-note { display: inline-flex; gap: 6px; align-items: flex-start; font-size: var(--fs-xs); color: var(--ink2); }
.lock-note svg { width: 14px; height: 14px; flex: none; margin-block-start: 2px; }
.cards { display: grid; gap: var(--s3); }
@media (min-width: 768px) { .cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.card-link { display: grid; gap: 4px; padding: var(--s4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--card); text-decoration: none; color: var(--ink); }
.card-link:hover { border-color: var(--focus); }
.card-link .t-h3 { color: var(--heading); }
.scan-input { font-size: 20px; min-height: 56px; }
.label-wrap { display: grid; gap: var(--s3); justify-items: start; }
dialog.modal.wide { width: min(1100px, calc(100vw - 24px)); }
.report-frame { width: 100%; height: min(78vh, 1100px); border: 0; background: #fff; border-radius: 6px; display: block; }
.mailbox .mail { display: grid; gap: 6px; padding: var(--s4); border-block-end: 1px solid var(--line); }
.mailbox .mail:last-child { border-block-end: 0; }
.mailbox .mail-head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; font-size: var(--fs-sm); color: var(--ink2); }
.chart-svg { display: block; width: 100%; height: auto; }
.chart-svg text { font-family: var(--font); font-size: 11px; fill: var(--ink2); }
.chart-svg .axis { stroke: var(--line-strong); }
.chart-svg .grid { stroke: var(--grid); }
.chart-svg .f-s1 { fill: var(--s1c); } .chart-svg .f-s2 { fill: var(--s2c); }
.chart-svg .f-pass { fill: var(--qc-pass); } .chart-svg .f-warn { fill: var(--qc-warn); } .chart-svg .f-fail { fill: var(--qc-fail); }
.chart-svg .z-fail { fill: var(--zone-fail); } .chart-svg .z-warn { fill: var(--zone-warn); }
.chart-svg .refline { stroke: var(--ink2); stroke-dasharray: 4 3; }
.chart-svg .val { fill: var(--ink); font-weight: 600; }
.legend i.f-s1 { background: var(--s1c); } .legend i.f-s2 { background: var(--s2c); }
.legend i.f-pass { background: var(--qc-pass); } .legend i.f-warn { background: var(--qc-warn); } .legend i.f-fail { background: var(--qc-fail); }
.hb-row > svg .bar-f { fill: var(--bar); }
.stk-bar span.w0 { display: none; }
.timeline .tl .fact { font-size: var(--fs-sm); color: var(--ink2); }
.order-head { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; justify-content: space-between; }

/* Persona toolbar (staging only) */
.persona-bar { position: fixed; z-index: 45; bottom: max(16px, env(safe-area-inset-bottom, 0px)); inset-inline-end: max(16px, env(safe-area-inset-right, 0px)); width: min(360px, calc(100vw - 32px)); display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none; }
.persona-bar > * { pointer-events: auto; }
.persona-toggle { align-self: flex-end; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-height: 44px; max-width: 100%; padding: 8px 14px; border-radius: var(--r-pill); border: 2px dashed var(--gold); background: var(--card); color: var(--heading); font-weight: 700; font-size: var(--fs-xs); cursor: pointer; box-shadow: var(--shadow-pop); text-align: start; }
.persona-toggle svg { width: 20px; height: 20px; flex: none; }
.persona-bar.acting .persona-toggle { background: var(--navy); color: var(--on-navy); border-style: solid; }
.pt-now { flex-basis: 100%; font-weight: 600; padding-inline-start: 28px; }
.persona-panel { background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-pop); padding: var(--s4); display: grid; gap: var(--s3); max-height: min(70vh, 560px); overflow: auto; }
.persona-list { display: grid; gap: 6px; }
.persona-item { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; text-align: start; padding: 8px 12px; min-height: 44px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card); color: var(--ink); cursor: pointer; }
.persona-item:hover { border-color: var(--focus); background: var(--tint); }
.persona-item[aria-current="true"] { border-color: var(--focus); box-shadow: inset 0 0 0 1px var(--focus); }
.persona-item .pi-name { font-weight: 700; color: var(--heading); }
.persona-item .pi-role { grid-column: 1; font-size: var(--fs-xs); color: var(--ink2); }
.persona-item .pi-id { grid-row: 1 / span 2; grid-column: 2; align-self: center; font-size: 11px; color: var(--ink2); }
@media print {
  body * { visibility: hidden; }
  .print-area, .print-area * { visibility: visible; }
  .print-area { position: absolute; inset: 0 auto auto 0; }
}
.seg-opt { position: relative; display: inline-flex; }
.seg-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg-opt span { min-height: 38px; display: inline-flex; align-items: center; padding-inline: 14px; border-radius: 8px; color: var(--ink2); font-weight: 600; }
.seg-opt input:checked + span { background: var(--card); color: var(--heading); box-shadow: var(--shadow); }
.seg-opt input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.seg.wrap-seg, .seg { flex-wrap: wrap; max-width: 100%; }
.cam-video { width: 100%; max-height: 320px; border-radius: var(--r-lg); background: var(--camera); object-fit: cover; }
.chart-svg .hatch-line { stroke: var(--card); stroke-width: 2; }
.hb-row > svg .hb-track { fill: var(--sunken); }
.hb-row > svg .hb-tick { fill: var(--ink); }
.legend i.hatch { background-image: repeating-linear-gradient(45deg, var(--qc-warn) 0 3px, var(--card) 3px 5px); }
.seg a.seg-link { min-height: 38px; display: inline-flex; align-items: center; padding-inline: 12px; border-radius: 8px; color: var(--ink2); font-weight: 600; text-decoration: none; font-size: var(--fs-sm); }
.seg a.seg-link[aria-pressed="true"] { background: var(--card); color: var(--heading); box-shadow: var(--shadow); }
.seg a.seg-link[aria-pressed="true"] .tabs-count { background: var(--tint); color: var(--link); }
.bill-line { display: grid; gap: var(--s2) var(--s3); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); padding-block: var(--s2); border-block-end: 1px solid var(--line); }
.icon-btn { white-space: nowrap; }
body:has(.persona-bar) main.wrap { padding-block-end: 120px; }
@media (min-width: 521px) { .hb-row { grid-template-columns: minmax(11rem, 42%) minmax(0, 1fr) auto; } }
.hb-row .lbl { min-width: 0; }
.hb-row .lbl:has(.sev) { overflow-wrap: normal; }
.hb-row .lbl .sev { white-space: nowrap; }
.chart-wrap svg.chart-svg { max-width: 100%; }
body:has(.persona-bar) .toasts { padding-bottom: 88px; }
.stats .stat { min-width: 0; }
.stat .v .code { white-space: normal; overflow-wrap: anywhere; }
.tube { flex-wrap: wrap; }
.tube > span:first-child { min-width: 0; flex: 1 1 12rem; }