/*
 * account-wizard.css — "Set up multiple Claude accounts" docs hub + spokes.
 *
 * PURPOSE
 *   Styles the interactive provider picker (.pc-acct-wizard) on the multi-
 *   account hub article, plus the shared content blocks reused by both the hub
 *   panels and the standalone per-provider spoke pages (steps, caveats,
 *   reliability badges, callouts, decision table, spoke index). All markup is
 *   generated from docs/marketing/data/account-setup/providers.json by
 *   scripts/docs/build-account-guides.mjs and hydrated by accountSetupWizard.js.
 *
 * ARCHITECTURE
 *   Loaded raw via WAM in default_docs.php, gated to the hub article (the only
 *   one carrying .pc-acct-wizard). Inherits the dark docs theme; every colour,
 *   space, radius, type size, line-height, weight, and transition comes from a
 *   --nllm-* / --pc-* design token (tokens.css, loaded site-wide) — no hardcoded
 *   token values (project CSS convention, hurc/no-hardcoded-* rules).
 *
 * PROGRESSIVE ENHANCEMENT
 *   Without JS, every .pc-acct-wizard__panel is visible (a readable stack).
 *   accountSetupWizard.js sets [data-acct-ready] on the wizard; only THEN does
 *   this sheet collapse the stack to "active panel only". So no-JS visitors and
 *   crawlers still get the full content.
 *
 * @copyright  (C) 2026 Neural LLM. All rights reserved.
 * @license    GNU General Public License version 2 or later; see LICENSE.txt
 */

/* ─────────────────────────────────────────────────────────────────────────────
   HUB WRAPPER + SHARED RHYTHM
   ───────────────────────────────────────────────────────────────────────────── */
.pc-acct-hub > p,
.pc-acct-spoke > p {
    /* Comfortable long-form measure for the intro/explanatory copy. */
    max-width: 70ch;
    line-height: var(--nllm-leading-relaxed);
}

.pc-acct-hub h2 {
    margin-top: var(--nllm-space-xl);
}

/* ─────────────────────────────────────────────────────────────────────────────
   CALLOUTS — info (clarifier), note (honesty/rotation), cta (spoke footer)
   A left accent bar + tinted surface separates asides from body prose.
   ───────────────────────────────────────────────────────────────────────────── */
.pc-acct-callout {
    margin: var(--nllm-space-lg) 0;
    padding: var(--nllm-space-md) var(--nllm-space-lg);
    border-radius: var(--nllm-radius-md);
    border-left: 4px solid var(--nllm-cyan-bright);
    background: var(--nllm-surface-soft);
}

.pc-acct-callout h2 {
    /* Callout headings are intra-section labels, not document structure. */
    margin: 0 0 var(--nllm-space-sm);
    font-size: var(--nllm-text-h3);
}

.pc-acct-callout p {
    margin: var(--nllm-space-sm) 0 0;
    line-height: var(--nllm-leading-relaxed);
}

.pc-acct-callout--note {
    border-left-color: var(--pc-bolt-amber);
}

.pc-acct-callout--cta {
    /* Positive "you're done" note — brand cyan, distinct from the info/note bars. */
    border-left-color: var(--nllm-cyan);
    background: color-mix(in srgb, var(--nllm-cyan) 8%, transparent);
}

.pc-acct__terms {
    font-size: var(--nllm-text-sm);
    color: var(--nllm-text-subtle);
}

/* ─────────────────────────────────────────────────────────────────────────────
   DECISION-AID TABLE — "which method is right for me?"
   ───────────────────────────────────────────────────────────────────────────── */
.pc-acct-decide {
    width: 100%;
    border-collapse: collapse;
    margin: var(--nllm-space-md) 0 var(--nllm-space-lg);
    font-size: var(--nllm-text-sm);
}

.pc-acct-decide th,
.pc-acct-decide td {
    text-align: left;
    padding: var(--nllm-space-sm) var(--nllm-space-md);
    border-bottom: 1px solid var(--nllm-surface-edge);
    vertical-align: top;
}

.pc-acct-decide th {
    color: var(--nllm-cyan-bright);
    font-size: var(--nllm-text-sm);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.pc-acct-decide a {
    color: var(--nllm-cyan-bright);
    font-weight: var(--nllm-font-weight-semibold);
}

/* ─────────────────────────────────────────────────────────────────────────────
   THE PICKER — provider buttons
   A responsive grid of tappable cards; each shows the provider name and its
   reliability label. The active card is highlighted once JS is wired.
   ───────────────────────────────────────────────────────────────────────────── */
.pc-acct-wizard {
    margin: var(--nllm-space-lg) 0 var(--nllm-space-xl);
}

.pc-acct-wizard__prompt {
    margin: 0 0 var(--nllm-space-sm);
    font-weight: var(--nllm-font-weight-semibold);
    color: var(--nllm-text-muted);
}

.pc-acct-wizard__pickers {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--nllm-space-sm);
}

