/* Knack Nimbus — Production Styles */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Brand fonts: Geist and Geist Mono (Vercel, SIL Open Font License 1.1), self-hosted from /fonts like
   avvera.ca serves them (next/font: same origin, no third-party request). Latin + Latin Extended subsets;
   variable weight 100-900. The fallback face is Arial resized to Geist's metrics (next/font's values), so
   text does not jump when the font arrives. */
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/geist-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/geist-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/geist-mono-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/fonts/geist-mono-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Fallback'; src: local('Arial'); ascent-override: 95.94%; descent-override: 28.16%; line-gap-override: 0%; size-adjust: 104.76%; }
@font-face { font-family: 'Geist Mono Fallback'; src: local('Arial'); ascent-override: 74.67%; descent-override: 21.92%; line-gap-override: 0%; size-adjust: 134.59%; }

/* Light screens (landing, sign-in, apps, account, pricing): the avvera.ca light palette
   (avvera-website app/globals.css :root). Status colours where avvera has none: knav.avvera.ca
   (Knavigator server/web/_styles.html). Every text colour here is at least 4.5:1 on the background it sits on. */
:root {
  --font-sans: 'Geist', 'Geist Fallback', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'Geist Mono Fallback', ui-monospace, SFMono-Regular, Consolas, monospace;
  --bg: #f7f8fa; --surface: #ffffff; --surface-2: #eef1f5;
  --border: #e3e7ee; --border-strong: #cdd5df;
  /* Text-field outline: darker than avvera's lines so a field is findable (3:1, WCAG 1.4.11). */
  --input-border: #868f9e;
  --text: #14181f; --muted: #454e5c; --subtle: #6b7484;
  --primary: #0a8465; --primary-hover: #14181f; --on-primary: #ffffff; --primary-glow: rgba(10, 132, 101, 0.3);
  --primary-tint: rgba(10, 132, 101, 0.07); --focus-ring: rgba(10, 132, 101, 0.18);
  --link: #0a8465;
  --danger: #c0392b; --danger-hover: #a5301f; --warning: #a96a12; --success: #067647;
  --radius: 8px; --radius-lg: 12px;
  --shadow: none; --shadow-hover: 0 12px 32px -12px rgba(20, 24, 31, 0.18);
}

body { font-family: var(--font-sans); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; }
code, kbd, pre { font-family: var(--font-mono); }

/* Layout */
:where(.container, .auth-wrapper) :is(h1, h2, h3, h4) { font-weight: 500; letter-spacing: -0.015em; color: var(--text); }
.container { max-width: 960px; margin: 0 auto; padding: 0 20px; }
.screen { display: none; } .screen.active { display: block; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); }
.card + .card { margin-top: 16px; }

/* Nav */
.topnav { background: var(--surface); border-bottom: 1px solid var(--border); padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; }
.topnav .brand { font-weight: 600; font-size: 18px; letter-spacing: -0.015em; color: var(--text); text-decoration: none; }
.topnav .nav-links { display: flex; gap: 16px; align-items: center; }
.topnav .nav-links a, .topnav .nav-links button { color: var(--muted); text-decoration: none; background: none; border: none; cursor: pointer; font-size: 14px; }
.topnav .nav-links a:hover, .topnav .nav-links button:hover { color: var(--text); }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: var(--radius); font-size: 14px; font-weight: 500; cursor: pointer; border: 1px solid transparent; transition: all 0.15s; text-decoration: none; }
.btn-primary { background: var(--primary); color: var(--on-primary); } .btn-primary:hover { background: var(--primary-hover); box-shadow: 0 0 24px var(--primary-glow); }
.btn-outline { background: var(--surface); border-color: var(--border-strong); color: var(--text); } .btn-outline:hover { border-color: var(--subtle); background: var(--surface-2); }
.btn-danger { background: var(--danger); color: #fff; } .btn-danger:hover { background: var(--danger-hover); }
.btn-sm { padding: 6px 14px; font-size: 13px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Forms */
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 4px; }
.form-group input { width: 100%; padding: 10px 12px; border: 1px solid var(--input-border); border-radius: var(--radius); background: var(--surface); color: var(--text); font-size: 14px; outline: none; }
.form-group input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); }
.form-error { color: var(--danger); font-size: 13px; margin-top: 4px; }

/* Auth pages */
.auth-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card h2 { margin-bottom: 4px; } .auth-card .subtitle { color: var(--muted); font-size: 14px; margin-bottom: 24px; }
.auth-card .alt-link { text-align: center; margin-top: 16px; font-size: 14px; color: var(--muted); }
.auth-card .alt-link a { color: var(--link); text-decoration: none; } .auth-card .alt-link a:hover { text-decoration: underline; }

