/*
 * AAO Portfolio — Premium Usability Layer v13
 * ------------------------------------------------------------
 * Purpose: solve the v12 usability problems without adding a runtime dependency.
 * This file intentionally loads AFTER styles.css and premium-v12.css so the v13
 * theme, navigation, architecture, card-grid and deck rules are authoritative.
 *
 * Safe edits:
 * - Theme colors: edit only the variables in the two html[data-theme] blocks.
 * - Dynamic Island size/position: edit the .dynamic-island block.
 * - Hero deck spacing: edit --deck-step in .governance-stage.
 * - Grid density: edit the minmax() values in the responsive track rules.
 */

:root {
  --v13-radius-sm: 14px;
  --v13-radius-md: 22px;
  --v13-radius-lg: 34px;
  --v13-green: #16c995;
  --v13-green-bright: #5cf0c1;
  --v13-cyan: #71ddf3;
  --v13-ease: cubic-bezier(.16,1,.3,1);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f8f5;
  --bg2: #eef3ef;
  --surface: rgba(255,255,255,.88);
  --surface2: #ffffff;
  --text: #0d1714;
  --muted: #43554f;
  --faint: #71807b;
  --border: rgba(13,23,20,.12);
  --accent: #11966f;
  --accent2: #25c997;
  --cyan: #1599b5;
  --gold: #b48738;
  --lux-panel: rgba(255,255,255,.90);
  --lux-panel-solid: #ffffff;
  --lux-line: rgba(13,23,20,.12);
  --lux-soft-line: rgba(13,23,20,.07);
  --lux-card: rgba(255,255,255,.96);
  --lux-card-2: #f8fbf8;
  --lux-copy: #0d1714;
  --lux-copy-soft: #43554f;
  --lux-copy-faint: #71807b;
  --v13-shell: #ffffff;
  --v13-shell-soft: #f5f8f5;
  --v13-ink: #0d1714;
  --v13-copy: #43554f;
  --v13-faint: #71807b;
  --v13-line: rgba(13,23,20,.12);
  --v13-line-soft: rgba(13,23,20,.07);
  --v13-glass: rgba(255,255,255,.88);
  --v13-shadow: 0 26px 78px rgba(24,39,33,.11), 0 4px 16px rgba(24,39,33,.05);
  --v13-glow: rgba(22,201,149,.17);
  --v13-grid: rgba(13,23,20,.055);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #050908;
  --bg2: #07100d;
  --surface: rgba(8,14,12,.92);
  --surface2: #09110f;
  --text: #f3f8f6;
  --muted: #b6c7c1;
  --faint: #7f938b;
  --border: rgba(233,255,247,.13);
  --accent: #37d9a8;
  --accent2: #5cf0c1;
  --cyan: #71ddf3;
  --gold: #d5ab58;
  --lux-panel: rgba(7,13,11,.94);
  --lux-panel-solid: #070d0b;
  --lux-line: rgba(233,255,247,.13);
  --lux-soft-line: rgba(233,255,247,.075);
  --lux-card: rgba(10,18,15,.96);
  --lux-card-2: #09110f;
  --lux-copy: #f3f8f6;
  --lux-copy-soft: #b6c7c1;
  --lux-copy-faint: #7f938b;
  --v13-shell: #070d0b;
  --v13-shell-soft: #0a1310;
  --v13-ink: #f3f8f6;
  --v13-copy: #b6c7c1;
  --v13-faint: #7f938b;
  --v13-line: rgba(233,255,247,.13);
  --v13-line-soft: rgba(233,255,247,.075);
  --v13-glass: rgba(7,13,11,.91);
  --v13-shadow: 0 30px 92px rgba(0,0,0,.44), inset 0 1px rgba(255,255,255,.025);
  --v13-glow: rgba(55,217,168,.19);
  --v13-grid: rgba(225,255,245,.055);
}

html, body { background: var(--bg) !important; color: var(--text); }
body {
  background:
    radial-gradient(900px 620px at 8% 3%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 64%),
    radial-gradient(760px 560px at 92% 10%, color-mix(in srgb, var(--cyan) 6%, transparent), transparent 66%),
    linear-gradient(180deg, var(--bg), var(--bg2) 54%, var(--bg)) !important;
}
body::before {
  opacity: .34;
  background-image: linear-gradient(var(--v13-grid) 1px, transparent 1px), linear-gradient(90deg,var(--v13-grid) 1px,transparent 1px);
  background-size: 54px 54px;
}

