/* architecture.css — the AEA reference (centerpiece) */

.arch-main{ padding:118px 56px 0; position:relative; z-index:5; }

/* ── header region (foreground) ──────────────────────────────────── */
.arch-head{ max-width:1320px; margin:0 auto; position:relative; }
.arch-head .ttl{ font-size:15px; letter-spacing:.16em; color:var(--ink-dim); text-transform:lowercase; }
.arch-head .sub{ font-size:13px; letter-spacing:.06em; color:var(--faint); margin-top:4px; }
.arch-head .intro{ font-size:15px; line-height:1.68; color:var(--ink); max-width:760px;
  margin:18px 0 16px; text-wrap:pretty; }
.arch-head .intro .em{ color:var(--gold-hi); }
.arch-status{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.arch-head .headline{ position:absolute; top:2px; right:0; font-size:12px; letter-spacing:.05em;
  color:var(--faint); text-align:right; }

/* legacy concept-locator / diagram / axis-grid / seeds / mechanics / standing CSS removed
   2026-06-15 — that DOM was built by the deleted spa-architecture.js; the live /architecture
   route is the WebGL instrument (aea3d.js), styled by the .aea-* block below. */

/* open cracks */
.cracks-head{ font-size:11px; letter-spacing:.16em; color:var(--faint); text-transform:uppercase;
  max-width:1320px; margin:54px auto 14px; }
.cracks{ max-width:1320px; margin:0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.crack{ position:relative; padding:13px 0 0 0; }
.crack::before{ content:""; position:absolute; top:0; left:0; width:8px; height:8px;
  border-top:1.4px solid var(--gold-dim); border-left:1.4px solid var(--gold-dim); }
.crack .ckey{ font-size:11px; color:var(--gold-hi); letter-spacing:.04em; padding-left:14px; }
.crack .cstate{ font-size:9px; letter-spacing:.1em; color:var(--faint); text-transform:uppercase; }
.crack .ctext{ font-size:11px; line-height:1.5; color:var(--ink-dim); margin-top:7px; padding-left:14px; }

/* ═══ the AEA panel: plain-language text (left) + WebGL structure (right) ═══ */
/* the AEA panel reads as a live INSTRUMENT plate — rhymes with the resonance instrument
   (.rs-canvas-wrap): warm-dark ground, a faint gold frame + inner gold glow, gold corner
   brackets. Same gold values as resonance so it's the same instrument family, not new gold. */
.aea-panel{ max-width:1320px; margin:30px auto 0; display:flex; position:relative; z-index:5;
  height:min(76vh,780px); min-height:560px; border:1px solid rgba(212,162,76,0.30); border-radius:6px; overflow:hidden;
  background:
    radial-gradient(120% 100% at 72% 34%, rgba(20,18,28,0.5) 0%, rgba(6,8,13,0.0) 64%),
    linear-gradient(180deg, rgba(10,12,20,0.88), rgba(7,9,15,0.94));
  box-shadow:
    0 0 0 1px rgba(8,10,18,0.9) inset,
    0 0 90px rgba(212,162,76,0.07) inset,
    0 0 26px rgba(212,162,76,0.06),
    0 30px 80px -44px rgba(0,0,0,0.9); }
.aea-panel::before, .aea-panel::after{ content:""; position:absolute; width:24px; height:24px;
  border-color:rgba(212,162,76,0.45); border-style:solid; pointer-events:none; z-index:6; }
.aea-panel::before{ top:7px; left:7px; border-width:1px 0 0 1px; }
.aea-panel::after{ bottom:7px; right:7px; border-width:0 1px 1px 0; }

/* left — the text of the AEA, in plain words */
.aea-text{ width:35%; min-width:300px; max-width:440px; border-right:1px solid var(--line-soft);
  padding:26px 26px 30px 28px; overflow-y:auto; scrollbar-width:thin;
  scrollbar-color:rgba(234,240,251,0.18) transparent; }
.aea-text::-webkit-scrollbar{ width:8px; } .aea-text::-webkit-scrollbar-thumb{ background:rgba(234,240,251,0.14); border-radius:4px; }
.at-h1{ font-size:13px; letter-spacing:.30em; color:var(--gold); font-weight:500; text-transform:uppercase; margin:0; }
.at-lede{ font-size:12px; line-height:1.85; color:var(--ink-dim); margin:14px 0 6px; }
.at-lede b{ color:var(--ink); } .at-lede .g{ color:var(--gold-hi); }
.at-law{ font-size:12px; line-height:1.7; color:var(--gold); margin:14px 0 20px; padding:12px 0;
  border-top:1px dashed rgba(212,162,76,0.3); border-bottom:1px dashed rgba(212,162,76,0.3); }
.at-h2{ font-size:10px; letter-spacing:.24em; color:var(--gold); text-transform:uppercase; margin:20px 0 8px;
  display:flex; align-items:center; gap:9px; }
.at-h2::after{ content:""; flex:1; height:1px; background:linear-gradient(to right,rgba(234,240,251,0.12),transparent); }
.at-row{ font-size:11px; line-height:1.72; color:var(--ink-dim); margin:3px 0; }
.at-row b{ color:var(--gold-hi); font-weight:500; } .at-row .d{ color:var(--faint); }
.at-mini{ font-size:10px; color:var(--faint); line-height:1.6; margin-top:5px; }

/* right — the structure stage (aea3d mounts canvas + labels + card here) */
.aea-stage{ position:relative; flex:1; min-width:0; }
.aea-canvas{ display:block; width:100%; height:100%; cursor:grab; touch-action:none; }
.aea-canvas:active{ cursor:grabbing; }
.aea-labels{ position:absolute; inset:0; pointer-events:none; z-index:2; }
.aea-toolbar{ position:absolute; left:18px; top:16px; z-index:5; display:flex; gap:7px; align-items:center; flex-wrap:wrap; }
.aea-toolbar .aea-tt{ font-size:9px; letter-spacing:.24em; color:var(--faint); text-transform:uppercase; margin-right:4px; }
.aea-tog{ font-family:inherit; font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:rgba(234,240,251,0.5);
  background:transparent; border:1px solid rgba(234,240,251,0.12); padding:4px 11px; cursor:pointer;
  border-radius:3px; transition:color .15s,border-color .15s,background .15s; }
.aea-tog:hover{ color:rgba(234,240,251,0.85); border-color:rgba(234,240,251,0.3); }
.aea-tog.on{ color:var(--gold); border-color:rgba(212,162,76,0.55); background:rgba(212,162,76,0.08); box-shadow:0 0 10px rgba(212,162,76,0.12); }
.aea-lab{ position:absolute; transform:translate(-50%,-50%); white-space:nowrap; letter-spacing:.12em;
  will-change:left,top,opacity; transition:opacity .12s; font-family:inherit; }
.aea-lab.axis{ font-size:12px; color:var(--gold-hi); text-transform:uppercase; letter-spacing:.2em; }
.aea-lab.axsub{ font-size:8px; color:var(--faint); letter-spacing:.16em; }
.aea-lab.lev{ font-size:8px; color:var(--ink-dim); } .aea-lab.levlit{ font-size:8.5px; color:var(--gold-hi); }
.aea-lab.ex{ font-size:7.5px; color:var(--gold); } .aea-lab.seed{ font-size:7.5px; color:var(--faint); text-transform:uppercase; letter-spacing:.14em; }
.aea-lab.seednum{ font-size:8.5px; color:var(--gold-hi); } .aea-lab.mech{ font-size:7.5px; color:var(--gold); text-transform:uppercase; letter-spacing:.16em; }
.aea-lab.op{ font-size:7.5px; color:var(--gold); text-transform:uppercase; letter-spacing:.22em; }
.aea-card{ position:absolute; right:16px; top:16px; width:214px; border:1px solid rgba(234,240,251,0.14);
  background:rgba(8,11,18,0.86); border-radius:9px; padding:12px 14px; opacity:0; transition:opacity .15s; z-index:4; pointer-events:none; }
.aea-card .aea-pn{ font-size:10px; letter-spacing:.12em; color:var(--gold-hi); }
.aea-card .aea-pl{ font-size:8px; letter-spacing:.16em; color:var(--gold); text-transform:uppercase; margin:3px 0 7px; }
.aea-card .aea-pd{ font-size:9.5px; line-height:1.6; color:var(--ink-dim); }
.aea-card .aea-px{ font-size:8.5px; color:var(--gold-hi); margin-top:7px; }
.aea-hint{ position:absolute; right:16px; bottom:14px; font-size:8px; letter-spacing:.2em; color:var(--faint); text-transform:uppercase; z-index:3; }
.aea-credo{ position:absolute; left:0; right:0; bottom:14px; text-align:center; font-size:9px; letter-spacing:.18em; color:var(--gold); z-index:3; pointer-events:none; }
.aea-stage.aea-nogl{ display:flex; align-items:center; justify-content:center; }
/* connection legend — the key that makes the line types readable (palette-locked:
   white = structural prerequisite, gold = active flow; solid = hard, dashed = soft) */
.aea-legend{ position:absolute; left:18px; bottom:34px; z-index:4; display:flex; flex-direction:column; gap:5px;
  padding:9px 11px 10px; border:1px solid var(--line-soft); border-radius:8px;
  background:rgba(8,11,18,0.6); backdrop-filter:blur(3px); pointer-events:none; }
.aea-legend .lg-ttl{ font-size:8px; letter-spacing:.24em; text-transform:uppercase; color:var(--faint); margin-bottom:2px; }
.aea-legend .lg-row{ display:flex; align-items:center; gap:9px; font-size:8.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-dim); white-space:nowrap; }
.aea-legend .lg-l{ width:22px; height:0; flex:none; border-top:1.6px solid rgba(234,240,251,0.85); }
.aea-legend .lg-l.lgs{ border-top:1.6px dashed rgba(234,240,251,0.55); }
.aea-legend .lg-l.lgm{ border-top:1.6px solid var(--gold); }
.aea-legend .lg-l.lge{ border-top:1.6px dashed var(--gold-hi); }
.aea-legend .lg-d{ width:8px; height:8px; flex:none; border-radius:50%; background:var(--gold-hi);
  box-shadow:0 0 7px rgba(212,162,76,0.75); margin:0 7px; }
@media (max-width:560px){ .aea-legend{ display:none; } }

/* system locator — click a chip to place RAG / MCP / agents… across the five axes */
.aea-systems{ position:absolute; left:18px; top:44px; z-index:5; display:flex; align-items:center;
  gap:7px; flex-wrap:wrap; max-width:60%; }
.aea-systems .aea-tt{ font-size:9px; letter-spacing:.24em; color:var(--faint); text-transform:uppercase; margin-right:2px; }
.aea-chip{ font-family:inherit; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:rgba(234,240,251,0.55);
  background:transparent; border:1px solid var(--line-soft); border-radius:4px; padding:3px 8px; cursor:pointer; }
.aea-chip:hover{ color:rgba(234,240,251,0.9); border-color:rgba(234,240,251,0.3); }
.aea-chip.on{ color:var(--gold); border-color:rgba(212,162,76,0.6); background:rgba(212,162,76,0.1); box-shadow:0 0 10px rgba(212,162,76,0.14); }

/* open-cracks: now carry a direction line */
.cracks-head .ch-note{ text-transform:none; letter-spacing:.02em; color:var(--faint); }
.crack .csol{ font-size:11px; line-height:1.55; color:var(--ink-dim); margin-top:9px; padding-left:14px; }
.crack .csol .cs-k{ display:inline-block; font-size:8.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--gold-dim); border-radius:3px; padding:1px 6px; margin-right:7px; }

