/* =============================================================================
   HYPHA OPERATOR CONSOLE — animated product graphic (.af-hypha-console)
   =============================================================================
   A faithful, premium recreation of the real Hypha app that toggles between two
   views: the WORKSPACE (the agent analyzing intel + writing/running its own
   Python in a code-review pane with an EDA 1->9 tracker) and the OPERATOR
   DASHBOARD (multi-INT situation map, watch list, trust verdict, inference
   daemon). All content is illustrative placeholder — no real code/prompts/data.
   js/product-console.js drives the view toggle + per-view build/ambient motion;
   reduced-motion / no-JS show the Workspace, fully populated + static.
   ============================================================================= */

.af-hypha-console {
  /* On-brand tokens (align to the site / bench wave-34 console palette:
     gold / red / sparkle-blue / olive / green on #101216-#0A0B0D, warm ink). */
  --afhc-bg-0:#08090b; --afhc-bg-1:#0e1319;
  --afhc-panel-t:#101216; --afhc-panel-b:#0a0b0d; --afhc-inset:#0c0e12;
  --afhc-line:rgba(232,226,211,0.09); --afhc-line-soft:rgba(232,226,211,0.05); --afhc-line-str:rgba(232,226,211,0.18);
  --afhc-ink:#e8e2d3; --afhc-ink-2:#a8a39a; --afhc-ink-3:#6a7280;
  --afhc-orange:#e0b040; --afhc-orange-2:#efc766; --afhc-amber:#e0b040;
  --afhc-red:#c8423a; --afhc-green:#5fae63; --afhc-cyan:#5ba4f0; --afhc-blue:#a8c24a;
  --tk-kw:#5ba4f0; --tk-fn:#e0b040; --tk-str:#a8c24a; --tk-num:#d98c5a; --tk-def:#c9c3b4;
  --afhc-mono:var(--af-font-mono,'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace);
  --afhc-sans:var(--af-font-body,system-ui,-apple-system,'Segoe UI',sans-serif);
  --afhc-disp:var(--af-font-display,var(--afhc-sans));

  position:relative; width:100%; max-width:1140px; margin:0 auto;
  border-radius:18px; padding:1px;
  background:linear-gradient(180deg,rgba(255,255,255,0.10),rgba(255,255,255,0.02) 22%,rgba(0,0,0,0.4)) border-box;
  box-shadow:0 40px 90px -30px rgba(0,0,0,0.8),0 8px 30px -12px rgba(0,0,0,0.6);
  color:var(--afhc-ink); font-family:var(--afhc-sans); -webkit-font-smoothing:antialiased; isolation:isolate;
  text-align:left; /* reset the centered .af-product-viz section so code/analysis align left */
}
.afhc__screen{ position:relative; border-radius:17px; overflow:hidden;
  background:radial-gradient(130% 120% at 50% -12%, var(--afhc-bg-1) 0%, var(--afhc-bg-0) 58%); }
.afhc__screen::before{ content:""; position:absolute; inset:0 0 auto 0; height:42%;
  background:linear-gradient(180deg,rgba(255,255,255,0.04),transparent); pointer-events:none; z-index:8; }
.afhc__screen::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:8;
  background-image:repeating-linear-gradient(to bottom,rgba(255,255,255,0.012) 0 1px,transparent 1px 3px); opacity:0.45; }

/* ── Chrome ───────────────────────────────────────────────────────────────── */
.afhc__chrome{ position:relative; z-index:3; display:flex; align-items:center; gap:18px; height:46px; padding:0 18px;
  background:linear-gradient(180deg,rgba(255,255,255,0.035),rgba(255,255,255,0)); border-bottom:1px solid var(--afhc-line); }