.pc-acct-wizard__pick {
    display: flex;
    flex-direction: column;
    gap: var(--nllm-space-xs);
    padding: var(--nllm-space-sm) var(--nllm-space-md);
    text-align: left;
    cursor: pointer;
    border: 1px solid var(--nllm-surface-edge);
    border-radius: var(--nllm-radius-md);
    background: var(--nllm-surface);
    color: var(--nllm-text);
    font: inherit;
    transition: border-color var(--nllm-transition-fast),
        background var(--nllm-transition-fast),
        transform var(--nllm-transition-fast);
}

.pc-acct-wizard__pick:hover,
.pc-acct-wizard__pick:focus-visible {
    border-color: var(--nllm-cyan-bright);
    outline: none;
}

.pc-acct-wizard__pick:active {
    transform: translateY(1px);
}

/* Active card — only meaningful once the JS picker is live. */
.pc-acct-wizard__pick.is-active {
    border-color: var(--nllm-cyan-bright);
    background: color-mix(in srgb, var(--nllm-cyan-bright) 12%, var(--nllm-surface));
    box-shadow: 0 0 0 1px var(--nllm-cyan-bright) inset;
}

.pc-acct-wizard__pick-name {
    font-weight: var(--nllm-font-weight-bold);
}

/* Reliability badge — colour-coded so the strongest methods read at a glance.
   No green token exists, so brightest cyan = highest, base cyan = high, amber =
   medium (the same scale the OG card + brand use). */
.pc-acct-wizard__pick-rel {
    font-size: var(--nllm-text-sm);
    font-weight: var(--nllm-font-weight-semibold);
    letter-spacing: 0.02em;
}

.pc-acct-wizard__pick-rel--highest,
.pc-acct__reliability--highest {
    color: var(--nllm-cyan-bright);
}

.pc-acct-wizard__pick-rel--high,
.pc-acct__reliability--high {
    color: var(--nllm-cyan);
}

.pc-acct-wizard__pick-rel--medium,
.pc-acct__reliability--medium {
    color: var(--pc-bolt-amber);
}

/* ─────────────────────────────────────────────────────────────────────────────
   THE PANELS — one per provider
   Default: all visible (no-JS fallback). With [data-acct-ready] (set by JS),
   only the .is-active panel shows.
   ───────────────────────────────────────────────────────────────────────────── */
.pc-acct-wizard__panel {
    margin-top: var(--nllm-space-lg);
    padding-top: var(--nllm-space-lg);
    border-top: 1px solid var(--nllm-surface-edge);
}

.pc-acct-wizard__panel h3 {
    margin: 0 0 var(--nllm-space-sm);
}

/* JS-enhanced: collapse the stack to the active panel only. The [hidden]
   attribute the script toggles already hides inactive panels; this rule is the
   belt-and-braces visual fallback and removes the top divider on the lone
   visible panel. */
.pc-acct-wizard[data-acct-ready] .pc-acct-wizard__panel {
    border-top: 0;
    padding-top: var(--nllm-space-sm);
}

.pc-acct-wizard[data-acct-ready] .pc-acct-wizard__panel:not(.is-active) {
    display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SHARED GUIDE CONTENT — used inside hub panels AND on spoke pages
   ───────────────────────────────────────────────────────────────────────────── */
.pc-acct__reliability {
    font-size: var(--nllm-text-sm);
}

.pc-acct__fit {
    margin: var(--nllm-space-sm) 0;
    color: var(--nllm-text-muted);
}

.pc-acct__steps {
    margin: var(--nllm-space-sm) 0 var(--nllm-space-md);
    padding-left: var(--nllm-space-lg);
    line-height: var(--nllm-leading-relaxed);
}

.pc-acct__steps > li {
    margin-bottom: var(--nllm-space-sm);
}

/* Inline addresses/snippets (e.g. you+claude2@gmail.com) inherit the global
   <code> style; we only need long ones to wrap instead of overflowing. */
.pc-acct__steps code,
.pc-acct__summary code {
    word-break: break-word;
}

.pc-acct__caveats {
    margin: var(--nllm-space-sm) 0 var(--nllm-space-md);
    padding-left: var(--nllm-space-md);
    color: var(--nllm-text-subtle);
    line-height: var(--nllm-leading-relaxed);
}

.pc-acct__protip {
    margin: var(--nllm-space-sm) 0;
    padding: var(--nllm-space-sm) var(--nllm-space-md);
    border-radius: var(--nllm-radius-sm);
    background: color-mix(in srgb, var(--pc-bolt-amber) 10%, transparent);
    border-left: 3px solid var(--pc-bolt-amber);
}

.pc-acct__more a {
    font-weight: var(--nllm-font-weight-semibold);
    color: var(--nllm-cyan-bright);
}

/* ─────────────────────────────────────────────────────────────────────────────
   SPOKE INDEX + SPOKE LEDE
   ───────────────────────────────────────────────────────────────────────────── */
.pc-acct-index {
    margin: var(--nllm-space-sm) 0 var(--nllm-space-lg);
    padding-left: var(--nllm-space-md);
    line-height: var(--nllm-leading-relaxed);
}

.pc-acct-spoke__lede {
    color: var(--nllm-text-muted);
    border-left: 3px solid var(--nllm-cyan-bright);
    padding-left: var(--nllm-space-md);
}