:root {
  --c-bg: #f8fafc;
  --c-surface: #ffffff;
  --c-surface-alt: #f8fafc;
  --c-border: #e2e8f0;
  --c-border-soft: #f1f5f9;
  --c-text: #0f172a;
  --c-text-muted: #64748b;
  --c-text-soft: #334155;
  /* UX bundle action 5c: remap accent to ARC PAL_ISLAND.Jawa (#1B6CA8).
     Hover = ~12% darker; soft = ~92% lightness wash for badge backgrounds. */
  --c-accent: #1B6CA8;
  --c-accent-hover: #145682;
  --c-accent-soft: #e6eff7;
  --c-blue: #2563eb;
  --c-green: #059669;
  --c-gold: #d97706;
  --c-warn: #d97706;
  --c-soft-blue: #dbeafe;
  --c-soft-green: #d1fae5;
  --c-soft-gold: #fef3c7;
  --ff-sans: Arial, Helvetica, sans-serif;
  --ff-serif: Georgia, "Times New Roman", serif;
  --ff-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 0.78rem;
  --fs-sm: 0.88rem;
  --fs-base: 1rem;
  --fs-md: 1.15rem;
  --fs-lg: 1.4rem;
  --fs-xl: 2rem;
  --fs-xxl: 2.75rem;
  --lh-tight: 1.2;
  --lh-base: 1.55;
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --r-sm: 4px;
  --r-md: 6px;
  --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-2: 0 4px 12px rgba(15, 23, 42, 0.06);
  --max-w: 1200px;
}

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  color: var(--c-text);
  background: var(--c-bg);
  font-family: var(--ff-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--ff-serif);
  font-weight: 600;
  line-height: var(--lh-tight);
}

h1 {
  font-size: var(--fs-md);
}

h2 {
  font-size: clamp(1.75rem, 4vw, var(--fs-xxl));
  max-width: 27ch;
}

h3 {
  font-size: var(--fs-lg);
}

h4 {
  font-size: var(--fs-md);
}

a {
  color: var(--c-accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

button,
input,
select {
  font: inherit;
}

.topbar {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  padding: var(--s-4) var(--s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
}

.topbar-brand {
  min-width: 0;
}

.topbar h1 {
  margin: 0;
  font-size: var(--fs-xl);
  line-height: 1.15;
}

.topbar-subtitle {
  max-width: 76ch;
  margin: var(--s-1) 0 0;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.top-actions {
  display: flex;
  gap: var(--s-2);
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ghost {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 8px 12px;
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text-soft);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow-1);
}

.ghost:hover {
  background: var(--c-bg);
  color: var(--c-text);
  text-decoration: none;
}

.tabs {
  position: sticky;
  top: 0;
  z-index: 45;
  display: flex;
  gap: 4px;
  padding: 0 var(--s-6);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface);
  overflow-x: auto;
}

.nav-btn {
  min-height: 0;
  padding: 12px 14px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--c-text-muted);
  cursor: pointer;
  font-size: var(--fs-sm);
  font-weight: 700;
  box-shadow: none;
  white-space: nowrap;
}

.nav-btn:hover {
  background: var(--c-bg);
  color: var(--c-text);
}

.nav-btn.active {
  border-bottom-color: var(--c-accent);
  color: var(--c-accent);
  background: transparent;
}

.layout {
  min-height: calc(100vh - 112px);
}

.workspace,
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--s-5) var(--s-6) var(--s-7);
}

.section {
  padding: var(--s-6) 0;
}

.hero-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: var(--s-5);
  align-items: center;
  margin-bottom: var(--s-5);
  padding: var(--s-6);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
}

body:not([data-view="overview"]) .hero-band {
  display: none;
}

.eyebrow {
  margin: 0 0 var(--s-3);
  color: var(--c-accent);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lede {
  max-width: 68ch;
  margin: var(--s-4) 0 0;
  color: var(--c-text-muted);
  font-size: var(--fs-md);
}

.hero-meta {
  padding: var(--s-4);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface-alt);
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.view-root {
  padding-top: var(--s-5);
}

.grid {
  display: grid;
  gap: var(--s-4);
  min-width: 0;
}

.grid.kpi {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}

.grid.two,
.grid.three {
  grid-template-columns: 1fr;
}

.panel,
.kpi-card,
.table-panel,
.plan-card {
  min-width: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}

.panel,
.plan-card {
  padding: var(--s-4);
}

.kpi-card {
  min-height: 96px;
  padding: var(--s-3) var(--s-4);
}

.kpi-card .label {
  margin-bottom: var(--s-1);
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: uppercase;
}

.kpi-card .value {
  font-family: var(--ff-serif);
  font-size: clamp(1.45rem, 3vw, var(--fs-xl));
  line-height: 1.08;
}

.kpi-card .hint {
  margin-top: var(--s-1);
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
}

.section-title {
  display: flex;
  gap: var(--s-3);
  align-items: flex-end;
  justify-content: space-between;
  margin: var(--s-5) 0 var(--s-3);
  padding-top: var(--s-4);
  border-top: 1px solid var(--c-border);
}

.view-root > .section-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.section-title p,
.panel .subtext {
  margin: var(--s-1) 0 0;
  color: var(--c-text-muted);
  font-size: var(--fs-sm);
}

.finding-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  padding: 0;
  margin: 0;
  list-style: none;
}

.finding-list li {
  padding: var(--s-4);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-text);
  box-shadow: var(--shadow-1);
}

.analysis-brief {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}

.theme-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 var(--s-5);
  padding-bottom: 0;
  border-bottom: 1px solid var(--c-border);
  overflow-x: auto;
}

.theme-tab {
  min-width: 150px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--c-text-muted);
  text-align: left;
  cursor: pointer;
  box-shadow: none;
}

.theme-tab span {
  display: block;
  color: var(--c-text);
  font-weight: 700;
}

.theme-tab small {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
}

.theme-tab.active {
  border-bottom-color: var(--c-accent);
  background: transparent;
  color: var(--c-accent);
}

.compact-list {
  margin: 0;
  padding-left: var(--s-5);
}

.compact-list li + li {
  margin-top: var(--s-2);
}

.finding-card {
  min-width: 0;
  padding: var(--s-4);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
}

.finding-card h4 {
  margin-bottom: var(--s-2);
}

.finding-card p {
  margin: 0 0 var(--s-2);
  color: var(--c-text);
}

.chart {
  width: 100%;
  min-height: 230px;
  overflow-x: auto;
}

.chart svg {
  /* UX bundle action 5a: removed `min-width: 620px` so charts respect the
     SVG viewBox aspect ratio on mobile and no longer trigger horizontal scroll
     inside the .chart wrapper. */
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.chart text {
  fill: var(--c-text-muted);
  font-family: var(--ff-sans);
  font-size: 12px;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-3);
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 6px;
  border-radius: 50%;
}

.table-panel {
  overflow: hidden;
}

.table-subtitle {
  padding: var(--s-4) var(--s-4) 0;
}

.stacked-panel {
  margin-top: var(--s-4);
}

.table-header {
  display: flex;
  gap: var(--s-3);
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4);
  border-bottom: 1px solid var(--c-border);
}

.table-wrap {
  overflow: auto;
  max-height: 66vh;
}

table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

th,
td {
  padding: 7px 12px;
  border-bottom: 1px solid var(--c-border-soft);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f1f5f9;
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  letter-spacing: 0;
  text-transform: uppercase;
}

tr.clickable-row {
  cursor: pointer;
}

tr.clickable-row:hover {
  background: var(--c-bg);
}

.pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  margin: 1px 3px 1px 0;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--c-bg);
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  line-height: 1.3;
  white-space: nowrap;
}

.pill.bpk {
  background: var(--c-soft-blue);
  color: #315766;
}

.pill.kemkes {
  background: var(--c-soft-green);
  color: var(--c-green);
}

.pill.warn {
  background: var(--c-soft-gold);
  color: #6f5630;
}

.pill.ok {
  background: var(--c-soft-green);
  color: var(--c-green);
}

.pill.danger {
  background: var(--c-accent-soft);
  color: var(--c-accent);
}

.tag-stack {
  display: grid;
  gap: 6px;
}

