:root {
  --bg: #faf9f7;
  --panel: #ffffff;
  --panel-2: #f5f3ef;
  --border: #e7e3db;
  --border-strong: #d6d0c4;
  --text: #1c1917;
  --text-dim: #6b6459;
  --text-faint: #a39a8b;
  --primary: #1c2f4f;
  --primary-hover: #16253f;
  --primary-dim: #eef1f6;
  --accent: #b91c1c;
  --accent-dim: #fef2f2;
  --warn: #b45309;
  --warn-dim: #fef7ec;
  --ok: #15803d;
  --ok-dim: #f0fdf4;
  --purple: #6d28d9;
  --purple-dim: #f5f3ff;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.04);
  --shadow-md: 0 4px 16px rgba(28, 25, 23, 0.08);
  --tile-a: #f97316;
  --tile-b: #0ea5e9;
  --tile-c: #16a34a;
  --tile-d: #db2777;
  --tile-e: #7c3aed;
  --tile-f: #b45309;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

body {
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 22px 22px;
  background-position: -11px -11px;
}

/* --- top navbar --- */
.navbar {
  display: flex; align-items: center; gap: 28px;
  padding: 0 32px; height: 62px;
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.brand { display: flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-icon {
  width: 44px; height: 44px;
  object-fit: contain; flex-shrink: 0;
  image-rendering: auto;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.brand-mark { font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); }
.brand-sub {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #52627a;
  margin-top: 2px;
}

.nav-tabs { display: flex; gap: 2px; flex: 1; }
.nav-tab {
  background: transparent; border: none; color: var(--text-dim);
  padding: 8px 14px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 500;
  cursor: pointer; font-family: inherit; transition: all 0.14s ease;
}
.nav-tab:hover { background: var(--panel-2); color: var(--text); }
.nav-tab.active { background: var(--primary-dim); color: var(--primary); font-weight: 600; }

.live-pill {
  display: inline-flex; align-items: center; gap: 6px; width: fit-content; flex-shrink: 0;
  font-size: 11.5px; font-weight: 600; color: var(--ok);
  background: var(--ok-dim); border: 1px solid #bbf7d0;
  padding: 4px 10px; border-radius: 999px;
}
.live-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 rgba(21, 128, 61, 0.4);
  animation: live-pulse 2s ease-out infinite;
}
@keyframes live-pulse {
  0% { box-shadow: 0 0 0 0 rgba(21, 128, 61, 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(21, 128, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(21, 128, 61, 0); }
}

/* --- page header --- */
.page-header {
  padding: 22px 32px 18px;
}
.page-title { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin: 0; color: var(--text); }
.page-subtitle { font-size: 13px; color: var(--text-dim); margin: 3px 0 0; }

main { width: 100%; max-width: none; padding: 0 32px 64px; }
.view { display: none; }
.view.active { display: block; }

/* --- overview command centre --- */
.signal-ticker { height: 38px; display: flex; overflow: hidden; border: 1px solid #c9e9ef; border-radius: var(--radius-sm); background: #f4fcfd; margin-bottom: 18px; }
.ticker-label { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; padding: 0 13px; color: #0e5262; font-size: 10px; font-weight: 800; letter-spacing: .09em; background: #def6f9; }
.ticker-pulse { width: 7px; height: 7px; border-radius: 50%; background: #12b9cc; box-shadow: 0 0 0 4px rgba(18,185,204,.14); }
.ticker-window { min-width: 0; overflow: hidden; display: flex; align-items: center; }
.ticker-track { display: flex; align-items: center; width: max-content; white-space: nowrap; color: #31556a; font-size: 12px; animation: ticker-scroll 110s linear infinite; }
.ticker-track span { padding: 0 16px; }.ticker-track i { width: 5px; height: 5px; border-radius: 50%; background: #ff6b5e; display: inline-block; flex: 0 0 auto; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.dashboard-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(320px, 3fr); gap: 22px; align-items: stretch; min-height: calc(100vh - 214px); }
.dashboard-workspace { min-width: 0; min-height: 100%; }
.regulatory-rail { position: sticky; top: 82px; height: calc(100vh - 214px); min-height: 620px; display: flex; flex-direction: column; border: 1px solid #d8e3ea; border-radius: 14px; overflow: hidden; background: rgba(255,255,255,.92); box-shadow: 0 10px 30px rgba(15,30,53,.07); }
.rail-header { padding: 18px 18px 14px; display: flex; align-items: flex-start; justify-content: space-between; }.eyebrow { color: #16a8bc; font-size: 10px; font-weight: 800; letter-spacing: .12em; margin: 0 0 5px; }.rail-header h2 { margin: 0; font-size: 18px; letter-spacing: -.03em; color: #0f1e35; }.rail-live { display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; padding: 4px 7px; background: #eafff3; color: #12824d; font-size: 9px; font-weight: 800; letter-spacing: .08em; }.rail-live span { width: 5px; height: 5px; background: #20bf6b; border-radius: 50%; }
.rail-feature { display: flex; position: relative; align-items: center; gap: 13px; padding: 15px; margin: 0 12px; border-radius: 10px; overflow: hidden; background: linear-gradient(135deg,#102440,#163962); color: white; }.rail-feature::after { content: ''; position: absolute; width: 90px; height: 90px; right: -26px; top: -38px; border-radius: 50%; background: rgba(32,196,217,.2); }.rail-feature-badge { position: relative; z-index: 1; flex-shrink: 0; width: 60px; height: 60px; border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.25); }.rail-feature img { width: 46px; height: 46px; object-fit: contain; }.rail-feature div { position: relative; z-index: 1; }.rail-feature span { display: block; color: #61dbe7; font-size: 9px; letter-spacing: .1em; font-weight: 800; margin-bottom: 4px; }.rail-feature strong { display: block; font-size: 13px; line-height: 1.25; }.rail-feature small { display: block; color: #c8e9f0; font-size: 10px; margin-top: 6px; }
.rail-meta { color: #718096; font-size: 10px; padding: 14px 18px 9px; }.news-ladder { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; flex: 1; min-height: 0; padding: 0 12px; overflow: hidden; mask-image: linear-gradient(to bottom, transparent, #000 7%, #000 93%, transparent); }.news-stream { min-width: 0; display: flex; flex-direction: column; gap: 7px; animation: stream-up 160s linear infinite; }.news-stream-down { animation-name: stream-down; animation-duration: 185s; }.stream-copy { display: flex; flex-direction: column; gap: 7px; }.news-ladder:hover .news-stream { animation-play-state: paused; }.news-item { display: flex; flex-direction: column; border: 1px solid #e8eef2; border-radius: 8px; overflow: hidden; background: linear-gradient(145deg,#fff,#f8fbfc); color: inherit; text-decoration: none; box-shadow: 0 2px 8px rgba(19,47,70,.035); transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }.news-item:hover { transform: translateY(-2px); border-color: #75ceda; box-shadow: 0 6px 16px rgba(19,104,119,.12); }.news-item:focus-visible { outline: 2px solid #20c4d9; outline-offset: 2px; }.news-cover { width: 100%; aspect-ratio: 16 / 9; background: #eef5f7; overflow: hidden; }.news-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }.news-item-body { display: grid; grid-template-columns: 26px 1fr; gap: 7px; align-items: center; padding: 9px 7px; }.news-avatar { position: relative; width: 26px; height: 26px; border-radius: 7px; background: #eef5f7; flex-shrink: 0; overflow: hidden; }.news-avatar-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #0e5262; }.news-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }.news-copy strong { color: #27364b; display: block; font-size: 10.5px; line-height: 1.35; font-weight: 650; }.news-copy small { color: #84909e; display: block; font-size: 9px; line-height: 1.25; margin-top: 5px; }.news-unavailable { padding: 18px 6px; color: var(--text-dim); font-size: 12px; line-height: 1.5; }.rail-footer { display: flex; justify-content: space-between; flex: 0 0 auto; padding: 12px 18px; background: #f7fafc; color: #176477; font-size: 11px; font-weight: 700; }.rail-footer span { color: #79919d; font-size: 10px; font-weight: 600; }
@keyframes stream-up { from { transform: translateY(0); } to { transform: translateY(-50%); } } @keyframes stream-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }

/* --- stats --- */
.stats-row { display: flex; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.stat-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 22px; min-width: 160px; flex: 1; box-shadow: var(--shadow-sm);
}
.stat-value { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.stat-label { font-size: 12.5px; color: var(--text-dim); margin-top: 4px; }

/* --- apps breakdown --- */
.apps-breakdown-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 22px; margin-bottom: 20px; box-shadow: var(--shadow-sm);
}
.abd-title { font-size: 12.5px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 12px; }
.abd-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--panel-2); margin-bottom: 12px; }
.abd-segment { height: 100%; }
.abd-legend { display: flex; gap: 20px; flex-wrap: wrap; }
.abd-legend-item { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--text-dim); }
.abd-swatch { width: 9px; height: 9px; border-radius: 3px; }

/* --- toolbar / filters --- */
.toolbar { display: flex; gap: 10px; margin-bottom: 18px; align-items: center; flex-wrap: wrap; }
.search-box {
  position: relative; flex: 1; min-width: 200px;
}
.search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--text-faint); }
.search-box input {
  width: 100%; background: var(--panel); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 12px 8px 34px; font-size: 13px; font-family: inherit;
}
.search-box input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }
.filters, .toolbar select {
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 8px 12px; font-size: 13px; font-family: inherit;
}
.flagged-only { font-size: 13px; color: var(--text-dim); display: flex; gap: 6px; align-items: center; white-space: nowrap; }

/* --- product grid --- */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.product-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  box-shadow: var(--shadow-sm);
}
.product-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.product-tile {
  height: 84px; display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 800; color: #fff; letter-spacing: -0.02em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.product-body { padding: 14px 16px 16px; }
.product-app {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint);
  margin-bottom: 6px; font-weight: 600;
}
.product-name { font-size: 14px; font-weight: 600; margin-bottom: 10px; line-height: 1.35; color: var(--text); min-height: 38px; }
.price-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.price-listed { font-size: 17px; font-weight: 700; color: var(--text); }
.price-mrp { font-size: 12.5px; color: var(--text-faint); text-decoration: line-through; }
.badge-row { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 4px; border: 1px solid transparent;
}
.badge-drip { background: var(--accent-dim); color: var(--accent); border-color: #fecaca; }
.badge-urgency { background: var(--warn-dim); color: var(--warn); border-color: #fde68a; }
.badge-baitswitch { background: var(--purple-dim); color: var(--purple); border-color: #ddd6fe; }
.badge-clean { background: var(--ok-dim); color: var(--ok); border-color: #bbf7d0; font-weight: 500; }

.section-title { font-size: 13px; font-weight: 700; margin: 28px 0 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }

/* --- reliability --- */
.heal-card {
  background: var(--warn-dim); border: 1px solid #fde68a; border-radius: var(--radius);
  padding: 18px 22px; margin-bottom: 12px;
}
.heal-card-title { font-weight: 700; color: #b45309; margin-bottom: 10px; font-size: 14px; }
.heal-detail { font-size: 13px; color: #78716c; line-height: 1.65; }
.heal-counts { display: flex; gap: 20px; margin-top: 12px; flex-wrap: wrap; }
.heal-count { font-size: 13px; color: var(--text-dim); }
.heal-count b { font-size: 16px; color: var(--text); }

.run-log-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 18px; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--text-dim); gap: 12px;
}
.run-log-row:last-child { border-bottom: none; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; margin-right: 9px; flex-shrink: 0; }
.status-success { background: var(--ok); }
.status-error { background: var(--accent); }
.status-empty { background: var(--warn); }
.run-log-container { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }

/* --- detail panel --- */
.detail-backdrop {
  position: fixed; inset: 0; background: rgba(17, 24, 39, 0.4); opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease; z-index: 20;
}
.detail-backdrop.open { opacity: 1; pointer-events: auto; }

.detail-panel {
  position: fixed; top: 0; right: 0; height: 100%; width: min(480px, 100%);
  background: var(--panel); border-left: 1px solid var(--border);
  transform: translateX(100%); transition: transform 0.25s ease; z-index: 21;
  overflow-y: auto; box-shadow: -8px 0 24px rgba(16, 24, 40, 0.08);
}
.detail-panel.open { transform: translateX(0); }
.detail-panel-inner { padding: 24px; }
.close-btn {
  background: var(--panel-2); border: 1px solid var(--border); color: var(--text-dim); width: 32px; height: 32px;
  border-radius: 50%; font-size: 18px; cursor: pointer; float: right; line-height: 1;
}
.close-btn:hover { color: var(--text); }
.detail-title { font-size: 17px; font-weight: 700; margin: 8px 0 4px; clear: both; color: var(--text); }
.detail-app { font-size: 11.5px; color: var(--text-faint); text-transform: uppercase; margin-bottom: 16px; font-weight: 600; letter-spacing: 0.04em; }
.detail-flags { margin-bottom: 20px; }
.flag-evidence {
  background: var(--accent-dim); border-left: 3px solid var(--accent);
  padding: 10px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 8px; color: #7f1d1d;
}
.history-chart { width: 100%; height: 160px; margin: 16px 0; }
.history-table { width: 100%; font-size: 12px; border-collapse: collapse; }
.history-table th, .history-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--border); }
.history-table th { color: var(--text-faint); font-weight: 600; text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.03em; }
.history-table td { color: var(--text-dim); }
.empty-state { color: var(--text-faint); text-align: center; padding: 48px 16px; font-size: 14px; grid-column: 1 / -1; }

/* --- data quality --- */
.dq-intro {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 22px; font-size: 13.5px; color: var(--text-dim); line-height: 1.65; margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.dq-intro code { background: var(--panel-2); border: 1px solid var(--border); padding: 2px 6px; border-radius: 4px; font-size: 12px; color: var(--primary); }
.dq-check-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 22px; margin-bottom: 12px; box-shadow: var(--shadow-sm);
}
.dq-check-header { display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px; }
.dq-check-count { font-size: 24px; font-weight: 800; color: var(--warn); min-width: 40px; letter-spacing: -0.02em; }
.dq-check-label { font-size: 14px; font-weight: 600; color: var(--text); }
.dq-check-detail { font-size: 13px; color: var(--text-dim); line-height: 1.6; }
.dq-final-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; font-size: 14px; box-shadow: var(--shadow-sm);
}
.dq-final-card p { color: var(--text-dim); margin: 0 0 4px; }
.dq-final-row { display: flex; gap: 32px; margin-top: 14px; flex-wrap: wrap; }
.dq-final-stat { font-size: 14px; color: var(--text-dim); }
.dq-final-num { font-size: 28px; font-weight: 800; margin-right: 8px; letter-spacing: -0.02em; }

/* Restored evidence dashboards */
.dq-shell,.reliability-shell,.cases-shell{max-width:1600px;margin:auto;padding:6px 0 20px}.dq-hero,.reliability-hero,.cases-hero{min-height:230px;padding:38px 52px;border-radius:20px;display:flex;justify-content:space-between;align-items:center;color:#fff;overflow:hidden}.dq-hero{background:radial-gradient(circle at 88% 18%,#1f7195,transparent 30%),linear-gradient(120deg,#091a31,#123b61)}.reliability-hero{background:radial-gradient(circle at 88% 18%,#18776d,transparent 30%),linear-gradient(120deg,#0a1929,#123f49)}.cases-hero{background:radial-gradient(circle at 88% 18%,#b45d22,transparent 30%),linear-gradient(120deg,#261c23,#773c20)}.dq-eyebrow,.reliability-eyebrow,.cases-eyebrow,.dq-section-heading span,.reliability-heading span,.cases-heading span{color:#65dfd7;font-size:10px;font-weight:800;letter-spacing:.14em}.cases-eyebrow,.cases-heading span{color:#f5c77a}.dq-hero h2,.reliability-hero h2,.cases-hero h2{font-size:44px;line-height:1;margin:12px 0;letter-spacing:-.05em}.dq-hero p,.reliability-hero p,.cases-hero p{max-width:690px;color:#d0e2e8;font-size:14px;line-height:1.6}.cases-hero p{color:#f2d7c4}.dq-source-note{font-size:11px;color:#b7dfe6}.dq-source-note code{padding:3px 7px;border:1px solid #4f8398;border-radius:5px;color:#fff}.dq-hero-seal,.reliability-orbit,.cases-stamp{width:112px;height:112px;border:1px solid #86dcd8;border-radius:50%;display:grid;place-items:center;text-align:center;font-size:28px}.dq-hero-seal small,.cases-stamp small{font-size:9px}.reliability-orbit{font-size:11px;color:#7ce8ce;box-shadow:0 0 0 13px #ffffff12}.cases-stamp{border-color:#ffdaa0;color:#ffdaa0;font-size:17px;font-weight:800}.dq-summary,.reliability-summary,.cases-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:-25px 28px 25px;position:relative}.dq-summary>div,.reliability-stat,.cases-summary>div{background:#fff;border:1px solid #dbe6e8;border-radius:12px;padding:16px 18px;box-shadow:0 8px 18px #17344914}.dq-summary strong,.reliability-stat strong,.cases-summary strong{display:block;color:#123648;font-size:24px}.dq-summary small,.reliability-stat small,.cases-summary small{display:block;margin-top:5px;color:#70858b;font-size:10px}.dq-content-grid,.reliability-grid{display:grid;grid-template-columns:1.7fr .72fr;gap:20px}.dq-pipeline-panel,.dq-method-panel,.reliability-events-panel,.reliability-policy,.run-history-panel,.cases-content{padding:28px;border:1px solid #dbe7e8;border-radius:16px;background:#fffdfddd}.dq-section-heading,.reliability-heading,.cases-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:20px}.dq-section-heading h2,.reliability-heading h2,.cases-heading h2{margin:6px 0 0;font-size:22px;color:#17394b}.dq-section-heading p,.reliability-heading p,.cases-heading p{max-width:300px;margin:0;color:#71848a;font-size:11px;text-align:right}.dq-checks{display:grid;gap:10px}.dq-check-card{display:grid;grid-template-columns:34px 1fr auto;gap:12px;margin:0;padding:14px;border:1px solid #e1ebec;border-radius:12px;background:#fbfdfd}.dq-check-step{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#fff0dc;color:#ac6408;font-size:10px;font-weight:800}.dq-check-card small{color:#a76613;font-size:8px;font-weight:800}.dq-check-card h3{margin:5px 0;font-size:13px;color:#244151}.dq-check-card p{margin:0;color:#687f84;font-size:11px;line-height:1.45}.dq-check-card>strong{color:#b25e00;font-size:25px}.dq-method-panel,.reliability-policy{background:linear-gradient(155deg,#12374b,#0d2238);color:#b9d3da}.dq-method-panel h3,.reliability-policy h3{color:#fff;font-size:20px;line-height:1.15}.dq-method-panel p,.reliability-policy p{font-size:11px;line-height:1.5}.dq-method-list>div{padding:11px 0;border-top:1px solid #ffffff22;font-size:12px}.dq-method-list b,.reliability-policy b{color:#63dfd0;margin-right:10px}.dq-outcome-wrap,.run-history-panel{margin-top:20px}.dq-final-card{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;background:#effaf4;border:1px solid #caead8;border-radius:12px}.dq-final-card h3{margin:5px 0;color:#174939}.dq-final-card p{margin:0;font-size:11px}.dq-final-results{display:flex;gap:22px}.dq-final-results b{display:block;color:#087d48;font-size:26px}.dq-final-results span:last-child b{color:#b91c1c}.heal-card{background:#fafffd;border:1px solid #d9ebe7;padding:16px;border-radius:12px;margin-bottom:10px}.heal-card-title{color:#087a5b;font-size:12px;font-weight:800}.heal-detail{margin-top:8px;font-size:11px;line-height:1.5}.heal-prompt{margin-top:8px;padding:8px;background:#eaf7f5;border-radius:6px;font:9px ui-monospace,monospace;color:#37646a}.terminal-window{border:1px solid #173847;border-radius:10px;overflow:hidden;background:#0b1e2a;color:#b6d3d5;font:10px ui-monospace,monospace}.terminal-bar{padding:10px 14px;background:#102c3b;color:#86b6bc}.terminal-row{display:grid;grid-template-columns:180px 80px 1fr 70px 70px;gap:10px;padding:9px 14px;border-top:1px solid #ffffff10}.terminal-row b{color:#8adfe7}.terminal-row em{color:#f1ce80;text-align:right}.terminal-row i{font-style:normal;text-transform:uppercase}.status-success{color:#66d89d}.status-error{color:#ff9188}.status-empty{color:#f2c66f}.terminal-loader{padding:25px;background:#0b1e2a;color:#69dfc4;font:12px ui-monospace,monospace;border-radius:10px}.compact-pagination{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding-top:10px;font-size:10px}.compact-pagination button{padding:5px 8px;border:1px solid #d9e5e5;border-radius:5px;background:#fff;color:#2b6b68}.compact-pagination button:disabled{opacity:.4}.cases-card-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.ccpa-case{display:flex;flex-direction:column;min-height:230px;padding:15px;border:1px solid #e9e2dc;border-radius:12px;background:#fffdf9}.ccpa-case-top{align-items:flex-start}.ccpa-case-company{color:#49342a;font-size:14px}.ccpa-case-penalty{padding:4px 6px;background:#fff5e2;border:1px solid #f1ddbe;border-radius:5px;font-size:9px}.ccpa-case-pattern{font-size:9px;margin-bottom:10px}.ccpa-case-detail{flex:1;font-size:11px;line-height:1.45}.ccpa-case-footer{padding-top:8px;border-top:1px solid #eee7e1;font-size:9px}.ccpa-case-footer a{font-size:9px}
@media(max-width:860px){.dq-hero,.reliability-hero,.cases-hero{min-height:0;padding:30px 24px}.dq-hero h2,.reliability-hero h2,.cases-hero h2{font-size:32px}.dq-hero-seal,.reliability-orbit,.cases-stamp{display:none}.dq-summary,.reliability-summary,.cases-summary{grid-template-columns:repeat(2,1fr);margin:-8px 8px 18px}.dq-content-grid,.reliability-grid{grid-template-columns:1fr}.dq-pipeline-panel,.dq-method-panel,.reliability-events-panel,.reliability-policy,.run-history-panel,.cases-content{padding:20px}.cases-card-grid{grid-template-columns:1fr}.terminal-window{overflow-x:auto}.terminal-row{min-width:580px}}

/* Data Quality compact desktop canvas: all audit stages remain visible at once. */
@media (min-width:861px){
  body.data-quality-mode{overflow:hidden}.data-quality-mode .page-header{height:58px;padding:11px 32px 7px}.data-quality-mode .page-title{font-size:18px}.data-quality-mode main{height:calc(100vh - 120px);padding:0 32px 18px;overflow:hidden}.data-quality-mode #data-quality{height:100%;overflow:hidden}.data-quality-mode .dq-shell{height:100%;display:flex;flex-direction:column;padding:0;max-width:none}.data-quality-mode .dq-hero{min-height:138px;flex:0 0 138px;padding:18px 38px;border-radius:16px}.data-quality-mode .dq-hero h2{margin:7px 0;font-size:31px}.data-quality-mode .dq-hero p{font-size:11px;line-height:1.4}.data-quality-mode .dq-source-note{margin-top:8px;font-size:9px}.data-quality-mode .dq-hero-seal{width:78px;height:78px;font-size:22px}.data-quality-mode .dq-summary{flex:0 0 58px;margin:-8px 20px 10px;gap:9px}.data-quality-mode .dq-summary>div{padding:10px 13px}.data-quality-mode .dq-summary strong{font-size:19px}.data-quality-mode .dq-summary small{margin-top:2px;font-size:8.5px}.data-quality-mode .dq-content-grid{flex:1;min-height:0;gap:13px}.data-quality-mode .dq-pipeline-panel,.data-quality-mode .dq-method-panel{min-height:0;padding:16px 20px;border-radius:13px}.data-quality-mode .dq-section-heading{margin-bottom:10px}.data-quality-mode .dq-section-heading h2{font-size:18px}.data-quality-mode .dq-section-heading p{font-size:9px}.data-quality-mode .dq-checks{gap:7px}.data-quality-mode .dq-check-card{grid-template-columns:29px 1fr auto;gap:9px;padding:9px 10px}.data-quality-mode .dq-check-step{width:26px;height:26px;font-size:9px}.data-quality-mode .dq-check-card h3{margin:3px 0;font-size:11px}.data-quality-mode .dq-check-card p{font-size:9px;line-height:1.3}.data-quality-mode .dq-check-card>strong{font-size:20px}.data-quality-mode .dq-method-panel h3{margin:8px 0;font-size:17px}.data-quality-mode .dq-method-panel p{font-size:9px;line-height:1.4}.data-quality-mode .dq-method-list>div{padding:7px 0;font-size:10px}.data-quality-mode .dq-outcome-wrap{flex:0 0 96px;margin-top:11px}.data-quality-mode .dq-outcome-wrap>.dq-section-heading{display:none}.data-quality-mode .dq-final-card{height:100%;padding:14px 20px}.data-quality-mode .dq-final-card h3{font-size:16px}.data-quality-mode .dq-final-card p{font-size:9px}.data-quality-mode .dq-final-results b{font-size:22px}
}

/* Balance the Data Quality audit around its content, avoiding empty stretched panels. */
.dq-method-list>div{display:flex;align-items:center;gap:10px}.dq-method-list span{display:flex;flex-direction:column}.dq-method-list strong{color:#fff;font-size:11px}.dq-method-list small{color:#8db4c0;font-size:9px;margin-top:2px}.dq-method-note{margin-top:14px;padding:10px 12px;border-radius:8px;background:#ffffff12;color:#72e5d2;font-size:10px;font-weight:800;letter-spacing:.04em}.dq-method-note small{color:#a7c9d1;font-size:9px;font-weight:500;letter-spacing:0}

/* Signal Grid: native CSS recreation for the Data Quality landing hero. */
.dq-hero{position:relative;isolation:isolate;background:radial-gradient(circle at 84% 22%,rgba(42,190,211,.42),transparent 27%),radial-gradient(circle at 64% 104%,rgba(23,101,166,.48),transparent 42%),linear-gradient(112deg,#06172d 0%,#0b2949 55%,#0b5d78 100%)}.dq-hero::before{content:"";position:absolute;z-index:-1;inset:0;opacity:.64;background-image:linear-gradient(rgba(116,232,239,.2) 1px,transparent 1px),linear-gradient(90deg,rgba(116,232,239,.2) 1px,transparent 1px);background-size:32px 32px;background-position:-1px -1px;mask-image:linear-gradient(90deg,#000 0%,rgba(0,0,0,.77) 55%,transparent 100%)}.dq-hero::after{content:"";position:absolute;z-index:-1;right:11%;top:-16%;width:38%;height:136%;opacity:.82;background:radial-gradient(circle at 55% 33%,#73eef0 0 3px,transparent 4px),radial-gradient(circle at 77% 67%,#73eef0 0 3px,transparent 4px),radial-gradient(circle at 30% 80%,#73eef0 0 2px,transparent 3px),linear-gradient(110deg,transparent 42%,rgba(131,241,239,.16) 48%,transparent 55%);filter:drop-shadow(0 0 9px rgba(101,235,231,.65));animation:dq-signal-sweep 7s ease-in-out infinite}.dq-hero>div{position:relative;z-index:1}.dq-hero-seal{background:rgba(5,33,58,.2);box-shadow:0 0 0 10px rgba(115,238,240,.055),0 0 28px rgba(106,234,235,.17)}.dq-eyebrow{display:flex;align-items:center;gap:8px}.dq-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:#67ead4;box-shadow:0 0 0 5px rgba(103,234,212,.16),0 0 14px rgba(103,234,212,.7)}.dq-hero h2{text-shadow:0 2px 18px rgba(0,0,0,.14)}@keyframes dq-signal-sweep{0%,100%{transform:translateX(-2%) scale(.97);opacity:.5}50%{transform:translateX(4%) scale(1.04);opacity:1}}@media(prefers-reduced-motion:reduce){.dq-hero::after{animation:none}}

/* Reliability telemetry field: a distinct radar-style operational background. */
.reliability-hero{position:relative;isolation:isolate;background:radial-gradient(circle at 82% 50%,rgba(46,225,184,.22),transparent 20%),radial-gradient(circle at 70% 105%,rgba(15,123,132,.5),transparent 46%),linear-gradient(115deg,#071c2a 0%,#0c3442 58%,#0b6466 100%)}.reliability-hero::before{content:"";position:absolute;z-index:-1;right:7%;top:50%;width:270px;height:270px;transform:translateY(-50%);border-radius:50%;background:repeating-radial-gradient(circle,transparent 0 31px,rgba(121,239,211,.22) 32px 33px),linear-gradient(40deg,transparent 48%,rgba(111,239,210,.3) 49%,rgba(111,239,210,.3) 50%,transparent 51%);box-shadow:0 0 0 1px rgba(121,239,211,.24),0 0 42px rgba(30,221,182,.16)}.reliability-hero::after{content:"";position:absolute;z-index:-1;inset:0;opacity:.65;background:radial-gradient(circle at 66% 31%,#72ead2 0 3px,transparent 4px),radial-gradient(circle at 75% 71%,#72ead2 0 3px,transparent 4px),radial-gradient(circle at 91% 39%,#f6e893 0 3px,transparent 4px),linear-gradient(90deg,transparent 0 49%,rgba(112,239,209,.14) 50%,transparent 51%);filter:drop-shadow(0 0 8px rgba(107,236,207,.7));animation:reliability-radar 6.5s ease-in-out infinite}.reliability-hero>div{position:relative;z-index:1}.reliability-orbit{position:relative;border-color:#8aecd8;background:rgba(6,42,51,.22);box-shadow:0 0 0 11px rgba(111,235,209,.06),0 0 30px rgba(77,224,190,.19)}.reliability-orbit::before{content:"";position:absolute;inset:-20px;border:1px dashed rgba(133,238,214,.38);border-radius:50%;animation:reliability-rotate 12s linear infinite}.reliability-eyebrow{display:flex;align-items:center;gap:8px}.reliability-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:#66e5ba;box-shadow:0 0 0 5px rgba(102,229,186,.16),0 0 14px rgba(102,229,186,.7)}@keyframes reliability-radar{0%,100%{transform:translateX(-1.5%);opacity:.45}50%{transform:translateX(2.5%);opacity:1}}@keyframes reliability-rotate{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.reliability-hero::after,.reliability-orbit::before{animation:none}}

/* Recovery playbook lives beside the event evidence; the side panel is now live activity. */
.reliability-process{margin-top:14px;padding:16px;border:1px solid #cfe8e3;border-radius:11px;background:linear-gradient(105deg,#f1fbf8,#fbfffe)}.reliability-process>span{color:#148269;font-size:9px;font-weight:850;letter-spacing:.11em}.reliability-process h3{margin:7px 0 12px;color:#173f43;font-size:16px;letter-spacing:-.02em}.reliability-process>div{display:inline-flex;align-items:flex-start;width:32%;gap:7px;padding-right:10px;vertical-align:top}.reliability-process b{display:grid;place-items:center;flex:0 0 19px;width:19px;height:19px;border-radius:50%;color:#07564b;background:#9debd9;font-size:9px}.reliability-process p{margin:0;color:#668387;font-size:10px;line-height:1.35}.reliability-process strong{display:block;color:#1a4c50;font-size:10px}.reliability-loop-panel{position:relative;overflow:hidden;padding:0;border:1px solid #173e4b;border-radius:16px;color:#c3dbdd;background:linear-gradient(155deg,#0c2e3d,#092131);box-shadow:0 8px 24px rgba(11,55,65,.12)}.reliability-loop-head{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;border-bottom:1px solid rgba(179,235,228,.15);color:#70dfcf;font-size:9px;font-weight:800;letter-spacing:.1em}.reliability-loop-head b{color:#8ee6a9;font-size:8px}.reliability-loop-viewport{height:256px;overflow:hidden;mask-image:linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent)}.reliability-loop{display:flex;flex-direction:column;gap:8px;padding:12px;animation:reliability-log-loop 28s linear infinite}.reliability-loop-panel:hover .reliability-loop{animation-play-state:paused}.reliability-loop-copy{display:flex;flex-direction:column;gap:8px}.reliability-loop-row{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px;border:1px solid rgba(178,232,229,.11);border-radius:8px;background:rgba(255,255,255,.045)}.reliability-loop-row .status-dot{margin:0}.reliability-loop-row strong,.reliability-loop-row small{display:block}.reliability-loop-row strong{color:#effdf9;font-size:10px}.reliability-loop-row small{overflow:hidden;margin-top:3px;color:#8aafb6;font:8px ui-monospace,monospace;text-overflow:ellipsis;white-space:nowrap}.reliability-loop-row em{color:#e8cd84;font-size:9px;font-style:normal}.reliability-loop-panel>small{position:absolute;right:15px;bottom:12px;color:#78a4aa;font-size:8px}@keyframes reliability-log-loop{from{transform:translateY(0)}to{transform:translateY(-50%)}}@media(prefers-reduced-motion:reduce){.reliability-loop{animation:none}}@media(max-width:860px){.reliability-process>div{display:flex;width:100%;padding:8px 0}.reliability-loop-viewport{height:230px}}

/* The execution stream is now the only log surface and scrolls continuously. */
.reliability-loop-panel{display:flex;flex-direction:column}.reliability-loop-viewport{height:auto;flex:1;min-height:0}.reliability-loop{animation-duration:12s;will-change:transform}.reliability-loop-panel>small{position:static;padding:10px 15px}.reliability-loop-copy{display:contents}@keyframes reliability-log-loop{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 4px))}}

/* Keep recovery evidence compact and give the live stream a deliberate, readable window. */
.reliability-grid{align-items:start}.reliability-events-panel{height:auto}.reliability-loop-panel{height:392px}.reliability-loop-viewport{height:330px;flex:none}.reliability-loop-row{min-height:54px}.reliability-loop-panel>small{margin-top:auto;border-top:1px solid rgba(179,235,228,.12)}@media(max-width:860px){.reliability-loop-panel{height:350px}.reliability-loop-viewport{height:290px}}
/* Reliability & Self-Healing compact desktop canvas: mirrors data-quality-mode so the page
   never grows past one viewport (no page scroll), the live execution stream keeps its own
   internal scroll, and the recovery ledger scrolls internally too if it ever grows long. */
@media (min-width:861px){
  body.reliability-mode{overflow:hidden}.reliability-mode .page-header{height:58px;padding:11px 32px 7px}.reliability-mode .page-title{font-size:18px}.reliability-mode main{height:calc(100vh - 120px);padding:0 32px 18px;overflow:hidden}.reliability-mode #reliability{height:100%;overflow:hidden}.reliability-mode .reliability-shell{height:100%;display:flex;flex-direction:column;padding:0;max-width:none}.reliability-mode .reliability-hero{min-height:138px;flex:0 0 138px;padding:18px 38px;border-radius:16px}.reliability-mode .reliability-hero h2{margin:7px 0;font-size:31px}.reliability-mode .reliability-hero p{font-size:11px;line-height:1.4}.reliability-mode .reliability-orbit{width:78px;height:78px;font-size:22px}.reliability-mode .reliability-summary{flex:0 0 58px;margin:-8px 20px 10px;gap:9px}.reliability-mode .reliability-stat{padding:10px 13px}.reliability-mode .reliability-stat strong{font-size:19px}.reliability-mode .reliability-stat small{margin-top:2px;font-size:8.5px}.reliability-mode .reliability-grid{flex:1;min-height:0;gap:13px;align-items:stretch}.reliability-mode .reliability-events-panel{height:100%;min-height:0;padding:16px 20px;border-radius:13px;display:flex;flex-direction:column;overflow:hidden}.reliability-mode .reliability-heading{margin-bottom:10px;flex:0 0 auto}.reliability-mode .reliability-heading h2{font-size:18px}.reliability-mode .reliability-heading p{font-size:9px}.reliability-mode #heal-events{flex:0 1 auto;min-height:0;overflow-y:auto}.reliability-mode .heal-card{padding:12px;margin-bottom:8px;font-size:11px}.reliability-mode .heal-card-title{font-size:11px}.reliability-mode .heal-detail{margin-top:5px;font-size:10px}.reliability-mode .heal-prompt{margin-top:5px;padding:6px;font-size:8px}.reliability-mode .reliability-process{flex:0 0 auto;margin-top:10px;padding:12px}.reliability-mode .reliability-process h3{margin:5px 0 8px;font-size:14px}.reliability-mode .reliability-loop-panel{height:100%}
}

/* CCPA Confirmed Cases compact desktop canvas: same fixed-viewport pattern, the case grid
   already paginates to 4 cards so it just needs the hero/summary compacted to match. */
@media (min-width:861px){
  body.cases-mode{overflow:hidden}.cases-mode .page-header{height:58px;padding:11px 32px 7px}.cases-mode .page-title{font-size:18px}.cases-mode main{height:calc(100vh - 120px);padding:0 32px 18px;overflow:hidden}.cases-mode #ccpa-cases{height:100%;overflow:hidden}.cases-mode .cases-shell{height:100%;display:flex;flex-direction:column;padding:0;max-width:none}.cases-mode .cases-hero{min-height:138px;flex:0 0 138px;padding:18px 38px;border-radius:16px}.cases-mode .cases-hero h2{margin:7px 0;font-size:31px}.cases-mode .cases-hero p{font-size:11px;line-height:1.4}.cases-mode .cases-stamp{width:78px;height:78px;font-size:15px}.cases-mode .cases-summary{flex:0 0 58px;margin:-8px 20px 10px;gap:9px}.cases-mode .cases-summary>div{padding:10px 13px}.cases-mode .cases-summary strong{font-size:19px}.cases-mode .cases-summary small{margin-top:2px;font-size:8.5px}.cases-mode .cases-content{flex:1;min-height:0;padding:16px 20px;border-radius:13px;display:flex;flex-direction:column;overflow:hidden}.cases-mode .cases-heading{margin-bottom:10px;flex:0 0 auto}.cases-mode .cases-heading h2{font-size:18px}.cases-mode .cases-heading p{font-size:9px}.cases-mode .ccpa-cases-grid{flex:1;min-height:0;display:flex;flex-direction:column}.cases-mode .cases-card-grid{flex:1;min-height:0}.cases-mode .ccpa-case{min-height:0;padding:12px}.cases-mode .ccpa-case-company{font-size:12px}.cases-mode .ccpa-case-detail{font-size:10px}.cases-mode .compact-pagination{flex:0 0 auto;padding-top:8px}
}

/* --- pagination --- */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); flex-wrap: wrap; gap: 12px;
}
.pagination-info { font-size: 13px; color: var(--text-dim); }
.pagination-controls { display: flex; align-items: center; gap: 6px; }
.page-btn {
  min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--panel); color: var(--text-dim);
  font-size: 13px; font-weight: 500; cursor: pointer; font-family: inherit;
  transition: all 0.12s ease;
}
.page-btn:hover:not(:disabled) { border-color: var(--border-strong); color: var(--text); }
.page-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.page-btn.active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* --- one-screen overview console --- */
body.overview-mode { overflow: hidden; }
.overview-mode main { height: calc(100vh - 140px); padding: 0 32px 28px; overflow: hidden; }
.overview-mode #overview { height: 100%; }
.overview-mode .dashboard-layout { grid-template-columns: minmax(0, 7fr) minmax(360px, 3fr); height: calc(100% - 74px); min-height: 0; gap: 20px; }
.overview-mode .dashboard-workspace { display: flex; flex-direction: column; min-height: 0; }
.overview-mode .regulatory-rail { position: static; height: 100%; min-height: 0; }

.overview-mode .stats-row { display: grid; grid-template-columns: minmax(210px, 1.6fr) repeat(3, minmax(100px, 1fr)); gap: 0; margin: 0 0 10px; padding: 10px 0; border-top: 1px solid #c8dce4; border-bottom: 1px solid #c8dce4; flex: 0 0 auto; }
.mission-kicker, .mission-metric { min-width: 0; padding: 0 16px; border-right: 1px solid #d8e5eb; }.mission-metric:last-child { border-right: 0; }
.mission-kicker { display: grid; grid-template-columns: 8px auto; align-content: center; column-gap: 8px; color: #0f5264; font-size: 10px; font-weight: 850; letter-spacing: .12em; }.mission-kicker small { grid-column: 2; margin-top: 4px; color: #79909c; font-size: 9px; font-weight: 600; letter-spacing: 0; }.mission-orbit { width: 8px; height: 8px; margin-top: 2px; border-radius: 50%; background: #20c4d9; box-shadow: 0 0 0 4px rgba(32,196,217,.15); }
.mission-metric { display: flex; flex-direction: column; justify-content: center; }.mission-metric strong { color: #102b46; font-size: 22px; line-height: 1; letter-spacing: -.05em; }.mission-metric span { color: #728895; margin-top: 5px; font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.overview-mode .apps-breakdown-card { flex: 0 0 auto; padding: 0 0 9px; margin-bottom: 10px; border: 0; border-radius: 0; background: transparent; box-shadow: none; border-bottom: 1px solid #d6e2e8; }
.source-mix-heading { display: flex; justify-content: space-between; align-items: baseline; color: #27465d; font-size: 10px; font-weight: 850; letter-spacing: .1em; }.source-mix-heading small { color: #8397a2; font-size: 10px; font-weight: 600; letter-spacing: 0; }.source-ledger { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 8px; gap: 10px; }.source-ledger-row { display: grid; grid-template-columns: 20px 1fr auto; align-items: baseline; column-gap: 6px; color: #577080; font-size: 10px; }.source-ledger-row .source-order { color: #20aabd; font-weight: 850; }.source-ledger-row strong { color: #193d57; font-size: 11px; }.source-ledger-row span:not(.source-order) { grid-column: 2; margin-top: 2px; }.source-ledger-row em { grid-row: span 2; font-style: normal; color: #0f5264; font-size: 12px; font-weight: 850; }
.overview-mode .toolbar { flex: 0 0 auto; flex-wrap: nowrap; gap: 8px; margin-bottom: 10px; }
.overview-mode .toolbar select { padding: 8px 9px; }.overview-mode .search-box { min-width: 120px; }

.overview-mode .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 10px; flex: 1; min-height: 0; }
.overview-mode .product-card { display: grid; grid-template-columns: 76px minmax(0, 1fr); min-height: 0; border-color: #dbe6ed; border-radius: 12px; }
.overview-mode .product-card:hover { border-color: #73cbd8; }
.product-visual { position: relative; display: flex; align-items: center; justify-content: center; padding: 9px 3px; background: linear-gradient(160deg,#eafbfd,#eff4fa); overflow: hidden; }
.product-visual svg { width: 62px; height: 78px; }
.product-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.overview-mode .product-body { min-width: 0; padding: 11px 10px 9px 7px; display: flex; flex-direction: column; }
.overview-mode .product-app { display: flex; align-items: center; gap: 5px; margin-bottom: 5px; font-size: 9px; font-weight: 800; letter-spacing: .08em; color: #687c8d; }
.overview-mode .product-app span { width: 6px; height: 6px; border-radius: 50%; background: #20c4d9; }
.overview-mode .product-name { margin-bottom: auto; min-height: 0; font-size: 12px; font-weight: 700; line-height: 1.35; color: #1e3148; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.overview-mode .price-row { margin: 8px 0 7px; gap: 7px; }.overview-mode .price-listed { font-size: 16px; font-weight: 800; color: #0f1e35; }
.overview-mode .badge { padding: 3px 7px; font-size: 9px; font-weight: 700; }
.overview-mode .pagination { flex: 0 0 auto; margin-top: 10px; padding-top: 9px; }

/* --- overview briefing: clear, non-scrolling information hierarchy --- */
.signal-ticker { height: 42px; margin-bottom: 16px; border-radius: 9px; background: #f7fcfd; }
.ticker-label { padding: 0 15px; }
.ticker-window { flex: 1; }.ticker-track { width: 100%; min-width: 0; gap: 10px; padding: 0 16px; animation: none; }
.ticker-prefix { flex: 0 0 auto; color: #6e8793; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }.ticker-story { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #1f485d; font-weight: 650; }.ticker-source { flex: 0 0 auto; color: #78919c; font-size: 11px; }

.overview-mode .stats-row { grid-template-columns: minmax(260px, 1.7fr) repeat(3, minmax(120px, 1fr)); min-height: 78px; margin-bottom: 12px; padding: 0; border: 1px solid #cadde5; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.82); }
.mission-kicker, .mission-metric { padding: 14px 18px; border-right: 1px solid #dbe7ec; }.mission-kicker { grid-template-columns: 10px auto; column-gap: 9px; font-size: 11px; letter-spacing: .1em; background: linear-gradient(90deg,#eafafb,#f8fdfe); }.mission-kicker small { margin-top: 5px; color: #66808d; font-size: 11px; }.mission-orbit { width: 9px; height: 9px; box-shadow: 0 0 0 5px rgba(32,196,217,.15); }.mission-metric strong { font-size: 27px; }.mission-metric span { margin-top: 7px; color: #607987; font-size: 10px; }

.overview-mode .apps-breakdown-card { padding: 12px 14px; margin-bottom: 11px; border: 1px solid #d5e3e9; border-radius: 12px; background: rgba(255,255,255,.74); }
.source-mix-heading { align-items: center; }.source-mix-heading > div { display: flex; align-items: baseline; gap: 9px; }.source-mix-heading span { font-size: 12px; font-weight: 800; letter-spacing: 0; }.source-mix-heading small { color: #718a97; font-size: 10px; font-weight: 600; }.source-mix-heading > strong { color: #0f5264; font-size: 16px; }.source-mix-heading > strong small { font-size: 10px; }.source-ledger { margin-top: 11px; gap: 0; }.source-ledger-row { grid-template-columns: 1fr auto; align-items: center; min-height: 42px; padding: 0 16px; border-right: 1px solid #dce7ec; font-size: 11px; }.source-ledger-row:first-child { padding-left: 0; }.source-ledger-row:last-child { padding-right: 0; border-right: 0; }.source-ledger-row > div { display: flex; align-items: center; gap: 8px; }.source-ledger-row .source-order { font-size: 10px; }.source-ledger-row strong { font-size: 13px; }.source-ledger-row > span { margin-top: 3px; }.source-ledger-row em { grid-row: span 2; font-size: 19px; letter-spacing: -.04em; }.source-ledger-row em small { font-size: 10px; letter-spacing: 0; }

/* --- CCPA confirmed cases (real, official, external evidence, separate from live flags) ---
   Its own dedicated page (nav tab), not inline in the overview, so it never competes with the
   fixed-height overview layout (product grid, pagination) for space. */
.ccpa-cases-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ccpa-case { border: 1px solid var(--border); border-radius: 10px; padding: 13px 14px; background: linear-gradient(160deg,#fffdf8,#fbf8f1); }
.ccpa-case-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.ccpa-case-company { font-size: 13.5px; font-weight: 700; color: var(--text); }
.ccpa-case-penalty { font-size: 12px; font-weight: 700; color: #92660e; white-space: nowrap; }
.ccpa-case-pattern { display: inline-block; font-size: 10.5px; font-weight: 650; color: #92660e; background: #fdf3de; border: 1px solid #f1e0b4; padding: 2px 8px; border-radius: 999px; margin-bottom: 8px; }
.ccpa-case-detail { font-size: 12px; color: var(--text-dim); line-height: 1.5; margin-bottom: 8px; }
.ccpa-case-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10.5px; color: var(--text-faint); }
.ccpa-case-footer a { color: #92660e; text-decoration: none; font-weight: 600; }
.ccpa-case-footer a:hover { text-decoration: underline; }

/* --- responsive --- */
@media (max-width: 860px) {
  .navbar { padding: 0 16px; height: auto; flex-wrap: wrap; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .nav-tabs { order: 3; width: 100%; overflow-x: auto; }
  .live-pill { display: none; }
  main { padding: 0 16px 48px; }
  .page-header { padding: 16px 16px 14px; }
  body.overview-mode { overflow: auto; }.overview-mode main { height: auto; padding-bottom: 48px; overflow: visible; }.overview-mode #overview { height: auto; }.dashboard-layout, .overview-mode .dashboard-layout { grid-template-columns: 1fr; min-height: 0; height: auto; }.regulatory-rail, .overview-mode .regulatory-rail { position: static; order: -1; height: 560px; min-height: 0; }.overview-mode .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; flex: none; }.overview-mode .toolbar { flex-wrap: wrap; }.signal-ticker { margin-bottom: 14px; }.ticker-label { padding: 0 9px; font-size: 9px; }
}

/* ============================================================================
   DATA QUALITY & RIGOR: authoritative layout, matched to the approved reference.
   This block is last in the file so it wins the cascade over the earlier,
   iterated dq- rules. Everything below is keyed to one of the reference tasks:
   summary icon tiles, exclusion cards, method rail, outcome card, viewport fit.
   ============================================================================ */

/* --- 4 summary cards: coloured icon tile + value + label + info glyph --- */
#data-quality .dq-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#data-quality .dq-summary-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:13px;padding:15px 17px;border:1px solid #e4ebee;border-radius:13px;background:#fff;box-shadow:0 6px 16px rgba(23,52,73,.06)}
#data-quality .dq-summary-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:11px}
#data-quality .dq-summary-icon svg{width:21px;height:21px}
#data-quality .dq-summary-icon.is-blue{color:#2a6fd6;background:#e9f1fe}
#data-quality .dq-summary-icon.is-amber{color:#cf7f0c;background:#fdf1dd}
#data-quality .dq-summary-icon.is-violet{color:#6a4ad0;background:#efeafd}
#data-quality .dq-summary-icon.is-green{color:#10935a;background:#e3f7ec}
#data-quality .dq-summary-copy{display:flex;flex-direction:column;min-width:0}
#data-quality .dq-summary-copy strong{color:#16283d;font-size:25px;font-weight:750;line-height:1.05;letter-spacing:-.035em}
#data-quality .dq-summary-copy small{display:flex;align-items:center;gap:5px;margin-top:4px;color:#6d818d;font-size:12.5px;font-weight:500}
#data-quality .dq-info{display:inline-flex;flex:0 0 auto;color:#b6c5ce}
#data-quality .dq-info svg{width:12px;height:12px}

/* --- validation pipeline: exclusion cards --- */
#data-quality .dq-pipeline-panel{display:flex;flex-direction:column;padding:24px;border:1px solid #e4ebee;border-radius:16px;background:#fff;box-shadow:0 6px 20px rgba(28,47,63,.045)}
#data-quality .dq-section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:16px}
#data-quality .dq-section-heading span{color:#2f86c9;font-size:10.5px;font-weight:800;letter-spacing:.11em}
#data-quality .dq-section-heading h2{margin:7px 0 0;color:#17304a;font-size:21px;font-weight:750;letter-spacing:-.035em}
#data-quality .dq-section-heading p{max-width:300px;margin:0;color:#7a8b95;font-size:12px;text-align:right}
#data-quality .dq-checks{display:grid;gap:10px}
#data-quality .dq-check-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:15px;margin:0;padding:14px 16px;border:1px solid #eaf0f2;border-radius:12px;background:#fdfefe;box-shadow:none}
#data-quality .dq-check-step{display:grid;place-items:center;width:36px;height:36px;border-radius:10px;color:#bd7a17;background:#fbeed8;font-size:12px;font-weight:800}
#data-quality .dq-check-main{min-width:0}
#data-quality .dq-check-main small{display:block;color:#cf7f0c;font-size:9.5px;font-weight:800;letter-spacing:.07em}
#data-quality .dq-check-main h3{margin:5px 0 4px;color:#22384a;font-size:14.5px;font-weight:700;letter-spacing:-.01em}
#data-quality .dq-check-main p{margin:0;color:#6b7f88;font-size:12.5px;line-height:1.5}
#data-quality .dq-check-count{align-self:center;color:#cf7f0c;font-size:27px;font-weight:800;letter-spacing:-.04em}

/* --- outcome card, now seated inside the pipeline panel as in the reference --- */
#data-quality .dq-final-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:15px;margin-top:10px;padding:15px 18px;border:1px solid #cfe9da;border-radius:12px;background:linear-gradient(100deg,#f0faf4,#fbfefc);box-shadow:none}
#data-quality .dq-final-card.has-signals{border-color:#f0d8bd;background:linear-gradient(100deg,#fff7ed,#fffdfa)}
#data-quality .dq-final-icon{display:grid;place-items:center;color:#10935a}
#data-quality .dq-final-icon svg{width:31px;height:31px}
#data-quality .dq-final-card.has-signals .dq-final-icon{color:#c0791d}
#data-quality .dq-final-lead{min-width:0}
#data-quality .dq-final-lead small{display:block;color:#10935a;font-size:9.5px;font-weight:800;letter-spacing:.07em}
#data-quality .dq-final-card.has-signals .dq-final-lead small{color:#b26a15}
#data-quality .dq-final-lead h3{margin:5px 0 3px;color:#1c4034;font-size:17px;font-weight:750;letter-spacing:-.025em}
#data-quality .dq-final-lead p{margin:0;color:#6b8177;font-size:12px}
#data-quality .dq-final-results{display:flex;align-items:center;gap:0}
#data-quality .dq-final-results span{display:flex;flex-direction:column;align-items:center;padding:0 20px;color:#5d7a6d;font-size:11px}
#data-quality .dq-final-results span+span{border-left:1px solid #cfe4d8}
#data-quality .dq-final-results b{color:#0a7f4b;font-size:26px;font-weight:800;line-height:1.05;letter-spacing:-.045em}
#data-quality .dq-final-results span:last-child b{color:#c02626}

/* --- method rail: outlined icon, dashed connector, numbered step --- */
#data-quality .dq-method-panel{display:flex;flex-direction:column;padding:24px;border:0;border-radius:16px;color:#cfe2ea;background:linear-gradient(158deg,#11314a,#0b1e33)}
#data-quality .dq-method-label{color:#9fc0cf;font-size:10.5px;font-weight:700;letter-spacing:.13em}
#data-quality .dq-method-panel h3{margin:11px 0 9px;color:#fff;font-size:19px;font-weight:700;line-height:1.25;letter-spacing:-.03em}
#data-quality .dq-method-panel>p{margin:0;color:#a4c2d0;font-size:12.5px;line-height:1.55}
#data-quality .dq-method-list{display:flex;flex-direction:column;gap:0;margin:18px 0 0;flex:1;min-height:0}
#data-quality .dq-step{position:relative;display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:12px;padding:11px 0;border:0;flex:1}
#data-quality .dq-step-icon{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(150,205,222,.4);border-radius:50%;color:#8fd4e4}
#data-quality .dq-step-icon svg{width:16px;height:16px}
/* Connector spans from just under this icon to just above the next one. Steps are equal-height
   flex children, so the icon centre is always at 50% and the geometry holds at any panel size. */
#data-quality .dq-step:not(:last-child) .dq-step-icon::after{content:"";position:absolute;left:17px;top:calc(50% + 20px);width:0;height:calc(100% - 40px);border-left:1px dashed rgba(150,205,222,.38)}
#data-quality .dq-step-num{display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(150,205,222,.34);border-radius:50%;color:#9fc0cf;font-size:10px;font-weight:700}
#data-quality .dq-step-copy{display:flex;flex-direction:column;min-width:0}
#data-quality .dq-step-copy strong{color:#fff;font-size:13px;font-weight:700}
#data-quality .dq-step-copy small{margin-top:3px;color:#93b3c2;font-size:11.5px}
#data-quality .dq-method-note{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:11px;margin-top:auto;padding:13px 14px;border-radius:11px;background:rgba(255,255,255,.07)}
#data-quality .dq-note-icon{display:grid;place-items:center;color:#6fdcc8}
#data-quality .dq-note-icon svg{width:19px;height:19px}
#data-quality .dq-note-copy{display:flex;flex-direction:column;min-width:0}
#data-quality .dq-note-copy strong{color:#6fdcc8;font-size:12.5px;font-weight:750}
#data-quality .dq-note-copy small{margin-top:3px;color:#9fc0cf;font-size:11px;font-weight:400;letter-spacing:0}

/* --- desktop: one viewport, no page scroll. Fixed bands on top, evidence fills the rest. --- */
@media (min-width:861px){
  .data-quality-mode .page-header{height:88px;padding:20px 32px 10px}
  .data-quality-mode .page-title{font-size:25px}
  .data-quality-mode .page-subtitle{font-size:13.5px}
  .data-quality-mode main{height:calc(100vh - 150px);padding:0 32px 20px;overflow:hidden}
  .data-quality-mode #data-quality .dq-shell{height:100%;display:flex;flex-direction:column;gap:0;padding:0;max-width:none}
  .data-quality-mode #data-quality .dq-hero{flex:0 0 176px;min-height:0;padding:26px 40px;border-radius:16px}
  .data-quality-mode #data-quality .dq-hero h2{margin:10px 0 9px;font-size:37px}
  .data-quality-mode #data-quality .dq-hero p{max-width:720px;font-size:13.5px;line-height:1.5}
  .data-quality-mode #data-quality .dq-source-note{margin-top:11px;font-size:11.5px}
  .data-quality-mode #data-quality .dq-hero-seal{width:96px;height:96px;font-size:27px}
  .data-quality-mode #data-quality .dq-hero-seal small{font-size:10.5px}
  .data-quality-mode #data-quality .dq-summary{flex:0 0 auto;margin:-10px 22px 16px;position:relative;z-index:2}
  .data-quality-mode #data-quality .dq-content-grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.42fr);gap:18px;align-items:stretch}
  .data-quality-mode #data-quality .dq-pipeline-panel{min-height:0;overflow:hidden}
  /* Slack is absorbed by the card heights themselves, never by gaps between them, so the
     panel reads as full rather than as three cards floating apart. */
  .data-quality-mode #data-quality .dq-checks{flex:1;min-height:0;gap:12px;grid-auto-rows:1fr;align-content:stretch}
  .data-quality-mode #data-quality .dq-check-card{align-items:center}
  .data-quality-mode #data-quality .dq-method-panel{min-height:0;overflow:hidden}
}

/* ============================================================================
   RELIABILITY & SELF-HEALING: authoritative layout, matched to the approved
   reference. Scoped under #reliability so it outranks the earlier minified
   reliability- rules regardless of their specificity.
   ============================================================================ */

/* --- R1 hero: shield eyebrow, gold LIVE badge --- */
#reliability .reliability-eyebrow{display:flex;align-items:center;gap:8px;color:#66e5ba;font-size:11px;font-weight:800;letter-spacing:.14em}
#reliability .reliability-eyebrow::before{display:none}
#reliability .reliability-eyebrow svg{width:15px;height:15px}
#reliability .reliability-hero h2{margin:12px 0 10px;font-size:34px;font-weight:750;letter-spacing:-.045em}
#reliability .reliability-hero p{max-width:720px;color:#cfe6e6;font-size:13.5px;line-height:1.55}
#reliability .reliability-orbit{width:104px;height:104px;border:1px solid rgba(160,235,214,.5);border-radius:50%;display:grid;place-items:center;color:#f4d47a;font-size:20px;font-weight:800;letter-spacing:.02em;background:rgba(6,32,42,.5);box-shadow:0 0 0 11px rgba(111,235,209,.05)}

/* --- R2 stat cards: icon tile + value + label + info glyph --- */
#reliability .reliability-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#reliability .reliability-stat{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:13px;padding:15px 17px;border:1px solid #e4ebee;border-radius:13px;background:#fff;box-shadow:0 6px 16px rgba(23,52,73,.06)}
#reliability .reliability-stat-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:11px}
#reliability .reliability-stat-icon svg{width:21px;height:21px}
#reliability .reliability-stat-icon.is-teal{color:#0e9184;background:#e1f6f1}
#reliability .reliability-stat-icon.is-blue{color:#2f6fd0;background:#e7f0fe}
#reliability .reliability-stat-icon.is-violet{color:#7053d4;background:#f0ecfd}
#reliability .reliability-stat-icon.is-solid{color:#17a35d;background:transparent}
#reliability .reliability-stat-icon.is-solid svg{width:34px;height:34px}
#reliability .reliability-stat-copy{display:flex;flex-direction:column;min-width:0}
#reliability .reliability-stat-copy strong{color:#16283d;font-size:25px;font-weight:750;line-height:1.05;letter-spacing:-.035em}
#reliability .reliability-stat-copy small{display:flex;align-items:center;gap:5px;margin-top:4px;color:#6d818d;font-size:12.5px;font-weight:500}
#reliability .rel-info{display:inline-flex;flex:0 0 auto;color:#b6c5ce}
#reliability .rel-info svg{width:12px;height:12px}

/* --- R3 recovery ledger --- */
#reliability .reliability-events-panel{display:flex;flex-direction:column;padding:24px;border:1px solid #e4ebee;border-radius:16px;background:#fff;box-shadow:0 6px 20px rgba(28,47,63,.045)}
#reliability .reliability-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:16px}
#reliability .reliability-heading span{color:#12968a;font-size:10.5px;font-weight:800;letter-spacing:.11em}
#reliability .reliability-heading h2{margin:7px 0 0;color:#17304a;font-size:21px;font-weight:750;letter-spacing:-.035em}
#reliability .reliability-heading p{max-width:320px;margin:0;color:#7a8b95;font-size:12px;text-align:right}
#reliability .heal-card{padding:17px 19px;margin:0;border:1px solid #d8ece5;border-radius:13px;background:linear-gradient(120deg,#f5fdfa,#fdfffe)}
#reliability .heal-card-title{display:flex;align-items:center;gap:9px;color:#0d8158;font-size:13px;font-weight:800;letter-spacing:.01em}
#reliability .heal-badge{display:grid;place-items:center;color:#17a35d}
#reliability .heal-badge svg{width:19px;height:19px}
#reliability .heal-detail{margin-top:11px;color:#5c7079;font-size:12.5px;line-height:1.6}
#reliability .heal-detail strong{color:#22384a;font-weight:700}
#reliability .heal-prompt{margin-top:11px;padding:11px 13px;border-radius:9px;background:#eaf8f3;font:inherit}
#reliability .heal-prompt span{display:block;color:#0d7d63;font-size:9.5px;font-weight:800;letter-spacing:.07em}
#reliability .heal-prompt em{display:block;margin-top:5px;color:#4a6b70;font-size:11px;font-style:normal;line-height:1.5}
#reliability .heal-counts{display:flex;gap:26px;margin-top:13px;color:#6b7f88;font-size:12.5px}
#reliability .heal-count{margin:0;padding:0;border:0}
#reliability .heal-count b{color:#22384a;font-weight:750}
#reliability .heal-count b.is-done{color:#0d8158}

/* --- R4 reliability promise: three steps across --- */
#reliability .reliability-process{margin-top:12px;padding:18px 19px;border:1px solid #dceae6;border-radius:13px;background:linear-gradient(105deg,#f5fbf9,#fdfffe)}
#reliability .reliability-process>span{display:block;color:#12968a;font-size:10px;font-weight:800;letter-spacing:.11em}
#reliability .reliability-process h3{margin:8px 0 14px;color:#1a3c46;font-size:16px;font-weight:750;letter-spacing:-.025em}
/* width/padding reset defends against the older `.reliability-process>div{width:32%}` rule,
   which now lands on this grid wrapper and would otherwise crush all three columns. */
#reliability .reliability-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:100%;padding:0}
#reliability .reliability-steps>div{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:10px;width:auto;padding:0}
#reliability .reliability-steps b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:#0b6f62;background:#cdeee6;font-size:11px;font-weight:800}
#reliability .reliability-steps p{margin:0;color:#6b7f88;font-size:11.5px;line-height:1.45}
#reliability .reliability-steps strong{display:block;margin-bottom:3px;color:#22384a;font-size:13px;font-weight:700}

/* --- R5 live execution stream: seamless looping marquee --- */
#reliability .reliability-loop-panel{position:relative;display:flex;flex-direction:column;height:100%;padding:0;overflow:hidden;border:0;border-radius:16px;color:#c3dbdd;background:linear-gradient(158deg,#103247,#0a1d2e)}
#reliability .reliability-loop-head{display:flex;align-items:center;justify-content:space-between;padding:17px 19px;border-bottom:1px solid rgba(179,235,228,.13);color:#66dcc6;font-size:10.5px;font-weight:800;letter-spacing:.12em}
#reliability .reliability-loop-viewport{flex:1;min-height:0;height:auto;overflow:hidden;padding:0;mask-image:linear-gradient(to bottom,transparent,#000 7%,#000 93%,transparent)}
#reliability .reliability-loop{display:flex;flex-direction:column;gap:9px;padding:13px;animation:reliability-log-loop 26s linear infinite;will-change:transform}
#reliability .reliability-loop-panel:hover .reliability-loop{animation-play-state:paused}
#reliability .reliability-loop-row{display:grid;grid-template-columns:9px minmax(0,1fr) auto;align-items:center;gap:11px;min-height:0;padding:13px 14px;border:1px solid rgba(178,232,229,.1);border-radius:10px;background:rgba(255,255,255,.05)}
#reliability .reliability-loop-row .status-dot{width:9px;height:9px;margin:0;border-radius:50%}
#reliability .reliability-loop-row strong{display:block;color:#f2fbf9;font-size:13px;font-weight:700}
#reliability .reliability-loop-row small{display:block;overflow:hidden;margin-top:3px;color:#87abb5;font:11px ui-monospace,SFMono-Regular,Menlo,monospace;text-overflow:ellipsis;white-space:nowrap}
#reliability .reliability-loop-row em{color:#eef7f6;font-size:12px;font-style:normal;font-weight:600;white-space:nowrap}
#reliability .reliability-loop-panel>small{display:flex;align-items:center;gap:8px;position:static;padding:14px 19px;border-top:1px solid rgba(179,235,228,.13);color:#8fb3bb;font-size:11.5px}
#reliability .reliability-loop-panel>small svg{width:15px;height:15px}
/* The stream is the core live signal for this page, so it keeps moving even when the OS
   reports reduced motion. It is a slow, continuous translate with no flashing. */
@media(prefers-reduced-motion:reduce){#reliability .reliability-loop{animation:reliability-log-loop 26s linear infinite}}

/* --- R6 one viewport, no page scroll, no dead panels --- */
@media (min-width:861px){
  .reliability-mode .page-header{height:88px;padding:20px 32px 10px}
  .reliability-mode .page-title{font-size:25px}
  .reliability-mode .page-subtitle{font-size:13.5px}
  .reliability-mode main{height:calc(100vh - 150px);padding:0 32px 20px;overflow:hidden}
  .reliability-mode #reliability .reliability-shell{height:100%;display:flex;flex-direction:column;padding:0;max-width:none}
  .reliability-mode #reliability .reliability-hero{flex:0 0 176px;min-height:0;padding:26px 40px;border-radius:16px}
  .reliability-mode #reliability .reliability-summary{flex:0 0 auto;margin:-10px 22px 16px;position:relative;z-index:2}
  .reliability-mode #reliability .reliability-grid{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.42fr);gap:18px;align-items:stretch}
  .reliability-mode #reliability .reliability-events-panel{min-height:0;height:100%;overflow:hidden}
  /* The ledger grows with every real heal event, so it scrolls inside its own panel instead
     of pushing the promise block past the bottom of the viewport. Confirmed once a second
     heal event was recorded: two cards overflowed and the promise panel disappeared. */
  .reliability-mode #reliability #heal-events{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:5px}
  .reliability-mode #reliability #heal-events::-webkit-scrollbar{width:6px}
  .reliability-mode #reliability #heal-events::-webkit-scrollbar-thumb{border-radius:99px;background:#cfdde3}
  .reliability-mode #reliability #heal-events::-webkit-scrollbar-track{background:transparent}
  .reliability-mode #reliability .heal-card+.heal-card{margin-top:10px}
  .reliability-mode #reliability .reliability-process{flex:0 0 auto;margin-top:12px}
}

/* ============================================================================
   CCPA CONFIRMED CASES: authoritative layout, matched to the approved
   reference. Scoped under #ccpa-cases so it outranks the earlier minified
   cases- rules regardless of their specificity.
   ============================================================================ */

/* --- C1 hero: shield eyebrow, scales watermark, stamped CCPA seal --- */
#ccpa-cases .cases-hero{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(100deg,#1d1315 0%,#3a2119 42%,#a75c1c 78%,#c9711f 100%)}
#ccpa-cases .cases-watermark{position:absolute;z-index:0;right:12%;top:50%;width:190px;height:190px;transform:translateY(-50%);color:rgba(255,226,186,.16)}
#ccpa-cases .cases-hero>div{position:relative;z-index:1}
#ccpa-cases .cases-eyebrow{display:flex;align-items:center;gap:8px;color:#f0a95c;font-size:11px;font-weight:800;letter-spacing:.14em}
#ccpa-cases .cases-eyebrow svg{width:15px;height:15px}
#ccpa-cases .cases-hero h2{margin:12px 0 10px;color:#fff;font-size:34px;font-weight:750;line-height:1.12;letter-spacing:-.045em}
#ccpa-cases .cases-hero p{max-width:700px;color:#f0d9c6;font-size:13.5px;line-height:1.55}
#ccpa-cases .cases-stamp{display:grid;place-content:center;justify-items:center;gap:5px;width:112px;height:112px;border:1px solid rgba(255,214,163,.62);border-radius:50%;background:transparent;color:#ffe4c2;text-align:center}
#ccpa-cases .cases-stamp b{font-size:19px;font-weight:800;letter-spacing:.03em}
#ccpa-cases .cases-stamp i{display:block;width:52px;height:1px;background:rgba(255,214,163,.5)}
#ccpa-cases .cases-stamp small{font-size:9px;font-weight:700;line-height:1.35;letter-spacing:.1em}

/* --- C2 stat cards: orange icon tile + value + label --- */
#ccpa-cases .cases-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
#ccpa-cases .cases-summary-card{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:13px;padding:15px 17px;border:1px solid #eee3d8;border-radius:13px;background:#fff;box-shadow:0 6px 16px rgba(73,45,23,.06)}
#ccpa-cases .cases-summary-icon{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;color:#dd7f22;background:#fdeedd}
#ccpa-cases .cases-summary-icon svg{width:21px;height:21px}
#ccpa-cases .cases-summary-copy{display:flex;flex-direction:column;min-width:0}
#ccpa-cases .cases-summary-copy strong{color:#2b1d14;font-size:25px;font-weight:750;line-height:1.05;letter-spacing:-.035em}
#ccpa-cases .cases-summary-copy small{margin-top:4px;color:#8a7768;font-size:12.5px;font-weight:500}

/* --- C3 archive panel and case cards --- */
#ccpa-cases .cases-content{display:flex;flex-direction:column;padding:24px;border:1px solid #eee3d8;border-radius:16px;background:#fff;box-shadow:0 6px 20px rgba(63,40,21,.045)}
#ccpa-cases .cases-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}
#ccpa-cases .cases-heading span{color:#dd7f22;font-size:10.5px;font-weight:800;letter-spacing:.11em}
#ccpa-cases .cases-heading h2{margin:7px 0 0;color:#2b1d14;font-size:21px;font-weight:750;letter-spacing:-.035em}
#ccpa-cases .cases-heading p{max-width:320px;margin:0;color:#8a7768;font-size:12px;text-align:right}
#ccpa-cases .ccpa-cases-grid{display:flex;flex-direction:column;min-height:0}
/* align-items:start keeps every card at its natural height: the reference cards end after the
   source link rather than stretching to the tallest sibling and leaving a hollow middle. */
#ccpa-cases .cases-card-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:start}
#ccpa-cases .ccpa-case{display:flex;flex-direction:column;min-height:0;padding:16px 17px;border:1px solid #efe4d9;border-radius:13px;background:#fffdfb}
#ccpa-cases .ccpa-case-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin:0 0 11px}
#ccpa-cases .ccpa-case-company{color:#2b1d14;font-size:14px;font-weight:700;letter-spacing:-.01em}
#ccpa-cases .ccpa-case-penalty{flex:0 0 auto;max-width:118px;padding:5px 8px;border:1px solid #f2ddbe;border-radius:7px;color:#c06a15;background:#fdf3e3;font-size:10.5px;font-weight:700;line-height:1.3;text-align:center;white-space:normal}
#ccpa-cases .ccpa-case-pattern{display:inline-block;align-self:flex-start;margin:0 0 11px;padding:4px 9px;border:1px solid #f0d9b8;border-radius:7px;color:#c06a15;background:#fdf6ea;font-size:11px;font-weight:600}
#ccpa-cases .ccpa-case-detail{flex:0 0 auto;margin:0 0 14px;color:#7a6a5d;font-size:12.5px;line-height:1.55}
#ccpa-cases .ccpa-case-footer{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-top:auto;padding-top:12px;border-top:1px solid #f0e7de}
#ccpa-cases .ccpa-case-footer span{color:#9c8a7b;font-size:11px}
#ccpa-cases .ccpa-case-footer a{color:#d0761c;font-size:11.5px;font-weight:600;text-decoration:none}
#ccpa-cases .ccpa-case-footer a:hover{text-decoration:underline}

/* --- C4 pagination: record range plus numbered pages --- */
#ccpa-cases .cases-pagination{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;padding-top:16px}
#ccpa-cases .cases-count{color:#8a7768;font-size:12px}
#ccpa-cases .cases-pager{display:flex;align-items:center;gap:7px}
#ccpa-cases .cases-pager button{min-width:34px;height:34px;padding:0 11px;border:1px solid #ecdfd2;border-radius:8px;color:#6f5c4c;background:#fff;font:inherit;font-size:12px;font-weight:600;cursor:pointer;transition:border-color .14s ease,color .14s ease}
#ccpa-cases .cases-pager button:hover:not(:disabled){border-color:#e0bf94;color:#c06a15}
#ccpa-cases .cases-pager button:disabled{opacity:.45;cursor:not-allowed}
#ccpa-cases .cases-pager .cases-page-num.is-active{border-color:#dd7f22;color:#c06a15;background:#fdf6ea}

/* --- C5 one viewport, no page scroll --- */
@media (min-width:861px){
  .cases-mode .page-header{height:88px;padding:20px 32px 10px}
  .cases-mode .page-title{font-size:25px}
  .cases-mode .page-subtitle{font-size:13.5px}
  .cases-mode main{height:calc(100vh - 150px);padding:0 32px 20px;overflow:hidden}
  .cases-mode #ccpa-cases .cases-shell{height:100%;display:flex;flex-direction:column;padding:0;max-width:none}
  .cases-mode #ccpa-cases .cases-hero{flex:0 0 214px;min-height:0;padding:30px 40px;border-radius:16px}
  .cases-mode #ccpa-cases .cases-summary{flex:0 0 auto;margin:-10px 22px 16px;position:relative;z-index:2}
  .cases-mode #ccpa-cases .cases-content{flex:1;min-height:0;overflow:hidden}
  .cases-mode #ccpa-cases .ccpa-cases-grid{flex:1;min-height:0}
  /* Cards take the leftover height themselves (as in the reference, where all four dividers
     line up) instead of leaving a void between the grid and the pagination row. */
  .cases-mode #ccpa-cases .cases-card-grid{flex:1;min-height:0;align-items:stretch}
  .cases-mode #ccpa-cases .ccpa-case{height:100%}
}

/* ============================================================================
   OVERVIEW: authoritative detail, matched to the approved reference. Scoped
   under #overview so it outranks the earlier minified overview rules.
   ============================================================================ */

/* --- O1 live scan row: seal on the kicker, icon beside every metric --- */
#overview .mission-kicker{position:relative;display:grid;grid-template-columns:8px auto;align-content:center;column-gap:8px;padding-right:58px}
#overview .mission-seal{position:absolute;right:16px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:36px;height:36px;border-radius:10px;color:#2f6fd0;background:#e8f1fe}
#overview .mission-seal svg{width:19px;height:19px}
#overview .mission-metric{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:11px}
#overview .mission-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;color:#2f6fd0;background:#eaf2fe}
#overview .mission-icon svg{width:18px;height:18px}
#overview .mission-copy{display:flex;flex-direction:column;min-width:0}
#overview .mission-copy strong{color:#102b46;font-size:22px;line-height:1;letter-spacing:-.045em}
#overview .mission-copy span{margin-top:5px;color:#728895;font-size:9px;font-weight:750;text-transform:uppercase;letter-spacing:.06em}

/* --- O2 collection coverage: percentage drawn to scale --- */
#overview .source-ledger-row{grid-template-rows:auto auto auto}
#overview .source-bar{grid-column:1/-1;display:block;height:4px;margin-top:9px;border-radius:99px;background:#e3ecf1;overflow:hidden}
#overview .source-bar b{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#2f6fd0,#4f97e8)}

/* --- O3 pagination ellipsis --- */
#overview .page-gap{padding:0 2px;color:#9fb0ba;font-size:13px;letter-spacing:.06em}

/* --- O4 ticker chevron --- */
#overview .ticker-chevron{display:inline-flex;flex:0 0 auto;margin-left:2px;color:#9fb4c0}
#overview .ticker-chevron svg{width:15px;height:15px}

/* --- Ticker: the latest signal opens its source article --- */
#overview .ticker-link{display:flex;align-items:center;gap:10px;width:100%;min-width:0;color:inherit;text-decoration:none;transition:color .14s ease}
#overview .ticker-link .ticker-story{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#overview .ticker-link:hover .ticker-story{color:#12507a;text-decoration:underline;text-underline-offset:2px}
#overview .ticker-link:hover .ticker-chevron{color:#12507a;transform:translateX(2px)}
#overview .ticker-chevron{transition:transform .14s ease,color .14s ease}
#overview .signal-ticker:has(.ticker-link){cursor:pointer}
#overview .ticker-link:focus-visible{outline:2px solid #20a4d9;outline-offset:3px;border-radius:4px}

/* --- Pagination: first/last, ellipsis, and a jump box for deep catalogues --- */
#overview .pagination-controls{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#overview .page-edge{font-size:14px;line-height:1}
#overview .page-jump{display:inline-flex;align-items:center;gap:6px;margin-left:8px;padding-left:10px;border-left:1px solid var(--border)}
#overview .page-jump label{color:var(--text-dim);font-size:11.5px}
#overview .page-jump input{width:56px;height:32px;padding:0 8px;border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font:inherit;font-size:12px;text-align:center}
#overview .page-jump input:focus{outline:none;border-color:#2f6fd0;box-shadow:0 0 0 3px rgba(47,111,208,.14)}
#overview .page-jump input::-webkit-outer-spin-button,#overview .page-jump input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#overview .page-jump input{-moz-appearance:textfield}

/* --- Product artwork: category-matched, sized to the card tile --- */
#overview .product-visual svg{width:54px;height:54px}

/* Outcome figures: the flag count is the alarm (red only when non-zero); the gaps-checked
   figure is a neutral volume measure and must not inherit the alarm colour. */
#data-quality .dq-final-results span:last-child b{color:#25455f}
#data-quality .dq-final-card.has-signals .dq-final-results span:first-child b{color:#c02626}
#data-quality .dq-final-card:not(.has-signals) .dq-final-results span:first-child b{color:#0a7f4b}

/* ============================================================================
   CCPA PRIMER: what a dark pattern is, who the CCPA is, and the 13 named
   patterns. Rendered as an overlay launched from the navbar, so none of the
   four viewport-fitted page layouts are affected.
   ============================================================================ */
.primer-trigger{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;padding:6px 12px;border:1px solid #d9e5ec;border-radius:999px;background:#fff;color:#2f6fd0;font:inherit;font-size:11.5px;font-weight:650;cursor:pointer;transition:border-color .14s ease,background .14s ease}
.primer-trigger:hover{border-color:#9cc4e8;background:#f2f8fe}
.primer-trigger svg{width:15px;height:15px}
.primer-trigger:focus-visible{outline:2px solid #2f6fd0;outline-offset:2px}

body.primer-open{overflow:hidden}
.primer-overlay{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:24px;background:rgba(12,26,42,.55);backdrop-filter:blur(3px)}
.primer-overlay[hidden]{display:none}
.primer-panel{position:relative;width:min(940px,100%);max-height:min(88vh,860px);overflow-y:auto;padding:30px 34px 26px;border-radius:18px;background:#fff;box-shadow:0 24px 60px rgba(10,28,45,.3)}
.primer-close{position:absolute;top:16px;right:18px;width:32px;height:32px;border:1px solid var(--border);border-radius:50%;background:var(--panel-2);color:var(--text-dim);font-size:19px;line-height:1;cursor:pointer}
.primer-close:hover{color:var(--text)}
.primer-eyebrow{margin:0 0 6px;color:#2f6fd0;font-size:10.5px;font-weight:800;letter-spacing:.12em}
.primer-panel h2{margin:0 0 16px;color:#16283d;font-size:24px;font-weight:750;letter-spacing:-.035em}
.primer-intro{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;margin-bottom:18px}
.primer-intro h3{margin:0 0 6px;color:#22384a;font-size:13.5px;font-weight:700}
.primer-intro p{margin:0;color:#6b7f88;font-size:12.5px;line-height:1.6}
.primer-legend{display:flex;flex-wrap:wrap;gap:18px;padding:11px 0;margin-bottom:16px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.primer-legend span{display:inline-flex;align-items:center;gap:7px;color:#6b7f88;font-size:11.5px}
.primer-legend i{width:9px;height:9px;border-radius:50%;background:#d7e0e5}
.primer-legend i.is-on{background:#17a35d}
.primer-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:11px}
.primer-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;padding:13px 14px;border:1px solid #e8eef1;border-radius:11px;background:#fcfdfe}
.primer-card.is-detected{border-color:#bfe6d1;background:linear-gradient(120deg,#f4fdf8,#fdfffe)}
.primer-num{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;color:#7a8b95;background:#eef3f6;font-size:10.5px;font-weight:800}
.primer-card.is-detected .primer-num{color:#0d7d4e;background:#dcf5e7}
.primer-card strong{display:block;margin-bottom:3px;color:#22384a;font-size:13px;font-weight:700}
.primer-card small{display:block;color:#6b7f88;font-size:11.5px;line-height:1.45}
.primer-note{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--border);color:#8496a0;font-size:11.5px;line-height:1.55}

@media (max-width:860px){
  .primer-trigger span{display:none}
  .primer-trigger{padding:6px 8px}
  .primer-panel{padding:24px 20px 20px}
  .primer-panel h2{font-size:20px}
}

/* --- Recovery ledger: collapsible timeline entries, so the list scales with every heal --- */
#reliability .heal-card{padding:0;overflow:hidden}
#reliability .heal-card+.heal-card{margin-top:9px}
#reliability .heal-summary{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:11px;padding:13px 15px;cursor:pointer;list-style:none}
#reliability .heal-summary::-webkit-details-marker{display:none}
#reliability .heal-summary:hover{background:rgba(13,129,88,.045)}
#reliability .heal-summary:focus-visible{outline:2px solid #17a35d;outline-offset:-2px}
#reliability .heal-sum-main{display:flex;flex-direction:column;min-width:0}
#reliability .heal-sum-main strong{color:#0d8158;font-size:12.5px;font-weight:800;letter-spacing:.01em}
#reliability .heal-sum-main small{overflow:hidden;margin-top:3px;color:#7d9088;font:10.5px ui-monospace,SFMono-Regular,Menlo,monospace;text-overflow:ellipsis;white-space:nowrap}
#reliability .heal-sum-counts{flex:0 0 auto;padding:4px 9px;border:1px solid #cfe7dc;border-radius:999px;color:#2f6552;background:#eefaf4;font-size:11px;font-weight:700;white-space:nowrap}
#reliability .heal-chevron{display:grid;place-items:center;color:#8aa79c;transition:transform .18s ease}
#reliability .heal-chevron svg{width:16px;height:16px}
#reliability .heal-card[open] .heal-chevron{transform:rotate(180deg)}
#reliability .heal-body{padding:0 15px 14px;border-top:1px solid #e2f0ea}
#reliability .heal-body .heal-detail{margin-top:11px}