/* ============================================================
   OFL — Secure Viewer for Lighthouse Foundation
   A calm, grounded design system for an internal safeguarding /
   casework tool. White rail + warm neutral paper, Lighthouse
   orange as the primary accent. No navy / indigo.
   ============================================================ */
:root {
  /* Brand — Lighthouse Foundation (orange + peach) */
  --brand: #f4811f;                          /* Lighthouse orange (primary) */
  --brand-600: #de6f12;
  --brand-700: #b9590a;                       /* button fill — #fff text = 4.67:1 (WCAG AA) */
  --brand-800: #9a4b08;                       /* button hover (darker) */
  --brand-ink: #8a4208;                       /* dark-orange TEXT on peach/white — passes AA */
  --brand-soft: #fce7d4;                      /* Lighthouse peach — soft fills */
  --brand-tint: rgba(244, 129, 31, .14);      /* active-nav wash, kept in sync with --brand */

  /* Ink (small dark surfaces only: private-view toggle, toast) — warm charcoal, not blue */
  --ink-900: #2b2521;
  --ink-800: #352f2a;
  --ink-700: #464039;
  --ink-line: #534c44;
  --ink-text: #efeae5;        /* primary text on ink */
  --ink-text-soft: #cdc6be;   /* secondary text on ink */
  --ink-text-faint: #a99f95;  /* tertiary text on ink */

  /* Neutrals (warm) */
  --paper: #f4f3ef;
  --surface: #ffffff;
  --surface-2: #faf9f6;
  --line: #e6e2d9;
  --line-2: #efece5;
  --text: #1f2630;
  --text-soft: #57616d;
  --text-faint: #6b7480;      /* AA on white (~4.6:1) — used for structural labels */

  /* Semantic — colour reserved for meaning */
  --green: #2c8a57;           /* dot / graphic use (needs only 3:1) */
  --green-700: #206b45;       /* AA text on --green-soft (5.66:1) */
  --green-soft: #e6f3ec;
  --red: #b3261e;
  --red-soft: #fbe7e6;
  --red-line: #f0c9c6;
  --amber: #b5781a;
  --amber-700: #8f5d12;       /* AA chip text on amber-soft */
  --amber-soft: #fcf1dd;
  --amber-line: #f0dfc0;
  --neutral-soft: #eef1f5;
  --neutral-text: #475063;

  /* Type — a disciplined scale + three weights (rem honours user zoom) */
  /* A plainer, more formal system stack (Tahoma/Verdana family) — reads like a
     serious internal business tool rather than a polished consumer product. */
  --font-ui: Tahoma, "Segoe UI", Verdana, Geneva, "DejaVu Sans", sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;
  --fs-xs: .6875rem;    /* 11 */
  --fs-sm: .75rem;      /* 12 */
  --fs-base: .875rem;   /* 14 */
  --fs-md: .9375rem;    /* 15 */
  --fs-lg: 1.125rem;    /* 18 */
  --fs-xl: 1.375rem;    /* 22 */
  --fs-display: 1.75rem;/* 28 */
  --w-reg: 450;
  --w-med: 560;
  --w-semi: 640;
  --lh-tight: 1.2;
  --lh-base: 1.5;

  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;
  /* Shadows tinted with the warm charcoal (--ink-900 family), never blue/indigo. */
  --shadow-sm: 0 1px 2px rgba(43, 37, 33, .06), 0 1px 1px rgba(43, 37, 33, .05);
  --shadow: 0 4px 14px rgba(43, 37, 33, .08), 0 1px 3px rgba(43, 37, 33, .06);
  --shadow-lg: 0 10px 30px rgba(43, 37, 33, .18);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --sidebar-w: 248px;
}

* { box-sizing: border-box; }
html { font-size: 100%; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--font-ui);
  color: var(--text);
  background: var(--paper);
  font-size: var(--fs-base);
  font-weight: var(--w-reg);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--brand-700); text-decoration: none; }
a:hover { text-decoration: underline; }
.hidden { display: none !important; }
::selection { background: var(--brand-soft); }
:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(244, 129, 31, .28); border-radius: 4px; }

/* Skip link — first focusable element, hidden until tabbed to. */
.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 12px; top: 12px; z-index: 90; background: var(--surface); color: var(--text); padding: 8px 14px; border-radius: var(--radius-sm); box-shadow: var(--shadow); }

/* ---------- App shell ---------- */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }

.sidebar {
  background: var(--surface);
  color: var(--text); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 11px; padding: 18px 16px 14px; }
.brand-logo {
  width: 40px; height: 40px; border-radius: var(--radius); display: grid; place-items: center; flex: none;
  background: #fff8f0; border: 1px solid rgba(244, 129, 31, .22);
}
.brand-logo img, .brand-logo svg { width: 26px; height: 26px; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; }
.brand-name { font-weight: var(--w-semi); font-size: var(--fs-md); color: var(--text); }
.brand-tag { font-size: var(--fs-xs); color: var(--text-faint); }

/* Quiet section eyebrow above each nav group. */
.nav-label { font-size: var(--fs-xs); font-weight: var(--w-semi); letter-spacing: .09em; text-transform: uppercase; color: var(--text-faint); padding: 12px 16px 5px; }
.sidenav { display: flex; flex-direction: column; gap: 1px; padding: 2px 10px 8px; }
.sidenav a {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--radius);
  color: var(--text-soft); font-weight: var(--w-med); font-size: var(--fs-base); text-decoration: none;
  border-left: 2px solid transparent; transition: background .15s var(--ease), color .15s var(--ease);
}
.sidenav a svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.sidenav a:hover { background: var(--brand-soft); color: var(--text); text-decoration: none; }
.sidenav a.active { background: var(--brand-soft); color: var(--brand-ink); border-left-color: var(--brand-700); }
.sidenav a.active svg { color: var(--brand); opacity: 1; }
.sidenav a:focus-visible { outline: 2px solid var(--brand-700); outline-offset: -2px; }