@media (max-width:980px){
  .aea-panel{ flex-direction:column; height:auto; }
  .aea-text{ width:100%; max-width:none; border-right:none; border-bottom:1px solid var(--line-soft); max-height:none; }
  .aea-stage{ height:460px; }
}

@media (max-width:1080px){
  .arch-head .headline{ position:static; text-align:left; margin-top:10px; }
}
@media (max-width:760px){
  .arch-main{ padding:64px 18px 0; }
  .cracks{ grid-template-columns:1fr; }

  /* ── AEA instrument goes structure-as-hero on phones ─────────────────── */
  /* the canvas fills the panel; the plain-language text is a tap-in overlay;
     every floating desktop control is evicted and folded into one bottom dock */
  .aea-panel{ height:auto; min-height:0; }                     /* drop the desktop 560px floor so the stage controls height */
  .at-lede,.at-law,.at-row,.at-mini{ overflow-wrap:anywhere; }
  .aea-text{ display:none; }                                   /* hidden until the dock's "idea" reveal */
  .text-open .aea-text{ display:block; position:absolute; top:0; left:0; right:0; bottom:60px; z-index:9; max-width:none;
    border-right:none; background:rgba(6,8,13,0.96); overflow-y:auto; padding:20px 18px 24px; }  /* leaves the dock tappable to close */
  .aea-stage{ position:relative; flex:none; width:100%; height:min(66vh,500px); }   /* deterministic canvas box shaped to the pentagon */
  .aea-stage .aea-canvas{ position:absolute; inset:0; width:100%; height:100%; }     /* fill the stage regardless of flex/percentage quirks */
  /* clear the colliding top overlays + desktop-only affordances */
  .aea-toolbar,.aea-systems,.aea-hint,.aea-credo,.aea-legend{ display:none !important; }

  /* the one bottom dock — always visible, thumb-height */
  .aea-dock{ position:absolute; left:8px; right:8px; bottom:8px; height:44px; z-index:7;
    display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 6px 0 12px;
    background:rgba(5,7,14,0.92); border:1px solid var(--line-soft); border-top:1px solid var(--gold-dim);
    border-radius:8px; backdrop-filter:blur(4px); }
  .aea-dk-layers,.aea-dk-i,.aea-dk-walk{ font-family:inherit; font-size:10px; letter-spacing:.12em;
    text-transform:uppercase; color:rgba(234,240,251,0.62); background:transparent;
    border:1px solid rgba(234,240,251,0.14); border-radius:5px; padding:6px 12px; cursor:pointer; }
  .aea-dk-i{ border-color:transparent; }
  .aea-dk-sel{ flex:1; min-width:0; text-align:center; font-size:10px; letter-spacing:.06em;
    color:var(--gold-hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  /* pull-up sheet — layers + systems, dimming scrim keeps the structure present behind it */
  .aea-scrim{ position:absolute; inset:0; z-index:7; background:rgba(5,7,14,0.5); opacity:0;
    pointer-events:none; transition:opacity .2s; }
  .sheet-open .aea-scrim{ opacity:1; pointer-events:auto; }
  .aea-sheet{ position:absolute; left:8px; right:8px; bottom:8px; max-height:48vh; z-index:8;
    transform:translateY(110%); transition:transform .25s; overflow-y:auto;
    background:rgba(8,11,18,0.97); border:1px solid var(--line-soft); border-radius:10px; padding:12px 14px 16px; }
  .sheet-open .aea-sheet{ transform:translateY(0); }
  .aea-sheet-grip{ width:34px; height:4px; border-radius:2px; background:rgba(234,240,251,0.22);
    margin:2px auto 12px; }
  .aea-sh-grp{ font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:var(--faint); margin:6px 0 8px; }
  .aea-sh-layers,.aea-sh-sys{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
  .aea-sheet .aea-tog,.aea-sheet .aea-chip{ font-size:11px; min-height:34px; padding:7px 13px; }
  .aea-sh-key{ font-size:9px; line-height:1.6; color:var(--ink-dim); letter-spacing:.04em; margin-top:4px;
    padding-top:12px; border-top:1px solid var(--line-soft); }
  .aea-dk-walk{ display:block; width:100%; margin-top:14px; color:var(--gold); border-color:var(--gold-dim);
    text-align:center; letter-spacing:.16em; }

  /* info card re-docked as a slim strip just above the dock — never covers the structure */
  .aea-card{ left:8px; right:8px; top:auto; bottom:60px; width:auto; max-height:32vh; overflow-y:auto; }

  /* readable label floor (was an illegible 7.5–8px swarm) */
  .aea-stage.is-mobile .aea-lab.axis{ font-size:13px; }
  .aea-stage.is-mobile .aea-lab.levlit{ font-size:11px; }
  .aea-stage.is-mobile .aea-lab.lev{ font-size:10px; }
  .aea-stage.is-mobile .aea-lab.ex{ font-size:9px; }
}
@media (max-width:760px) and (prefers-reduced-motion:reduce){
  .aea-sheet,.aea-scrim{ transition:none; }
}