/* Catenix Desk stylesheet (plan C3).
   Logical properties only. Hairlines, not shadows (one shadow on dialogs).
   14 px base, line-height 1.6, tabular numerals, letter-spacing 0, no
   uppercase, no italics, radius 6/10 px. Light theme only. */

@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexSansArabic-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/IBMPlexSansArabic-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/IBMPlexSansArabic-Bold.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
}

:root {
  --teal: #0B7B79;
  --teal-fill: #0A6663;
  --teal-soft: #E6F2F1;
  --paper: #F5F8F6;
  --surface: #FFFFFF;
  --hair: #E3EAE6;
  --ink: #0F2239;
  --muted: #6C7B8B;
  --danger: #BA1120;
  --danger-soft: #FBEAEC;
  --waiting: #B45309;
  --waiting-soft: #FBF1E6;
  --slate: #5B6B7A;
  --slate-soft: #EEF1F3;
  --ok: #0B7B79;
  --focus: #0B7B79;
  --font: "IBM Plex Sans Arabic", "Segoe UI", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
  --mono: "IBM Plex Mono", "Cascadia Mono", Consolas, "Courier New", monospace;
  --r6: 6px;
  --r10: 10px;
  --row: 36px;
  --target: 44px;
  --nav-w: 232px;
  --topbar-h: 56px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 14px;
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0;
  min-block-size: 100vh;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.4;
  color: var(--teal);
}
h1 { font-size: 1.43rem; }
h2 { font-size: 1.14rem; }
h3 { font-size: 1rem; }

p { margin: 0 0 8px; }
a { color: var(--teal); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
em, i { font-style: normal; }
code, .mono { font-family: var(--mono); font-size: 0.93em; }

.ltr {
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}
.ltr-block { direction: ltr; unicode-bidi: isolate; white-space: pre-wrap; overflow-wrap: anywhere; }
.num { font-variant-numeric: tabular-nums; }
.code { font-family: var(--mono); }
.muted { color: var(--muted); }
.danger { color: var(--danger); }
.waiting { color: var(--waiting); }
.visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px;
}

[dir="rtl"] .icon-dir { transform: scaleX(-1); }
.chart, .chart-host { direction: ltr; unicode-bidi: isolate; }

/* Focus */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button:focus:not(:focus-visible) { outline: none; }

