/* =============================================================
   NHA-AI design spec — canonical CSS
   Spec: ~/OpenClaw-Vault/projects/Website Conventions/design-spec/nha-ai.md
   Source mockups: ~/Claude-Projects/NHAWork/docs/mockups/nha-ai-system-2026-04-27/
   Public URL: https://nha-ai.com/shared/design.css
   Hub conversion: 2026-04-28 (v2 — adds .shell-nav, .shell-hamburger, apps-grid)
   First conversion: analytics.nha-ai.com (2026-04-27)
   ============================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=DM+Sans:wght@500;600;700&family=Fira+Code:wght@500;600&display=swap');

:root {
  /* ─── NHA brand anchors ─── */
  --nha-blue:        #003865;
  --nha-blue-deep:   #002d52;
  --nha-blue-mid:    #0a4d7a;
  --nha-blue-light:  #1a6396;
  --nha-blue-100:    #e6eef5;
  --nha-blue-50:     #f3f6fa;

  --nha-cyan:        #00aeef;
  --nha-cyan-dim:    rgba(0, 174, 239, 0.10);
  --nha-cyan-soft:   #e0f4fc;

  --nha-green:       #77b800;
  --nha-green-dim:   rgba(119, 184, 0, 0.10);
  --nha-green-soft:  #eef5db;

  --nha-orange:      #fe6401;
  --nha-orange-dim:  rgba(254, 100, 1, 0.10);
  --nha-orange-soft: #fde8d4;

  /* ─── Surfaces ─── */
  --bg:        #F7F7F8;
  --surface:   #FFFFFF;
  --paper:     #FAFAFB;
  --raised:    #FFFFFF;

  /* ─── Ink ─── */
  --ink:       #111118;
  --ink-soft:  #52525B;
  --ink-faint: #A1A1AA;
  --ink-ghost: #D4D4D8;

  /* ─── Lines & fills ─── */
  --line-soft:    #F1F2F4;
  --line:         #E4E4E7;
  --line-strong:  #D4D4D8;
  --fill-soft:    #F4F5F7;
  --fill:         #E4E4E7;

  /* ─── Semantic states ─── */
  --success:     var(--nha-green);
  --success-bg:  var(--nha-green-soft);
  --success-fg:  #4d7600;
  --info:        var(--nha-cyan);
  --info-bg:     var(--nha-cyan-soft);
  --info-fg:     #006d96;
  --alert:       var(--nha-orange);
  --alert-bg:    var(--nha-orange-soft);
  --alert-fg:    #a13e00;
  --warn:        #B67817;
  --warn-bg:     #FBEFD4;
  --warn-fg:     #7A4D0C;
  --danger:      #B82820;
  --danger-bg:   #F6DEDA;
  --danger-fg:   #7A1A14;
  --progress:    #6B4A8C;
  --progress-bg: #EBE4F2;
  --progress-fg: #3E2A57;

  /* Legacy site-styles.css aliases — preserved for any inline references in HTML */
  --navy:         var(--nha-blue);
  --navy-light:   var(--nha-blue-mid);
  --accent-blue:  var(--nha-cyan);
  --green:        var(--success-fg);
  --green-dim:    var(--nha-green-soft);
  --amber:        var(--warn);
  --amber-dim:    var(--warn-bg);
  --red:          var(--danger);
  --red-dim:      var(--danger-bg);
  --gray:         var(--ink-faint);
  --gray-dim:     var(--fill-soft);
  --bg-soft:      var(--bg);
  --bg-tint:      var(--paper);
  --border:       var(--line);
  --border-soft:  var(--line-soft);
  --text:         var(--ink);
  --text-sec:     var(--ink-soft);
  --text-muted:   var(--ink-faint);
  --good:         var(--success-fg);
  --good-bg:      var(--success-bg);
  --bad:          var(--danger-fg);
  --bad-bg:       var(--danger-bg);
  --purpose-bg:   var(--nha-orange-soft);
  --purpose-border: rgba(254, 100, 1, 0.30);

  /* ─── Typography ─── */
  --font-sans:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-heading: 'DM Sans', var(--font-sans);
  --font-mono:    'Fira Code', ui-monospace, monospace;

  --text-xs:    0.75rem;
  --text-sm:    0.875rem;
  --text-base:  1rem;
  --text-md:    1.0625rem;
  --text-lg:    1.1875rem;
  --text-xl:    1.375rem;
  --text-2xl:   1.75rem;
  --text-3xl:   2.25rem;
  --text-4xl:   3.5rem;

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.55;
  --lh-reading: 1.7;

  /* ─── Radii / spacing / shadows ─── */
  --radius-sm:  0.375rem;
  --radius:     0.625rem;
  --radius-md:  0.5rem;
  --radius-lg:  0.625rem;
  --radius-xl:  0.875rem;
  --radius-2xl: 1.25rem;
  --radius-full: 9999px;

  --shadow-sm:  0 1px 2px 0 rgb(26 22 18 / 0.04);
  --shadow:     0 1px 3px 0 rgb(26 22 18 / 0.06), 0 1px 2px -1px rgb(26 22 18 / 0.04);
  --shadow-md:  0 4px 8px -2px rgb(26 22 18 / 0.06), 0 2px 4px -2px rgb(26 22 18 / 0.04);
  --shadow-lg:  0 12px 20px -6px rgb(26 22 18 / 0.08), 0 4px 8px -4px rgb(26 22 18 / 0.04);
  --ring:       inset 0 0 0 1px var(--line);
  --ring-strong: inset 0 0 0 1px var(--line-strong);

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  --shell-header-h:    64px;
  --shell-curve-h:     40px;   /* 20→40 on 2026-05-12 — design spec said 40 since 2026-04-28 but the CSS never matched. 40px gives the rounded-shoulder scoop clear visibility (Cenovio: "round-edge look"). */
  --shell-curve-radius: 40px;  /* Match curve-h exactly so corners "kiss" the curve's bottom edge — anything smaller leaves dead navy in the middle of the strip. */
}

/* =============================================================
   BASE
   ============================================================= */

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

html, body {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--lh-normal);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: var(--lh-tight);
}
h1 { font-size: var(--text-3xl); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: var(--text-2xl); font-weight: 700; }
h3 { font-size: var(--text-xl);  font-weight: 600; line-height: var(--lh-snug); }
h4 { font-size: var(--text-lg);  font-weight: 600; line-height: var(--lh-snug); }

p { line-height: var(--lh-normal); }

a {
  color: var(--nha-blue-light);
  text-decoration: none;
  transition: color .18s ease;
}
a:hover { color: var(--nha-blue); }

code, kbd, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

*:focus-visible {
  outline: 2px solid var(--nha-cyan);
  outline-offset: 2px;
  border-radius: 4px;
}

/* =============================================================
   SHELL — fixed navy header + curved transition (NHA-AI signature)
   ============================================================= */