/* Alert / Toast */
.alert { padding: 12px 16px; border-radius: var(--radius); font-size: 14px; margin-bottom: 16px; }
.alert-error { background: #fdf3f2; color: #9b2c20; border: 1px solid #f2c9c3; }
.alert-success { background: #eef8f4; color: #05603a; border: 1px solid #b9e2d1; }
.alert-warning { background: #fdf6e9; color: #7a4d0d; border: 1px solid #efd8a7; }
.alert-info { background: #eef7fb; color: #075f7e; border: 1px solid #bfe0ee; }

/* Dashboard */
.dashboard-header { display: flex; align-items: center; justify-content: space-between; margin: 32px 0 24px; }
.dashboard-header h1 { font-size: 24px; }
.app-list { display: grid; gap: 12px; }
.app-card { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.app-card:hover { border-color: var(--primary); box-shadow: var(--shadow-hover); }
.app-card .app-name { font-weight: 600; font-size: 15px; }
.app-card .app-id { font-size: 13px; color: var(--muted); font-family: var(--font-mono); }
.app-card .status-badge { font-size: 12px; padding: 2px 8px; border-radius: 999px; font-weight: 500; }
.status-active { background: #e3f4ee; color: #05603a; }
.status-pending { background: #fbf0d9; color: #7a4d0d; }

/* Empty state */
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-state h3 { color: var(--text); margin-bottom: 8px; }
.empty-state p { margin-bottom: 20px; }

/* App detail */
.app-detail-header { margin: 24px 0 16px; display: flex; align-items: center; gap: 12px; }
.app-detail-header .back-btn { color: var(--muted); text-decoration: none; font-size: 20px; }
.tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 24px; }
.tab { padding: 10px 20px; font-size: 14px; font-weight: 500; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; background: none; border-top: none; border-left: none; border-right: none; }
.tab.active { color: var(--primary); border-bottom-color: var(--primary); }
.tab-content { display: none; } .tab-content.active { display: block; }

/* Verification */
.verify-token { font-family: var(--font-mono); font-size: 16px; background: var(--surface-2); padding: 12px 16px; border-radius: var(--radius); display: flex; align-items: center; justify-content: space-between; margin: 12px 0; }
.verify-token .copy-btn { cursor: pointer; color: var(--link); background: none; border: none; font-size: 13px; }

/* Loading */
.spinner { display: inline-block; width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; animation: spin 0.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Shown while a click's work runs (dashboard.js withProgress). */
.progress-pill { position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 200; display: none; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--surface, #fff); color: var(--text, #111); border: 1px solid var(--border, #ccc); box-shadow: 0 4px 14px rgba(0,0,0,.18); font-size: 13px; }
.progress-pill.visible { display: flex; }
.progress-pill .spinner { width: 14px; height: 14px; }
.matrix-cell.cell-pending { position: relative; color: transparent !important; }
.matrix-cell.cell-pending > * { visibility: hidden; }
.matrix-cell.cell-pending::after { content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid var(--border, #ccc); border-top-color: var(--accent, #2a7); border-radius: 50%; animation: spin 0.6s linear infinite; }

/* Utility */
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.text-center { text-align: center; }
.text-muted { color: var(--muted); } .text-sm { font-size: 13px; }
.hidden { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════
   DASHBOARD STYLES — Dark theme, scoped to .nimbus-dashboard
   Extracted from root index.html inline CSS. This file is the single
   source of truth for all styles (auth + dashboard).
   ═══════════════════════════════════════════════════════════════════════ */

.nimbus-dashboard {
  /* Fills the window below the top bar (its height is measured by app.js into --topnav-height), so the
     top bar's links stay visible and clickable. */
  position: fixed;
  inset: var(--topnav-height, 0px) 0 0 0;
  z-index: 100;
  /* Body styles from original */
  font-family: var(--font-sans);
  line-height: 1.5;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Dark theme: the avvera.ca "Console" palette (avvera-website app/globals.css html.dark): canvas, panels,
     lines, ink and the mint accent. --border is avvera's --line-2 (control and table borders; the dashboard is
     dense). Meaning colours (severity, PHI yes/no, add/edit/delete) keep their hues; critical and info take the
     avvera dark swatches (--notif-ticket, --entity-fields). Each colour also has an -rgb channel triple for tints. */
  --bg: #0a0b0e;
  --surface: #111318; --surface-rgb: 17, 19, 24;
  --surface2: #161a21;
  --border: #2a3140;
  --text: #f5f6f8;
  --text-muted: #9aa3b2;
  --accent: #5ef0c4; --accent-rgb: 94, 240, 196;
  --on-accent: #0a0b0e;
  --critical: #ff6b8a; --critical-rgb: 255, 107, 138;
  --high: #ff8c42; --high-rgb: 255, 140, 66;
  --medium: #ffc53d; --medium-rgb: 255, 197, 61;
  --low: #4ecdc4; --low-rgb: 78, 205, 196;
  /* Info / advisory / suggested PHI / the View permission: blue, so they never read as the mint accent or the
     green of a decision. */
  --info: #6ea8ff; --info-rgb: 110, 168, 255; --info-soft: #b3d0ff;
  --op-view: var(--info);
  --green: #4ade80; --green-rgb: 74, 222, 128;
  --danger-strong: #c0392b;
  --input-border: #626c7e; /* text fields: 3.3:1 on --surface2 (WCAG 1.4.11) */
  --phi-row: rgba(var(--critical-rgb), 0.06);
  --phi-border: rgba(var(--critical-rgb), 0.18);
  /* Apply theme */
  background: var(--bg);
  color: var(--text);
}

/* ---- Header ---- */
    header {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px 24px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    header .dash-brand { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: var(--text); text-decoration: none; white-space: nowrap; }
    header .app-name { color: var(--text-muted); font-size: 13px; min-width: 0; }
    header .dash-nav { margin-left: auto; display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
    header .dash-nav a, header .dash-nav button { color: var(--text-muted); text-decoration: none; background: none; border: none; cursor: pointer; font: inherit; font-size: 13px; }
    header .dash-nav a:hover, header .dash-nav button:hover { color: var(--text); }
    header .dash-nav .theme-toggle { border: 1px solid var(--border); border-radius: 6px; padding: 3px 10px; }

    /* Waiting looks the same everywhere (owner 2026-10-29): the progress pill's bubble at the top. */
    #loading, .loading-overlay {
      position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 200;
      display: flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
      background: var(--surface, #fff); color: var(--text, #111); border: 1px solid var(--border, #ccc);
      box-shadow: 0 4px 14px rgba(0,0,0,.18); font-size: 13px;
    }
    #loading .spinner, .loading-overlay .spinner { width: 14px; height: 14px; }
    #error {
      background: rgba(var(--critical-rgb), 0.1);
      border: 1px solid var(--critical);
      border-radius: 8px;
      padding: 16px;
      margin: 24px;
      color: var(--critical);
      display: none;
    }

    /* ---- Main Layout ---- */
    #app {
      display: none;
      flex: 1;
      overflow: hidden;
      flex-direction: column;
    }

    /* Top tab bar */
    .main-tab-bar {
      display: flex;
      gap: 0;
      border-bottom: 1px solid var(--border);
      padding: 0 24px;
      flex-shrink: 0;
    }
    .main-tab {
      border: 0;
      padding: 10px 20px;
      background: transparent;
      font-family: inherit;
      font-size: 13px;
      font-weight: 500;
      color: var(--text-muted);
      cursor: pointer;
      border-bottom: 2px solid transparent;
      transition: all 0.15s;
    }
    .main-tab:hover { color: var(--text); }
    .main-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

    .main-tab-content { display: none; flex: 1; overflow: hidden; }
    .main-tab-content.active { display: flex; flex-direction: column; }

    /* ---- PHI Inventory Layout ---- */
    .phi-setup-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
      align-items: center;
      gap: 32px;
      padding: 18px 24px;
      background: linear-gradient(100deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.015) 58%);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .phi-step-label {
      display: block;
      margin-bottom: 4px;
      color: var(--accent);
      font-family: var(--font-mono);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
    }
    .phi-setup-copy h2 { font-size: 18px; line-height: 1.25; font-weight: 650; }
    .phi-setup-copy p { margin-top: 5px; color: var(--text-muted); font-size: 12px; }
    .phi-progress-panel { min-width: 0; }
    .phi-progress-heading {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 7px;
      font-size: 12px;
    }
    .phi-readiness-badge {
      padding: 2px 8px;
      border: 1px solid rgba(var(--medium-rgb), 0.35);
      border-radius: 999px;
      color: var(--medium);
      background: rgba(var(--medium-rgb), 0.08);
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }
    .phi-readiness-badge.ready {
      border-color: rgba(var(--green-rgb), 0.35);
      color: var(--green);
      background: rgba(var(--green-rgb), 0.08);
    }
    .phi-readiness-badge.stale {
      border-color: rgba(var(--critical-rgb), 0.35);
      color: var(--critical);
      background: rgba(var(--critical-rgb), 0.08);
    }
    .phi-progress-track {
      height: 7px;
      overflow: hidden;
      border-radius: 999px;
      background: var(--surface2);
      border: 1px solid var(--border);
    }
    .phi-progress-track span {
      display: block;
      width: 0;
      height: 100%;
      border-radius: inherit;
      background: var(--accent);
      transition: width 0.2s ease;
    }
    .phi-progress-detail { margin-top: 6px; color: var(--text-muted); font-size: 11px; }
    .phi-review-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 8px 24px;
      border-bottom: 1px solid var(--border);
      background: rgba(var(--surface-rgb), 0.72);
      flex-shrink: 0;
    }
    .phi-filter-group { display: flex; align-items: center; gap: 5px; }
    .phi-filter {
      border: 1px solid transparent;
      border-radius: 6px;
      padding: 5px 9px;
      color: var(--text-muted);
      background: transparent;
      font-size: 11px;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
    }
    .phi-filter span {
      margin-left: 3px;
      color: inherit;
      font-variant-numeric: tabular-nums;
    }
    .phi-filter:hover { color: var(--text); background: var(--surface2); }
    .phi-filter.active { color: var(--text); border-color: var(--border); background: var(--surface2); }
    .phi-filter[data-phi-filter="suggested"].active { color: var(--info-soft); border-color: rgba(var(--info-rgb), 0.45); }
    .phi-review-note { color: var(--text-muted); font-size: 11px; text-align: right; }

    .phi-layout {
      display: flex;
      flex: 1;
      overflow: hidden;
    }

    /* Object sidebar */
    .obj-sidebar {
      width: 280px;
      min-width: 280px;
      border-right: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .obj-sidebar-header {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }
    .obj-sidebar-header h3 { font-size: 13px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
    .obj-sidebar-search {
      padding: 8px 12px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .obj-sidebar-search input {
      width: 100%;
      background: var(--surface2);
      border: 1px solid var(--input-border);
      border-radius: 6px;
      padding: 6px 10px;
      color: var(--text);
      font-size: 13px;
      outline: none;
    }
    .obj-sidebar-search input:focus { border-color: var(--accent); }
    .obj-sidebar-search input::placeholder { color: var(--text-muted); }

    .obj-list {
      flex: 1;
      overflow-y: auto;
    }
    .obj-item {
      padding: 8px 16px;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 8px;
      border-bottom: 1px solid transparent;
      transition: background 0.1s;
      font-size: 13px;
    }
    .obj-item:hover { background: var(--surface); }
    .obj-item.active { background: var(--surface); border-left: 3px solid var(--accent); padding-left: 13px; }
    .obj-item .obj-name { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .obj-item .obj-counts { display: flex; gap: 6px; flex-shrink: 0; }
    .obj-item .obj-suggested-count {
      padding: 1px 5px;
      border-radius: 3px;
      color: var(--info-soft);
      background: rgba(var(--info-rgb), 0.12);
      font-size: 10px;
      font-weight: 650;
      white-space: nowrap;
    }
    .obj-item .obj-phi-count {
      font-size: 11px;
      font-weight: 700;
      color: var(--critical);
      background: rgba(var(--critical-rgb), 0.12);
      padding: 1px 6px;
      border-radius: 3px;
      min-width: 20px;
      text-align: center;
    }
    .obj-item .obj-phi-count.zero { color: var(--text-muted); background: transparent; }
    .obj-item .obj-total-count {
      font-size: 11px;
      color: var(--text-muted);
    }

    /* Field panel (right side) */
    .field-panel {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    .field-panel-header {
      padding: 12px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-shrink: 0;
    }
    .field-panel-header h3 { font-size: 16px; font-weight: 600; }
    .field-panel-header .obj-key { font-size: 12px; color: var(--text-muted); margin-left: 8px; }

    .field-panel-toolbar {
      padding: 8px 20px;
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      gap: 12px;
      flex-shrink: 0;
    }

    .field-suggestion-reason {
      margin-top: 2px;
      color: var(--text-muted);
      font-size: 10px;
      line-height: 1.35;
    }

    .field-review-state {
      display: inline-block;
      margin-left: 6px;
      color: var(--text-muted);
      font-size: 10px;
    }

    #fieldPanelContent {
      display: none;
      flex: 1;
      flex-direction: column;
      overflow: hidden;
      min-height: 0;
    }
    #fieldPanelContent.visible { display: flex !important; }

    .field-panel-empty {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-muted);
      font-size: 14px;
    }

    .field-table-wrap {
      flex: 1;
      overflow-y: auto;
      min-height: 0;
    }

    .field-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    .field-table th {
      text-align: left;
      padding: 8px 16px;
      background: var(--surface2);
      color: var(--text-muted);
      font-size: 11px;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      font-weight: 600;
      border-bottom: 1px solid var(--border);
      position: sticky;
      top: 0;
      z-index: 1;
    }
    .field-table td {
      padding: 6px 16px;
      border-bottom: 1px solid var(--border);
    }
    .field-table tr.phi-yes {
      background: var(--phi-row);
    }
    .field-table tr.phi-yes td:first-child {
      border-left: 3px solid var(--critical);
      padding-left: 13px;
    }
    .field-table tr:hover td { background: rgba(255,255,255,0.02); }
    .field-table tr.phi-yes:hover td { background: rgba(var(--critical-rgb), 0.1); }

    /* Toggle button */
    .phi-toggle {
      display: inline-flex;
      border-radius: 4px;
      overflow: hidden;
      border: 1px solid var(--border);
    }
    .phi-toggle button {
      padding: 3px 10px;
      font-size: 11px;
      font-weight: 600;
      border: none;
      cursor: pointer;
      background: transparent;
      color: var(--text-muted);
      transition: all 0.15s;
    }
    .phi-toggle button.yes { border-right: 1px solid var(--border); }
    .phi-toggle button.yes.active { background: rgba(var(--critical-rgb), 0.2); color: var(--critical); }
    .phi-toggle button.no.active { background: rgba(var(--green-rgb), 0.12); color: var(--green); }

    /* Object-level toggle */
    .obj-toggle {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .obj-toggle-label { font-size: 12px; color: var(--text-muted); }

    /* Guess badge */
    .guess-badge {
      font-size: 10px;
      padding: 1px 5px;
      border-radius: 3px;
      background: rgba(var(--info-rgb), 0.12);
      color: var(--info);
      margin-left: 6px;
    }
    .guess-badge.confirmed { display: none; }

    /* Derived/Review PHI badges */
    .derived-badge {
      font-size: 10px; padding: 1px 5px; border-radius: 3px;
      background: rgba(var(--medium-rgb), 0.15); color: var(--medium);
      margin-left: 6px; white-space: nowrap;
    }
    .review-badge {
      font-size: 10px; padding: 1px 5px; border-radius: 3px;
      background: rgba(var(--info-rgb), 0.15); color: var(--info);
      margin-left: 6px; white-space: nowrap;
    }
    .phi-toggle button.yes.derived {
      background: rgba(var(--medium-rgb), 0.2); color: var(--medium);
      cursor: default; opacity: 0.8;
    }

    /* Sort button */
    .sort-btn {
      font-size: 12px;
      background: var(--surface2);
      border: 1px solid var(--border);
      color: var(--text-muted);
      padding: 4px 10px;
      border-radius: 4px;
      cursor: pointer;
    }
    .sort-btn:hover { color: var(--text); border-color: var(--accent); }

    /* Reset button */
    .reset-btn {
      font-size: 12px;
      background: transparent;
      border: 1px solid var(--border);
      color: var(--text-muted);
      padding: 4px 10px;
      border-radius: 4px;
      cursor: pointer;
    }
    .reset-btn:hover { color: var(--critical); border-color: var(--critical); }

    /* ---- Summary bar (top of PHI tab) ---- */
    .phi-summary-bar {
      padding: 12px 20px;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      display: flex;
      gap: 24px;
      align-items: center;
      flex-shrink: 0;
    }
    .phi-stat { display: flex; align-items: baseline; gap: 6px; }
    .phi-stat .num { font-size: 20px; font-weight: 700; }
    .phi-stat .num.red { color: var(--critical); }
    .phi-stat .num.blue { color: var(--accent); }
    .phi-stat .lbl { font-size: 12px; color: var(--text-muted); }

    /* ---- Analysis Tab ---- */
    .analysis-content {
      padding: 24px;
      overflow-y: auto;
      flex: 1;
    }

    /* Posture indicator */
    .posture-bar {
      border-radius: 14px;
      padding: 20px 24px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
    }
    .posture-bar.critical {
      background: rgba(var(--critical-rgb), 0.10);
      border: 1px solid rgba(var(--critical-rgb), 0.3);
    }
    .posture-bar.issues {
      background: rgba(var(--high-rgb), 0.10);
      border: 1px solid rgba(var(--high-rgb), 0.3);
    }
    .posture-bar.incomplete {
      background: rgba(var(--medium-rgb), 0.08);
      border: 1px solid rgba(var(--medium-rgb), 0.3);
    }
    .posture-bar.clean {
      background: rgba(var(--green-rgb), 0.10);
      border: 1px solid rgba(var(--green-rgb), 0.3);
    }
    .posture-status { font-size: 20px; font-weight: 700; }
    .posture-bar.critical .posture-status { color: var(--critical); }
    .posture-bar.issues .posture-status { color: var(--high); }
    .posture-bar.incomplete .posture-status { color: var(--medium); }
    .posture-bar.clean .posture-status { color: var(--green); }
    .posture-summary { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
    .posture-counts {
      display: flex; gap: 12px; flex-shrink: 0;
    }
    .posture-count {
      text-align: center; min-width: 48px;
    }
    .posture-count .num { font-size: 22px; font-weight: 700; }
    .posture-count .num.critical { color: var(--critical); }
    .posture-count .num.high { color: var(--high); }
    .posture-count .num.medium { color: var(--medium); }
    .posture-count .num.advisory { color: var(--info); }
    .posture-count .lbl { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }

    /* Category cards */
    .category-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 12px;
      margin-bottom: 24px;
    }
    .category-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 14px 16px;
      cursor: pointer;
      transition: border-color 0.15s;
    }
    .category-card:hover { border-color: var(--accent); }
    .category-card.active { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.05); }
    .category-card.has-critical { border-left: 3px solid var(--critical); }
    .category-card.has-high { border-left: 3px solid var(--high); }
    .category-card.has-medium { border-left: 3px solid var(--medium); }
    .category-card.has-advisory { border-left: 3px solid var(--info); }
    .cat-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
    .cat-icon { font-size: 16px; width: 20px; text-align: center; }
    .cat-name { font-size: 14px; font-weight: 600; }
    .cat-count { margin-left: auto; display: flex; gap: 6px; }
    .cat-count .mini-badge {
      font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px;
    }
    .mini-badge.critical { background: rgba(var(--critical-rgb), 0.15); color: var(--critical); }
    .mini-badge.high { background: rgba(var(--high-rgb), 0.15); color: var(--high); }
    .mini-badge.medium { background: rgba(var(--medium-rgb), 0.15); color: var(--medium); }
    .mini-badge.advisory { background: rgba(var(--info-rgb), 0.15); color: var(--info); }
    .cat-summary { font-size: 12px; color: var(--text-muted); }

    /* Summary stats row */
    .summary-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 12px;
      margin-bottom: 32px;
    }
    .summary-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 16px;
    }
    .summary-card .label {
      font-size: 12px; color: var(--text-muted); text-transform: uppercase;
      letter-spacing: 0.5px; margin-bottom: 4px;
    }
    .summary-card .value { font-size: 28px; font-weight: 700; }
    .summary-card .value.critical { color: var(--critical); }
    .summary-card .value.high { color: var(--high); }
    .summary-card .value.green { color: var(--green); }
    .summary-card .value.accent { color: var(--accent); }

    .section { margin-bottom: 32px; }
    .section h2 {
      font-size: 18px; font-weight: 600; margin-bottom: 16px;
      padding-bottom: 8px; border-bottom: 1px solid var(--border);
    }

    /* Findings */
    .finding {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 8px;
      margin-bottom: 10px;
      overflow: hidden;
    }
    .finding.severity-critical { border-left: 3px solid var(--critical); }
    .finding.severity-high { border-left: 3px solid var(--high); }
    .finding.severity-medium { border-left: 3px solid var(--medium); }
    .finding.severity-advisory { border-left: 3px solid var(--info); }
    .finding-header {
      padding: 12px 16px;
      display: flex; align-items: center; gap: 12px; cursor: pointer;
    }
    .finding-header:hover { background: var(--surface2); }
    .finding-scope {
      font-size: 11px; color: var(--text-muted); margin-left: auto; white-space: nowrap;
    }
    .severity-badge {
      font-size: 11px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.5px; padding: 2px 8px; border-radius: 4px; white-space: nowrap;
    }
    .severity-badge.critical { background: rgba(var(--critical-rgb), 0.15); color: var(--critical); }
    .severity-badge.high { background: rgba(var(--high-rgb), 0.15); color: var(--high); }
    .severity-badge.medium { background: rgba(var(--medium-rgb), 0.15); color: var(--medium); }
    .severity-badge.low { background: rgba(var(--low-rgb), 0.15); color: var(--low); }
    .severity-badge.info, .severity-badge.advisory { background: rgba(var(--info-rgb), 0.15); color: var(--info); }
    .assessment-badge {
      font-size: 10px; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.5px; padding: 2px 6px; border-radius: 4px; white-space: nowrap;
    }
    .assessment-badge.confirmed { background: rgba(var(--critical-rgb), 0.12); color: var(--critical); }
    .assessment-badge.potential { background: rgba(var(--medium-rgb), 0.15); color: var(--medium); }
    .assessment-badge.not-issue { background: rgba(var(--low-rgb), 0.12); color: var(--low); }
    .finding-section-label.assessment { color: var(--info); }
    .finding-title { font-size: 14px; font-weight: 500; flex: 1; }
    .finding-body { padding: 0 16px 16px; display: none; }
    .finding.open .finding-body { display: block; }

    .finding-section { margin-bottom: 14px; }
    .finding-section-label {
      font-size: 11px; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.8px; margin-bottom: 4px;
    }
    .finding-section-label.what { color: var(--text-muted); }
    .finding-section-label.why { color: var(--high); }
    .finding-section-label.fix { color: var(--green); }
    .finding-section p { font-size: 13px; color: var(--text); line-height: 1.6; }

    .finding-location-label {
      font-size: 11px; color: var(--text-muted); text-transform: uppercase;
      letter-spacing: 0.5px; margin-top: 12px; margin-bottom: 4px;
    }
    .finding-location-value {
      display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
    }
    .finding-location-tag {
      font-size: 12px; background: var(--surface2); border: 1px solid var(--border);
      padding: 2px 8px; border-radius: 4px; color: var(--text);
    }
    .finding-body .detail-label {
      font-size: 11px; color: var(--text-muted); text-transform: uppercase;
      letter-spacing: 0.5px; margin-top: 12px; margin-bottom: 4px;
    }
    .finding-body .field-list { display: flex; flex-wrap: wrap; gap: 6px; }
    .field-tag {
      font-size: 12px; background: var(--surface2); border: 1px solid var(--border);
      padding: 2px 8px; border-radius: 4px; color: var(--text);
    }
    .field-tag-md { font-size: 14px; padding: 3px 10px; }
    .field-tag-lg { font-size: 15px; padding: 3px 10px; }
    .field-tag-plain { background: none; border: none; padding: 0; }
    /* Unauthorized access assessment block */
    .assessment-block {
      background: rgba(var(--critical-rgb), 0.06); border: 1px solid rgba(var(--critical-rgb), 0.2);
      border-radius: 8px; padding: 10px 14px; margin-top: 4px;
    }
    .assessment-block-header {
      display: flex; align-items: center; gap: 8px;
      font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--text);
    }
    .access-type-badge {
      font-size: 11px; font-weight: 700; text-transform: uppercase;
      padding: 2px 8px; border-radius: 4px; letter-spacing: 0.5px;
    }
    .access-type-badge.op-view { background: rgba(var(--info-rgb), 0.15); color: var(--op-view); }
    .access-type-badge.op-add { background: rgba(var(--green-rgb), 0.15); color: var(--green); }
    .access-type-badge.op-edit { background: rgba(var(--high-rgb), 0.15); color: var(--high); }
    .access-type-badge.op-delete { background: rgba(var(--critical-rgb), 0.15); color: var(--critical); }
    .role-list { display: flex; flex-wrap: wrap; gap: 6px; }
    .role-tag {
      font-size: 12px; background: var(--surface2); border: 1px solid var(--border);
      padding: 2px 8px; border-radius: 4px; color: var(--text);
    }
    .role-expand {
      font-size: 11px; color: var(--accent); cursor: pointer;
      background: none; border: none; padding: 2px 6px;
    }
    .role-expand:hover { text-decoration: underline; }
    .builder-link { text-decoration: none; margin-left: 3px; opacity: 0.6; }
    .builder-link:hover { opacity: 1; }

    .tech-details {
      margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
    }
    .tech-details summary {
      font-size: 12px; color: var(--text-muted); cursor: pointer; user-select: none;
    }
    .tech-details summary:hover { color: var(--text); }
    .tech-details .tech-grid {
      display: grid; grid-template-columns: auto 1fr; gap: 4px 12px;
      font-size: 12px; margin-top: 8px;
    }
    .tech-details .tech-key { color: var(--text-muted); }
    .tech-details .tech-val { color: var(--text); font-family: var(--font-mono); }

    .citation { font-size: 12px; color: var(--text-muted); font-style: italic; }

    /* Filter controls */
    .findings-toolbar {
      display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap;
    }
    .filter-btn {
      font-size: 12px; padding: 4px 10px; border-radius: 4px;
      background: var(--surface); border: 1px solid var(--border);
      color: var(--text-muted); cursor: pointer; transition: all 0.15s;
    }
    .filter-btn:hover { border-color: var(--accent); color: var(--text); }
    .filter-btn.active { background: rgba(var(--accent-rgb), 0.1); border-color: var(--accent); color: var(--accent); }
    .findings-count { font-size: 12px; color: var(--text-muted); margin-left: auto; }

    /* Findings workspace — styled as a security case file, not a metric dashboard. */
    .posture-bar {
      align-items: stretch;
      padding: 0;
      overflow: hidden;
      background: var(--surface) !important;
    }
    .posture-verdict { padding: 24px 26px; flex: 1; }
    .posture-eyebrow, .section-kicker {
      display: block; margin-bottom: 7px; color: var(--text-muted);
      font: 700 10px/1.2 var(--font-mono);
      letter-spacing: .12em; text-transform: uppercase;
    }
    .posture-status { max-width: 720px; font-size: clamp(22px, 3vw, 32px); line-height: 1.15; letter-spacing: -.025em; }
    .posture-summary { max-width: 760px; margin-top: 9px; font-size: 13px; }
    .posture-next {
      margin-top: 18px; padding: 8px 13px; border: 1px solid currentColor; border-radius: 5px;
      background: transparent; color: var(--text); font-weight: 700; cursor: pointer;
    }
    .posture-next:hover { background: var(--surface2); }
    .posture-counts {
      display: grid; grid-template-columns: repeat(2, minmax(74px, 1fr)); gap: 0;
      min-width: 205px; border-left: 1px solid var(--border); background: var(--bg);
    }
    .posture-count { display: grid; place-content: center; min-height: 86px; border: 1px solid var(--border); border-width: 0 0 1px 1px; }
    .posture-count:nth-last-child(-n+2) { border-bottom: 0; }
    .posture-count .num.low { color: var(--low); }

    .category-grid { grid-template-columns: repeat(5, minmax(150px, 1fr)); gap: 8px; overflow-x: auto; padding-bottom: 4px; }
    .category-card {
      min-width: 150px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px;
      color: var(--text); text-align: left; font: inherit;
    }
    .area-code {
      display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--border);
      border-radius: 4px; color: var(--accent); font: 700 10px/1 var(--font-mono);
    }
    .area-copy { min-width: 0; }
    .area-copy strong, .area-copy small, .area-totals strong, .area-totals small { display: block; }
    .area-copy strong { font-size: 12px; }
    .area-copy small { margin-top: 2px; color: var(--text-muted); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .area-totals { text-align: right; }
    .area-totals strong { font-size: 17px; }
    .area-totals small { color: var(--text-muted); font-size: 9px; white-space: nowrap; }

    .assessment-section { margin-top: 30px; }
    .section-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
    .section-heading h2 { margin: 0; font-size: 18px; letter-spacing: -.01em; }
    .section-heading > span { color: var(--text-muted); font: 700 22px/1 var(--font-mono); }
    .section-intro { max-width: 720px; margin: 10px 0 14px; color: var(--text-muted); font-size: 13px; }
    .action-stack { margin-top: 12px; }
    .assessment-empty { display: flex; flex-direction: column; gap: 3px; padding: 18px; border: 1px dashed var(--border); color: var(--text-muted); }

    details.finding > summary { list-style: none; }
    details.finding > summary::-webkit-details-marker { display: none; }
    details.finding[open] .finding-body { display: block; }
    details.finding[open] .finding-header { background: var(--surface2); }
    .finding.severity-low { border-left: 3px solid var(--low); }
    .finding-conclusion { margin: 4px 0 18px; font-size: 15px; line-height: 1.55; }
    .evidence-rail { position: relative; display: grid; gap: 0; margin-left: 7px; border-left: 1px solid var(--border); }
    .evidence-rail > section { display: grid; grid-template-columns: 74px 1fr; gap: 16px; padding: 11px 0 11px 18px; position: relative; }
    .evidence-rail > section::before { content: ''; position: absolute; left: -4px; top: 17px; width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
    .evidence-rail > section p { margin: 3px 0 0; color: var(--text-muted); font-size: 13px; }
    .evidence-rail .rail-action { margin-top: 6px; background: rgba(var(--green-rgb), .055); }
    .evidence-rail .rail-action::before { background: var(--green); }
    .evidence-rail .rail-verify::before { background: var(--accent); }
    .rail-label { color: var(--text-muted); font: 700 10px/1.5 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
    .rail-action ol { margin: 8px 0 0 18px; color: var(--text-muted); font-size: 13px; }
    .occurrence-list { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
    .occurrence-list summary { color: var(--text-muted); cursor: pointer; font-size: 12px; }
    .occurrence-row { display: flex; justify-content: space-between; gap: 20px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 12px; }
    .occurrence-row code, .finding-basis code { color: var(--text-muted); font-size: 10px; overflow-wrap: anywhere; }
    .finding-basis { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 14px; color: var(--text-muted); font-size: 11px; }

    .review-groups { border-top: 1px solid var(--border); }
    .review-group { border: 1px solid var(--border); border-top: 0; background: var(--surface); }
    .review-group > summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 13px 15px; cursor: pointer; list-style: none; }
    .review-group > summary::-webkit-details-marker { display: none; }
    .review-group > summary span { min-width: 0; }
    .review-group > summary strong, .review-group > summary small { display: block; }
    .review-group > summary strong { font-size: 13px; }
    .review-group > summary small { margin-top: 2px; color: var(--text-muted); font: 10px/1.4 var(--font-mono); }
    .review-group > summary b { flex-shrink: 0; min-width: 30px; color: var(--medium); font-size: 18px; text-align: right; white-space: nowrap; }
    .review-body { padding: 2px 15px 15px; font-size: 13px; }
    .review-needed { margin-top: 11px; padding: 10px 12px; border-left: 2px solid var(--medium); background: rgba(var(--medium-rgb), .045); }
    .review-needed > span { color: var(--medium); font: 700 10px/1.4 var(--font-mono); text-transform: uppercase; }
    .more-count { padding-top: 8px; color: var(--text-muted); }
    .coverage-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 8px; margin-top: 12px; }
    .coverage-list article { padding: 14px; border: 1px solid var(--border); background: var(--surface); }
    .coverage-list article strong, .coverage-list article p, .coverage-list article span { display: block; }
    .coverage-list article p { margin-top: 6px; color: var(--text-muted); font-size: 12px; }
    .coverage-list article span { margin-top: 10px; color: var(--accent); font-size: 11px; }
    .safe-evidence { margin: 24px 0; color: var(--text-muted); font-size: 12px; }
    .safe-evidence summary { cursor: pointer; }
    .safe-evidence ul { margin: 10px 0 0 18px; }
    .safe-evidence li { margin-bottom: 8px; }
    .safe-evidence li span { display: block; }

    /* Access Matrix */
    .access-setup-card {
      display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 36%); gap: 24px;
      margin-bottom: 14px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
    }
    .access-setup-card h2 { margin: 0 0 4px; font-size: 17px; }
    .access-setup-card p { color: var(--text-muted); font-size: 12px; }
    .access-review-progress { display: grid; align-content: center; gap: 5px; font-size: 12px; }
    .access-review-progress > span { color: var(--text-muted); }
    .access-review-progress .phi-progress-track { width: 100%; }
    .access-review-progress .phi-progress-track i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
    .access-review-progress > .access-differs { color: var(--text); border-top: 1px solid var(--border); padding-top: 6px; margin-top: 2px; }
    .matrix-ignore-controls { margin-left: auto; display: flex; align-items: center; gap: 8px; }
    .ignore-reason-input { min-width: 260px; padding: 5px 8px; border: 1px solid var(--input-border); border-radius: 4px; background: var(--surface2); color: var(--text); font-size: 11px; }
    .matrix-object-default-row th { background: rgba(var(--info-rgb), .055); color: var(--text-muted); font-size: 11px; }
    .matrix-object-default-row th span, .matrix-object-default-row th small { display: block; }
    .matrix-object-default { text-align: center; color: var(--info); cursor: pointer; background: rgba(var(--info-rgb), .025); }
    .matrix-object-default:hover { background: rgba(var(--info-rgb), .12); }
    .matrix-object-default.reviewed { background: rgba(var(--green-rgb), .06); color: var(--green); }
    .matrix-object-default span { font-size: 10px; font-weight: 700; text-transform: uppercase; }
    /* Scrolls both ways inside its own box, so the role header row stays frozen like the field column. */
    .matrix-wrap {
      overflow: auto; max-height: calc(100dvh - 160px);
      border: 1px solid var(--border); border-radius: 8px;
    }
    .matrix-table {
      border-collapse: collapse; font-size: 18px; white-space: nowrap;
    }
    .matrix-table th, .matrix-table td {
      padding: 8px 10px; border: 1px solid var(--border);
    }
    .matrix-table thead th {
      background: var(--surface2); position: sticky; top: 0; z-index: 2;
      font-weight: 600; color: var(--text); text-transform: uppercase;
      letter-spacing: 0.3px;
    }
    .matrix-table thead th.role-header {
      writing-mode: vertical-rl; text-orientation: mixed;
      transform: rotate(180deg); max-width: 36px; padding: 8px 4px;
      font-size: 11px; color: var(--text);
    }
    .matrix-table thead th.role-header.ignore-mode {
      max-height: 180px; position: relative; padding-bottom: 24px;
    }
    .matrix-table thead th.role-header.ignore-mode .role-name {
      display: inline-block; max-height: 140px; overflow: hidden;
      text-overflow: ellipsis;
    }
    .matrix-table thead th.role-header-accounts {
      background: var(--surface); color: var(--accent);
      border-right: 2px solid var(--accent);
    }
    .matrix-table td.accounts-col {
      border-right: 2px solid var(--border);
    }
    .matrix-table thead th.role-header-ignored {
      opacity: 0.4;
    }
    .matrix-table td.ignored-col {
      opacity: 0.25;
      pointer-events: none;
    }
    .ignored-label {
      display: block; font-size: 9px; font-style: italic;
      color: var(--text-muted); font-weight: 400; letter-spacing: 0;
      text-transform: none; margin-top: 4px;
    }
    .ignore-check-input {
      writing-mode: horizontal-tb;
      transform: rotate(180deg);
      position: absolute;
      bottom: 4px;
      left: 0; right: 0;
      margin: 0 auto;
      width: 16px; height: 16px; cursor: pointer;
      accent-color: var(--accent);
    }
    .matrix-table tbody th {
      background: var(--surface); position: sticky; left: 0; z-index: 1;
      font-weight: 500; text-align: left; min-width: 160px;
    }
    .matrix-table tbody th .field-obj {
      font-size: 10px; color: var(--text-muted); font-weight: 400;
    }
    .matrix-table tbody th {
      max-width: 30vw;
    }
    .derived-desc {
      font-size: 11px; color: var(--text-muted); font-weight: 400;
      margin-top: 2px; margin-left: 20px; line-height: 1.4;
      display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap;
    }
    .matrix-obj-header th {
      background: var(--surface2); color: var(--text-muted); font-size: 11px;
      font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
      padding: 6px 10px; position: sticky; left: 0; z-index: 1;
      border-bottom: 1px solid var(--border);
    }
    .matrix-cell {
      text-align: center; min-width: 36px; cursor: pointer;
      transition: background 0.1s;
    }
    .matrix-cell:hover { background: var(--surface2); }
    .matrix-cell .actual-flags { font-weight: 700; font-size: 11px; letter-spacing: 1px; }
    .matrix-cell .actual-flags .v { color: var(--op-view); }
    .matrix-cell .actual-flags .a { color: var(--green); }
    .matrix-cell .actual-flags .e { color: var(--high); }
    .matrix-cell .actual-flags .d { color: var(--critical); }
    .matrix-cell.over-provisioned { background: rgba(var(--critical-rgb), 0.12); }
    .matrix-cell.reviewed { background: rgba(var(--green-rgb), 0.06); }
    .matrix-cell.selected { outline: 2px solid var(--accent); outline-offset: -2px; }
    .matrix-cell.shift-preview { outline: 2px dashed var(--accent); outline-offset: -2px; opacity: 0.8; }
    .matrix-row-select {
      width: 16px; height: 16px; cursor: pointer; border: none;
      background: transparent; color: var(--text-muted); font-size: 14px;
      display: inline-flex; align-items: center; justify-content: center;
      border-radius: 3px; transition: all 0.1s;
    }
    .matrix-row-select:hover { background: var(--surface2); color: var(--accent); }
    .matrix-cell .intended-flags {
      font-size: 9px; color: var(--text-muted); display: block; margin-top: 1px;
    }
    .matrix-legend {
      display: flex; gap: 16px; margin-bottom: 12px; font-size: 12px;
      flex-wrap: wrap; align-items: center;
    }
    .matrix-legend .leg-item { display: flex; align-items: center; gap: 4px; }
    .matrix-legend .leg-swatch {
      width: 12px; height: 12px; border-radius: 2px; display: inline-block;
    }

    /* Matrix cell popover */
    .matrix-popover {
      position: fixed; background: var(--surface); border: 1px solid var(--border);
      border-radius: 8px; padding: 12px; z-index: 100; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
      min-width: 280px; display: none;
    }
    .matrix-popover h4 { font-size: 13px; margin-bottom: 8px; }
    .matrix-popover .pop-grid {
      display: grid;
      grid-template-columns: 1fr 60px 60px 28px;
      gap: 0 8px;
      align-items: center;
      font-size: 13px;
    }
    .matrix-popover .pop-grid-header {
      font-size: 10px; color: var(--text-muted); text-transform: uppercase;
      letter-spacing: 0.5px; padding-bottom: 6px;
    }
    .matrix-popover .pop-grid-row {
      display: grid; grid-column: 1 / -1;
      grid-template-columns: subgrid;
      align-items: center;
      border-top: 1px solid var(--border);
      padding: 8px 0;
    }
    .matrix-popover .pop-grid-row:last-child { border-bottom: 1px solid var(--border); }
    .matrix-popover .pop-actual-icon { text-align: center; font-size: 14px; color: var(--green); }
    .matrix-popover .pop-check-wrap { text-align: center; }
    .matrix-popover .pop-label { cursor: pointer; font-weight: 500; }
    .matrix-popover .pop-kbd {
      font-size: 10px; padding: 1px 4px; border-radius: 3px;
      background: var(--surface2); color: var(--text-muted); font-family: var(--font-mono);
      text-align: center;
    }
    .matrix-popover .pop-btn-row { margin-top: 10px; display: flex; gap: 6px; }
    .matrix-popover .pop-count {
      font-size: 11px; color: var(--accent); margin-bottom: 6px;
    }
    .matrix-popover button {
      font-size: 11px; padding: 4px 10px; border-radius: 4px; cursor: pointer;
      border: 1px solid var(--border); background: var(--surface2); color: var(--text);
    }
    .matrix-popover button.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
    .matrix-popover button:hover { opacity: 0.85; }

    /* Data tables (used by Role Access, Access Matrix) */
    .data-table {
      width: 100%; border-collapse: collapse; font-size: 13px;
    }
    .data-table th {
      text-align: left; padding: 8px 12px; background: var(--surface2);
      color: var(--text-muted); font-size: 11px; text-transform: uppercase;
      letter-spacing: 0.5px; font-weight: 600; border-bottom: 1px solid var(--border);
    }
    .data-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
    .data-table tr:hover td { background: var(--surface); }

    .no-phi-msg {
      text-align: center; padding: 60px 20px; color: var(--text-muted);
    }
    .no-phi-msg h3 { font-size: 18px; margin-bottom: 8px; color: var(--text); }

    .field-type-badge {
      font-size: 11px; padding: 1px 6px; border-radius: 3px;
      background: var(--surface2); color: var(--text-muted);
    }

    /* Run analysis button */
    .run-analysis-btn {
      padding: 8px 20px;
      background: var(--accent);
      color: var(--on-accent);
      border: none;
      border-radius: 6px;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: opacity 0.15s;
    }
    .run-analysis-btn:hover { opacity: 0.85; }

    .phi-summary-bar .spacer { flex: 1; }

    /* Keyboard selection */
    .obj-item.kb-selected { background: var(--surface2); outline: 1px solid var(--accent); outline-offset: -1px; }
    .field-table tr.kb-selected td { background: var(--surface2); }
    .field-table tr.kb-selected.phi-yes td { background: rgba(var(--critical-rgb), 0.12); }

    /* Multi-select */
    .obj-item.multi-selected { background: rgba(var(--accent-rgb), 0.08); }
    .obj-item.multi-selected:not(.active) { border-left: 2px solid rgba(var(--accent-rgb), 0.4); padding-left: 14px; }
    .field-table tr.multi-selected td { background: rgba(var(--accent-rgb), 0.06); }
    .field-table tr.multi-selected.phi-yes td { background: rgba(var(--critical-rgb), 0.1); }

    /* Action toast */
    .action-toast {
      position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
      background: var(--surface2); border: 1px solid var(--accent);
      border-radius: 8px; padding: 10px 20px;
      font-size: 13px; color: var(--text);
      z-index: 200; display: none;
      box-shadow: 0 4px 20px rgba(0,0,0,0.4);
      animation: toast-in 0.15s ease-out;
    }
    .action-toast.visible { display: block; }
    .action-toast kbd {
      background: var(--surface); border: 1px solid var(--border);
      padding: 1px 5px; border-radius: 3px; font-family: inherit; font-size: 12px;
    }
    @keyframes toast-in {
      from { opacity: 0; transform: translateX(-50%) translateY(8px); }
      to { opacity: 1; transform: translateX(-50%) translateY(0); }
    }

    @media (max-width: 760px) {
      .nimbus-dashboard header { padding: 11px 14px; gap: 10px; }
      .nimbus-dashboard header .dash-brand { font-size: 16px; }
      .nimbus-dashboard header { flex-wrap: wrap; }
      .nimbus-dashboard header .dash-nav { gap: 12px; }
      .nimbus-dashboard header .app-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .main-tab-bar { padding: 0 8px; }
      .main-tab { flex: 1; padding: 9px 6px; text-align: center; font-size: 12px; }
      .phi-setup-card {
        grid-template-columns: 1fr;
        gap: 11px;
        padding: 12px 14px;
      }
      .phi-setup-copy h2 { font-size: 15px; }
      .phi-setup-copy p { display: none; }
      .phi-review-bar {
        align-items: flex-start;
        padding: 7px 10px;
        overflow-x: auto;
        scrollbar-width: none;
      }
      .phi-review-bar::-webkit-scrollbar { display: none; }
      .phi-filter-group { width: max-content; }
      .phi-review-note { display: none; }
      .phi-summary-bar { padding: 7px 10px; gap: 10px; flex-wrap: wrap; }
      .phi-summary-bar .spacer { display: none; }
      .phi-summary-bar .cascade-btn,
      .phi-summary-bar .reset-btn { padding: 5px 8px; font-size: 10px; }
      .phi-layout { flex-direction: column; }
      .obj-sidebar {
        width: 100%;
        min-width: 0;
        height: 30%;
        min-height: 145px;
        border-right: 0;
        border-bottom: 1px solid var(--border);
      }
      .field-panel { min-height: 0; }
      .field-panel-header { padding: 9px 12px; }
      .field-panel-toolbar { padding: 6px 10px; gap: 7px; }
      .field-search-input { width: 120px; }
      #fieldSortBtn { white-space: nowrap; }
      #fieldPanelStats { display: none; }
      .field-table th,
      .field-table td { padding-left: 8px; padding-right: 8px; }
      .field-table th:nth-child(3),
      .field-table td:nth-child(3),
      .field-table th:nth-child(4),
      .field-table td:nth-child(4) { display: none; }
      .analysis-content { padding: 14px 11px; --pad-top: 14px; }
      .posture-bar { display: block; }
      .posture-verdict { padding: 18px 16px; }
      .posture-counts { grid-template-columns: repeat(4, 1fr); min-width: 0; border: 0; border-top: 1px solid var(--border); }
      .posture-count { min-height: 62px; border-width: 0 0 0 1px; }
      .posture-count:first-child { border-left: 0; }
      .category-grid { grid-template-columns: repeat(5, 164px); }
      .findings-toolbar { gap: 6px; }
      .findings-count { width: 100%; margin: 3px 0 0; }
      .finding-header { align-items: flex-start; flex-wrap: wrap; }
      .finding-title { min-width: calc(100% - 88px); }
      .finding-scope { width: 100%; margin-left: 88px; white-space: normal; }
      .evidence-rail > section { grid-template-columns: 58px 1fr; gap: 8px; padding-left: 12px; }
      .occurrence-row { display: block; }
      .occurrence-row code { display: block; margin-top: 3px; }
      .review-places .occurrence-row small { display: block; margin-top: 3px; text-align: left; }
      .access-setup-card { grid-template-columns: 1fr; gap: 10px; padding: 14px; }
      .matrix-ignore-controls { width: 100%; flex-wrap: wrap; margin-left: 0; }
      .ignore-reason-input { min-width: 0; flex: 1 1 180px; }
    }

    /* Focus indicator on panels */
    .obj-sidebar.kb-focus { border-right-color: var(--accent); }
    .field-panel.kb-focus .field-table-wrap { outline: 1px solid var(--accent); outline-offset: -1px; }

    /* Confirmation modal */
    .confirm-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.6);
      display: flex; align-items: center; justify-content: center;
      z-index: 100; display: none;
    }
    .confirm-overlay.visible { display: flex; }
    .confirm-box {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 14px; padding: 24px 28px; min-width: 340px;
      max-width: 440px;
    }
    .confirm-box h4 { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
    .confirm-box p { font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }
    .confirm-box .confirm-actions {
      display: flex; gap: 8px; justify-content: flex-end;
    }
    .confirm-box .confirm-actions button {
      padding: 6px 18px; border-radius: 5px; font-size: 13px;
      font-weight: 600; cursor: pointer; border: 1px solid var(--border);
    }
    .confirm-box .btn-confirm {
      background: var(--accent); color: var(--on-accent); border-color: var(--accent);
    }
    .confirm-box .btn-confirm:hover { opacity: 0.85; }
    .confirm-box .btn-cancel {
      background: transparent; color: var(--text-muted);
    }
    .confirm-box .btn-cancel:hover { color: var(--text); border-color: var(--text); }
    .confirm-box .hint {
      font-size: 11px; color: var(--text-muted); margin-top: 12px; text-align: center;
    }
    .confirm-box .hint kbd {
      background: var(--surface2); border: 1px solid var(--border);
      padding: 1px 5px; border-radius: 3px; font-family: inherit; font-size: 11px;
    }

    /* Cascade PHI button */
    .cascade-btn {
      font-size: 12px; font-weight: 600;
      background: var(--accent); color: var(--on-accent);
      border: 1px solid var(--accent);
      padding: 4px 14px; border-radius: 4px; cursor: pointer;
      white-space: nowrap;
    }
    .cascade-btn:hover { opacity: 0.85; }

    /* Cascade modal */
    .cascade-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.6);
      display: none; align-items: center; justify-content: center;
      z-index: 200;
    }
    .cascade-overlay.visible { display: flex; }
    .cascade-modal {
      background: var(--surface); border: 1px solid var(--border);
      border-radius: 14px; width: 90%; max-width: 900px;
      max-height: 85vh; display: flex; flex-direction: column;
    }
    .cascade-header {
      padding: 20px 24px 12px; display: flex; justify-content: space-between; align-items: flex-start;
      border-bottom: 1px solid var(--border);
    }
    .cascade-header h3 { font-size: 16px; font-weight: 600; margin: 0; }
    .cascade-subtitle { font-size: 13px; color: var(--text-muted); margin: 4px 0 0; }
    .cascade-close {
      background: none; border: none; font-size: 22px; color: var(--text-muted);
      cursor: pointer; padding: 0 4px; line-height: 1;
    }
    .cascade-close:hover { color: var(--text); }
    .cascade-body {
      flex: 1; overflow-y: auto; padding: 16px 24px;
    }
    .cascade-footer {
      padding: 12px 24px; border-top: 1px solid var(--border);
      display: flex; align-items: center; gap: 12px;
    }
    .cascade-summary { font-size: 13px; color: var(--text-muted); flex: 1; }
    .cascade-footer .btn-cancel, .cascade-footer .btn-confirm {
      padding: 6px 18px; border-radius: 5px; font-size: 13px;
      font-weight: 600; cursor: pointer; border: 1px solid var(--border);
    }
    .cascade-footer .btn-confirm {
      background: var(--accent); color: var(--on-accent); border-color: var(--accent);
    }
    .cascade-footer .btn-confirm:hover { opacity: 0.85; }
    .cascade-footer .btn-cancel {
      background: transparent; color: var(--text-muted);
    }
    .cascade-footer .btn-cancel:hover { color: var(--text); border-color: var(--text); }

    /* Cascade object groups */
    .cascade-object-group {
      border: 1px solid var(--border); border-radius: 6px;
      margin-bottom: 10px; overflow: hidden;
    }
    .cascade-object-header {
      padding: 10px 14px; background: var(--surface2); cursor: pointer;
      display: flex; align-items: center; gap: 10px; font-size: 13px;
      user-select: none;
    }
    .cascade-object-header:hover { background: var(--bg); }
    .cascade-expand-icon {
      font-size: 10px; transition: transform 0.15s; display: inline-block; width: 12px;
    }
    .cascade-object-group.open .cascade-expand-icon { transform: rotate(90deg); }
    .cascade-connection-desc { color: var(--text-muted); font-size: 12px; flex: 1; }
    .cascade-field-count {
      font-size: 11px; color: var(--text-muted); background: var(--surface);
      padding: 2px 8px; border-radius: 10px;
    }
    .cascade-object-fields { display: none; padding: 8px 14px; }
    .cascade-object-group.open .cascade-object-fields { display: block; }
    .cascade-group-actions {
      display: flex; gap: 8px; margin-bottom: 8px;
    }
    .cascade-group-actions button {
      font-size: 11px; background: var(--surface2); border: 1px solid var(--border);
      color: var(--text-muted); padding: 2px 10px; border-radius: 4px; cursor: pointer;
    }
    .cascade-group-actions button:hover { color: var(--text); border-color: var(--accent); }
    .cascade-field-row {
      display: flex; align-items: center; gap: 10px; padding: 5px 0;
      border-bottom: 1px solid var(--border); font-size: 13px;
    }
    .cascade-field-row:last-child { border-bottom: none; }
    .cascade-toggle { display: flex; align-items: center; gap: 8px; cursor: pointer; min-width: 0; }
    .cascade-toggle input[type="checkbox"] { accent-color: var(--accent); }
    .cascade-field-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cascade-risk { font-size: 11px; color: var(--text-muted); margin-left: auto; white-space: nowrap; flex-shrink: 0; max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
    .cascade-risk-connection { color: var(--critical); font-weight: 500; }
    .cascade-risk-identifier { color: var(--high); font-weight: 500; }
    .cascade-risk-file { color: var(--high); font-weight: 500; }
    .cascade-risk-rich_text { color: var(--high); font-weight: 500; }
    .cascade-risk-date { color: var(--medium); }

    /* Field search in toolbar */
    .field-search-input {
      background: var(--surface2);
      border: 1px solid var(--input-border);
      border-radius: 6px;
      padding: 4px 10px;
      color: var(--text);
      font-size: 12px;
      outline: none;
      width: 180px;
    }
    .field-search-input:focus { border-color: var(--accent); }
    .field-search-input::placeholder { color: var(--text-muted); }

    /* Shortcut hints in header */
    .shortcuts-hint {
      font-size: 11px; color: var(--text-muted); margin-left: auto;
    }
    .shortcuts-hint kbd {
      background: var(--surface2); border: 1px solid var(--border);
      padding: 1px 5px; border-radius: 3px; font-family: inherit; font-size: 11px;
    }
  
/* ── Pricing / plan cards ───────────────────────────────────────── */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}
.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
}
.plan-card-featured {
  border: 2px solid var(--primary);
}
.plan-badge {
  position: absolute;
  top: -11px;
  right: 16px;
  background: var(--primary);
  color: var(--on-primary);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: .02em;
}
.plan-price {
  margin: 6px 0 14px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.plan-amount { font-size: 36px; font-weight: 600; letter-spacing: -0.025em; color: var(--text); }
.plan-period { font-size: 14px; color: var(--muted); }
.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  flex: 1;
}
.plan-features li {
  padding: 6px 0 6px 22px;
  position: relative;
  font-size: 14px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.plan-features li:last-child { border-bottom: none; }
.plan-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--success);
  font-weight: 700;
}

/* Store status banner (dashboard.js showStoreBanner): the first row of the app screen, above its header,
   so it never covers the top bar. Light red on the dark dashboard, for a save or load that failed. */
.store-banner {
  flex-shrink: 0;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #fdf3f2;
  border-bottom: 1px solid #f2c9c3;
  color: #7d2318;
  font: 14px var(--font-sans);
}
.store-banner button {
  flex-shrink: 0;
  padding: 5px 14px;
  border: 1px solid #c0392b;
  border-radius: 6px;
  background: #c0392b;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.store-banner button:hover { opacity: 0.9; }

/* ═══════════════════════════════════════════════════════════════════════
   Layout fixes from the responsive UI suite (tests/ui/responsive.spec.js, 2026-10-16).
   Kept together and last, so they override the rules above at the same specificity.
   ═══════════════════════════════════════════════════════════════════════ */

/* Form controls take the page font (browsers default them to Arial). */
button, input, select, textarea { font-family: inherit; }

/* Cards laid out by a grid get their spacing from the grid gap, not from `.card + .card`
   (that margin pushed the Annual plan 16px below Monthly and doubled the gap when stacked). */
.plan-grid > .card + .card,
.app-list > .card + .card { margin-top: 0; }

/* Auth cards keep a margin from the screen edge on phones. */
.auth-wrapper { padding: 16px; }

/* Contrast: white text needs 4.5:1 (#c0392b with white is 5.44:1). */
.btn-danger { background: var(--danger); }
.btn-danger:hover { background: var(--danger-hover); }

/* App list card: a long app id wraps, the status badge stays on one line. */
.app-card { gap: 12px; }
.app-card > div:first-child { min-width: 0; }
.app-card .app-id { overflow-wrap: anywhere; }
.app-card .status-badge { white-space: nowrap; flex-shrink: 0; }

.nimbus-dashboard {
  /* Filled accent buttons: the mint accent with dark ink (avvera's dark .btn-primary), 13.8:1. */
  --accent-strong: var(--accent);
}
.cascade-btn,
.run-analysis-btn,
.confirm-box .btn-confirm,
.cascade-footer .btn-confirm,
.matrix-popover button.primary { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }

/* Labels that must stay on one line. */
.sort-btn, .filter-btn, .phi-readiness-badge, .field-type-badge, .cascade-field-count { white-space: nowrap; }
.phi-readiness-badge { flex-shrink: 0; }

/* Builder link icons sit after the (ellipsized) name, never inside it. */
.obj-item .builder-link,
.cascade-toggle .builder-link { flex-shrink: 0; }

/* Analysis: category cards wrap into rows instead of a sideways scroll; the number and its label
   have their own size (bare text inherited 16px and ran over the titles). */
.category-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); overflow-x: visible; }
.category-card { grid-template-columns: auto minmax(0, 1fr) auto; min-width: 0; }
.area-copy strong { overflow-wrap: anywhere; }
.area-totals { font-size: 10px; white-space: nowrap; color: var(--text-muted); }
.area-totals strong { color: var(--text); }

/* Access matrix: the field column wraps instead of spilling over the cells; the type badge moves under
   the name rather than squeezing it to one word per line. */
.matrix-table tbody th { white-space: normal; overflow-wrap: anywhere; }
.matrix-table tbody th > span:first-child { flex-wrap: wrap; }
.matrix-table tbody th .field-tag { flex: 1 1 140px; min-width: 0; }
.matrix-table tbody th .field-type-badge { flex-shrink: 0; }
.matrix-empty { padding: 28px 20px; border: 1px dashed var(--border); border-radius: 8px; color: var(--text-muted); text-align: center; }
.matrix-empty strong { display: block; margin-bottom: 4px; color: var(--text); }

/* The cell popover never leaves the window (dashboard.js clamps its position too). */
.matrix-popover { max-height: calc(100vh - 16px); overflow-y: auto; }

/* Connected PHI: risk notes and long field names wrap instead of being cut. */
.cascade-field-name { white-space: normal; overflow-wrap: anywhere; }
.cascade-risk { white-space: normal; max-width: 45%; text-align: right; flex-shrink: 1; overflow: visible; }

/* Sideways scroll areas show a thin scrollbar, so more content is visibly there (phones use
   overlay scrollbars that are invisible until touched; a styled one is always drawn). */
.phi-review-bar::-webkit-scrollbar,
.matrix-wrap::-webkit-scrollbar { display: block; height: 6px; }
.phi-review-bar::-webkit-scrollbar-thumb,
.matrix-wrap::-webkit-scrollbar-thumb { background: #3a4356; border-radius: 3px; }
.phi-review-bar::-webkit-scrollbar-track,
.matrix-wrap::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 760px) {
  /* PHI Inventory on a phone: the tab scrolls as one page; the table list and the field table get
     real heights (before, the fixed sections left the field table 14-29px). */
  .main-tab-content.active { overflow-y: auto; }
  .phi-review-bar { scrollbar-width: auto; padding-bottom: 4px; }
  /* Phones draw no scrollbar until touched: a tinted edge shows on the side that has more filters
     (covers that are scrolled with the content hide the edge once its end is reached). */
  .phi-review-bar {
    background:
      linear-gradient(to right, var(--surface) 40%, rgba(var(--surface-rgb), 0)) left center / 28px 100% no-repeat local,
      linear-gradient(to left, var(--surface) 40%, rgba(var(--surface-rgb), 0)) right center / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(var(--accent-rgb), 0.45), transparent) left center / 14px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(var(--accent-rgb), 0.45), transparent) right center / 14px 100% no-repeat scroll,
      var(--surface);
  }
  .phi-layout { flex: none; overflow: visible; }
  .obj-sidebar { height: 220px; min-height: 0; flex: none; }
  .field-panel { flex: none; height: calc(100dvh - var(--topnav-height, 0px) - 110px); min-height: 360px; }

  /* Tap targets of at least 32px. */
  .phi-toggle button { min-width: 32px; min-height: 32px; }
  .sort-btn, .phi-filter, .filter-btn, .cascade-group-actions button { min-height: 32px; }
  .cascade-close { min-width: 32px; min-height: 32px; }

  /* Connected PHI modal fits the phone. */
  .cascade-modal { width: calc(100% - 16px); max-height: calc(100dvh - 16px); }
  .cascade-header { padding: 14px 14px 10px; }
  .cascade-body { padding: 10px 10px; }
  .cascade-footer { padding: 10px 14px; flex-wrap: wrap; }
  .cascade-summary { flex: 1 1 100%; }
  .cascade-footer .btn-cancel, .cascade-footer .btn-confirm { white-space: nowrap; min-height: 36px; }
  .cascade-object-header { flex-wrap: wrap; padding: 10px; }
  .cascade-object-header strong { flex: 1; }
  .cascade-connection-desc { flex: 1 1 100%; order: 3; }
  .cascade-object-fields { padding: 8px 10px; }
  .cascade-group-actions { flex-wrap: wrap; }
  .cascade-field-row { flex-wrap: wrap; row-gap: 2px; }
  .cascade-toggle { flex: 1 1 auto; }
  .cascade-risk { flex: 1 1 100%; max-width: none; text-align: left; margin-left: 24px; }

  /* Matrix field column on a phone: wide enough to read (the matrix scrolls sideways anyway). */
  .matrix-table tbody th { min-width: 210px; max-width: 64vw; }
  .derived-desc { margin-left: 0; }
}

