/* Inter (variable, latin subset) — self-hosted so the design's weights render
   for everyone; falls back to system faces when the file is unavailable. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-variable.260c81a4759b.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Architype Bayer — the brand wordmark face, bound under the stack name used
   in .brand-copy/.login-brand. Font file hotlinked from the CC-BY-4.0 source
   the owner supplied (onlinewebfonts.com): "Font made from
   https://www.onlinewebfonts.com/fonts is licensed by CC BY 4.0".
   Deliberately NOT a remote @import: the face is non-critical chrome, so a
   third-party outage must degrade to Inter, never stall rendering. When a
   licensed file is in hand, self-host it here and drop the remote URLs. */
@font-face {
  font-family: "Architype Bayer";
  src: url("https://db.onlinewebfonts.com/t/a959448c957069dae7d52078616ebdc8.woff2") format("woff2"),
       url("https://db.onlinewebfonts.com/t/a959448c957069dae7d52078616ebdc8.woff") format("woff"),
       url("https://db.onlinewebfonts.com/t/a959448c957069dae7d52078616ebdc8.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* JetBrains Mono — the theme's telemetry face, self-hosted (Fontsource
   latin subset) like Inter so operational metadata renders identically
   everywhere; falls back to system monospace when unavailable. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-400-normal.caf0dfde4e44.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-700-normal.69002db50656.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light;
  /* Industrial Print theme (docs/adr/0003-industrial-app-theme.md): light
     mode is Swiss industrial print — unbleached paper substrate, carbon ink,
     sharp rules, square corners. --hazard (#E61919) is the ONLY accent and is
     reserved for real operational alarms; buttons/links are carbon. The
     brand primitives below remain the three-stroke bird logo's inks for
     asset reference; component rules consume only the semantic tokens.
     Dark mode (charcoal + phosphor inks, same hazard red) is the tactical
     sibling defined in the two dark token blocks further down. */
  --brand-cyan: #9FE7F5;
  --brand-blue: #0097B2;
  --brand-navy: #002250;
  --brand-gold: #F9D032;
  --ink: #14120E;
  --muted: #4A473E;
  --quiet: #6F6B5E;
  --line: #201E17;
  --line-strong: #000000;
  --bg: #F4F4F0;
  --surface: #F8F7F2;
  --surface-soft: #EAE8DF;
  --accent: #14120E;
  --accent-hover: #000000;
  --accent-soft: #E4E1D5;
  --accent-contrast: #F4F4F0;
  --hazard: #E61919;
  --positive: #1A5E38;
  --positive-soft: #E1EADC;
  --negative: #B31818;
  --negative-soft: #F4E0DC;
  --warning: #7A5200;
  --warning-soft: #F2E9CF;
  --radius-sm: 0px;
  --radius: 0px;
  --radius-lg: 0px;
  --shadow-panel: none;
  --font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --sidebar-width: 64px;
  --content-max: 1480px;
  /* Lets the details accordions animate to height auto (Chromium 131+);
     no effect in browsers without support. */
  interpolate-size: allow-keywords;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  font-optical-sizing: auto;
}

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

html { min-width: 320px; min-height: 100%; background: var(--bg); }

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-size: 0.9375rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); }
button { color: inherit; }
svg { display: block; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

::selection { color: var(--bg); background: var(--ink); }

.skip-link {
  position: fixed;
  z-index: 20;
  inset-block-start: 0.75rem;
  inset-inline-start: 0.75rem;
  transform: translateY(-160%);
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  color: var(--bg);
  background: var(--ink);
  font-weight: 650;
}
.skip-link:focus { transform: translateY(0); color: var(--bg); }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The shell keeps navigation steady while the work area stays calm and readable. */
.app-shell { min-height: 100vh; }
.sidebar {
  position: fixed;
  z-index: 5;
  inset-block: 0;
  inset-inline-start: 0;
  display: flex;
  width: var(--sidebar-width);
  flex-direction: column;
  padding: 1.35rem 1rem 1rem;
  border-inline-end: 1px solid var(--line);
  background: var(--surface);
}
.brand {
  display: flex;
  min-height: 50px;
  align-items: center;
  gap: 0.7rem;
  padding-inline: 0.4rem;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--ink); }
.brand-mark {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 0;
  /* Definite tracks are required: the logo img sizes itself 100%/100% and
     a percentage height does not resolve against an auto grid row — a
     portrait logo then overflows the box on its intrinsic aspect (the
     347x512 mark rendered 40x59 before this). The inactive theme variant
     is display:none, so a single track never stacks two children. */
  grid-template-columns: 100%;
  grid-template-rows: 100%;
}
.brand-mark .brand-logo { display: block; width: 100%; height: 100%; object-fit: contain; }
/* The logo ships in two inks: the navy original for light surfaces, a cyan
   recolor for dark ones. The auth pages are always dark regardless of the
   stored theme, so they always take the cyan variant. Variant rules are
   scoped inside .brand-mark so they outrank the base img display rule. */
.brand-mark .brand-logo-dark { display: none; }
:root:not([data-theme="light"]) .brand-mark .brand-logo-light,
:root[data-theme="dark"] .brand-mark .brand-logo-light { display: none; }
:root:not([data-theme="light"]) .brand-mark .brand-logo-dark,
:root[data-theme="dark"] .brand-mark .brand-logo-dark { display: block; }
.brand-copy { display: grid; line-height: 1.15; }
.brand-copy strong { color: var(--accent); font-size: 0.97rem; font-weight: 700; letter-spacing: -0.02em; font-family: "Architype Bayer", Inter, "Segoe UI", system-ui, sans-serif; }
.brand-copy span { margin-block-start: 0.25rem; color: var(--quiet); font-size: 0.73rem; }
.primary-nav { display: flex; flex: 1; flex-direction: column; gap: 0.25rem; padding-block-start: 2rem; }
/* Group separators: a fixed 1px rule in every rail state. Text labels that
   appear only on expansion would shift the nav icons vertically, which the
   approved sidebar design forbids — icon positions must never move. */
.nav-label {
  display: block;
  block-size: 1px;
  margin: 14px 8px 10px;
  overflow: hidden;
  border: 0;
  color: transparent;
  background: var(--line);
  font-size: 0;
  line-height: 0;
}
.nav-label-spaced { margin-block-start: 1.55rem; }
.nav-link {
  display: flex;
  min-height: 42px;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 540;
  text-decoration: none;
  transition: background-color 140ms ease-out, color 140ms ease-out;
}
.nav-link svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.nav-link:hover { color: var(--ink); background: var(--surface-soft); }
/* Active destination: a solid carbon block (paper block in dark mode via
   the token remaps). */
.nav-link.is-active { color: var(--accent-contrast); background: var(--accent); font-weight: 650; }
.nav-link:focus-visible { outline-offset: 1px; }
/* Unread-count marker on nav links (notifications bell, and the Refills item
   on phones where the bell's nav slot is hidden). Square hazard plate — the
   alarm red is reserved for exactly this kind of real signal. */
.nav-link { position: relative; }
.nav-badge {
  position: absolute;
  top: 4px;
  inset-inline-end: 6px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 0;
  background: var(--hazard);
  color: #F4F4F0;
  font-size: 0.62rem;
  font-weight: 700;
  line-height: 16px;
  text-align: center;
}
/* The bell lives in the rail from 601px up; phones see the mirrored badge
   on the Refills tab instead (the bottom bar keeps its approved 5 slots). */