.shell-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--shell-header-h);
  background: var(--nha-blue);
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  color: #fff;
  gap: var(--space-3);
  /* Header is flat — the curve effect lives on .shell-content (rounded top
     corners) sitting over .shell-curve (navy strip). v3-direction (rounded
     bottom corners on the header itself) curved the wrong way. */
}
.shell-header .brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-right: var(--space-6);
  flex-shrink: 0;
  text-decoration: none;
  color: #fff;
}
.shell-header .brand img {
  width: 36px; height: 36px;
  border-radius: 8px;
  object-fit: cover;
}
.shell-header .brand-text {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 700;
  letter-spacing: -0.01em;
}
.shell-header .header-tag {
  color: rgba(255,255,255,0.6);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.shell-header .header-meta {
  color: rgba(255,255,255,0.65);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  margin-left: var(--space-4);
}
.shell-header .header-meta strong { color: #fff; font-weight: 600; }

.shell-header .header-user {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: rgba(255,255,255,0.8);
}
.shell-header .header-user-email {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.shell-header .header-logout {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 var(--space-3);
  background: transparent;
  color: rgba(255,255,255,0.85);
  border: 1px solid rgba(255,255,255,0.20);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background .18s, color .18s;
}
.shell-header .header-logout:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Cross-app back-link pill */
.cross-app-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  font-size: var(--text-base);
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  text-decoration: none;
  margin-left: auto;
  transition: background .18s, color .18s;
}
.cross-app-back:hover {
  background: rgba(255,255,255,0.16);
  color: #fff;
}
.cross-app-back .arrow { display: inline-block; transition: transform .18s ease; }
.cross-app-back:hover .arrow { transform: translateX(-2px); }

/* Curve mechanism — 2026-04-29 v6: in-flow curve, fixed header.
   The header stays fixed (z:100). The curve is now a regular block element
   that flows in document, sitting immediately under the header (offset by
   margin-top: var(--shell-header-h)). As the user scrolls, the curve scrolls
   away naturally; content scrolls under the fixed (opaque-navy) header,
   which masks it cleanly. No more half-letter clipping at the curve's
   bottom edge.

   v5 (deprecated) had .shell-curve as position:fixed, which created a
   permanent floating band at the top with a hard horizontal seam at its
   bottom edge. Content scrolling through that seam appeared half-clipped.
   See thread [2G] for the design discussion. */
.shell-curve {
  position: relative;
  margin-top: var(--shell-header-h);  /* clears the fixed header */
  height: var(--shell-curve-h);
  background: var(--nha-blue);
}
.shell-curve::after {
  content: '';
  position: absolute;
  inset: 0;
  /* The curve must match the page body — it's the body "rising up" into
     the navy header with rounded shoulders, not a white card floating on
     top of the body. Use var(--bg). Using var(--surface) (#FFFFFF) creates
     a visible white horizontal band between the navy header and the gray
     body — Cenovio called this out 2026-05-12 as the recurring "shell
     theme not applied correctly" complaint. Don't reintroduce it. */
  background: var(--bg);
  border-radius: var(--shell-curve-radius) var(--shell-curve-radius) 0 0;
}

.shell-content {
  /* No margin-top needed — .shell-curve above already pushed us past the
     fixed header. min-height ensures full-viewport pages have a reasonable
     minimum height regardless of content. */
  min-height: calc(100vh - var(--shell-header-h) - var(--shell-curve-h));
}

/* =============================================================
   TABS — sticky white nav under the curve
   ============================================================= */

.tabs {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 0 var(--space-6);
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  position: sticky;
  /* Sticky position is relative to the fixed header only; the in-flow curve
     scrolls away on its own. Sticky to header bottom = 64px. */
  top: var(--shell-header-h);
  z-index: 90;
  scrollbar-width: thin;
}
.tab {
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 var(--space-4);
  background: transparent;
  color: var(--ink-soft);
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}
.tab:hover { color: var(--ink); background: var(--paper); }
.tab.active {
  color: var(--nha-blue);
  border-bottom-color: var(--nha-blue);
}
.tab-divider {
  width: 1px;
  background: var(--line);
  margin: var(--space-3) var(--space-2);
  align-self: stretch;
  flex: 0 0 auto;
}
.tab.tab-admin { color: var(--ink-faint); font-style: italic; font-weight: 600; }
.tab.tab-admin:hover { color: var(--nha-blue); }
.tab.tab-admin.active { color: var(--nha-blue); font-style: normal; border-bottom-color: var(--nha-blue); }

/* =============================================================
   PAGE CONTAINERS
   ============================================================= */

.app-page,
main {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6) var(--space-16);
}

.view.hidden { display: none; }

.view-header { margin-bottom: var(--space-6); }
.view-header h1 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--nha-blue);
  letter-spacing: -0.02em;
}
.view-header .lede,
.lede {
  margin-top: var(--space-3);
  font-size: var(--text-md);
  color: var(--ink-soft);
  line-height: var(--lh-normal);
  max-width: 60ch;
}
.lede code {
  background: var(--paper);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--nha-blue);
  border: 1px solid var(--line);
}

.admin-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--alert-fg);
  background: var(--nha-orange-soft);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-3);
}

.section-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: var(--space-8) 0 var(--space-4);
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.section-title .section-sub {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--ink-faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.section-sub {
  font-weight: 400;
  font-size: var(--text-sm);
  color: var(--ink-faint);
  letter-spacing: 0;
  margin-left: var(--space-2);
}

/* =============================================================
   ABOUT BOX (collapsible definitions)
   ============================================================= */

.about-box {
  background: var(--paper);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
  overflow: hidden;
  border: 1px solid var(--line);
}
.about-box > summary {
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--alert-fg);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  user-select: none;
}
.about-box > summary::-webkit-details-marker { display: none; }
.about-box > summary::before {
  content: '◆';
  font-size: 0.6em;
  color: var(--alert);
  transition: transform 0.15s;
}
.about-box[open] > summary::before { transform: rotate(45deg); }
.about-box[open] > summary { border-bottom: 1px solid var(--line); }
.about-content {
  padding: var(--space-5);
  background: var(--nha-orange-soft);
}
.about-content h4 {
  margin-top: var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
}
.about-content h4:first-child { margin-top: 0; }
.about-content p {
  margin-top: var(--space-2);
  font-size: var(--text-base);
  color: var(--ink-soft);
  line-height: var(--lh-normal);
}
.about-content ul {
  margin-top: var(--space-2);
  padding-left: var(--space-5);
}
.about-content li {
  font-size: var(--text-base);
  color: var(--ink-soft);
  line-height: var(--lh-normal);
  margin-bottom: var(--space-1);
}
.about-content code {
  background: rgba(254, 100, 1, 0.12);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--alert-fg);
}
.caveat,
.about-content .caveat {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: rgba(255,255,255,0.5);
  border-left: 3px solid var(--alert);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  color: var(--ink);
  line-height: var(--lh-normal);
}

/* =============================================================
   FILTERS BAR
   ============================================================= */

.filters {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--ring);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-4);
}
.filters label {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  flex: 1 1 160px;
  min-width: 140px;
}
.filters input,
.filters select {
  height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--ink);
  background: var(--surface);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  min-width: 0;
}
.filters input:focus,
.filters select:focus {
  outline: none;
  border-color: var(--nha-blue);
  box-shadow: 0 0 0 3px rgba(0, 56, 101, 0.18);
}
.btn-reset {
  height: 40px;
  padding: 0 var(--space-4);
  background: var(--surface);
  color: var(--nha-blue);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  cursor: pointer;
  align-self: end;
}
.btn-reset:hover { background: var(--paper); }

/* =============================================================
   KPI ROW
   ============================================================= */

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.kpi {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--ring);
  padding: var(--space-5);
}
.kpi-label, .kpi .lbl {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.kpi-value, .kpi .val {
  margin-top: var(--space-3);
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.kpi-sub, .kpi .sub {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--ink-faint);
  line-height: var(--lh-snug);
}

/* Color modifiers — JS uses .good/.warn/.bad; spec uses .success/.alert/.info */
.kpi.alert .kpi-value, .kpi.alert .val,
.kpi.bad   .kpi-value, .kpi.bad .val { color: var(--alert-fg); }
.kpi.warn  .kpi-value, .kpi.warn .val { color: var(--warn-fg); }
.kpi.success .kpi-value, .kpi.success .val,
.kpi.good    .kpi-value, .kpi.good .val { color: var(--success-fg); }
.kpi.info  .kpi-value, .kpi.info .val { color: var(--info-fg); }

/* =============================================================
   CARDS
   ============================================================= */

.card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--ring);
  overflow: hidden;
}

