/* CPAI Portal — design system v2 (EPIC W foundation + EPIC X designer palette).
   Single base stylesheet, mobile-first, no framework, no JavaScript.
   Registers: staff console (dense, top-appbar shell) lives here;
   external portals load portal.css on top; the radiologist reading
   room loads reading.css (dark token override) on top. */

/* ---------- fonts (self-hosted, CSP font-src 'self') ---------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/inter-var-latin.65850a373e25.woff2") format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin.814fe1615d4d.woff2") format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin.6708425c446b.woff2") format('woff2');
}

/* ---------- design tokens (designer palette, CPAI_001 mock) ---------- */
:root {
  /* green-teal brand ramp */
  --brand-50: #EAF5F2;
  --brand-100: #E2F2EE;   /* designer brand-bg */
  --brand-200: #BFE2DA;
  --brand-300: #8CCCBF;
  --brand-400: #3FAF9C;
  --brand-500: #199180;
  --brand-600: #0E7C6B;   /* designer brand: primary action */
  --brand-700: #0A5A4E;   /* designer brand-ink */
  --brand-800: #084A41;
  --brand-900: #063A33;

  /* navy-tinted neutrals */
  --n-0: #FFFFFF;
  --n-50: #F5F8FA;        /* designer surface-2 */
  --n-100: #EDF1F5;
  --n-200: #E1E7ED;       /* designer line */
  --n-300: #D2DAE2;       /* designer line-2 */
  --n-400: #8696A6;       /* designer muted — large/label text only */
  --n-500: #56697C;       /* designer ink-2 — small-text safe */
  --n-700: #3A4C61;
  --n-800: #22384F;       /* avatar / dark chrome */
  --n-900: #10233D;       /* designer ink */
  --graphite: #10233D;

  /* semantic tones with distinct dots (designer badges) */
  --ok: #1B7A43; --ok-bg: #E7F4EC; --ok-dot: #2E9E5B;
  --warn: #8C5A12; --warn-bg: #FBF1DD; --warn-dot: #DBA02A;
  --danger: #AF3636; --danger-bg: #FBE8E8; --danger-dot: #D24B4B;
  --info: #29588F; --info-bg: #E8F0FB; --info-dot: #3B7DD8;

  /* modality color coding (MRI/CT/PET/XR/US) */
  --mri-bg: #E7F0FB; --mri-bd: #2C6FB5; --mri-tx: #1C4F87;
  --ct-bg: #EFEAF8; --ct-bd: #6A53B5; --ct-tx: #4A3A86;
  --pet-bg: #FBF0DC; --pet-bd: #C98A1E; --pet-tx: #8C5A12;
  --xr-bg: #E6F3EA; --xr-bd: #2E8A55; --xr-tx: #1B6B3C;
  --us-bg: #FBEAF0; --us-bd: #B5497A; --us-tx: #8C3560;
  --mg-bg: #F6E9F4; --mg-bd: #A54A99; --mg-tx: #7C3273;
  --nm-bg: #E6F2F5; --nm-bd: #2E7F96; --nm-tx: #1D6275;

  /* roles */
  --bg: #EBEEF2;          /* designer ground */
  --card: var(--n-0);
  --text: var(--n-900);
  --muted: var(--n-500);
  --label: var(--n-400);  /* uppercase labels / big text only */
  --line: var(--n-200);
  --line-soft: var(--n-100);
  --brand: var(--brand-600);       /* legacy alias, keep working */
  --brand-dark: var(--brand-700);  /* legacy alias, keep working */
  --focus: var(--brand-500);
  --field-bg: var(--n-0);

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --shadow-card: 0 1px 2px rgba(16, 35, 61, .05), 0 6px 18px rgba(16, 35, 61, .05);
  --shadow-pop: 0 8px 28px rgba(16, 35, 61, .18);

  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ---------- base ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 16px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -.02em; line-height: 1.2; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
a { color: var(--brand-700); }
.wrap { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
main.wrap { padding-top: 1rem; padding-bottom: 3rem; }
.mono { font-family: var(--font-mono); font-size: .92em; }
.num { font-variant-numeric: tabular-nums; }
td.num, th.num { text-align: right; }

/* ---------- public / auth header (default shell) ---------- */
.site-header { background: var(--card); color: var(--text); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 3.4rem; gap: 1rem; }
.brand { color: var(--text); font-family: var(--font-display); font-weight: 600; text-decoration: none; font-size: 1.05rem; display: inline-flex; align-items: center; gap: .55rem; }
.brand svg { display: block; flex-shrink: 0; }
.nav-toggle summary { list-style: none; cursor: pointer; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: .9rem; font-weight: 500; }
.nav-toggle summary::-webkit-details-marker { display: none; }
.site-nav { position: absolute; right: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .5rem; display: flex; flex-direction: column; min-width: 13rem; z-index: 30; box-shadow: var(--shadow-pop); }
.site-nav a, .site-nav .linklike { color: var(--text); text-decoration: none; padding: .65rem .75rem; border-radius: var(--radius-sm); display: block; text-align: left; width: 100%; font-weight: 500; font-size: .95rem; }
.site-nav a:hover, .site-nav .linklike:hover { background: var(--brand-50); color: var(--brand-700); }
.inline-form { margin: 0; }
.linklike { background: none; border: none; font: inherit; cursor: pointer; color: var(--brand-700); }

@media (min-width: 800px) {
  @supports selector(details::details-content) {
    .site-header .nav-toggle summary { display: none; }
    .site-header .nav-toggle { display: contents; }
    .site-header .nav-toggle::details-content { content-visibility: visible; }
    .site-header .site-nav { position: static; flex-direction: row; background: none; border: 0; box-shadow: none; padding: 0; min-width: 0; align-items: center; }
    .site-header .site-nav a, .site-header .site-nav .linklike { width: auto; padding: .4rem .6rem; }
  }
}

/* ---------- staff shell: sticky top appbar (designer mock) ---------- */
.shell-staff { font-size: 14px; }
.appbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 1rem; min-height: 58px; padding: .4rem 1.4rem; background: var(--card); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.appbar .brand { color: var(--text); display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-display); font-weight: 700; font-size: .95rem; text-decoration: none; line-height: 1.15; }
.appbar .brand svg { flex-shrink: 0; }
.appbar .brand small { display: block; font-weight: 500; font-size: .66rem; color: var(--label); }
.appbar-search { flex: 1 1 14rem; max-width: 24rem; min-width: 7rem; display: flex; }
.appbar-search input { width: 100%; font: inherit; font-size: .88rem; color: var(--text); background: var(--n-50); border: 1px solid var(--line); border-radius: 9px; padding: .5rem .75rem; min-height: 38px; }
.appbar-search input::placeholder { color: var(--label); }
.appbar-search input:focus { background: var(--card); }
.appbar-nav { display: flex; gap: 3px; align-items: center; }
.appbar-nav a { font-size: .86rem; font-weight: 500; color: var(--muted); text-decoration: none; padding: .45rem .75rem; border-radius: var(--radius-sm); white-space: nowrap; }
.appbar-nav a:hover { background: var(--n-50); color: var(--text); }
.appbar-nav a[aria-current="page"], .appbar-nav a.active { background: var(--brand-100); color: var(--brand-700); font-weight: 600; }
.appbar .sp { flex: 1; }
.appbar .btn { min-height: 38px; padding: .45rem .85rem; font-size: .86rem; white-space: nowrap; flex-shrink: 0; }
.user-menu { position: relative; }
.user-menu summary { list-style: none; cursor: pointer; display: block; }
.user-menu summary::-webkit-details-marker { display: none; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--n-800); color: #fff; display: grid; place-items: center; font-size: .74rem; font-weight: 600; }
.user-menu[open] summary .avatar { outline: 2px solid var(--brand-500); outline-offset: 1px; }
.user-menu .menu-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: .5rem; min-width: 13rem; display: flex; flex-direction: column; }
.user-menu .menu-pop .who { padding: .5rem .65rem .6rem; border-bottom: 1px solid var(--line-soft); margin-bottom: .35rem; }
.user-menu .menu-pop .who b { display: block; font-size: .85rem; }
.user-menu .menu-pop .who small { color: var(--muted); font-size: .74rem; }
.user-menu .menu-pop a, .user-menu .menu-pop .linklike { color: var(--text); text-decoration: none; padding: .55rem .65rem; border-radius: var(--radius-sm); display: block; width: 100%; text-align: left; font-size: .88rem; font-weight: 500; }
.user-menu .menu-pop a:hover, .user-menu .menu-pop .linklike:hover { background: var(--brand-50); color: var(--brand-700); }
.shell-content { padding: 1.25rem 1.4rem 3.5rem; max-width: 1180px; width: 100%; margin: 0 auto; }