/* Administration group pinned to the bottom of the rail (above the user chip). */
.sidenav-bottom { margin-top: auto; padding-bottom: 6px; }
.sidebar-foot { padding: 12px; border-top: 1px solid var(--line); }
.userchip { display: flex; align-items: center; gap: 10px; }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--brand-700); color: #fff; font-weight: var(--w-semi); font-size: var(--fs-base);
  border: 1px solid var(--brand-700);
}
.userchip .meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.userchip .uname { color: var(--text); font-size: var(--fs-base); font-weight: var(--w-med); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.userchip .urole { color: var(--text-faint); font-size: var(--fs-xs); text-transform: capitalize; }
.signout {
  margin-top: 10px; width: 100%; background: transparent; color: var(--text-soft); cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px; font-size: var(--fs-sm);
  display: flex; align-items: center; justify-content: center; gap: 7px; transition: .15s var(--ease);
}
.signout:hover { border-color: var(--brand); color: var(--brand-700); }

/* ---------- Main + appbar ---------- */
.main { display: flex; flex-direction: column; min-width: 0; }
.appbar {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 14px;
  background: var(--surface); border-bottom: 1px solid var(--line); padding: 11px 24px;
}
.page-head { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.page-title { margin: 0; font-size: var(--fs-lg); font-weight: var(--w-semi); line-height: var(--lh-tight); color: var(--text); }
.page-sub { margin: 0; font-size: var(--fs-sm); color: var(--text-soft); font-weight: var(--w-reg); line-height: 1.3; }
.appbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.conf-chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--amber-700);
  background: var(--amber-soft); border: 1px solid var(--amber-line); padding: 5px 11px; border-radius: 999px; font-weight: var(--w-med);
}
.nav-toggle { display: none; background: none; border: none; color: var(--text); cursor: pointer; padding: 8px; margin: -6px; border-radius: var(--radius-sm); }

/* Private view — a shoulder-surf privacy screen. This is a VISUAL redaction for
   shared/busy spaces, not a data control: the record is already filtered to the
   user's permissions server-side, and hovering an item reveals it. */