.nav-badge-refills { display: none; }
/* Staff notifications list */
.notification-list { display: grid; }
.notification-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.9rem 0.25rem;
  border-block-end: 1px solid var(--line);
}
.notification-row:last-child { border-block-end: 0; }
.notification-title { font-weight: 650; }
.notification-when { font-size: 0.75rem; }
.notification-row.is-unread .notification-title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 0;
  background: var(--hazard);
  margin-inline-end: 0.45rem;
}
.notification-actions { display: flex; gap: 0.5rem; align-items: center; flex-shrink: 0; }
.sidebar-footer {
  display: flex;
  min-height: 57px;
  align-items: center;
  gap: 0.65rem;
  margin-block-start: 1rem;
  padding: 0.7rem 0.35rem 0.1rem;
  border-block-start: 1px solid var(--line);
}
.sidebar-footer-mark {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 0;
  color: var(--bg);
  background: var(--ink);
  font-size: 0.72rem;
  font-weight: 750;
}
.sidebar-footer > span:nth-child(2) { display: grid; line-height: 1.3; }
.sidebar-footer strong { font-size: 0.77rem; font-weight: 650; }
.sidebar-footer small { margin-block-start: 0.16rem; color: var(--muted); font-size: 0.7rem; }
.online-indicator {
  width: 8px;
  height: 8px;
  margin-inline-start: auto;
  border-radius: 50%;
  background: var(--positive);
  box-shadow: 0 0 0 3px var(--positive-soft);
}
.dashboard-sidebar-actions { display: flex; flex-basis: 100%; justify-content: flex-end; gap: .75rem; margin-block-start: .25rem; font-size: .75rem; }
.dashboard-sidebar-actions a { color: var(--muted); text-decoration: none; }
.dashboard-sidebar-actions a:hover { color: var(--accent); text-decoration: underline; }
.dashboard-sidebar-actions form { margin: 0; }
.dashboard-sidebar-actions .signout-button { padding: 0; border: 0; color: var(--muted); background: transparent; font-size: inherit; }
.dashboard-sidebar-actions .signout-button:hover { color: var(--accent); text-decoration: underline; }

