/* ============================================================
   ABIS INSTITUTIONAL ARCHITECTURE DEMONSTRATOR
   styles.css
   ABIS INSTITUTIONAL ARCHITECTURE DEMONSTRATOR — FIRST IMPLEMENTATION CANDIDATE
   ============================================================ */

:root {
  /* Foundation */
  --base:      #050810;
  --navy-0:    #080d1a;
  --navy-1:    #0b1422;
  --navy-2:    #10203a;
  --navy-3:    #1a3058;

  /* Interaction */
  --blue:      #2e6fff;
  --blue-mid:  #74A2FF;
  --blue-dim:  rgba(46,111,255,0.12);
  --blue-bdr:  rgba(116,162,255,0.58);
  --blue-bhi:  rgba(116,162,255,0.98);
  --blue-bg:   rgba(46,111,255,0.07);
  --blue-bghv: rgba(46,111,255,0.16);

  /* Gold — Bitcoin-linked / strategic emphasis */
  --gold:      #D8B85D;
  --gold-dim:  rgba(216,184,93,0.10);
  --gold-bdr:  rgba(216,184,93,0.45);

  /* Controlled failure */
  --amber:     #C47B2B;
  --amber-dim: rgba(196,123,43,0.10);
  --amber-bdr: rgba(196,123,43,0.45);

  /* Typography */
  --white:     #F5F8FC;
  --silver:    #D3DCE8;
  --steel:     #A9B8CB;
  --muted:     #7A8EA8;

  /* Lines */
  --line:      rgba(184,196,212,0.14);
  --line-hi:   rgba(184,196,212,0.28);

  /* Fonts */
  --sans: 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --serif: Georgia, 'Times New Roman', serif;
  --mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

  /* Spacing */
  --rail-w: 220px;
  --header-h: 56px;
  --status-h: 36px;

  /* Chrome height (measured by JS) */
  --chrome-h: 92px;

  /* Motion */
  --dur: 200ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--base);
  color: var(--silver);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
button { font-family: var(--sans); cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
[hidden] { display: none !important; }

/* ── SKIP LINK ── */
.skip-link {
  position: absolute; top: -100%; left: 1rem;
  padding: .5rem 1rem;
  background: var(--blue); color: var(--white);
  font-size: .875rem; font-weight: 500;
  z-index: 9999; border-radius: 0 0 4px 4px;
  transition: top var(--dur);
}
.skip-link:focus { top: 0; }

/* ── FOCUS ── */
:focus-visible { outline: 2px solid var(--blue-mid); outline-offset: 3px; }

/* ============================================================
   SHELL LAYOUT
   ============================================================ */
.shell {
  display: grid;
  grid-template-rows: auto auto 1fr;
  grid-template-columns: var(--rail-w) 1fr;
  grid-template-areas:
    "header  header"
    "status  status"
    "rail    main";
  /* REVISION 2 — #shell-main must be the single scrolling container.
     A fixed shell height (not min-height) is what gives .shell-main
     overflow to scroll; with min-height the document scrolled instead
     and every #shell-main.scrollTop write was a no-op. */
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* ── HEADER ── */
.shell-header {
  grid-area: header;
  background: var(--navy-0);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: .375rem 1.25rem;
  /* REVISION 2 — header is its own grid row outside the scrolling
     container, so sticky positioning is no longer required. */
  position: relative;
  z-index: 200;
  gap: .5rem .75rem;
  min-height: var(--header-h);
  flex-shrink: 0;
}

.header-identity {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
  min-width: 0;
}

.header-logo {
  height: 32px;
  width: auto;
  border-radius: 3px;
}

.header-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.header-w1 {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .10em;
  color: var(--white);
}
.header-w2 {
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--steel);
}

.header-badge {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid var(--gold-bdr);
  padding: .25rem .625rem;
  border-radius: 2px;
  white-space: normal;
  max-width: 160px;
  line-height: 1.35;
  text-align: center;
}
.header-badge--btn {
  cursor: pointer;
  transition: background var(--dur), border-color var(--dur), color var(--dur);
  font-family: var(--sans);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.header-badge--btn:hover {
  background: rgba(216,184,93,0.22);
  border-color: var(--gold);
  color: var(--white);
}
.header-badge--btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.header-badge--btn:active {
  transform: scale(.97);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: .375rem;
  flex-shrink: 0;
}

.header-btn {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--steel);
  border: 1px solid var(--blue-bdr);
  border-radius: 3px;
  padding: .3rem .75rem;
  background: var(--blue-bg);
  transition: color var(--dur), border-color var(--dur), background var(--dur);
  cursor: pointer;
  white-space: nowrap;
}
.header-btn:hover { color: var(--white); border-color: var(--blue-bhi); background: var(--blue-bghv); }
.header-btn--primary {
  background: var(--blue);
  color: var(--white);
  border-color: rgba(116,162,255,0.80);
}
.header-btn--primary:hover { background: var(--blue-mid); border-color: var(--blue-bhi); }

/* Hamburger */
.header-menu-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 8px;
  border: 1px solid var(--blue-bdr);
  border-radius: 3px;
  background: var(--blue-bg);
  cursor: pointer;
  transition: background var(--dur), border-color var(--dur);
}
.header-menu-btn:hover { background: var(--blue-bghv); border-color: var(--blue-bhi); }
.header-menu-btn span {
  display: block;
  height: 1.5px;
  background: var(--silver);
  border-radius: 1px;
  transition: transform var(--dur), opacity var(--dur);
}

/* ── STATUS BAR ── */
.shell-status {
  grid-area: status;
  background: var(--navy-1);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: .375rem 1.25rem;
  gap: .5rem 1rem;
  overflow-x: visible;
  min-height: var(--status-h);
}

.status-label {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--muted);
  flex-shrink: 0;
}

.status-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .375rem .875rem;
  flex-shrink: 1;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--muted);
  white-space: nowrap;
}
.legend-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.legend-dot--blue   { background: var(--blue-mid); }
.legend-dot--gold   { background: var(--gold); }
.legend-dot--silver { background: var(--steel); }
.legend-dot--amber  { background: var(--amber); }

.status-sim-notice {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .10em;
  color: var(--gold);
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
}

/* ── RAIL NAVIGATION ── */
.shell-rail {
  grid-area: rail;
  background: var(--navy-1);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  /* REVISION 2 — the rail is a grid row-child of a fixed-height shell,
     so it fills its track and scrolls independently. */
  position: relative;
  height: 100%;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.rail-nav {
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0;
  flex: 1;
}

.rail-section-label {
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--muted);
  padding: .75rem 1.25rem .375rem;
  text-transform: uppercase;
}

.rail-btn {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .625rem 1.25rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--steel);
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  transition: color var(--dur), background var(--dur);
  position: relative;
  border-left: 2px solid transparent;
}
.rail-btn:hover { color: var(--white); background: rgba(255,255,255,.04); }
.rail-btn.active {
  color: var(--white);
  background: rgba(46,111,255,0.10);
  border-left-color: var(--blue-mid);
  font-weight: 600;
}
.rail-btn-num {
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .10em;
  color: var(--muted);
  min-width: 16px;
}
.rail-btn.active .rail-btn-num { color: var(--blue-mid); }

.rail-sep {
  height: 1px;
  background: var(--line);
  margin: .75rem 1.25rem;
}