/* =============================================================
   DATA TABLES
   ============================================================= */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--text-base);
}
.data-table th {
  text-align: left;
  padding: var(--space-3) var(--space-5);
  background: var(--paper);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line);
}
.data-table th.num, .data-table th.center { text-align: right; }
.data-table th.center { text-align: center; }
.data-table td {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--text-base);
  color: var(--ink);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: 0; }
.data-table tr:hover td { background: var(--paper); }
.data-table td.num {
  text-align: right;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.data-table td.staff-name { font-weight: 600; color: var(--ink); }
.data-table th.sortable { cursor: pointer; user-select: none; }
.data-table th.sortable:hover { color: var(--nha-blue); }
.data-table th.sortable.sorted-asc::after { content: ' ▲'; font-size: 9px; }
.data-table th.sortable.sorted-desc::after { content: ' ▼'; font-size: 9px; }
.data-table tr.clickable-row { cursor: pointer; }

.data-table td .pct-chip,
.data-table td .pill,
.pct-chip,
.pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.pct-chip.good, .pill-good       { background: var(--success-bg); color: var(--success-fg); }
.pct-chip.ok,   .pill-info       { background: var(--info-bg);    color: var(--info-fg); }
.pct-chip.weak, .pill-warn       { background: var(--warn-bg);    color: var(--warn-fg); }
.pct-chip.bad,  .pill-bad        { background: var(--alert-bg);   color: var(--alert-fg); }
.pill-neutral                    { background: var(--fill-soft);  color: var(--ink-soft); }

.data-table td .see-receipts {
  color: var(--nha-blue-light);
  font-size: var(--text-sm);
  font-weight: 500;
  text-decoration: none;
  margin-left: var(--space-2);
}
.data-table td .see-receipts:hover { text-decoration: underline; }

/* =============================================================
   V2 — Stale pending row expansion
   ============================================================= */

.v2-row.expanded td { background: var(--paper); }
.v2-row td.v2-msg-cell { max-width: 380px; }
.v2-row td.v2-staff-cell { min-width: 180px; max-width: 240px; font-size: var(--text-sm); line-height: var(--lh-snug); }
.v2-row td.v2-staff-cell small { font-size: var(--text-xs); color: var(--ink-faint); }
.v2-msg-primary { color: var(--ink); }
.v2-msg-count-tag {
  display: inline-block;
  background: var(--nha-cyan);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
  letter-spacing: 0.03em;
}
.v2-fp-flag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--warn-fg);
  background: var(--warn-bg);
  padding: 2px 7px;
  border-radius: 3px;
  margin-left: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: help;
}
.v2-reason-code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-soft);
  background: var(--paper);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--line);
}
.v2-reason-ai {
  display: inline-block;
  font-size: var(--text-sm);
  line-height: var(--lh-snug);
  color: var(--ink);
  font-style: italic;
  max-width: 320px;
  vertical-align: top;
}
.v2-context-row td {
  padding: var(--space-4) var(--space-5);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.v2-context h5 {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 var(--space-2);
}
.v2-context-block {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.v2-context-block.prior   { border-left: 3px solid var(--warn); }
.v2-context-block.pending-msg { border-left: 3px solid var(--nha-blue); }
.v2-context-who { font-size: var(--text-base); color: var(--ink); margin-bottom: 3px; }
.v2-context-who strong { font-weight: 700; }
.v2-context-role { color: var(--ink-soft); font-weight: 500; font-size: var(--text-sm); }
.v2-context-meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.v2-context-text {
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  white-space: pre-wrap;
  word-break: break-word;
}

.age-cell {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--warn-bg);
  color: var(--warn-fg);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-sm);
}
.age-cell.bad { background: var(--alert-bg); color: var(--alert-fg); }

/* =============================================================
   V3 — Clarity stacked bars
   ============================================================= */

.dim-bar-row {
  display: grid;
  grid-template-columns: 200px 1fr 250px;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--line);
}
.dim-bar-row:last-child { border-bottom: 0; }
.dim-bar-label { font-weight: 600; font-size: var(--text-base); color: var(--ink); }
.dim-bar-label small {
  display: block;
  color: var(--ink-faint);
  font-weight: 400;
  font-size: var(--text-xs);
  margin-top: 2px;
  font-family: var(--font-mono);
}
.stacked-bar {
  display: flex;
  height: 32px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--fill-soft);
}
.stacked-bar-segment {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  min-width: 18px;
  transition: width 0.2s;
}
.seg-plus  { background: var(--success); }
.seg-minus { background: var(--alert); }
.seg-zero  { background: var(--ink-ghost); color: var(--ink-soft); }
.dim-bar-legend {
  display: flex;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-faint);
  justify-content: flex-end;
}
.dim-bar-legend span { font-variant-numeric: tabular-nums; }

/* Mockup-style alt: .dim-bar > .label-row + .bar */
.dim-bar { margin-bottom: var(--space-4); }
.dim-bar:last-child { margin-bottom: 0; }
.dim-bar .label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: var(--space-2);
}
.dim-bar .dim-name {
  font-family: var(--font-heading);
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
}
.dim-bar .counts {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-faint);
}
.dim-bar .bar {
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--fill-soft);
  overflow: hidden;
  display: flex;
}
.dim-bar .bar .seg {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
}
.dim-bar .bar .seg.plus  { background: var(--success); }
.dim-bar .bar .seg.zero  { background: var(--ink-ghost); color: var(--ink-soft); }
.dim-bar .bar .seg.minus { background: var(--alert); }

/* =============================================================
   V4 — Block audit cards
   ============================================================= */

.block-card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--ring);
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.block-card-head {
  padding: var(--space-4) var(--space-5);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  cursor: pointer;
  border-bottom: 1px solid var(--line-soft);
}
.block-card-head:hover { background: var(--fill-soft); }
.block-card-meta { font-size: var(--text-sm); color: var(--ink-soft); }
.block-card-meta strong { color: var(--ink); font-weight: 600; }
.block-card-chips { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.dim-chip {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
}
.dim-chip-plus  { background: var(--success-bg); color: var(--success-fg); border: 1px solid rgba(119,184,0,0.40); }
.dim-chip-minus { background: var(--alert-bg);   color: var(--alert-fg);   border: 1px solid rgba(254,100,1,0.40); }
.dim-chip-zero  { background: var(--fill-soft);  color: var(--ink-soft);   border: 1px solid var(--line); }

.block-card-body {
  padding: var(--space-5);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
}
.msg-col h4 {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
  font-weight: 700;
  font-family: var(--font-sans);
}
.msg-col h4 .who {
  color: var(--ink);
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-base);
  margin-left: var(--space-1);
}
.msg-body {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow-y: auto;
}
.msg-time {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-faint);
}
.reasoning {
  grid-column: 1 / -1;
  border-top: 1px dashed var(--line);
  padding-top: var(--space-3);
  margin-top: var(--space-1);
}
.reasoning h4 {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
  font-weight: 700;
  font-family: var(--font-sans);
}
.reasoning-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-2);
}
.reason-item {
  background: var(--paper);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  border-left: 3px solid var(--ink-ghost);
  font-size: var(--text-sm);
}
.reason-item.r-plus  { border-left-color: var(--success); }
.reason-item.r-minus { border-left-color: var(--alert); }
.reason-item-label {
  font-weight: 700;
  font-size: var(--text-xs);
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: 3px;
  letter-spacing: 0.06em;
}
.reason-item-text { color: var(--ink); line-height: var(--lh-snug); }