.tag-stack strong {
  display: block;
  margin-bottom: 2px;
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
}

.agreement-bar {
  width: 100%;
  max-width: 140px;
  height: 8px;
  margin-bottom: 4px;
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--c-bg);
  border: 1px solid var(--c-border);
}

.agreement-bar span {
  display: block;
  height: 100%;
  background: var(--c-green);
}

.evidence {
  max-width: 38ch;
  margin-bottom: 6px;
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.evidence strong {
  color: var(--c-accent);
}

.controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}

.control {
  width: 100%;
  min-height: 40px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: #fff;
}

.control:focus {
  outline: 2px solid var(--c-accent);
  outline-offset: -1px;
}


.network-detail {
  min-height: 220px;
}

.network-detail table {
  min-width: 420px;
}

.network-detail .table-wrap {
  max-height: 240px;
}

#browser-table table {
  min-width: 1040px;
  table-layout: fixed;
}

#browser-table th:nth-child(1),
#browser-table td:nth-child(1) {
  width: 88px;
}

#browser-table th:nth-child(2),
#browser-table td:nth-child(2) {
  width: 58px;
}

#browser-table th:nth-child(4),
#browser-table td:nth-child(4) {
  width: 130px;
}

#browser-table th:nth-child(5),
#browser-table td:nth-child(5) {
  width: 90px;
}

#browser-table th:nth-child(7),
#browser-table td:nth-child(7) {
  width: 70px;
}

.network-detail h4 {
  margin-bottom: var(--s-2);
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  margin-top: var(--s-3);
}

.detail-metric {
  padding: var(--s-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-bg);
}

.detail-metric .label {
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
  text-transform: uppercase;
}

.detail-metric .value {
  font-family: var(--ff-serif);
  font-size: var(--fs-lg);
}

.readiness-verdict {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  align-items: center;
  margin-bottom: var(--s-4);
}

.readiness-verdict p {
  margin: var(--s-2) 0 0;
  color: var(--c-text-muted);
}

.readiness-score {
  display: grid;
  gap: var(--s-2);
}

.readiness-score strong {
  display: block;
  font-family: var(--ff-serif);
  font-size: var(--fs-xl);
  line-height: 1;
}

.readiness-score span {
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
}

.readiness-meter {
  width: 100%;
  height: 12px;
  overflow: hidden;
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-bg);
}

.readiness-meter span {
  display: block;
  height: 100%;
  background: var(--c-accent);
}

.action-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0 0 var(--s-4);
}

.download-panel {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  justify-content: space-between;
  margin: var(--s-3) 0 var(--s-5);
  padding: var(--s-4);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--r-md);
  background: var(--c-surface);
  box-shadow: var(--shadow-1);
}

.download-panel .action-row {
  margin: 0;
}

.action-btn {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text);
  cursor: pointer;
  font-size: var(--fs-sm);
  text-decoration: none;
}

.action-btn:hover {
  border-color: var(--c-accent);
  color: var(--c-accent);
  text-decoration: none;
}

.action-btn.primary {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: #fff;
  font-weight: 700;
}

.action-btn.primary:hover {
  background: var(--c-accent-hover);
  color: #fff;
}

.plan-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
}

.priority {
  display: inline-block;
  margin: var(--s-2) 0;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  background: var(--c-accent-soft);
  color: var(--c-accent);
  font-size: var(--fs-xs);
  font-weight: 700;
}

.plan-card ul {
  margin: var(--s-3) 0;
  padding-left: var(--s-5);
}

.notice {
  padding: var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--r-md);
  color: var(--c-text-muted);
}

.small {
  color: var(--c-text-muted);
  font-size: var(--fs-xs);
}

.slide-deck {
  display: none;
}

.slide-deck.preview {
  display: block;
  min-height: 100vh;
  padding: 0.2in 0;
  background: #2a2a2a;
}

.slides-mode .topbar,
.slides-mode .container {
  display: none;
}

.slide {
  position: relative;
  width: 13.333in;
  height: 7.5in;
  margin: 0 auto 0.2in;
  overflow: hidden;
  display: grid;
  grid-template-rows: 0.58in 1fr 0.42in;
  background: #fafaf7;
  color: #1a1a1a;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.25);
  break-after: page;
  page-break-after: always;
}

.slide:last-child {
  break-after: auto;
  page-break-after: auto;
}

.slide::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 8pt;
  background: var(--c-accent);
}

.slide-head,
.slide-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.16in 0.45in 0.12in 0.52in;
  color: #6b6962;
  font-size: 9pt;
  letter-spacing: 0.02em;
}

.slide-head {
  border-bottom: 1px solid #e5e3dd;
}

.slide-foot {
  border-top: 1px solid #e5e3dd;
}

.slide-body {
  min-width: 0;
  padding: 0.28in 0.52in;
}

.slide h1,
.slide h2,
.slide h3 {
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.08;
}

.slide h1 {
  max-width: 12ch;
  margin: 0;
  font-size: 34pt;
}

.slide h2 {
  max-width: 25ch;
  margin: 0;
  font-size: 28pt;
}

.slide-lead,
.cover-main p,
.back-slide p {
  max-width: 62ch;
  color: #5f5c55;
  font-size: 13pt;
  line-height: 1.35;
}

.cover-slide {
  grid-template-columns: 1.55in 1fr;
  grid-template-rows: 1fr;
}

.cover-slide::before {
  display: none;
}

.cover-rail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.45in 0.25in;
  background: var(--c-accent);
  color: #fff;
}

.cover-rail strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24pt;
}

.cover-rail span {
  font-size: 10pt;
  line-height: 1.3;
}

.cover-main {
  display: grid;
  align-content: center;
  gap: 0.2in;
  padding: 0.55in 0.75in;
}

.cover-score {
  color: var(--c-accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 58pt;
  line-height: 0.9;
}

.cover-stats,
.slide-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.15in;
}

.cover-stats div,
.slide-card-grid div,
.slide-verdict {
  padding: 0.16in;
  border: 1px solid #e5e3dd;
  border-left: 4px solid var(--c-accent);
  border-radius: 8px;
  background: #fff;
}

.cover-stats strong {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22pt;
}

.cover-stats span,
.slide-card-grid span {
  display: block;
  margin-top: 0.06in;
  color: #6b6962;
  font-size: 9.5pt;
  line-height: 1.32;
}

.slide-bullets {
  display: grid;
  gap: 0.11in;
  margin: 0.22in 0 0;
  padding-left: 0.24in;
  font-size: 14pt;
  line-height: 1.32;
}