/* Boot */
.boot {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-block-size: 60vh; color: var(--muted);
}
.boot-mark {
  inline-size: 14px; block-size: 14px; border-radius: 50%;
  border: 2px solid var(--hair); border-inline-start-color: var(--teal);
  animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.noscript { padding: 24px; text-align: center; }

/* Layout */
.app { min-block-size: 100vh; }
.frame {
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  grid-template-areas: "nav top" "nav main";
  min-block-size: 100vh;
}
.nav {
  grid-area: nav;
  background: var(--surface);
  border-inline-end: 1px solid var(--hair);
  padding: 12px 10px;
  display: flex; flex-direction: column; gap: 2px;
  position: sticky; inset-block-start: 0; block-size: 100vh; overflow: auto;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 14px; margin-block-end: 6px; border-block-end: 1px solid var(--hair);
}
/* The Catenix mark, on the brand teal, at the size the nav was drawn for. */
.brand-mark {
  inline-size: 28px; block-size: 28px; border-radius: 6px; background: var(--teal);
  flex: none; padding: 6px; object-fit: contain;
}
.brand-name { font-weight: 600; color: var(--teal); font-size: 1.07rem; }
.brand-sub { font-size: 0.86rem; color: var(--muted); }
/* The distributor's mark, the exact artwork, never text. */
.brand-dist { display: block; inline-size: 96px; block-size: auto; margin-block-start: 3px; }
.brand-dist-login { display: block; inline-size: 150px; block-size: auto; margin: 6px auto 0; }
/* Sign-in carries the full wordmark rather than the mark and a word. */
.brand-login { display: block; text-align: center; border-block-end: 1px solid var(--hair); }
.brand-wordmark { inline-size: min(210px, 62%); block-size: auto; margin-block-end: 6px; }
/* Icons: inline SVG at text colour; direction-sensitive ones flip in RTL. */
.ic { flex: 0 0 auto; display: inline-block; vertical-align: -0.2em; }
[dir="rtl"] .ic.mirror { transform: scaleX(-1); }
.nav a .ic { color: var(--muted); }
.nav a:hover .ic, .nav a[aria-current="page"] .ic { color: var(--teal); }
.nav-head-label { display: inline-flex; align-items: center; gap: 8px; }

/* The launcher on Home: one tile per screen, tinted by section, calm. */
.launch { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 10px 8px; }
.launch-page .search-row { max-inline-size: 420px; margin-block-end: 6px; }
.launch-section { margin-block-start: 10px; }
.launch-section .launch-head { margin: 8px 0 8px; }
.launch-section .launch-head h2 { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 1rem; color: var(--ink); }
.launch-page .tile-ic { inline-size: 64px; block-size: 64px; border-radius: 18px; }
.launch-page .tile-ic .ic { inline-size: 30px; block-size: 30px; }
.launch-page .launch a { padding: 12px 6px 10px; font-size: 0.93rem; }
.launch a {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 6px 8px;
  border-radius: var(--r10); color: var(--ink); text-align: center; font-size: 0.9rem; line-height: 1.25;
}
.launch a:hover { background: var(--paper); text-decoration: none; }
.launch .tile-ic {
  display: grid; place-items: center; inline-size: 56px; block-size: 56px; border-radius: 16px;
  background: var(--tint, var(--teal-soft)); color: var(--tint-ink, var(--teal));
}
.launch .tile-ic .ic { inline-size: 26px; block-size: 26px; }
.launch a .n { position: absolute; }
.launch-head { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 6px; }
.launch-head h3 { margin: 0; font-size: 0.93rem; color: var(--muted); font-weight: 500; }
.launch-head .hair { flex: 1; border-block-start: 1px solid var(--hair); }
/* section tints: quiet, one family per section, ink stays readable */
.tint-daily { --tint: #E6F2F1; --tint-ink: #0B7B79; }
.tint-network { --tint: #E8EEF7; --tint-ink: #2F5A9E; }
.tint-quality { --tint: #E8F3E9; --tint-ink: #2E7D4F; }
.tint-operations { --tint: #ECEFF3; --tint-ink: #4C5B6E; }
.tint-clinical { --tint: #F1EAF6; --tint-ink: #6B4C9A; }
.tint-money { --tint: #FBF0E3; --tint-ink: #A0561B; }
.tint-insight { --tint: #EAF0F7; --tint-ink: #35597F; }
.tint-admin { --tint: #EEF0F2; --tint-ink: #5A6672; }
.tint-advanced { --tint: #F3F4F6; --tint-ink: #6C7B8B; }
.launch a .badge { position: absolute; margin-inline-start: 38px; margin-block-start: -4px; min-inline-size: 18px; block-size: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 0.75rem; line-height: 18px; font-variant-numeric: tabular-nums; }
.launch a { position: relative; }
.nav a {
  display: flex; align-items: center; gap: 10px;
  min-block-size: var(--row); padding: 6px 10px; border-radius: var(--r6);
  color: var(--ink);
}
.nav a:hover { background: var(--paper); text-decoration: none; }
.nav a[aria-current="page"] { background: var(--teal-soft); color: var(--teal); font-weight: 500; }
.nav-spacer { flex: 1; }
.nav-foot { padding: 8px 10px; font-size: 0.86rem; color: var(--muted); border-block-start: 1px solid var(--hair); }

/* Grouped navigation: a quiet section head that folds its items. */
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-group + .nav-group { margin-block-start: 6px; }
.nav-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  inline-size: 100%; min-block-size: 30px; padding: 4px 10px; border: 0; border-radius: var(--r6);
  background: transparent; color: var(--muted); font: inherit; font-size: 0.86rem; font-weight: 500;
  cursor: pointer; text-align: start;
}
.nav-head:hover { background: var(--paper); color: var(--ink); }
.nav-caret { inline-size: 7px; block-size: 7px; border-inline-end: 1.5px solid currentColor; border-block-end: 1.5px solid currentColor; transform: rotate(45deg); margin-block-start: -3px; transition: transform 0.12s ease; }
.nav-head[aria-expanded="false"] .nav-caret { transform: rotate(-45deg); margin-block-start: 2px; }
[dir="rtl"] .nav-head[aria-expanded="false"] .nav-caret { transform: rotate(135deg); }
.nav-group a { padding-inline-start: 14px; }

/* Home: numbers first, then what needs a person. */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; margin-block-end: 16px; }
.kpi {
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r10);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; min-inline-size: 0;
  color: inherit; text-decoration: none;
}
a.kpi:hover { border-color: var(--teal); text-decoration: none; }
.kpi .n { font-size: 1.85rem; font-weight: 600; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.kpi .n.danger { color: var(--danger); }
.kpi .n.waiting { color: var(--waiting); }
.kpi .l { color: var(--muted); font-size: 0.93rem; }
.kpi .s { color: var(--muted); font-size: 0.86rem; }
.home-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr); gap: 16px; align-items: start; }
.needs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.needs li { display: flex; align-items: center; gap: 10px; min-block-size: var(--row); border-block-start: 1px solid var(--hair); padding: 4px 0; }
.needs li:first-child { border-block-start: 0; }
.needs .n { font-variant-numeric: tabular-nums; font-weight: 600; min-inline-size: 2.2em; text-align: end; }
.needs .n.danger { color: var(--danger); }
.needs a { margin-inline-start: auto; }

/* The console bridge: the original Catenix screen inside the desk frame. */
.console-host { position: relative; margin: -20px; block-size: calc(100vh - var(--topbar-h)); display: flex; flex-direction: column; }
.console-host iframe { inline-size: 100%; flex: 1 1 auto; min-block-size: 0; border: 0; display: block; background: var(--surface); }
.console-bar { display: flex; align-items: center; gap: 16px; padding: 6px 16px; font-size: 0.9rem; border-block-end: 1px solid var(--hair); background: var(--paper); }
.console-bar > span:first-child { font-weight: 600; }
.console-bar a { margin-inline-start: auto; }

/* Modules: profiles as choices, then a checklist by section. */
.profiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin-block-end: 16px; }
.profile {
  display: flex; flex-direction: column; gap: 4px; text-align: start;
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r10); padding: 12px 14px;
  font: inherit; color: inherit; cursor: pointer;
}
.profile:hover { border-color: var(--teal); }
.profile[aria-pressed="true"] { border-color: var(--teal); background: var(--teal-soft); }
.profile .name { font-weight: 600; }
.profile .desc { color: var(--muted); font-size: 0.93rem; }
.modlist { list-style: none; margin: 0; padding: 0; }
.modlist li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 12px; align-items: start; padding: 8px 0; border-block-start: 1px solid var(--hair); }
.modlist li:first-child { border-block-start: 0; }
.modlist input[type="checkbox"] { inline-size: 18px; block-size: 18px; margin-block-start: 3px; accent-color: var(--teal); }
.modlist .desc { color: var(--muted); font-size: 0.93rem; }
.modlist .flag { color: var(--waiting); font-size: 0.86rem; white-space: nowrap; }

/* Tool grids (statistics workbench) */
.tools { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.tool {
  display: flex; flex-direction: column; gap: 4px; text-align: start; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r6); font: inherit; color: inherit; cursor: pointer;
}
.tool:hover { border-color: var(--teal); }
.tool[aria-pressed="true"] { border-color: var(--teal); background: var(--teal-soft); }
.tool .name { font-weight: 500; }
.tool .desc { color: var(--muted); font-size: 0.86rem; }
.tabs { display: flex; gap: 2px; border-block-end: 1px solid var(--hair); margin-block-end: 12px; flex-wrap: wrap; }
.tabs button { border: 0; background: transparent; font: inherit; color: var(--muted); padding: 8px 12px; border-block-end: 2px solid transparent; margin-block-end: -1px; cursor: pointer; }
.tabs button[aria-selected="true"] { color: var(--teal); border-block-end-color: var(--teal); font-weight: 500; }
.tabs button:hover { color: var(--ink); }
textarea.data { inline-size: 100%; min-block-size: 140px; font-family: var(--mono); font-size: 0.93rem; direction: ltr; }

.topbar {
  grid-area: top;
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px;
  background: var(--surface); border-block-end: 1px solid var(--hair);
  position: sticky; inset-block-start: 0; z-index: 5;
}
.topbar .scan { flex: 1; max-inline-size: 520px; }
.scanbar { display: none; }        /* only below the desk width; see the phone rules */
.topbar-user { color: var(--muted); font-size: 0.93rem; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.menu-btn { display: none; }

.main { grid-area: main; padding: 20px; min-inline-size: 0; }
.page-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-block-end: 16px;
}
.page-head h1 { margin-inline-end: auto; }
.page-note { color: var(--muted); font-size: 0.93rem; margin-block-end: 12px; }
.band {
  border: 1px solid var(--hair); border-inline-start: 3px solid var(--waiting);
  background: var(--surface); border-radius: var(--r6);
  padding: 8px 12px; margin-block-end: 12px; font-size: 0.93rem;
}
.band.danger { border-inline-start-color: var(--danger); }
.band.warn { border-inline-start-color: var(--waiting); }
.band.info { border-inline-start-color: var(--teal); }

/* Cards and panels */
.panel {
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r10);
  padding: 16px;
}
.panel + .panel { margin-block-start: 12px; }
.panel h2 { margin-block-end: 10px; }
.split { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; }
h3.sub { margin: 8px 0 0; font-size: 0.95rem; color: var(--muted); font-weight: 600; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

/* Buttons */
.btn {
  font: inherit; line-height: 1.4;
  min-block-size: var(--row); padding: 6px 14px;
  border-radius: var(--r6); border: 1px solid var(--hair);
  background: var(--surface); color: var(--ink);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.btn:hover { border-color: var(--teal); color: var(--teal); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn.primary { background: var(--teal-fill); border-color: var(--teal-fill); color: #FFFFFF; font-weight: 500; }
.btn.primary:hover { background: var(--teal); border-color: var(--teal); color: #FFFFFF; }
.btn.danger { color: var(--danger); border-color: var(--danger); }
.btn.danger:hover { background: var(--danger-soft); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--teal); padding-inline: 8px; }
.btn.quiet:hover { background: var(--teal-soft); }
.btn.small { min-block-size: 28px; padding: 2px 10px; font-size: 0.93rem; }
.btn.block { inline-size: 100%; justify-content: center; }
.btn.on { background: var(--teal-soft); border-color: var(--teal); color: var(--teal); }
.seg { display: inline-flex; gap: 4px; flex-wrap: wrap; }

/* Forms */
label, .label { display: block; font-size: 0.93rem; color: var(--muted); margin-block-end: 4px; }
.field { display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.field .hint { font-size: 0.86rem; color: var(--muted); }
.field .error { font-size: 0.86rem; color: var(--danger); }
input, select, textarea {
  font: inherit; color: var(--ink);
  min-block-size: var(--row); padding: 4px 10px;
  border: 1px solid var(--hair); border-radius: var(--r6);
  background: var(--surface); inline-size: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--teal); outline: 2px solid var(--teal); outline-offset: 0; }
input[type="checkbox"], input[type="radio"] {
  inline-size: 18px; block-size: 18px; min-block-size: 0; accent-color: var(--teal-fill); margin: 0;
}
.check { display: flex; align-items: flex-start; gap: 8px; color: var(--ink); cursor: pointer; }
.check input { margin-block-start: 4px; }
textarea { min-block-size: 72px; resize: vertical; }
input.ltr-input, .code input, input.code { direction: ltr; text-align: start; unicode-bidi: plaintext; font-family: var(--mono); }
input[type="date"], input[type="number"], input[type="tel"] { direction: ltr; text-align: start; }
.scan-field { position: relative; }
.scan-field input { padding-inline-start: 34px; font-family: var(--mono); direction: ltr; text-align: start; }
.scan-field .scan-mark {
  position: absolute; inset-inline-start: 10px; inset-block-start: 50%; transform: translateY(-50%);
  inline-size: 16px; block-size: 16px; border: 2px solid var(--teal); border-radius: 3px; pointer-events: none;
}
.search-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-block-end: 12px; }
.search-row input { max-inline-size: 480px; }

/* Tables */
.table-wrap { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r10); overflow: auto; }
table { inline-size: 100%; border-collapse: collapse; }
th, td {
  text-align: start; padding: 0 12px; block-size: var(--row);
  border-block-end: 1px solid var(--hair); vertical-align: middle; white-space: nowrap;
}
th { font-weight: 500; color: var(--muted); font-size: 0.93rem; background: var(--surface); }
thead th { position: sticky; inset-block-start: 0; z-index: 1; }
tbody tr:hover { background: var(--paper); }
tbody tr:last-child td { border-block-end: 0; }
tr.group-row td {
  block-size: 32px; background: var(--paper); color: var(--teal); font-weight: 500;
  border-block-end: 1px solid var(--hair);
}
td.action { text-align: end; }
td.wrap { white-space: normal; }
tr.clickable { cursor: pointer; }
tr.selected { background: var(--teal-soft); }
.table-foot { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-block-start: 1px solid var(--hair); color: var(--muted); font-size: 0.93rem; }
.table-foot .grow { flex: 1; }

.keybox { font-family: var(--mono); font-size: 1.15rem; padding: 12px 14px; border: 1px dashed var(--teal); border-radius: var(--r6); background: var(--teal-soft); word-break: break-all; display: inline-block; }

.pick-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--hair); border-radius: var(--r6); max-block-size: 60vh; overflow: auto; }
.pick-list li + li { border-block-start: 1px solid var(--hair); }
.pick-list .pick { display: flex; flex-direction: column; gap: 2px; inline-size: 100%; text-align: start; padding: 10px 14px; background: none; border: 0; cursor: pointer; font: inherit; color: inherit; min-block-size: 44px; }
.pick-list .pick:hover, .pick-list .pick:focus-visible, .pick-list .pick.on { background: var(--teal-soft); outline: none; }
.pick-list .pick-name { font-weight: 600; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
kbd { display: inline-block; min-inline-size: 1.6em; padding: 0 5px; border: 1px solid var(--hair); border-block-end-width: 2px; border-radius: 4px; background: var(--surface); font-size: 0.86rem; line-height: 1.5; text-align: center; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1px solid var(--hair); border-radius: var(--r6); background: var(--surface); font-size: 0.93rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.tile { border: 1px solid var(--hair); border-radius: var(--r10); padding: 12px 14px; background: var(--surface); }
button.tile { font: inherit; color: var(--ink); cursor: pointer; }
.tile.on { border-color: var(--teal); background: var(--teal-soft); }
.chips .btn .count { margin-inline-start: 6px; color: var(--muted); font-variant-numeric: tabular-nums; }
table.grid td input { inline-size: 100%; min-inline-size: 90px; }
tr.row-error td { background: #FBEAEC; }

table.cumulative th, table.cumulative td { white-space: nowrap; }
table.cumulative td.amt .flag.high { color: var(--danger); font-weight: 600; }
table.cumulative td.amt .flag.low { color: var(--waiting); font-weight: 600; }

.bar { block-size: 8px; border-radius: 4px; background: var(--teal); min-inline-size: 2px; }

.calllog { list-style: none; margin: 4px 0 0; padding: 0; font-size: 0.86rem; }
.calllog li { padding: 1px 0; }

/* State word with a dot */
.state { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.state::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--slate); flex: none; }
.state.s-collected::before, .state.s-labelled::before, .state.s-ordered::before { background: var(--teal); }
.state.s-dispatched::before, .state.s-in_transit::before, .state.s-received::before { background: var(--waiting); }
.state.s-accepted::before, .state.s-in_analysis::before { background: var(--teal); }
.state.s-resulted::before { background: var(--waiting); }
.state.s-reported::before, .state.s-completed::before { background: var(--slate); }
.state.s-rejected::before, .state.s-cancelled::before { background: var(--danger); }
.state.s-rejected, .state.s-cancelled { color: var(--danger); }
.state.s-reported, .state.s-completed { color: var(--slate); }

/* Result grid */
.result-grid td { block-size: auto; padding-block: 2px; }
.result-grid input { min-block-size: 32px; }
.result-grid td.value { inline-size: 140px; }
.result-grid td.note { inline-size: 220px; }
.flag { font-weight: 500; }
.flag.high, .flag.low { color: var(--danger); }
.flag.normal { color: var(--muted); }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; border-inline-start: 2px solid var(--hair); margin-inline-start: 6px; }
.timeline li { position: relative; padding-inline-start: 18px; padding-block: 4px 10px; }
.timeline li::before {
  content: ""; position: absolute; inset-inline-start: -7px; inset-block-start: 12px;
  inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--teal);
}
.timeline li.rejected::before { border-color: var(--danger); }
.timeline .when { color: var(--muted); font-size: 0.93rem; }

/* Empty, skeleton, not-yet */
.empty { text-align: center; padding: 40px 16px; color: var(--muted); background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r10); }
.empty h3 { color: var(--ink); margin-block-end: 4px; }
.skeleton { display: flex; flex-direction: column; gap: 8px; padding: 12px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r10); }
.skeleton span { display: block; block-size: 14px; border-radius: 4px; background: var(--paper); animation: pulse 1.2s ease-in-out infinite; }
.skeleton span:nth-child(2n) { inline-size: 70%; }
@keyframes pulse { 50% { opacity: 0.5; } }
.not-yet { padding: 32px 16px; text-align: center; background: var(--surface); border: 1px dashed var(--hair); border-radius: var(--r10); }
.not-yet h3 { color: var(--waiting); }
.soon { max-inline-size: 560px; }