.rail-utility {
  padding: 1rem 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.rail-util-btn {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--steel);
  border: 1px solid var(--blue-bdr);
  border-radius: 3px;
  padding: .5rem .875rem;
  background: var(--blue-bg);
  cursor: pointer;
  text-align: center;
  transition: color var(--dur), border-color var(--dur), background var(--dur);
}
.rail-util-btn:hover { color: var(--white); border-color: var(--blue-bhi); background: var(--blue-bghv); }
.rail-util-btn--cta {
  background: var(--blue);
  color: var(--white);
  border-color: rgba(116,162,255,0.80);
}
.rail-util-btn--cta:hover { background: var(--blue-mid); }

/* ── MAIN CONTENT ── */
.shell-main {
  grid-area: main;
  /* REVISION 2 — the single authoritative scrolling container. */
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
  height: 100%;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ── SCREENS ── */
.screen {
  display: none;
  padding: 2.5rem 2.5rem 4rem;
  max-width: 960px;
}
.screen.active { display: block; }

/* ── MOBILE OVERLAY ── */
.rail-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(5,8,16,.85);
  z-index: 150;
  backdrop-filter: blur(4px);
}
.rail-overlay.open { display: block; }

/* Mobile rail */
@media (max-width: 900px) {
  .shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "status"
      "main";
  }
  .shell-rail {
    position: fixed;
    left: -260px;
    top: 0;
    width: 260px;
    height: 100vh;
    height: 100dvh;
    z-index: 160;
    transition: left var(--dur) var(--ease);
    border-right: 1px solid var(--line-hi);
  }
  .shell-rail.open { left: 0; }
  .header-actions .header-btn:not(.header-btn--restart):not(.header-btn--home) { display: none; }
  .header-menu-btn { display: flex; }
  .screen { padding: 1.5rem 1.25rem 3rem; }
}

/* ============================================================
   SHARED COMPONENTS
   ============================================================ */

/* Eyebrow */
.eyebrow {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--blue-mid);
  display: block;
  margin-bottom: 1rem;
}

/* Headings */
h1.screen-h1 {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--white);
  margin-bottom: 1.25rem;
  letter-spacing: -.01em;
}
h2.screen-h2 {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 2.5vw, 1.875rem);
  font-weight: 500;
  line-height: 1.15;
  color: var(--white);
  margin-bottom: 1rem;
  letter-spacing: -.01em;
}
h3.section-h3 {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--steel);
  margin-bottom: .75rem;
}

/* Body copy */
.body-copy {
  font-size: 1rem;
  color: var(--silver);
  line-height: 1.72;
  max-width: 68ch;
  margin-bottom: 1.25rem;
}
.body-copy--sm {
  font-size: .9375rem;
  color: var(--silver);
  line-height: 1.68;
  max-width: 66ch;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .08em;
  border-radius: 3px;
  padding: .75rem 1.75rem;
  border: 1px solid var(--blue-bdr);
  background: var(--blue-bg);
  color: var(--silver);
  cursor: pointer;
  transition: color var(--dur), border-color var(--dur), background var(--dur), transform var(--dur);
  white-space: nowrap;
}
.btn:hover { color: var(--white); border-color: var(--blue-bhi); background: var(--blue-bghv); }
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--blue); color: var(--white); border-color: rgba(116,162,255,.80); }
.btn--primary:hover { background: var(--blue-mid); border-color: var(--blue-bhi); }
.btn--gold { color: var(--gold); border-color: var(--gold-bdr); background: var(--gold-dim); }
.btn--gold:hover { border-color: var(--gold); background: rgba(216,184,93,.18); }
.btn--sm { font-size: .75rem; padding: .5rem 1.125rem; }
.btn--icon { padding: .5rem .875rem; }

/* Action group */
.action-group {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 2rem;
}

/* Cards grid */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 2rem;
}

.card {
  background: var(--navy-1);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .625rem;
}

.card-num {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .20em;
  color: var(--blue-mid);
}
.card-title {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--blue-mid);
  line-height: 1.3;
}
.card-desc {
  font-size: .9375rem;
  color: var(--silver);
  line-height: 1.65;
  max-width: none;
}

/* Selectable card (actual control) */
.card--selectable {
  cursor: pointer;
  border: 1px solid var(--blue-bdr);
  border-radius: 3px;
  transition: background var(--dur), border-color var(--dur);
}
.card--selectable:hover { background: var(--navy-2); border-color: var(--blue-bhi); }
.card--selectable.selected { background: var(--navy-2); border-color: var(--blue-bhi); }
.card--selectable:focus-visible { outline: 2px solid var(--blue-mid); outline-offset: 3px; }

/* Callout box */
.callout {
  background: var(--navy-1);
  border: 1px solid var(--line-hi);
  border-left: 3px solid var(--blue-mid);
  border-radius: 0 3px 3px 0;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}
.callout--gold { border-left-color: var(--gold); }
.callout--amber { border-left-color: var(--amber); }
.callout-label {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .20em;
  color: var(--blue-mid);
  display: block;
  margin-bottom: .5rem;
}
.callout--gold .callout-label { color: var(--gold); }
.callout--amber .callout-label { color: var(--amber); }
.callout p {
  font-size: .9375rem;
  color: var(--silver);
  line-height: 1.65;
  max-width: none;
}

/* Return control */
.return-ctrl {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--steel);
  border: 1px solid var(--blue-bdr);
  border-radius: 3px;
  padding: .5rem 1rem;
  background: var(--blue-bg);
  cursor: pointer;
  transition: color var(--dur), border-color var(--dur), background var(--dur);
  text-decoration: none;
  margin-top: 1.5rem;
  margin-right: .5rem;
}
.return-ctrl:hover { color: var(--white); border-color: var(--blue-bhi); background: var(--blue-bghv); }

/* Section divider */
.sec-div {
  height: 1px;
  background: var(--line);
  margin: 2.5rem 0;
}

/* Status badge inline */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .16em;
  padding: .25rem .625rem;
  border-radius: 2px;
}
.badge--blue   { color: var(--blue-mid); background: var(--blue-dim); border: 1px solid var(--blue-bdr); }
.badge--gold   { color: var(--gold); background: var(--gold-dim); border: 1px solid var(--gold-bdr); }
.badge--amber  { color: var(--amber); background: var(--amber-dim); border: 1px solid var(--amber-bdr); }
.badge--steel  { color: var(--steel); background: rgba(169,184,203,.08); border: 1px solid var(--line-hi); }

/* ============================================================
   SCREEN 1 — ENTRY
   ============================================================ */
.entry-intro {
  max-width: 680px;
  margin-bottom: 2.5rem;
}

.entry-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 2rem;
}
@media (max-width: 600px) { .entry-cards { grid-template-columns: 1fr; } }

.entry-status {
  background: var(--navy-1);
  border: 1px solid var(--line-hi);
  border-radius: 3px;
  padding: 1.5rem;
  margin-bottom: 2rem;
  max-width: 600px;
}
.entry-status-label {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .20em;
  color: var(--gold);
  display: block;
  margin-bottom: .625rem;
}
.entry-status p { font-size: .875rem; color: var(--steel); line-height: 1.65; max-width: none; }

.entry-doctrine {
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--muted);
  line-height: 1.55;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}

/* ============================================================
   SCREEN 2 — ORIENTATION
   ============================================================ */
.orient-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 2rem;
}
@media (max-width: 768px) { .orient-metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 400px) { .orient-metrics { grid-template-columns: 1fr; } }