.block-card.collapsed .block-card-body { display: none; }

/* =============================================================
   V5 — Per-staff receipts (mock-style cards)
   ============================================================= */

.receipt-card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--ring);
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.receipt-card > summary,
.receipt-head {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  list-style: none;
}
.receipt-card > summary::-webkit-details-marker { display: none; }
.receipt-card > summary:hover,
.receipt-head:hover { background: var(--paper); }
.receipt-head .who { font-weight: 600; color: var(--ink); }
.receipt-head .when {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-faint);
}
.receipt-head .frt {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--ink);
  font-size: var(--text-md);
}
.receipt-head .verdict,
.verdict {
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.verdict.within, .verdict-within { background: var(--success-bg); color: var(--success-fg); }
.verdict.over,   .verdict-over   { background: var(--alert-bg);   color: var(--alert-fg); }
.receipt-body {
  padding: var(--space-5) var(--space-5) var(--space-6);
  border-top: 1px solid var(--line-soft);
  background: var(--paper);
  font-size: var(--text-base);
  color: var(--ink);
  line-height: var(--lh-normal);
}
.receipt-body .msg {
  background: var(--surface);
  border-left: 3px solid var(--nha-blue-light);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
  font-size: var(--text-md);
  color: var(--ink);
  line-height: var(--lh-normal);
}
.receipt-body .msg.staff { border-left-color: var(--success); }
.receipt-body .msg-meta {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-faint);
  margin-bottom: 4px;
}

.math-block {
  grid-column: 1 / -1;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--lh-reading);
  margin-top: var(--space-2);
}
.math-block .label { display: inline-block; width: 200px; color: var(--ink-faint); }
.math-block .verdict { margin-top: 6px; font-weight: 700; }
.math-block h4 {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
  font-weight: 700;
}
.why-counted {
  grid-column: 1 / -1;
  border-top: 1px dashed var(--line);
  padding-top: var(--space-3);
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  line-height: var(--lh-normal);
}
.why-counted h4 {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
  font-weight: 700;
}
.why-counted .label {
  display: inline-block;
  width: 200px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.why-counted .nested { margin-left: var(--space-6); }

.v5-staff-hint {
  font-size: var(--text-xs);
  color: var(--nha-cyan);
  margin-left: var(--space-2);
  font-weight: 500;
}
.v5-v6-jump {
  background: var(--nha-cyan-soft);
  border: 1px dashed var(--nha-cyan);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.v5-v6-jump-link {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--info-fg);
}
.v5-v6-jump-link:hover { text-decoration: underline; }
.v5-v6-jump-hint { font-size: var(--text-sm); color: var(--ink-faint); }

/* =============================================================
   V6 — Sparkline + chat list
   ============================================================= */

.v6-sparkline-card { padding: var(--space-5) var(--space-6); }
.v6-sparkline-row {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 80px;
  overflow-x: auto;
}
.v6-spark-bar {
  flex: 0 0 14px;
  background: var(--nha-blue);
  border-radius: 2px 2px 0 0;
  position: relative;
  cursor: help;
  transition: background 0.15s, opacity 0.15s;
  opacity: 0.85;
}
.v6-spark-bar:hover { background: var(--nha-blue-deep); opacity: 1; }

.v6-chat {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--ring);
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.v6-chat-head {
  padding: var(--space-4) var(--space-5);
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-4);
  align-items: center;
  cursor: pointer;
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}
.v6-chat-head:hover { background: var(--fill-soft); }
.v6-chat-head-left { min-width: 0; }
.v6-chat-title { font-size: var(--text-base); color: var(--ink); }
.v6-chat-title strong { font-weight: 700; }
.v6-chat-role {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 4px;
}
.v6-chat-staff-note {
  display: inline-block;
  font-size: var(--text-xs);
  color: var(--ink-soft);
  background: var(--fill-soft);
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 6px;
  font-weight: 500;
}
.v6-search-match-tag {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  background: var(--warn-bg);
  color: var(--warn-fg);
  padding: 2px 6px;
  border-radius: 3px;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.v6-chat-subline {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  margin-top: 3px;
}
.v6-chat-chips {
  display: flex;
  gap: var(--space-1);
  flex-wrap: wrap;
  justify-self: end;
}
.v6-chip {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  background: var(--fill-soft);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  cursor: help;
}
.v6-chip-frt    { background: var(--nha-cyan-soft); color: var(--info-fg);    border-color: rgba(0,174,239,0.40); }
.v6-chip-plus   { background: var(--success-bg);    color: var(--success-fg); border-color: rgba(119,184,0,0.40); }
.v6-chip-minus  { background: var(--alert-bg);      color: var(--alert-fg);   border-color: rgba(254,100,1,0.40); }
.v6-chip-nonresp{ background: var(--alert-bg);      color: var(--alert-fg);   border-color: var(--alert); font-weight: 800; }

.v6-chat-toggle {
  font-size: var(--text-base);
  color: var(--ink-faint);
  transition: transform 0.18s ease, color .18s;
  user-select: none;
}
.v6-chat.open .v6-chat-toggle { transform: rotate(90deg); color: var(--nha-blue); }
.v6-thread-wrap { display: none; padding: var(--space-2) var(--space-5) var(--space-5); background: var(--surface); }
.v6-chat.open .v6-thread-wrap { display: block; }
.v6-thread { display: flex; flex-direction: column; }
.v6-day-sep {
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: var(--space-3) 0 var(--space-1);
  position: relative;
}
.v6-day-sep::before, .v6-day-sep::after {
  content: '';
  position: absolute;
  top: 50%;
  width: calc(50% - 64px);
  height: 1px;
  background: var(--line);
}
.v6-day-sep::before { left: 0; }
.v6-day-sep::after  { right: 0; }

.v6-bubble-row { display: flex; margin: 4px 0; }
.v6-bubble-row.left  { justify-content: flex-start; }
.v6-bubble-row.right { justify-content: flex-end; }
.v6-bubble-row.hidden-by-filter { display: none; }

.msg-bubble {
  max-width: 72%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  word-break: break-word;
}
.msg-bubble .v6-bubble-who {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ink-faint);
  margin-bottom: 3px;
  letter-spacing: 0.04em;
}
.msg-bubble .v6-who-role {
  font-weight: 400;
  color: var(--ink-faint);
  text-transform: none;
}
.msg-bubble .v6-bubble-text { white-space: pre-wrap; }
.msg-bubble .meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  margin-top: 4px;
}
.msg-bubble .meta code {
  background: rgba(0,0,0,0.05);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: var(--text-xs);
}
.msg-self {
  background: var(--nha-blue);
  color: #fff;
  border-top-right-radius: 3px;
}
.msg-self .v6-bubble-who { color: rgba(255,255,255,0.85); }
.msg-self .v6-who-role { color: rgba(255,255,255,0.6); }
.msg-self .meta { color: rgba(255,255,255,0.6); }
.msg-self .meta code { background: rgba(255,255,255,0.18); color: #fff; }
.msg-parent {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
  border-top-left-radius: 3px;
}
.msg-other-staff {
  background: var(--warn-bg);
  color: var(--ink);
  border: 1px solid rgba(182,120,23,0.40);
  border-top-left-radius: 3px;
}
.msg-unknown {
  background: var(--fill-soft);
  color: var(--ink);
  border: 1px dashed var(--line);
}
.non-response-badge,
.you-didnt-reply {
  display: inline-block;
  background: var(--alert-bg);
  color: var(--alert-fg);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 3px;
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid rgba(254,100,1,0.40);
}
.you-didnt-reply { margin-top: 0; margin-left: var(--space-2); }
.highlight {
  background: var(--warn-bg);
  color: var(--warn-fg);
  padding: 1px 2px;
  border-radius: 2px;
  font-weight: 700;
}
.msg-self .highlight { color: var(--warn-fg); }
.v6-thread-empty {
  text-align: center;
  padding: var(--space-5);
  color: var(--ink-faint);
  font-size: var(--text-sm);
  font-style: italic;
}

/* =============================================================
   ADMIN — data model surfaces (mock 06)
   ============================================================= */

.admin-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--ring);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.admin-meta strong { color: var(--ink); font-weight: 700; }
.admin-meta code {
  background: var(--paper);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--line);
  font-size: 0.92em;
  color: var(--nha-blue);
}
.admin-meta-gen { margin-left: auto; color: var(--ink-faint); }

