/* Shared components: the HUD family (used by six stages and the chrome),
   the brand loader dots, and small cross-stage controls like .switch. */
/* ============ core/ui/styles/hud.css ============ */
/* Shared HUD-info component (info button + expandable panel) used by the
   memory map, network overlay, builder, and canvas stages. Core UI so any
   stage can rely on it without loading another stage first. */
.hud-info-btn[aria-expanded="true"]{opacity:0 !important;pointer-events:none !important}
.hud-info-btn{position:absolute;left:24px;top:24px;width:38px;height:38px;display:grid;place-items:center;background:rgba(252,251,248,0.62);-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);border:1px solid rgba(10,10,10,0.07);border-radius:50%;box-shadow:0 1px 1px rgba(255,255,255,0.6) inset,0 14px 40px -20px rgba(10,10,10,0.4);color:rgba(10,10,10,0.62);cursor:pointer;pointer-events:auto;transition:color 0.16s var(--ease-out),border-color 0.16s var(--ease-out),transform 0.16s var(--ease-out);z-index:40}
.hud-info-btn:hover{color:#0A0A0A;border-color:rgba(10,10,10,0.14);transform:translateY(-1px)}
.hud-info-btn svg{width:19px;height:19px}.hud-info-panel{position:absolute;left:24px;top:72px;width:320px;max-width:calc(100vw - 48px);max-height:calc(100vh - 140px);overflow-y:auto;padding:22px 22px 18px;background:rgba(252,251,248,0.86);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);border:1px solid rgba(10,10,10,0.08);border-radius:18px;box-shadow:0 1px 1px rgba(255,255,255,0.6) inset,0 30px 60px -28px rgba(10,10,10,0.45);pointer-events:none;opacity:0;transform:translateY(-8px) scale(0.98);transform-origin:top left;transition:opacity 0.22s var(--ease-out),transform 0.22s var(--ease-out);z-index:41;scrollbar-width:thin}
.hud-info-panel.show{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
.hud-info-close{position:absolute !important;top:12px !important;right:12px !important;left:auto !important;bottom:auto !important;width:26px;height:26px;display:grid;place-items:center;background:none;border:none;border-radius:8px;color:rgba(10,10,10,0.4);cursor:pointer;transition:background 0.14s,color 0.14s;z-index:2}
.hud-info-close:hover{background:rgba(10,10,10,0.05);color:#0A0A0A}
.hud-info-close svg{width:15px;height:15px}
.hud-info-panel>*:not(.hud-info-close){position:static !important;inset:auto !important;top:auto !important;left:auto !important;right:auto !important;bottom:auto !important;margin:0 !important;transform:none !important;background:none !important;box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;border:none !important;max-width:none !important;width:auto !important;opacity:1 !important;pointer-events:none !important}
.hud-info-panel.show>*:not(.hud-info-close){pointer-events:auto !important}
.hud-info-panel .hud-info-block{margin-bottom:16px !important}
.hud-info-panel .hud-info-block:last-child{margin-bottom:0 !important}
.hud-info-panel .hud-info-block + .hud-info-block{padding-top:16px !important;border-top:1px solid rgba(10,10,10,0.08) !important}
.hud-info-panel .hud-info-eyebrow{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.22em;text-transform:uppercase;color:rgba(10,10,10,0.5);margin-bottom:10px !important}
.hud-info-panel .hud-info-title{font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;font-size:32px;line-height:1;color:#0A0A0A;margin-bottom:12px !important}
.hud-info-panel .hud-info-title .period{color:#DF6662;font-style:normal}
.hud-info-panel .hud-info-desc{font-family:'Inter',sans-serif;font-size:13.5px;line-height:1.6;color:rgba(10,10,10,0.62)}
.hud-info-panel .hud-info-hints{display:flex;flex-direction:column;gap:6px !important;font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:0.1em;text-transform:uppercase;color:rgba(10,10,10,0.5)}
.hud-info-panel .hud-info-hints b{color:#0A0A0A;font-weight:600}

/* ============ minimalist brand loader (three breathing dots) ============ */
.ld-dot{width:6px;height:6px;border-radius:50%;background:#DD544E;opacity:0.25;
  animation:ldBreathe 1.35s var(--ease-out, ease-in-out) infinite}
.ld-dot:nth-child(2){animation-delay:0.18s}
.ld-dot:nth-child(3){animation-delay:0.36s}
@keyframes ldBreathe{0%,100%{opacity:0.25;transform:scale(1)}45%{opacity:1;transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){.ld-dot{animation:none;opacity:0.6}}

/* Shared toggle switch — used by any stage (profile privacy rows, wallet autopilot). */
.switch{width:40px;height:22px;border-radius:999px;background:var(--ink-xlo);position:relative;transition:background 0.25s var(--ease-out);cursor:pointer;flex-shrink:0}
.switch::after{content:'';position:absolute;width:18px;height:18px;border-radius:50%;background:#fff;top:2px;left:2px;box-shadow:0 1px 2px rgba(0,0,0,0.15);transition:left 0.25s var(--ease-out)}
.switch.on{background:var(--green)}
.switch.on::after{left:20px}


/* Chat typing/bubble animations — used by agent-editor and builder, so they
   live here (shared means two or more, provably). Keyframe names are global;
   a single core definition keeps both stages honest and delete-safe. */




/* Activity list (.act-row family) — used by wallet, component-sizes, and
   browser-memory; promoted from dashboard's sheet where it was stranded. */
.activity-list{margin-top:4px}.act-row{display:grid;grid-template-columns:32px 1fr auto;gap:12px;padding:12px 0;border-top:1px solid var(--hr);align-items:center}.act-row:first-child{border-top:0;padding-top:4px}.act-icon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center}.act-row.in .act-icon{background:rgba(54,170,117,0.14);color:var(--green-dp)}.act-row.out .act-icon{background:rgba(223,102,98,0.14);color:var(--red)}.act-icon svg{width:13px;height:13px}.act-main .act-title{font-size:13px;color:var(--ink-hi);font-weight:450;line-height:1.3}.act-main .act-sub{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:var(--ink-low);letter-spacing:0.06em;margin-top:2px;text-transform:uppercase}.act-amt{font-family:'JetBrains Mono',monospace;font-size:13.5px;font-weight:600;letter-spacing:0.02em}.act-row.in .act-amt{color:var(--green-dp)}.act-row.out .act-amt{color:var(--red)}