.metric-cell {
  background: var(--navy-1);
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .375rem;
}
.metric-label {
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .20em;
  color: var(--muted);
}
.metric-value {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 500;
  color: var(--white);
  line-height: 1;
}
.metric-sub {
  font-size: .6875rem;
  color: var(--steel);
  letter-spacing: .04em;
}

.orient-qual {
  font-size: .8125rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: 66ch;
  padding: .875rem 1.25rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--steel);
  border-radius: 0 3px 3px 0;
}

.layer-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 2rem;
}
@media (max-width: 700px) { .layer-cards { grid-template-columns: 1fr; } }

.layer-card {
  background: var(--navy-1);
  padding: 1.75rem 1.5rem;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur), border-color var(--dur);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.layer-card:hover { background: var(--navy-2); border-color: var(--blue-bdr); }
.layer-card:focus-visible { outline: 2px solid var(--blue-mid); outline-offset: -2px; }

.layer-card-roman {
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--blue-mid);
}
.layer-card-label {
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--steel);
}
.layer-card-anchor {
  font-size: .875rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: .02em;
}
.layer-card-name {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--white);
  line-height: 1.2;
}
.layer-card-desc {
  font-size: .875rem;
  color: var(--steel);
  line-height: 1.6;
  margin-top: .25rem;
}

.master-anchor-box {
  background: var(--navy-1);
  border: 1px solid var(--gold-bdr);
  border-radius: 3px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.master-anchor-label {
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .20em;
  color: var(--gold);
  flex-shrink: 0;
}
.master-anchor-domain {
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--gold);
}
.master-anchor-desc {
  font-size: .875rem;
  color: var(--steel);
  line-height: 1.6;
  flex: 1;
  min-width: 200px;
}

/* ============================================================
   SCREEN 3 — ARCHITECTURE VIEW
   ============================================================ */
.arch-view-tabs {
  display: flex;
  gap: 0;
  border: 1px solid var(--blue-bdr);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.arch-view-tab {
  flex: 1;
  min-width: 120px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--steel);
  border: none;
  border-right: 1px solid var(--blue-bdr);
  padding: .625rem .75rem;
  background: var(--navy-1);
  cursor: pointer;
  transition: background var(--dur), color var(--dur);
  text-align: center;
}
.arch-view-tab:last-child { border-right: none; }
.arch-view-tab:hover { background: var(--navy-2); color: var(--silver); }
.arch-view-tab[aria-selected="true"] { background: var(--blue); color: var(--white); }

/* Architecture count badge */
.arch-count {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--blue-mid);
  background: var(--blue-dim);
  border: 1px solid var(--blue-bdr);
  padding: .3rem .875rem;
  border-radius: 2px;
  margin-bottom: 1.75rem;
}

/* Layer group */
.layer-group {
  margin-bottom: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
}

.layer-header {
  background: var(--navy-2);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}
.layer-header-roman {
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--blue-mid);
  flex-shrink: 0;
}
.layer-header-name {
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-weight: 500;
  color: var(--white);
}
.layer-header-anchor {
  font-size: .8125rem;
  font-weight: 600;
  color: var(--gold);
  margin-left: auto;
}
.layer-header-anchor-btn {
  font-size: .75rem;
  font-weight: 600;
  color: var(--gold);
  background: var(--gold-dim);
  border: 1px solid var(--gold-bdr);
  border-radius: 3px;
  padding: .3rem .75rem;
  cursor: pointer;
  transition: background var(--dur), border-color var(--dur);
  margin-left: auto;
}
.layer-header-anchor-btn:hover { background: rgba(216,184,93,.18); border-color: var(--gold); }

/* Surface chips */
.surface-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1px;
  background: var(--line);
}

.surface-chip {
  background: var(--navy-1);
  padding: .875rem 1.25rem;
  cursor: pointer;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  transition: background var(--dur), border-color var(--dur);
}
.surface-chip:hover { background: var(--navy-2); border-color: var(--blue-bdr); }
.surface-chip:focus-visible { outline: 2px solid var(--blue-mid); outline-offset: -2px; }
.surface-chip-domain {
  font-size: .875rem;
  font-weight: 600;
  color: var(--blue-mid);
  letter-spacing: .02em;
  word-break: break-all;
}
.surface-chip-role {
  font-size: .75rem;
  color: var(--muted);
  line-height: 1.5;
}

/* Layer interpretation / boundary */
.layer-meta {
  padding: 1rem 1.5rem;
  background: var(--navy-1);
  border-top: 1px solid var(--line);
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
.layer-meta-item { flex: 1; min-width: 220px; }
.layer-meta-label {
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .20em;
  color: var(--steel);
  display: block;
  margin-bottom: .375rem;
}
.layer-meta-text {
  font-size: .875rem;
  color: var(--steel);
  line-height: 1.6;
}

/* ============================================================
   SCREEN 4 — CONTROL BEFORE EXECUTION
   ============================================================ */
.control-intro {
  max-width: 660px;
  margin-bottom: 2.5rem;
}
.control-lead {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-style: italic;
  color: var(--silver);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.control-stages {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  max-width: 720px;
  margin-bottom: 2rem;
}

.control-stage {
  display: grid;
  grid-template-columns: 170px 1fr;
  border-bottom: 1px solid var(--line);
  background: var(--navy-1);
}
.control-stage:last-child { border-bottom: none; }

.control-stage-label {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem 1rem;
  border-right: 1px solid var(--line-hi);
  background: var(--navy-2);
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--blue-mid);
  text-align: center;
}
.control-stage-body { padding: 1.25rem 1.5rem; }
.control-stage-q {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--white);
  margin-bottom: .375rem;
}
.control-stage-exp {
  font-size: .9375rem;
  color: var(--silver);
  line-height: 1.6;
}
.control-stage-note {
  font-size: .8125rem;
  color: var(--muted);
  margin-top: .5rem;
  font-style: italic;
}

@media (max-width: 600px) {
  .control-stage { grid-template-columns: 1fr; }
  .control-stage-label { border-right: none; border-bottom: 1px solid var(--line-hi); justify-content: flex-start; padding: .875rem 1.25rem; }
  .control-stage-body { padding: 1rem 1.25rem; }
}

/* ============================================================
   SCREEN 5 — REFERENCE PATH
   ============================================================ */
.path-scenario-tabs {
  display: flex;
  border: 1px solid var(--blue-bdr);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 2rem;
}
.path-scenario-tab {
  flex: 1;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--steel);
  border: none;
  border-right: 1px solid var(--blue-bdr);
  padding: .75rem 1rem;
  background: var(--navy-1);
  cursor: pointer;
  transition: background var(--dur), color var(--dur);
  text-align: center;
}
.path-scenario-tab:last-child { border-right: none; }
.path-scenario-tab:hover:not([aria-selected="true"]) { background: var(--navy-2); color: var(--silver); }
.path-scenario-tab[aria-selected="true"] { background: var(--blue); color: var(--white); }
.path-scenario-tab[data-scenario="failure"][aria-selected="true"] { background: var(--amber); }

/* Failure reason selector */
.failure-reason-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.failure-reason-btn {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--steel);
  border: 1px solid var(--amber-bdr);
  border-radius: 3px;
  padding: .375rem .875rem;
  background: var(--amber-dim);
  cursor: pointer;
  transition: color var(--dur), border-color var(--dur), background var(--dur);
}
.failure-reason-btn:hover { color: var(--white); border-color: var(--amber); }
.failure-reason-btn.active { color: var(--white); border-color: var(--amber); background: rgba(196,123,43,.25); }