.privacy-toggle {
  display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); font-weight: var(--w-med);
  color: var(--text-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  padding: 5px 12px; cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.privacy-toggle svg { width: 15px; height: 15px; flex: none; }
.privacy-toggle:hover { border-color: var(--text-faint); color: var(--text); }
.privacy-toggle.on { background: var(--ink-800); border-color: var(--ink-800); color: #fff; }

.private-view .name-cell,
.private-view .pii,
.private-view .detail-head h1,
.private-view .detail-avatar,
.private-view .detail-meta b,
.private-view .fields .v,
.private-view .note-head,
.private-view .note-meta,
.private-view .note-body,
.private-view .note-follow {
  filter: blur(5px);
  transition: filter .12s var(--ease);
  cursor: default;
}
/* Deliberate hover (or keyboard focus) reveals a single item. */
/* Reveal on hover OR keyboard focus. Blurred containers that hold only plain text
   are given tabindex=0 in app.js so :focus works for keyboard/AT users too. */
.private-view .name-cell:hover,
.private-view .name-cell:focus-within,
.private-view .pii:hover,
.private-view .pii:focus,
.private-view .pii:focus-within,
.private-view .detail-head h1:hover,
.private-view .detail-head h1:focus,
.private-view .detail-avatar:hover,
.private-view .detail-avatar:focus,
.private-view .detail-meta b:hover,
.private-view .detail-meta b:focus,
.private-view .fields .v:hover,
.private-view .fields .v:focus,
.private-view .field:focus-within .v,
.private-view .note-card:hover .note-head,
.private-view .note-card:hover .note-meta,
.private-view .note-card:hover .note-body,
.private-view .note-card:hover .note-follow,
.private-view .note-card:focus .note-head,
.private-view .note-card:focus .note-meta,
.private-view .note-card:focus .note-body,
.private-view .note-card:focus .note-follow,
.private-view .note-card:focus-within .note-head,
.private-view .note-card:focus-within .note-meta,
.private-view .note-card:focus-within .note-body,
.private-view .note-card:focus-within .note-follow {
  filter: none;
}
/* Detailed table view of text-heavy sections: blur the free-text cells too. */
.private-view .subtable-wrap td.pii-text { filter: blur(5px); transition: filter .12s var(--ease); cursor: default; }
.private-view .subtable-wrap tr:hover td.pii-text,
.private-view .subtable-wrap td.pii-text:focus,
.private-view .subtable-wrap td.pii-text:focus-within { filter: none; }
/* The young person's name is also written into the sticky app-bar title on a
   record; blur it there too (marked .pii on detail views only). */
.private-view .page-title.pii { filter: blur(5px); transition: filter .12s var(--ease); cursor: default; }
.private-view .page-title.pii:hover,
.private-view .page-title.pii:focus { filter: none; }
/* Focusable-for-reveal elements: quiet outline so the reveal affordance is visible. */
.private-view [data-reveal]:focus { outline: 2px solid var(--brand-700); outline-offset: 2px; }

main#view { padding: 24px; max-width: 1240px; width: 100%; margin: 0 auto; }

/* ---------- Loading / empty states ---------- */
.loading { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--text-soft); padding: 56px; font-size: var(--fs-base); }
.spinner { width: 18px; height: 18px; border: 2.5px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty { color: var(--text-soft); padding: 16px 2px; }
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 48px 20px; color: var(--text-soft); text-align: center; }
.empty-state svg { width: 30px; height: 30px; color: var(--text-faint); opacity: .8; }
.empty-state .es-title { font-weight: var(--w-med); color: var(--text); }
.empty-state .es-sub { font-size: var(--fs-sm); max-width: 44ch; }
.empty-state button { margin-top: 4px; }
.error-state { padding: 18px 20px; color: var(--text); background: var(--surface); border: 1px solid var(--red-line); border-left: 3px solid var(--red); border-radius: var(--radius); }
.error-state .es-detail { color: var(--text-faint); font-size: var(--fs-sm); margin-top: 4px; }

/* ---------- Filters / search header ---------- */
.filters {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  background: var(--surface); padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 16px;
}
.filters .search-wrap { position: relative; flex: 1; min-width: 240px; display: flex; align-items: center; }
.filters .search-wrap svg { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--text-faint); pointer-events: none; }
.filters input[type=search] { width: 100%; padding-left: 34px; }
.filters input[type=search], .filters select, .filters input[type=text], .filters input[type=password], textarea {
  border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 12px; font-size: var(--fs-base);
  background: #fff; color: var(--text); font-family: inherit; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.filters input:focus, .filters select:focus, textarea:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; }
.filters .field-pair { display: flex; flex-direction: column; gap: 4px; }
.filters .field-pair > span { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .07em; color: var(--text-faint); font-weight: var(--w-semi); }
.filters label { font-size: var(--fs-base); color: var(--text-soft); display: flex; gap: 7px; align-items: center; }
/* Separate the read-only count + Export action from the input controls with a
   quiet divider, so the passive count doesn't read as part of the button. */
.filters-right { margin-left: auto; display: flex; align-items: center; gap: 14px; padding-left: 16px; border-left: 1px solid var(--line-2); }
.result-count { color: var(--text-soft); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

/* ---------- Surfaces ---------- */
.people, .panel, .chart, .stat {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.people { overflow: hidden; }
.panel { padding: 20px; }
.panel h3, .chart h3 { margin: 0 0 12px; font-size: var(--fs-md); font-weight: var(--w-semi); line-height: var(--lh-tight); letter-spacing: -.1px; }
.panel h4 { margin: 0 0 8px; font-size: var(--fs-base); font-weight: var(--w-med); color: var(--text-soft); }

/* ---------- Tables ---------- */
table { width: 100%; border-collapse: collapse; }
thead th {
  text-align: left; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; font-weight: var(--w-semi);
  color: var(--text-soft); padding: 11px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2);
  position: sticky; top: 0; z-index: 1;
}
tbody td { padding: 11px 16px; border-bottom: 1px solid var(--line-2); }
tbody tr { transition: background .12s var(--ease), box-shadow .12s var(--ease); }
tbody tr[onclick], .people tbody tr { cursor: pointer; }
.people tbody tr:hover, tbody tr[style*="cursor"]:hover { background: var(--surface-2); box-shadow: inset 3px 0 0 var(--brand); }
.people tbody tr:hover .name-cell, tbody tr[style*="cursor"]:hover .name-cell { color: var(--brand-700); }
tbody tr:last-child td { border-bottom: none; }
.name-cell { font-weight: var(--w-med); color: var(--text); }
.row-link { color: inherit; font-weight: inherit; text-decoration: none; }
.row-link:hover { text-decoration: none; }
.ref, .num-cell, .col-ts { font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.num-cell { text-align: right; }
/* Numeric column headers (Age, Docs) sit right, over their right-aligned cells. */
th.num-head { text-align: right; }
th.num-head .th-sort { justify-content: flex-end; }
.subtable-wrap { overflow-x: auto; border-radius: var(--radius-sm); }
.th-sort { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.th-sort:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; border-radius: 3px; }
th.sortable { white-space: nowrap; }
th.sortable:hover .th-sort { color: var(--text); }
th.sorted { color: var(--brand-700); }
.sort-arrow { font-size: var(--fs-xs); }

/* ---------- Pills / status badges (colour = meaning) ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: var(--fs-sm);
  background: var(--neutral-soft); color: var(--neutral-text); white-space: nowrap; font-weight: var(--w-med);
}
.pill.dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; flex: none; }
/* Text uses --green-700 (AA on the soft fill); the dot inherits and is fine at 3:1. */
.pill.is-active { background: var(--green-soft); color: var(--green-700); }
.pill.is-risk { background: var(--amber-soft); color: var(--amber-700); }
.pill.is-exited { background: var(--surface-2); color: var(--text-soft); border: 1px solid var(--line); }
.pill.archived { background: var(--red-soft); color: var(--red); }

/* ---------- Buttons (one consistent system) ---------- */
button { font-family: inherit; }
.btn-export, .btn-primary, .btn-secondary, .btn-ghost {
  border-radius: var(--radius-sm); padding: 9px 15px; cursor: pointer; font-size: var(--fs-base); font-weight: var(--w-med);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s var(--ease), border-color .15s var(--ease), transform .06s var(--ease);
}
.btn-export svg, .btn-primary svg, .btn-secondary svg, .btn-ghost svg { width: 15px; height: 15px; }
.btn-export, .btn-primary { background: var(--brand-700); color: #fff; border: 1px solid var(--brand-700); }
.btn-export:hover, .btn-primary:hover { background: var(--brand-800); border-color: var(--brand-800); }
.btn-export:active, .btn-primary:active { transform: translateY(1px); }
.btn-export:disabled, .btn-primary:disabled { opacity: .55; cursor: not-allowed; }
.btn-secondary { background: #fff; color: var(--text); border: 1px solid var(--line); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--text-faint); }
.btn-ghost { background: transparent; color: var(--text-soft); border: 1px solid transparent; }
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-sm { padding: 5px 11px; font-size: var(--fs-sm); }
/* Compact inline actions inside table rows (staff accounts, etc.). */
.btn-tiny {
  border-radius: var(--radius-sm); padding: 4px 10px; cursor: pointer; font-size: var(--fs-sm); font-weight: var(--w-med);
  background: #fff; color: var(--text); border: 1px solid var(--line); white-space: nowrap;
}
.btn-tiny:hover { background: var(--surface-2); border-color: var(--text-faint); }
.btn-tiny.btn-danger-ghost { color: var(--red); border-color: var(--red-line); }
.btn-tiny.btn-danger-ghost:hover { background: var(--red-soft); }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Detail ---------- */
.detail-head {
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--brand);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 16px;
}
.detail-id { display: flex; align-items: flex-start; gap: 16px; }
.detail-avatar { width: 46px; height: 46px; flex: none; border-radius: var(--radius); display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-ink); font-weight: var(--w-semi); font-size: var(--fs-lg); }
/* Breadcrumb on the left, Prev/Next record nav on the right. */
.detail-head-top { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; margin-bottom: 12px; flex-wrap: wrap; }
.detail-head-top .back { margin-bottom: 0; }
.detail-nav { display: flex; align-items: center; gap: 8px; flex: none; }
.detail-nav-pos { font-size: var(--fs-sm); color: var(--text-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
.detail-nav .btn-tiny:disabled { opacity: .45; cursor: default; }
.back { font-size: var(--fs-sm); color: var(--text-soft); display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; }
.back:hover { color: var(--brand-700); text-decoration: none; }
.back .crumb-sep { color: var(--text-faint); }
.back .crumb-current { color: var(--text-faint); font-family: var(--font-mono); }
.detail-head h1 { margin: 0; font-size: var(--fs-xl); font-weight: var(--w-semi); line-height: var(--lh-tight); letter-spacing: -.01em; }
.detail-meta { display: flex; gap: 0; flex-wrap: wrap; align-items: center; color: var(--text-soft); font-size: var(--fs-base); margin-top: 8px; }
.detail-meta > span { display: inline-flex; gap: 6px; align-items: center; }
.detail-meta > span:not(:last-child) { padding-right: 16px; margin-right: 16px; border-right: 1px solid var(--line-2); }
.detail-meta b { color: var(--text); font-weight: var(--w-med); }
.detail-meta .mono { font-family: var(--font-mono); }
.detail-actions { margin-top: 14px; }

/* At-a-glance safeguarding chips. Presence/absence only, derived from data the
   record already shows; marked .pii so Private view blurs them. Amber = notable,
   red = active/high risk — colour reserved for meaning, as elsewhere. */
.risk-flags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.risk-chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: var(--w-med); padding: 4px 10px; border-radius: 999px; border: 1px solid transparent; white-space: nowrap; }
.risk-chip svg { width: 12px; height: 12px; flex: none; }
.risk-chip.risk-high { background: var(--red-soft); color: var(--red); border-color: var(--red-line); }
.risk-chip.risk-med { background: var(--amber-soft); color: var(--amber-700); border-color: var(--amber-line); }

/* ---------- Field grids ---------- */
.group-title {
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--text-soft);
  font-weight: var(--w-semi); margin: 22px 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line-2);
}
.group-title:first-child { margin-top: 0; }
.fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 2px 28px; }
.field { display: grid; grid-template-columns: 160px 1fr; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-2); }
.field .k { color: var(--text-soft); font-size: var(--fs-sm); font-weight: var(--w-med); }
.field .v { white-space: pre-wrap; word-break: break-word; color: var(--text); font-weight: var(--w-med); }
.field.long { grid-column: 1 / -1; }
/* Don't trail a border under the last field (single-column / mobile, and the last
   field overall) so a group doesn't close on a dangling underline. */
