/* ============================================================================
 * shared/onboarding/token-join/style.css
 * ----------------------------------------------------------------------------
 * Module-specific positioning for Token Join onboarding demo.
 * Migrated to zen v0.1 (dual-classes strategy) — targets both legacy `.abox`,
 * `.o-term`, `.o-label`, `.o-token-card`, `.agent-state`, `.o-notes`, `.o-note`
 * AND new `.zen-box`, `.zen-term`, `.zen-label`, `.zen-token`, `.zen-status`
 * selectors so either stylesheet family lights up the same markup.
 *
 * All component styling (base look, state classes, color variants) now comes
 * from `zen/core/core.css` + `zen/components/*/*.css`. What remains here is
 * strictly layout (position/size) that is unique to this module.
 * ============================================================================ */

/* ── Agent (gauche) ─────────────────────────────────────────────────────── */
#box-agent {
    left: 8%; top: 38%;
    width: 18%; height: 26%;
}
#box-agent h3 { color: var(--orange); }
#box-agent .sub {
    font-size: 0.8rem; color: var(--gray);
    font-family: 'Courier New', monospace;
}

/* ── Proxy (centre) ─────────────────────────────────────────────────────── */
#box-proxy {
    left: 41%; top: 30%;
    width: 18%; height: 40%;
}
#box-proxy .sub {
    font-size: 0.8rem; color: var(--gray);
    font-family: 'Courier New', monospace;
}

/* ── Auth Service (droite) ──────────────────────────────────────────────── */
#box-auth {
    left: 74%; top: 38%;
    width: 18%; height: 26%;
}
#box-auth .sub {
    font-size: 0.8rem; color: var(--gray);
    font-family: 'Courier New', monospace;
}

/* ── Terminal admin (haut droite, HUD-ish) ──────────────────────────────── */
#box-term {
    left: 58%; top: 4%;
    width: 38%; height: 22%;
    font-size: 0.85rem;
}
#box-term .tbody,
#box-term .zen-term__body {
    padding: 10px 14px;
    line-height: 1.6;
}

/* ── Token card (positioned dynamically by JS in % of the arena) ────────── */
#tok {
    min-width: 150px;
    text-align: center;
    letter-spacing: 0.5px;
}
/* NOTE: the old `#tok::before { content: "🔑  "; }` emoji was removed in the
 * zen migration — per CLAUDE.md rule "SVG inline stroke-based, pas d'emoji".
 * The key glyph is now an inline <svg.zen-token__icon> injected by JS. */

/* ── Agent status pill (inside the agent box) ───────────────────────────── */
/* Base + state styles provided by zen/components/status-pill/status-pill.css
 * targetting both `.zen-status` and `.agent-state`. Only margin is module-local. */
.agent-state, .zen-status {
    margin-top: 6px;
}

/* ── Notes banner (pro/con — fixed HUD at bottom of scene) ──────────────── */
.o-notes {
    position: fixed;
    left: 50%; bottom: 92px;
    transform: translateX(-50%);
    display: flex; gap: 24px;
    z-index: 10;
    opacity: 0; transition: opacity 0.6s;
    pointer-events: none;
}
.o-notes.show { opacity: 1; }
.o-note {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid var(--border);
    font-size: 0.85rem;
    background: rgba(13, 17, 23, 0.8);
    font-family: 'Courier New', monospace;
}
.o-note.pro { color: var(--green);  border-color: rgba(0,230,118,0.4); }
.o-note.con { color: var(--yellow); border-color: rgba(251,191,36,0.4); }