.app-main { min-height: 100vh; margin-inline-start: var(--sidebar-width); }
.topbar {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.75rem clamp(1.25rem, 3vw, 2.5rem);
  border-block-end: 1px solid var(--line);
  background: var(--surface);
}
.global-search {
  display: flex;
  width: min(100%, 440px);
  min-height: 41px;
  align-items: center;
  gap: 0.6rem;
  padding-inline: 0.7rem;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
}
.global-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgb(5 63 92 / 14%); }
.global-search svg { width: 17px; height: 17px; flex: 0 0 auto; fill: none; stroke: var(--muted); stroke-linecap: round; stroke-width: 1.8; }
.global-search input {
  width: 100%;
  min-width: 0;
  min-height: 37px;
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 0.84rem;
}
.global-search input:focus-visible { outline: 0; }
.global-search input::placeholder { color: var(--muted); opacity: 1; }
.global-search kbd { display: grid; width: 22px; height: 23px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line); border-radius: 5px; color: var(--muted); background: var(--surface); font-family: inherit; font-size: 0.72rem; }
.topbar-account { display: flex; align-items: center; gap: 0.65rem; }
.avatar { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--accent); background: var(--accent-soft); font-size: 0.77rem; font-weight: 700; }
.account-copy { display: grid; line-height: 1.3; }
.account-copy strong { max-width: 14ch; overflow: hidden; font-size: 0.8rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.account-copy small { margin-block-start: 0.16rem; color: var(--muted); font-size: 0.7rem; }
.topbar-account form { margin: 0; }
.signout-button { min-height: 38px; padding: 0.45rem 0.65rem; border: 0; border-radius: 7px; color: var(--muted); background: transparent; cursor: pointer; font-size: 0.8rem; }
.signout-button:hover { color: var(--ink); background: var(--surface-soft); }
.account-link { color: var(--muted); font-size: 0.78rem; text-decoration: none; white-space: nowrap; }
.account-link:hover { color: var(--accent); text-decoration: underline; }

.system-banner {
  display: flex;
  min-height: 39px;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem clamp(1.25rem, 3vw, 2.5rem);
  border-block-end: 1px solid var(--line);
  color: var(--muted);
  background: var(--surface-soft);
  font-size: 0.77rem;
}
.system-banner strong { font-weight: 700; }
.system-banner-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: currentColor; }
.system-banner-divider { width: 1px; height: 14px; margin-inline: 0.12rem; background: currentColor; opacity: 0.25; }
.system-banner-state { margin-inline-start: auto; font-weight: 600; }
.banner-fake { color: #1b6549; border-color: #d5e9dd; background: #f0f8f3; }
.banner-sandbox { color: #77500c; border-color: #f0e1bc; background: #fff8e8; }
.banner-production { color: #8d2832; border-color: #f0d0d3; background: #fff1f2; }
.banner-disabled { color: #455169; border-color: var(--line); background: var(--surface-soft); }

.container {
  width: min(100%, var(--content-max));
  margin-inline: auto;
  padding: clamp(1.7rem, 3vw, 2.65rem) clamp(1.25rem, 3vw, 2.5rem) 3rem;
}
/* Macro typography: page titles are heavy caps over a thick carbon rule;
   section and sheet labels drop to monospace micro-caps. Descriptive copy
   stays Inter at calm sizes. */
.container h1 { margin: 0 0 0.55rem; padding-block-end: 0.45rem; border-block-end: 3px solid var(--ink); font-size: clamp(1.65rem, 2.1vw, 2rem); font-weight: 900; letter-spacing: -0.02em; line-height: 1.2; text-transform: uppercase; }
.container h2 { margin: 0 0 0.65rem; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.35; text-transform: uppercase; }
.container h3 { margin: 1.45rem 0 0.6rem; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.4; text-transform: uppercase; }
.container p { max-width: 72ch; }
.container > p:first-of-type { margin-block: 0.3rem 1.4rem; }
.muted { color: var(--muted); font-size: 0.86rem; }
.quiet { color: var(--quiet); }
.container h1 + .muted { margin-block: 0.55rem 1.55rem; }
.container h1 + p:not(.muted) { margin-block: 0.45rem 1.45rem; }

/* Page heading: the title stays a heading; actions sit beside it. Composite
   heading rows carry the thick rule themselves, so their h1 drops its own. */
.page-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-block-end: 1.2rem;
  padding-block-end: 0.9rem;
  border-block-end: 3px solid var(--ink);
}
.page-heading h1 { margin: 0; padding-block-end: 0; border-block-end: 0; }
.page-heading .heading-meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; }
.page-heading .button { flex: 0 0 auto; }

/* Panels hold related records and controls; lists stay open and scannable. */
.card {
  margin-block: 1rem;
  padding: clamp(1rem, 2vw, 1.4rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: none;
}
.card > :last-child { margin-block-end: 0; }
.card > h2:first-child { margin-block-end: 1rem; }
.status-grid { display: grid; grid-template-columns: minmax(150px, 0.38fr) minmax(0, 1fr); gap: 0.6rem 1.25rem; margin: 0; }
.status-grid dt {
  color: var(--quiet);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.status-grid dd { min-width: 0; margin: 0; font-weight: 560; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* Inset surface for rendered message copy (template previews, message bodies).
   Patient-facing copy keeps its calm measure; only the frame goes industrial. */
.preview-box {
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--surface-soft);
  font-size: 0.92rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Buttons and links use the same clear hierarchy across the existing flows. */
.button, button:not(.link-button):not(.signout-button):not(.button-danger):not(.theme-toggle-button):not(.sign-in-button):not(.theme-segment) {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.52rem 0.9rem;
  border: 1px solid var(--accent);
  border-radius: 0;
  color: var(--accent-contrast);
  background: var(--accent);
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 640;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color 140ms ease-out, border-color 140ms ease-out, transform 140ms ease-out;
}
.button:hover, button:not(.link-button):not(.signout-button):not(.button-danger):not(.theme-toggle-button):not(.sign-in-button):not(.theme-segment):hover { border-color: var(--accent-hover); color: var(--accent-contrast); background: var(--accent-hover); }
button:not(.link-button):not(.signout-button):not(.theme-toggle-button):active, .button:active { transform: scale(0.98); }
button:disabled, button[disabled] { border-color: var(--line-strong); color: var(--quiet) !important; background: var(--surface-soft) !important; cursor: not-allowed; }
.button-secondary { border-color: var(--line-strong); color: var(--ink); background: var(--surface); }
.button-secondary:hover { border-color: var(--line-strong); color: var(--ink); background: var(--surface-soft); }
.button-danger { border-color: var(--negative); background: var(--negative); }
.button-danger:hover { border-color: #821f28; color: #fff; background: #821f28; }
.link-button {
  min-width: 40px;
  min-height: 40px;
  padding: 0.35rem 0.55rem;
  border: 0;
  border-radius: 0;
  color: var(--accent);
  background: transparent;
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 630;
  text-decoration: underline;
  text-underline-offset: 0.16em;
}
.link-button:hover { color: var(--accent-hover); background: var(--accent-soft); }
.link-button-danger { color: var(--negative); }
.link-button-danger:hover { color: #821f28; background: var(--negative-soft); }
.inline-form { display: flex; flex-wrap: wrap; align-items: end; gap: 0.65rem; margin: 0.65rem 0; }
.inline-form > p { min-width: min(100%, 13rem); margin: 0; }
.inline-form label { display: block; margin-block-end: 0.3rem; color: var(--muted); font-size: 0.8rem; font-weight: 600; }

/* Inputs keep Django's generated labels and validation text visible. */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea {
  min-height: 42px;
  padding: 0.58rem 0.72rem;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  color: var(--ink);
  background: var(--surface);
  font-size: 0.88rem;
  line-height: 1.35;
}
textarea { min-height: 112px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--quiet); opacity: 1; }
input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--accent); vertical-align: middle; }
input[type="file"] { max-width: 100%; min-height: 40px; padding: 0.35rem; border: 1px solid var(--line-strong); border-radius: 0; color: var(--ink); background: var(--surface); }
input[type="file"]::file-selector-button { min-height: 30px; margin-inline-end: 0.65rem; padding: 0.2rem 0.55rem; border: 1px solid var(--line); border-radius: 0; color: var(--ink); background: var(--surface-soft); cursor: pointer; }
input:focus, select:focus, textarea:focus { border-color: var(--line-strong); outline: 2px solid var(--ink); outline-offset: 1px; box-shadow: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
label { color: var(--muted); font-size: 0.84rem; font-weight: 590; }
form p { margin-block: 0.9rem; }
form p label { display: block; margin-block-end: 0.3rem; }
form p input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
form p select, form p textarea { width: 100%; max-width: 100%; }
form p .helptext, .helptext { display: block; margin-block-start: 0.25rem; color: var(--muted); font-size: 0.78rem; }
.errorlist { margin: 0.3rem 0; padding-inline-start: 1.15rem; color: var(--negative); font-size: 0.82rem; }
.has-error input, input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--negative); }

/* Search and filters remain useful at compact widths. */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.65rem;
  margin-block: 1.1rem 1.3rem;
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}
.filter-bar .filter-field { display: grid; min-width: 145px; flex: 1 1 145px; gap: 0.3rem; }
.filter-bar .filter-field input, .filter-bar .filter-field select { min-width: 0; min-height: 40px; width: 100%; }
.filter-bar .filter-field-q { flex-basis: 210px; }
.filter-bar button { min-height: 40px; }
.filter-bar .muted { align-self: center; flex: 1 1 220px; }

/* Native tables keep their semantics, with a local scroll boundary on narrow
   screens. Headers are monospace micro-caps over a strong rule — the print
   sheet look; data columns that hold machine output go mono below. */
.table-wrap { width: 100%; max-width: 100%; margin-block: 0.6rem; overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
table { width: 100%; border-collapse: separate; border-spacing: 0; color: var(--ink); font-size: 0.84rem; line-height: 1.45; }
th, td { padding: 0.78rem 0.8rem; border-block-end: 1px solid var(--line); text-align: start; vertical-align: top; }
th {
  color: var(--ink);
  background: var(--surface-soft);
  border-block-end: 2px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}
thead th:first-child { border-start-start-radius: 0; }
thead th:last-child { border-start-end-radius: 0; }
tbody tr:last-child td { border-block-end: 0; }
tbody tr:hover { background: var(--surface-soft); }
td a { font-weight: 590; }
td code, code { padding: 0.16rem 0.38rem; border: 1px solid var(--line); border-radius: 0; color: var(--muted); background: var(--surface-soft); font-family: var(--font-mono); font-size: 0.72rem; overflow-wrap: anywhere; }
td .inline-form { margin: -0.3rem 0; }

/* Status uses readable words as well as color; badges are square monospace
   plates and the status ink carries the border, not a pastel fill. */
.ok, .bad, .warn { display: inline-flex; align-items: center; gap: 0.28rem; font-weight: 640; }
.ok { color: var(--positive); }
.bad { color: var(--negative); }
.warn { color: var(--warning); }
.badge {
  display: inline-flex;
  min-height: 22px;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  color: var(--ink);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.15;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge-ok { border-color: var(--positive); color: var(--positive); background: var(--positive-soft); }
.badge-bad, .badge-inactive { border-color: var(--negative); color: var(--negative); background: var(--negative-soft); }
.badge-due { border-color: var(--warning); color: var(--warning); background: var(--warning-soft); }
.badge-muted { color: var(--muted); background: var(--surface-soft); }
/* Provider-accepted: neither good nor bad — a carbon outline, visibly not
   "delivered" green. */
.badge-sent { border-color: var(--line-strong); color: var(--ink); background: var(--surface-soft); }
/* Unknown-outcome reconciliation path on the message detail page: the one
   boxed alarm on detail sheets. */
.reconcile-panel {
  margin-block-start: 0.9rem;
  padding: 0.9rem 1rem;
  border: 2px solid var(--line-strong);
  border-radius: 0;
  background: var(--warning-soft);
}
.reconcile-panel h3 { margin-block: 0 0.4rem; }

/* Messages, pagination, cards, and summary rows. */
.messages { display: grid; gap: 0.55rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.messages li { padding: 0.7rem 0.85rem; border: 1px solid var(--positive); border-radius: 0; color: var(--positive); background: var(--positive-soft); font-size: 0.86rem; }
.messages li.error { border-color: var(--negative); color: var(--negative); background: var(--negative-soft); }
.messages li.warning { border-color: var(--warning); color: var(--warning); background: var(--warning-soft); }
@media (prefers-reduced-motion: no-preference) {
  .messages li { animation: message-in 240ms cubic-bezier(0.2, 0, 0, 1) backwards; }
  .messages li:nth-child(2) { animation-delay: 40ms; }
  .messages li:nth-child(3) { animation-delay: 80ms; }
}
@keyframes message-in {
  from { opacity: 0; transform: translateY(-4px); }
}
.pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; margin-block: 1.25rem; color: var(--muted); font-size: 0.82rem; }
.pagination a { display: inline-flex; min-height: 36px; align-items: center; padding: 0.4rem 0.65rem; border: 1px solid var(--line); border-radius: 0; background: var(--surface); font-weight: 600; text-decoration: none; }
.pagination a:hover { border-color: var(--accent); background: var(--accent-soft); }
.container ul, .container ol { padding-inline-start: 1.35rem; }
.container li { margin-block: 0.25rem; }
.app-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem clamp(1.25rem, 3vw, 2.5rem) 1.35rem; border-block-start: 1px solid var(--line); color: var(--muted); font-size: 0.73rem; }

/* A single restrained dashboard layout: current work first, system details below. */
.dashboard-intro { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-block-end: 1.45rem; }
.dashboard-intro p { margin: 0.4rem 0 0; color: var(--muted); }
.dashboard-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.work-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.85fr); align-items: start; gap: 1rem; }
.work-panel { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.work-panel-header { display: flex; min-height: 70px; align-items: center; justify-content: space-between; gap: 0.8rem; padding: 0.85rem 1rem; border-block-end: 1px solid var(--line); }
.work-panel-header h2 { margin: 0; font-size: 0.98rem; }
.work-panel-header p { margin: 0.18rem 0 0; color: var(--muted); font-size: 0.76rem; }
.work-panel-header > a { flex: 0 0 auto; font-size: 0.79rem; font-weight: 620; text-decoration: none; }
.count-chip {
  display: inline-grid;
  min-width: 38px;
  min-height: 38px;
  place-items: center;
  padding-inline: 0.5rem;
  border: 1px solid var(--line-strong);
  border-radius: 0;
  color: var(--ink);
  background: var(--surface);
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.work-list { margin: 0; padding: 0; list-style: none; }
.work-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.8rem; padding: 0.82rem 1rem; border-block-end: 1px solid var(--line); }
.work-row:last-child { border-block-end: 0; }
.work-row:hover { background: var(--surface-soft); }
.work-row-main { display: grid; min-width: 0; gap: 0.18rem; }
.work-row-title { overflow: hidden; color: var(--ink); font-size: 0.86rem; font-weight: 640; text-overflow: ellipsis; white-space: nowrap; }
.work-row-title a { color: inherit; text-decoration: none; }
.work-row-title a:hover { color: var(--accent); text-decoration: underline; }
.work-row-meta { display: flex; flex-wrap: wrap; gap: 0.22rem 0.55rem; color: var(--muted); font-size: 0.75rem; }
.work-row-date { color: var(--ink); font-family: var(--font-mono); font-size: 0.72rem; font-variant-numeric: tabular-nums; font-weight: 400; white-space: nowrap; }
.empty-state { padding: 1.4rem 1rem; color: var(--muted); font-size: 0.84rem; }
.empty-state strong { display: block; margin-block-end: 0.22rem; color: var(--ink); font-weight: 650; }
.system-details { margin-block-start: 1rem; }
.system-details .card { margin-block: 0; }
.system-details-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; margin-block-start: 1rem; }
.home-sends { margin-block-start: 1rem; }

/* Sign-in, recovery, and focused create/edit forms share one quiet surface. */
.auth-layout { display: flex; min-height: 100vh; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1rem; }
.auth-content { width: min(100%, 480px); }
.auth-brand { margin-block-end: 1.15rem; }
.auth-status { margin-block-end: 1.2rem; color: var(--muted); font-size: 0.76rem; }
.auth-card { width: min(100%, 480px); margin-inline: auto; padding: clamp(1.35rem, 4vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-panel); }
.auth-card h1 { margin: 0 0 0.65rem; font-size: 1.55rem; letter-spacing: -0.03em; line-height: 1.25; }
.auth-card > p { margin-block: 0.45rem 1rem; color: var(--muted); font-size: 0.88rem; }
.auth-card label { display: block; margin-block-end: 0.3rem; }
.auth-card button, .auth-card .button { width: 100%; margin-block-start: 0.35rem; }
.auth-card form > a { display: inline-flex; align-items: center; min-height: 40px; margin-inline-start: 0.4rem; }
.auth-card .messages { margin-block-end: 0.8rem; }
.auth-card .helptext, .auth-card .errorlist { font-size: 0.78rem; }
.auth-footer { margin-block-start: 1.2rem; color: var(--quiet); font-size: 0.74rem; text-align: center; }
.auth-content > .messages { width: 100%; }

@media (max-width: 1120px) {
  .work-grid { grid-template-columns: minmax(0, 1fr) minmax(270px, 0.85fr); }
}

@media (max-width: 860px) {
  :root { --sidebar-width: 0px; }
  .sidebar { position: static; width: auto; padding: 0.85rem 1rem 0.65rem; border-inline-end: 0; border-block-end: 1px solid var(--line); }
  .brand { min-height: 42px; }
  .primary-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.2rem; padding-block-start: 0.8rem; }
  .nav-label { grid-column: 1 / -1; margin-block-start: 0.65rem; }
  .nav-label-spaced { margin-block-start: 0.8rem; }
  .nav-link { min-width: 0; }
  .sidebar-footer { display: none; }
  .app-main { margin-inline-start: 0; }
  .work-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  body { font-size: 0.9rem; }
  .topbar { flex-wrap: wrap; gap: 0.55rem; padding: 0.7rem 1rem; }
  .global-search { width: 100%; order: 2; }
  .topbar-account { width: 100%; justify-content: flex-end; order: 1; }
  .account-copy { margin-inline-end: auto; }
  .system-banner { flex-wrap: wrap; gap: 0.4rem; padding-inline: 1rem; }
  .system-banner-state { margin-inline-start: 0; }
  .container { padding: 1.35rem 1rem 2rem; }
  .container h1 { font-size: 1.55rem; }
  .primary-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nav-link { min-height: 42px; padding-inline: 0.55rem; font-size: 0.82rem; }
  .dashboard-intro { align-items: start; }
  .dashboard-actions { width: 100%; }
  .dashboard-actions .button { flex: 1 1 auto; }
  .work-row { grid-template-columns: minmax(0, 1fr); gap: 0.42rem; }
  .work-row-date { justify-self: start; }
  .filter-bar { align-items: stretch; }
  .filter-bar .filter-field { flex-basis: calc(50% - 0.4rem); }
  .filter-bar button { flex: 1 1 auto; }
  .status-grid { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .status-grid dt { margin-block-start: 0.6rem; font-size: 0.78rem; }
  .status-grid dt:first-child { margin-block-start: 0; }
  .app-footer { flex-wrap: wrap; padding-inline: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

@media (forced-colors: active) {
  :focus-visible { outline: 2px solid Highlight; }
  .nav-link.is-active, .badge, .system-banner, .brand-mark { forced-color-adjust: auto; }
}

/* The dashboard keeps the compact overview from the product design: the shell
   hides the topbar/banner/footer and leads with KPIs; colors are shared tokens. */
.dashboard-shell .sidebar-footer { position: relative; flex-wrap: wrap; padding: 1rem 0 0; }
.dashboard-shell .sidebar-footer > span:nth-child(2) { flex: 1; min-width: 0; }
.dashboard-shell .app-main { margin-inline-start: var(--sidebar-width); }
.dashboard-shell .topbar, .dashboard-shell .system-banner, .dashboard-shell .app-footer { display: none; }
.dashboard-shell .container { width: 100%; max-width: none; padding: 2rem; }
.dashboard-page { display: grid; gap: 1rem; width: 100%; }
.dashboard-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 58px; margin-block-end: 0.25rem; padding-block-end: 0.9rem; border-block-end: 3px solid var(--ink); }
.dashboard-heading h1 { margin: 0; padding-block-end: 0; border-block-end: 0; color: var(--ink); font-size: 1.5rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1.25; text-transform: uppercase; }
.dashboard-heading p { margin: .2rem 0 0; color: var(--muted); font-size: .86rem; }
/* Mode chip: monospaced state plate (sandbox/simulated/disabled truth). */
.dashboard-mode { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .65rem; border: 1px solid var(--line-strong); border-radius: 0; color: var(--ink); background: var(--surface); font-family: var(--font-mono); font-size: .66rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap; }
.dashboard-mode > svg { width: 8px; height: 8px; flex: 0 0 auto; }
.dashboard-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.dashboard-kpi, .dashboard-card { min-width: 0; border: 1px solid var(--line); border-radius: 0; background: var(--surface); }
.dashboard-kpi { min-height: 122px; padding: 1rem 1.1rem; }
.dashboard-kpi-label { display: flex; align-items: center; justify-content: space-between; gap: .6rem; color: var(--quiet); font-family: var(--font-mono); font-size: .66rem; font-weight: 400; letter-spacing: 0.09em; text-transform: uppercase; }
.dashboard-kpi-label > span { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid var(--line-strong); border-radius: 0; color: var(--accent); background: var(--surface); }
.dashboard-kpi-label > span > svg { width: 16px; height: 16px; }
.dashboard-kpi > strong { display: block; margin-block-start: .25rem; color: var(--ink); font-size: 2.4rem; line-height: 1; font-weight: 900; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.dashboard-kpi > small { display: block; margin-block-start: .45rem; color: var(--quiet); font-family: var(--font-mono); font-size: .6rem; font-weight: 400; letter-spacing: 0.07em; line-height: 1.5; text-transform: uppercase; }
.dashboard-overview-grid { display: grid; grid-template-columns: minmax(0, 1.47fr) minmax(300px, 1fr); align-items: start; gap: 1rem; }
.dashboard-card { padding: 1rem 1.25rem; }
.volume-card { min-height: 282px; }
.activity-card { min-height: 240px; }
.dashboard-card-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.dashboard-card-heading h2, .dashboard-section-heading h2 { margin: 0; color: var(--ink); font-family: var(--font-mono); font-size: .78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.dashboard-card-heading p, .dashboard-section-heading p { margin: .18rem 0 0; color: var(--muted); font-size: .75rem; }
/* Major section headers ("Needs attention now") stay Inter heavy caps. */
.dashboard-section-heading h2 { font-family: Inter, "Segoe UI", system-ui, sans-serif; font-size: 1.02rem; font-weight: 900; letter-spacing: -0.01em; }
.volume-chart { display: grid; height: 190px; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .65rem; margin-block-start: 1.1rem; }
.volume-day { display: grid; min-width: 0; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: stretch; text-align: center; }
.volume-value { color: var(--quiet); font-family: var(--font-mono); font-size: .72rem; font-variant-numeric: tabular-nums; line-height: 1.3; }
.volume-track { display: flex; align-items: flex-end; border-block-end: 1px solid var(--line); }
.volume-bar { display: block; width: 100%; min-height: 4px; border-radius: 0; background: var(--ink); }
.volume-label { padding-block-start: .2rem; color: var(--quiet); font-family: var(--font-mono); font-size: .72rem; line-height: 1.3; }
.dashboard-activity-list { display: grid; gap: .8rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.dashboard-activity-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: start; gap: .55rem; }
.activity-icon { display: grid; width: 24px; height: 24px; flex: 0 0 auto; place-items: center; border: 1px solid var(--line-strong); border-radius: 0; color: var(--accent); background: var(--surface); }
.activity-icon svg { width: 12px; height: 12px; }
.activity-copy { min-width: 0; }
.activity-title { overflow: hidden; color: var(--ink); font-size: .8rem; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.activity-copy p { overflow: hidden; margin: .12rem 0 0; color: var(--muted); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-activity-list time { padding-block-start: .08rem; color: var(--quiet); font-family: var(--font-mono); font-size: .72rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dashboard-empty { display: grid; min-height: 150px; place-items: center; color: var(--muted); font-size: .8rem; text-align: center; }
.dashboard-sandbox { display: flex; align-items: flex-start; gap: .7rem; padding: 1rem 1.1rem; border: 2px solid var(--line-strong); border-radius: 0; color: var(--warning); background: var(--warning-soft); }
.sandbox-icon { display: block; width: 20px; height: 20px; flex: 0 0 auto; margin-block-start: .05rem; color: var(--warning); }
.sandbox-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.dashboard-sandbox strong { display: block; color: var(--warning); font-family: var(--font-mono); font-size: .72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.dashboard-sandbox p { margin: .3rem 0 0; color: var(--muted); font-size: .75rem; }
.dashboard-work { display: grid; gap: .8rem; }
.dashboard-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.dashboard-section-heading h2 { font-size: 1.05rem; }
.dashboard-actions { margin: 0; }
.dashboard-shell .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dashboard-shell .system-details { margin-block-start: 0; }

@media (max-width: 1050px) {
  .dashboard-overview-grid { grid-template-columns: minmax(0, 1.15fr) minmax(270px, 1fr); }
}
@media (max-width: 860px) {
  .dashboard-shell .app-main { margin-inline-start: 0; }
  .dashboard-shell .container { padding: 1.35rem 1rem 2rem; }
  .dashboard-overview-grid { grid-template-columns: 1fr; }
  .dashboard-shell .work-grid { grid-template-columns: 1fr; }
  .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-heading, .dashboard-section-heading { align-items: flex-start; }
}
/* Tablet band only (601-860): the dashboard uses desktop-like density —
   work panels side-by-side, and volume/activity side-by-side at the
   <=1050 desktop tightening (1.15fr / 270px floor). Below 640px of
   viewport the 7-day chart cannot fit beside a 270px activity card
   (it starves to an unreadable ~200px), so the overview keeps its
   stack there while the work grid stays two-column. KPIs stay 2x2
   (four-across would be too tight); the generic .work-grid keeps its
   <=860 collapse for any non-dashboard use. */
@media (min-width: 601px) and (max-width: 860px) {
  .dashboard-shell .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-overview-grid { grid-template-columns: minmax(0, 1.15fr) minmax(270px, 1fr); }
}
@media (min-width: 601px) and (max-width: 639px) {
  .dashboard-overview-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .dashboard-heading, .dashboard-section-heading { flex-direction: column; }
  .dashboard-heading h1 { font-size: 1.3rem; }
  .dashboard-kpis { gap: .55rem; }
  .dashboard-kpi { min-height: 112px; padding: .8rem; }
  .dashboard-kpi-label { font-size: .62rem; }
  .dashboard-kpi-label > span { width: 26px; height: 26px; }
  .dashboard-kpi > strong { font-size: 1.85rem; }
  .volume-chart { gap: .35rem; }
  .dashboard-actions { width: 100%; }
  .dashboard-actions .button { flex: 1 1 auto; }
}

/* RxReach layouts shared by the desktop, tablet, and mobile design frames. */
:root { --sidebar-width: 64px; }
.sidebar {
  width: var(--sidebar-width);
  align-items: center;
  padding: 1.35rem 8px 1rem;
}
.brand { width: 48px; justify-content: center; padding: 0; }
.brand-mark { width: 40px; height: 40px; border-radius: 10px; }
.brand-copy, .nav-link > span:not(.nav-badge), .sidebar-footer > span:nth-child(2), .online-indicator { display: none; }
.primary-nav { width: 100%; gap: 8px; padding-block-start: 24px; overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.nav-link { min-height: 44px; justify-content: center; padding: 10px; }
.nav-link svg { width: 20px; height: 20px; }
.sidebar-footer { justify-content: center; width: 100%; padding-inline: 0; flex-shrink: 0; }
.sidebar-footer-mark { width: 40px; height: 40px; border-radius: 0; }
.sidebar-account { position: relative; width: 40px; flex: 0 0 40px; }
.sidebar-account > summary { list-style: none; cursor: pointer; }
.sidebar-account > summary::-webkit-details-marker { display: none; }
.sidebar-account-menu {
  position: absolute;
  z-index: 40;
  inset: auto auto 0 calc(100% + 12px);
  display: grid;
  min-width: 190px;
  gap: 8px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
  font-size: 0.82rem;
}
.sidebar-account-menu strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-account-menu small { margin-block-start: -6px; color: var(--muted); }
.sidebar-account-menu a { color: var(--accent); text-decoration: none; }
.sidebar-account-menu form { margin: 0; }
.sidebar-account-menu .signout-button { padding: 0; border: 0; color: var(--negative); background: transparent; font-size: inherit; }
@media (prefers-reduced-motion: no-preference) {
  .sidebar-account[open] .sidebar-account-menu {
    animation: menu-in 160ms cubic-bezier(0.2, 0, 0, 1);
    transform-origin: 0 100%;
  }
}
@keyframes menu-in {
  from { opacity: 0; transform: scale(0.96); }
}
.app-main { margin-inline-start: var(--sidebar-width); }
.topbar, .system-banner, .app-footer { display: none; }
.container { width: 100%; max-width: 1480px; margin-inline: auto; padding: 24px 30px 40px; }
.dashboard-shell .container { padding: 24px 30px 40px; }
.dashboard-shell .sidebar-footer { flex-wrap: nowrap; padding: 0; }
.dashboard-shell .sidebar-footer-mark { margin-inline: auto; }
.dashboard-shell .dashboard-sidebar-actions { display: none; }

/* Dark themes are the theme's tactical sibling: warm charcoal substrate,
   phosphor inks, same hazard red (brightened for the darker ground). The
   remaps only swap token values — component rules consume the tokens, so
   they restyle with the redefinition in both blocks. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
    color-scheme: dark;
    --ink: #EDECE6;
    --muted: #B9B7AC;
    --quiet: #8B897E;
    --line: #3E3C35;
    --line-strong: #8A887D;
    --bg: #0F0F0E;
    --surface: #161614;
    --surface-soft: #23231F;
    --accent: #EDECE6;
    --accent-hover: #FFFFFF;
    --accent-soft: #2A2A26;
    --accent-contrast: #141310;
    --hazard: #FF2A2A;
    --positive: #4CC97A;
    --positive-soft: #16241A;
    --negative: #F08A8A;
    --negative-soft: #2A1717;
    --warning: #E8B84B;
    --warning-soft: #2A2314;
  }
:root:not([data-theme="light"]) input,
:root:not([data-theme="light"]) select,
:root:not([data-theme="light"]) textarea { background: var(--bg); }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --ink: #EDECE6;
    --muted: #B9B7AC;
    --quiet: #8B897E;
    --line: #3E3C35;
    --line-strong: #8A887D;
    --bg: #0F0F0E;
    --surface: #161614;
    --surface-soft: #23231F;
    --accent: #EDECE6;
    --accent-hover: #FFFFFF;
    --accent-soft: #2A2A26;
    --accent-contrast: #141310;
    --hazard: #FF2A2A;
    --positive: #4CC97A;
    --positive-soft: #16241A;
    --negative: #F08A8A;
    --negative-soft: #2A1717;
    --warning: #E8B84B;
    --warning-soft: #2A2314;
  }
:root[data-theme="dark"] input,
:root[data-theme="dark"] select,
:root[data-theme="dark"] textarea { background: var(--bg); }

@media (min-width: 601px) and (max-width: 860px) {
  :root { --sidebar-width: 64px; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 64px; padding: 1rem 8px; border-inline-end: 1px solid var(--line); border-block-end: 0; }
  .primary-nav { display: flex; flex-direction: column; padding-block-start: 20px; }
  .nav-link { width: 100%; }
  .sidebar-footer { display: flex; }
  .app-main { margin-inline-start: 64px; }
  .dashboard-shell .app-main { margin-inline-start: 64px; }
  .container, .dashboard-shell .container { padding: 22px 20px 36px; }
}

@media (max-width: 600px) {
  body { font-size: 0.875rem; }
  .app-shell { padding-block-end: calc(78px + env(safe-area-inset-bottom)); }
  .sidebar {
    position: fixed;
    z-index: 30;
    inset: auto 0 0;
    display: block;
    width: 100%;
    height: calc(74px + env(safe-area-inset-bottom));
    padding: 6px 8px calc(8px + env(safe-area-inset-bottom));
    border: 0;
    border-block-start: 1px solid var(--line);
    background: var(--surface);
  }
  .brand, .sidebar-footer, .nav-label { display: none; }
  .primary-nav {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: 2px;
    padding: 0;
  }
  .nav-link {
    display: flex;
    min-width: 0;
    min-height: 58px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 5px 2px;
    border-radius: 9px;
    color: var(--quiet);
    font-size: 10px;
    font-weight: 500;
  }
  .nav-link > span:not(.nav-badge) { display: block; overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
  .nav-link svg { width: 24px; height: 24px; }
  .nav-link.is-active { color: var(--accent); background: var(--accent-soft); box-shadow: none; }
  .nav-link.is-mobile-active { color: var(--accent); background: var(--accent-soft); }
  .nav-link:nth-of-type(1) { order: 1; }
  .nav-link:nth-of-type(2) { order: 2; }
  .nav-link:nth-of-type(3) { order: 3; }
  /* 4 Templates, 5 Messages, 7 Notifications, 9 Staff accounts, 10 Audit
     trail stay out of the 5-slot bar; phones reach notifications via the
     mirrored badge on the Refills tab. */
  .nav-link:nth-of-type(4), .nav-link:nth-of-type(5), .nav-link:nth-of-type(7), .nav-link:nth-of-type(9), .nav-link:nth-of-type(10) { display: none; }
  .nav-link:nth-of-type(6) { order: 4; }
  .nav-link:nth-of-type(8) { order: 5; }
  .nav-badge-refills { display: block; }
  .app-main { margin-inline-start: 0; }
  .dashboard-shell .app-main { margin-inline-start: 0; }
  .container, .dashboard-shell .container { padding: 18px 16px 30px; }
  .container h1 { margin-block-end: 0.35rem; font-size: 1.25rem; line-height: 1.25; }
  .container > p:first-of-type { margin-block: 0.25rem 1rem; }
  .dashboard-heading { align-items: flex-start; }
  .dashboard-heading h1 { font-size: 1.25rem; }
  .dashboard-mode { font-size: 0.65rem; }
  .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-kpi { min-height: 104px; padding: 0.8rem; }
  .dashboard-kpi > strong { font-size: 1.35rem; }
  .dashboard-overview-grid { grid-template-columns: 1fr; }
  .filter-bar { gap: 0.55rem; }
  .filter-field, .filter-field-q { flex: 1 1 100%; }
  .table-wrap { margin-inline: 0; border: 0; overflow-x: auto; }
  .table-wrap table { min-width: 620px; }
  .pagination { justify-content: center; flex-wrap: wrap; }
  .auth-layout { min-height: 100svh; padding: 1rem; }
  .auth-brand { display: none; }
}

@media (max-width: 600px) {
  .filter-bar .filter-field, .filter-bar .filter-field-q { flex: 1 1 100%; }
  .filter-bar .filter-field:not(.filter-field-q) { flex-basis: calc(50% - 0.3rem); }
  .filter-bar .filter-field-q { flex-basis: 100%; }
  .filter-bar { padding: 0; border: 0; background: transparent; }
  .advanced-patient-filters { flex: 1 1 100%; }
  .advanced-patient-filters summary { padding: 0.35rem 0; color: var(--accent-hover); cursor: pointer; font-size: 0.82rem; }
  .advanced-patient-filter-fields { display: flex; flex-wrap: wrap; gap: 0.55rem; padding-block: 0.4rem; }
  .page-actions .secondary-action { display: none; }
  .patient-table { display: none; }
  .mobile-patient-list { display: grid; gap: 10px; margin-block-start: 12px; }
  .mobile-patient-card {
    display: grid;
    gap: 10px;
    padding: 14px 15px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--surface);
  }
  .patient-card-heading, .patient-card-footer { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
  .patient-card-heading > div { display: grid; min-width: 0; gap: 2px; }
  .patient-card-heading strong { color: var(--ink); font-size: 0.9rem; }
  .patient-card-meta { color: var(--muted); font-size: 0.75rem; }
  .patient-card-footer { align-items: center; }
  .patient-card-tags { display: flex; flex-wrap: wrap; gap: 4px; }
  .patient-card-tags .badge { min-height: 20px; padding: 0.12rem 0.45rem; border-color: transparent; color: var(--accent-hover); background: var(--accent-soft); }
  .patient-card-footer > a { flex: 0 0 auto; color: var(--accent-hover); font-weight: 650; text-decoration: none; }
  .mobile-pagination-count { display: block; width: 100%; text-align: center; }
  .pagination-count { display: none; }
  .mobile-patient-card .badge { font-size: 0.65rem; }
  .mobile-card-table { min-width: 0 !important; width: 100%; border-collapse: separate; border-spacing: 0; }
  .mobile-card-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .mobile-card-table tbody { display: grid; gap: 10px; }
  .mobile-card-table tbody tr {
    display: grid;
    gap: 7px 12px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--surface);
  }
  .mobile-card-table tbody td {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 0;
    border: 0;
    color: var(--muted);
    font-size: 0.78rem;
    text-align: end;
  }
  .mobile-card-table tbody td::before {
    flex: 0 0 auto;
    color: var(--quiet);
    content: attr(data-label);
    font-size: 0.72rem;
    text-align: start;
  }
  .mobile-card-table tbody td:first-child { color: var(--ink); font-size: 0.9rem; font-weight: 650; }
  .mobile-card-table tbody td:first-child::before { color: var(--ink); font-size: 0.9rem; font-weight: 650; }
  .mobile-card-table tbody td:last-child { flex-wrap: wrap; }
  .mobile-card-table tbody td[colspan] { display: block; color: var(--muted); text-align: start; }
  .mobile-card-table tbody td[colspan]::before { content: none; }
  .mobile-card-table .inline-form { display: inline-flex; }
  .page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .page-actions > * { margin: 0; }
}

@media (min-width: 601px) {
  .mobile-patient-list, .mobile-pagination-count { display: none; }
}

/* The "More filters" accordion expands smoothly where details content can be
   animated (Chromium 131+); elsewhere it snaps open as before. */
@media (prefers-reduced-motion: no-preference) {
  .advanced-patient-filters::details-content {
    block-size: 0;
    opacity: 0;
    overflow-y: clip;
    transition:
      block-size 200ms cubic-bezier(0.2, 0, 0, 1),
      content-visibility 200ms allow-discrete,
      opacity 200ms ease-out;
  }
  .advanced-patient-filters[open]::details-content { block-size: auto; opacity: 1; }
  @starting-style {
    .advanced-patient-filters[open]::details-content { opacity: 0; }
  }
}

.auth-layout {
  position: relative;
  isolation: isolate;
  color: #EDECE6;
  background: #0F0F0E url("../img/rxreach-login-background.04307f914ab0.jpeg") center 43% / cover no-repeat;
}
.auth-layout::before { position: absolute; z-index: -1; inset: 0; background: rgb(10 10 9 / 82%); content: ""; }
.auth-layout > * { position: relative; z-index: 1; }
.auth-brand { display: none; }
.auth-content { width: min(100%, 430px); }
/* Auth pages (sign-in, recovery) stay visually dark in every theme: fixed
   charcoal literals, square card, sharp rules — the tactical face of the
   same theme. Every rule below is scoped under .auth-layout: the .auth-card
   class is shared with in-app form sheets (template/campaign/patient/staff
   forms, confirm pages), which follow the active theme's tokens instead. */
.auth-layout .auth-card {
  width: 100%;
  padding: clamp(1.35rem, 4vw, 2rem);
  border-color: #3E3C35;
  border-radius: 0;
  color: #EDECE6;
  background: rgb(15 15 14 / 94%);
  box-shadow: none;
}
@media (prefers-reduced-motion: no-preference) {
  .auth-layout .auth-card { animation: auth-card-in 320ms cubic-bezier(0.2, 0, 0, 1) backwards; }
}
@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
}
.login-brand { display: grid; justify-items: center; gap: 8px; margin-block-end: 24px; text-align: center; }
.login-brand .brand-mark { width: 48px; height: 48px; margin-block-end: 7px; border-radius: 13px; }
.login-brand h1 { margin: 0; color: #EDECE6; font-size: 1.5rem; letter-spacing: -0.025em; font-weight: 700; font-family: "Architype Bayer", Inter, "Segoe UI", system-ui, sans-serif; }
/* Auth pages are visually dark in every theme: always the light-stroke logo. */
.auth-layout .brand-mark .brand-logo-light { display: none; }
.auth-layout .brand-mark .brand-logo-dark { display: block; }
.login-brand p { margin: 0; color: #B9B7AC; font-size: 0.84rem; }
/* The auth card is dark in every theme, so links and focus rings need the
   light ink — the global accent/ink resolve near-black in light mode and
   would vanish on it (the in-app sheets inherit the themed defaults). */
.auth-layout .auth-card a { color: #B9B7AC; }
.auth-layout .auth-card a:hover { color: #EDECE6; }
.auth-layout :focus-visible { outline-color: #EDECE6; }
.auth-layout input:focus,
.auth-layout select:focus,
.auth-layout textarea:focus { outline-color: #EDECE6; }
.auth-layout .auth-card form { display: grid; gap: 14px; padding-block-start: 22px; border-block-start: 1px solid #3E3C35; }
.auth-layout .auth-card form > p { margin: 0; }
.auth-layout .auth-card label { margin-block-end: 6px; color: #8B897E; font-size: 0.7rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; }
/* The :not() chain mirrors the base input rule so this override outranks it:
   the base selector carries three :not([type]) clauses, i.e. (0,3,1) — a
   plain `.auth-layout .auth-card input` (0,2,1) would lose and the sign-in
   fields would fall back to the themed paper surface. */
.auth-layout .auth-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.auth-layout .auth-card select,
.auth-layout .auth-card textarea { width: 100%; min-height: 44px; color: #EDECE6; border-color: #3E3C35; background: #0F0F0E; }
.auth-layout .auth-card input::placeholder,
.auth-layout .auth-card textarea::placeholder { color: #8B897E; }
.password-field { position: relative; display: block; }
.password-field input { padding-inline-end: 48px; }
.auth-card .password-field > button.password-visibility-button {
  position: absolute;
  inset: 50% 4px auto auto;
  display: grid;
  width: 36px;
  min-height: 36px;
  margin: 0;
  padding: 0;
  transform: translateY(-50%);
  place-items: center;
  border: 0;
  color: var(--quiet);
  background: transparent;
}
.auth-card .password-field > button.password-visibility-button:hover { border: 0; color: var(--ink); background: transparent; box-shadow: none; }
.auth-layout .auth-card .password-field > button.password-visibility-button { color: #8B897E; }
.auth-layout .auth-card .password-field > button.password-visibility-button:hover { color: #EDECE6; }
.password-visibility-button img { display: block; width: 18px; height: 18px; }
/* Sign-in CTA: the inverted plate — substrate ink on phosphor. */
.auth-layout .auth-card button { min-height: 44px; margin-block-start: 8px; border-color: #EDECE6; color: #141310; background: #EDECE6; }
.auth-layout .auth-card button:hover { border-color: #FFFFFF; color: #141310; background: #FFFFFF; }
.password-label-row { display: flex; align-items: center; justify-content: space-between; }
.auth-layout .password-label-row > a { margin-block-end: 6px; color: #B9B7AC; font-size: 0.75rem; text-decoration: none; }
.auth-layout .auth-status {
  position: fixed;
  inset: auto auto 24px 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 7px 12px;
  border: 1px solid #3E3C35;
  border-radius: 0;
  color: #E8B84B;
  background: rgb(15 15 14 / 94%);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}
.auth-layout .auth-status::before { margin-inline-end: 7px; color: #E8B84B; content: "●"; font-size: 0.62rem; }
.auth-layout .auth-footer { position: relative; z-index: 1; color: #8B897E; }
@media (max-width: 600px) {
  .auth-layout { min-height: 100svh; justify-content: center; padding: 1rem 1.5rem; background-position: 43% center; }
  .auth-content { width: 100%; }
  .auth-layout .auth-card { padding: 24px; }
  .auth-layout .auth-status { bottom: 26px; }
  .auth-layout .auth-footer { display: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .nav-link { transition: color 140ms ease, background-color 140ms ease, box-shadow 140ms ease; }
}


/* Icon rail expands on hover or keyboard focus (hover-capable desktops only).
   The resting rail is the 64px frame; expanding overlays the content so the
   work area never reflows. Icons hold their position; labels fade in. */
@media (min-width: 861px) and (hover: hover) and (pointer: fine) {
  :root { --sidebar-expanded: 240px; }
  .sidebar { transition: width 200ms cubic-bezier(0.2, 0, 0, 1); }
  /* The nav keeps its base overflow-x clip (for the label reveal) but must
     stay scrollable vertically: overflow hidden here would let short
     viewports shrink-clip the last nav icons with no affordance. */
  .brand { overflow: hidden; }
  .sidebar:hover,
  .sidebar:focus-within {
    width: var(--sidebar-expanded);
    z-index: 30;
    align-items: stretch;
    box-shadow: var(--shadow-panel);
  }
  .sidebar:hover .brand,
  .sidebar:focus-within .brand { width: 100%; justify-content: flex-start; padding-inline: 4px; }
  .sidebar:hover .brand-copy,
  .sidebar:focus-within .brand-copy { display: grid; animation: rail-reveal 140ms ease-out; }
  .sidebar:hover .nav-link,
  .sidebar:focus-within .nav-link { justify-content: flex-start; padding-inline: 14px; }
  .sidebar:hover .nav-link > span:not(.nav-badge),
  .sidebar:focus-within .nav-link > span:not(.nav-badge) { display: inline; animation: rail-reveal 140ms ease-out; }
  .sidebar:hover .sidebar-footer,
  .sidebar:focus-within .sidebar-footer { justify-content: flex-start; padding-inline: 4px; }
  .sidebar:hover .theme-toggle-button,
  .sidebar:focus-within .theme-toggle-button { flex-direction: row; width: calc(100% - 20px); align-self: center; }
  .sidebar:hover .theme-segment,
  .sidebar:focus-within .theme-segment { flex: 1 1 0; width: auto; height: 33px; }
  .sidebar:hover .theme-segment svg,
  .sidebar:focus-within .theme-segment svg { width: 20px; height: 20px; }
}
@keyframes rail-reveal {
  from { opacity: 0; transform: translateX(-4px); }
  to { opacity: 1; transform: none; }
}

/* Touch devices at 601px and up (tablets, including landscape) expand the rail
   by tap-to-peek: base.html toggles .rail-peek-open on the first tap on the
   rail's non-interactive surface and clears it on taps outside. These
   declarations deliberately mirror the hover band above — keep the two in
   sync — because touch never fires :hover. Reduced motion collapses the width
   transition via the global reduce block. The media gate keeps the class
   inert on hover-capable pointers and at <=600. */
@media (min-width: 601px) and (hover: none) and (pointer: coarse) {
  :root { --sidebar-expanded: 240px; }
  .sidebar { transition: width 200ms cubic-bezier(0.2, 0, 0, 1); }
  .brand { overflow: hidden; }
  .sidebar.rail-peek-open {
    width: var(--sidebar-expanded);
    z-index: 30;
    align-items: stretch;
    box-shadow: var(--shadow-panel);
  }
  .sidebar.rail-peek-open .brand { width: 100%; justify-content: flex-start; padding-inline: 4px; }
  .sidebar.rail-peek-open .brand-copy { display: grid; animation: rail-reveal 140ms ease-out; }
  .sidebar.rail-peek-open .nav-link { justify-content: flex-start; padding-inline: 14px; }
  .sidebar.rail-peek-open .nav-link > span:not(.nav-badge) { display: inline; animation: rail-reveal 140ms ease-out; }
  .sidebar.rail-peek-open .sidebar-footer { justify-content: flex-start; padding-inline: 4px; }
  .sidebar.rail-peek-open .theme-toggle-button { flex-direction: row; width: calc(100% - 20px); align-self: center; }
  .sidebar.rail-peek-open .theme-segment { flex: 1 1 0; width: auto; height: 33px; }
  .sidebar.rail-peek-open .theme-segment svg { width: 20px; height: 20px; }
}

/* Short viewports: the rail's natural stack is ~796px (9 destinations, brand,
   theme control, account), so anything below ~800px of viewport height was
   silently clipping the last nav icons behind the nav's overflow clip. At
   <=799px the stack tightens to ~711px (gaps and dividers shrink; hit targets
   stay >=44px), which fits a maximized 720px-screen window outright. Below
   ~711px the nav scrolls with a thin scrollbar while the theme control and
   account stay pinned — the nav is the only squeezeable region, so nothing
   critical ever clips without an affordance. */
@media (min-width: 601px) and (max-height: 799px) {
  .sidebar { padding-block-start: 0.75rem; }
  .brand { min-height: 44px; }
  .primary-nav { gap: 2px; padding-block-start: 12px; }
  /* 42px stays comfortably above WCAG 2.5.8; absorbs the tenth nav link. */
  .nav-link { min-height: 42px; }
  .nav-label { margin-block: 5px 4px; }
  .nav-label-spaced { margin-block-start: 9px; }
  .theme-toggle-button { margin-block-start: 4px; }
}

/* Theme changes cross-fade instead of hard-cutting: applyTheme() adds this
   class for one beat, then removes it; reduced motion keeps the hard cut. */
.theme-transitioning *,
.theme-transitioning *::before,
.theme-transitioning *::after {
  transition:
    background-color 200ms ease, color 200ms ease, border-color 200ms ease,
    fill 200ms ease, stroke 200ms ease, box-shadow 200ms ease,
    transform 200ms ease !important;
}

/* Manual theme toggle: a segmented sun/moon control, per the approved sidebar
   design — stacked pill in the collapsed rail, horizontal pill in the expanded
   rail and the mobile bottom bar; the active segment gets a white pill.
   data-theme on <html> overrides the system preference; without it the OS
   setting decides. */
.theme-toggle-button {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 3px;
  width: 33px;
  padding: 4px;
  margin-block-start: 8px;
  border-radius: 0;
  background: var(--surface-soft);
}
.theme-segment {
  display: grid;
  width: 25px;
  height: 25px;
  flex: 0 0 auto;
  place-items: center;
  border: 0;
  border-radius: 0;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition: background-color 140ms ease-out, color 140ms ease-out;
}
.theme-segment svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.theme-segment:hover { color: var(--ink); }
.theme-segment:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Pressed segment: ink block, substrate icon — token-driven so it inverts
   correctly in dark mode too. */
.theme-segment[aria-pressed="true"] { color: var(--bg); background: var(--ink); }
@media (max-width: 600px) {
  .sidebar { display: flex; flex-direction: row; align-items: stretch; }
  .primary-nav { flex: 1 1 auto; overflow: visible; }
  .theme-toggle-button { flex: 0 0 58px; flex-direction: row; gap: 2px; width: auto; align-self: center; margin: 0; }
  .theme-segment { width: 24px; height: 32px; }
  .theme-segment svg { width: 18px; height: 18px; }
}
/* ============================================================
   INDUSTRIAL THEME — telemetry typography + alarm emphasis
   ============================================================
   Machine output goes monospace (dates, phones, IDs, attempts);
   hazard red marks real operational alarms only. Kept as one
   append section so the theme's emphasis rules stay auditable;
   component restyling above is merged in place. */

.mono {
  font-family: var(--font-mono);
  font-size: 0.78em;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}
/* Data columns keyed off the mobile-card-table data-label hooks: dates,
   phones and attempts read as machine output; names and bodies do not. */
td[data-label="Due"],
td[data-label="When"],
td[data-label="To"],
td[data-label="Phone"],
td[data-label="Attempts"],
td[data-label="Last sign-in"] {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}
/* The patient table has no data-label hooks (separate mobile markup). */
.patient-table td:nth-child(2) {
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-variant-numeric: tabular-nums;
}
.mobile-card-table td::before {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Alarm edges: failed/undelivered rows red, unknown rows amber, overdue
   refills red with a red date — queue table rows and dashboard work rows
   alike. The row still carries the word (badge or status text): the edge
   and the ink never stand alone. */
tr.row-alert td:first-child,
tr.is-overdue td:first-child,
.work-row.is-overdue { box-shadow: inset 4px 0 0 var(--hazard); }
tr.row-warn td:first-child { box-shadow: inset 4px 0 0 var(--warning); }
tr.is-overdue td[data-label="Due"],
.work-row.is-overdue .work-row-date { color: var(--negative); font-weight: 700; }
/* Alarm variant of the work-panel count chip (messages needing reconcile). */
.count-chip-alert { border-color: var(--hazard); color: var(--hazard); background: var(--negative-soft); }
/* Oversized queue count plate beside a page title (refills queue). */
.heading-count {
  display: inline-grid;
  min-width: 56px;
  min-height: 56px;
  place-items: center;
  padding-inline: 0.7rem;
  border: 2px solid var(--line-strong);
  color: var(--bg);
  background: var(--ink);
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}