/* ============================================================================
   settings.css — Phase R9 — Settings pane (indigo color identity).

   Indigo is the contemplative deep — the place you stop and adjust your
   tools. The page wraps every existing .card in indigo glass + accent so
   the legacy structure stays unchanged but the visual reads as the
   redesign era. Adds a topbar with avatar at corner scale and a new
   "Avatar appearance" card for the seven-template selector R1 built
   but never exposed UI for.

   All scoped to .page-settings.settings-stage[data-color="indigo"] so it
   doesn't bleed onto any other page that happens to use .card.
   ========================================================================= */

.page-settings.settings-stage {
    --s-color-0: #b896ff;       /* primary indigo */
    --s-color-1: #8964e0;       /* deeper indigo */
    --s-color-2: #ddcdff;       /* highlight */
    --s-color-3: rgba(184, 150, 255, 0.16);
    --s-color-4: rgba(184, 150, 255, 0.32);
    --s-glass:   rgba(18, 14, 36, 0.58);
    --s-glass-2: rgba(26, 20, 48, 0.72);
    --s-border:  rgba(184, 150, 255, 0.22);
    --s-border-strong: rgba(184, 150, 255, 0.42);
    --s-fg:      #f4f0ff;
    --s-fg-2:    #c2b8d8;
    --s-fg-3:    #807798;
    --s-shadow:  0 18px 42px rgba(150, 100, 220, 0.18);

    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px clamp(14px, 4vw, 28px);
    container-type: inline-size;
    color: var(--s-fg);
    min-height: 100%;
    background:
        radial-gradient(ellipse at 50% -10%, var(--s-color-3), transparent 55%),
        radial-gradient(ellipse at -10% 110%, rgba(150, 100, 220, 0.10), transparent 55%);
}

/* ── Topbar ─────────────────────────────────────────────────────── */

.settings-stage .s-topbar {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid var(--s-border);
    border-radius: 18px;
    background: var(--s-glass);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow: var(--s-shadow);
}
.settings-stage .s-title { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.settings-stage .s-sub   { margin: 4px 0 0; font-size: 12.5px; color: var(--s-fg-2); line-height: 1.45; }
.settings-stage .s-topbar-right { display: flex; align-items: center; gap: 10px; }
.settings-stage .s-avatar-host  { width: 56px; height: 56px; flex: 0 0 56px; position: relative; }

/* ── Existing .card wrapped in indigo glass ────────────────────── */

.settings-stage .card {
    border: 1px solid var(--s-border);
    border-radius: 18px;
    background: var(--s-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 16px 18px;
    color: var(--s-fg);
}
.settings-stage .card-title {
    font-size: 13px; font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--s-color-0);
    margin: 0 0 8px;
}
.settings-stage .card-sub {
    font-size: 12.5px;
    color: var(--s-fg-2);
    line-height: 1.45;
    margin: 0 0 10px;
}
.settings-stage .muted-tiny { color: var(--s-fg-3); }

/* Buttons re-tinted to indigo while preserving roles. */
.settings-stage .btn.primary {
    background: linear-gradient(180deg, var(--s-color-0), var(--s-color-1));
    color: #20143a;
    border: 1px solid var(--s-border-strong);
    box-shadow: 0 6px 18px rgba(150, 100, 220, 0.32);
}
.settings-stage .btn.primary:hover { box-shadow: 0 10px 24px rgba(150, 100, 220, 0.42); }
.settings-stage .btn.ghost {
    background: rgba(0, 0, 0, 0.32);
    color: var(--s-fg);
    border: 1px solid var(--s-border);
}
.settings-stage .btn.ghost:hover { background: var(--s-color-3); border-color: var(--s-border-strong); }
.settings-stage .btn.danger {
    background: rgba(120, 30, 20, 0.5);
    color: #ffd1c8;
    border: 1px solid rgba(255, 110, 90, 0.45);
}

/* Inputs / selects */
.settings-stage .select-input,
.settings-stage input[type="text"],
.settings-stage input[type="email"],
.settings-stage input[type="search"],
.settings-stage input[type="number"],
.settings-stage textarea {
    background: rgba(0, 0, 0, 0.36);
    border: 1px solid var(--s-border);
    color: var(--s-fg);
    border-radius: 10px;
}
.settings-stage .select-input:focus,
.settings-stage input:focus,
.settings-stage textarea:focus {
    border-color: var(--s-color-1);
    box-shadow: 0 0 0 3px var(--s-color-3);
    outline: none;
}

/* ── Identity chip inside Identity & session card ──────────────── */
.settings-stage .settings-id {
    display: flex; gap: 12px; align-items: center;
    padding: 8px 0;
}

/* Edit-nickname row added at top of identity card. */
.settings-stage .s-nick-row {
    display: flex; gap: 8px; align-items: center;
    margin-bottom: 10px;
}
.settings-stage .s-nick-row label {
    font-size: 11px; color: var(--s-fg-3);
    text-transform: uppercase; letter-spacing: 0.06em;
    flex: 0 0 auto;
}
.settings-stage .s-nick-input {
    flex: 1; padding: 8px 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.36);
    border: 1px solid var(--s-border);
    color: var(--s-fg);
    font: inherit; font-size: 14px;
    outline: none;
}
.settings-stage .s-nick-input:focus {
    border-color: var(--s-color-1);
    box-shadow: 0 0 0 3px var(--s-color-3);
}
.settings-stage .s-nick-flash {
    font-size: 11px; color: var(--s-color-0); opacity: 0;
    transition: opacity .2s ease;
}
.settings-stage .s-nick-flash[data-on="true"] { opacity: 1; }

/* ── Avatar template selector ──────────────────────────────────── */

.settings-stage .s-avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 10px;
    margin-top: 8px;
}
.settings-stage .s-avatar-tile {
    appearance: none;
    cursor: pointer;
    color: var(--s-fg);
    background: var(--s-glass-2);
    border: 1px solid var(--s-border);
    border-radius: 14px;
    padding: 10px 8px 8px;
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 6px;
    place-items: center;
    text-align: center;
    transition: transform .12s ease, border-color .15s ease, background .15s ease;
    font: inherit;
}
.settings-stage .s-avatar-tile:hover {
    transform: translateY(-2px);
    border-color: var(--s-border-strong);
    background: var(--s-color-3);
}
.settings-stage .s-avatar-tile.is-active {
    border-color: var(--s-color-0);
    background: linear-gradient(180deg, var(--s-color-3), var(--s-glass-2));
    box-shadow: 0 8px 22px rgba(150, 100, 220, 0.32);
}
.settings-stage .s-avatar-thumb {
    width: 64px; height: 64px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: #1a1530;
}
.settings-stage .s-avatar-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.settings-stage .s-avatar-name {
    font-size: 13px; font-weight: 600;
    text-transform: capitalize;
}
.settings-stage .s-avatar-mood {
    font-size: 10.5px;
    color: var(--s-fg-3);
    text-transform: lowercase;
}

/* Toggles inherit from app.css; keep the stripe consistent. */
.settings-stage .settings-toggle {
    display: flex; gap: 10px; align-items: center;
    color: var(--s-fg);
    font: inherit; font-size: 14px;
}

@media (prefers-reduced-motion: reduce) {
    .settings-stage .btn,
    .settings-stage .s-avatar-tile { transition: none; }
}