/* Toasts */
.toasts { position: fixed; inset-block-end: 16px; inset-inline-start: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 50; max-inline-size: min(420px, calc(100vw - 32px)); }
.toast {
  background: var(--ink); color: #FFFFFF; padding: 10px 14px; border-radius: var(--r6);
  border-inline-start: 3px solid var(--teal); font-size: 0.93rem;
}
.toast.danger { border-inline-start-color: var(--danger); }
.toast.waiting { border-inline-start-color: var(--waiting); }

/* Dialog */
dialog {
  border: 1px solid var(--hair); border-radius: var(--r10); padding: 0;
  inline-size: min(560px, calc(100vw - 32px)); max-block-size: calc(100vh - 32px);
  color: var(--ink); background: var(--surface);
  box-shadow: 0 12px 32px rgba(15, 34, 57, 0.18);
}
dialog::backdrop { background: rgba(15, 34, 57, 0.4); }
dialog.wide { inline-size: min(820px, calc(100vw - 32px)); }
.dialog-head { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-block-end: 1px solid var(--hair); }
.dialog-head h2 { margin-inline-end: auto; }
.dialog-body { padding: 16px 18px; overflow: auto; max-block-size: calc(100vh - 180px); }
.dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-block-start: 1px solid var(--hair); }

/* Login */
/* The Catenix portal's sign-in: the teal X image behind a dark glass card.
   The image is the portal's own x-dark-teal.webp (47 KB), the card is solid
   enough that text never sits on the busy part of it. */