/* Step controls */
.path-controls {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.75rem;
  align-items: center;
}

/* Progress bar */
.path-progress {
  width: 100%;
  height: 3px;
  background: var(--line);
  border-radius: 2px;
  margin-bottom: 1.75rem;
  overflow: hidden;
}
.path-progress-fill {
  height: 100%;
  background: var(--blue-mid);
  border-radius: 2px;
  transition: width .4s var(--ease);
}
.path-progress-fill--failure { background: var(--amber); }

/* Path steps */
.path-steps-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  max-width: 680px;
  margin-bottom: 1.5rem;
}

.path-step-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--line);
  background: var(--navy-1);
  transition: background var(--dur);
  min-height: 60px;
}
.path-step-row:last-child { border-bottom: none; }
.path-step-row.step-pending { opacity: .5; }
.path-step-row.step-active { background: rgba(46,111,255,.08); }
.path-step-row.step-done { opacity: .85; }
.path-step-row.step-permitted { background: rgba(46,111,255,.10); }
.path-step-row.step-denied { background: rgba(196,123,43,.08); }
.path-step-row.step-not-invoked { opacity: .4; }

.path-step-indicator {
  width: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--line);
  font-size: .875rem;
  color: var(--muted);
}
.step-active .path-step-indicator { color: var(--blue-mid); }
.step-done .path-step-indicator { color: var(--steel); }
.step-permitted .path-step-indicator { color: var(--blue-mid); }
.step-denied .path-step-indicator { color: var(--amber); }

.path-step-content {
  flex: 1;
  padding: .875rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.path-step-name {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .10em;
  color: var(--steel);
}
.step-active .path-step-name { color: var(--blue-mid); }
.step-permitted .path-step-name { color: var(--blue-mid); }
.step-denied .path-step-name { color: var(--amber); }

.path-step-state {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
}
.path-step-exp {
  font-size: .875rem;
  color: var(--silver);
  line-height: 1.55;
  margin-top: .125rem;
}
.path-step-surfaces {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin-top: .375rem;
}
.path-step-surface-tag {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--blue-mid);
  background: var(--blue-dim);
  border: 1px solid var(--blue-bdr);
  padding: .15rem .5rem;
  border-radius: 2px;
  word-break: break-all;
}

/* Outcome ribbon */
.outcome-ribbon {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  align-items: center;
  padding: 1.125rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--navy-1);
  max-width: 680px;
  margin-bottom: 1.25rem;
}
.outcome-ribbon--success { border-color: rgba(46,111,255,.45); background: rgba(46,111,255,.06); }
.outcome-ribbon--failure { border-color: var(--amber-bdr); background: var(--amber-dim); }

.outcome-label {
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .18em;
  margin-right: .5rem;
}
.outcome-ribbon--success .outcome-label { color: var(--blue-mid); }
.outcome-ribbon--failure .outcome-label { color: var(--amber); }

.outcome-chip {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--white);
  background: var(--navy-3);
  padding: .25rem .625rem;
  border-radius: 2px;
}
.outcome-arrow { color: var(--muted); font-size: .625rem; }

.path-status-banner {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  padding: .625rem 1.25rem;
  border-radius: 3px;
  border: 1px solid;
  margin-bottom: 1.5rem;
}
.path-status-banner--success { color: var(--blue-mid); border-color: var(--blue-bdr); background: rgba(46,111,255,.08); }
.path-status-banner--failure { color: var(--amber); border-color: var(--amber-bdr); background: var(--amber-dim); }

.path-sim-notice {
  font-size: .8125rem;
  color: var(--muted);
  line-height: 1.6;
  padding: .875rem 1.25rem;
  border: 1px solid var(--line);
  border-left: 2px solid var(--muted);
  border-radius: 0 3px 3px 0;
  margin-bottom: 1.5rem;
  max-width: 660px;
}

/* ============================================================
   SCREEN 6 — SURFACE INTELLIGENCE
   ============================================================ */
.si-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 2rem;
}
.si-filter-btn {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .10em;
  color: var(--steel);
  border: 1px solid var(--blue-bdr);
  border-radius: 3px;
  padding: .4rem .875rem;
  background: var(--blue-bg);
  cursor: pointer;
  transition: color var(--dur), border-color var(--dur), background var(--dur);
}
.si-filter-btn:hover { color: var(--silver); border-color: var(--blue-bhi); }
.si-filter-btn.active { color: var(--white); border-color: var(--blue-bhi); background: rgba(46,111,255,.22); }

.si-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 2rem;
}

.si-card {
  background: var(--navy-1);
  padding: 1.25rem 1.25rem;
  cursor: pointer;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  gap: .375rem;
  transition: background var(--dur), border-color var(--dur);
}
.si-card:hover { background: var(--navy-2); border-color: var(--blue-bdr); }
.si-card:focus-visible { outline: 2px solid var(--blue-mid); outline-offset: -2px; }
.si-card-layer {
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .20em;
  color: var(--muted);
}
.si-card-class {
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--blue-mid);
}
.si-card--anchor .si-card-class { color: var(--gold); }
.si-card-domain {
  font-size: .9375rem;
  font-weight: 600;
  color: var(--white);
  letter-spacing: .01em;
  word-break: break-all;
  line-height: 1.3;
}
.si-card-role {
  font-size: .8125rem;
  color: var(--steel);
  line-height: 1.5;
}

/* SI Detail Panel */
.si-detail {
  background: var(--navy-1);
  border: 1px solid var(--line-hi);
  border-radius: 4px;
  overflow: hidden;
}

.si-detail-header {
  background: var(--navy-2);
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.si-detail-domain {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--white);
  word-break: break-all;
}
.si-detail-close {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .10em;
  color: var(--steel);
  border: 1px solid var(--blue-bdr);
  border-radius: 3px;
  padding: .375rem .875rem;
  background: var(--blue-bg);
  cursor: pointer;
  transition: color var(--dur), border-color var(--dur), background var(--dur);
  flex-shrink: 0;
}
.si-detail-close:hover { color: var(--white); border-color: var(--blue-bhi); background: var(--blue-bghv); }

.si-detail-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (max-width: 700px) { .si-detail-body { grid-template-columns: 1fr; } }

.si-detail-field {
  padding: 1rem 1.5rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.si-detail-field:nth-child(even) { border-right: none; }
@media (max-width: 700px) { .si-detail-field { border-right: none; } }

.si-field-label {
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--muted);
  display: block;
  margin-bottom: .5rem;
}
.si-field-value {
  font-size: .9375rem;
  color: var(--silver);
  line-height: 1.6;
}
.si-field-value--domain { font-size: 1rem; font-weight: 600; color: var(--blue-mid); word-break: break-all; }
.si-field-value--boundary { color: var(--steel); font-style: italic; }

.si-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin-top: .5rem;
}
.si-tag {
  font-size: .625rem;
  font-weight: 600;
  color: var(--blue-mid);
  background: var(--blue-dim);
  border: 1px solid var(--blue-bdr);
  padding: .2rem .5rem;
  border-radius: 2px;
  word-break: break-all;
}

.si-status-row {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--line);
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  background: var(--navy-2);
}

/* ============================================================
   SCREEN 7 — MACHINE VIEW
   ============================================================ */