.field:last-child { border-bottom: none; }

/* ---------- Tabs (segmented control) ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; align-items: center; }
.tab {
  padding: 8px 13px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--line);
  cursor: pointer; font-size: var(--fs-base); color: var(--text-soft); font-weight: var(--w-med); transition: .15s var(--ease); user-select: none;
}
.tab:hover { background: #fff; border-color: var(--brand); color: var(--text); }
/* Selected tab uses the same warm brand wash as the active nav item, so
   "selected" reads as one consistent signature across the app (the dark fill is
   reserved for on/off toggles like Private view and Compact/Detailed). */
.tab.active { background: var(--brand-soft); color: var(--brand-ink); border-color: var(--brand); font-weight: var(--w-semi); }
.tab.locked { color: var(--text-faint); border-style: dashed; cursor: not-allowed; }
.tab.locked svg { opacity: .7; }
.tab-sensitive::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); margin-right: 7px; vertical-align: middle; }
.tab-sensitive.active::before { background: var(--amber); }
.tab svg { width: 13px; height: 13px; vertical-align: -2px; margin-right: 5px; }
.tab .badge { display: inline-block; margin-left: 6px; background: var(--line-2); color: var(--text-soft); border-radius: 999px; padding: 0 7px; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.tab.active .badge { background: rgba(185, 89, 10, .18); color: var(--brand-ink); }
.tab-group-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); font-weight: var(--w-semi); align-self: center; padding: 0 6px 0 10px; }
.trunc-note { font-size: var(--fs-sm); color: var(--amber-700); background: var(--amber-soft); border: 1px solid var(--amber-line); padding: 8px 12px; border-radius: var(--radius-sm); margin-bottom: 12px; }