.login {
  min-block-size: 100vh; display: grid; place-items: center; padding: 16px;
  background: #001046 url("/desk/static/brand/login-bg.webp") center / cover no-repeat;
}
.login-card {
  inline-size: min(420px, 100%); color: #E8F1F4;
  background: rgba(13, 27, 42, 0.90); border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px; padding: 32px 28px; backdrop-filter: blur(6px);
  --ink: #E8F1F4; --muted: #9FB4C2; --hair: rgba(255, 255, 255, 0.12);
}
.login-card h1 { color: #FFFFFF; font-size: 1.15rem; text-align: center; margin-block: 4px 18px; }
.login-card .muted { color: #9FB4C2; }
.login-card label { color: #B9CBD6; font-size: 0.78rem; letter-spacing: 0.02em; }
.login-card input[type="text"], .login-card input[type="password"], .login-card input:not([type]),
.login-card input[type="email"], .login-card input[type="tel"] {
  background: #0B1626; color: #FFFFFF; border: 1px solid #23415C; border-radius: 10px;
}
.login-card input:focus { border-color: #2BB3A8; outline: 2px solid rgba(43, 179, 168, 0.35); outline-offset: 1px; }
.login-card .btn.primary { inline-size: 100%; justify-content: center; background: #137E78; border-color: #137E78; padding-block: 11px; font-weight: 600; }
.login-card .btn.primary:hover { background: #18938C; }
.login-card .brand { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-block-end: 16px; margin-block-end: 16px; border-block-end: 1px solid rgba(255, 255, 255, 0.10); }
.login-card .brand-wordmark { inline-size: min(230px, 70%); block-size: auto; }
.brand-dist-tile { background: #FFFFFF; border-radius: 8px; padding: 6px 10px; display: inline-flex; }
.brand-dist-tile .brand-dist-login { block-size: 26px; inline-size: auto; }
.login-card .band.danger { background: rgba(186, 17, 32, 0.18); color: #FFD7DB; border-color: rgba(186, 17, 32, 0.45); }

/* Receipt (80 mm) */
.receipt {
  inline-size: 80mm; max-inline-size: 100%; padding: 6mm 4mm; background: var(--surface);
  border: 1px solid var(--hair); border-radius: var(--r6); font-size: 0.93rem; line-height: 1.5;
}
.receipt .head { text-align: center; margin-block-end: 8px; }
.receipt .head .name { font-weight: 600; color: var(--teal); }
.receipt table { font-size: 0.93rem; }
.receipt th, .receipt td { block-size: auto; padding: 2px 4px; white-space: normal; border: 0; }
.receipt td.amt, .receipt th.amt { text-align: end; }
.receipt .total-row td { border-block-start: 1px solid var(--hair); font-weight: 600; padding-block-start: 6px; }
.receipt .foot { text-align: center; color: var(--muted); font-size: 0.86rem; margin-block-start: 10px; }
.receipt .code-big { font-family: var(--mono); font-size: 1.14rem; text-align: center; display: block; direction: ltr; }

/* Label card (fallback) */
.label-card { inline-size: 50mm; block-size: 25mm; border: 1px solid var(--hair); padding: 2mm 3mm; font-size: 0.86rem; line-height: 1.3; }
.label-card .code-big { font-family: var(--mono); font-size: 1.14rem; direction: ltr; display: block; }

/* Catalogue picker */
.picker { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.picker .summary { position: sticky; inset-block-start: calc(var(--topbar-h) + 12px); }
.amount { font-size: 1.14rem; font-weight: 600; }

/* ------------------------------------------------------------------
   Responsive.

   Four shapes, because a lab has four: a reception PC at 1280 or wider, a
   laptop on the bench, a tablet a phlebotomist carries, and the phone a
   courier or a patient holds. The layout does not simply shrink: below the
   desk width the nav becomes a drawer, and on a phone every list stops
   being a table and becomes a stack of cards, because a worklist that
   scrolls sideways is a worklist nobody reads on a phone.
   ------------------------------------------------------------------ */

/* Wide desks: stop lines running the full width of a 27 inch monitor. */
@media (min-width: 1600px) {
  .main { padding: 24px; }
  .main > section { max-inline-size: 1520px; }
}

/* Laptop and small desktop: a narrower nav buys back table width. */
@media (max-width: 1240px) {
  :root { --nav-w: 200px; }
  .split { grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr); }
  .picker { grid-template-columns: minmax(0, 1fr) 280px; }
}

/* Tablet: the nav is a drawer, but the page keeps its two columns. */
@media (max-width: 1080px) {
  .home-grid { grid-template-columns: minmax(0, 1fr); }
  .frame { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
  .nav {
    position: fixed; inset-block: 0; inset-inline-start: 0; inline-size: min(320px, 86vw);
    transform: translateX(-100%); transition: transform 0.18s ease; z-index: 20; block-size: 100dvh;
    padding-block-start: max(12px, env(safe-area-inset-top));
  }
  [dir="rtl"] .nav { transform: translateX(100%); }
  .nav.open { transform: none; }
  .scrim { position: fixed; inset: 0; background: rgba(15, 34, 57, 0.4); z-index: 19; }
  .menu-btn { display: inline-flex; }
}

/* Touch: bigger targets whatever the width, because a finger is a finger. */
@media (pointer: coarse) {
  .btn { min-block-size: var(--target); }
  .btn.small { min-block-size: 36px; }
  input, select, textarea { min-block-size: var(--target); font-size: 16px; }  /* 16px stops iOS zooming on focus */
  .nav a { min-block-size: var(--target); }
  tbody tr { block-size: auto; }
}

/* Phone */
@media (max-width: 900px) {
  :root { --row: 48px; --nav-w: 0px; }
  .frame { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
  .nav {
    position: fixed; inset-block: 0; inset-inline-start: 0; inline-size: min(300px, 86vw);
    transform: translateX(-100%); transition: transform 0.18s ease; z-index: 20; block-size: 100vh;
  }
  [dir="rtl"] .nav { transform: translateX(100%); }
  .nav.open { transform: none; }
  .scrim { position: fixed; inset: 0; background: rgba(15, 34, 57, 0.4); z-index: 19; }
  .menu-btn { display: inline-flex; }
  .topbar { padding: 0 12px; }
  .topbar-user { display: none; }
  /* The scan field moves out of the top bar: at this width it was squeezed
     to a few characters, and a code half shown is worse than none. It
     becomes a full-width row under the bar, where a scanner or a thumb can
     actually use it. */
  .frame { grid-template-rows: var(--topbar-h) auto minmax(0, 1fr); grid-template-areas: "top" "scan" "main"; }
  .topbar .scan { display: none; }
  .scanbar {
    grid-area: scan; display: block; padding: 8px 12px;
    background: var(--surface); border-block-end: 1px solid var(--hair);
  }
  .scanbar .scan { max-inline-size: none; }
  .main { padding: 12px; }
  .split, .picker, .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .picker .summary { position: static; }
  th, td { padding: 0 8px; }
  .btn { min-block-size: var(--target); }
  .btn.small { min-block-size: 36px; }
  input, select { min-block-size: var(--target); }
  .result-grid input { min-block-size: 40px; }
  .toasts { inset-inline: 12px; max-inline-size: none; inset-block-end: max(16px, env(safe-area-inset-bottom)); }
  .topbar { padding-inline: max(12px, env(safe-area-inset-left)) max(12px, env(safe-area-inset-right)); }
  .main { padding-block-end: max(12px, env(safe-area-inset-bottom)); }
  .page-head h1 { font-size: 1.28rem; }
  dialog { inline-size: min(560px, calc(100vw - 16px)); }
  .dialog-body { max-block-size: calc(100dvh - 160px); }
}

/* Small phone: lists stop being tables.

   Each row becomes a card, each cell a labelled line, so a courier or a
   receptionist reads down the screen instead of dragging it sideways. The
   label comes from the column heading through data-label, so there is one
   definition of a column, not two. */
@media (max-width: 620px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .console-host { margin: -12px; }
  .table-wrap { border: 0; background: transparent; border-radius: 0; overflow: visible; }
  .table-wrap table, .table-wrap tbody, .table-wrap tr, .table-wrap td { display: block; inline-size: 100%; }
  .table-wrap thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .table-wrap tbody tr {
    background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r10);
    padding: 8px 12px; margin-block-end: 8px;
  }
  .table-wrap tbody tr:hover { background: var(--surface); }
  .table-wrap tbody tr.selected { border-color: var(--teal); background: var(--teal-soft); }
  .table-wrap td {
    block-size: auto; border: 0; padding: 3px 0; white-space: normal;
    display: flex; align-items: baseline; gap: 10px;
  }
  .table-wrap td[data-label]::before {
    content: attr(data-label);
    color: var(--muted); font-size: 0.86rem; flex: none; min-inline-size: 38%;
  }
  .table-wrap td:empty { display: none; }
  .table-wrap td.action { justify-content: flex-end; padding-block-start: 6px; }
  .table-wrap td.action::before { content: none; }
  .table-wrap tr.group-row {
    background: transparent; border: 0; padding: 0; margin-block: 12px 4px;
  }
  .table-wrap tr.group-row td { color: var(--teal); font-weight: 500; padding: 0; }
  .table-wrap tr.group-row td::before { content: none; }
  .table-foot { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r10); flex-wrap: wrap; }

  /* The entry grid keeps its shape: it is a form, not a list. */
  .result-grid, .result-grid tbody, .result-grid tr, .result-grid td { display: revert; }
  .result-grid thead { position: static; inline-size: auto; block-size: auto; clip: auto; }
  .receipt { inline-size: 100%; }
  .page-head { gap: 8px; }
}

/* Someone who asked for less movement gets less movement. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .boot-mark { animation: none; border-inline-start-color: var(--teal); }
}

/* A lab screen in a bright room: honour a user's contrast preference. */
@media (prefers-contrast: more) {
  :root { --hair: #C3CEC8; --muted: #44566B; }
  .btn { border-color: var(--muted); }
}

/* Print */
@media print {
  .nav, .topbar, .toasts, .no-print, .page-head .btn { display: none; }
  .frame { display: block; }
  .main { padding: 0; }
  body { background: #FFFFFF; }
  .receipt { border: 0; }
  .print-only { display: block; }
}
.print-only { display: none; }

/* ------------------------------------------------------------ search (Ctrl+K)
   The search button sits beside the scan field; the palette opens a little
   below the top, one list grouped by kind, the active row tinted teal. */
.topbar-search {
  display: inline-flex; align-items: center; gap: 8px; color: var(--muted);
  min-inline-size: 150px; justify-content: flex-start;
}
.topbar-search:hover { color: var(--ink); }
.topbar-search kbd { margin-inline-start: auto; font-size: 0.78rem; padding: 0 5px; border: 1px solid var(--hair); border-radius: 4px; color: var(--muted); background: var(--paper); }
dialog.palette { inline-size: min(700px, calc(100vw - 24px)); margin-block: 9vh auto; max-block-size: 78vh; display: none; flex-direction: column; overflow: hidden; }
dialog.palette[open] { display: flex; }
.pal-head { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-block-end: 1px solid var(--hair); color: var(--muted); }
.pal-head input { flex: 1; border: 0; outline: none; font-size: 1.14rem; padding: 6px 2px; background: transparent; min-block-size: 40px; box-shadow: none; }
.pal-head input:focus { outline: none; box-shadow: none; }
.pal-body { overflow: auto; padding: 6px 8px 10px; flex: 1; min-block-size: 80px; }
.pal-body .empty { border: 0; padding: 24px 12px; }
.pal-hint { padding: 16px 10px; margin: 0; }
.pal-group { margin-block-start: 6px; }
.pal-group-head { display: flex; align-items: center; gap: 8px; justify-content: space-between; color: var(--muted); font-size: 0.86rem; padding: 6px 8px 2px; }
.pal-item {
  display: flex; align-items: center; gap: 10px; inline-size: 100%; text-align: start;
  border: 0; background: transparent; font: inherit; color: var(--ink); cursor: pointer;
  padding: 7px 8px; border-radius: var(--r6); min-block-size: 44px;
}
.pal-item.on { background: var(--teal-soft); }
.pal-ic { display: inline-grid; place-items: center; inline-size: 30px; block-size: 30px; border-radius: 8px; background: var(--paper); color: var(--teal); flex: none; }
.pal-item.on .pal-ic { background: var(--surface); }
.pal-text { display: flex; flex-direction: column; min-inline-size: 0; flex: 1; }
.pal-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pal-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; color: var(--muted); font-size: 0.86rem; }
.pal-meta .state { border: 0; padding: 0; background: none; color: var(--slate); }
.pal-kind { font-size: 0.8rem; flex: none; }
.pal-foot { display: flex; gap: 16px; flex-wrap: wrap; padding: 8px 14px; border-block-start: 1px solid var(--hair); font-size: 0.82rem; }
.pal-foot kbd { font-size: 0.78rem; padding: 0 4px; border: 1px solid var(--hair); border-radius: 4px; background: var(--paper); }

/* A thin trail over detail pages, with a back button. */
.crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-block: -6px 12px; font-size: 0.9rem; color: var(--muted); }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--teal); }
.crumbs .sep { color: var(--hair); }
.crumbs .here { color: var(--ink); }
.crumb-back { display: inline-flex; align-items: center; gap: 4px; margin-inline-end: 6px; }

/* ------------------------------------------------------------ home
   The day's work for the person's role first, then every screen, then what
   was opened lately. */
.home-hello { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-block-end: 14px; }
.home-hello h1 { margin: 0; margin-inline-end: auto; }
.home-find {
  display: flex; align-items: center; gap: 10px; inline-size: 100%; text-align: start;
  font: inherit; font-size: 1.07rem; color: var(--muted); cursor: pointer;
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r10);
  padding: 12px 16px; margin-block-end: 20px; min-block-size: 52px;
}
.home-find:hover { border-color: var(--teal); color: var(--ink); }
.home-find kbd { margin-inline-start: auto; font-size: 0.8rem; padding: 0 6px; border: 1px solid var(--hair); border-radius: 4px; background: var(--paper); }
.home-h2 { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 10px; font-size: 1.07rem; }
.home-h2 .hair { flex: 1; border-block-start: 1px solid var(--hair); }
.work { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.work a {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r10);
  padding: 12px 14px; color: var(--ink); min-block-size: 76px;
}
.work a:hover { border-color: var(--teal); text-decoration: none; }
.work a .work-ic { grid-row: 1 / span 2; display: inline-grid; place-items: center; inline-size: 42px; block-size: 42px; border-radius: 12px; background: var(--teal-soft); color: var(--teal); }
.work a .work-n { font-size: 1.6rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.work a .work-n.zero { color: var(--muted); font-weight: 500; }
.work a .work-n.danger { color: var(--danger); }
.work a .work-n.waiting { color: var(--waiting); }
.work a .work-l { color: var(--muted); font-size: 0.93rem; line-height: 1.35; }
.work a.primary { background: var(--teal); border-color: var(--teal); color: #fff; }
.work a.primary .work-ic { background: rgba(255, 255, 255, 0.16); color: #fff; }
.work a.primary .work-l { color: rgba(255, 255, 255, 0.86); }
.work a.primary .work-t { font-weight: 600; font-size: 1.07rem; }
.work a .work-t { font-weight: 500; }
.focus-seg .btn { min-block-size: 32px; }
.recent-list { display: flex; flex-wrap: wrap; gap: 8px; }
.recent-list a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--hair); border-radius: var(--r6); background: var(--surface); color: var(--ink); max-inline-size: 100%; }
.recent-list a:hover { border-color: var(--teal); text-decoration: none; }
.recent-list a .ic { color: var(--teal); }
.recent-list .muted { font-size: 0.86rem; }
.quality-due { margin-block-start: 10px; }

@media (max-width: 900px) {
  .topbar-search { min-inline-size: 0; padding-inline: 10px; }
  .topbar-search .lbl, .topbar-search kbd { display: none; }
  .home-find kbd, .pal-foot { display: none; }
  dialog.palette { margin-block-start: 8px; max-block-size: calc(100dvh - 16px); inline-size: calc(100vw - 16px); }
  .home-h2 { flex-wrap: wrap; row-gap: 8px; }
  .home-h2 .hair { display: none; }
  .focus-seg { display: flex; inline-size: 100%; }
  .focus-seg .btn { flex: 1; padding-inline: 4px; }
  .work { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .work a { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 4px; padding: 10px 12px; }
  .work a .work-ic { grid-row: auto; inline-size: 34px; block-size: 34px; }
}
@media print { .crumbs, .topbar-search, dialog.palette { display: none; } }

/* ── Design refresh, 23 Oct 2026 ──────────────────────────────────────
   One identity from sign-in to the last screen: the navigation rail takes
   the navy of the Catenix sign-in card, with the X faintly at its foot;
   everything else stays calm on a cool paper. Headings are ink, not teal:
   teal is kept for what can be pressed. Flags carry a mark (▲ ▼) as well
   as a colour. Tiles that need a person get a coloured edge rather than a
   coloured number, so a row of figures still reads as one row. */
:root {
  --navy: #0D1B2A;
  --navy-2: #13263A;
  --signal: #2BB3A8;
  --paper: #EEF3F4;
  --hair: #DCE5E8;
  --ink: #102233;
  --muted: #5F7180;
  --teal: #0B7473;
  --teal-fill: #0E6B66;
  --teal-soft: #E3F1F0;
  --low: #1D5FA8;
  --low-soft: #E8F0FA;
  --r10: 12px;
}
h1, h2 { color: var(--ink); }
h1 { font-size: 1.5rem; letter-spacing: 0; }
h2 { font-size: 1.1rem; }
h3 { color: var(--ink); }

/* the rail */
.nav {
  background: var(--navy); border-inline-end: 0; color: #C5D3DC;
  position: sticky; isolation: isolate;
}
.nav::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset-block-end: -40px; inset-inline-end: -60px; inline-size: 260px; block-size: 260px;
  background: url("brand/catenix-x-white.svg") center / contain no-repeat; opacity: 0.05;
}
.nav .brand { border-block-end-color: rgba(255, 255, 255, 0.08); }
.nav .brand-mark { background: var(--teal-fill); }
.nav .brand-name { color: #FFFFFF; }
.nav .brand-sub { color: #8FA5B4; }
.nav .brand-dist { background: #FFFFFF; border-radius: 6px; padding: 3px 6px; inline-size: 104px; }
/* the LabSyria edition: the distributor's mark heads the rail; the product
   sits small in the rail's foot */
.nav.nav-dist .brand-dist { inline-size: 132px; margin-block-start: 0; }
.nav-foot-product { display: block; block-size: 13px; inline-size: auto; opacity: 0.7; margin-block-end: 5px; }
.nav a { color: #C5D3DC; position: relative; }
.nav a .ic { color: #7E96A7; }
.nav a:hover { background: rgba(255, 255, 255, 0.06); color: #FFFFFF; }
.nav a:hover .ic { color: #FFFFFF; }
.nav a[aria-current="page"] { background: rgba(43, 179, 168, 0.16); color: #FFFFFF; font-weight: 500; }
.nav a[aria-current="page"] .ic { color: var(--signal); }
.nav a[aria-current="page"]::before {
  content: ""; position: absolute; inset-inline-start: -10px; inset-block: 6px;
  inline-size: 3px; border-radius: 3px; background: var(--signal);
}
.nav-head { color: #7E96A7; }
.nav-head:hover { background: rgba(255, 255, 255, 0.05); color: #FFFFFF; }
.nav-foot { color: #7E96A7; border-block-start-color: rgba(255, 255, 255, 0.08); }
.nav-foot .muted { color: #7E96A7; }
.nav :focus-visible { outline-color: var(--signal); }
.nav kbd { background: rgba(255, 255, 255, 0.08); color: #C5D3DC; border-color: transparent; }

/* the top bar: the scan field leads; search is a small key, not a second box */
.topbar { background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(6px); border-block-end-color: var(--hair); }
.topbar .topbar-search { border-color: transparent; background: var(--paper); color: var(--muted); }
.topbar .topbar-search:hover { color: var(--ink); border-color: var(--hair); }

/* figures: larger, calm; attention is an edge, not a colour change */
.kpi { padding: 14px 16px; gap: 4px; border-color: var(--hair); }
.kpi .n { font-size: 2.15rem; font-weight: 600; color: var(--ink); }
.kpi .n.danger, .kpi .n.waiting { color: var(--ink); }
.kpi:has(.n.danger) { box-shadow: inset 3px 0 0 var(--danger); }
.kpi:has(.n.waiting) { box-shadow: inset 3px 0 0 var(--waiting); }
[dir="rtl"] .kpi:has(.n.danger) { box-shadow: inset -3px 0 0 var(--danger); }
[dir="rtl"] .kpi:has(.n.waiting) { box-shadow: inset -3px 0 0 var(--waiting); }
.kpi .l { color: var(--muted); }

/* panels and tables */
.panel { border-color: var(--hair); }
.table-wrap { border-color: var(--hair); }
th { color: var(--muted); font-size: 0.86rem; background: #F7FAFA; }
tbody tr:hover td { background: #F5F9F9; }

/* flags: a mark as well as a colour */
.flag.high, .flag.low { font-weight: 600; white-space: nowrap; }
.flag.high { color: var(--danger); }
.flag.low { color: var(--low); }
.flag.high::before { content: "▲"; font-size: 0.7em; margin-inline-end: 4px; vertical-align: 0.1em; }
.flag.low::before { content: "▼"; font-size: 0.7em; margin-inline-end: 4px; vertical-align: 0.1em; }
/* a critical value: the same arrow, on a filled band, so it reads as more than high or low */
.flag.critical_high, .flag.critical_low { font-weight: 700; white-space: nowrap; color: #FFFFFF; background: var(--danger); border-radius: 4px; padding-inline: 6px; }
.flag.critical_high::before { content: "▲▲"; font-size: 0.7em; margin-inline-end: 4px; vertical-align: 0.1em; }
.flag.critical_low::before { content: "▼▼"; font-size: 0.7em; margin-inline-end: 4px; vertical-align: 0.1em; }
table.cumulative td.amt .flag.low { color: var(--low); }

/* the launcher tiles: quieter, one weight */
.launch .tile-ic { border-radius: 14px; }
.launch a:hover { background: var(--surface); box-shadow: 0 0 0 1px var(--hair); }

@media (prefers-reduced-motion: reduce) {
  .nav-caret { transition: none; }
}

/* ---------------------------------------------------------------- dark theme
   For night shifts: chosen per workstation in Settings, General (light, dark,
   or the system's). Printouts render in their own frame without the theme. */
html[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0D1822;
  --surface: #13212D;
  --hair: #253747;
  --ink: #E4ECF1;
  --muted: #93A6B5;
  --teal: #3CC2B4;
  --teal-fill: #17877F;
  --teal-soft: #123536;
  --danger: #FF7480;
  --danger-soft: #3B1B21;
  --waiting: #F2A65E;
  --waiting-soft: #3A2A18;
  --slate: #A2B5C3;
  --slate-soft: #1B2B38;
  --ok: #3CC2B4;
  --focus: #3CC2B4;
  --low: #8DB9F2;
  --low-soft: #172A40;
}
html[data-theme="dark"] body { background: var(--paper); color: var(--ink); }
html[data-theme="dark"] th { background: #182836; }
html[data-theme="dark"] tbody tr:hover td { background: #172A38; }
html[data-theme="dark"] tr.row-error td { background: var(--danger-soft); }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background: #0F1C27; color: var(--ink); border-color: var(--hair); }
html[data-theme="dark"] .tint-daily { --tint: #123536; --tint-ink: #5FD3C6; }
html[data-theme="dark"] .tint-network { --tint: #172A40; --tint-ink: #8DB9F2; }
html[data-theme="dark"] .tint-quality { --tint: #16301F; --tint-ink: #74D39A; }
html[data-theme="dark"] .tint-operations { --tint: #1B2B38; --tint-ink: #A9B9C8; }
html[data-theme="dark"] .tint-clinical { --tint: #2A1E38; --tint-ink: #C3A6EA; }
html[data-theme="dark"] .tint-money { --tint: #33240F; --tint-ink: #F2B270; }
html[data-theme="dark"] .tint-insight { --tint: #182A3C; --tint-ink: #96B9DE; }
html[data-theme="dark"] .tint-admin { --tint: #1C2731; --tint-ink: #AEBAC5; }
html[data-theme="dark"] .tint-advanced { --tint: #1E2630; --tint-ink: #A7B3BF; }

/* larger text, also per workstation */
html[data-size="large"] { font-size: 112.5%; }
html[data-theme="dark"] .topbar { background: rgba(19, 33, 45, 0.94); }
html[data-theme="dark"] .work a.primary { background: var(--teal-fill); border-color: var(--teal-fill); }
html[data-theme="dark"] dialog::backdrop { background: rgba(0, 0, 0, 0.55); }

/* Culture entry against the breakpoint table */
.ast-num { inline-size: 70px; min-block-size: 30px; text-align: center; }
.ast-ind { font-size: 0.82rem; max-inline-size: 300px; white-space: normal; }
.ast-mark { white-space: nowrap; }
.ast-flag { color: var(--waiting); font-size: 0.86rem; }
.ast-note { background: var(--surface); font-size: 0.86rem; }
.ast-source { font-size: 0.8rem; margin-block-start: 8px; }

/* ---------------------------------------------------------------- microscopy
   The microscope dialog in result entry (screens/microscopy.js): the live
   view, the picture strip, markers drawn over a picture (never into it) and
   the counter beside them. Flat: hairlines, no shadows. */
dialog.wide:has(.mic) { inline-size: min(1180px, calc(100vw - 32px)); }
.mic .grow, .dialog-foot .grow { flex: 1; }
.mic .small, .dialog-foot .small { font-size: 0.86rem; }
.mic-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.mic-grid.with-counter { grid-template-columns: minmax(0, 1fr) 300px; }
.mic-live, .mic-view { position: relative; background: #0B0F14; border: 1px solid var(--hair); border-radius: var(--r6); overflow: hidden; line-height: 0; }
.mic-live { aspect-ratio: 4 / 3; max-block-size: 44vh; margin-inline: auto; inline-size: 100%; }
.mic-live video { inline-size: 100%; block-size: 100%; object-fit: contain; }
.mic-live.shot { outline: 3px solid var(--teal); }
.mic-cam-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; color: #fff; line-height: 1.6; text-align: center; font-size: 1rem; }
.mic-view { cursor: crosshair; touch-action: none; user-select: none; }
.mic-view img { -webkit-user-drag: none; }
.mic-view img { display: block; inline-size: 100%; block-size: auto; max-block-size: 50vh; object-fit: contain; }
.mic-marks { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; }
.mic-line { stroke: #111; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.mic-line-w { stroke: #fff; stroke-width: 4; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.mic-num { position: absolute; transform: translate(-50%, -50%); min-inline-size: 20px; block-size: 20px; padding: 0 4px; border: 1.5px solid #111; border-radius: 10px; background: #fff; color: #111; font: 600 12px/17px var(--mono); text-align: center; pointer-events: none; }
.mic-len { position: absolute; transform: translate(-50%, -140%); padding: 0 4px; background: #fff; color: #111; font: 11px/16px var(--mono); pointer-events: none; }
.mic-scale { position: absolute; inset-block-end: 8px; inset-inline-end: 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 3px 0; background: #fff; color: #111; font: 11px/14px var(--mono); white-space: nowrap; }
.mic-scale span { display: block; inline-size: 100%; block-size: 4px; background: #111; }
[dir="rtl"] .mic-scale { inset-inline-end: auto; inset-inline-start: 8px; }
.mic-ask { position: absolute; z-index: 2; display: flex; gap: 4px; padding: 4px; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r6); line-height: normal; transform: translate(-50%, 8px); }
.mic-ask input { inline-size: 200px; }
.mic-legend { margin: 0; padding-inline-start: 22px; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.mic-legend li { display: flex; align-items: center; gap: 6px; }
.mic-legend li.line { list-style: square; }
.mic-strip { display: flex; gap: 10px; overflow-x: auto; padding-block-end: 4px; }
.mic-strip.wrap { flex-wrap: wrap; overflow: visible; }
.mic-thumb { display: flex; flex-direction: column; gap: 4px; inline-size: 160px; flex: none; padding: 6px; border: 1px solid var(--hair); border-radius: var(--r6); background: var(--surface); }
.mic-thumb.on { border-color: var(--teal); }
.mic-thumb input:not([type]) { inline-size: 100%; }
.mic-thumb-img { position: relative; padding: 0; border: 0; background: #0B0F14; cursor: zoom-in; line-height: 0; border-radius: 4px; overflow: hidden; }
.mic-thumb-img img, .mic-ph { display: block; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.mic-badge { position: absolute; inset-block-start: 4px; inset-inline-start: 4px; min-inline-size: 18px; padding: 0 4px; border-radius: 9px; background: #fff; color: #111; font: 600 11px/18px var(--mono); }
.mic-new { position: absolute; inset-block-end: 4px; inset-inline-end: 4px; padding: 0 6px; border-radius: 4px; background: var(--waiting); color: #fff; font-size: 0.75rem; line-height: 18px; }
.mic-counter { position: sticky; inset-block-start: 0; padding: 10px; border: 1px solid var(--hair); border-radius: var(--r6); background: var(--surface); }
.mic .btn.primary kbd { color: var(--ink); }
.mic-cells { display: flex; flex-direction: column; gap: 2px; }
.mic-cell { display: grid; grid-template-columns: 28px minmax(0, 1fr) 36px 50px; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid transparent; border-radius: 4px; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
.mic-cell:hover:not(:disabled) { border-color: var(--hair); }
.mic-cell.hit { background: var(--teal-soft); }
.mic-cell:disabled { cursor: default; }
.mic-cell.grade { grid-template-columns: 28px minmax(0, 1fr) 76px 36px; cursor: default; }
.mic-cell.grade input { inline-size: 100%; min-inline-size: 0; }
.mic-total { font: 600 1.4rem/1.2 var(--mono); }
.mic-total.done { color: var(--teal); }
.mic-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mic-prev summary { cursor: pointer; color: var(--muted); }
@media (max-width: 900px) {
  .mic-grid.with-counter, .mic-compare { grid-template-columns: minmax(0, 1fr); }
  .mic-counter { position: static; }
}
/* answers from a list and result templates (screens/answers.js) */
.flag.abnormal { color: var(--danger); font-weight: 600; white-space: nowrap; }
.choice-box { position: relative; display: block; }
.choice-box input { inline-size: 100%; }
.choice-input.abnormal { color: var(--danger); font-weight: 600; }
.choice-input.free { font-style: normal; border-style: dashed; }
.choice-list { position: absolute; z-index: 30; inset-inline-start: 0; inset-block-start: 100%; min-inline-size: 100%; max-block-size: 260px; overflow-y: auto;
  margin: 2px 0 0; padding: 4px 0; list-style: none; background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r6); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); }
.choice-list li { padding: 3px 10px; cursor: pointer; white-space: nowrap; }
.choice-list li .num { display: inline-block; min-inline-size: 1.6em; color: var(--muted); font-variant-numeric: tabular-nums; }
.choice-list li.on, .choice-list li:hover { background: var(--paper); }
.choice-list li.abn { color: var(--danger); }
.tpl-block { margin-block-end: 12px; }
.tpl-head { align-items: center; margin-block-end: 6px; }
.tpl-sec { margin: 10px 0 4px; font-size: 0.9rem; color: var(--muted); font-weight: 600; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 4px 20px; }
.tpl-field { display: grid; grid-template-columns: 10em minmax(7em, 1fr) minmax(0, 8em) 6em; gap: 8px; align-items: center; }
.tpl-field input { min-block-size: 32px; inline-size: 100%; }
.tpl-label { font-size: 0.93rem; }
.tpl-meta { font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-field > .flag { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.86rem; }
@media (max-width: 640px) { .tpl-grid { grid-template-columns: 1fr; } .tpl-field { grid-template-columns: 9em 1fr 5em; } .tpl-meta { display: none; } }
/* the AST plate photo (screens/plate.js) */
dialog.wide:has(.plate) { inline-size: min(1180px, calc(100vw - 32px)); }
.plate { min-inline-size: 0; }
.plate-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 12px; align-items: start; }
.plate-view { position: relative; margin-inline: auto; inline-size: 100%; background: #0B0F14; border: 1px solid var(--hair); border-radius: var(--r6); overflow: hidden; line-height: 0; user-select: none; touch-action: none; }
.plate-view.live { cursor: crosshair; }
.plate-view img { display: block; inline-size: 100%; block-size: auto; -webkit-user-drag: none; }
.plate-view svg { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; pointer-events: none; }
.plate-disc .halo { fill: none; stroke: rgba(255, 255, 255, 0.85); vector-effect: non-scaling-stroke; }
.plate-disc .zone { fill: none; stroke: #0B7B79; vector-effect: non-scaling-stroke; }
.plate-disc.sugg .zone { stroke: #B45309; }
.plate-disc.on .zone { stroke: #BA1120; }
.plate-disc .ctr { fill: #fff; stroke: #111; }
.plate-pt { fill: #BA1120; stroke: #fff; }
.plate-scale { stroke: #FACC15; vector-effect: non-scaling-stroke; }
.plate-drag { fill: none; stroke: #FACC15; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.plate-num { position: absolute; transform: translate(-50%, -110%); min-inline-size: 20px; block-size: 20px; padding: 0 4px; border: 1.5px solid #111; border-radius: 10px; background: #fff; color: #111; font: 600 12px/17px var(--mono); text-align: center; pointer-events: none; }
.plate-num.sugg { border-style: dashed; }
.plate-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-block-size: 52vh; overflow-y: auto; }
.plate-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr) 54px auto; align-items: center; gap: 4px; padding: 4px; border: 1px solid transparent; border-radius: 4px; }
.plate-list li.on { border-color: var(--teal); background: var(--teal-soft); }
.plate-list li.sugg select { border-style: dashed; }
.plate-list select { inline-size: 100%; min-inline-size: 0; }
.plate-note { grid-column: 2 / -1; }
.plate-badge { display: inline-block; min-inline-size: 22px; padding: 0 4px; border-radius: 11px; background: var(--paper); font: 600 12px/22px var(--mono); text-align: center; }
.plate-mm { font: 600 0.95rem/1 var(--mono); text-align: center; }
.plate-thumbs { gap: 6px; flex-wrap: wrap; }
.plate-thumb { display: flex; flex-direction: column; gap: 2px; inline-size: 110px; padding: 2px; border: 1px solid var(--hair); border-radius: 4px; background: var(--surface); cursor: pointer; }
.plate-thumb.on { border-color: var(--teal); }
.plate-thumb img, .plate-thumb .mic-ph { display: block; inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.plate-cam video { display: block; inline-size: 100%; max-block-size: 50vh; background: #0B0F14; border-radius: var(--r6); }
.plate-phone img { image-rendering: pixelated; border: 1px solid var(--hair); background: #fff; }
.plate-history summary { cursor: pointer; color: var(--muted); }
@media (max-width: 900px) { .plate-grid { grid-template-columns: minmax(0, 1fr); } }

/* ── LabSyria edition, 26 Oct 2026 ───────────────────────────────────
   The colours of the LabSyria mark and nothing else: its navy carries the
   rail and every primary action, its green marks what is ready or current,
   its red is kept for critical values. Each state has one colour on every
   screen: waiting amber, ready green, signed blue, done grey, critical red.
   A high result is orange and a low one blue, each with its arrow, so the
   two never depend on telling red from green. */
:root { --high: var(--danger); --high-soft: var(--danger-soft); --ready: var(--teal); --ready-soft: var(--teal-soft); }
html[data-brand="labsyria"] {
  --navy: #0A2644;
  --navy-2: #103157;
  --signal: #02AB36;
  --paper: #F3F5F8;
  --surface: #FFFFFF;
  --hair: #E1E6ED;
  --ink: #13233A;
  --muted: #5B6B80;
  --teal: #1A4A80;
  --teal-fill: #0A2644;
  --teal-soft: #E9EFF7;
  --focus: #1F5FAD;
  --ok: #157A3E;
  --ready: #157A3E;
  --ready-soft: #E4F4EA;
  --danger: #B42318;
  --danger-soft: #FDECEA;
  --waiting: #A15C00;
  --waiting-soft: #FFF3E0;
  --low: #1F4E8C;
  --low-soft: #E8F0FB;
  --high: #B54708;
  --high-soft: #FEF0E6;
  --slate: #5B6B80;
  --slate-soft: #EEF1F5;
  --r6: 6px;
  --r10: 10px;
}
html[data-brand="labsyria"][data-theme="dark"] {
  --navy: #071A30;
  --navy-2: #0D2846;
  --signal: #2FCB5C;
  --paper: #0B1624;
  --surface: #111F30;
  --hair: #22344A;
  --ink: #E5ECF3;
  --muted: #98A9BC;
  --teal: #8CB8EC;
  --teal-fill: #2C5E98;
  --teal-soft: #15283F;
  --focus: #8CB8EC;
  --ok: #5ACB86;
  --ready: #5ACB86;
  --ready-soft: #13301F;
  --danger: #FF7B72;
  --danger-soft: #3B1A1A;
  --waiting: #F2A65E;
  --waiting-soft: #3A2A18;
  --low: #8DB9F2;
  --low-soft: #172A40;
  --high: #F7A15C;
  --high-soft: #3A2414;
  --slate: #A2B3C4;
  --slate-soft: #1A2A3B;
}
html[data-brand="labsyria"] .nav::after { content: none; }
html[data-brand="labsyria"] .nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.09); }
html[data-brand="labsyria"] .nav a[aria-current="page"] .ic { color: #FFFFFF; }
html[data-brand="labsyria"] .btn.primary:hover { background: var(--navy-2); border-color: var(--navy-2); }
html[data-brand="labsyria"][data-theme="dark"] .btn.primary:hover { background: #3A70AD; border-color: #3A70AD; }
html[data-brand="labsyria"] th { background: #F7F9FB; }
html[data-brand="labsyria"] tbody tr:hover td { background: #F5F8FC; }
html[data-brand="labsyria"][data-theme="dark"] th { background: #152538; }
html[data-brand="labsyria"][data-theme="dark"] tbody tr:hover td { background: #16283C; }
.flag.high { color: var(--high); }
.state.s-results_complete::before, .state.s-report_generated::before { background: var(--ready); }

/* ── Results workspace, 26 Oct 2026 ──────────────────────────────────
   The day's visits on one side, the open visit beside them: a technician
   moves from patient to patient without leaving the screen. Below 1180 px
   the list and the visit take turns. */
.ws { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); gap: 16px; align-items: start; }
.ws-list {
  position: sticky; inset-block-start: calc(var(--topbar-h) + 12px);
  max-block-size: calc(100vh - var(--topbar-h) - 24px);
  display: flex; flex-direction: column; min-block-size: 0;
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r10); overflow: hidden;
}
.ws-list-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px 8px; }
.ws-list-head h1 { font-size: 1.15rem; margin: 0; flex: 1; }
.ws-search { padding: 0 14px 10px; }
.ws-search input { inline-size: 100%; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-block-size: 30px; padding: 2px 10px;
  border: 1px solid var(--hair); border-radius: 999px; background: var(--surface); color: var(--ink);
  font: inherit; font-size: 0.93rem; cursor: pointer;
}
.chip .n { font-weight: 600; color: var(--muted); }
.chip:hover { border-color: var(--teal); }
.chip[aria-pressed="true"] { background: var(--teal-fill); border-color: var(--teal-fill); color: #FFFFFF; }
.chip[aria-pressed="true"] .n { color: #FFFFFF; }
.chip.urgent[aria-pressed="true"] { background: var(--danger); border-color: var(--danger); }
.ws-rows { list-style: none; margin: 0; padding: 0; overflow-y: auto; border-block-start: 1px solid var(--hair); flex: 1; min-block-size: 0; }
.ws-rows li + li { border-block-start: 1px solid var(--hair); }
.ws-row {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 4px 12px; align-items: center;
  inline-size: 100%; padding: 10px 14px; min-block-size: 64px; text-align: start;
  background: transparent; border: 0; color: inherit; font: inherit; cursor: pointer;
}
.ws-row:hover { background: var(--paper); }
.ws-row[aria-current="true"] { background: var(--teal-soft); box-shadow: inset 3px 0 0 var(--teal-fill); }
[dir="rtl"] .ws-row[aria-current="true"] { box-shadow: inset -3px 0 0 var(--teal-fill); }
.ws-no {
  inline-size: 44px; block-size: 44px; border-radius: 8px; display: grid; place-items: center;
  background: var(--slate-soft); color: var(--ink); font-weight: 600; font-size: 1.15rem;
}
.ws-row[aria-current="true"] .ws-no { background: var(--teal-fill); color: #FFFFFF; }
.ws-who { min-inline-size: 0; display: flex; flex-direction: column; }
.ws-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-meta { color: var(--muted); font-size: 0.86rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; font-size: 0.86rem; }
.ws-empty { padding: 28px 16px; text-align: center; color: var(--muted); }
.ws-main { min-inline-size: 0; }
.ws-pick { display: grid; place-items: center; min-block-size: 320px; color: var(--muted); text-align: center;
  background: var(--surface); border: 1px dashed var(--hair); border-radius: var(--r10); padding: 24px; }
.ws-back { display: none; }
.pill { display: inline-flex; align-items: center; gap: 5px; border-radius: 6px; padding: 1px 8px; font-size: 0.86rem; font-weight: 500; white-space: nowrap; }
.pill.waiting { color: var(--waiting); background: var(--waiting-soft); }
.pill.ready { color: var(--ready); background: var(--ready-soft); }
.pill.signed { color: var(--low); background: var(--low-soft); }
.pill.done { color: var(--slate); background: var(--slate-soft); }
.pill.urgent { color: #FFFFFF; background: var(--danger); font-weight: 600; }
.pill.high { color: var(--high); background: var(--high-soft); }
.pill.critical { color: #FFFFFF; background: var(--danger); }
@media (max-width: 1180px) {
  .ws { grid-template-columns: minmax(0, 1fr); }
  .ws-list { position: static; max-block-size: none; }
  .ws.open .ws-list { display: none; }
  .ws:not(.open) .ws-main { display: none; }
  .ws-back { display: inline-flex; margin-block-end: 8px; }
}

/* the open visit: the patient first, then the work */
.visit-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 14px; align-items: center;
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r10); padding: 14px 16px; margin-block-end: 12px; }
.visit-head .vh-no { inline-size: 52px; block-size: 52px; border-radius: 10px; display: grid; place-items: center;
  background: var(--teal-fill); color: #FFFFFF; font-weight: 600; font-size: 1.4rem; }
.visit-head h1 { font-size: 1.4rem; margin: 0; color: var(--ink); }
.visit-head .vh-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; color: var(--muted); font-size: 0.93rem; }
.visit-head .vh-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@media (max-width: 760px) { .visit-head { grid-template-columns: auto minmax(0, 1fr); } .visit-head .vh-actions { grid-column: 1 / -1; justify-content: flex-start; } }
.ws-row.no-no { grid-template-columns: minmax(0, 1fr) auto; }
.visit-head.no-no { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 760px) { .visit-head.no-no { grid-template-columns: minmax(0, 1fr); } }
/* the sign-in keeps the Catenix portal's look in every edition */
html[data-brand="labsyria"] .login-card { --teal: #2BB3A8; --teal-fill: #137E78; --teal-soft: rgba(43, 179, 168, 0.16); --focus: #2BB3A8; }

/* Notices and figures without side stripes: a notice is a tinted panel,
   a figure that needs a person carries a small dot beside its label. */
html[data-brand="labsyria"] .band { border: 1px solid #F2D9B3; background: var(--waiting-soft); color: var(--ink); }
html[data-brand="labsyria"] .band.warn { border-color: #F2D9B3; background: var(--waiting-soft); }
html[data-brand="labsyria"] .band.danger { border-color: #F4C7C1; background: var(--danger-soft); }
html[data-brand="labsyria"] .band.info { border-color: #CFDCEC; background: var(--teal-soft); }
html[data-brand="labsyria"][data-theme="dark"] .band, html[data-brand="labsyria"][data-theme="dark"] .band.warn { border-color: #5A4320; }
html[data-brand="labsyria"][data-theme="dark"] .band.danger { border-color: #5E2A27; }
html[data-brand="labsyria"][data-theme="dark"] .band.info { border-color: #2A4567; }
html[data-brand="labsyria"] .kpi:has(.n.danger), html[data-brand="labsyria"] .kpi:has(.n.waiting) { box-shadow: none; }
html[data-brand="labsyria"] .kpi:has(.n.danger) .l::before, html[data-brand="labsyria"] .kpi:has(.n.waiting) .l::before {
  content: ""; display: inline-block; inline-size: 8px; block-size: 8px; border-radius: 50%;
  margin-inline-end: 6px; vertical-align: 0.1em; background: var(--waiting);
}
html[data-brand="labsyria"] .kpi:has(.n.danger) .l::before { background: var(--danger); }
/* critical limits: each one its own line, the word then the number */
.crit { display: inline-flex; flex-direction: column; gap: 0; color: var(--danger); font-size: 0.93rem; line-height: 1.35; }
/* the workspace fills the screen: the list scrolls on its own, the visit beside it */
@media (min-width: 1181px) {
  .ws-list { block-size: calc(100vh - var(--topbar-h) - 24px); }
  .ws-pick { min-block-size: calc(100vh - var(--topbar-h) - 24px); }
}
/* home: the queues at zero, as one quiet line under the work */
.home-quiet { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; color: var(--muted); font-size: 0.93rem; margin-block: 12px 4px; }
.home-quiet .dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--ready); }
.home-quiet a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 3px; }
.home-quiet a:hover { color: var(--ink); }
/* the order's steps, and a narrow first step */
.steps { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 24px; font-size: 0.93rem; color: var(--muted); }
.steps li { display: inline-flex; align-items: center; gap: 8px; }
.steps .n { inline-size: 24px; block-size: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 0.86rem;
  border: 1px solid var(--hair); background: var(--surface); color: var(--muted); }
.steps li.on { color: var(--ink); font-weight: 600; }
.steps li.on .n { background: var(--teal-fill); border-color: var(--teal-fill); color: #FFFFFF; }
.steps li.done .n { background: var(--ready-soft); border-color: transparent; color: var(--ready); }
.page-head .steps { margin: 0; flex-basis: 100%; }
.narrow { max-inline-size: 760px; }

/* a support detail folded inside a sentence (maintenance: folder paths) */
details.inline-details { display: inline; }
details.inline-details > summary { display: inline; cursor: pointer; list-style: none; }
details.inline-details > summary::-webkit-details-marker { display: none; }
details.inline-details[open] > .code { display: block; margin-block-start: 4px; overflow-wrap: anywhere; }