/* narrow screens: nav + quick actions collapse into the Menu dropdown */
@media (max-width: 1023px) {
  .appbar { gap: .6rem; }
  .appbar-search { order: 5; flex-basis: 100%; max-width: none; }
  .appbar .nav-toggle { position: relative; }
  .appbar .nav-toggle summary { list-style: none; cursor: pointer; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .45rem .8rem; font-size: .85rem; font-weight: 500; }
  .appbar .nav-toggle summary::-webkit-details-marker { display: none; }
  .appbar-nav { position: absolute; right: 0; top: calc(100% + 8px); z-index: 40; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-pop); padding: .5rem; min-width: 14rem; flex-direction: column; align-items: stretch; }
  .appbar-nav a { padding: .65rem .75rem; }
  .appbar .quick-actions { display: none; }
}
@media (min-width: 1024px) {
  .appbar { flex-wrap: nowrap; }
  .appbar .nav-toggle summary { display: none; }
  .appbar .nav-toggle { display: contents; }
  .appbar .nav-toggle::details-content { content-visibility: visible; }
  .appbar .quick-actions { display: inline-flex; gap: .5rem; }
}
/* dense nav (admin has 8 links): tighten before anything wraps */
@media (min-width: 1024px) and (max-width: 1459px) {
  .appbar { gap: .6rem; }
  .appbar-nav a { padding: .45rem .5rem; font-size: .82rem; }
  .appbar .btn { font-size: .8rem; padding: .45rem .65rem; }
  .appbar .brand small { display: none; }
}