.admin-missing {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--ring);
  padding: var(--space-5) var(--space-6);
  border-left: 3px solid var(--alert);
}
.admin-missing ul { margin: var(--space-3) 0 0; padding-left: var(--space-5); }
.admin-missing li {
  font-size: var(--text-md);
  color: var(--ink);
  line-height: var(--lh-normal);
  margin-bottom: var(--space-2);
}
.admin-missing li strong { color: var(--alert-fg); }
.admin-missing-row {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line-soft);
}
.admin-missing-row:last-child { border-bottom: 0; }
.admin-missing-head {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: 6px;
}
.admin-missing-head code {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--ink);
  background: var(--paper);
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid var(--line);
}
.admin-missing-desc {
  font-size: var(--text-base);
  color: var(--ink);
  margin-bottom: 8px;
  line-height: var(--lh-normal);
}
.admin-missing-detail {
  background: var(--paper);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  line-height: var(--lh-reading);
}
.admin-missing-detail .label {
  display: inline-block;
  width: 90px;
  font-weight: 700;
  color: var(--ink-faint);
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  margin-right: 6px;
}

.schema-group,
.admin-group {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--ring);
  padding: var(--space-6);
  margin-bottom: var(--space-4);
}
.schema-group h3,
.admin-group-name {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--nha-blue);
  letter-spacing: -0.015em;
  margin-bottom: var(--space-1);
}
.schema-group .group-desc,
.admin-group-blurb {
  font-size: var(--text-base);
  color: var(--ink-soft);
  line-height: var(--lh-normal);
  margin-bottom: var(--space-4);
}
.table-list, .admin-group-tables { display: flex; flex-direction: column; gap: var(--space-2); }
.table-row {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(80px, auto) 1fr;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--paper);
  align-items: baseline;
}
.table-name {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  color: var(--nha-blue);
  font-weight: 700;
}
.table-rowcount {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.table-desc {
  font-size: var(--text-base);
  color: var(--ink-soft);
  line-height: var(--lh-snug);
}

.admin-table-card {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--ring);
  overflow: hidden;
}
.admin-table-head {
  padding: var(--space-3) var(--space-4);
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--space-4);
  align-items: center;
  cursor: pointer;
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}
.admin-table-card.collapsed .admin-table-head { border-bottom-color: transparent; }
.admin-table-head:hover { background: var(--fill-soft); }
.admin-table-head-left { display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; }
.admin-table-name {
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--nha-blue);
  background: var(--surface);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
}
.admin-table-rowcount {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
}
.admin-table-role-chips { display: flex; gap: 4px; flex-wrap: wrap; justify-self: end; }
.admin-table-toggle {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  transition: transform 0.18s, color .18s;
  user-select: none;
}
.admin-table-card:not(.collapsed) .admin-table-toggle {
  transform: rotate(90deg);
  color: var(--nha-blue);
}
.admin-table-card.collapsed .admin-table-body { display: none; }
.admin-table-body { padding: var(--space-4) var(--space-5); }
.admin-table-purpose {
  font-size: var(--text-base);
  color: var(--ink);
  line-height: var(--lh-normal);
  margin-bottom: var(--space-2);
}
.admin-table-populated {
  font-size: var(--text-sm);
  color: var(--ink-soft);
  margin-bottom: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--paper);
  border-radius: var(--radius-sm);
  border-left: 2px solid var(--nha-cyan);
}
.admin-table-populated .label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 6px;
}

.role-chip {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: help;
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
}
.role-upstream { background: var(--nha-cyan-soft); color: var(--info-fg);    border-color: rgba(0,174,239,0.40); }
.role-derived  { background: var(--success-bg);    color: var(--success-fg); border-color: rgba(119,184,0,0.40); }
.role-computed { background: var(--progress-bg);   color: var(--progress-fg);border-color: rgba(107,74,140,0.40); }
.role-ops      { background: var(--fill-soft);     color: var(--ink-soft);   border-color: var(--line); }
.role-missing  { background: var(--alert-bg);      color: var(--alert-fg);   border-color: rgba(254,100,1,0.40); }

.admin-col-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin-top: var(--space-1);
}
.admin-col-table th, .admin-col-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--line-soft);
  text-align: left;
  vertical-align: top;
}
.admin-col-table th {
  background: var(--paper);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.admin-col-table tr:last-child td { border-bottom: 0; }
.admin-col-table code { font-size: var(--text-sm); color: var(--ink); font-family: var(--font-mono); }
.admin-col-table code.type {
  font-size: var(--text-xs);
  color: var(--ink-soft);
  background: var(--paper);
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--line);
}
.admin-col-table .col-null { color: var(--ink-faint); font-style: italic; }

.key-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-right: 4px;
}
.key-pk { background: var(--nha-blue); color: #fff; }
.key-fk { background: var(--surface); color: var(--nha-cyan); border: 1px solid var(--nha-cyan); }

.admin-fk-inbound {
  margin-top: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--paper);
  border-radius: var(--radius-sm);
  border: 1px dashed var(--line);
}
.admin-fk-inbound-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.admin-fk-inbound-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 4px var(--space-5);
  font-size: var(--text-sm);
  color: var(--ink-soft);
}
.admin-fk-inbound-item code { font-size: var(--text-sm); color: var(--ink); }

.admin-fk-graph,
.fk-graph {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--ring);
  padding: var(--space-5);
}
.admin-fk-graph .admin-fk-row,
.fk-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  align-items: center;
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: var(--text-base);
}
.admin-fk-graph .admin-fk-row:last-child,
.fk-row:last-child { border-bottom: 0; }
.fk-row .from { color: var(--ink); text-align: right; }
.fk-row .arrow { color: var(--ink-faint); }
.fk-row .to { color: var(--ink); }
.fk-row code, .admin-fk-arrow code {
  background: var(--paper);
  padding: 2px 6px;
  border-radius: 3px;
  color: var(--nha-blue);
  font-weight: 600;
  border: 1px solid var(--line);
}
.admin-fk-from {
  font-weight: 700;
  color: var(--nha-blue);
  font-family: var(--font-mono);
}
.admin-fk-arrows { display: flex; flex-direction: column; gap: 3px; color: var(--ink-soft); }
.admin-fk-arrow strong { color: var(--nha-blue); }

/* =============================================================
   ACCESS — site security panel (mock 06)
   ============================================================= */

.access-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
@media (max-width: 720px) { .access-summary { grid-template-columns: repeat(2, 1fr); } }

.access-tile {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--ring);
  padding: var(--space-5);
}
.access-label {
  font-size: var(--text-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--ink-faint);
}
.access-value {
  margin-top: var(--space-3);
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.access-value-sm {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--ink);
  margin-top: var(--space-3);
  font-family: var(--font-sans);
}

.access-badge {
  display: inline-block;
  margin-left: var(--space-3);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: middle;
}
.access-badge-shared { background: var(--nha-cyan-soft); color: var(--info-fg); }
.access-badge-local  { background: var(--paper);         color: var(--ink-soft); }