.afhc__brand{ display:inline-flex; align-items:center; gap:8px; font-family:var(--afhc-disp); font-weight:600; font-size:13px; letter-spacing:0.01em; color:var(--afhc-ink); }
.afhc__brand-mark{ width:13px; height:13px; border-radius:4px; background:linear-gradient(145deg,var(--afhc-orange-2),var(--afhc-orange)); box-shadow:0 0 12px -2px var(--afhc-orange); }
.afhc__tabs{ display:inline-flex; gap:4px; margin:0 auto 0 8px; }
.afhc__tab{ font-family:var(--afhc-mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; padding:6px 13px; border-radius:8px;
  color:var(--afhc-ink-2); border:1px solid transparent; background:transparent; cursor:pointer; transition:color .3s,border-color .3s,background .3s,box-shadow .3s; }
.afhc__tab.is-active{ color:var(--afhc-orange-2); border-color:rgba(224,176,64,0.45);
  background:linear-gradient(180deg,rgba(224,176,64,0.16),rgba(224,176,64,0.05)); box-shadow:0 0 18px -4px rgba(224,176,64,0.5),inset 0 1px 0 rgba(255,255,255,0.08); }
.afhc__class{ font-family:var(--afhc-mono); font-size:9.5px; letter-spacing:0.2em; color:var(--afhc-ink-3); }
.afhc__live{ display:inline-flex; align-items:center; gap:7px; font-family:var(--afhc-mono); font-size:10px; letter-spacing:0.16em; color:var(--afhc-ink-2); }
.afhc__live-dot{ width:7px; height:7px; border-radius:50%; background:var(--afhc-green); box-shadow:0 0 10px var(--afhc-green); animation:afhc-live 2.6s ease-out infinite; }

/* ── View stack (both views share one grid cell -> stable height) ─────────── */
.afhc__views{ position:relative; z-index:2; display:grid; }
.afhc__view{ grid-area:1/1; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .55s ease, transform .55s ease; transform:translateY(6px); }
.afhc__view.is-active{ opacity:1; visibility:visible; pointer-events:auto; transform:none; }

/* ════════ WORKSPACE ════════ */
.afhc__view--workspace{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.04fr); gap:14px; padding:16px; }
.afhc__pane{ display:flex; flex-direction:column; min-width:0; border:1px solid var(--afhc-line); border-radius:13px;
  background:linear-gradient(180deg,var(--afhc-panel-t),var(--afhc-panel-b)); box-shadow:inset 0 1px 0 rgba(255,255,255,0.045),0 14px 30px -20px rgba(0,0,0,0.8); overflow:hidden; }
.afhc__pane-head{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--afhc-line); }
.afhc__src{ font-family:var(--afhc-mono); font-size:10px; letter-spacing:0.04em; color:var(--afhc-ink-2); }
.afhc__src b{ color:var(--afhc-ink-3); font-weight:500; margin-right:6px; letter-spacing:0.1em; }
.afhc__pane-head-r{ margin-left:auto; display:inline-flex; align-items:center; gap:10px; }
.afhc__synced{ font-family:var(--afhc-mono); font-size:8.5px; letter-spacing:0.06em; color:var(--afhc-ink-3); }
.afhc__chipbtn{ font-family:var(--afhc-mono); font-size:8.5px; letter-spacing:0.1em; color:var(--afhc-orange-2); border:1px solid rgba(224,176,64,0.4); border-radius:6px; padding:3px 8px; }
.afhc__chipbtn--ghost{ color:var(--afhc-ink-2); border-color:var(--afhc-line-str); }
.afhc__ok{ font-family:var(--afhc-mono); font-size:9px; letter-spacing:0.06em; color:var(--afhc-green); }
.afhc__ok--lg{ font-size:10.5px; }