/* ---------- page furniture ---------- */
.page-title { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.page-title h1, .page-title h2 { margin: 0; }
.shell-staff h1 { font-size: 1.45rem; }
.page-sub { color: var(--muted); font-size: .88em; margin-top: .15rem; }

/* ---------- cards ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.15rem; margin-bottom: 1rem; box-shadow: var(--shadow-card); }
.card h2, .card h3 { margin-top: 0; font-size: 1.02rem; }
.card-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 700px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .card-grid-3 { grid-template-columns: repeat(3, 1fr); } }

/* stat tiles: triage numbers, left-aligned display digits */
.stat-grid { display: grid; gap: .85rem; grid-template-columns: repeat(2, 1fr); margin-bottom: 1.25rem; }
@media (min-width: 800px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .stat-grid { grid-template-columns: repeat(6, 1fr); } }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem .95rem .9rem; text-align: left; box-shadow: var(--shadow-card); color: inherit; text-decoration: none; display: flex; flex-direction: column; }
.stat .lbl { order: -1; text-transform: uppercase; letter-spacing: .04em; font-size: .68rem; font-weight: 500; color: var(--label); }
a.stat { transition: transform .15s, border-color .15s; }
a.stat:hover { border-color: var(--brand-600); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { a.stat { transition: none; } a.stat:hover { transform: none; } }
.stat .num { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; display: block; font-variant-numeric: tabular-nums; letter-spacing: -.01em; margin-top: .35rem; }
.stat .num .of { font-size: .8rem; color: var(--muted); font-weight: 500; }
.stat-warn { border-color: #F3CFA0; background: #FDF8EE; }
.stat-danger { border-color: #F0B9B4; background: #FDF1F0; }

/* ---------- badges: tone + leading state dot ---------- */
.badge { display: inline-flex; align-items: center; gap: .35rem; padding: .16rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 600; white-space: nowrap; }
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.badge-ok { background: var(--ok-bg); color: var(--ok); }
.badge-ok::before { background: var(--ok-dot); }
.badge-warn { background: var(--warn-bg); color: var(--warn); }
.badge-warn::before { background: var(--warn-dot); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-danger::before { background: var(--danger-dot); }
.badge-info { background: var(--info-bg); color: var(--info); }
.badge-info::before { background: var(--info-dot); }
.badge-neutral { background: var(--line-soft); color: var(--muted); }

/* modality / code chips */
.chip { font-family: var(--font-mono); font-size: .7rem; font-weight: 500; background: var(--line-soft); color: var(--n-700); border-radius: 5px; padding: .18rem .4rem; white-space: nowrap; }

/* modality tags (designer color coding) + left-border appointment chips */
.mtag { display: inline-flex; align-items: center; font-size: .7rem; font-weight: 700; padding: .14rem .5rem; border-radius: 6px; white-space: nowrap; }
.mtag-mri { background: var(--mri-bg); color: var(--mri-tx); }
.mtag-ct { background: var(--ct-bg); color: var(--ct-tx); }
.mtag-pet { background: var(--pet-bg); color: var(--pet-tx); }
.mtag-xr { background: var(--xr-bg); color: var(--xr-tx); }
.mtag-us { background: var(--us-bg); color: var(--us-tx); }
.mtag-mg { background: var(--mg-bg); color: var(--mg-tx); }
.mtag-nm { background: var(--nm-bg); color: var(--nm-tx); }
.mchip { border-left: 3px solid; border-radius: 9px; }
.mchip-mri { background: var(--mri-bg); border-color: var(--mri-bd); color: var(--mri-tx); }
.mchip-ct { background: var(--ct-bg); border-color: var(--ct-bd); color: var(--ct-tx); }
.mchip-pet { background: var(--pet-bg); border-color: var(--pet-bd); color: var(--pet-tx); }
.mchip-xr { background: var(--xr-bg); border-color: var(--xr-bd); color: var(--xr-tx); }
.mchip-us { background: var(--us-bg); border-color: var(--us-bd); color: var(--us-tx); }
.mchip-mg { background: var(--mg-bg); border-color: var(--mg-bd); color: var(--mg-tx); }
.mchip-nm { background: var(--nm-bg); border-color: var(--nm-bd); color: var(--nm-tx); }

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.data { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
table.data th, table.data td { padding: .55rem .8rem; text-align: left; border-bottom: 1px solid var(--line-soft); font-size: .9em; vertical-align: middle; }
table.data th { background: var(--card); font-family: var(--font-body); font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); border-bottom: 1px solid var(--line); position: sticky; top: 0; }
table.data tbody tr:hover td, table.data tr:hover td { background: #F3FAFB; }
table.data tr:last-child td { border-bottom: 0; }
table.data td.num { font-variant-numeric: tabular-nums; }

/* ---------- card lists (external/mobile, queues) ---------- */
.list-cards { display: flex; flex-direction: column; gap: .75rem; }
.list-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; display: block; color: inherit; text-decoration: none; }
a.list-card:hover, .list-card:hover { border-color: var(--brand-300); }
.list-card .row1 { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.list-card .title { font-weight: 600; }
.list-card .meta { color: var(--muted); font-size: .85em; }

/* ---------- forms — 44px+ tap targets ---------- */
form.stack label { display: block; font-weight: 600; font-size: .92em; margin: .9rem 0 .3rem; }
form.stack input[type="text"], form.stack input[type="email"], form.stack input[type="password"],
form.stack input[type="date"], form.stack input[type="datetime-local"], form.stack input[type="tel"],
form.stack input[type="number"], form.stack input[type="file"], form.stack select, form.stack textarea {
  width: 100%; padding: .6rem .75rem; font: inherit; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--field-bg); color: var(--text); min-height: 44px;
}
form.stack textarea { min-height: 6rem; }
form.stack .helptext { color: var(--muted); font-size: .82em; display: block; margin-top: .25rem; }
.errorlist { color: var(--danger); margin: .25rem 0; padding-left: 1.1rem; font-size: .9em; }

/* Payment-method-conditional copay field (CSS-only via :has()).
   insurance -> "Copay amount" · self_pay -> "Amount to collect" ·
   partner -> the whole amount field disappears. Browsers without :has()
   show a single "Copay amount" label and every field; the form's clean()
   enforces the same rules server-side regardless. */
form.stack .lbl-copay-self { display: none; }
@supports selector(form:has(select:checked)) {
  form.stack:has(select[name="payment_method"] option[value="self_pay"]:checked) .lbl-copay-self { display: block; }
  form.stack:has(select[name="payment_method"] option[value="self_pay"]:checked) .lbl-copay-ins { display: none; }
  form.stack:has(select[name="payment_method"] option[value="partner"]:checked) .fld-copay_amount,
  form.stack:has(select[name="payment_method"] option[value="workers_comp"]:checked) .fld-copay_amount,
  form.stack:has(select[name="payment_method"] option[value="no_fault"]:checked) .fld-copay_amount { display: none; }
  /* claim number only concerns workers' comp / no-fault visits */
  form.stack .fld-claim_number { display: none; }
  form.stack:has(select[name="payment_method"] option[value="workers_comp"]:checked) .fld-claim_number,
  form.stack:has(select[name="payment_method"] option[value="no_fault"]:checked) .fld-claim_number { display: block; }
}

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; background: var(--brand-600); color: #fff; border: 1px solid transparent; border-radius: var(--radius-sm); padding: .65rem 1.15rem; font: inherit; font-size: .95em; font-weight: 600; cursor: pointer; text-decoration: none; min-height: 44px; }
.btn:hover { background: var(--brand-700); }
.btn-secondary { background: var(--card); color: var(--text); border-color: var(--n-300); }
.btn-secondary:hover { border-color: var(--brand-600); color: var(--brand-700); background: var(--card); }
@media (prefers-reduced-motion: no-preference) { .btn { transition: background .12s ease, border-color .12s ease, color .12s ease; } }
.btn-danger { background: transparent; color: var(--danger); border-color: #F0B9B4; }
.btn-danger:hover { background: var(--danger-bg); }
.btn-small { padding: .3rem .7rem; min-height: 0; font-size: .82em; }
.btn-block { display: flex; width: 100%; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }

/* ---------- flash messages as floating toasts (designer mock) ----------
   Success/info toasts fade out after 6s (CSS-only); warnings and errors
   persist so nothing actionable can vanish unread. role="status" is kept
   on the container for assistive tech. */
.messages { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 70; display: flex; flex-direction: column; gap: .5rem; align-items: center; margin: 0; width: max-content; max-width: min(92vw, 34rem); }
body.has-tabbar .messages { bottom: 5.5rem; }
.message { background: var(--n-900); color: #EAF2FA; font-size: .88rem; font-weight: 500; padding: .7rem 1.2rem; border-radius: 10px; box-shadow: 0 8px 24px rgba(16, 35, 61, .3); margin: 0; animation: toast-in .25s ease; }
.message-success { background: #0F3D26; color: #CDEEDC; animation: toast-in .25s ease, toast-out .6s ease 6s forwards; }
.message-info { animation: toast-in .25s ease, toast-out .6s ease 6s forwards; }
.message-error { background: #471717; color: #F6D2D2; }
.message-warning { background: #3D2E0C; color: #F2DFB4; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes toast-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .message, .message-success, .message-info { animation: none; } }
@media print { .messages { display: none; } }

/* ---------- tabs: underline style with optional counts (designer mock) ---------- */
.tabs { display: flex; gap: .15rem; flex-wrap: wrap; margin-bottom: 1rem; border-bottom: 1px solid var(--line); padding: 0 .15rem; }
.tabs a { display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .85rem; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 600; font-size: .92em; }
.tabs a:hover { color: var(--text); }
.tabs a.active { color: var(--brand-700); border-bottom-color: var(--brand-600); }
.tabs .ct { font-size: .72em; font-weight: 700; background: var(--n-50); color: var(--muted); border-radius: 999px; padding: .1rem .5rem; }
.tabs a.active .ct { background: var(--brand-100); color: var(--brand-700); }

/* segmented control (Day/Week etc.) */
.seg-ctl { display: inline-flex; background: var(--n-50); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 2px; }
.seg-ctl a { font-size: .86em; font-weight: 600; color: var(--muted); text-decoration: none; border-radius: 6px; padding: .35rem .85rem; }
.seg-ctl a.active { background: var(--card); color: var(--text); box-shadow: 0 1px 2px rgba(16, 35, 61, .1); }

/* ---------- filter bar ---------- */
.filter-bar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.filter-bar input, .filter-bar select { padding: .5rem .65rem; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; font-size: .92em; min-height: 44px; background: var(--field-bg); color: var(--text); }

/* ---------- shared page patterns ---------- */
/* staff console runs lighter controls than the touch-first portals */
.shell-staff .btn { min-height: 36px; padding: .5rem .95rem; font-size: .92em; border-radius: 9px; }
.shell-staff .btn-small { min-height: 0; padding: .3rem .7rem; font-size: .82em; }
/* tinted card header strip (designer mock) */
.card-head { display: flex; align-items: center; gap: .6rem; margin: -1rem -1.15rem .95rem; padding: .75rem 1.15rem; background: var(--n-50); border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; flex-wrap: wrap; }
.card-head h2, .card-head h3 { margin: 0; font-size: .98rem; font-weight: 600; }
.card-head .note { margin-left: auto; font-size: .8rem; color: var(--muted); }
.count-pill { background: var(--warn-dot); color: #fff; font-size: .76rem; font-weight: 700; border-radius: 999px; padding: .12rem .6rem; }
/* solid rounded-square brand mark (designer mock) */
.brand-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--brand-600); color: #fff; display: grid; place-items: center; font-size: 15px; font-weight: 700; flex-shrink: 0; }
table.data td .actions { margin-top: 0; }
.form-card { max-width: 36rem; }
td.t-name, .t-name { font-weight: 600; }
td.t-time, .t-time { font-family: var(--font-mono); font-size: .85em; white-space: nowrap; }
.acc { font-family: var(--font-mono); font-size: .78em; color: var(--n-400); }
.card-warn { border-color: #F3CFA0; background: #FDF8EE; }
.card-danger { border-color: #F0B9B4; background: #FDF1F0; }
.pager { display: flex; align-items: center; gap: .75rem; margin-top: 1rem; font-size: .9em; color: var(--muted); }
.pager a { font-weight: 600; text-decoration: none; }

/* ---------- misc ---------- */
.muted { color: var(--muted); }
.auth-box { max-width: 26rem; margin: 3rem auto; }
.auth-box .card { border-radius: var(--radius-lg); padding: 1.75rem; }
.site-footer { color: var(--muted); font-size: .78rem; padding-bottom: 1.5rem; }
.divided > * + * { border-top: 1px solid var(--line-soft); padding-top: .75rem; margin-top: .75rem; }
dl.kv { display: grid; grid-template-columns: max-content 1fr; gap: .3rem .9rem; margin: 0; }
dl.kv dt { color: var(--muted); font-size: .85em; }
dl.kv dd { margin: 0; }

/* ---------- calendar ---------- */
.calendar-day { display: grid; gap: .4rem; }
.cal-slot { display: flex; gap: .6rem; align-items: baseline; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--brand-500); border-radius: var(--radius-sm); padding: .5rem .7rem; text-decoration: none; color: inherit; flex-wrap: wrap; font-size: .92em; }
.cal-slot:hover { border-color: var(--brand-300); border-left-color: var(--brand-500); }
.cal-slot .mono, .cal-slot time { font-family: var(--font-mono); font-size: .85em; }
.week-grid { display: grid; gap: .5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .week-grid { grid-template-columns: repeat(7, 1fr); } }

/* ---------- two-factor auth ---------- */
.backup-codes { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.backup-codes code { display: block; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .5rem .7rem; font-family: var(--font-mono); font-size: 1rem; letter-spacing: .05em; text-align: center; }
.otp-input, form.stack .otp-field input { font-family: var(--font-mono) !important; font-size: 1.35rem !important; letter-spacing: .55em; text-align: center; }

/* ---------- print ---------- */
@media print {
  .appbar, .site-header, .site-footer, .actions, .btn, .tabs, .filter-bar { display: none !important; }
  body { background: #fff; font-size: 12px; }
  .card, table.data { border-color: #999; box-shadow: none; }
  .shell { display: block; }
}