/* Strict theme consistency: no inverted white/black islands inside the opposite theme. */
.executive-nav,
.portfolio-snapshot,
.operating-shell,
.value-card,.project-card,.skill-card,.framework-card,.panel,
.contact-shell,.social-showcase,.availability-rail,.evidence-shortcuts a {
  color: var(--v13-ink) !important;
}

html[data-theme="light"] .executive-nav,
html[data-theme="light"] .portfolio-snapshot,
html[data-theme="light"] .operating-shell,
html[data-theme="light"] .value-card,
html[data-theme="light"] .project-card,
html[data-theme="light"] .skill-card,
html[data-theme="light"] .framework-card,
html[data-theme="light"] .panel,
html[data-theme="light"] .contact-shell,
html[data-theme="light"] .social-showcase {
  background-color: var(--v13-shell) !important;
}
html[data-theme="dark"] .executive-nav,
html[data-theme="dark"] .portfolio-snapshot,
html[data-theme="dark"] .operating-shell,
html[data-theme="dark"] .value-card,
html[data-theme="dark"] .project-card,
html[data-theme="dark"] .skill-card,
html[data-theme="dark"] .framework-card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .contact-shell,
html[data-theme="dark"] .social-showcase {
  background-color: var(--v13-shell) !important;
}

/* Navigation and buttons */
.executive-nav {
  background: color-mix(in srgb,var(--v13-shell) 94%,transparent) !important;
  border-color: var(--v13-line) !important;
  box-shadow: 0 12px 42px color-mix(in srgb,var(--text) 10%,transparent) !important;
}
.executive-nav::before { opacity: .35; }
html[data-theme="light"] .brand-premium strong {
  background: linear-gradient(145deg,#ecfff8,#c8f6e6) !important;
  color: #0b2019 !important;
  border: 1px solid rgba(17,150,111,.18);
  box-shadow: inset 0 1px #fff, 0 9px 24px rgba(14,93,69,.11);
}
html[data-theme="dark"] .brand-premium strong {
  background: linear-gradient(145deg,#0d1a16,#07100d) !important;
  color: #71eac0 !important;
  border: 1px solid rgba(92,240,193,.18);
  box-shadow: inset 0 1px rgba(255,255,255,.04),0 10px 28px rgba(0,0,0,.3);
}
.secondary,.theme-toggle {
  color: var(--v13-ink) !important;
  background: var(--v13-glass) !important;
  border-color: var(--v13-line) !important;
}
html[data-theme="light"] .cta,
html[data-theme="light"] .primary {
  background: linear-gradient(135deg,#d9fff0,#81ebc4 55%,#5ddcb1) !important;
  border-color: rgba(17,150,111,.28) !important;
  color: #071611 !important;
  box-shadow: inset 0 1px rgba(255,255,255,.72),0 14px 34px rgba(16,128,94,.15) !important;
}
html[data-theme="dark"] .cta,
html[data-theme="dark"] .primary {
  background: linear-gradient(135deg,#103a2d,#0c7252 56%,#159b70) !important;
  border-color: rgba(92,240,193,.28) !important;
  color: #f4fffa !important;
  box-shadow: inset 0 1px rgba(255,255,255,.08),0 16px 42px rgba(0,0,0,.34),0 0 30px rgba(55,217,168,.08) !important;
}

/* ------------------------------------------------------------------
   Dynamic Island v13 — compact navigator, opens upward, never overlaps nav.
   ------------------------------------------------------------------ */
.dynamic-island {
  display: flex !important;
  position: fixed !important;
  z-index: 160 !important;
  left: 50% !important;
  top: auto !important;
  bottom: 20px !important;
  width: min(360px,calc(100vw - 28px));
  max-width: none !important;
  min-height: 54px;
  padding: 5px !important;
  border: 1px solid var(--v13-line) !important;
  border-radius: 999px !important;
  background: color-mix(in srgb,var(--v13-glass) 96%,transparent) !important;
  color: var(--v13-ink) !important;
  box-shadow: 0 18px 56px color-mix(in srgb,#000 22%,transparent), inset 0 1px rgba(255,255,255,.12) !important;
  backdrop-filter: blur(24px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(145%) !important;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%,18px) scale(.975) !important;
  transition: opacity .2s ease, transform .34s var(--v13-ease), box-shadow .25s ease !important;
  overflow: visible !important;
  align-items: center !important;
}
.dynamic-island.is-visible:not(.is-suppressed) {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translate(-50%,0) scale(1) !important;
}
.dynamic-island.is-open {
  border-radius: 24px !important;
  box-shadow: 0 26px 74px color-mix(in srgb,#000 28%,transparent), 0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent) inset !important;
}
.island-core {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 44px;
  display: grid !important;
  grid-template-columns: 12px minmax(0,1fr) auto;
  align-items: center;
  gap: .7rem !important;
  border: 0 !important;
  border-radius: 999px;
  padding: .58rem .72rem !important;
  background: transparent !important;
  color: inherit !important;
  cursor: pointer;
  text-align: left;
}
.island-core > i {
  width: 9px !important;
  height: 9px !important;
  border-radius: 50%;
  background: var(--accent) !important;
  box-shadow: 0 0 0 5px color-mix(in srgb,var(--accent) 10%,transparent),0 0 20px color-mix(in srgb,var(--accent) 64%,transparent) !important;
}
.island-core > span {
  display: block;
  min-width: 0;
  max-width: none !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--v13-ink) !important;
  font: 760 .79rem/1.1 var(--body-font) !important;
  letter-spacing: -.015em;
}
.island-chevron {
  width: 28px !important;
  height: 28px !important;
  display: grid !important;
  place-items: center;
  border: 1px solid var(--v13-line);
  border-radius: 50%;
  background: color-mix(in srgb,var(--v13-shell-soft) 90%,transparent) !important;
  color: var(--v13-faint) !important;
  font-size: 1rem;
  transition: transform .28s var(--v13-ease);
}
.dynamic-island.is-open .island-chevron { transform: rotate(180deg); }
.island-panel {
  display: grid !important;
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  width: min(640px,calc(100vw - 28px));
  padding: 10px !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: 8px !important;
  border: 1px solid var(--v13-line) !important;
  border-radius: 24px;
  background: color-mix(in srgb,var(--v13-glass) 98%,transparent) !important;
  box-shadow: var(--v13-shadow);
  backdrop-filter: blur(26px) saturate(145%);
  -webkit-backdrop-filter: blur(26px) saturate(145%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%,10px) scale(.985);
  transform-origin: 50% 100%;
  transition: opacity .18s ease,transform .28s var(--v13-ease),visibility 0s linear .28s;
}
.dynamic-island.is-open .island-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%,0) scale(1);
  transition-delay: 0s;
}
.island-panel a {
  min-height: 64px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .55rem;
  padding: .72rem .76rem !important;
  border: 1px solid var(--v13-line-soft) !important;
  border-radius: 16px !important;
  background: color-mix(in srgb,var(--v13-shell-soft) 82%,transparent) !important;
  color: var(--v13-copy) !important;
  text-decoration: none;
  text-align: left !important;
  font: 680 .73rem/1.15 var(--body-font) !important;
  transition: transform .2s var(--v13-ease),border-color .2s ease,background .2s ease,color .2s ease;
}
.island-panel a small { color: var(--v13-faint); font-size: .58rem; letter-spacing: .08em; }
.island-panel a strong { color: inherit; font-size: .76rem; }
.island-panel a:hover,
.island-panel a:focus-visible,
.island-panel a[aria-current="true"] {
  color: var(--v13-ink) !important;
  border-color: color-mix(in srgb,var(--accent) 36%,var(--v13-line)) !important;
  background: color-mix(in srgb,var(--accent) 9%,var(--v13-shell)) !important;
  transform: translateY(-2px);
  outline: none;
}

/* ------------------------------------------------------------------
   Hero governance deck v13 — selectable by cursor, click, arrows, dots, keyboard,
   and horizontal swipe. Selection stays visible instead of being a decorative stack.
   ------------------------------------------------------------------ */
.portfolio-snapshot {
  background:
    radial-gradient(500px 380px at 50% 35%,color-mix(in srgb,var(--accent) 13%,transparent),transparent 64%),
    linear-gradient(155deg,var(--v13-shell),var(--v13-shell-soft)) !important;
  border-color: var(--v13-line) !important;
  box-shadow: var(--v13-shadow) !important;
}
.snapshot-head { border-color: var(--v13-line) !important; }
.snapshot-head > span { color: var(--v13-copy) !important; }
.snapshot-head b {
  background: color-mix(in srgb,var(--accent) 7%,var(--v13-shell)) !important;
  color: color-mix(in srgb,var(--accent) 74%,var(--v13-ink)) !important;
  border-color: color-mix(in srgb,var(--accent) 30%,var(--v13-line)) !important;
}
.governance-stage {
  --stage-rx: -4deg;
  --stage-ry: 7deg;
  --deck-step: 58px;
  height: 345px !important;
  margin: .3rem 0 .7rem !important;
  outline: none;
  touch-action: pan-y;
}
.governance-deck {
  inset: 22px 6px 46px !important;
  transform: rotateX(var(--stage-rx)) rotateY(var(--stage-ry)) !important;
  transition: transform .3s var(--v13-ease) !important;
}
.governance-card {
  --gx: 0px;
  --gy: 0px;
  --gz: 0px;
  --grot: 0deg;
  --gscale: 1;
  --gopacity: 1;
  appearance: none;
  display: block;
  position: absolute !important;
  left: 50% !important;
  top: 48% !important;
  width: min(234px,58vw) !important;
  height: 148px !important;
  margin: -74px 0 0 -117px !important;
  padding: 1rem !important;
  text-align: left;
  cursor: pointer !important;
  opacity: var(--gopacity) !important;
  transform: translate3d(var(--gx),var(--gy),var(--gz)) rotateY(var(--grot)) scale(var(--gscale)) !important;
  transition: transform .52s var(--v13-ease),opacity .34s ease,filter .34s ease,background .28s ease,border-color .28s ease !important;
  z-index: var(--g-z,1);
  color: var(--v13-ink) !important;
  background: color-mix(in srgb,var(--v13-shell) 90%,transparent) !important;
  border: 1px solid var(--v13-line) !important;
  box-shadow: 0 18px 46px color-mix(in srgb,#000 12%,transparent),inset 0 1px rgba(255,255,255,.12) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
html[data-theme="dark"] .governance-card {
  background: linear-gradient(145deg,rgba(14,27,22,.93),rgba(8,15,13,.93)) !important;
  box-shadow: 0 22px 56px rgba(0,0,0,.32),inset 0 1px rgba(255,255,255,.035) !important;
}
.governance-card.is-focus {
  background: linear-gradient(145deg,color-mix(in srgb,var(--accent) 18%,var(--v13-shell)),color-mix(in srgb,var(--accent) 7%,var(--v13-shell-soft))) !important;
  color: var(--v13-ink) !important;
  border-color: color-mix(in srgb,var(--accent) 54%,var(--v13-line)) !important;
  box-shadow: 0 28px 66px color-mix(in srgb,var(--accent) 18%,transparent),0 0 0 1px color-mix(in srgb,var(--accent) 8%,transparent) inset !important;
}
.governance-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.governance-card small { color: var(--v13-faint); opacity: 1 !important; }
.governance-card strong { color: var(--v13-ink); }
.governance-card span { color: var(--v13-copy); opacity: 1 !important; }
.governance-card::after { background: linear-gradient(90deg,var(--accent),transparent) !important; }
.stage-orbit { border-color: color-mix(in srgb,var(--accent) 25%,transparent) !important; opacity: .75; }
.stage-controls {
  position: absolute;
  z-index: 30;
  left: 50%;
  bottom: 2px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 7px;
  border: 1px solid var(--v13-line);
  border-radius: 999px;
  background: color-mix(in srgb,var(--v13-glass) 94%,transparent);
  box-shadow: 0 10px 28px color-mix(in srgb,#000 12%,transparent);
  backdrop-filter: blur(16px);
}
.stage-arrow {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--v13-line);
  border-radius: 50%;
  background: var(--v13-shell);
  color: var(--v13-ink);
  cursor: pointer;
  transition: transform .2s var(--v13-ease),border-color .2s ease;
}
.stage-arrow:hover,.stage-arrow:focus-visible { transform: scale(1.06); border-color: color-mix(in srgb,var(--accent) 45%,var(--v13-line)); outline: none; }
.stage-dots { display: flex; align-items: center; gap: 5px; }
.stage-dot {
  width: 18px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb,var(--v13-faint) 35%,transparent);
  cursor: pointer;
  transition: width .25s var(--v13-ease),background .2s ease;
}
.stage-dot.active { width: 34px; background: var(--accent); }
.stage-dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.stage-readout {
  position: absolute;
  z-index: 25;
  top: 18px;
  right: 10px;
  padding: .48rem .65rem;
  border: 1px solid var(--v13-line);
  border-radius: 999px;
  background: color-mix(in srgb,var(--v13-glass) 92%,transparent);
  color: var(--v13-copy);
  font-size: .65rem;
  font-weight: 760;
  letter-spacing: .03em;
}
.snapshot-metrics article,.snapshot-model {
  background: var(--v13-shell) !important;
  border-color: var(--v13-line) !important;
  color: var(--v13-ink) !important;
}
.snapshot-metrics span,.snapshot-metrics p,.snapshot-model p { color: var(--v13-copy) !important; }

/* Operating model: pointer-driven on fine pointers, explicit controls everywhere else. */
.operating-shell {
  background: radial-gradient(540px 220px at var(--flow-x,12%) 50%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 65%),var(--v13-shell) !important;
  border-color: var(--v13-line) !important;
  box-shadow: var(--v13-shadow) !important;
}
.flow-node {
  color: var(--v13-copy) !important;
  background: var(--v13-shell-soft) !important;
  border-color: var(--v13-line) !important;
  cursor: pointer !important;
}
.flow-node.active {
  color: var(--v13-ink) !important;
  background: color-mix(in srgb,var(--accent) 10%,var(--v13-shell)) !important;
  border-color: color-mix(in srgb,var(--accent) 42%,var(--v13-line)) !important;
}
.flow-detail {
  background: color-mix(in srgb,var(--accent) 5%,var(--v13-shell-soft)) !important;
  color: var(--v13-copy) !important;
  border-color: var(--v13-line-soft) !important;
}

/* ------------------------------------------------------------------
   Architecture: light stays light, dark stays dark. No forced dark section.
   ------------------------------------------------------------------ */
#architecture {
  color: var(--v13-ink) !important;
  background:
    radial-gradient(760px 560px at 7% 8%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 64%),
    linear-gradient(150deg,var(--v13-shell),var(--v13-shell-soft)) !important;
  border: 1px solid var(--v13-line) !important;
  box-shadow: var(--v13-shadow) !important;
}
#architecture::after {
  background-image: radial-gradient(var(--v13-grid) .75px,transparent .75px) !important;
  opacity: .8;
}
#architecture .section-title span { color: color-mix(in srgb,var(--accent) 72%,var(--v13-ink)) !important; }
#architecture .section-title h2 { color: var(--v13-ink) !important; }
#architecture .section-title p { color: var(--v13-copy) !important; }
.flagship-grid {
  border-color: var(--v13-line) !important;
  background: var(--v13-shell) !important;
  box-shadow: 0 20px 58px color-mix(in srgb,#000 12%,transparent) !important;
}
.flag-tabs {
  border-right-color: var(--v13-line) !important;
  background: var(--v13-shell-soft) !important;
}
.flag-tabs::before { color: var(--v13-faint) !important; }
.flag-tabs button {
  color: var(--v13-copy) !important;
  background: transparent !important;
  border-color: transparent !important;
}
.flag-tabs button span { color: var(--v13-faint) !important; }
.flag-tabs button.active {
  color: var(--v13-ink) !important;
  background: color-mix(in srgb,var(--accent) 9%,var(--v13-shell)) !important;
  border-color: color-mix(in srgb,var(--accent) 36%,var(--v13-line)) !important;
  box-shadow: 0 12px 34px color-mix(in srgb,#000 10%,transparent),0 0 28px color-mix(in srgb,var(--accent) 6%,transparent) inset !important;
}
.flag-panel {
  color: var(--v13-copy) !important;
  background: radial-gradient(480px 420px at 96% 4%,color-mix(in srgb,var(--accent) 6%,transparent),transparent 70%),transparent !important;
}
.flag-panel > small { color: color-mix(in srgb,var(--accent) 72%,var(--v13-ink)) !important; }
.flag-panel h3 { color: var(--v13-ink) !important; }
.flag-panel > p { color: var(--v13-copy) !important; }
.mini-metrics {
  border-color: var(--v13-line) !important;
  background: var(--v13-shell-soft) !important;
}
.mini-metrics b,.mini-metrics b + b { border-color: var(--v13-line) !important; background: transparent !important; }
#architecture .mini-metrics b span,.mini-metrics span { color: var(--v13-ink) !important; }
#architecture .mini-metrics b small,.mini-metrics small { color: var(--v13-faint) !important; }
.table-wrap {
  width: 100%;
  max-height: 460px;
  overflow: auto !important;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  border: 1px solid var(--v13-line) !important;
  border-radius: 18px;
  background: var(--v13-shell) !important;
  outline: none;
}
.table-wrap:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }
#architecture table { min-width: 760px; color: var(--v13-copy) !important; }
#architecture thead { position: sticky; top: 0; z-index: 3; }
#architecture th {
  color: var(--v13-faint) !important;
  background: color-mix(in srgb,var(--v13-shell-soft) 96%,transparent) !important;
  border-color: var(--v13-line) !important;
}
#architecture td { color: var(--v13-copy) !important; border-color: var(--v13-line-soft) !important; }
#architecture td:first-child { color: var(--v13-ink) !important; }

#architecture .heatmap-panel,
#architecture .domain-panel {
  color: var(--v13-ink) !important;
  background: var(--v13-shell) !important;
  border: 1px solid var(--v13-line) !important;
  box-shadow: 0 18px 54px color-mix(in srgb,#000 10%,transparent) !important;
}
#architecture .panel-head { color: var(--v13-ink) !important; }
#architecture .panel-head small { color: var(--v13-faint) !important; }
.heatmap {
  border-color: var(--v13-line) !important;
  background:
    linear-gradient(var(--v13-grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--v13-grid) 1px,transparent 1px),
    radial-gradient(430px 360px at var(--heat-x,50%) var(--heat-y,50%),color-mix(in srgb,var(--accent) 9%,transparent),transparent 68%),
    linear-gradient(140deg,color-mix(in srgb,var(--accent) 3%,var(--v13-shell)),var(--v13-shell)) !important;
  background-size: 25% 25%,25% 25%,auto,auto !important;
}
.heatmap::after,.heatmap::before { background: linear-gradient(90deg,color-mix(in srgb,var(--accent) 42%,transparent),var(--v13-line)) !important; }
.heatmap::before { background: linear-gradient(0deg,color-mix(in srgb,var(--accent) 42%,transparent),var(--v13-line)) !important; }
.heatmap .axis { color: var(--v13-faint) !important; }
.heat-node {
  color: var(--v13-ink) !important;
  background: var(--v13-shell) !important;
  border-color: color-mix(in srgb,var(--accent) 27%,var(--v13-line)) !important;
  box-shadow: 0 11px 30px color-mix(in srgb,#000 13%,transparent),0 0 0 5px color-mix(in srgb,var(--accent) 3%,transparent) !important;
}
.heat-node:hover,.heat-node.active,.heat-node:focus-visible {
  background: color-mix(in srgb,var(--accent) 10%,var(--v13-shell)) !important;
  border-color: color-mix(in srgb,var(--accent) 68%,var(--v13-line)) !important;
  box-shadow: 0 18px 44px color-mix(in srgb,#000 16%,transparent),0 0 38px color-mix(in srgb,var(--accent) 16%,transparent) !important;
}
.heat-detail {
  color: var(--v13-copy) !important;
  background: color-mix(in srgb,var(--accent) 5%,var(--v13-shell-soft)) !important;
  border-color: var(--v13-line) !important;
}

/* Domain mix: semantic bars replace the mixed-theme donut. */
.domain-panel { border-radius: 28px; }
.domain-mix { display: grid; gap: 1.05rem; margin-top: 1.5rem; }
.domain-row {
  display: grid;
  grid-template-columns: minmax(150px,1fr) minmax(120px,1.5fr) 42px;
  gap: 1rem;
  align-items: center;
  padding: .9rem 0;
  border-bottom: 1px solid var(--v13-line-soft);
}
.domain-row:last-child { border-bottom: 0; }
.domain-row strong { color: var(--v13-ink); font-size: .86rem; }
.domain-row small { display:block; margin-top:.2rem; color:var(--v13-faint); font-size:.68rem; }
.domain-track { height: 10px; border-radius: 999px; background: color-mix(in srgb,var(--v13-faint) 12%,transparent); overflow: hidden; }
.domain-track i { display:block; width:var(--mix); height:100%; border-radius:inherit; background: linear-gradient(90deg,var(--mix-start,var(--accent)),var(--mix-end,var(--accent2))); box-shadow:0 0 18px color-mix(in srgb,var(--accent) 16%,transparent); }
.domain-row > b { color: var(--v13-ink); text-align:right; font-size:1.12rem; }
.domain-summary {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:1rem;
}
.domain-summary article { padding:1rem; border:1px solid var(--v13-line); border-radius:16px; background:var(--v13-shell-soft); }
.domain-summary b { display:block; font-size:1.55rem; color:var(--v13-ink); }
.domain-summary span { color:var(--v13-faint); font-size:.72rem; }

/* ------------------------------------------------------------------
   Replace scroll/swipe-only decks with responsive grids.
   ------------------------------------------------------------------ */
#systems .track,
#capabilities .track,
#frameworks .track {
  display: grid !important;
  grid-auto-flow: row !important;
  grid-auto-columns: unset !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 16px !important;
  overflow: visible !important;
  padding: 12px 8px 22px !important;
  scroll-snap-type: none !important;
}
#capabilities .track { grid-template-columns: repeat(4,minmax(0,1fr)) !important; }
.project-card,.skill-card,.framework-card {
  min-width: 0 !important;
  min-height: 250px;
  background: linear-gradient(155deg,var(--v13-shell),var(--v13-shell-soft)) !important;
  border-color: var(--v13-line) !important;
  box-shadow: 0 16px 44px color-mix(in srgb,#000 8%,transparent) !important;
}
.project-card::before,.project-card::after,.framework-card::before,.framework-card::after {
  background: var(--v13-shell-soft) !important;
  border-color: var(--v13-line-soft) !important;
}
.track-hint { display: none !important; }

/* Footer: Back to Top is centered and visually separate from contact details. */
.footer-backtop {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.2rem;
  margin: 2.7rem 0 .8rem;
}
.footer-backtop::before,.footer-backtop::after { content:""; height:1px; background:linear-gradient(90deg,transparent,var(--v13-line)); }
.footer-backtop::after { background:linear-gradient(90deg,var(--v13-line),transparent); }
.footer-backtop .to-top {
  margin: 0 !important;
  min-width: 150px;
  background: var(--v13-shell) !important;
  color: var(--v13-ink) !important;
  border-color: var(--v13-line) !important;
  box-shadow: 0 12px 34px color-mix(in srgb,#000 8%,transparent) !important;
}
.footer-backtop .to-top:hover { border-color:color-mix(in srgb,var(--accent) 38%,var(--v13-line)) !important; }
.footer-bottom { margin-top: 1.25rem !important; }

/* Focus visibility and touch targets. */
button:focus-visible,a:focus-visible { outline: 2px solid color-mix(in srgb,var(--accent) 80%,var(--v13-ink)); outline-offset: 3px; }
.filter-row button,.flag-tabs button,.theme-toggle,.to-top { min-height: 42px; }

@media (max-width: 1180px) {
  #capabilities .track { grid-template-columns: repeat(3,minmax(0,1fr)) !important; }
}
@media (max-width: 940px) {
  #systems .track,#frameworks .track,#capabilities .track { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .flagship-grid { grid-template-columns: 1fr !important; }
  .flag-tabs {
    display: grid !important;
    grid-template-columns: repeat(3,minmax(0,1fr));
    border-right: 0 !important;
    border-bottom: 1px solid var(--v13-line);
  }
  .flag-tabs::before { grid-column: 1/-1; }
  .flag-tabs button { min-height: 64px; grid-template-columns: 28px 1fr auto; }
}
@media (max-width: 720px) {
  .dynamic-island { bottom: 12px !important; width: min(360px,calc(100vw - 20px)); }
  .island-panel { width: calc(100vw - 20px); grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
  .governance-stage { height: 318px !important; }
  .stage-readout { top: 10px; right: 2px; }
  .stage-dots { gap: 4px; }
  .stage-dot { width: 12px; }
  .stage-dot.active { width: 26px; }
  #architecture { padding: 1.25rem !important; border-radius: 28px !important; }
  .flag-tabs { grid-template-columns: 1fr !important; }
  .flag-tabs::before { grid-column:auto; }
  .flag-tabs button { min-height: 58px; }
  .flag-panel { min-height: 0 !important; padding: 1.15rem !important; }
  .table-wrap { max-height: 400px; }
  #architecture table { min-width: 680px; }
  .heatmap { min-height: 540px !important; padding: 24px !important; }
  .domain-row { grid-template-columns: 1fr 42px; gap:.65rem; }
  .domain-track { grid-column: 1/-1; grid-row: 2; }
  .domain-summary { grid-template-columns:1fr; }
  #systems .track,#frameworks .track,#capabilities .track { grid-template-columns: 1fr !important; padding-inline: 0 !important; }
  .project-card,.framework-card,.skill-card { min-height: 0 !important; }
  .footer-backtop { gap: .75rem; }
}
@media (max-width: 460px) {
  .island-panel a { min-height: 58px; }
  .stage-controls { gap: 5px; }
  .stage-arrow { width: 32px; height: 32px; }
  .stage-dot:nth-child(even) { display:none; }
  .governance-card { width: min(220px,62vw) !important; margin-left: -110px !important; }
}
@media (hover:none) {
  .project-card:hover,.framework-card:hover { transform:none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .dynamic-island,.island-panel,.governance-card,.governance-deck,.stage-dot { transition: none !important; }
  .stage-orbit::before,.heat-node.active::after { animation: none !important; }
}

/* v13 specificity guard: v12 ended with hard-coded dark table corrections. These
   selectors intentionally match/exceed that specificity so Light Theme cannot
   inherit dark-section text colors. */
#architecture table td { color: var(--v13-copy) !important; }
#architecture table td:first-child { color: var(--v13-ink) !important; font-weight: 750; }
#architecture table th { color: var(--v13-faint) !important; background: color-mix(in srgb,var(--v13-shell-soft) 96%,transparent) !important; }

/* ------------------------------------------------------------------
   v13.1 strict theme guardrails
   The previous layer contained a few deliberate cross-theme surfaces. These
   literal theme rules are intentionally last so light stays light and dark
   stays dark even when older high-specificity selectors are present.
   ------------------------------------------------------------------ */
html[data-theme="light"] .theme-toggle {
  background: #ffffff !important;
  color: #0d1714 !important;
  border-color: rgba(13,23,20,.14) !important;
  box-shadow: 0 10px 28px rgba(16,40,32,.08) !important;
}
html[data-theme="dark"] .theme-toggle {
  background: #0b1412 !important;
  color: #edf8f4 !important;
  border-color: rgba(196,236,221,.14) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.30) !important;
}

html[data-theme="light"] #architecture .heat-node {
  appearance: none;
  -webkit-appearance: none;
  background: #fbfdfb !important;
  color: #0d1714 !important;
  border-color: rgba(18,174,124,.22) !important;
  box-shadow: 0 11px 30px rgba(17,59,44,.08), 0 0 0 5px rgba(18,174,124,.025) !important;
}
html[data-theme="light"] #architecture .heat-node:hover,
html[data-theme="light"] #architecture .heat-node.active,
html[data-theme="light"] #architecture .heat-node:focus-visible {
  background: #e7fff5 !important;
  color: #08130f !important;
  border-color: rgba(18,174,124,.58) !important;
  box-shadow: 0 18px 44px rgba(17,59,44,.12), 0 0 36px rgba(18,174,124,.13) !important;
}

html[data-theme="dark"] #architecture .heat-node {
  appearance: none;
  -webkit-appearance: none;
  background: #0b1512 !important;
  color: #eaf7f2 !important;
  border-color: rgba(92,240,193,.22) !important;
  box-shadow: 0 11px 30px rgba(0,0,0,.32), 0 0 0 5px rgba(92,240,193,.025) !important;
}
html[data-theme="dark"] #architecture .heat-node:hover,
html[data-theme="dark"] #architecture .heat-node.active,
html[data-theme="dark"] #architecture .heat-node:focus-visible {
  background: #113126 !important;
  color: #f4fffa !important;
  border-color: rgba(92,240,193,.64) !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.40), 0 0 38px rgba(92,240,193,.15) !important;
}

html[data-theme="light"] #architecture .heat-detail,
html[data-theme="light"] #architecture .domain-panel,
html[data-theme="light"] #architecture .heat-panel,
html[data-theme="light"] #architecture .panel,
html[data-theme="light"] #architecture .metric,
html[data-theme="light"] #architecture .table-wrap {
  background-color: #ffffff !important;
  color: #0d1714 !important;
}
html[data-theme="dark"] #architecture .heat-detail,
html[data-theme="dark"] #architecture .domain-panel,
html[data-theme="dark"] #architecture .heat-panel,
html[data-theme="dark"] #architecture .panel,
html[data-theme="dark"] #architecture .metric,
html[data-theme="dark"] #architecture .table-wrap {
  background-color: #08100e !important;
  color: #eaf7f2 !important;
}

/* Surface theme changes are immediate. Motion remains on geometry/shadows only,
   preventing a half-light/half-dark state during theme switching. */
html[data-theme] .theme-toggle,
html[data-theme] #architecture .heat-node,
html[data-theme] #architecture .heat-detail,
html[data-theme] #architecture .domain-panel,
html[data-theme] #architecture .heat-panel,
html[data-theme] #architecture .panel,
html[data-theme] #architecture .metric,
html[data-theme] #architecture .table-wrap {
  transition-property: transform, border-color, box-shadow, opacity !important;
}