.access-scope-note {
  font-size: var(--text-base);
  color: var(--ink-soft);
  line-height: var(--lh-normal);
  margin: calc(var(--space-1) * -1) 0 var(--space-4);
}
.access-scope-note code {
  background: var(--paper);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--nha-blue);
  border: 1px solid var(--line);
}

.access-group {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--ring);
  margin-bottom: var(--space-3);
  overflow: hidden;
}
.access-group > button {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font: inherit;
  color: var(--ink);
}
.access-group > button:hover { background: var(--paper); }
.access-group .access-chev {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  width: 12px;
  transition: transform 0.18s;
}
.access-group[data-open="true"] .access-chev { transform: rotate(90deg); color: var(--nha-blue); }
.access-group .group-name,
.access-group .access-grp-name {
  flex: 1;
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--nha-blue);
  letter-spacing: -0.015em;
}
.access-group .group-rule,
.access-group .access-grp-key {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-soft);
  background: var(--paper);
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--line);
}
.access-group .group-stats { margin-top: var(--space-2); font-size: var(--text-base); color: var(--ink-soft); padding: 0 var(--space-5) var(--space-4); }
.access-group .group-stats strong { color: var(--ink); font-weight: 700; }
.access-group .access-grp-count {
  color: var(--ink-faint);
  font-size: var(--text-sm);
  min-width: 96px;
  text-align: right;
  font-family: var(--font-mono);
}
.access-summary-line {
  padding: 0 var(--space-5) var(--space-3) calc(var(--space-5) + var(--space-4));
  color: var(--ink-soft);
  font-size: var(--text-sm);
  margin-top: calc(-1 * var(--space-2));
}
.access-group-body {
  padding: 0 var(--space-5) var(--space-4);
  display: none;
  border-top: 1px solid var(--line-soft);
  padding-top: var(--space-4);
}
.access-group[data-open="true"] .access-group-body { display: block; }
.access-predicate {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--paper);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--nha-blue);
  margin-bottom: var(--space-3);
  word-break: break-word;
  border: 1px solid var(--line);
}
.access-predicate-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 6px;
  font-weight: 700;
}
.access-subgroup {
  margin-top: var(--space-4);
  border-left: 2px solid var(--line);
  padding-left: var(--space-3);
}
.access-subgroup h3 { font-size: var(--text-base); margin: 0 0 4px; color: var(--nha-blue); }
.access-sub-meta { color: var(--ink-faint); font-size: var(--text-xs); margin-bottom: var(--space-2); }

table.access-people {
  width: 100%;
  border-collapse: collapse;
  margin-top: 6px;
  font-size: var(--text-base);
}
table.access-people thead th {
  text-align: left;
  color: var(--ink-faint);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
table.access-people tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid var(--line-soft);
}
table.access-people tbody tr:last-child td { border-bottom: 0; }
table.access-people .access-jobcode {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--nha-blue);
  background: var(--paper);
  padding: 1px 6px;
  border-radius: 3px;
  display: inline-block;
  border: 1px solid var(--line);
}
table.access-people .access-name { font-weight: 600; }
table.access-people .access-title { color: var(--ink-faint); }
.access-display-only {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink-faint);
  font-style: italic;
}
.access-display-only code {
  font-family: var(--font-mono);
  background: var(--paper);
  padding: 1px 5px;
  border-radius: 3px;
  font-style: normal;
  border: 1px solid var(--line);
}
.access-footnote {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
}
.access-footnote p { margin-bottom: var(--space-3); }
.access-footnote p:last-child { margin-bottom: 0; }
.access-footnote p strong { color: var(--ink); font-weight: 700; }
.access-footnote code {
  background: var(--paper);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--nha-blue);
  border: 1px solid var(--line);
}
.access-footnote a { color: var(--nha-blue-light); }

/* =============================================================
   FOOTER
   ============================================================= */

.footer,
.report-footer {
  margin-top: var(--space-12);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: var(--text-sm);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-family: var(--font-sans);
}
.footer code,
.report-footer code {
  background: var(--paper);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: 0.92em;
  border: 1px solid var(--line);
}

/* =============================================================
   EMPTY STATES + UTILS
   ============================================================= */

.empty {
  text-align: center;
  padding: var(--space-10) var(--space-5);
  color: var(--ink-faint);
  font-size: var(--text-base);
  font-style: italic;
}
.truncate {
  max-width: 420px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink-soft);
}

/* =============================================================
   LOGIN PAGE (mock 04)
   ============================================================= */

.login-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.login-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
  margin-top: calc(var(--shell-header-h) + var(--shell-curve-h));
}
.login-card {
  background: var(--surface);
  border-radius: var(--radius-2xl);
  box-shadow: var(--ring);
  width: 100%;
  max-width: 460px;
  padding: var(--space-10) var(--space-8);
}
.login-brand {
  font-family: var(--font-heading);
  color: var(--nha-blue);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.login-sub {
  color: var(--ink-soft);
  font-size: var(--text-md);
  margin-top: var(--space-2);
  margin-bottom: var(--space-8);
  line-height: var(--lh-normal);
}
.login-form { display: flex; flex-direction: column; gap: var(--space-4); }
.login-form label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.login-form input[type=email] {
  width: 100%;
  padding: var(--space-3) var(--space-4);
  height: 48px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  background: var(--surface);
  color: var(--ink);
}
.login-form input[type=email]::placeholder { color: var(--ink-faint); }
.login-form input[type=email]:focus {
  outline: none;
  border-color: var(--nha-blue);
  box-shadow: 0 0 0 3px rgba(0, 56, 101, 0.18);
}
.login-form button {
  padding: var(--space-3) var(--space-5);
  height: 48px;
  margin-top: var(--space-2);
  background: var(--nha-blue);
  color: #fff;
  border: 0;
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 700;
  cursor: pointer;
  transition: background .18s;
}
.login-form button:hover:not(:disabled) { background: var(--nha-blue-mid); }
.login-form button:disabled { opacity: 0.55; cursor: wait; }
.login-hint {
  font-size: var(--text-base);
  color: var(--ink-soft);
  margin-top: var(--space-5);
  line-height: var(--lh-normal);
}
.login-msg {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  margin-top: var(--space-4);
}
.login-msg.success {
  background: var(--success-bg);
  color: var(--success-fg);
  border-left: 3px solid var(--success);
}
.login-msg.error {
  background: var(--danger-bg);
  color: var(--danger-fg);
  border-left: 3px solid var(--danger);
}
.login-footer {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line-soft);
  font-size: var(--text-sm);
  color: var(--ink-faint);
  line-height: var(--lh-normal);
}

/* =============================================================
   MOCKUPS-only patterns (reports-mockups/ uses these)
   ============================================================= */