.machine-seq {
  display: flex;
  flex-direction: column;
  max-width: 520px;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 2rem;
}
.machine-seq-step {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--line);
  background: var(--navy-1);
}
.machine-seq-step:last-child { border-bottom: none; }
.machine-seq-arrow { color: var(--blue-mid); font-size: .875rem; flex-shrink: 0; }
.machine-seq-name { font-size: .9375rem; font-weight: 700; letter-spacing: .06em; color: var(--blue-mid); }

.machine-examples {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.75rem;
}
.machine-ex-btn {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--steel);
  border: 1px solid var(--blue-bdr);
  border-radius: 3px;
  padding: .5rem 1rem;
  background: var(--blue-bg);
  cursor: pointer;
  transition: color var(--dur), border-color var(--dur), background var(--dur);
}
.machine-ex-btn:hover { color: var(--silver); border-color: var(--blue-bhi); }
.machine-ex-btn.active { color: var(--white); border-color: var(--blue-bhi); background: rgba(46,111,255,.22); }

.machine-console {
  background: var(--navy-2);
  border: 1px solid var(--line-hi);
  border-radius: 4px;
  overflow: hidden;
  max-width: 560px;
  margin-bottom: 1.5rem;
}
.machine-console-header {
  background: var(--navy-3);
  padding: .625rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.machine-console-title {
  font-size: .5625rem;
  font-weight: 700;
  letter-spacing: .20em;
  color: var(--steel);
}
.machine-console-badge { font-size: .5rem; }
.machine-console-body { padding: 1.25rem; display: flex; flex-direction: column; gap: .625rem; }
.console-row {
  display: flex;
  gap: 1rem;
  align-items: baseline;
  flex-wrap: wrap;
}
.console-key {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--steel);
  min-width: 140px;
  flex-shrink: 0;
}
.console-val {
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.console-val--ok { color: var(--blue-mid); }
.console-val--deny { color: var(--amber); }

/* ============================================================
   SCREEN 8 — SEMANTIC CONCENTRATION
   ============================================================ */
.conc-grid-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px 4px 0 0;
  overflow: hidden;
  margin-bottom: 1px;
}
@media (max-width: 500px) { .conc-grid-main { grid-template-columns: 1fr; } }

.conc-card {
  background: var(--navy-1);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.conc-num {
  width: 28px;
  height: 28px;
  border: 1px solid var(--blue-bdr);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .6875rem;
  font-weight: 700;
  color: var(--blue-mid);
}
.conc-title { font-size: 1rem; font-weight: 700; letter-spacing: .04em; color: var(--blue-mid); }
.conc-desc { font-size: 1rem; color: var(--silver); line-height: 1.65; max-width: none; }

.conc-featured {
  background: var(--navy-2);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold-bdr);
  border-radius: 0 0 4px 4px;
  padding: 2rem 2rem;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 2rem;
}
@media (max-width: 500px) { .conc-featured { flex-direction: column; gap: 1rem; } }
.conc-featured .conc-num { border-color: var(--gold-bdr); color: var(--gold); flex-shrink: 0; }
.conc-featured .conc-title { color: var(--gold); font-size: 1.0625rem; }

/* ============================================================
   SCREEN 9 — BUYER LENS
   ============================================================ */
.paths-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 2rem;
}
@media (max-width: 700px) { .paths-grid { grid-template-columns: 1fr; } }

.path-card {
  background: var(--navy-1);
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: .875rem;
}
.path-card--acquire {
  background: rgba(216,184,93,.04);
  border-top: 2px solid var(--gold-bdr);
}
@media (max-width: 700px) {
  .path-card--acquire { border-top: none; border-left: 2px solid var(--gold-bdr); }
}
.path-num { font-size: .625rem; font-weight: 700; letter-spacing: .22em; color: var(--steel); }
.path-card--acquire .path-num { color: var(--steel); }
.path-title {
  font-family: var(--serif);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--white);
}
.path-card--acquire .path-title { color: var(--gold); }
.path-subtitle { font-size: .9375rem; color: var(--silver); }
.path-desc { font-size: .9375rem; color: var(--silver); line-height: 1.65; max-width: none; }
.path-considerations {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding-top: .75rem;
  border-top: 1px solid var(--line);
}
.path-consideration {
  display: flex;
  align-items: baseline;
  gap: .625rem;
  font-size: .9375rem;
  color: var(--muted);
  line-height: 1.5;
}
.path-consideration::before { content: '·'; flex-shrink: 0; }
.path-card--acquire .path-consideration { color: var(--silver); }
.path-card--acquire .path-consideration::before { color: var(--gold); }

.buyer-eval {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 2rem;
  margin-bottom: 2rem;
}
@media (max-width: 700px) { .buyer-eval { grid-template-columns: 1fr; } }

.buyer-eval-card { background: var(--navy-1); padding: 1.75rem 1.5rem; display: flex; flex-direction: column; gap: .625rem; }
.buyer-eval-label { font-size: .75rem; font-weight: 700; letter-spacing: .14em; color: var(--blue-mid); }
.buyer-eval-q { font-size: .9375rem; color: var(--silver); line-height: 1.6; max-width: none; }

/* ============================================================
   SCREEN 10 — DEPLOYMENT
   ============================================================ */
.deploy-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 2rem;
}
@media (max-width: 900px) { .deploy-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .deploy-grid { grid-template-columns: 1fr; } }

.deploy-card { background: var(--navy-1); padding: 1.75rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.deploy-label { font-size: 1.0625rem; font-weight: 700; letter-spacing: .04em; color: var(--blue-mid); }
.deploy-desc { font-size: 1rem; color: var(--silver); line-height: 1.6; max-width: none; }

/* ============================================================
   SCREEN 11 — BOUNDARIES
   ============================================================ */
.bounds-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 2rem;
}
@media (max-width: 600px) { .bounds-grid { grid-template-columns: 1fr; } }

.bounds-col { background: var(--navy-1); padding: 2rem 1.75rem; }
.bounds-col--does { border-left: 2px solid var(--blue-mid); }
.bounds-col--not  { border-left: 2px solid var(--line-hi); }

.bounds-col-h {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--steel);
  margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--line);
}
.bounds-col--does .bounds-col-h { color: var(--blue-mid); }

.bounds-items { display: flex; flex-direction: column; gap: .625rem; }
.bounds-item {
  display: flex;
  align-items: baseline;
  gap: .625rem;
  font-size: .9375rem;
  color: var(--silver);
  line-height: 1.55;
}
.bounds-item::before { content: '·'; flex-shrink: 0; color: var(--line-hi); }
.bounds-col--does .bounds-item::before { color: var(--blue-mid); }

/* ============================================================
   SCREEN 12 — EVALUATION
   ============================================================ */
.eval-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 2rem;
}
@media (max-width: 700px) { .eval-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .eval-cards { grid-template-columns: 1fr; } }

.eval-card { background: var(--navy-1); padding: 1.75rem 1.5rem; display: flex; flex-direction: column; gap: .625rem; }
.eval-label { font-size: 1.0625rem; font-weight: 700; letter-spacing: .04em; color: var(--blue-mid); }
.eval-desc { font-size: 1rem; color: var(--silver); line-height: 1.65; max-width: none; }

/* ============================================================
   DISCLOSURE
   ============================================================ */
