/*
 * AAO Portfolio — Adaptive Interaction Layer v14
 * ------------------------------------------------------------
 * Goals:
 * - strict light-on-light / dark-on-dark theme surfaces;
 * - finite, manually controlled horizontal decks (no infinite loop, no autoplay);
 * - compact bottom Dynamic Island that grows only when opened;
 * - touch-first operating model whose centered stage updates its description;
 * - readable, numbered AI risk matrix on wide screens and a no-overflow card view on phones;
 * - device-aware overflow hints for data tables;
 * - resilient wrapping so text never sits against or outside a card boundary.
 */

:root {
  --v14-safe-inline: clamp(14px, 2.2vw, 28px);
  --v14-card-gap: clamp(12px, 1.4vw, 18px);
  --v14-radius: clamp(20px, 2vw, 30px);
  --v14-ease: cubic-bezier(.16,1,.3,1);
}

/* ---------- Global adaptive guardrails ---------- */
html { scroll-padding-top: 96px; }
body { overflow-x: clip !important; }
img,svg,video,canvas { max-width: 100%; }
p,h1,h2,h3,h4,a,span,small,b,strong,em,li,td,th { overflow-wrap: anywhere; }
.section,.hero,.footer { min-width: 0; }
.section-title,.hero-copy,.portfolio-snapshot,.panel,.value-card,.project-card,.skill-card,.framework-card,.contact-shell,.social-showcase { min-width: 0; }

/* Persistent primary navigation. It remains compact on small screens because the center links
   are already hidden by the base responsive rules. */
.executive-nav {
  position: fixed !important;
  top: max(10px, env(safe-area-inset-top)) !important;
  left: 50% !important;
  width: min(1420px, calc(100vw - 24px)) !important;
  transform: translateX(-50%) !important;
  z-index: 150 !important;
  padding: .62rem .72rem !important;
  border-radius: 999px !important;
}
.hero { padding-top: clamp(106px, 10vw, 132px) !important; }
.nav-chip { scroll-margin-top: 110px; }

/* ---------- Availability rail: prevent text touching borders ---------- */
.availability-rail {
  margin-top: 1.65rem !important;
  padding: .95rem 1.1rem !important;
  border: 1px solid var(--v13-line) !important;
  border-radius: 20px !important;
  display: grid !important;
  grid-template-columns: minmax(210px,.8fr) minmax(260px,1.35fr) minmax(220px,auto) !important;
  align-items: center !important;
  gap: .8rem 1.25rem !important;
  min-height: 68px;
  overflow: hidden;
}
.availability-rail > * { min-width: 0; margin: 0; line-height: 1.45; }
.availability-rail b { padding-inline-start: .1rem; }
.availability-rail a { text-align: right; overflow-wrap: anywhere; }