/* Summary / handover tab */
.summary-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.summary-head h3 { margin: 0; }
.summary-head .spacer { margin-left: auto; }
.summary-note { font-size: var(--fs-sm); color: var(--text-soft); margin-bottom: 8px; max-width: 70ch; }
.summary-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.summary-row { all: unset; cursor: pointer; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); transition: border-color .12s var(--ease), background .12s var(--ease); }
.summary-row:hover { border-color: var(--brand); background: #fff; }
.summary-row:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; }
.summary-row-title { font-weight: var(--w-med); color: var(--text); }
.summary-row-meta { display: flex; gap: 10px; align-items: baseline; font-size: var(--fs-sm); color: var(--text-soft); }
.summary-row-date { color: var(--text-faint); font-family: var(--font-mono); }
.summary-timeline { display: flex; flex-direction: column; }
.tl-item { all: unset; cursor: pointer; display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--line-2); align-items: baseline; }
.tl-item:last-child { border-bottom: none; }
.tl-item:hover .tl-section { color: var(--brand-700); }
.tl-item:focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; border-radius: 3px; }
.tl-date { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-soft); font-size: var(--fs-sm); }
.tl-section { color: var(--text); }

/* Sensitive (clinical / restricted) section panel marker. */
.panel-sensitive { border-top: 2px solid var(--amber); }
.sensitive-strip { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--amber-700); background: var(--amber-soft); border: 1px solid var(--amber-line); border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 14px; }
.sensitive-strip svg { width: 15px; height: 15px; flex: none; }

/* ---------- Dashboard / stat cards ---------- */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 14px; margin-bottom: 18px; }
.stat { padding: 15px 17px; position: relative; overflow: hidden; }
.stat::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line); }
.stat.accent::before { background: var(--brand); }
.stat .n { font-size: var(--fs-xl); font-weight: var(--w-semi); color: var(--text); letter-spacing: -.01em; line-height: 1; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.stat .l { color: var(--text-soft); font-size: var(--fs-sm); margin-top: 6px; }
.stat.warn::before { background: var(--amber); }
.stat.danger::before { background: var(--red); }
.stat.danger .n { color: var(--red); }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }

/* Service snapshot — a reporting band instead of a strip of KPI cards. */
.snapshot { padding: 16px 20px; margin-bottom: 16px; }
.snapshot-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.snapshot-head h3 { margin: 0; }
.snapshot-asof { margin-left: auto; font-size: var(--fs-sm); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.snapshot-figs { display: flex; flex-wrap: wrap; }
.fig { padding: 2px 22px; border-left: 1px solid var(--line-2); }
.fig:first-child { padding-left: 0; border-left: none; }
.fig .n { font-family: var(--font-mono); font-size: var(--fs-xl); font-weight: var(--w-semi); color: var(--text); letter-spacing: -.01em; line-height: 1; font-variant-numeric: tabular-nums; }
.fig .l { font-size: var(--fs-sm); color: var(--text-soft); margin-top: 5px; }
.snapshot-line { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-2); font-size: var(--fs-sm); color: var(--text-soft); }
.dash-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.dash-grid .chart { margin-bottom: 0; }
@media (max-width: 620px) {
  .fig { padding: 4px 14px 4px 0; border-left: none; }
  .fig:not(:first-child) { border-top: 1px solid var(--line-2); padding-top: 8px; }
  .snapshot-figs { flex-direction: column; }
}

/* ---------- Charts / report figures ---------- */
.chart { padding: 18px 20px; margin-bottom: 16px; }
.chart-caption { font-size: var(--fs-sm); color: var(--text-faint); margin: -6px 0 14px; font-variant-numeric: tabular-nums; }
.report-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.report-toolbar h3 { margin: 0; }
.report-toolbar .spacer { margin-left: auto; }
.bar-row { display: grid; grid-template-columns: 180px 1fr 64px; gap: 12px; align-items: center; margin: 7px 0; font-size: var(--fs-base); }
.bar-row .label { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { background: var(--line-2); border-radius: 4px; overflow: hidden; }
/* Data bars in Lighthouse orange (the brand's hero colour). */
/* --brand-600 clears 3:1 non-text contrast on the track; exact counts sit beside each bar. */
.bar { height: 14px; background: var(--brand-600); border-radius: 4px; min-width: 3px; transition: width .45s var(--ease); }
.bar-row .num { text-align: right; color: var(--text-soft); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* ---------- Audit / event severity badges ---------- */
.audit-tag { display: inline-block; font-size: var(--fs-xs); font-weight: var(--w-semi); padding: 2px 9px; border-radius: var(--radius-sm); white-space: nowrap; letter-spacing: .01em; }
.audit-danger { background: var(--red-soft); color: var(--red); }
.audit-warn { background: var(--amber-soft); color: var(--amber-700); }
.audit-notice { background: var(--brand-soft); color: var(--brand-ink); }
.audit-info { background: var(--neutral-soft); color: var(--neutral-text); }
.panel.sec-alert { border-left: 3px solid var(--red); }
.panel.sec-watch { border-left: 3px solid var(--amber); }
/* Destructive text-button (e.g. "Revoke all") — quiet until hovered. */
.link-danger { all: unset; cursor: pointer; color: var(--red); font-size: var(--fs-sm); font-weight: var(--w-med); padding: 4px 9px; border-radius: var(--radius-sm); }
.link-danger:hover { background: var(--red-soft); }
.link-danger:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.link-danger:disabled { opacity: .5; cursor: default; }

/* ---------- Document library ---------- */
.doc-lib-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.doc-note { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--text-faint); margin-top: 14px; }
.doc-note svg { width: 14px; height: 14px; flex: none; }
.doc-type { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-xs); font-weight: var(--w-semi); letter-spacing: .04em; padding: 3px 8px; border-radius: var(--radius-sm); background: var(--surface-2); border: 1px solid var(--line); color: var(--text-soft); }
.doc-type svg { width: 13px; height: 13px; }
.doc-actions { display: flex; gap: 8px; justify-content: flex-end; }
.doc-missing { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-soft); background: var(--neutral-soft); border: 1px dashed var(--line); border-radius: 999px; padding: 3px 10px; }
tr.is-missing td { opacity: .7; }