/* analysis */
.afhc__analysis{ padding:14px 16px 8px; flex:1; }
.afhc__a-h{ margin:0 0 9px; font-family:var(--afhc-disp); font-size:14px; font-weight:600; color:var(--afhc-ink); letter-spacing:0.005em; }
.afhc__a-h2{ margin:15px 0 8px; font-family:var(--afhc-disp); font-size:12.5px; font-weight:600; color:var(--afhc-ink); }
.afhc__sev{ margin:0 0 12px; display:inline-flex; align-items:center; gap:7px; font-family:var(--afhc-mono); font-size:9.5px; letter-spacing:0.12em; color:var(--afhc-amber); padding:4px 9px; border-radius:6px; background:rgba(224,176,64,0.10); border:1px solid rgba(224,176,64,0.3); }
.afhc__sev-dot{ width:6px; height:6px; border-radius:50%; background:var(--afhc-amber); box-shadow:0 0 8px var(--afhc-amber); }
.afhc__find{ margin:0 0 10px; font-size:11.5px; line-height:1.55; color:var(--afhc-ink-2); }
.afhc__find b{ color:var(--afhc-ink); font-weight:600; }
.afhc__ent{ font-family:var(--afhc-mono); font-size:10px; color:var(--afhc-cyan); background:rgba(91,164,240,0.12); border:1px solid rgba(91,164,240,0.25); border-radius:4px; padding:0 5px; }
.afhc__ent--warn{ color:var(--afhc-amber); background:rgba(224,176,64,0.12); border-color:rgba(224,176,64,0.28); }
.afhc__rec{ margin:0; padding-left:18px; }
.afhc__rec li{ margin:0 0 7px; font-size:11.5px; line-height:1.5; color:var(--afhc-ink-2); }
.afhc__rec li b{ color:var(--afhc-orange-2); font-weight:600; }
.afhc__rec li::marker{ color:var(--afhc-ink-3); font-family:var(--afhc-mono); font-size:10px; }
.afhc__chat-foot{ border-top:1px solid var(--afhc-line); padding:10px 14px; margin-top:auto; }
.afhc__agents{ font-family:var(--afhc-mono); font-size:8.5px; letter-spacing:0.06em; color:var(--afhc-ink-3); }
.afhc__inputbar{ margin-top:9px; display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:9px; background:var(--afhc-inset); border:1px solid var(--afhc-line); }
.afhc__pilot{ font-family:var(--afhc-mono); font-size:8.5px; letter-spacing:0.08em; color:var(--afhc-orange-2); border:1px solid rgba(224,176,64,0.4); border-radius:5px; padding:2px 7px; }
.afhc__input-ph{ flex:1; font-size:11px; color:var(--afhc-ink-3); }
.afhc__send{ width:20px; height:20px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; color:#0a0d12; background:linear-gradient(145deg,var(--afhc-orange-2),var(--afhc-orange)); box-shadow:0 0 12px -3px var(--afhc-orange); }

/* code review */
.afhc__pane--code{ background:linear-gradient(180deg,#0d1016,#090b10); }
.afhc__codetop{ display:flex; align-items:center; gap:12px; padding:10px 14px 0; }
.afhc__step-eyebrow{ font-family:var(--afhc-mono); font-size:8.5px; letter-spacing:0.14em; color:var(--afhc-ink-3); white-space:nowrap; }
.afhc__eda{ display:inline-flex; gap:5px; align-items:center; flex-wrap:wrap; }
.afhc__eda--inline{ gap:4px; }
.afhc__eda-label{ font-family:var(--afhc-mono); font-size:9px; letter-spacing:0.16em; color:var(--afhc-ink-3); margin-right:5px; }
.afhc__step{ width:18px; height:18px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-family:var(--afhc-mono); font-size:9px;
  background:rgba(255,255,255,0.025); border:1px solid var(--afhc-line); color:var(--afhc-ink-3); transition:color .3s,border-color .3s,background .3s,box-shadow .3s; }
.afhc__step.is-done{ color:var(--afhc-green); border-color:rgba(95,174,99,0.5); background:rgba(95,174,99,0.10); box-shadow:0 0 10px -4px var(--afhc-green); }
.afhc__step.is-active{ color:var(--afhc-orange-2); border-color:rgba(224,176,64,0.6); background:rgba(224,176,64,0.12); box-shadow:0 0 12px -3px var(--afhc-orange); }
.afhc__task{ margin:11px 14px 8px; font-size:10.5px; line-height:1.5; color:var(--afhc-ink-2); }
.afhc__task b{ color:var(--afhc-orange-2); font-family:var(--afhc-mono); font-size:9.5px; letter-spacing:0.06em; }
.afhc__code{ margin:0; padding:6px 14px 12px 0; flex:1; overflow:hidden; counter-reset:cl; font-family:var(--afhc-mono); font-size:11px; line-height:1.65; }
.afhc__code code{ display:block; }
.afhc__cl{ display:block; counter-increment:cl; white-space:pre; color:var(--tk-def); padding-left:46px; position:relative; }
.afhc__cl::before{ content:counter(cl); position:absolute; left:0; width:34px; text-align:right; color:var(--afhc-ink-3); opacity:0.6; }
.tk-kw{ color:var(--tk-kw); } .tk-fn{ color:var(--tk-fn); } .tk-str{ color:var(--tk-str); } .tk-num{ color:var(--tk-num); }
.afhc__code-foot{ display:flex; align-items:center; gap:12px; padding:10px 14px; border-top:1px solid var(--afhc-line); margin-top:auto; }
.afhc__code-foot .afhc__ok--lg{ display:inline-flex; align-items:center; }
.afhc__code-foot .afhc__chipbtn--ghost{ margin-left:auto; }

/* ════════ DASHBOARD ════════ */
.afhc__dash{ display:grid; grid-template-columns:minmax(0,4.6fr) minmax(0,7fr);
  grid-template-areas:"verdict verdict" "watch map" "daemon daemon"; gap:14px; padding:16px; }
.afhc__panel{ position:relative; min-width:0; background:linear-gradient(180deg,var(--afhc-panel-t),var(--afhc-panel-b));
  border:1px solid var(--afhc-line); border-radius:13px; padding:15px 17px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.045),0 14px 30px -20px rgba(0,0,0,0.8); }
.afhc__panel--verdict{ grid-area:verdict; } .afhc__panel--watch{ grid-area:watch; }
.afhc__panel--map{ grid-area:map; padding:15px 15px 16px; } .afhc__panel--daemon{ grid-area:daemon; padding:13px 17px; }
.afhc__head{ display:flex; align-items:center; gap:9px; margin-bottom:13px; }
.afhc__head h4{ margin:0; font-family:var(--afhc-disp); font-size:13.5px; font-weight:600; color:var(--afhc-ink); }
.afhc__head h4::before{ content:""; display:inline-block; width:3px; height:13px; margin-right:9px; border-radius:2px;
  background:linear-gradient(180deg,var(--afhc-orange-2),var(--afhc-orange)); box-shadow:0 0 10px -1px var(--afhc-orange); vertical-align:-2px; }
.afhc__tag{ margin-left:auto; font-family:var(--afhc-mono); font-size:8.5px; letter-spacing:0.16em; color:var(--afhc-ink-3); }
.afhc__verdict{ display:flex; align-items:stretch; gap:26px; flex-wrap:wrap; }
.afhc__stamp{ display:inline-flex; flex-direction:column; justify-content:center; gap:5px; padding:12px 18px; border-radius:11px; white-space:nowrap;
  border:1px solid rgba(200,66,58,0.5); background:linear-gradient(180deg,rgba(200,66,58,0.14),rgba(200,66,58,0.05)); box-shadow:0 0 26px -6px var(--afhc-red),inset 0 1px 0 rgba(255,255,255,0.06); }
.afhc__stamp b{ font-family:var(--afhc-disp); font-size:17px; font-weight:700; letter-spacing:0.06em; color:#e0746c; display:inline-flex; align-items:center; gap:9px; }
.afhc__stamp b::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--afhc-red); box-shadow:0 0 12px var(--afhc-red); animation:afhc-pulse 2.2s ease-in-out infinite; }
.afhc__stamp small{ font-family:var(--afhc-mono); font-size:8.5px; letter-spacing:0.1em; color:var(--afhc-ink-2); padding-left:18px; }
.afhc__metrics{ display:flex; gap:30px; flex:1; min-width:240px; align-items:flex-end; }
.afhc__metric{ flex:1; min-width:0; }
.afhc__metric-label{ font-family:var(--afhc-mono); font-size:9px; letter-spacing:0.14em; color:var(--afhc-ink-3); margin-bottom:3px; }
.afhc__metric-val{ font-family:var(--afhc-disp); font-weight:700; line-height:1; font-size:clamp(1.7rem,2.4vw,2.05rem); letter-spacing:-0.01em; font-variant-numeric:tabular-nums; color:var(--afhc-ink); margin-bottom:9px; }
.afhc__metric--bad .afhc__metric-val{ color:#e0746c; }
.afhc__bar{ height:7px; border-radius:4px; background:rgba(255,255,255,0.06); overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03); }
.afhc__bar>i{ display:block; height:100%; width:0; border-radius:4px; transition:width 1.2s cubic-bezier(0.22,1,0.36,1); }
.afhc__bar--good>i{ background:linear-gradient(90deg,#2bbd77,var(--afhc-green)); box-shadow:0 0 14px -2px var(--afhc-green); }
.afhc__bar--bad>i{ background:linear-gradient(90deg,#c83f44,var(--afhc-red)); box-shadow:0 0 14px -2px var(--afhc-red); }
.afhc__rows{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.afhc__row{ display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px; padding:9px 11px; border-radius:9px;
  background:linear-gradient(180deg,rgba(255,255,255,0.022),rgba(255,255,255,0)); border:1px solid var(--afhc-line-soft); transition:border-color .2s,background .2s; }
.afhc__row:hover{ border-color:rgba(224,176,64,0.3); background:rgba(224,176,64,0.04); }
.afhc__row-id{ font-family:var(--afhc-mono); font-size:11px; letter-spacing:0.04em; color:var(--afhc-orange-2); }
.afhc__row-sub{ color:var(--afhc-ink-2); font-size:9.5px; margin-top:3px; }
.afhc__pill{ font-family:var(--afhc-mono); font-size:9.5px; padding:3px 9px; border-radius:999px; white-space:nowrap; border:1px solid transparent; }
.afhc__pill--warn{ color:var(--afhc-amber); background:rgba(224,176,64,0.10); border-color:rgba(224,176,64,0.28); }
.afhc__pill--hot{ color:#e0746c; background:rgba(200,66,58,0.10); border-color:rgba(200,66,58,0.3); }
.afhc__pill--ok{ color:var(--afhc-green); background:rgba(95,174,99,0.10); border-color:rgba(95,174,99,0.28); }
.afhc__chips{ display:inline-flex; gap:6px; margin-left:auto; flex-wrap:wrap; }
.afhc__chip{ display:inline-flex; align-items:center; gap:6px; font-family:var(--afhc-mono); font-size:8.5px; letter-spacing:0.1em; color:var(--afhc-ink-2); padding:4px 9px; border-radius:7px; background:rgba(255,255,255,0.03); border:1px solid var(--afhc-line-soft); }
.afhc__chip i{ width:6px; height:6px; border-radius:50%; }
.afhc__chip--sigint i{ background:var(--afhc-amber); box-shadow:0 0 7px var(--afhc-amber); }
.afhc__chip--imint i{ background:var(--afhc-cyan); box-shadow:0 0 7px var(--afhc-cyan); }
.afhc__chip--humint i{ background:var(--afhc-green); box-shadow:0 0 7px var(--afhc-green); }
.afhc__chip--osint i{ background:var(--afhc-blue); box-shadow:0 0 7px var(--afhc-blue); }
.afhc__map{ position:relative; border-radius:11px; overflow:hidden; border:1px solid var(--afhc-line);
  background:radial-gradient(70% 90% at 60% 42%,rgba(45,90,150,0.16) 0%,rgba(10,14,22,0) 55%),radial-gradient(120% 120% at 50% 120%,#0d1320 0%,var(--afhc-inset) 60%);
  aspect-ratio:16/9; min-height:200px; box-shadow:inset 0 0 60px -10px rgba(0,0,0,0.9); }
.afhc__mapbase{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.afhc__graticule line{ stroke:rgba(120,160,220,0.10); stroke-width:1; vector-effect:non-scaling-stroke; }
.afhc__map::after{ content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03); background:radial-gradient(120% 120% at 50% 50%,transparent 60%,rgba(0,0,0,0.5) 100%); }
.afhc__sweep{ position:absolute; top:-10%; bottom:-10%; width:38%; background:linear-gradient(90deg,transparent,rgba(224,176,64,0.05) 60%,rgba(224,176,64,0.16) 92%,rgba(224,176,64,0.02)); filter:blur(1px); mix-blend-mode:screen; transform:translateX(-130%); animation:afhc-sweep 8s linear infinite; }
.afhc__ping{ position:absolute; transform:translate(-50%,-50%); width:11px; height:11px; z-index:3; }
.afhc__ping--sigint{ --c:var(--afhc-amber); } .afhc__ping--imint{ --c:var(--afhc-cyan); } .afhc__ping--humint{ --c:var(--afhc-green); } .afhc__ping--osint{ --c:var(--afhc-blue); }
.afhc__ping>b{ position:absolute; inset:2px; border-radius:50%; background:#fff; box-shadow:0 0 8px 1px var(--c,var(--afhc-orange)); }
.afhc__ping>u{ position:absolute; inset:-3px; border-radius:50%; filter:blur(3px); opacity:0.85; background:var(--c,var(--afhc-orange)); }
.afhc__ping>s{ position:absolute; inset:0; border-radius:50%; border:1.4px solid var(--c,var(--afhc-orange)); animation:afhc-ring 2.8s ease-out infinite; }
.afhc__ping-label{ position:absolute; left:15px; top:-4px; white-space:nowrap; font-family:var(--afhc-mono); font-size:8px; color:var(--afhc-ink); background:rgba(6,8,12,0.75); padding:2px 6px; border-radius:4px; border:1px solid var(--afhc-line-soft); }
.afhc__daemon{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.afhc__spark{ flex:1; min-width:130px; height:30px; }
.afhc__spark .afhc__spark-line{ fill:none; stroke:var(--afhc-orange); stroke-width:1.8; filter:drop-shadow(0 0 4px rgba(224,176,64,0.6)); }
.afhc__spark .afhc__spark-fill{ fill:url(#afhcSparkGrad); stroke:none; }
.afhc__status{ font-family:var(--afhc-mono); font-size:9.5px; letter-spacing:0.06em; color:var(--afhc-green); display:inline-flex; align-items:center; gap:7px; white-space:nowrap; }
.afhc__status::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--afhc-green); box-shadow:0 0 8px var(--afhc-green); }

/* ════════ MOTION ════════ */
@keyframes afhc-live{ 0%{box-shadow:0 0 0 0 rgba(95,174,99,0.5),0 0 10px var(--afhc-green);} 70%{box-shadow:0 0 0 8px rgba(95,174,99,0),0 0 10px var(--afhc-green);} 100%{box-shadow:0 0 0 0 rgba(95,174,99,0),0 0 10px var(--afhc-green);} }
@keyframes afhc-pulse{ 0%,100%{opacity:1;} 50%{opacity:0.45;} }
@keyframes afhc-ring{ 0%{transform:scale(0.55);opacity:0.85;} 100%{transform:scale(3.4);opacity:0;} }
@keyframes afhc-sweep{ 0%{transform:translateX(-130%);} 100%{transform:translateX(380%);} }
@keyframes afhc-line-in{ from{opacity:0;transform:translateY(5px);} to{opacity:1;transform:none;} }
@keyframes afhc-row-in{ from{opacity:0;transform:translateY(7px);} to{opacity:1;transform:none;} }
@keyframes afhc-ping-in{ 0%{opacity:0;transform:translate(-50%,-50%) scale(0.2);} 60%{opacity:1;transform:translate(-50%,-50%) scale(1.3);} 100%{opacity:1;transform:translate(-50%,-50%) scale(1);} }

/* build-in (gated by .is-live on the active view's root) */
.af-hypha-console.is-armed .afhc__view.is-active [data-line],
.af-hypha-console.is-armed .afhc__view.is-active .afhc__cl,
.af-hypha-console.is-armed .afhc__view.is-active .afhc__row,
.af-hypha-console.is-armed .afhc__view.is-active .afhc__ping{ opacity:0; }
.af-hypha-console.is-live .afhc__view.is-active [data-line]{ animation:afhc-line-in .5s cubic-bezier(0.22,1,0.36,1) both; animation-delay:calc(var(--li,0)*120ms + 200ms); }
.af-hypha-console.is-live .afhc__view.is-active .afhc__cl{ animation:afhc-line-in .32s ease-out both; animation-delay:calc(var(--li,0)*85ms + 350ms); }
.af-hypha-console.is-live .afhc__view.is-active .afhc__row{ animation:afhc-row-in .55s cubic-bezier(0.22,1,0.36,1) both; animation-delay:calc(var(--i,0)*120ms + 300ms); }
.af-hypha-console.is-live .afhc__view.is-active .afhc__ping{ animation:afhc-ping-in .6s cubic-bezier(0.22,1,0.36,1) both; animation-delay:calc(var(--i,0)*200ms + 250ms); }

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width:860px){
  .afhc__view--workspace{ grid-template-columns:1fr; }
  .afhc__pane--code{ display:none; }
  .afhc__dash{ grid-template-columns:1fr; grid-template-areas:"verdict" "map" "watch" "daemon"; }
  .afhc__class{ display:none; }
}
@media (max-width:520px){
  .afhc__tab{ padding:6px 9px; font-size:9px; } .afhc__brand{ display:none; }
  .afhc__metrics{ min-width:0; gap:18px; }
}

/* ── Reduced motion / no-JS: show Workspace, fully populated, static ──────── */
@media (prefers-reduced-motion:reduce){
  .af-hypha-console.is-armed [data-line],
  .af-hypha-console.is-armed .afhc__cl,
  .af-hypha-console.is-armed .afhc__row,
  .af-hypha-console.is-armed .afhc__ping{ opacity:1; }
  .af-hypha-console *{ animation:none !important; }
  .afhc__sweep{ display:none; }
}

.af-product-viz__stage{ width:100%; margin:0 auto; }