/* Mockups header — same shell + curve, different markup class.
   Used by reports-mockups/. Renders the same navy bar + curved transition
   as the canonical .shell-header + .shell-curve pair, but without requiring
   HTML changes to each mockup page. */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--shell-header-h);
  background: var(--nha-blue);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0 var(--space-6);
  color: #fff;
}
.site-header::after {
  content: '';
  position: fixed;
  top: var(--shell-header-h);
  left: 0; right: 0;
  height: var(--shell-curve-h);
  background: var(--nha-blue);
  z-index: 99;
}
body:has(> .site-header)::before {
  content: '';
  position: fixed;
  top: var(--shell-header-h);
  left: 0; right: 0;
  height: var(--shell-curve-h);
  background: var(--bg);
  border-radius: var(--shell-curve-radius) var(--shell-curve-radius) 0 0;
  z-index: 100;
  pointer-events: none;
}
.site-header + * { margin-top: calc(var(--shell-header-h) + var(--shell-curve-h)); }
.site-header a { color: #fff; text-decoration: none; }
.site-header .brand {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--text-md);
  letter-spacing: -0.01em;
}
.site-header .crumb {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.65);
  font-family: var(--font-sans);
  margin-left: var(--space-1);
}
.site-header .crumb::before { content: "·"; margin-right: var(--space-2); opacity: 0.65; }
.site-header .back {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid rgba(255,255,255,0.15);
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius);
  font-size: var(--text-base);
  color: rgba(255,255,255,0.85);
  transition: background 120ms, color 120ms;
}
.site-header .back:hover { background: rgba(255,255,255,0.16); color: #fff; }

/* No-op — retained as a defensive reset so any local inline override
   targeting body::before stays predictable. */
body::before {
  content: none;
  display: none;
  position: fixed;
  top: calc(var(--shell-header-h) + var(--shell-curve-h));
  left: 0; right: 0;
  height: var(--shell-curve-h);
  background: var(--bg);
  border-radius: var(--shell-curve-radius) var(--shell-curve-radius) 0 0;
  z-index: 98;
  margin-top: calc(-1 * var(--shell-curve-h));
  pointer-events: none;
}

/* Page containers (mockups) */
.page {
  max-width: 980px;
  margin: 0 auto;
  padding: var(--space-10) var(--space-6) var(--space-16);
}
.page.page-narrow,
.page-narrow { max-width: 720px; }
.page.page-wide,
.page-wide { max-width: 1240px; }

.page-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
  margin-bottom: var(--space-2);
  color: var(--nha-blue);
}
.page-subtitle {
  font-size: var(--text-md);
  color: var(--ink-soft);
  margin-bottom: var(--space-6);
  line-height: var(--lh-normal);
}

/* Why-this-exists panel */
.purpose {
  background: var(--nha-orange-soft);
  border: 1px solid rgba(254, 100, 1, 0.30);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-6);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
}
.purpose summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--alert-fg);
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-2);
  list-style: none;
  font-family: var(--font-sans);
}
.purpose summary::-webkit-details-marker { display: none; }
.purpose summary::before { content: "▾  "; opacity: 0.6; font-size: 10px; }
.purpose[open] summary::before { content: "▴  "; }
.purpose p { margin: 6px 0; color: var(--ink); }
.purpose .label { font-weight: 700; color: var(--alert-fg); }
.purpose .meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(254, 100, 1, 0.30);
  font-size: var(--text-sm);
}
.purpose .meta-row span { color: var(--ink-soft); }
.purpose .meta-row strong { color: var(--ink); font-weight: 700; }

/* Mockup `.section` block (different from `.section-title` heading) */
.section {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--ring);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-4);
}

/* table.report (mockups) */
table.report {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
  font-size: var(--text-base);
}
table.report th, table.report td {
  text-align: left;
  padding: var(--space-3) var(--space-3);
  border-bottom: 1px solid var(--line-soft);
}
table.report th {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  background: var(--paper);
}
table.report td { font-variant-numeric: tabular-nums; }
table.report td.text { font-variant-numeric: normal; }
table.report tr:last-child td { border-bottom: none; }
table.report .num { text-align: right; font-family: var(--font-mono); }
table.report .center { text-align: center; }

/* Glossary tooltip */
.term {
  border-bottom: 1px dotted var(--ink-faint);
  cursor: help;
  position: relative;
}
.term:hover .term-tip { display: block; }
.term-tip {
  display: none;
  position: absolute;
  top: 100%; left: 0;
  background: var(--nha-blue);
  color: #fff;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: 400;
  width: max-content;
  max-width: 280px;
  z-index: 10;
  margin-top: 4px;
  box-shadow: var(--shadow-lg);
}

/* Filter bar (mockups variant) */
.filter-bar {
  background: var(--surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--ring);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: end;
}
.filter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
}
.filter label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.filter select, .filter input {
  height: 40px;
  padding: 0 var(--space-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  background: var(--surface);
  color: var(--ink);
}

/* TOC-specific (mockups index) */
.toc-intro {
  font-size: var(--text-md);
  color: var(--ink-soft);
  margin-bottom: var(--space-8);
  line-height: var(--lh-normal);
}
.toc-group { margin-bottom: var(--space-8); }
.toc-group h2 {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--nha-blue);
  margin-bottom: var(--space-2);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}
.toc-group .group-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  margin-right: var(--space-2);
  font-weight: 700;
}
.toc-group .group-tag.quick { background: var(--nha-cyan-soft);  color: var(--info-fg); }
.toc-group .group-tag.clear { background: var(--success-bg);     color: var(--success-fg); }
.toc-group .group-tag.kind  { background: var(--nha-orange-soft);color: var(--alert-fg); }
.toc-group .group-tag.ops   { background: var(--fill-soft);      color: var(--ink-soft); }

.toc-list { list-style: none; }
.toc-list li {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  margin-bottom: var(--space-2);
  background: var(--surface);
  align-items: flex-start;
  transition: background 120ms, border-color 120ms, transform 120ms;
}
.toc-list li:hover {
  background: var(--paper);
  border-color: var(--line-strong);
  transform: translateX(2px);
}
.toc-list a {
  color: var(--nha-blue);
  text-decoration: none;
  font-weight: 700;
}
.toc-list a:hover { color: var(--nha-blue-mid); text-decoration: underline; }
.toc-list .q-number {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--ink-faint);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  width: 32px;
  flex-shrink: 0;
  padding-top: 4px;
}
.toc-list .q-body { flex: 1; }
.toc-list .q-question { font-size: var(--text-md); line-height: var(--lh-snug); }
.toc-list .q-meta {
  margin-top: 4px;
  font-size: var(--text-sm);
  color: var(--ink-faint);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}
.toc-list .q-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.toc-list .q-tag.audience  { background: var(--nha-cyan-soft); color: var(--info-fg); }
.toc-list .q-tag.mobile-yes{ background: var(--success-bg);    color: var(--success-fg); }
.toc-list .q-tag.mobile-no { background: var(--fill-soft);     color: var(--ink-soft); }
.toc-list .q-status-coming {
  display: inline-block;
  padding: 2px 7px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  background: var(--warn-bg);
  color: var(--warn-fg);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* =============================================================
   MOBILE
   ============================================================= */

@media (max-width: 1024px) {
  .kpi-row { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
  .access-summary { grid-template-columns: repeat(2, 1fr); }
  .block-card-body { grid-template-columns: 1fr; }
  .dim-bar-row { grid-template-columns: 180px 1fr; }
  .dim-bar-legend { grid-column: 1 / -1; justify-content: flex-start; }
}

@media (max-width: 720px) {
  .shell-header { padding: 0 var(--space-4); gap: var(--space-2); }
  .shell-header .header-meta,
  .shell-header .header-tag { display: none; }
  .shell-header .header-user-email { display: none; }
  .tabs { padding: 0 var(--space-3); }
  .tab { font-size: var(--text-sm); padding: 0 var(--space-3); }
  .app-page, main { padding: var(--space-5) var(--space-4) var(--space-12); }
  .page { padding: var(--space-5) var(--space-4) var(--space-12); }
  .filters { padding: var(--space-4); gap: var(--space-3); }
  .filters label { flex: 1 1 100%; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .kpi { padding: var(--space-4); }
  .kpi-value, .kpi .val { font-size: 1.5rem; }
  .v6-chat-head { grid-template-columns: 1fr; gap: var(--space-2); }
  .v6-chat-chips { justify-self: start; }
  .msg-bubble { max-width: 92%; }
  .admin-table-head { grid-template-columns: 1fr; gap: var(--space-2); }
  .admin-table-role-chips { justify-self: start; }
  .admin-fk-row { grid-template-columns: 1fr; gap: 4px; }
  .footer, .report-footer { padding: var(--space-3) var(--space-4); }
}

@media (max-width: 480px) {
  .kpi-row { grid-template-columns: 1fr 1fr; }
}

/* Hide-on-mobile utility (mockups) */
@media (max-width: 640px) {
  .hide-on-mobile { display: none !important; }
  .desktop-only-block { display: none; }
  .desktop-only-block + .desktop-only-msg { display: block; }
  .desktop-only-msg {
    background: var(--info-bg);
    color: var(--info-fg);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: var(--text-base);
  }
}
@media (min-width: 641px) {
  .desktop-only-msg { display: none; }
}

/* =============================================================
   SHELL NAV — horizontal pill nav inside the shell header
   Used on the hub (Apps / About). Subdomains usually skip this
   in favor of .cross-app-back. Mobile collapses to .shell-hamburger.
   ============================================================= */

.shell-nav {
  display: flex;
  gap: var(--space-2);
  margin-left: auto;
}
.shell-nav a,
.shell-nav button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-weight: 500;
  color: rgba(255,255,255,0.75);
  background: transparent;
  border: 0;
  text-decoration: none;
  cursor: pointer;
  min-height: 44px;
  transition: background .18s ease, color .18s ease;
}
.shell-nav a:hover,
.shell-nav button:hover {
  background: rgba(255,255,255,0.08);
  color: #fff;
}
.shell-nav a.active,
.shell-nav button.active {
  background: rgba(255,255,255,0.14);
  color: #fff;
}
.shell-nav a.active::before,
.shell-nav button.active::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--nha-cyan);
}