/* ---------- Modal ---------- */
.modal-back {
  position: fixed; inset: 0; background: rgba(43, 37, 33, .55);
  display: grid; place-items: center; z-index: 60; padding: 20px; animation: fade .15s var(--ease);
}
@keyframes fade { from { opacity: 0; } }
.modal {
  background: var(--surface); border-radius: var(--radius-lg); padding: 22px 24px; max-width: 520px; width: 100%;
  max-height: 88vh; overflow: auto; box-shadow: var(--shadow-lg); animation: pop .18s var(--ease);
}
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.modal h2 { margin: 0 0 12px; font-size: var(--fs-lg); font-weight: var(--w-semi); line-height: var(--lh-tight); }
.modal p { color: var(--text-soft); font-size: var(--fs-base); }
.modal .warn { background: var(--brand-soft); border-left: 3px solid var(--brand); padding: 11px 13px; border-radius: var(--radius-sm); color: #7a4a12; }
.modal .danger-note { background: var(--red-soft); border-left: 3px solid var(--red); padding: 11px 13px; border-radius: var(--radius-sm); color: #7d211c; font-size: var(--fs-base); }
.modal label.req { display: block; font-size: var(--fs-sm); color: var(--text-soft); margin: 14px 0 0; font-weight: var(--w-med); }
.modal input[type=text], .modal input[type=password], .modal textarea { width: 100%; box-sizing: border-box; margin-top: 6px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 11px; font-size: var(--fs-base); font-family: inherit; }
.modal input:focus, .modal textarea:focus { border-color: var(--brand-700); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }
.modal-actions button { border-radius: var(--radius-sm); padding: 9px 17px; cursor: pointer; font-size: var(--fs-base); border: 1px solid var(--line); background: #fff; font-weight: var(--w-med); transition: .15s var(--ease); }
.modal-actions button:hover { background: var(--surface-2); }
.modal-actions .confirm { background: var(--brand-700); color: #fff; border-color: var(--brand-700); }
.modal-actions .confirm:hover { background: var(--brand-800); }
.modal-actions .confirm:disabled { opacity: .5; cursor: not-allowed; }
.modal-actions .confirm.danger { background: var(--red); border-color: var(--red); }
.modal-actions .confirm.danger:hover { background: #9c1f18; }

/* ---------- Connection error toast ---------- */
.conn-error {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  background: var(--ink-800); color: #fff; padding: 11px 18px; border-radius: var(--radius);
  box-shadow: var(--shadow-lg); max-width: 90%; font-size: var(--fs-base); z-index: 80;
}

/* ---------- Inactivity lock (screen lock, not a sign-out) ---------- */
body.locked .app { filter: blur(9px); pointer-events: none; user-select: none; }
.lock-screen {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 24px;
  background: rgba(43, 37, 33, .62); backdrop-filter: blur(3px);
}
.lock-card {
  width: 380px; max-width: 92vw; background: var(--surface); border-radius: var(--radius-lg);
  padding: 30px 30px 26px; box-shadow: var(--shadow-lg); text-align: center;
}
.lock-card .brand-logo { width: 48px; height: 48px; border-radius: var(--radius); margin: 0 auto 14px; }
.lock-card h2 { margin: 0 0 8px; font-size: var(--fs-lg); font-weight: var(--w-semi); }
.lock-card p { color: var(--text-soft); font-size: var(--fs-base); margin: 0 0 18px; line-height: 1.5; }
.lock-card .req { text-align: left; display: block; margin-bottom: 12px; }
.lock-card .req input { width: 100%; box-sizing: border-box; margin-top: 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: var(--fs-base); }
.lock-card .req input:focus { border-color: var(--brand-700); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; }
.lock-status { min-height: 18px; margin: 4px 0 10px; font-size: var(--fs-sm); color: var(--red); }
.lock-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }

/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: var(--brand); padding: 24px; }
.login-main { display: grid; place-items: center; padding: 0; background: transparent; }
.login-card { width: 380px; max-width: 92vw; background: var(--surface); border-radius: var(--radius-lg); padding: 34px 32px; box-shadow: var(--shadow-lg); text-align: center; }
/* Stacked header: lighthouse mark / OFL / Sign in / Lighthouse Foundation.
   The mark leads so the first screen a user sees matches the rest of the app
   (sidebar + lock screen), reusing the same rounded brand tile. */
.login-card .brand-logo { width: 44px; height: 44px; border-radius: var(--radius); margin: 0 auto 12px; }
.login-brand { font-size: var(--fs-lg); font-weight: var(--w-semi); letter-spacing: .1em; color: var(--brand-700); margin: 0 0 10px; }
.login-card h1 { font-size: var(--fs-lg); font-weight: var(--w-semi); margin: 0 0 4px; line-height: var(--lh-tight); }
.login-org { color: var(--text-soft); font-size: var(--fs-base); margin: 0 0 22px; }
.login-sub { color: var(--text-soft); font-size: var(--fs-base); margin: 0 0 22px; }
/* When an instruction line follows the org line (2FA step), tighten the gap. */
.login-org + .login-sub { margin-top: -14px; }
.login-card label { display: block; text-align: left; font-size: var(--fs-sm); color: var(--text-soft); font-weight: var(--w-med); margin-bottom: 14px; }
.login-card input { width: 100%; box-sizing: border-box; margin-top: 6px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: var(--fs-base); background: #fff; transition: .15s var(--ease); }
.login-card input:focus { border-color: var(--brand-700); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; }
.login-card button[type=submit] { width: 100%; background: var(--brand-700); color: #fff; border: none; border-radius: var(--radius-sm); padding: 12px; font-size: var(--fs-md); font-weight: var(--w-semi); cursor: pointer; margin-top: 4px; transition: background .15s var(--ease); }
.login-card button[type=submit]:hover { background: var(--brand-800); }
.login-card button[type=submit]:disabled { opacity: .6; cursor: not-allowed; }
.login-error { background: var(--red-soft); color: var(--red); border-radius: var(--radius-sm); padding: 10px 12px; font-size: var(--fs-base); margin-top: 14px; }
.login-note { color: var(--text-faint); font-size: var(--fs-xs); margin: 18px 0 0; line-height: 1.5; }

/* First-login 2FA enrolment (QR + manual key) */
.enrol-qr { display: grid; place-items: center; margin: 4px 0 10px; }
.enrol-qr img { width: 168px; height: 168px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px; background: #fff; }
.enrol-key-label { color: var(--text-soft); font-size: var(--fs-sm); margin: 0 0 4px; }
.enrol-key { display: block; font-family: var(--font-mono); font-size: var(--fs-sm); letter-spacing: .06em; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 10px; margin: 0 0 16px; word-break: break-all; user-select: all; }


/* ---------- Settings ---------- */
.status-banner { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--radius-sm); font-size: var(--fs-base); font-weight: var(--w-med); margin-bottom: 14px; }
.status-banner svg { width: 15px; height: 15px; flex: none; }
.status-banner.ok { background: var(--green-soft); color: var(--green-700); }
.status-banner.off { background: var(--brand-soft); color: var(--brand-ink); }
.steps { margin: 6px 0 0; padding-left: 22px; }
.steps li { margin: 0 0 11px; line-height: 1.5; }
.step-detail { color: var(--text-soft); font-size: var(--fs-base); margin-top: 3px; white-space: pre-wrap; }
.set-form { display: flex; flex-direction: column; gap: 10px; max-width: 580px; margin: 8px 0 4px; }
.set-row { display: flex; align-items: center; gap: 12px; }
.set-row > span { width: 140px; flex: none; font-size: var(--fs-base); color: var(--text-soft); }
.set-form input[type="text"], .set-form input[type="password"], .set-form input[type="number"], .set-row input[type="text"], .set-row input[type="password"], .set-row input[type="number"], .set-row textarea {
  flex: 1; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; background: var(--surface); color: var(--text);
}
.set-form input:focus, .set-row input:focus, .set-row textarea:focus { border-color: var(--brand-700); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; }
.set-actions { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.set-actions input[type="text"] { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; min-width: 150px; }
.set-hint { font-size: var(--fs-sm); color: var(--text-faint); margin: 2px 0 8px; line-height: 1.45; max-width: 580px; }
.db-card-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.db-card-head h4 { margin: 0; }
.db-card-head svg { color: var(--text-faint); flex: none; }
.db-card-head .pill { margin-left: auto; }
.save-status { font-size: var(--fs-sm); color: var(--text-soft); }

/* TOTP enrolment */
.totp-enrol { margin-top: 6px; }
.totp-qr { width: 180px; height: 180px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px; background: #fff; display: block; }
.totp-secret { font-size: var(--fs-base); color: var(--text-soft); margin: 8px 0 4px; }
.totp-secret code { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 2px 7px; font-family: var(--font-mono); font-size: var(--fs-base); letter-spacing: .04em; color: var(--text); }

/* ---------- Case-note timeline / feed ---------- */
.notes-feed { display: flex; flex-direction: column; gap: 10px; }
.note-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }
.note-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.note-date { font-weight: var(--w-med); color: var(--text); font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.note-pill { font-size: var(--fs-xs); font-weight: var(--w-semi); padding: 2px 9px; border-radius: 999px; background: var(--brand-soft); color: var(--brand-ink); }
.note-author { margin-left: auto; font-size: var(--fs-sm); color: var(--text-soft); }
.note-meta { font-size: var(--fs-sm); color: var(--text-faint); margin-bottom: 8px; }
.note-body { white-space: pre-wrap; line-height: 1.6; color: var(--text); font-size: var(--fs-base); max-width: 72ch; }
.note-toggle { margin-top: 6px; background: none; border: none; padding: 0; cursor: pointer; color: var(--brand-700); font-weight: var(--w-med); font-size: var(--fs-sm); }
.note-toggle:hover { text-decoration: underline; }
.note-follow { margin-top: 10px; padding: 8px 11px; background: var(--amber-soft); border-radius: var(--radius-sm); font-size: var(--fs-sm); line-height: 1.5; color: var(--text); }
.note-follow-label { font-weight: var(--w-semi); color: var(--amber-700); margin-right: 7px; }
.notes-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }

/* Compact / Detailed view toggle for text-heavy sections. */
.view-toggle { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.view-toggle .vt { background: var(--surface); border: none; padding: 6px 12px; font: inherit; font-size: var(--fs-sm); color: var(--text-soft); cursor: pointer; }
.view-toggle .vt + .vt { border-left: 1px solid var(--line); }
.view-toggle .vt:hover { background: var(--surface-2); color: var(--text); }
.view-toggle .vt.on { background: var(--ink-800); color: #fff; }
.view-toggle .vt.on:hover { background: var(--ink-800); color: #fff; }

/* Compact narrative: clamp long text to ~3 lines with a soft fade, then expand
   per card. max-height clamps synchronously on first layout (unlike
   -webkit-line-clamp, which settles a frame late), so the JS overflow
   measurement that drives .can-expand is reliable. The "Show more" toggle is
   shown ONLY when the body is actually clamped — never on short notes or in
   detailed view. */
.sec-compact .note-body { max-height: 4.9em; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 68%, transparent); mask-image: linear-gradient(180deg, #000 68%, transparent); }
.sec-compact .note-body.expanded { max-height: none; overflow: visible; -webkit-mask-image: none; mask-image: none; }
.note-toggle { display: none; }
.sec-compact .note-card.can-expand .note-toggle { display: inline-block; }
.notes-search { flex: 1; max-width: 380px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; background: var(--surface); color: var(--text); }
.notes-search:focus { border-color: var(--brand-700); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; }
.sec-sort { padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); font: inherit; background: var(--surface); color: var(--text); cursor: pointer; }
.sec-sort:focus { border-color: var(--brand-700); box-shadow: 0 0 0 3px var(--brand-soft); outline: none; }
.notes-count { font-size: var(--fs-sm); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.notes-more { margin-top: 14px; text-align: center; }
.notes-more-btn { background: none; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 18px; cursor: pointer; color: var(--text); font: inherit; }
.notes-more-btn:hover { background: var(--surface-2); }

/* ---------- Suppressed report cell ---------- */
.bar.bar-suppressed { background: repeating-linear-gradient(45deg, var(--line), var(--line) 4px, var(--line-2) 4px, var(--line-2) 8px); }
.bar-row .num.suppressed { color: var(--text-faint); font-style: italic; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .sidebar {
    position: fixed; z-index: 50; width: var(--sidebar-w); transform: translateX(-100%);
    transition: transform .22s var(--ease); height: 100vh;
  }
  .app:not(.nav-open) .sidebar { visibility: hidden; }
  .app.nav-open .sidebar { transform: translateX(0); visibility: visible; box-shadow: var(--shadow-lg); }
  .app.nav-open::after { content: ""; position: fixed; inset: 0; background: rgba(43, 37, 33, .42); z-index: 45; }
  .nav-toggle { display: inline-flex; }
  main#view { padding: 18px; }
  thead th { position: static; }            /* avoid double-sticky under the appbar */
  .sidenav a { padding: 11px 12px; }
  .tab { padding: 10px 15px; }
}
@media (max-width: 620px) {
  .conf-chip span, .privacy-toggle span { display: none; }
  .privacy-toggle { padding: 6px; }
  .field { grid-template-columns: 1fr; gap: 2px; }
  .bar-row { grid-template-columns: 116px 1fr 52px; }
  .filters { flex-direction: column; align-items: stretch; }
  .filters .search-wrap { min-width: 0; width: 100%; }
  .filters .field-pair { width: 100%; }
  .filters .field-pair select { width: 100%; }
  .filters-right { margin-left: 0; justify-content: space-between; width: 100%; padding-left: 0; border-left: none; }
  .btn-export, .btn-primary { width: 100%; }
  /* Dense tables collapse to labelled stacked cards. */
  .stack-cards table, .stack-cards thead, .stack-cards tbody, .stack-cards tr, .stack-cards td { display: block; }
  .stack-cards thead { position: absolute; left: -9999px; }
  .stack-cards tr { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 10px; padding: 2px 0; }
  .stack-cards tr:hover { box-shadow: none; }
  .stack-cards td { display: grid; grid-template-columns: 104px 1fr; gap: 10px; border: none; padding: 7px 12px; }
  .stack-cards td::before { content: attr(data-label); color: var(--text-faint); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; font-weight: var(--w-semi); }
  .doc-actions { justify-content: flex-start; }
}

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

/* ---------- Print (clean report output) ---------- */
@media print {
  .sidebar, .appbar, .tabs, .report-toolbar .btn-export, .report-toolbar .btn-secondary, .nav-toggle,
  .summary-head button, .detail-actions, .detail-nav, .note-toggle, .privacy-toggle, .conf-chip { display: none !important; }
  .app { display: block; }
  main#view { padding: 0; max-width: none; }
  .panel, .chart, .stat, .people { border: 1px solid #ccc; box-shadow: none; }
  .bar { background: #555 !important; }
  .stat::before { display: none; }
  /* Never print a truncated clinical note — expand clamped bodies on paper. */
  .sec-compact .note-body { max-height: none !important; overflow: visible !important; -webkit-mask-image: none !important; mask-image: none !important; }
  a { color: inherit; text-decoration: none; }
}