.disclosure-section {
  border-top: 2px solid var(--line-hi);
  padding: 3rem 2.5rem 4rem;
  background: var(--navy-0);
}
@media (max-width: 900px) { .disclosure-section { padding: 2.5rem 1.25rem 3rem; } }
.disclosure-heading {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--silver);
  margin-bottom: 1.75rem;
  padding-bottom: .875rem;
  border-bottom: 1px solid var(--line-hi);
}
.disclosure-body { display: flex; flex-direction: column; gap: 1.5rem; max-width: 820px; }
.disclosure-body p { font-size: 1rem; color: var(--steel); line-height: 1.80; max-width: none; }

/* ============================================================
   UTILITY
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.mt1 { margin-top: 1rem; }
.mt2 { margin-top: 2rem; }
.mb1 { margin-bottom: 1rem; }
.mb2 { margin-bottom: 2rem; }

/* Back to top */
#back-top {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 500;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .10em;
  color: var(--steel);
  background: var(--navy-1);
  border: 1px solid var(--blue-bdr);
  border-radius: 3px;
  padding: .5rem 1rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur), color var(--dur), border-color var(--dur), background var(--dur);
  display: flex;
  align-items: center;
  gap: .375rem;
}
#back-top.visible { opacity: 1; pointer-events: auto; }
#back-top:hover { color: var(--white); border-color: var(--blue-bhi); background: var(--blue-bghv); }

/* Print */
@media print {
  .shell-header, .shell-rail, .shell-status, #back-top { display: none; }
  /* REVISION 2 — release the fixed-height scroll shell for print. */
  .shell { display: block; height: auto; overflow: visible; }
  .shell-main { overflow: visible; height: auto; }
  .screen { display: block; padding: 1rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   REVISION 1 — FUNCTIONALITY, ACCESSIBILITY & LEGIBILITY
   These rules appear last and win the cascade.
   ============================================================ */

/* ── LEGIBILITY FLOOR OVERRIDES ── */
/* All meaningful labels, metadata and compact text: min 0.8125rem (13px) */
.header-badge        { font-size: .8125rem; letter-spacing: .12em; }
.header-btn          { font-size: .8125rem; letter-spacing: .10em; padding: .5rem 1rem; }
.header-w1           { font-size: .8125rem; }
.header-w2           { font-size: .75rem; }
.rail-btn            { font-size: .875rem; padding: .75rem 1.25rem; min-height: 44px; }
.rail-btn-num        { font-size: .6875rem; }
.rail-util-btn       { font-size: .8125rem; letter-spacing: .10em; padding: .625rem 1rem; }
.status-label        { font-size: .6875rem; }
.legend-item         { font-size: .6875rem; }
.status-sim-notice   { font-size: .6875rem; }
.rail-section-label  { font-size: .6875rem; }
.eyebrow             { font-size: .8125rem; }

/* Buttons and interactive controls: min 0.875rem (14px) */
.btn                 { font-size: .9375rem; }
.btn--sm             { font-size: .875rem; }
.arch-view-tab       { font-size: .875rem; letter-spacing: .08em; }
.path-scenario-tab   { font-size: .9375rem; padding: .875rem 1.25rem; }
.failure-reason-btn  { font-size: .875rem; padding: .5rem 1rem; min-height: 40px; }
.si-filter-btn       { font-size: .875rem; letter-spacing: .08em; padding: .5rem 1rem; min-height: 40px; }
.machine-ex-btn      { font-size: .875rem; padding: .625rem 1.125rem; min-height: 40px; }
.machine-mode-tab    { font-size: .875rem; padding: .625rem 1rem; }
.return-ctrl         { font-size: .9375rem; padding: .75rem 1.25rem; min-height: 44px; }
#back-top            { font-size: .875rem; padding: .625rem 1.125rem; }

/* Supporting descriptions: min 0.9375rem (15px) */
.card-desc           { font-size: 1rem; }
.card-title          { font-size: 1.0625rem; }
.layer-card-desc     { font-size: .9375rem; }
.layer-card-label    { font-size: .75rem; }
.layer-card-anchor   { font-size: .9375rem; }
.arch-count          { font-size: .875rem; }
.arch-count-sub      { font-size: .875rem; }
.orient-qual         { font-size: .9375rem; }
.control-stage-q     { font-size: 1rem; }
.control-stage-exp   { font-size: .9375rem; }
.control-stage-note  { font-size: .875rem; }
.control-stage-label { font-size: .9375rem; letter-spacing: .06em; }
.path-step-name      { font-size: .875rem; }
.path-step-state     { font-size: .875rem; }
.path-step-exp       { font-size: .9375rem; }
.path-step-surface-tag { font-size: .75rem; }
.path-sim-notice     { font-size: .9375rem; }
.path-ol             { font-size: .875rem; }
.outcome-label       { font-size: .75rem; }
.outcome-chip        { font-size: .875rem; }
.path-status-banner  { font-size: .9375rem; }
.failure-reason-label{ font-size: .875rem; display: block; margin-bottom: .625rem; color: var(--steel); font-weight: 600; letter-spacing: .08em; }
.si-card-class       { font-size: .75rem; }
.si-card-layer       { font-size: .6875rem; }
.si-card-domain      { font-size: 1rem; }
.si-card-role        { font-size: .875rem; }
.si-count            { font-size: .875rem; color: var(--steel); white-space: nowrap; flex-shrink: 0; }
.si-field-label      { font-size: .6875rem; }
.si-field-value      { font-size: 1rem; }
.console-key         { font-size: .875rem; }
.console-val         { font-size: .9375rem; }
.machine-console-title { font-size: .8125rem; }
.machine-seq-name    { font-size: .9375rem; }
.deploy-label        { font-size: 1.0625rem; }
.deploy-desc         { font-size: 1rem; }
.eval-label          { font-size: 1.0625rem; }
.eval-desc           { font-size: 1rem; }
.bounds-col-h        { font-size: .875rem; }
.bounds-item         { font-size: .9375rem; }
.buyer-eval-label    { font-size: .875rem; }
.buyer-eval-q        { font-size: 1rem; }
.conc-title          { font-size: 1.0625rem; }
.conc-desc           { font-size: 1rem; }
.conc-num            { font-size: .875rem; width: 30px; height: 30px; }
.path-num            { font-size: .75rem; }
.path-title          { font-size: 1.5rem; }
.path-subtitle       { font-size: .9375rem; }
.path-desc           { font-size: .9375rem; }
.path-consideration  { font-size: .9375rem; }
.disclosure-body p   { font-size: 1rem; }
.disclosure-heading  { font-size: 1.0625rem; }
.metric-label        { font-size: .75rem; }
.metric-sub          { font-size: .8125rem; }
.callout p           { font-size: 1rem; }
.callout-label       { font-size: .75rem; }
.master-anchor-label { font-size: .75rem; }
.master-anchor-desc  { font-size: .9375rem; }
.entry-status p      { font-size: .9375rem; }
.entry-status-label  { font-size: .75rem; }
.entry-doctrine      { font-size: 1rem; }

/* Machine view detail box */
.machine-detail-box {
  background: var(--navy-1);
  border: 1px solid var(--line-hi);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  max-width: 600px;
  margin-bottom: 1.5rem;
}
.machine-detail-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .375rem .875rem;
  align-items: baseline;
}
.mdg-key { font-size: .75rem; font-weight: 700; letter-spacing: .14em; color: var(--muted); }
.mdg-val { font-size: .9375rem; color: var(--silver); }
.mdg-val--domain { font-size: 1rem; font-weight: 600; color: var(--blue-mid); word-break: break-all; }
.mdg-val--mono { font-family: var(--mono); font-size: .875rem; }

/* Machine mode tabs */
.machine-mode-tabs {
  display: flex;
  border: 1px solid var(--blue-bdr);
  border-radius: 3px;
  overflow: hidden;
  max-width: 280px;
}
.machine-mode-tab {
  flex: 1;
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--steel);
  background: var(--navy-1);
  border: none;
  border-right: 1px solid var(--blue-bdr);
  padding: .625rem 1rem;
  cursor: pointer;
  transition: background var(--dur), color var(--dur);
  text-align: center;
  min-height: 40px;
}
.machine-mode-tab:last-child { border-right: none; }
.machine-mode-tab:hover:not([aria-selected="true"]) { background: var(--navy-2); color: var(--silver); }
.machine-mode-tab[aria-selected="true"] { background: var(--blue); color: var(--white); }
.machine-mode-tab:focus-visible { outline: 2px solid var(--blue-mid); outline-offset: -2px; }