@media (max-width: 760px) {
  /* Small links and buttons outside the app screen: at least 32px tall to tap. */
  .topnav .nav-links a, .topnav .nav-links button { display: inline-flex; align-items: center; min-height: 32px; }
  .auth-card .alt-link a, .auth-card a[href="#"] { display: inline-block; padding: 6px 2px; }
  .verify-token .copy-btn { min-height: 32px; padding: 0 8px; }
}

/* Reset to defaults: the confirmation explains each choice; "Reset everything" is the destructive one. */
.confirm-box { max-width: 500px; }
.confirm-box .confirm-detail:empty { display: none; }
.confirm-box .confirm-detail { margin: -8px 0 18px; font-size: 13px; color: var(--text-muted); }
.confirm-box .confirm-detail p { margin: 0 0 8px; }
.confirm-box .confirm-detail strong { color: var(--text); }
.confirm-box .confirm-actions { flex-wrap: wrap; }
.confirm-box .confirm-actions button { white-space: nowrap; }
.confirm-box .btn-confirm.btn-confirm-danger { background: var(--danger-strong); border-color: var(--danger-strong); color: #fff; }
.confirm-box .btn-confirm.btn-confirm-danger[hidden] { display: none; }
.confirm-box button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Empty filters and placeholders say why they are empty and offer the next click. */
.obj-list-empty { padding: 18px 16px; color: var(--text-muted); font-size: 13px; line-height: 1.45; }
.obj-list-empty p { margin: 0 0 10px; }
.obj-list-empty-action, .placeholder-action {
  margin: 0 6px 6px 0; padding: 6px 12px; min-height: 32px; border: 1px solid var(--border); border-radius: 5px;
  background: var(--surface2); color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.obj-list-empty-action:hover, .placeholder-action:hover { border-color: var(--accent); }
.placeholder-action { margin-top: 14px; }
.field-table-empty td { padding: 18px 12px; color: var(--text-muted); font-size: 13px; }
.field-table-empty .obj-list-empty-action { margin: 0 0 0 8px; }

/* PHI Inventory scrolls as one page: the setup card and the summary scroll away, and the table list and the
   field table then fill the window (each still scrolls on its own). 100px = the header and the tab bar. */
@media (min-width: 761px) {
  .main-tab-content.active { overflow-y: auto; }
  .phi-layout { flex: none; height: calc(100dvh - 100px); min-height: 420px; }
}

/* Light theme for the app screen (the header's switch; kept per browser). The avvera.ca light palette, the
   meaning colours darkened to at least 4.5:1 on white. */
.nimbus-dashboard.theme-light {
  --bg: #f7f8fa;
  --surface: #ffffff; --surface-rgb: 255, 255, 255;
  --surface2: #eef1f5;
  --border: #d5dbe4;
  --text: #14181f;
  --text-muted: #4f5866;
  --accent: #0a8465; --accent-rgb: 10, 132, 101;
  --on-accent: #ffffff;
  --critical: #c0244a; --critical-rgb: 192, 36, 74;
  --high: #b45309; --high-rgb: 180, 83, 9;
  --medium: #8a5a00; --medium-rgb: 138, 90, 0;
  --low: #0f766e; --low-rgb: 15, 118, 110;
  --info: #2563eb; --info-rgb: 37, 99, 235; --info-soft: #1d4ed8;
  --green: #15803d; --green-rgb: 21, 128, 61;
  --input-border: #868f9e;
  --phi-row: rgba(var(--critical-rgb), 0.05);
  --phi-border: rgba(var(--critical-rgb), 0.2);
  color-scheme: light;
}
.nimbus-dashboard.theme-light .phi-review-bar::-webkit-scrollbar-thumb,
.nimbus-dashboard.theme-light .matrix-wrap::-webkit-scrollbar-thumb { background: #b8c1ce; }

/* Rows brought into view (keyboard, scrollIntoView) stop below the sticky column header. */
.field-table-wrap { scroll-padding-top: 36px; }

/* Access Matrix / Analysis before every in-scope field is decided. */
.draft-note { margin: 0 0 14px; padding: 10px 14px; border: 1px solid rgba(var(--medium-rgb), 0.45); border-radius: 8px; background: rgba(var(--medium-rgb), 0.08); color: var(--text); font-size: 13px; }

/* "Showing 2 of 32 (Suggested) · Show all" beside the table's counts. */
.field-filter-note { margin-right: 12px; color: var(--text-muted); font-size: 12px; white-space: nowrap; }
.field-filter-note .obj-list-empty-action { margin-left: 6px; }

    /* AI PHI review (export to the owner's AI assistant, import its decisions) */
    .ai-review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
    .btn-ai-primary {
      font-size: 13px; font-weight: 650; padding: 7px 16px; border-radius: 6px; cursor: pointer;
      background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); white-space: nowrap;
    }
    .btn-ai-primary:hover { opacity: 0.88; }
    .btn-ai-secondary {
      font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 6px; cursor: pointer;
      background: transparent; color: var(--text); border: 1px solid var(--border); white-space: nowrap;
    }
    .btn-ai-secondary:hover { border-color: var(--accent); }
    .ai-review-status { font-size: 12px; color: var(--text-muted); }
    .ai-badge {
      font-size: 10px; padding: 1px 5px; border-radius: 3px; margin-left: 6px; white-space: nowrap;
      background: rgba(var(--accent-rgb), 0.14); color: var(--accent);
    }
    .ai-badge.unsure { background: rgba(var(--medium-rgb), 0.16); color: var(--medium); }
    .field-suggestion-reason.ai-question { color: var(--medium); }
    .ai-overlay {
      position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 210;
      display: flex; align-items: center; justify-content: center;
    }
    .ai-overlay[hidden], .ai-modal [hidden] { display: none !important; }
    .ai-modal {
      background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 14px;
      width: 92%; max-width: 760px; max-height: 88vh; display: flex; flex-direction: column;
    }
    .ai-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 10px; }
    .ai-modal-header h3 { font-size: 17px; font-weight: 650; margin: 0; }
    .ai-modal-body { padding: 6px 22px 18px; overflow: auto; }
    .ai-modal-footer { display: flex; align-items: center; gap: 10px; padding: 12px 22px; border-top: 1px solid var(--border); }
    .ai-modal-footer .spacer { flex: 1; }
    .ai-modal-footer button { padding: 7px 18px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; border: 1px solid var(--border); }
    .ai-modal-footer .btn-confirm { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
    .ai-modal-footer .btn-cancel { background: transparent; color: var(--text-muted); }
    .ai-modal-footer .btn-confirm:disabled { opacity: 0.5; cursor: wait; }
    .ai-steps { margin: 0; padding-left: 22px; display: grid; gap: 16px; }
    .ai-steps li { font-size: 13px; line-height: 1.5; }
    .ai-steps li strong { display: block; font-size: 14px; margin-bottom: 2px; }
    .ai-steps li > span { color: var(--text-muted); display: block; }
    .ai-step-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
    .ai-file-meta { font-size: 12px; color: var(--text-muted); }
    .ai-starter { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; padding: 10px 12px; background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; }
    .ai-starter code { flex: 1; font-family: var(--font-mono); font-size: 12px; white-space: pre-wrap; color: var(--text); }
    #aiImportInput label { display: block; font-size: 13px; color: var(--text-muted); margin-bottom: 8px; }
    #aiImportText {
      width: 100%; box-sizing: border-box; font-family: var(--font-mono); font-size: 12px; padding: 10px;
      background: var(--surface2); color: var(--text); border: 1px solid var(--input-border, var(--border)); border-radius: 8px; resize: vertical;
    }
    #aiImportFile { font-size: 12px; color: var(--text-muted); flex: 1; }
    .ai-blocking { padding: 12px 14px; border: 1px solid rgba(var(--critical-rgb), 0.5); background: rgba(var(--critical-rgb), 0.08); border-radius: 8px; font-size: 13px; }
    .ai-blocking p { margin: 6px 0 0; }
    .ai-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 10px; }
    .ai-summary > div { background: var(--surface2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; }
    .ai-summary .num { display: block; font-size: 22px; font-weight: 700; }
    .ai-summary .num.red { color: var(--critical); }
    .ai-summary .num.amber { color: var(--medium); }
    .ai-summary .sub { display: block; margin-top: 2px; font-size: 11px; color: var(--text-muted); }
    .ai-summary .lbl { font-size: 12px; color: var(--text-muted); }
    .ai-summary-text { font-size: 13px; color: var(--text-muted); margin: 0 0 10px; }
    .ai-errors, .ai-warnings { font-size: 12px; margin: 8px 0; }
    .ai-errors summary { color: var(--critical); cursor: pointer; }
    .ai-warnings summary { color: var(--medium); cursor: pointer; }
    .ai-errors ul, .ai-warnings ul { margin: 6px 0 0; padding-left: 18px; color: var(--text-muted); }
    .ai-table-wrap { max-height: 300px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; margin-top: 10px; }
    .ai-table { width: 100%; border-collapse: collapse; font-size: 12px; }
    .ai-table th { position: sticky; top: 0; background: var(--surface2); text-align: left; padding: 6px 10px; font-weight: 600; color: var(--text-muted); }
    .ai-table td { padding: 5px 10px; border-top: 1px solid var(--border); }
    .ai-table td.num, .ai-table th:not(:first-child) { text-align: right; }
    .ai-replace { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
    @media (max-width: 640px) { .ai-summary { grid-template-columns: repeat(2, 1fr); } }

    /* Review queue: per-table questions (2026-10-19) */
    .review-table { width: 100%; border-collapse: collapse; font-size: 12px; margin: 10px 0; }
    .review-table th { text-align: left; color: var(--text-muted); font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border); }
    .review-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
    .review-table td:nth-child(2) { width: 60px; text-align: right; }
    .analysis-filter-bar {
      /* top: minus the scroller's top padding, so nothing shows through above the bar */
      position: sticky; top: calc(-1 * var(--pad-top, 24px)); z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px;
      margin: 0 0 12px; padding: 6px 12px; font-size: 12px; color: var(--text);
      background: var(--surface); border: 1px solid rgba(var(--accent-rgb), 0.45); border-radius: 8px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    }
    .analysis-filter-bar .filter-btn { padding: 2px 10px; }
    .review-table + .occurrence-list { margin-top: 4px; border-top: 0; }
    .review-places { margin: 8px 0; }
    .review-places > strong { display: block; font-size: 12px; margin-bottom: 4px; }
    .review-places .occurrence-row small { color: var(--text-muted); margin-left: auto; text-align: right; }
    .review-item { padding: 8px 0; border-bottom: 1px solid var(--border); }
    .review-item:last-child { border-bottom: 0; }
    .review-item p { margin: 4px 0; font-size: 13px; }
    .review-how { font-size: 12px; color: var(--text-muted); }
    .review-ask { font-size: 13px; color: var(--text); font-weight: 600; }
    .review-ask span { font-weight: 400; }
    .review-how span, .review-next span { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
    .review-next { margin-top: 12px; padding: 10px 12px; border: 1px solid rgba(var(--accent-rgb), 0.35); border-radius: 8px; background: rgba(var(--accent-rgb), 0.05); }
    .review-next p { margin: 0 0 8px; font-size: 13px; }
    .review-unsure { display: block; font-size: 11px; color: var(--medium); font-weight: 400; }
    .structure-date { margin-top: 8px; font-size: 12px; color: var(--text-muted); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    .structure-date.stale { color: var(--medium); }
    .role-op { padding: 10px 0; border-top: 1px solid var(--border); }
    .role-op h4 { font-size: 14px; font-weight: 650; margin: 0 0 4px; }
    .role-op p { margin: 0 0 6px; font-size: 13px; color: var(--text-muted); }
    .role-op-steps summary { cursor: pointer; font-size: 12px; color: var(--accent); }
    .role-op-steps ol { margin: 6px 0 0; padding-left: 20px; font-size: 12px; }
    .role-op-steps li { margin: 4px 0; }
    .role-op-how { color: var(--text) !important; }
    .matrix-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 12px 0 4px; font-size: 12px; color: var(--text-muted); }
    .matrix-unanswered-filter { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
    .matrix-unanswered-filter:has(input:disabled) { opacity: .6; cursor: default; }
    .matrix-filters select { margin-left: 6px; background: var(--surface2); color: var(--text); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: 12px; max-width: 260px; }
    .matrix-filter-hint { font-size: 11px; }

/* Analysis cards (design canvas, owner review 2026-10-29): heading + pill, two boxes, labelled rows, Fix, source line. */
.nc-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 12px; overflow: hidden; }
.nc-card.finding, .nc-card.finding[class*="severity-"] { border: 1px solid var(--border); }
.review-groups { border-top: 0; display: flex; flex-direction: column; }
.review-group.nc-card { border-top: 1px solid var(--border); }
.nc-card > summary.nc-head, .nc-card > .nc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 18px 20px 0; cursor: pointer; list-style: none; }
.nc-card > summary.nc-head::-webkit-details-marker { display: none; }
.nc-card:not([open]) > summary.nc-head { padding-bottom: 18px; }
.nc-card .nc-title { font-size: 16px; font-weight: 650; line-height: 1.35; min-width: 0; }
.nc-pill { flex-shrink: 0; font-size: 12px; font-weight: 650; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.nc-pill.critical, .nc-pill.high, .nc-pill.medium, .nc-pill.low { text-transform: capitalize; }
.nc-pill.critical { color: var(--critical); background: rgba(var(--critical-rgb), .12); }
.nc-pill.high { color: var(--high); background: rgba(var(--high-rgb), .12); }
.nc-pill.medium, .nc-pill.review { color: var(--medium); background: rgba(var(--medium-rgb), .14); }
.nc-pill.low { color: var(--low); background: rgba(var(--low-rgb), .12); }
.nc-pill.ok { color: var(--green); background: rgba(var(--green-rgb), .12); }
.nc-pill.neutral { color: var(--text-muted); background: rgba(127, 127, 127, .12); }
.nc-body { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 14px; font-size: 14px; }
.nc-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.nc-box { border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; background: rgba(127, 127, 127, .07); min-width: 0; }
.nc-box strong { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.nc-box.bad { background: rgba(var(--high-rgb), .09); }
.nc-box.bad .nc-lbl { color: var(--high); }
.nc-box.warn { background: rgba(var(--medium-rgb), .11); }
.nc-box.warn .nc-lbl { color: var(--medium); }
.nc-box.ok { background: rgba(var(--green-rgb), .09); }
.nc-box.ok .nc-lbl { color: var(--green); }
.nc-ops { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.nc-op-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.nc-op { border-radius: 8px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.nc-op strong { display: block; font-size: 15px; font-weight: 600; }
.nc-op small { display: block; font-size: 12px; font-weight: 600; }
.nc-op.ok { background: rgba(var(--green-rgb), .1); color: var(--green); }
.nc-op.bad { background: rgba(var(--critical-rgb), .09); color: var(--critical); }
.nc-op strong { color: var(--text); }
.nc-op-icon { width: 22px; height: 22px; flex: none; }
.nc-op-icon circle { fill: currentColor; }
.nc-meter { display: flex; flex-direction: column; gap: 6px; }
.nc-meter .phi-progress-track { width: 100%; }
.nc-meter .phi-progress-track i { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.nc-meter-text { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--text-muted); }
.nc-meter-text strong { color: var(--text); }
.nc-op-icon path { fill: none; stroke: var(--surface); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.nc-place-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
.nc-place-table th { text-align: left; color: var(--text-muted); font-size: 12px; font-weight: 600; padding: 6px 8px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.nc-place-table td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.nc-place-table tr:last-child td { border-bottom: 0; }
.nc-op-verb { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; white-space: nowrap; color: var(--critical); }
.nc-op-verb .nc-op-icon { width: 16px; height: 16px; }
@media (max-width: 640px) { .nc-steps { overflow-x: auto; } .nc-place-table { min-width: 560px; } }
.nc-lbl { font-size: 12px; font-weight: 650; color: var(--text-muted); }
.nc-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.nc-row > p, .nc-fix > p { margin: 0; line-height: 1.55; }
.nc-effect, .nc-check, .nc-confirm .nc-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; }
.nc-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nc-more { font-size: 12px; color: var(--text-muted); }
.nc-fix { border-top: 1px solid var(--border); padding-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.nc-steps > summary { cursor: pointer; font-size: 13px; color: var(--text-muted); }
.nc-steps ol { margin: 8px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }
.nc-links { display: flex; flex-wrap: wrap; gap: 16px; }
.nc-link { background: none; border: 0; padding: 6px 0; min-height: 32px; color: var(--info); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; }
.nc-foot { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; font-size: 12px; color: var(--text-muted); }
.nc-foot a { text-decoration: underline !important; border-bottom: 0 !important; }
.nc-review .review-table { margin: 0; }
.coverage-list { grid-template-columns: 1fr; gap: 0; }
.coverage-list article.nc-card { padding: 0 0 16px; }
.coverage-list article.nc-card span, .coverage-list article.nc-card strong, .coverage-list article.nc-card p { display: initial; margin: 0; }
.coverage-list article.nc-card .nc-row { padding: 12px 20px 0; }
.coverage-list article.nc-card .nc-row p { color: var(--text); font-size: 14px; }
.coverage-list article.nc-card .nc-lbl { color: var(--text-muted); font-size: 12px; }
.coverage-list article.nc-card .nc-head { padding-bottom: 0; cursor: default; }
.nc-checkbox { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 20px 0; font-size: 14px; cursor: pointer; }
.nc-checkbox input { width: 20px; height: 20px; accent-color: var(--accent); }
.nc-confirm.done { opacity: .45; }
@media (max-width: 640px) {
  .nc-pair { grid-template-columns: 1fr; }
  .nc-effect, .nc-check, .nc-confirm .nc-row { grid-template-columns: 1fr; gap: 4px; }
  .nc-card > summary.nc-head, .nc-card > .nc-head { padding: 14px 14px 0; }
  .nc-body { padding: 12px 14px 14px; }
}

/* One place per row group on an access card: What / Where / Gets in / Fix (owner 2026-10-29). */
.nc-places { list-style: decimal; }
.nc-place { padding: 8px 0; border-bottom: 1px solid var(--border); }
.nc-place:last-child { border-bottom: 0; }
.nc-place-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 2px 0; }
@media (max-width: 640px) { .nc-place-row { grid-template-columns: 1fr; gap: 2px; } }

/* Emails that carry PHI (design option A, owner 2026-10-30). */
.em-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.em-obj { font-size: 15px; font-weight: 650; padding-top: 10px; border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: baseline; }
.em-obj small { font-size: 13px; font-weight: 500; color: var(--text-muted); }
.em-type { font-size: 12px; font-weight: 700; color: var(--text-muted); letter-spacing: .04em; margin: 8px 0 2px; }
.em-email { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-top: 6px; }
.em-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; }
.em-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.em-subject { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.em-meta { display: flex; gap: 6px; flex-wrap: wrap; align-items: baseline; font-size: 13px; }
.em-ml { width: 56px; flex-shrink: 0; color: var(--text-muted); font-weight: 600; }
.em-toggle { font: inherit; font-size: 13px; padding: 8px 12px; min-height: 36px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); cursor: pointer; white-space: nowrap; }
.em-toggle:hover { background: rgba(127, 127, 127, .1); }
.em-full { border-top: 1px solid var(--border); background: rgba(127, 127, 127, .05); padding: 14px 16px; display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 8px 14px; font-size: 14px; align-items: baseline; }
.em-full[hidden], .em-email[hidden], .em-group[hidden], .em-typegroup[hidden] { display: none; }
.em-k { color: var(--text-muted); font-weight: 600; font-size: 13px; }
.em-msg { grid-column: 1 / -1; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; line-height: 1.6; white-space: pre-line; overflow-wrap: anywhere; }
.em-phi { background: rgba(var(--critical-rgb), .14); color: var(--critical); border-radius: 4px; padding: 0 4px; font-weight: 600; }
.em-guide { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }
.nc-answers { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) {
  .em-row { grid-template-columns: 1fr; }
  .em-full { grid-template-columns: 1fr; gap: 2px; }
}

.nc-place-row { grid-template-columns: 120px minmax(0, 1fr); }
.nc-shared-permission { padding: 4px 0 2px; }

/* Reviewed cards: greyed, green tag (owner 2026-10-30). */
.nc-review.nc-reviewed { opacity: .45; }
.nc-review-mark { padding: 4px 0 0; }
/* In-app navigation is a button; blue links are outside websites (HIPAA references). */
.nc-matrix-ask { align-items: center; gap: 10px; font-size: 14px; }
.nc-matrix-ask .placeholder-action { margin: 0; font-size: 13px; }
.ext-link { color: var(--info); text-decoration: underline; display: inline-flex; align-items: center; gap: 3px; }
.ext-icon { flex-shrink: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.nc-new-since { margin: 0; font-size: 13px; font-weight: 600; color: var(--medium); }

/* Sign-up terms acceptance (the OAuth sign-in page has its own copy of this row). */
.consent-row { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: var(--muted); margin: 4px 0 16px; cursor: pointer; }
.consent-row input { width: auto; margin-top: 3px; flex: none; }
.consent-row a { color: var(--link); }