.shell-hamburger {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.20);
  background: transparent;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  margin-left: auto;
}

@media (max-width: 720px) {
  .shell-nav { display: none; }
  .shell-hamburger { display: inline-flex; }
}

/* =============================================================
   APPS GRID — the iPhone/iPad signature
   76px squircles, 4-col desktop / 3-col tablet / 2-col mobile.
   ============================================================= */

.apps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8) var(--space-5);
  max-width: 560px;
  margin: 0 auto;
  padding-top: var(--space-4);
}
@media (max-width: 720px) {
  .apps-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6) var(--space-3); }
}
@media (max-width: 420px) {
  .apps-grid { grid-template-columns: repeat(2, 1fr); }
}

.app-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  padding: var(--space-2);
  border-radius: var(--radius-lg);
  transition: transform .15s ease;
}
.app-tile:active { transform: scale(0.96); }
.app-tile:hover .app-icon {
  box-shadow: 0 6px 18px rgba(0, 56, 101, 0.10);
  transform: translateY(-2px);
}

.app-icon {
  width: 76px; height: 76px;
  border-radius: 22px;
  background: var(--nha-blue-100);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  color: var(--nha-blue);
}
.app-icon svg {
  width: 32px; height: 32px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-icon.live {
  background: var(--nha-green-soft);
  border-color: rgba(119, 184, 0, 0.25);
  color: var(--success-fg);
}
.app-icon.accent {
  background: var(--nha-cyan-soft);
  border-color: rgba(0, 174, 239, 0.25);
  color: var(--info-fg);
}
.app-icon.planned {
  background: var(--fill-soft);
  border-color: var(--line);
  color: var(--ink-faint);
  opacity: 0.85;
}

.app-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  line-height: var(--lh-snug);
  letter-spacing: -0.005em;
  max-width: 96px;
}

.app-status {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--ink-faint);
  margin-top: -2px;
}
.app-status.live   { color: var(--success-fg); }
.app-status.accent { color: var(--info-fg); }

/* =========================================================================
   Motion layer (added 2026-05-29; re-tuned to BOLD 2026-05-29 pm) — GENERALIZED,
   opt-in via .motion-on, reduced-motion-safe, JS-failsafe (shared/motion.js).
   Matches the approved *.nha-ai.com standard (reference: NHA-AI-Analytics).

   RULE — CHROME EXCLUSION: page CHROME (the shell header/nav, drawer, curve) is
   present immediately — never revealed. Only CONTENT (app-tiles, page title/sub,
   prose, hero) reveals. Hub content is tagged with [data-reveal] /
   [data-reveal-stagger]; the auto-detect path keys off main.app-content for
   analytics-style pages (no-op on the hub's main.shell-content).

   OPT-IN + PROPAGATION-SAFE: gated behind .motion-on which a per-page <head>
   guard sets ONLY when JS + IntersectionObserver + (no reduced-motion). Subdomains
   that share this CDN file but don't add the guard + reveal attributes are
   completely unaffected — and the guard's FAILSAFE removes .motion-on after 2.5s
   if motion.js never set .motion-ready, so content can NEVER be stuck hidden.

   BOLD: 40px pop + scale + overshoot bounce, visible 130ms stagger, hover-lift,
   nav nudge. Reveal is a keyframe (not a transition) with animation-fill-mode:
   backwards, so the steady-state transform transition stays free for hover.
   ========================================================================= */
@keyframes mo-reveal {
  from { opacity: 0; transform: translateY(40px) scale(0.92); }
  to   { opacity: 1; transform: none; }
}

/* Pre-reveal hidden state — content blocks only (chrome excluded).
   main.app-content path = analytics parity (no-op on the hub). The hub reveals
   via the explicit [data-reveal] / [data-reveal-stagger] selectors below. */
.motion-on main.app-content > *:not(.v3-scoreboard):not(.v3-stories):not(:is(.page-intro, .td-banner, .v3-inv-banner, .about-box, .v3-range-pills, [data-school-filter], [data-dsq-filter], [data-range])):not(.is-revealed),
.motion-on .v3-scoreboard > *:not(.is-revealed),
.motion-on .v3-stories > *:not(.is-revealed),
.motion-on [data-reveal]:not(.is-revealed),
.motion-on [data-reveal-stagger] > *:not(.is-revealed) {
  opacity: 0;
}

/* Reveal (backwards fill = hidden during stagger delay, then steady state so hover works). */
.motion-on main.app-content > *.is-revealed,
.motion-on .v3-scoreboard > *.is-revealed,
.motion-on .v3-stories > *.is-revealed,
.motion-on [data-reveal].is-revealed,
.motion-on [data-reveal-stagger] > *.is-revealed {
  animation: mo-reveal 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) var(--reveal-delay, 0ms) backwards;
}

/* Hover-lift on the app-tiles + analytics scoreboard/story cards. */
.motion-on .apps-grid > .app-tile,
.motion-on .v3-scoreboard > *,
.motion-on .v3-stories > * { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.motion-on .apps-grid > .app-tile:hover,
.motion-on .v3-scoreboard > *:hover,
.motion-on .v3-stories > *:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 18px 40px rgba(0, 56, 101, 0.18);
}

/* Side-/header-nav "about to click" nudge. */
.motion-on .rail a,
.motion-on .shell-nav a,
.motion-on .header-nav a { transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.16s ease, color 0.16s ease; }
.motion-on .rail a:hover,
.motion-on .shell-nav a:hover,
.motion-on .header-nav a:hover { transform: translateX(5px); }

/* Hover-lift utility — mirrors the existing app-icon navy-tinted glow. */
.lift { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.lift:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 56, 101, 0.10); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .motion-on [class] { opacity: 1 !important; }
  .motion-on .apps-grid > .app-tile:hover,
  .motion-on .v3-scoreboard > *:hover,
  .motion-on .v3-stories > *:hover,
  .motion-on .rail a:hover,
  .motion-on .shell-nav a:hover,
  .motion-on .header-nav a:hover { transform: none !important; }
  .lift:hover { transform: none !important; }
}