/* Failure reason bar improvements */
.failure-reason-btns {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
}

/* Layer card as native button */
button.layer-card {
  font-family: var(--sans);
  text-align: left;
  width: 100%;
  cursor: pointer;
}

/* SI filter row */
.si-filter-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.si-filters { flex: 1; flex-wrap: wrap; display: flex; gap: .5rem; }

/* Control stage gold variant */
.control-stage-label--gold { color: var(--gold); }

/* Gold text utility */
.gold-word { color: var(--gold); }
.conc-title--gold { color: var(--gold); }
.conc-num--gold { border-color: var(--gold-bdr); color: var(--gold); }
.metric-value--anchor { font-size: 1.1875rem; color: var(--gold); }
.path-title--gold { color: var(--gold); }

/* Selected state non-color indicator on tabs */
.arch-view-tab[aria-selected="true"]::after { content: ''; display: block; height: 2px; background: var(--white); margin-top: 4px; border-radius: 1px; }
.path-scenario-tab[aria-selected="true"][data-scenario="failure"] { background: var(--amber); border-color: var(--amber-bdr); }
.path-scenario-tab[aria-selected="true"][data-scenario="failure"]::after { background: var(--white); }

/* Failure reason selected state with check */
.failure-reason-btn[aria-pressed="true"]::before { content: '✓ '; }
.failure-reason-btn[aria-pressed="true"] { color: var(--white); border-color: var(--amber); background: rgba(196,123,43,.25); }

/* Machine example selected state with check */
.machine-ex-btn[aria-pressed="true"]::before { content: '● '; font-size: .625rem; }
.machine-ex-btn[aria-pressed="true"] { color: var(--white); border-color: var(--blue-bhi); background: rgba(46,111,255,.22); }

/* Arch view tab non-color selected indicator (selected = underline + fill) */
.arch-view-tab[aria-selected="true"] { background: var(--blue); color: var(--white); }

/* Surface intel card non-color focus/selected */
button.si-card[aria-pressed="true"],
button.si-card.selected {
  background: var(--navy-2);
  border-color: var(--blue-bhi);
  outline: 2px solid var(--blue-mid);
  outline-offset: -2px;
}

/* ── Ensure layer-card button inherits no unwanted UA styles ── */
button.layer-card { appearance: none; -webkit-appearance: none; }

/* ── Back to top above rail on mobile ── */
@media (max-width: 900px) {
  #back-top { right: 1rem; bottom: 1rem; }
}

/* ── Reduced motion: disable transitions but keep readable ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   NAMESPACE COVERAGE VIEW
   ============================================================ */
.nc-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}
@media(max-width:700px) { .nc-metrics { grid-template-columns: repeat(2,1fr); } }
@media(max-width:400px) { .nc-metrics { grid-template-columns: 1fr; } }

.nc-metric-cell {
  background: var(--navy-1);
  padding: 1.25rem 1.125rem;
  display: flex;
  flex-direction: column;
  gap: .375rem;
}
.nc-metric-label {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--muted);
}
.nc-metric-val {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 500;
  color: var(--white);
  line-height: 1;
}

.nc-total {
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--blue-mid);
  background: var(--blue-dim);
  border: 1px solid var(--blue-bdr);
  border-radius: 3px;
  padding: .625rem 1.125rem;
  display: inline-block;
  margin-bottom: 2rem;
}

.nc-group {
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.nc-group-header {
  background: var(--navy-2);
  padding: .875rem 1.25rem;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.nc-group-label {
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .10em;
  color: var(--blue-mid);
}
.nc-group-sub {
  font-size: .875rem;
  color: var(--steel);
}

/* Alternative/defensive relationship rows */
.nc-alt-list {
  background: var(--navy-1);
  padding: .75rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.nc-alt-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
}
.nc-alt-arrow {
  font-size: .9375rem;
  color: var(--muted);
  flex-shrink: 0;
}
.nc-chip {
  background: var(--navy-1);
  border: 1px solid var(--blue-bdr);
  border-radius: 3px;
  padding: .375rem .875rem;
  cursor: pointer;
  transition: background var(--dur), border-color var(--dur);
  display: inline-flex;
  flex-direction: column;
  gap: .125rem;
  text-align: left;
}
.nc-chip:hover { background: var(--navy-2); border-color: var(--blue-bhi); }
.nc-chip:focus-visible { outline: 2px solid var(--blue-mid); outline-offset: 3px; }
.nc-chip--alt-target { border-color: rgba(116,162,255,0.30); }

/* SI filter row wrapping — accommodate 10 buttons */
.si-filters { flex-wrap: wrap; }

/* ============================================================
   COMPLETION NOTICE & SIMULATION CONTROLS
   ============================================================ */
#path-completion-notice {
  margin: 1rem 0 1.25rem;
  border-radius: 3px;
  overflow: hidden;
}
.path-completion-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  flex-wrap: wrap;
  border: 1px solid var(--blue-bdr);
  background: var(--blue-dim);
  border-radius: 3px;
}
#path-completion-notice.completion--failure .path-completion-inner {
  border-color: var(--amber-bdr);
  background: var(--amber-dim);
}
.path-completion-text {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  flex: 1;
  min-width: 0;
}
.path-completion-title {
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--blue-mid);
}
#path-completion-notice.completion--failure .path-completion-title {
  color: var(--amber);
}
.path-completion-sub {
  font-size: .875rem;
  color: var(--silver);
  line-height: 1.5;
}
.path-completion-btn {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: .875rem;
}

/* Return to simulation controls — at bottom of completed outcome */
.path-return-sim-ctrl {
  margin-top: 2rem;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
}

/* ============================================================
   AUTHORITY ENVELOPE (DELEGATED AUTHORITY step)
   ============================================================ */
.path-authority-envelope {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem;
  margin-top: .625rem;
}
.env-chip {
  display: inline-flex;
  flex-direction: column;
  gap: .125rem;
  padding: .3rem .625rem;
  background: var(--navy-2);
  border: 1px solid var(--line-hi);
  border-radius: 3px;
  min-width: 80px;
}
.env-label {
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--muted);
  line-height: 1;
}
.env-val {
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--steel);
  line-height: 1.2;
}
.env-chip--ok .env-val { color: var(--blue-mid); }
.env-chip--bad .env-val { color: var(--amber); }
.env-chip--ok { border-color: rgba(116,162,255,0.30); }
.env-chip--bad { border-color: var(--amber-bdr); background: var(--amber-dim); }
/* AUTHORITY STATUS chip — visually prioritised, full width on its row */
.env-chip--status { flex-basis: 100%; }
.env-chip--status .env-label { letter-spacing: .20em; }
.env-chip--status .env-val { font-size: .875rem; }