.slide-verdict strong {
  display: block;
  color: var(--c-accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 24pt;
}

.slide-verdict p {
  margin: 0.12in 0 0;
  color: #1a1a1a;
  font-size: 16pt;
  line-height: 1.35;
}

.back-slide {
  display: block;
  padding: 0.65in 0.8in;
  background: #2c4a3e;
  color: #fff;
}

.back-slide h2 {
  color: #fff;
}

.back-slide p {
  color: #f4eee8;
  font-size: 16pt;
}

.back-slide .slide-card-grid div {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.back-slide .slide-card-grid span {
  color: #f4eee8;
}

@page {
  size: 13.333in 7.5in;
  margin: 0;
}

@media print {
  body > *:not(.slide-deck) {
    display: none !important;
  }

  .slide-deck {
    display: block !important;
    background: #fff !important;
  }

  .slide {
    margin: 0;
    box-shadow: none;
  }
}

@media (min-width: 760px) {
  .grid.kpi {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .grid.two,
  .plan-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .finding-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analysis-brief {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .controls {
    grid-template-columns: 1.4fr repeat(4, minmax(120px, 0.45fr));
  }

  .controls.audit-controls {
    grid-template-columns: minmax(0, 1.2fr) minmax(180px, 0.8fr);
  }

  .readiness-verdict {
    grid-template-columns: minmax(0, 1.4fr) minmax(240px, 0.6fr);
  }
}

@media (min-width: 1040px) {
  .grid.kpi {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .grid.three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

}

@media (max-width: 680px) {
  .topbar {
    align-items: flex-start;
    flex-direction: column;
    padding: var(--s-3) var(--s-4);
  }

  .topbar h1 {
    font-size: 1.5rem;
    overflow-wrap: anywhere;
  }

  .top-actions {
    width: 100%;
    justify-content: stretch;
  }

  .top-actions .ghost {
    flex: 1 1 0;
    justify-content: center;
  }

  .tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    padding: 0 var(--s-3);
    overflow: visible;
  }

  .nav-btn {
    width: 100%;
    min-width: 0;
    padding: 12px var(--s-2);
    white-space: normal;
    line-height: 1.15;
  }

  .workspace,
  .container {
    padding: var(--s-4) var(--s-3) var(--s-6);
  }

  .hero-band {
    grid-template-columns: 1fr;
    padding-top: var(--s-4);
  }

  .section-title {
    align-items: flex-start;
    flex-direction: column;
  }

  .table-header {
    align-items: flex-start;
    flex-direction: column;
  }

  .theme-tabs {
    display: grid;
    grid-template-columns: 1fr;
  }

  .theme-tab {
    width: 100%;
    min-width: 0;
  }
}

/* _patches/01: sticky validation-draft caveat banner */
.caveat-banner {
  position: sticky;
  top: 0;
  z-index: 60;                   /* above .tabs (z-index: 45) */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 24px;
  background: #fef3c7;           /* matches --c-soft-gold */
  color: #92400e;                /* dark amber, high contrast on gold */
  border-bottom: 1px solid #fcd34d;
  border-left: 4px solid #92400e;
  font-family: "Arial", "Helvetica", sans-serif;
  font-size: 13px;
  line-height: 1.4;
}
.caveat-banner__icon {
  font-size: 16px;
  line-height: 1;
}
.caveat-banner__text strong {
  font-family: "Georgia", "Times New Roman", serif;
  font-weight: 700;
}
.caveat-banner__link {
  margin-left: auto;
  color: #7c2d12;
  font-weight: 700;
  text-decoration: underline;
  white-space: nowrap;
}
.caveat-banner__link:hover {
  color: #4a1d09;
}

/* Persistent badge inside .topbar-brand */
.caveat-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 8px;
  border: 1px solid #92400e;
  border-radius: 999px;
  background: #fef3c7;
  color: #92400e;
  font-family: "Arial", "Helvetica", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}

/* _patches/02: evidence drilldown columns */
code.chunk-id {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  color: var(--c-text-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  cursor: pointer;
  user-select: all;
  transition: background-color 120ms ease, color 120ms ease;
}
code.chunk-id:hover {
  background: var(--c-soft-gold);
  color: var(--c-text);
}
code.chunk-id--copied {
  background: var(--c-soft-green);
  color: var(--c-green);
}

.evidence-link-icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid var(--c-border);
  border-radius: 4px;
  color: var(--c-text-soft);
  background: var(--c-surface);
  text-decoration: none;
  font-family: "Arial", "Helvetica", sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.evidence-link-icon:hover {
  background: var(--c-soft-gold);
  color: var(--c-text);
  border-color: #92400e;
  text-decoration: none;
}
.evidence-link-icon svg { display: block; }
.evidence-link-icon__label { letter-spacing: 0.02em; }

/* Stream M (multi-theme support): theme tab strip + verdict chips.
   Uses existing token palette only; no new colors and no Google Fonts.
   The strip lives above the existing sub-panel tabs inside Thematic. */
.theme-tabs--themes {
  margin-bottom: var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px dashed var(--c-border);
}
.theme-tab--theme {
  min-width: 200px;
  padding: 8px 12px;
}
.theme-tab--theme small {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
  color: var(--c-text-soft);
  font-family: "Arial", "Helvetica", sans-serif;
}
.theme-tab__score {
  font-weight: 700;
  color: var(--c-text);
  font-family: "Arial", "Helvetica", sans-serif;
}
.verdict-chip {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text-soft);
  font-family: "Arial", "Helvetica", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.3;
}
.verdict-chip--frozen {
  background: var(--c-soft-green, #e6f4ea);
  border-color: var(--c-green, #166534);
  color: var(--c-green, #166534);
}
.verdict-chip--draft {
  background: var(--c-soft-gold, #fff7e6);
  border-color: var(--c-gold, #92400e);
  color: var(--c-gold, #92400e);
}
.verdict-chip--pending {
  background: #f3f4f6;
  border-color: #9ca3af;
  color: #6b7280;
}
.pending-theme-banner {
  border-left: 3px solid #9ca3af;
  background: #f9fafb;
  color: var(--c-text);
}

/* Stream NN: per-theme scope callout (product_boundary.json render). */
.scope-callout {
  margin: 12px 0 18px 0;
  padding: 12px 14px;
  border: 1px solid var(--c-border);
  border-left: 3px solid var(--c-green);
  background: var(--c-surface);
  border-radius: 4px;
  font-family: "Arial", "Helvetica", sans-serif;
  font-size: 12px;
  color: var(--c-text);
}
.scope-callout__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.scope-callout__chip {
  display: inline-block;
  padding: 2px 8px;
  background: var(--c-soft-green);
  color: var(--c-green);
  border: 1px solid var(--c-green);
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.scope-callout__label {
  font-weight: 600;
  color: var(--c-text-soft);
}
.scope-callout__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 800px) {
  .scope-callout__grid { grid-template-columns: 1fr; }
}
.scope-callout__col-title {
  margin: 0 0 6px 0;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--c-text-soft);
}
.scope-callout__col-title--sub { margin-top: 8px; }
.scope-callout__list {
  margin: 0;
  padding-left: 16px;
  line-height: 1.4;
}
.scope-callout__list li { margin-bottom: 3px; }
.scope-callout__list--muted { color: var(--c-text-muted); }
.scope-callout__redirect {
  color: var(--c-text-muted);
  font-style: italic;
}
.scope-callout__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.scope-callout__chip-link {
  display: inline-block;
  padding: 3px 8px;
  background: var(--c-surface-alt);
  border: 1px solid var(--c-border);
  border-radius: 3px;
  color: var(--c-text-soft);
  text-decoration: none;
  font-size: 11px;
}
.scope-callout__chip-link:hover {
  background: var(--c-soft-green);
  border-color: var(--c-green);
  color: var(--c-green);
}

/* UX bundle action 4: theme group split (validated vs bootstrap), bootstrap
   badge per card, and additional warning row attached under the sticky
   caveat banner. Subdued styling makes bootstrap themes visually subordinate
   to validated themes without hiding them. */
.theme-group {
  margin-bottom: var(--s-3);
}
/* Cycle 3 polish: validated group gets equal visual weight to the dashed
   bootstrap container via accent left-border + soft tint. */
.theme-group--validated {
  margin-top: var(--s-2);
  padding: var(--s-2) var(--s-3) var(--s-1);
  border-left: 4px solid var(--c-accent);
  border-radius: var(--r-sm);
  background: var(--c-accent-soft);
}
.theme-group--bootstrap {
  margin-top: var(--s-2);
  padding: var(--s-2) var(--s-3) var(--s-1);
  border: 1px dashed var(--c-border);
  border-radius: var(--r-sm);
  background: #fafbfc;
}
.theme-group__heading {
  margin: 0 0 var(--s-2);
  color: var(--c-text-muted);
  font-family: var(--ff-sans);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.theme-tabs--bootstrap {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}
.theme-tab--bootstrap {
  background: transparent;
  color: var(--c-text-muted);
  opacity: 0.88;
}
.theme-tab--bootstrap span {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-text-soft);
}
.theme-tab--bootstrap.active {
  opacity: 1;
}
.theme-tab--bootstrap.active span {
  color: var(--c-text);
}
.bootstrap-badge {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid #9ca3af;
  border-radius: 3px;
  background: #f3f4f6;
  color: #4b5563;
  font-family: var(--ff-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.3;
}

.bootstrap-warning-banner {
  position: sticky;
  top: 0;
  z-index: 59;             /* sit just under .caveat-banner (z-index: 60) */
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 24px;
  background: #fff7ed;
  color: #7c2d12;
  border-bottom: 1px solid #fdba74;
  border-left: 4px solid #c2410c;
  font-family: "Arial", "Helvetica", sans-serif;
  font-size: 12px;
  line-height: 1.4;
}
.bootstrap-warning-banner[hidden] {
  display: none;
}
.bootstrap-warning-banner__icon {
  font-size: 14px;
  line-height: 1;
}
.bootstrap-warning-banner__text strong {
  font-family: "Georgia", "Times New Roman", serif;
  font-weight: 700;
}

/* Cycle 3 polish: out_of_scope redirect_to becomes a clickable link when its
   text matches a sibling_links label. Non-matching items keep the plain arrow
   span for back-compat. */
.scope-callout__redirect-link {
  color: var(--c-accent);
  text-decoration: underline dotted;
  cursor: pointer;
}
.scope-callout__redirect-link:hover,
.scope-callout__redirect-link:focus {
  color: var(--c-accent-hover);
  text-decoration: underline solid;
}

/* Cycle 3 polish: subtle "show warning again" affordance after dismissing the
   per-session bootstrap banner. Lives inside the theme tab strip area. */
.bootstrap-banner-reset {
  display: inline-block;
  margin-left: var(--s-2);
  padding: 0;
  background: none;
  border: 0;
  color: var(--c-text-muted);
  font-family: "Arial", "Helvetica", sans-serif;
  font-size: 11px;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: underline dotted;
}
.bootstrap-banner-reset:hover,
.bootstrap-banner-reset:focus {
  color: var(--c-accent);
}

/* ============================================================
   Constellation SNA (2026-05-19) — Cytoscape canvas + filters
   ============================================================ */
.constellation-shell {
  display: flex;
  flex-direction: column;
  gap: var(--s-3, 0.75rem);
  margin-top: var(--s-3, 0.75rem);
}
.constellation-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3, 0.75rem);
  align-items: flex-end;
  padding: var(--s-3, 0.75rem);
  background: var(--c-surface, #fff);
  border: 1px solid var(--c-border, #d8dde3);
  border-radius: 8px;
}
.constellation-toolbar .control-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: "Arial", "Helvetica", sans-serif;
  font-size: 12px;
  color: var(--c-text-muted, #4a5568);
}
.constellation-toolbar .control {
  min-width: 180px;
  padding: 6px 10px;
  font-family: "Arial", "Helvetica", sans-serif;
  font-size: 13px;
  border: 1px solid var(--c-border, #c2cad4);
  border-radius: 6px;
  background: #fff;
  color: #111;
}
.constellation-toolbar .ghost {
  padding: 7px 12px;
  font-size: 12px;
  font-family: "Arial", "Helvetica", sans-serif;
}
.constellation-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: var(--s-3, 0.75rem);
  align-items: stretch;
}
@media (max-width: 1100px) {
  .constellation-grid { grid-template-columns: 1fr; }
}
.constellation-canvas {
  width: 100%;
  height: 720px;
  background: linear-gradient(180deg, #0a1230 0%, #0e1a4a 100%);
  border: 1px solid var(--c-border, #d8dde3);
  border-radius: 8px;
  position: relative;
  overflow: hidden;
}
.constellation-side {
  display: flex;
  flex-direction: column;
  gap: var(--s-3, 0.75rem);
  max-height: 720px;
  overflow-y: auto;
}
.constellation-side .panel {
  background: #fff;
  border: 1px solid var(--c-border, #d8dde3);
  border-radius: 8px;
  padding: var(--s-3, 0.75rem);
}
.constellation-side h4 {
  margin: 0 0 0.4rem 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 15px;
}
.constellation-side .data-table {
  width: 100%;
  font-size: 12px;
  font-family: "Arial", "Helvetica", sans-serif;
  border-collapse: collapse;
}
.constellation-side .data-table th,
.constellation-side .data-table td {
  padding: 4px 6px;
  text-align: left;
  border-bottom: 1px solid #eef0f2;
}
.constellation-side .data-table th {
  background: #f4f6f9;
  font-weight: 600;
}
.constellation-comm-row:hover { background: #f9fbfd; }
.constellation-comm-row.active { background: #e8f1fa; outline: 1px solid #1B6CA8; }
.constellation-side .dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 5px;
}
.constellation-side .detail-metrics {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin: 0.4rem 0;
}
.constellation-side .detail-metric .label {
  font-size: 11px; color: var(--c-text-muted, #4a5568); text-transform: uppercase; letter-spacing: 0.02em;
}
.constellation-side .detail-metric .value {
  font-family: Georgia, serif; font-size: 15px; font-weight: 600;
}

/* ============================================================
   Constellation HERO (2026-05-19) — cinematic auto-tour on Home
   ============================================================ */
/* Hide the generic intro band on Home so the constellation is the literal
   first thing in the viewport. Other views keep it. */
body.home-constellation-active .hero-band { display: none; }

/* CINEMA MODE: full-bleed, full-viewport-height hero on Home, with the page
   chrome (caveat banner, topbar, tabs) floating translucently on top. */
body.home-constellation-active .view-root { padding-top: 0; margin-top: 0; }
body.home-constellation-active .workspace { padding-top: 0; max-width: none; padding-left: 0; padding-right: 0; }
body.home-constellation-active .caveat-banner,
body.home-constellation-active .topbar,
body.home-constellation-active .tabs {
  position: fixed; left: 0; right: 0; z-index: 60;
  background: rgba(5, 9, 24, 0.55);
  backdrop-filter: blur(10px);
  border-color: rgba(255, 255, 255, 0.08);
}
body.home-constellation-active .caveat-banner { top: 0; }
body.home-constellation-active .topbar { top: 0; color: #f5f7fb; }
body.home-constellation-active .topbar .eyebrow,
body.home-constellation-active .topbar h1,
body.home-constellation-active .topbar-subtitle { color: #f5f7fb; }
body.home-constellation-active .topbar .ghost {
  background: rgba(255,255,255,0.1); color: #f5f7fb; border-color: rgba(255,255,255,0.2);
}
body.home-constellation-active .tabs { background: rgba(5, 9, 24, 0.6); }
body.home-constellation-active .nav-btn { color: #c0c9e2; }
body.home-constellation-active .nav-btn.active { color: #fff; border-bottom-color: #fff; }
body.home-constellation-active .nav-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
/* The constellation hero fills the whole viewport behind the floating chrome. */
body.home-constellation-active .constellation-hero {
  width: 100vw;
  height: 100vh;
  max-height: none;
  margin: 0;
  border-radius: 0;
}
/* Below-the-fold content regains the normal container width + padding. */
body.home-constellation-active .view-root > *:not(.constellation-hero) {
  max-width: var(--max-w);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--s-6);
  padding-right: var(--s-6);
}

.constellation-hero {
  position: relative;
  width: 100%;
  height: 92vh;
  min-height: 560px;
  max-height: 1200px;
  margin: 0 0 var(--s-4, 1.5rem) 0;
  overflow: hidden;
  border-radius: 12px;
  background: radial-gradient(ellipse at 30% 30%, #1a2660 0%, #0a1230 55%, #050918 100%);
  box-shadow: 0 16px 60px -22px rgba(0, 0, 0, 0.55);
}
.constellation-hero.loading {
  display: flex; align-items: center; justify-content: center;
  color: #d1d8e8; font-family: Georgia, "Times New Roman", serif; font-size: 16px; letter-spacing: 0.02em;
}
.constellation-hero-canvas {
  position: absolute; inset: 0;
  z-index: 1;
}
.constellation-hero-vignette {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(ellipse at 50% 100%, rgba(5, 9, 24, 0.55) 0%, rgba(5, 9, 24, 0) 60%),
    linear-gradient(to top, rgba(5, 9, 24, 0.65) 0%, rgba(5, 9, 24, 0) 35%),
    linear-gradient(to bottom, rgba(5, 9, 24, 0.35) 0%, rgba(5, 9, 24, 0) 25%);
}
.constellation-hero-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; top: 0;
  pointer-events: none;
  z-index: 3;
  display: flex; flex-direction: column;
  justify-content: space-between;
  padding: 24px 32px;
  color: #f5f7fb;
  font-family: "Arial", "Helvetica", sans-serif;
}
.constellation-hero-overlay .ghost,
.constellation-hero-overlay .primary { pointer-events: auto; }
.constellation-hero-header { max-width: 720px; }
.hero-eyebrow {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #aebbdb; margin-bottom: 6px;
}
.hero-title {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 3.2vw, 38px);
  line-height: 1.15;
  font-weight: 700; margin: 0 0 6px 0;
  color: #ffffff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}
.hero-lede {
  font-size: 14px; max-width: 640px; color: #d6dcee;
  margin: 0;
}
.constellation-hero-actions {
  display: flex; gap: 10px;
  position: absolute; right: 28px; top: 24px;
}
.constellation-hero-actions .ghost,
.constellation-hero-actions .primary {
  padding: 8px 14px; border-radius: 999px; font-size: 13px;
  font-family: "Arial", "Helvetica", sans-serif;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(5, 9, 24, 0.6);
  color: #f5f7fb;
  cursor: pointer; backdrop-filter: blur(8px);
}
.constellation-hero-actions .primary {
  background: #1B6CA8; border-color: #1B6CA8; font-weight: 600;
}
.constellation-hero-actions .ghost:hover { border-color: #ffffff; }
.constellation-hero-actions .primary:hover { background: #2380c4; }
.constellation-hero-loading {
  color: #d1d8e8; font-family: Georgia, serif;
}

/* Responsive — overlay padding/typography on smaller viewports.
   (constellation-hero HEIGHT is set in the consolidated block below.) */
@media (max-width: 1100px) {
  .constellation-hero-overlay { padding: 18px 22px; }
}
@media (max-width: 720px) {
  .constellation-hero-overlay { padding: 14px 16px; }
  .constellation-hero-actions { top: 12px; right: 14px; }
  .hero-title { font-size: 20px; }
  .hero-lede { font-size: 12px; }
}

/* ============================================================
   Constellation HERO interactive additions (2026-05-20)
   ============================================================ */
/* Floating node-detail card (appears on node click, bottom-left) */
.constellation-hero-detail {
  position: absolute;
  left: 32px; bottom: 92px;
  max-width: 440px;
  display: flex; gap: 14px;
  padding: 16px 18px;
  background: rgba(5, 9, 24, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  color: #f5f7fb;
  opacity: 0; pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 5;
}
.hero-detail-swatch {
  width: 30px; height: 30px; border-radius: 50%; flex: 0 0 30px;
  box-shadow: 0 0 18px currentColor; margin-top: 4px;
}
.hero-detail-body { display: flex; flex-direction: column; gap: 5px; }
.hero-detail-eyebrow { font-size: 11px; letter-spacing: 0.05em; color: #aebbdb; text-transform: uppercase; }
.hero-detail-title { font-family: Georgia, "Times New Roman", serif; font-size: 16px; line-height: 1.3; color: #fff; }
.hero-detail-sub { font-size: 12px; color: #c0c9e2; }
.hero-detail-explore {
  margin-top: 6px; align-self: flex-start;
  padding: 6px 12px; border-radius: 999px;
  background: #1B6CA8; border: 0; color: #fff; font-size: 12px;
  font-family: "Arial", "Helvetica", sans-serif; cursor: pointer;
}
.hero-detail-explore:hover { background: #2380c4; }
.hero-detail-close {
  position: absolute; top: 8px; right: 10px;
  background: none; border: 0; color: #aebbdb; font-size: 20px; line-height: 1;
  cursor: pointer; padding: 0;
}
.hero-detail-close:hover { color: #fff; }

/* Scroll-down indicator (bottom-center, gentle bounce) */
.constellation-hero-scroll {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: 0; cursor: pointer;
  color: #d6dcee; font-family: "Arial", "Helvetica", sans-serif; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  pointer-events: auto; z-index: 4;
  opacity: 0.85;
}
.constellation-hero-scroll:hover { opacity: 1; color: #fff; }
.constellation-hero-scroll .chevron {
  font-size: 22px; line-height: 1;
  animation: hero-bounce 1.8s ease-in-out infinite;
}
@keyframes hero-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .constellation-hero-scroll .chevron { animation: none; }
}

/* Responsive overrides for full-height hero */
@media (max-width: 1100px) {
  .constellation-hero { height: 80vh; min-height: 480px; }
  .constellation-hero-detail { left: 20px; bottom: 88px; max-width: 360px; }
}
@media (max-width: 720px) {
  .constellation-hero { height: 72vh; min-height: 420px; }
  .constellation-hero-detail { left: 12px; right: 12px; bottom: 84px; max-width: none; }
  .hero-detail-title { font-size: 14px; }
}

/* ============================================================
   Constellation HERO — cinema cluster panel + repealed (2026-05-20)
   ============================================================ */
/* Push overlay header below the floating chrome on Home cinema mode */
body.home-constellation-active .constellation-hero-overlay { padding-top: 150px; }

/* Cluster list panel — floating top-right of hero */
.constellation-hero-clusters {
  position: absolute; top: 150px; right: 24px;
  width: 290px; max-height: calc(100vh - 250px);
  display: flex; flex-direction: column;
  background: rgba(5, 9, 24, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  padding: 12px;
  pointer-events: auto; z-index: 4;
}
.hero-clusters-head {
  font-family: Georgia, "Times New Roman", serif; font-size: 14px; color: #fff;
  margin-bottom: 8px; display: flex; justify-content: space-between; align-items: baseline;
}
.hero-clusters-hint { font-family: Arial, sans-serif; font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: #aebbdb; }
.hero-clusters-list { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.hero-cluster-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border: 0; border-radius: 7px;
  background: none; cursor: pointer; text-align: left; width: 100%;
}
.hero-cluster-row:hover { background: rgba(255, 255, 255, 0.08); }
.hero-cluster-row.active { background: rgba(27, 108, 168, 0.4); outline: 1px solid #1B6CA8; }
.hero-cluster-dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 12px; box-shadow: 0 0 8px currentColor; }
.hero-cluster-meta { display: flex; flex-direction: column; min-width: 0; }
.hero-cluster-name { font-family: Arial, sans-serif; font-size: 12px; color: #eef2fb; font-weight: 600; }
.hero-cluster-anchor { font-family: Arial, sans-serif; font-size: 11px; color: #b3bdd8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-clusters-legend {
  display: flex; gap: 14px; margin-top: 10px; padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.1);
  font-family: Arial, sans-serif; font-size: 11px; color: #c0c9e2;
}
.hero-clusters-legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.legend-dot.solid { background: #8ea2d6; }
.legend-dot.ring { background: transparent; border: 1.5px dashed #8ea2d6; }

/* Repealed badge in detail card */
.hero-detail-badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.03em; vertical-align: middle;
}
.hero-detail-badge.repealed { background: rgba(220, 60, 60, 0.25); color: #ffb4b4; border: 1px solid rgba(220,60,60,0.5); }
.hero-detail-badge.active { background: rgba(60, 200, 130, 0.2); color: #9be8c0; border: 1px solid rgba(60,200,130,0.4); }
.hero-detail-revoked { font-size: 12px; color: #ffb4b4; margin-top: 2px; }

/* Cluster panel hides on narrow screens to keep canvas usable */
@media (max-width: 900px) {
  .constellation-hero-clusters { display: none; }
}

/* ============================================================
   Constellation HERO — title one-line + search (2026-05-20c)
   ============================================================ */
/* Title on a single line (override global h2 wrap constraint) */
.constellation-hero .hero-title {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(20px, 3vw, 36px);
}
@media (max-width: 720px) {
  .constellation-hero .hero-title { white-space: normal; font-size: 20px; }
}

/* Search box in hero header */
.hero-search-wrap { position: relative; margin-top: 14px; max-width: 440px; pointer-events: auto; }
.hero-search {
  width: 100%; padding: 10px 14px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(5, 9, 24, 0.6); color: #f5f7fb;
  font-family: Arial, Helvetica, sans-serif; font-size: 14px;
  backdrop-filter: blur(8px);
}
.hero-search::placeholder { color: #9fabc9; }
.hero-search:focus { outline: none; border-color: #1B6CA8; box-shadow: 0 0 0 3px rgba(27,108,168,0.3); }
.hero-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: rgba(8, 13, 33, 0.96); border: 1px solid rgba(255,255,255,0.12);
  border-radius: 12px; overflow: hidden; display: none; z-index: 8;
  max-height: 340px; overflow-y: auto;
  box-shadow: 0 16px 40px -12px rgba(0,0,0,0.6);
}
.hero-search-results.open { display: block; }
.hero-search-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 14px; border: 0; background: none; cursor: pointer; text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.hero-search-item:hover { background: rgba(27, 108, 168, 0.3); }
.hero-search-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 11px; box-shadow: 0 0 8px currentColor; }
.hero-search-label { font-family: Arial, sans-serif; font-size: 13px; color: #eef2fb; line-height: 1.3; }
.hero-search-rep {
  display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px;
  font-size: 10px; font-weight: 700; background: rgba(220,60,60,0.25); color: #ffb4b4;
}
.hero-search-empty { padding: 12px 14px; color: #9fabc9; font-size: 13px; font-family: Arial, sans-serif; }

/* Timeline decade axis overlay (2026-05-20) */
.constellation-hero-axis {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
}
.hero-axis-tick {
  position: absolute; top: 0; left: 0;
  display: flex; flex-direction: column; align-items: center;
  transform: translate(-9999px, -9999px);
  will-change: transform;
}
.hero-axis-line {
  width: 1px; height: 26px; background: linear-gradient(to bottom, rgba(255,209,102,0.5), rgba(255,209,102,0));
}
.hero-axis-year {
  font-family: Georgia, "Times New Roman", serif; font-size: 13px; font-weight: 700;
  color: rgba(255,233,168,0.85); margin-top: 2px; letter-spacing: 0.04em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}

/* Dedicated loading splash — ARC house style (matches UHC Costing Workbench) */
.app-loading {
  position: fixed; inset: 0; z-index: 10000;
  background:
    radial-gradient(ellipse at 80% 0%, rgba(255, 255, 255, 0.06) 0%, transparent 50%),
    linear-gradient(135deg, #001a3a 0%, #002147 55%, #1a3a6a 100%);
  color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.4s ease;
}
.app-loading.is-done { opacity: 0; pointer-events: none; }
.app-loading__inner { text-align: center; max-width: 480px; padding: 32px; }
.app-loading__logo {
  width: 72px; height: 72px; margin-bottom: 18px;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.4));
}
.app-loading__eyebrow {
  font: 700 11px/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: 0.14em; opacity: 0.7; margin: 0 0 8px;
}
.app-loading__title {
  font: 600 30px/1.15 Georgia, "Times New Roman", serif;
  margin: 0 0 24px; color: #ffffff; max-width: none;
}
.app-loading__bar {
  width: 100%; height: 4px; background: rgba(255, 255, 255, 0.15);
  border-radius: 999px; overflow: hidden; margin-bottom: 12px;
}
.app-loading__bar-fill {
  height: 100%; width: 5%; background: #ffffff; border-radius: 999px;
  transition: width 0.3s ease-out;
}
.app-loading__hint {
  font: 400 13px/1.5 Arial, Helvetica, sans-serif; opacity: 0.75; margin: 0;
}

/* === v3 multi-dim chip filter panel === */
.dim-panel {
  border: 1px solid var(--border, #e3e4e8);
  border-radius: 6px; padding: 8px 12px; margin-bottom: 8px;
  background: #fbfbfc; font-family: Arial, Helvetica, sans-serif;
}
.dim-panel[open] { background: #f4f6fa; }
.dim-panel > summary {
  cursor: pointer; list-style: none; padding: 4px 0;
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: #1a2030;
}
.dim-panel > summary::-webkit-details-marker { display: none; }
.dim-panel > summary::before {
  content: "▸"; font-size: 9px; transition: transform 0.15s; color: #6b7280;
}
.dim-panel[open] > summary::before { transform: rotate(90deg); }
.dim-panel-meta {
  margin-left: auto; font-size: 11px; color: #6b7280; font-weight: 400;
}
.dim-panel-meta em { color: #1B6CA8; font-style: normal; font-weight: 600; }
.dim-chip-row {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; padding-top: 6px;
  border-top: 1px solid #e7e8ec;
}
.dim-chip-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid #d1d5db; background: #ffffff;
  font: 400 11px/1.3 Arial, Helvetica, sans-serif; color: #25303f;
  cursor: pointer; transition: background 0.1s, border-color 0.1s;
}
.dim-chip-btn:hover { background: #eef2f7; border-color: #9aa8bb; }
.dim-chip-btn.active {
  background: #1B6CA8; color: #ffffff; border-color: #155a8e;
}
.dim-chip-btn.active .dim-chip-count { color: #cfe1f0; }
.dim-chip-count {
  font-size: 10px; color: #6b7280; font-variant-numeric: tabular-nums;
}

/* === v3 detail card dim table === */
.dim-table { width: 100%; border-collapse: collapse; margin: 8px 0 4px; }
.dim-table td {
  padding: 5px 6px; vertical-align: top;
  border-bottom: 1px dotted #e3e4e8;
}
.dim-table td.dim-label {
  width: 32%; font: 600 11px/1.4 Arial, Helvetica, sans-serif;
  color: #4a5568; letter-spacing: 0.02em;
}
.dim-table td.dim-values { font-size: 12px; }
.dim-chip {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  background: #eef2f7; color: #25303f; font-size: 11px;
  margin: 1px 2px 1px 0; border: 1px solid #d8e0ea;
}

/* === status_aktif pill in detail header === */
.status-pill {
  display: inline-block; margin-left: 6px;
  padding: 1px 8px; border-radius: 999px;
  font: 600 10px/1.4 Arial, Helvetica, sans-serif; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.status-pill.aktif    { background: #e6f1e9; color: #1f6f3e; border: 1px solid #b9d9c4; }
.status-pill.diubah   { background: #fff5d7; color: #8a5a00; border: 1px solid #e9d493; }
.status-pill.dicabut  { background: #f5e6e6; color: #8a3535; border: 1px solid #d9b9b9; }
.status-pill.omnibus  { background: #f5d9d9; color: #b94a48; border: 1px solid #d99090; }

/* === Pasal Browser tab === */
.pasal-shell { display: grid; grid-template-columns: 320px 1fr; gap: 16px; margin-top: 12px; }
.pasal-filters { display: flex; flex-direction: column; gap: 12px; }
.pasal-filters .panel { padding: 12px; }
.pasal-filters h4 { margin: 0 0 6px; font: 600 13px/1.3 Arial, Helvetica, sans-serif; }
.pasal-table-wrap { overflow-x: auto; }
.pasal-pager {
  display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
  font: 400 12px Arial, Helvetica, sans-serif; color: #4a5568;
}
.pasal-list { font-size: 12px; }
.pasal-list th, .pasal-list td {
  padding: 6px 8px; vertical-align: top; border-bottom: 1px solid #eef0f3;
}
.pasal-list th { background: #f4f6fa; font-weight: 600; text-align: left; }
.pasal-row { cursor: pointer; transition: background 0.1s; }
.pasal-row:hover { background: #fbfbfc; }
.pasal-row.expanded { background: #eef2f7; }
.pasal-row-detail td { background: #fbfbfc; padding: 12px; border-bottom: 2px solid #d6dde8; }
.pasal-snippet, .pasal-snippet-cell {
  font: 400 11px/1.4 Arial, Helvetica, sans-serif;
  color: #4a5568; max-width: 360px;
}
.pasal-doc { font-size: 10px; color: #6b7280; }
.pasal-num { font-weight: 600; color: #1B6CA8; }

/* pasal_type badges */
[class^="pasal-type-"] {
  display: inline-block; padding: 1px 6px; border-radius: 999px;
  font: 600 9px/1.4 Arial, Helvetica, sans-serif; letter-spacing: 0.05em;
  text-transform: uppercase; margin-right: 4px;
}
.pasal-type-substantif { background: #e0eaf5; color: #1b4d8c; }
.pasal-type-definisi   { background: #ede4f5; color: #6b3aa0; }
.pasal-type-sanksi     { background: #f5d9d9; color: #a83232; }
.pasal-type-penutup    { background: #e8e8e8; color: #555555; }
.pasal-type-cross-ref  { background: #fff0d0; color: #8a5a00; }
.pasal-type-lain       { background: #f0f0f0; color: #777777; }

/* pasal drill in constellation detail */
.pasal-drill { margin-top: 14px; padding-top: 12px; border-top: 1px solid #e3e4e8; }
.pasal-drill h5 { margin: 0 0 6px; font: 600 12px/1.3 Arial, Helvetica, sans-serif; color: #1a2030; }
.pasal-drill-table { width: 100%; font-size: 11px; border-collapse: collapse; }
.pasal-drill-table td { padding: 5px 6px; vertical-align: top; border-bottom: 1px dotted #e7e8ec; }
.pasal-drill-table td.pasal-num { width: 40px; }

/* pasal expanded detail rows */
.pasal-detail { font: 400 12px/1.5 Arial, Helvetica, sans-serif; color: #25303f; }
.pasal-detail > div { margin-bottom: 10px; }
.pasal-detail-text { background: #ffffff; padding: 10px; border-left: 3px solid #1B6CA8; }
.pasal-detail-ayat ol { margin: 4px 0 0 18px; }
.pasal-detail-penj { background: #f9f5ec; padding: 8px 10px; border-left: 3px solid #d4a017; font-style: italic; }
.pasal-detail-edges ul { margin: 4px 0 0 18px; }
.pasal-detail-edges li { margin-bottom: 3px; }
.edge-extends     { color: #2a7a3a; }
.edge-refines     { color: #1B6CA8; }
.edge-overlaps    { color: #8a5a00; }
.edge-contradicts { color: #b94a48; }
.edge-same        { color: #6b3aa0; }
.link-strong { color: #1B6CA8; font-weight: 600; }

@media (max-width: 1100px) {
  .pasal-shell { grid-template-columns: 1fr; }
}

/* ================================================================
   CINEMATIC KONSTELASI — full-bleed canvas + glass overlay panels
   ================================================================ */
body[data-view="konstelasi"] .topbar,
body[data-view="konstelasi"] .caveat-banner {
  display: none;  /* full-bleed: hide page topbar + caveat in cinematic mode */
}
body[data-view="konstelasi"] .layout,
body[data-view="konstelasi"] .workspace,
body[data-view="konstelasi"] .view-root {
  margin: 0; padding: 0; max-width: none; width: 100%;
}
body[data-view="konstelasi"] .tabs {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: rgba(10, 14, 26, 0.78);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body[data-view="konstelasi"] .nav-btn {
  color: rgba(255, 255, 255, 0.7);
}
body[data-view="konstelasi"] .nav-btn.active,
body[data-view="konstelasi"] .nav-btn:hover {
  color: #ffffff; border-bottom-color: #f5c947;
}

.cinematic-shell {
  position: fixed; inset: 0; padding-top: 48px; /* room for fixed nav */
  background: radial-gradient(ellipse at center, #0e1730 0%, #060914 100%);
  overflow: hidden;
}
.cinematic-canvas {
  position: absolute; inset: 48px 0 0 0;
  background: transparent;
}

/* glass utility */
.glass {
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
}

/* top glass bar */
.cinematic-topbar {
  position: absolute; top: 60px; left: 12px; right: 12px; z-index: 20;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 9px 16px; border-radius: 12px;
  font: 400 12px/1.4 Arial, Helvetica, sans-serif;
}
.cinematic-stats {
  color: rgba(255, 255, 255, 0.9); white-space: nowrap;
}
.cinematic-stats strong { color: #f5c947; font-variant-numeric: tabular-nums; }
.cinematic-lens {
  display: flex; align-items: center; gap: 4px;
  margin-left: auto;
}
.cinematic-lens .lens-label {
  font-size: 11px; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.05em;
  margin-right: 4px; text-transform: uppercase;
}
.lens-btn {
  padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font: 600 10px/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: 0.06em; cursor: pointer;
  transition: all 0.12s;
}
.lens-btn:hover { background: rgba(255, 255, 255, 0.15); color: #ffffff; }
.lens-btn.active {
  background: rgba(245, 201, 71, 0.18); color: #f5c947;
  border-color: rgba(245, 201, 71, 0.55);
}
.cinematic-actions { display: flex; align-items: center; gap: 6px; }
.cinematic-actions .control.mini,
.cinematic-actions .ghost.mini {
  font-size: 12px; padding: 4px 8px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
}
.cinematic-actions .control.mini::placeholder { color: rgba(255, 255, 255, 0.45); }
.cinematic-actions .control.mini { width: 160px; }
.cinematic-actions .ghost.mini { cursor: pointer; width: 32px; padding: 4px 0; }
.cinematic-actions .ghost.mini:hover { background: rgba(255, 255, 255, 0.15); }

/* right slide-over */
.cinematic-side {
  position: absolute; top: 60px; right: 0; bottom: 0; width: 420px;
  display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform 0.28s ease;
  z-index: 30;
}
.cinematic-side.open { transform: translateX(0); }
.cinematic-side .side-tabs {
  display: flex; gap: 0; padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.cinematic-side .side-tab {
  flex: 1; padding: 10px 12px;
  background: transparent; border: 0;
  color: rgba(255, 255, 255, 0.6);
  font: 600 11px/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.cinematic-side .side-tab:hover { color: #ffffff; }
.cinematic-side .side-tab.active {
  color: #f5c947; border-bottom-color: #f5c947;
}
.cinematic-side .side-body {
  flex: 1; overflow-y: auto; padding: 14px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.3) transparent;
}
.cinematic-side .side-body::-webkit-scrollbar { width: 6px; }
.cinematic-side .side-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 3px; }
.cinematic-side .side-pane { display: none; }
.cinematic-side .side-pane.active { display: block; }
.cinematic-side .side-controls {
  display: flex; flex-direction: column; gap: 10px;
  margin-bottom: 14px;
}
.cinematic-side .control-label {
  display: flex; flex-direction: column; gap: 3px;
  font: 600 11px/1.3 Arial, Helvetica, sans-serif;
  color: rgba(255, 255, 255, 0.7); letter-spacing: 0.04em;
}
.cinematic-side select.control,
.cinematic-side input[type="range"] {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 5px; padding: 4px 6px;
  font: 400 12px Arial, Helvetica, sans-serif;
}
.cinematic-side button.ghost {
  background: rgba(245, 201, 71, 0.14); color: #f5c947;
  border: 1px solid rgba(245, 201, 71, 0.4);
  padding: 6px 12px; border-radius: 6px; cursor: pointer;
  font: 600 11px Arial, Helvetica, sans-serif;
}
.cinematic-side button.ghost:hover { background: rgba(245, 201, 71, 0.25); }
.cinematic-side input[type="checkbox"] { accent-color: #f5c947; }

/* Dim panel + chip styling inside dark glass */
.cinematic-side .dim-panel {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
}
.cinematic-side .dim-panel[open] { background: rgba(255, 255, 255, 0.07); }
.cinematic-side .dim-panel > summary { color: rgba(255, 255, 255, 0.85); }
.cinematic-side .dim-panel > summary::before { color: rgba(255, 255, 255, 0.5); }
.cinematic-side .dim-panel-meta { color: rgba(255, 255, 255, 0.45); }
.cinematic-side .dim-panel-meta em { color: #f5c947; }
.cinematic-side .dim-chip-row { border-top-color: rgba(255, 255, 255, 0.08); }
.cinematic-side .dim-chip-btn {
  background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.82);
  border-color: rgba(255, 255, 255, 0.15);
}
.cinematic-side .dim-chip-btn:hover { background: rgba(255, 255, 255, 0.14); }
.cinematic-side .dim-chip-btn.active {
  background: #f5c947; color: #1a1a1a; border-color: #f5c947;
}
.cinematic-side .dim-chip-btn.active .dim-chip-count { color: rgba(0, 0, 0, 0.55); }
.cinematic-side .dim-chip-count { color: rgba(255, 255, 255, 0.5); }

/* Detail card inside dark panel */
.cinematic-side .panel.network-detail {
  background: transparent; border: 0; padding: 0;
}
.cinematic-side .network-detail h4 { color: #ffffff; font: 600 14px/1.3 Arial, Helvetica, sans-serif; }
.cinematic-side .subtext { color: rgba(255, 255, 255, 0.55); }
.cinematic-side .dim-table td { border-bottom-color: rgba(255, 255, 255, 0.08); color: #f1f5f9; }
.cinematic-side .dim-table td.dim-label { color: rgba(255, 255, 255, 0.55); }
.cinematic-side .dim-chip {
  background: rgba(255, 255, 255, 0.1); color: #ffffff;
  border-color: rgba(255, 255, 255, 0.15);
}
.cinematic-side .data-table { color: #f1f5f9; }
.cinematic-side .data-table th, .cinematic-side .data-table td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: #f1f5f9;
}
.cinematic-side .data-table th { background: rgba(255, 255, 255, 0.05); }
.cinematic-side .pasal-drill { border-top-color: rgba(255, 255, 255, 0.08); }
.cinematic-side .pasal-drill h5 { color: #ffffff; }
.cinematic-side .pasal-drill-table td { border-bottom-color: rgba(255, 255, 255, 0.06); }

/* Theme list inside dark panel */
.cinematic-side .constellation-comm-row { color: #f1f5f9; cursor: pointer; }
.cinematic-side .constellation-comm-row:hover { background: rgba(255, 255, 255, 0.06); }
.cinematic-side .constellation-comm-row.active { background: rgba(245, 201, 71, 0.18); }

/* Atlas / Browse / Methods band hero (consistent identity) */
.atlas-band, .browse-band, .methods-band {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  padding: 28px 0 18px;
  border-bottom: 1px solid #e3e4e8;
  margin-bottom: 12px;
}
.atlas-band h2, .browse-band h2, .methods-band h2 {
  font: 600 26px/1.2 Georgia, "Times New Roman", serif;
  margin: 4px 0 6px;
}
.atlas-band .lede, .browse-band .lede, .methods-band .lede {
  font: 400 14px/1.5 Arial, Helvetica, sans-serif;
  color: #475569; max-width: 720px;
}
.atlas-band .eyebrow, .browse-band .eyebrow, .methods-band .eyebrow {
  font: 600 11px/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: 0.12em; color: #1B6CA8; text-transform: uppercase;
}

/* Browse segmented toggle */
.browse-toggle { display: inline-flex; gap: 0; margin-top: 12px; border: 1px solid #cbd5df; border-radius: 8px; overflow: hidden; }
.seg-btn {
  background: #ffffff; border: 0; padding: 8px 16px; cursor: pointer;
  font: 600 12px Arial, Helvetica, sans-serif; color: #4a5568;
  border-right: 1px solid #cbd5df;
}
.seg-btn:last-child { border-right: 0; }
.seg-btn.active { background: #1B6CA8; color: #ffffff; }

/* Methods collapsible sections */
.methods-sec {
  border: 1px solid #e3e4e8; border-radius: 8px;
  margin-bottom: 12px; padding: 10px 14px; background: #ffffff;
}
.methods-sec > summary {
  cursor: pointer; padding: 4px 0;
  font: 600 14px Arial, Helvetica, sans-serif; color: #1a2030;
  list-style: none;
}
.methods-sec > summary::before { content: "▸"; font-size: 10px; margin-right: 8px; color: #6b7280; }
.methods-sec[open] > summary::before { content: "▾"; }

@media (max-width: 900px) {
  .cinematic-side { width: 92vw; }
  .cinematic-topbar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cinematic-lens { margin-left: 0; }
}

/* Pasal Browser — readable parent label */
.pasal-doc-cell { min-width: 180px; max-width: 280px; }
.pasal-doc-label {
  font: 700 12px/1.3 Arial, Helvetica, sans-serif;
  color: #1B6CA8; letter-spacing: 0.02em;
  margin-bottom: 2px;
}
.pasal-doc-title {
  font: 400 10px/1.3 Arial, Helvetica, sans-serif;
  color: #6b7280; letter-spacing: 0.01em;
}

/* ================================================================
   HTA-STYLE HERO BAND — dark gradient + glass KPI + brand tile
   adopted for Atlas / Browse / Methods (Konstelasi sudah cinematic)
   ================================================================ */
.hta-hero {
  position: relative;
  padding: 32px 28px 38px;
  margin: 0 0 24px;
  color: #f1f5f9;
  background: linear-gradient(135deg, #0e1730 0%, #143b5e 45%, #0e1730 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.hta-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 85% 30%, rgba(245, 201, 71, 0.07), transparent 60%);
  pointer-events: none;
}
.hta-hero-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 32px;
  align-items: start;
  max-width: 1200px;
  position: relative;
}
.hta-hero-text { z-index: 2; }
.hta-hero-eye {
  font: 700 11px/1.4 Arial, Helvetica, sans-serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #f5c947;
  opacity: 0.9;
  margin: 0 0 14px;
}
.hta-hero-title {
  font: 400 36px/1.18 Georgia, "Times New Roman", serif;
  margin: 0 0 14px;
  color: #ffffff;
  letter-spacing: -0.005em;
}
.hta-hero-title em {
  font-style: italic;
  font-weight: 400;
  color: #f5c947;
}
.hta-hero-lede {
  font: 400 14px/1.6 Arial, Helvetica, sans-serif;
  color: rgba(241, 245, 249, 0.85);
  max-width: 560px;
  margin: 0 0 18px;
}
.hta-brand-tile {
  position: absolute; top: 18px; right: 28px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 12px 6px 8px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  font: 600 10px/1.3 Arial, Helvetica, sans-serif;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.08em; text-transform: uppercase;
  z-index: 3;
}
.hta-brand-tile img { width: 26px; height: auto; opacity: 0.95; }
.hta-brand-tile span small { display: block; font-size: 9px; color: rgba(255, 255, 255, 0.55); margin-top: 2px; font-weight: 400; letter-spacing: 0.06em; }

/* Glass KPI card — sits on the gradient hero */
.hta-kpi-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 14px;
  padding: 18px 20px;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
  margin-top: 12px;
  max-width: 760px;
}
.hta-kpi-card .kpi-item { padding: 0; }
.hta-kpi-card .kpi-label {
  font: 600 10px/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #6b7280; margin-bottom: 4px;
}
.hta-kpi-card .kpi-value {
  font: 600 24px/1.1 Georgia, "Times New Roman", serif;
  color: #0e1730;
  margin-bottom: 2px;
}
.hta-kpi-card .kpi-hint {
  font: 400 11px/1.3 Arial, Helvetica, sans-serif;
  color: #6b7280;
}

/* Visual element placeholder on right (stylised constellation chip etc) */
.hta-hero-visual {
  position: relative;
  min-height: 200px;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
}
.hta-visual-orb {
  width: 220px; height: 220px;
  background: radial-gradient(circle at 35% 35%, rgba(245, 201, 71, 0.32), transparent 50%),
              radial-gradient(circle at 70% 65%, rgba(27, 108, 168, 0.55), transparent 55%);
  border-radius: 50%;
  position: relative;
}
.hta-visual-orb::after {
  content: ""; position: absolute; inset: -2px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.18);
}

/* Sub-nav chip strip (like HTA Beranda/Obat/Pedoman/Methods) */
.sub-nav-strip {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 28px 0;
  margin: 0 0 -12px;
  position: relative; z-index: 4;
}
.sub-nav-strip .sub-chip {
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(241, 245, 249, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font: 600 11px/1.3 Arial, Helvetica, sans-serif;
  letter-spacing: 0.05em;
  cursor: pointer;
  text-decoration: none;
}
.sub-nav-strip .sub-chip:hover {
  background: rgba(255, 255, 255, 0.15); color: #ffffff;
}
.sub-nav-strip .sub-chip.active {
  background: rgba(245, 201, 71, 0.2); color: #f5c947;
  border-color: rgba(245, 201, 71, 0.55);
}

/* Atlas / Browse / Methods page body — neutral light bg below dark hero */
.hta-body-wrap {
  padding: 0 28px 40px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Override older atlas/browse/methods band classes (legacy from earlier phase) */
.atlas-band, .browse-band, .methods-band { display: none; }

@media (max-width: 900px) {
  .hta-hero-grid { grid-template-columns: 1fr; }
  .hta-hero-visual { display: none; }
  .hta-hero-title { font-size: 28px; }
  .hta-brand-tile { position: static; margin-bottom: 14px; }
  .sub-nav-strip { padding: 8px 16px 0; }
  .hta-body-wrap { padding: 0 16px 40px; }
}