/* ---------- Strict theme surfaces, including Direct Conversation ---------- */
html[data-theme="light"] .contact-shell,
html[data-theme="light"] .contact-intro,
html[data-theme="light"] .contact-main,
html[data-theme="light"] .mandate-card,
html[data-theme="light"] .evidence-shortcuts a,
html[data-theme="light"] .social-showcase,
html[data-theme="light"] .availability-rail,
html[data-theme="light"] .footer-backtop .to-top {
  background: #ffffff !important;
  color: #0d1714 !important;
  border-color: rgba(13,23,20,.12) !important;
}
html[data-theme="light"] .contact-intro {
  background:
    radial-gradient(680px 320px at 88% -10%, rgba(25,191,143,.10), transparent 64%),
    linear-gradient(145deg,#ffffff,#f4f8f5) !important;
}
html[data-theme="light"] .contact-intro h2,
html[data-theme="light"] .contact-copy h2,
html[data-theme="light"] .mandate-card h3,
html[data-theme="light"] .social-showcase h2 { color:#0d1714 !important; }
html[data-theme="light"] .contact-intro p,
html[data-theme="light"] .contact-copy p,
html[data-theme="light"] .mandate-card li,
html[data-theme="light"] .evidence-shortcuts span,
html[data-theme="light"] .social-showcase p { color:#43554f !important; }
html[data-theme="light"] .contact-intro span,
html[data-theme="light"] .contact-copy > span { color:#0d8e69 !important; }
html[data-theme="light"] .social-icons a { background:#f4f7f5 !important; color:#16201d !important; border-color:rgba(13,23,20,.10) !important; }

html[data-theme="dark"] .contact-shell,
html[data-theme="dark"] .contact-intro,
html[data-theme="dark"] .contact-main,
html[data-theme="dark"] .mandate-card,
html[data-theme="dark"] .evidence-shortcuts a,
html[data-theme="dark"] .social-showcase,
html[data-theme="dark"] .availability-rail,
html[data-theme="dark"] .footer-backtop .to-top {
  background: #070d0b !important;
  color: #f3f8f6 !important;
  border-color: rgba(233,255,247,.13) !important;
}
html[data-theme="dark"] .contact-intro {
  background:
    radial-gradient(680px 320px at 88% -10%, rgba(55,217,168,.13), transparent 64%),
    linear-gradient(145deg,#07100d,#040806 60%,#09130f) !important;
}
html[data-theme="dark"] .contact-intro h2,
html[data-theme="dark"] .contact-copy h2,
html[data-theme="dark"] .mandate-card h3,
html[data-theme="dark"] .social-showcase h2 { color:#f3f8f6 !important; }
html[data-theme="dark"] .contact-intro p,
html[data-theme="dark"] .contact-copy p,
html[data-theme="dark"] .mandate-card li,
html[data-theme="dark"] .evidence-shortcuts span,
html[data-theme="dark"] .social-showcase p { color:#b6c7c1 !important; }
html[data-theme="dark"] .contact-intro span,
html[data-theme="dark"] .contact-copy > span { color:#5cf0c1 !important; }
html[data-theme="dark"] .social-icons a { background:#0d1714 !important; color:#edf8f4 !important; border-color:rgba(233,255,247,.12) !important; }

.contact-intro,.contact-main,.evidence-shortcuts { padding-inline: clamp(1.25rem,4vw,3.8rem) !important; }
.contact-intro { padding-block: clamp(2.3rem,5vw,5rem) !important; }
.contact-intro > *, .contact-main > *, .evidence-shortcuts > * { min-width:0; }
.contact-intro h2 { padding-bottom: .08em; }

/* ---------- Compact Dynamic Island ---------- */
.dynamic-island {
  width: auto !important;
  max-width: calc(100vw - 24px) !important;
  min-height: 48px !important;
  padding: 4px !important;
  bottom: max(14px, env(safe-area-inset-bottom)) !important;
  border-radius: 999px !important;
}
.island-core {
  width: auto !important;
  min-width: 148px !important;
  max-width: min(260px, calc(100vw - 32px)) !important;
  min-height: 40px !important;
  grid-template-columns: 10px minmax(0,auto) 26px !important;
  gap: .55rem !important;
  padding: .46rem .5rem .46rem .68rem !important;
}
.island-core > span { max-width: 168px !important; font-size: .75rem !important; }
.island-chevron {
  width: 26px !important;
  height: 26px !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}
.dynamic-island.is-open { border-radius: 999px !important; }
.dynamic-island.is-open .island-chevron { transform: rotate(45deg) !important; }
.island-panel {
  width: min(330px, calc(100vw - 24px)) !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: 7px !important;
  padding: 8px !important;
  border-radius: 20px !important;
}
.island-panel a { min-height: 54px !important; padding: .62rem .68rem !important; border-radius: 14px !important; }

/* ---------- Hero governance deck: visible destination controls ---------- */
.stage-controls { max-width: calc(100% - 16px); }
.stage-dots { min-width: 0; overflow-x: auto; scrollbar-width: none; }
.stage-dots::-webkit-scrollbar { display:none; }
.stage-dot,
.stage-dot.active {
  width: 30px !important;
  min-width: 30px !important;
  height: 26px !important;
  display: grid !important;
  place-items:center;
  color: var(--v13-faint);
  background: var(--v13-shell-soft) !important;
  border:1px solid var(--v13-line) !important;
  font-size:.58rem;
  font-weight:850;
  letter-spacing:.02em;
}
.stage-dot.active { color: var(--v13-ink); background: color-mix(in srgb,var(--accent) 15%,var(--v13-shell)) !important; border-color: color-mix(in srgb,var(--accent) 48%,var(--v13-line)) !important; }

/* ---------- Interactive operating model ---------- */
.operating-shell { overflow: hidden; }
.flow-diagram {
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory !important;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}
.flow-node { scroll-snap-align: center; scroll-snap-stop: always; }
.flow-node.active { box-shadow: 0 8px 24px color-mix(in srgb,var(--accent) 18%,transparent) !important; }
.flow-detail { min-height: 46px; display:flex; align-items:center; }

/* ---------- Finite horizontal decks: systems, capabilities, frameworks ---------- */
#systems .track,
#capabilities .track,
#frameworks .track {
  display: grid !important;
  grid-auto-flow: column !important;
  grid-template-columns: none !important;
  grid-auto-columns: clamp(286px, 30vw, 390px) !important;
  gap: var(--v14-card-gap) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 8px 4px 18px !important;
  scroll-snap-type: x mandatory !important;
  overscroll-behavior-inline: contain;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  touch-action: pan-x pan-y;
}
#capabilities .track { grid-auto-columns: clamp(276px, 28vw, 360px) !important; }
#systems .track > *, #capabilities .track > *, #frameworks .track > * {
  scroll-snap-align: start !important;
  scroll-snap-stop: normal;
  min-width: 0 !important;
  width: auto !important;
}
.project-card,.skill-card,.framework-card {
  min-height: 270px !important;
  padding: clamp(1.25rem,2vw,1.6rem) !important;
}
.project-card > *, .skill-card > *, .framework-card > * { max-width:100%; }

.deck-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin:.1rem 0 .55rem;
  padding:.4rem .15rem;
}
.deck-meta { min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:.45rem .7rem; }
.deck-meta b { color:var(--v13-ink); font-size:.8rem; }
.deck-meta span { color:var(--v13-faint); font-size:.7rem; }
.deck-controls { display:flex; gap:.45rem; flex:0 0 auto; }
.deck-controls button {
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid var(--v13-line);
  background:var(--v13-shell);
  color:var(--v13-ink);
  cursor:pointer;
  box-shadow:0 8px 24px color-mix(in srgb,#000 8%,transparent);
}
.deck-controls button:disabled { opacity:.32; cursor:default; box-shadow:none; }
.deck-controls button:not(:disabled):hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--accent) 40%,var(--v13-line)); }
.track-hint {
  display:none !important;
  margin:.48rem 0 1rem !important;
  color:var(--v13-faint) !important;
  font-size:.68rem !important;
  letter-spacing:.07em !important;
  text-transform:uppercase;
  font-weight:800;
}
.track-hint.is-needed { display:block !important; }

/* ---------- Device-aware architecture table scrolling ---------- */
.table-wrap { overscroll-behavior: contain; }
.table-overflow-note {
  margin:.55rem .2rem 0;
  color:var(--v13-faint);
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.table-overflow-note[hidden] { display:none !important; }

/* ---------- AI risk matrix: explicit numerical scales ---------- */
.heatmap-panel { min-width:0; }
.heatmap {
  min-height: 440px !important;
  height: clamp(440px, 42vw, 560px) !important;
  overflow: hidden !important;
  padding: 42px 54px 48px 58px !important;
}
.heat-node {
  max-width: 190px !important;
  min-width: 126px;
  display:flex !important;
  flex-direction:column;
  align-items:center;
  gap:.18rem;
  padding:.55rem .7rem !important;
  line-height:1.15;
  text-align:center;
}
.heat-node > span { color:inherit; font-size:.73rem; font-weight:850; }
.heat-node > small { color:var(--v13-faint); font-size:.56rem; font-weight:700; white-space:nowrap; }
.heat-node.active > small { color: color-mix(in srgb,var(--v13-ink) 68%,var(--v13-copy)); }
.heat-scale { position:absolute; z-index:1; pointer-events:none; color:var(--v13-faint); font-size:.58rem; font-weight:750; }
.heat-scale-x { left:58px; right:54px; bottom:15px; display:flex; justify-content:space-between; }
.heat-scale-y { left:18px; top:42px; bottom:48px; display:flex; flex-direction:column; justify-content:space-between; align-items:center; }
.heatmap .axis.x { right:18px !important; bottom:28px !important; }
.heatmap .axis.y { left:42px !important; top:14px !important; }
.matrix-legend { display:flex; flex-wrap:wrap; gap:.55rem 1rem; margin-top:.8rem; color:var(--v13-faint); font-size:.66rem; }
.matrix-legend span { display:inline-flex; gap:.3rem; align-items:center; }
.matrix-legend b { color:var(--v13-copy); }

/* Portfolio domain mix gets a high-signal stacked allocation visual. */
.domain-stack {
  height: 42px;
  display:flex;
  overflow:hidden;
  border:1px solid var(--v13-line);
  border-radius:14px;
  background:var(--v13-shell-soft);
  box-shadow: inset 0 1px rgba(255,255,255,.05);
}
.domain-stack span { display:flex; align-items:center; justify-content:center; min-width:0; color:#06110d; font-size:.68rem; font-weight:900; }
.domain-stack .grc { flex:4; background:linear-gradient(90deg,#16c995,#5cf0c1); }
.domain-stack .ai { flex:3; background:linear-gradient(90deg,#2ab7d2,#71ddf3); }
.domain-stack .tprm { flex:3; background:linear-gradient(90deg,#c7943a,#e3bc6e); }
html[data-theme="dark"] .domain-stack span { color:#07100d; }

/* Readability for executive visuals. */
.visual-legend { margin:.7rem 0 0; color:var(--v13-faint); font-size:.66rem; line-height:1.45; }
.radar { overflow:visible; }
.radar-label { fill:var(--v13-faint); font:600 5.2px/1 var(--body-font); }
.radar-scale { fill:var(--v13-faint); font:700 4.6px/1 var(--body-font); opacity:.75; }

/* ---------- Responsive states ---------- */
@media (max-width: 1180px) {
  .availability-rail { grid-template-columns: minmax(190px,.8fr) 1fr !important; }
  .availability-rail a { grid-column:1/-1; text-align:left; }
  #systems .track,#capabilities .track,#frameworks .track { grid-auto-columns: clamp(300px, 44vw, 380px) !important; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 82px; }
  .executive-nav { top:max(7px,env(safe-area-inset-top)) !important; width:calc(100vw - 14px) !important; padding:.5rem .55rem !important; border-radius:22px !important; }
  .hero { padding-top: 94px !important; }
  .brand-premium strong { width:38px !important; height:38px !important; border-radius:13px !important; }
  .brand-premium span b { font-size:.8rem; }
  .nav-actions .cta { display:none; }
  .availability-rail { grid-template-columns:1fr !important; gap:.55rem !important; padding:1rem !important; }
  .availability-rail a { grid-column:auto; text-align:left; }

  .contact-shell { border-radius:28px !important; }
  .contact-intro { grid-template-columns:1fr !important; gap:1.25rem !important; padding:2rem 1.2rem !important; }
  .contact-intro h2 { font-size:clamp(2.65rem,12vw,4.3rem) !important; line-height:.94 !important; }
  .contact-main { grid-template-columns:1fr !important; padding:1.35rem 1.2rem !important; }
  .evidence-shortcuts { grid-template-columns:1fr !important; padding: .7rem 1.2rem 1.4rem !important; }

  .dynamic-island { bottom:max(10px,env(safe-area-inset-bottom)) !important; }
  .island-core { min-width:136px !important; max-width:220px !important; }
  .island-core > span { max-width:132px !important; }
  .island-panel { grid-template-columns:1fr !important; width:min(258px,calc(100vw - 20px)) !important; max-height:min(62vh,430px); overflow:auto; }

  /* Touch operating model: each stage snaps to the center; JS updates description from the centered node. */
  .operating-shell { padding-inline:.7rem !important; }
  .operating-head { padding-inline:.25rem !important; }
  .flow-diagram {
    margin-inline:-.2rem !important;
    padding: .8rem calc(50% - 76px) !important;
    gap:.45rem !important;
    border-radius:20px !important;
  }
  .flow-node { flex:0 0 152px; min-width:152px !important; justify-content:center; text-align:center; }
  .flow-arrow { flex:0 0 18px; text-align:center; }
  .flow-detail { margin:.25rem .2rem 0; padding:.75rem .85rem !important; min-height:68px; line-height:1.5; }

  #systems .track,#capabilities .track,#frameworks .track {
    grid-auto-columns: min(84vw, 340px) !important;
    padding-inline:1px !important;
    scroll-padding-inline: 1px;
  }
  .project-card,.skill-card,.framework-card { min-height:250px !important; }
  .deck-toolbar { margin-top:.1rem; }
  .deck-controls button { width:40px; height:40px; }

  /* Phone matrix becomes a vertical visual scorecard rather than a cramped/scrolled plot. */
  .heatmap {
    height:auto !important;
    min-height:0 !important;
    padding:12px !important;
    display:grid;
    gap:9px;
    background: linear-gradient(145deg,color-mix(in srgb,var(--accent) 4%,var(--v13-shell)),var(--v13-shell)) !important;
  }
  .heatmap::before,.heatmap::after,.heatmap > .axis,.heat-scale { display:none !important; }
  .heat-node {
    position:relative !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    max-width:none !important;
    width:100%;
    min-width:0;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    text-align:left;
    gap:.35rem .8rem;
    padding:.8rem .9rem !important;
    border-radius:16px !important;
  }
  .heat-node > span { font-size:.76rem; }
  .heat-node > small { white-space:normal; text-align:right; font-size:.6rem; }
  .matrix-legend { display:grid; grid-template-columns:1fr 1fr; }
  .domain-row { grid-template-columns:minmax(0,1fr) auto !important; }
  .domain-row .domain-track { grid-column:1/-1 !important; }

  .radar-label { font-size:5.4px; }
}

@media (max-width: 430px) {
  .hero,.section,.footer { width:calc(100% - 16px) !important; }
  .executive-nav .brand-premium span { display:none; }
  .executive-nav { grid-template-columns:1fr auto !important; }
  .island-core { min-width:126px !important; }
  .island-core > span { max-width:116px !important; }
  .stage-readout { max-width:calc(100% - 12px); right:6px !important; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .stage-controls { width:calc(100% - 12px); justify-content:space-between; }
  .stage-dots { flex:1; }
  .stage-dot,.stage-dot.active { width:28px !important; min-width:28px !important; }
  #systems .track,#capabilities .track,#frameworks .track { grid-auto-columns: calc(100vw - 42px) !important; }
  .deck-meta span { flex-basis:100%; }
  .matrix-legend { grid-template-columns:1fr; }
}

/* Fine pointers may use premium hover motion. Coarse pointers never depend on hover. */
@media (hover:none), (pointer:coarse) {
  .project-card:hover,.skill-card:hover,.framework-card:hover,.value-card:hover { transform:none !important; }
  .track { cursor:grab; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto !important; }
  .flow-diagram,#systems .track,#capabilities .track,#frameworks .track { scroll-behavior:auto !important; }
  .deck-controls button,.heat-node,.dynamic-island,.island-panel { transition:none !important; }
}

/* Framework cards are no longer one giant external link; only the explicit source CTA navigates away. */
.framework-source {
  display:inline-flex;
  align-items:center;
  margin-top:1rem;
  padding:.48rem .66rem;
  border:1px solid var(--v13-line);
  border-radius:999px;
  color:var(--v13-copy);
  background:var(--v13-shell-soft);
  text-decoration:none;
  font-size:.68rem;
  font-weight:800;
}
.framework-source:hover,.framework-source:focus-visible {
  color:var(--v13-ink);
  border-color:color-mix(in srgb,var(--accent) 42%,var(--v13-line));
}

/* v14.1 availability rail: two-column composition is safer inside the hero-copy column
   than forcing three minimum-width columns. The email gets its own second-row slot. */
.availability-rail {
  grid-template-columns: minmax(170px,.78fr) minmax(0,1.22fr) !important;
}
.availability-rail > span { grid-column:2; }
.availability-rail > a { grid-column:2; text-align:left !important; }
@media (max-width:760px) {
  .availability-rail { grid-template-columns:1fr !important; }
  .availability-rail > span,.availability-rail > a { grid-column:auto; }
}

/* v14.2 final hardening -------------------------------------------------------
   These last overrides neutralize legacy hints/layout widths from v12/v13 so
   v14 owns the adaptive behavior consistently. */
.table-wrap::after {
  content: none !important;
  display: none !important;
}
.operating-head small::before { content: none !important; display:none !important; }

/* Keep the closed island genuinely pill-sized. The menu may grow only when
   opened and remains intentionally modest rather than spanning the viewport. */
.dynamic-island .island-panel {
  width: min(330px, calc(100vw - 24px)) !important;
  max-width: 330px !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
}
@media (max-width: 760px) {
  .dynamic-island .island-panel {
    width: min(258px, calc(100vw - 20px)) !important;
    max-width: 258px !important;
    grid-template-columns: 1fr !important;
  }
}

/* Nodes with identical scores are deliberately nudged *within the same score
   cluster* so labels never cover one another. The printed values remain the
   authoritative risk/oversight scores. */
.heat-node { isolation:isolate; }
.heat-node small { max-width: 100%; }
.dynamic-island .island-panel { min-width: 0 !important; }

/* v14.3 typography + table polish ------------------------------------------- */
html[data-theme="dark"] .executive-nav .brand-premium span b { color:#f3f8f6 !important; }
html[data-theme="dark"] .executive-nav .brand-premium span small { color:#9cb0a9 !important; }
html[data-theme="light"] .executive-nav .brand-premium span b { color:#101a17 !important; }
html[data-theme="light"] .executive-nav .brand-premium span small { color:#3d4e48 !important; }

/* Never split short data labels letter-by-letter. The table still reflows at
   spaces, and becomes horizontally scrollable only when its container truly
   cannot fit the readable minimum width. */
.table-wrap table { min-width:720px !important; table-layout:fixed; }
.table-wrap th,.table-wrap td { overflow-wrap:normal !important; word-break:normal !important; }
.table-wrap th:nth-child(1),.table-wrap td:nth-child(1) { width:13%; white-space:nowrap; }
.table-wrap th:nth-child(2),.table-wrap td:nth-child(2) { width:43%; }
.table-wrap th:nth-child(3),.table-wrap td:nth-child(3) { width:32%; }
.table-wrap th:nth-child(4),.table-wrap td:nth-child(4) { width:12%; white-space:nowrap; }