/* ============================================================
   CONTINUOUS MONITORING / RUNTIME STATE RIBBON
   ============================================================ */
.path-monitor-ribbon {
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-top: .625rem;
  padding: .3rem .75rem;
  background: rgba(46,111,255,0.05);
  border: 1px solid rgba(116,162,255,0.22);
  border-left: 2px solid rgba(116,162,255,0.55);
  border-radius: 0 3px 3px 0;
  flex-wrap: wrap;
}
.monitor-label {
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.monitor-state {
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .10em;
  color: var(--blue-mid);
  white-space: nowrap;
}

/* ============================================================
   REVISION 2 — CONTROLLED ENTRY LOGO PANEL
   Placement only. The approved logo asset is used unmodified.
   ============================================================ */
.entry-masthead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
}

.entry-masthead-copy {
  flex: 1 1 380px;
  min-width: 0;
}
.entry-masthead-copy .entry-intro {
  margin-bottom: 0;
}

.entry-logo-panel {
  flex: 0 0 auto;
  align-self: flex-start;
  width: clamp(132px, 18vw, 184px);
  max-width: 100%;
  background: var(--navy-1);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1rem;
  /* Identity mark, not a control */
  cursor: default;
  user-select: none;
}

.entry-logo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  border-radius: 3px;
}

@media (max-width: 760px) {
  .entry-masthead {
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 2rem;
  }
  .entry-masthead-copy { flex: 1 1 auto; width: 100%; }
  .entry-logo-panel { width: 148px; }
}

/* ============================================================
   REVISION 3 — ABIS-37 / PRIMARY-20 COMPATIBILITY
   These rules appear last and win the cascade. Placement,
   wrapping and intrinsic-width corrections only: no change to
   the colour system, type scale, motion or visual identity.
   ============================================================ */

/* ── 1. ORIENTATION — ABIS-37 / PRIMARY-20 CANON BLOCK ──
   Classes introduced by the revised index.html. Built from the existing
   .orient-qual note module so the canon block reads as institutional
   context rather than as a promotional banner: same border language,
   same measure, gold reserved for the canonical identifier only. */
.orient-qual--canon {
  border-left-color: var(--gold-bdr);
  background: rgba(216,184,93,0.04);
  color: var(--steel);
}
.orient-canon-label {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.5;
  color: var(--gold);
  margin-bottom: .5rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid rgba(216,184,93,0.22);
}

/* ── 2. MOBILE INTRINSIC-WIDTH CORRECTION ──
   .shell is a grid; a grid item's automatic minimum is min-width:auto,
   i.e. its min-content. Two nowrap elements were larger than a phone
   viewport and propagated into the shell's 1fr track, widening
   .shell-main to 433px inside 390px and clipping the screen content:
     .status-sim-notice  "CONCEPTUAL / DETERMINISTIC — NO LIVE
                          INFRASTRUCTURE"      min-content 393px
     .btn                "REVIEW CAPABILITY
                          BOUNDARIES"          min-content 349px
   The tracks are allowed to shrink and both labels are allowed to wrap.
   Nothing is hidden and no type size is reduced. */
@media (max-width: 900px) {
  .shell > * { min-width: 0; }
  .shell-main { min-width: 0; }
}
@media (max-width: 640px) {
  .status-sim-notice {
    white-space: normal;
    margin-left: 0;
    flex-shrink: 1;
    line-height: 1.45;
  }
  .btn {
    white-space: normal;
    text-align: center;
    justify-content: center;
  }
  .action-group .btn { flex: 1 1 100%; }
}

/* ── 3. FIXED-COLUMN GRIDS — ALLOW TRACKS TO SHRINK ──
   repeat(N, 1fr) is repeat(N, minmax(auto,1fr)); a long unbreakable
   label therefore pushes the whole grid past its container. The
   Deployment grid demonstrably overflowed at 1024px once the ninth
   card (MINING & POOL INFRASTRUCTURE) was added. minmax(0,1fr) is the
   standard correction and changes nothing where content already fits. */
.orient-metrics  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.layer-cards     { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.entry-cards     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.deploy-grid     { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.eval-cards      { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.paths-grid      { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.buyer-eval      { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bounds-grid     { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.conc-grid-main  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.si-detail-body  { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Deployment now carries nine categories. Three columns divide evenly and
   give the longer labels room before the existing 900px step-down. */
@media (max-width: 1180px) { .deploy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .deploy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .deploy-grid { grid-template-columns: minmax(0, 1fr); } }

/* Re-assert the existing responsive steps after the minmax rules above. */
@media (max-width: 768px) { .orient-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 400px) { .orient-metrics { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 700px) { .layer-cards { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 600px) { .entry-cards { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 700px) { .eval-cards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 480px) { .eval-cards { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 700px) { .paths-grid, .buyer-eval { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 600px) { .bounds-grid { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 500px) { .conc-grid-main { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 700px) { .si-detail-body { grid-template-columns: minmax(0,1fr); } }

/* ── 4. NAMESPACE COVERAGE — FIVE METRIC CELLS ──
   The coverage metrics row was built for four cells under the superseded
   inventory. ABIS-37 presents five, so the fifth sat alone on a second
   row beside three empty tracks. auto-fit lets the row carry all five
   where they fit and reflow evenly where they do not. */
.nc-metrics { grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); }
@media (max-width: 700px) { .nc-metrics { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 400px) { .nc-metrics { grid-template-columns: minmax(0,1fr); } }

/* The Primary-20 cell carries its own composition, so its label runs
   longer than the others. Keep it legible rather than letting it set the
   row height for every cell. */
.nc-metric-cell { justify-content: space-between; }
.nc-metric-label { line-height: 1.45; }

/* Strategic Infrastructure Companion belongs to the coverage vocabulary,
   not to Primary-20: steel label, no gold, no promotional treatment. */
.nc-group-sub { color: var(--muted); }

/* ── 5. SURFACE INTELLIGENCE — ELEVEN FILTERS ──
   The filter set grew from ten to eleven. The row already wraps; this
   keeps the wrapped rows separated and the count aligned with them. */
.si-filters { gap: .5rem .5rem; align-items: stretch; }
.si-filter-btn { line-height: 1.3; }
.si-filter-row { align-items: center; row-gap: .75rem; }

/* Selected state carries a non-colour indicator, as the other selected
   states in this stylesheet already do. */
.si-filter-btn[aria-pressed="true"]::before { content: '✓ '; }
.si-filter-btn[aria-pressed="true"] {
  color: var(--white);
  border-color: var(--blue-bhi);
  background: rgba(46,111,255,.22);
}

/* ── 6. CONTROLLED ENTRY LOGO — HOLD IT SECONDARY ON SMALL SCREENS ──
   At 390px the panel was 38% of the viewport. The mark stays an identity
   element beside the title rather than a hero image. */
@media (max-width: 760px) { .entry-logo-panel { width: clamp(104px, 30vw, 132px); } }
@media (max-width: 420px) { .entry-logo-panel { width: 104px; padding: .75rem; } }