/* ──────────────────────────────────────────────────────────────────────────
   Sheet Components — static/css/sheet-components.css
   Shared component styles used by both sheet.html and play.html.
   These are the canonical patterns — never redefine them per-page.
   ────────────────────────────────────────────────────────────────────────── */

/* ── Panel (primary content container) ── */
.panel { background:var(--surface-color);border:1px solid var(--border-color);border-radius:9px;padding:0.75rem 0.9rem;margin-bottom:0.7rem; }
.panel:last-child { margin-bottom:0; }
.panel-title { font-size:0.63rem;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-muted);border-bottom:1px solid var(--border-color);padding-bottom:0.28rem;margin-bottom:0.55rem; }

/* Opt-in Direction A variant — "lit from below". Use on panels that deserve
   brand emphasis (character header, live-encounter panels). In dark mode the
   bottom border warms toward the accent; in light mode it picks up terracotta. */
.panel.panel--lit {
    border-bottom-color: color-mix(in srgb, var(--ember-color) 40%, var(--border-color));
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--ember-color) 18%, transparent);
}

/* ── Buttons ── */

/* inline-flex+gap means text-only buttons render identically to inline-block,
   and icon+label buttons (🪄 Generate, ← Back) get proper spacing without a
   per-page override. Promoted from wizard_create/level_up/etc. (2026-04-21). */
.btn { display:inline-flex;align-items:center;gap:0.3rem;padding:0.38rem 0.85rem;border-radius:6px;font-size:0.8rem;font-weight:600;text-decoration:none;cursor:pointer;border:1px solid transparent;font-family:inherit;transition:all .15s;white-space:nowrap;appearance:none; }
.btn-secondary { background:transparent;color:var(--text-muted);border-color:var(--border-color); }
.btn-secondary:hover { color:var(--text-color);border-color:var(--border-strong); }
.btn-primary { background:var(--accent-color);color:#1a1a1a; }
.btn-primary:hover { filter:brightness(1.1); }
.btn-danger { background:transparent;color:var(--danger-color);border-color:var(--danger-color); }
.btn-danger:hover { background:var(--danger-color);color:#fff; }

/* Affirmative variant — mirrors .btn-danger but in success-green. Used for
   approve/accept actions (rest requests, join approvals, etc.). */
.btn-success { background:transparent;color:var(--success-color);border-color:var(--success-color); }
.btn-success:hover { background:var(--success-color);color:#fff; }
.btn-sm { padding:0.28rem 0.6rem;font-size:0.75rem; }

/* Extra-small — for compact panels (notifications bell, popovers, inline rows). */
.btn-xs { padding:0.18rem 0.5rem;font-size:0.72rem;line-height:1.1;font-weight:500;letter-spacing:0.01em; }

/* AI/magic-action variant — amber-tinted for "Generate"/"Suggest" buttons in
   the wizard and DM screen. Promoted from wizard_create local CSS (2026-04-21).
   Mobile-only min-height for touch target; desktop uses standard .btn sizing. */
.btn-ai { background:rgb(255,179,0,0.08);color:var(--accent-color);border-color:rgb(255,179,0,0.4);font-size:0.78rem;padding:0.35rem 0.7rem;justify-content:center;line-height:1; }
.btn-ai:hover { background:rgb(255,179,0,0.18);border-color:var(--accent-color); }
.btn-ai:disabled { opacity:0.5;cursor:not-allowed; }

@media (width <= 900px) { .btn-ai { min-height: 44px; } }

/* ── Slide-out trigger ─────────────────────────────────────────────────────
   Canonical button used to open a right-side slide-out panel (Play screen
   Sheet, Encounter sidebar, etc.).

   Placement: inline at the top of the page's main content container —
   NOT floating/fixed. Fixed positioning overlapped real page content.
   Pages are responsible for putting the include where it makes sense
   (usually immediately inside the main content wrapper, above any other
   panels). The built-in margin-bottom separates it from what follows.

   Visual style matches the original Encounter drawer toggle: muted text
   on surface background, minimal chrome, no bold weight. Hover lights
   up to accent.

   - Hidden when the panel is open (panel has its own close control).
   - Larger touch target (44px) at ≤900px for tablet/mobile.
   - Use with a leading hamburger glyph (&#9776;) + label, e.g. "☰ Sheet". */
.slideout-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.7rem;
    margin-bottom: 0.6rem;
    font-size: 0.78rem;
    font-family: Inter, sans-serif;
    color: var(--text-muted);
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.slideout-trigger:hover {
    color: var(--accent-color);
    border-color: var(--accent-color);
}
.slideout-trigger.open { display: none; }

@media (width <= 900px) {
    .slideout-trigger { padding: 0.55rem 0.9rem; min-height: 44px; }
}

/* ── Slide-out panel + overlay — shared shell for every right-side panel.
   Page-specific internals (Play Sheet tabs, Encounter sidebar lists) live
   on the page. The shell (position, size, transition, border, backdrop)
   is canonical and shared. */
.slideout-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(70vw, 800px);
    background: var(--bg-color);
    z-index: 1001;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    overflow-x: hidden;
    overflow-y: auto;
    border-left: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}
.slideout-panel.open { transform: translateX(0); }

.slideout-overlay {
    position: fixed;
    inset: 0;
    background: rgb(0, 0, 0, 0.55);
    z-index: 1000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.slideout-overlay.open { opacity: 1; pointer-events: auto; }

/* Close button — 32×32 circular icon button.  Used in every slide-out
   panel header.  Hover lights up to accent, matching .slideout-trigger. */
.slideout-close {
    background: none;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.15s, border-color 0.15s;
}
.slideout-close:hover { color: var(--accent-color); border-color: var(--accent-color); }

/* Header row used at the top of a slide-out panel — title on the left,
   close button on the right. */
.slideout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}

.slideout-header .slideout-title {
    font-family: Cinzel, serif;
    color: var(--accent-color);
    font-size: 0.95rem;
    margin: 0;
}

/* ── Text inputs ───────────────────────────────────────────────────────────
   Canonical input for text, number, date, email, password, and select.
   Every form field in the app should use this. Sized to align with .btn
   (padding 0.38rem 0.7rem, 0.82rem font) so buttons and inputs line up
   side-by-side in a row without ad-hoc height overrides.

   Size variant: .input-sm for inline compact fields (HP, initiative). */
.input,
.input-sm {
    padding: 0.38rem 0.7rem;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.82rem;
    color: var(--text-color);
    transition: border-color 0.15s;
    appearance: none;
}

.input:focus,
.input-sm:focus {
    outline: none;
    border-color: var(--accent-color);
}

.input:focus-visible,
.input-sm:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 1px;
    border-radius: 3px;
}

.input[disabled],
.input-sm[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.input-sm {
    padding: 0.25rem 0.45rem;
    font-size: 0.78rem;
}

/* ── Pills ─────────────────────────────────────────────────────────────────
   Canonical compact chip/badge/condition-pill convention. Small like a
   button's btn-xs, but shaped as a pill (rounded ends). Minimal padding,
   fits content. Variants follow the same colour vocabulary as buttons.
   Pills are NEVER bloated to touch-target size — they are visual state
   markers; their tap target (when interactive) comes from surrounding
   layout. */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    border: 1px solid var(--border-color);
    background: transparent;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    cursor: default;
    transition: color 0.12s, border-color 0.12s, background 0.12s;
}
.pill.pill--interactive { cursor: pointer; }
.pill.pill--interactive:hover { color: var(--text-color); border-color: var(--border-strong); }

.pill.pill-danger { color: var(--danger-color); border-color: color-mix(in srgb, var(--danger-color) 40%, var(--border-color)); background: color-mix(in srgb, var(--danger-color) 10%, transparent); }
.pill.pill-success { color: var(--success-color); border-color: color-mix(in srgb, var(--success-color) 40%, var(--border-color)); background: color-mix(in srgb, var(--success-color) 10%, transparent); }
.pill.pill-info { color: var(--info-color); border-color: color-mix(in srgb, var(--info-color) 40%, var(--border-color)); background: color-mix(in srgb, var(--info-color) 10%, transparent); }
.pill.pill-accent { color: var(--accent-color); border-color: color-mix(in srgb, var(--accent-color) 40%, var(--border-color)); background: color-mix(in srgb, var(--accent-color) 10%, transparent); }

/* ── HP Controls ── */
.hp-field-label { font-size:0.62rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);margin-bottom:0.18rem; }
.hp-field-row { display:flex;align-items:center;gap:0.4rem; }
.hp-step { background:none;border:1px solid var(--border-color);border-radius:4px;color:var(--text-muted);cursor:pointer;font-size:0.85rem;padding:0.1rem 0.45rem;line-height:1;font-family:inherit;transition:all .15s; }
.hp-step:hover { border-color:var(--accent-color);color:var(--accent-color); }
.hp-input { width:58px;text-align:center;padding:0.3rem 0.2rem;background:var(--bg-color);border:1px solid var(--border-color);border-radius:5px;font-size:1.1rem;font-weight:700;font-family:inherit;color:var(--text-color); }
.hp-input.current { color:var(--accent-color); }
.hp-input.temp { color:var(--info-color);border-color:color-mix(in srgb, var(--info-color) 25%, transparent); }
.hp-max-row { display:flex;align-items:center;gap:0.6rem;margin-top:0.25rem; }
.hp-max-label { font-size:0.78rem;color:var(--text-muted);white-space:nowrap; }
.hp-full-btn { background:none;border:1px solid var(--border-color);border-radius:3px;color:var(--text-muted);cursor:pointer;font-size:0.63rem;padding:0.08rem 0.35rem;font-family:inherit;transition:all .15s; }
.hp-full-btn:hover { border-color:var(--success-color);color:var(--success-color); }
.hp-effective { display:flex;justify-content:space-between;align-items:center;margin-top:0.45rem;padding-top:0.4rem;border-top:1px solid var(--border-color); }

/* ── Action Economy Tokens ── */
.action-tok { font-size:0.75rem;padding:0.25rem 0.6rem;border-radius:5px;border:1px solid var(--accent-color);background:color-mix(in srgb, var(--accent-color) 6%, transparent);color:var(--accent-color);cursor:pointer;font-family:inherit;font-weight:600;transition:all .15s; }
.action-tok.used { border-color:var(--border-color);background:none;color:var(--text-muted);text-decoration:line-through;opacity:0.55; }
.action-tok:hover { background:color-mix(in srgb, var(--accent-color) 12%, transparent); }

/* ── Exhaustion ── */
.exhaust-row { display:flex;align-items:center;gap:0.4rem;margin-top:0.45rem;padding-top:0.4rem;border-top:1px solid var(--border-color);font-size:0.72rem; }
.exhaust-label { flex:1;color:var(--text-muted); }
.exhaust-badge { font-weight:700;font-size:0.8rem;min-width:1.2rem;text-align:center; }
.exhaust-badge.none { color:var(--text-muted); }
.exhaust-badge.low { color:var(--accent-color); }
.exhaust-badge.high { color:var(--danger-color); }
.exhaust-adj { background:none;border:1px solid var(--border-color);border-radius:3px;color:var(--text-muted);cursor:pointer;font-size:0.7rem;padding:0 0.3rem;line-height:1.4;font-family:inherit; }
.exhaust-adj:hover { border-color:var(--accent-color);color:var(--accent-color); }
.exhaust-desc { font-size:0.63rem;color:var(--danger-color); }

/* ── Hit Dice ── */
.hd-spend-btn { background:none;border:1px solid var(--border-color);border-radius:3px;color:var(--text-muted);cursor:pointer;font-size:0.63rem;padding:0.05rem 0.28rem;font-family:inherit;margin-top:0.1rem;transition:all .15s; }
.hd-spend-btn:hover { border-color:var(--accent-color);color:var(--accent-color); }

/* Death-save label colour hints. Used on both sheet.html and play.html. */
.ds-label--success { color: var(--success-color); }
.ds-label--failure { color: var(--danger-color); }

/* Effective HP value when temp HP is active — theme-reactive info-blue. */
.play-temp-hp-value { font-size: 0.88rem; font-weight: 700; color: var(--info-color); }

/* ── Death Saves ── */
.ds-row { display:flex;align-items:center;gap:0.4rem;font-size:0.71rem;margin-bottom:0.28rem; }
.ds-row:last-child { margin-bottom:0; }
.ds-label { min-width:3rem; }
.ds-dots { display:flex;gap:0.2rem; }
.death-dot { width:14px;height:14px;border-radius:50%;border:1.5px solid var(--border-color);background:transparent;cursor:pointer;padding:0;box-sizing:content-box;transition:background .15s,border-color .15s; }
.death-dot.success { border-color:var(--success-color); }
.death-dot.failure { border-color:var(--danger-color); }
.death-dot.success.filled { background:var(--success-color); }
.death-dot.failure.filled { background:var(--danger-color); }

/* ── Spell Slots ── */

/* ── Pip (canonical) ───────────────────────────────────────────────────────
   Countable markers. Shape carries meaning:
   - Spell slots → CIRCLE (.pip, .slot-pip). Spells are "arcane," curved.
   - Class resources (Ki, Rage, Sorcery Points, etc.) → SQUARE
     (.resource-pip, .pip--square). Resources are "mundane," grid-like.
   Size and hover behaviour are shared. Container label differentiates use.
   See docs/design-system.md § 5 Pip Components. */
.pip {
    width: 14px;
    height: 14px;
    border-radius: 50%;     /* spell-slot circle — use .pip--square for resources */
    border: 1.5px solid var(--accent-color);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background .12s;
    box-sizing: content-box;
    flex-shrink: 0;
}
.pip.filled { background: var(--accent-color); }
.pip:hover { opacity: .75; }

/* Square variant for class-resource use. */
.pip--square { border-radius: 3px; }

.slot-row { display:flex;align-items:center;gap:0.4rem;margin-bottom:0.28rem; }
.slot-label { font-size:0.68rem;color:var(--text-muted);width:44px;flex-shrink:0; }
.slot-pact-lv { font-size:0.6rem;color:var(--text-muted); }
.slot-pips { display:flex;gap:0.2rem;flex-wrap:wrap; }

/* Spell slot pip — circle (shape encodes "spell"). */
.slot-pip {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--accent-color);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background .12s;
    box-sizing: content-box;
    flex-shrink: 0;
}
.slot-pip.filled { background: var(--accent-color); }
.slot-pip:hover { opacity: .75; }

/* Class-resource pip — SQUARE (shape encodes "mundane resource" —
   Ki points, Rage uses, Sorcery Points, etc.). Same size as spell-slot
   circle; the 3px corner radius is the only visual difference. */
.resource-pip {
    width: 14px;
    height: 14px;
    border-radius: 3px;
    border: 1.5px solid var(--accent-color);
    background: transparent;
    cursor: pointer;
    padding: 0;
    transition: background .12s;
    box-sizing: content-box;
    flex-shrink: 0;
}
.resource-pip.filled { background: var(--accent-color); }
.resource-pip:hover { opacity: .75; }

/* ── Class Resources ── */
.resource-list { margin-top:0.5rem; }
.resource-row { display:flex;align-items:center;gap:0.4rem;margin-bottom:0.3rem;font-size:0.75rem; }
.resource-name { flex:1;color:var(--text-color); }
.resource-pips { display:flex;gap:0.2rem;flex-wrap:wrap; }

/* ── Concentration ── */
.conc-row { display:flex;align-items:center;gap:0.4rem;margin-bottom:0.5rem;padding-bottom:0.45rem;border-bottom:1px solid var(--border-color); }
.conc-badge { flex:1;font-size:0.75rem;padding:0.18rem 0.55rem;border-radius:4px;background:color-mix(in srgb, var(--info-color) 12%, transparent);color:var(--info-color);border:1px solid color-mix(in srgb, var(--info-color) 30%, transparent);display:flex;align-items:center;gap:0.35rem; }
.conc-clear { background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:0.72rem;padding:0;line-height:1; }
.conc-clear:hover { color:var(--danger-color); }

/* ── Condition Chip — alias to the canonical .pill.pill-danger visual.
   Retained as a separate class only because existing markup references
   it directly; new code should use .pill .pill-danger. */
.condition-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--danger-color) 40%, var(--border-color));
    background: color-mix(in srgb, var(--danger-color) 10%, transparent);
    color: var(--danger-color);
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
    margin: 0.1rem;
}

/* × remove button inside a pill/condition-chip. Visual-only — no touch-
   target bloat. The pill + remove button together is the tap target. */
.condition-remove-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0 0.1rem;
    margin-left: 0.15rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.condition-remove-btn:hover { color: var(--danger-color); }

/* ── Data Tables ── */
.data-table { width:100%;border-collapse:collapse;font-size:0.8rem; }
.data-table th { text-align:left;font-size:0.65rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-muted);padding:0.25rem 0.38rem;border-bottom:1px solid var(--border-color); }
.data-table td { padding:0.3rem 0.38rem;border-bottom:1px solid color-mix(in srgb, var(--border-color) 40%, transparent); }
.data-table tr:last-child td { border-bottom:none; }

/* ── Discarded-row helpers ──
   Promoted from `templates/characters/deleted.html` and the now-removed
   `.discarded-table` block in `list.html` (issue #166). Both surfaces render
   the shared `_discarded_characters.html` partial, which composes
   `.data-table` with these three helpers. `.btn-restore` is a legacy variant
   per the R2 canonical-class guard (intentionally NOT folded into
   `.btn-primary` because the green-on-green palette is part of the restore
   affordance). */
.btn-restore { background:color-mix(in srgb, var(--success-color) 12%, transparent);color:var(--success-color);border-color:var(--success-color); }
.btn-restore:hover { background:var(--success-color);color:#fff; }
.char-name { font-weight:600;color:var(--text-color); }
.days-left { font-size:0.78rem; }
.days-left.urgent { color:var(--danger-color); }
.days-left.ok { color:var(--text-muted); }

/* ── Rest Button ── */

/* width:100% fills narrow HP-card contexts; max-width:420px prevents the button from
   spanning the full 820px bottom-sheet on iPad Air portrait (design-system audit 2026-04-21). */
.rest-btn { width:100%;max-width:420px;padding:0.3rem;font-size:0.72rem;border-radius:6px;border:1px solid var(--border-color);background:transparent;color:var(--text-muted);cursor:pointer;font-family:inherit;transition:all .15s; }
.rest-btn:hover { border-color:var(--accent-color);color:var(--accent-color); }
.rest-btn.pending { border-color:var(--accent-color);color:var(--accent-color);cursor:default; }
.rest-result { margin-top:0.45rem;font-size:0.75rem;padding:0.25rem 0.5rem;border-radius:4px;display:flex;flex-direction:column;gap:0.1rem;position:relative;padding-right:1.4rem; }
.rest-result.rest-approved { color:var(--success-color);background:color-mix(in srgb, var(--success-color) 10%, transparent); }
.rest-result.rest-denied { color:var(--danger-color);background:color-mix(in srgb, var(--danger-color) 10%, transparent); }
.rest-result-time { color:var(--text-muted);font-size:0.7rem; }
.rest-result-dismiss { background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:0.75rem;padding:0;line-height:1;position:absolute;top:0.3rem;right:0.4rem; }
.rest-result-dismiss:hover { color:var(--text-color); }

/* ── Rest Modal ── */
.rest-modal-overlay { display:none;position:fixed;inset:0;background:rgb(0,0,0,.6);z-index:200;align-items:center;justify-content:center; }
.rest-modal-overlay.open { display:flex; }
.rest-modal { background:var(--surface-color);border:1px solid var(--border-color);border-radius:12px;padding:1.4rem;width:100%;max-width:320px;text-align:center; }
.rest-modal h3 { font-family:Cinzel,serif;color:var(--accent-color);font-size:0.95rem;margin:0 0 0.45rem; }
.rest-modal p { font-size:0.79rem;color:var(--text-muted);margin:0 0 1rem; }
.rest-choices { display:flex;gap:0.5rem;justify-content:center; }
.rest-choice { flex:1;padding:0.55rem;border-radius:8px;border:1px solid var(--border-color);background:transparent;color:var(--text-color);font-size:0.81rem;font-family:inherit;cursor:pointer;transition:all .15s; }
.rest-choice:hover { border-color:var(--accent-color);color:var(--accent-color); }
.rest-cancel { margin-top:0.75rem;font-size:0.74rem;color:var(--text-muted);background:none;border:none;cursor:pointer;font-family:inherit; }
.rest-cancel:hover { color:var(--text-color); }

/* ── Proficiency Dots ── */
.dot { width:9px;height:9px;border-radius:50%;flex-shrink:0;border:1.5px solid var(--border-color);background:transparent; }
.dot.prof { background:var(--accent-color);border-color:var(--accent-color); }
.dot.expert { background:var(--info-color);border-color:var(--info-color); }

/* ── Check/Skill Rows ── */
.check-list { font-size:0.77rem; }
.check-item { display:flex;align-items:center;gap:0.35rem;padding:0.16rem 0.3rem;border-radius:3px; }
.check-item:nth-child(odd) { background:color-mix(in srgb, var(--text-color) 2.5%, transparent); }
.check-name { flex:1; }
.check-mod { font-weight:600;color:var(--accent-color);min-width:2rem;text-align:right;font-size:0.79rem; }

/* ── Inspiration ── */
.inspiration-btn { padding:0.22rem 0.7rem;border-radius:5px;font-size:0.75rem;font-weight:600;border:1px solid var(--border-color);background:transparent;color:var(--text-muted);cursor:pointer;font-family:inherit;transition:all .15s; }

/* Inspiration — brighter gold than accent to signal reward state. */
.inspiration-btn.active {
    border-color: var(--inspiration-color);
    color: var(--inspiration-color);
    background: color-mix(in srgb, var(--inspiration-color) 18%, transparent);
}
.inspiration-btn:hover { border-color: var(--inspiration-color); color: var(--inspiration-color); }

/* ── Source Pills ── */
.source-pill { display:inline-block;font-size:0.58rem;padding:0.08rem 0.35rem;border-radius:3px;background:color-mix(in srgb, var(--magic-color) 15%, transparent);color:var(--magic-color);font-weight:600;letter-spacing:0.03em;margin-left:0.35rem;vertical-align:middle; }

/* ── Badges ── */
.badge { font-size:0.6rem;padding:0.09rem 0.32rem;border-radius:3px;font-weight:600; }
.badge-ritual { background:color-mix(in srgb, var(--magic-color) 20%, transparent);color:var(--magic-color); }
.badge-conc { background:color-mix(in srgb, var(--info-color) 20%, transparent);color:var(--info-color); }

/* ── Ability Scores ── */
.ability-list { display:flex;flex-direction:column;gap:0.35rem; }
.ability-item { background:var(--bg-color);border:1px solid var(--border-color);border-radius:7px;padding:0.32rem 0.4rem;text-align:center; }
.ab-label { font-size:0.57rem;text-transform:uppercase;letter-spacing:0.07em;color:var(--text-muted); }
.ab-mod { font-size:1.45rem;font-weight:700;line-height:1.05;color:var(--text-color); }
.ab-score { font-size:0.66rem;color:var(--text-muted); }

/* ── Features (expandable rows) ── */
.feature-item { border-bottom:1px solid color-mix(in srgb, var(--border-color) 35%, transparent); }
.feature-item:last-child { border-bottom:none; }
.feature-item-header { display:flex;align-items:baseline;gap:0.4rem;padding:0.38rem 0;cursor:pointer;user-select:none; }
.feature-item-header:hover .feature-name { color:var(--accent-color); }
.feature-caret { font-size:0.58rem;color:var(--text-muted);transition:transform .15s;flex-shrink:0;margin-top:0.1rem; }
.feature-item.open .feature-caret { transform:rotate(180deg); }
.feature-name { font-weight:600;font-size:0.82rem;color:var(--accent-color); }
.feature-source { font-size:0.65rem;color:var(--text-muted);margin-left:auto;white-space:nowrap;flex-shrink:0; }
.feature-item-body { display:none;padding:0 0 0.5rem 1rem; }
.feature-item.open .feature-item-body { display:block; }
.feature-desc { font-size:0.78rem;color:var(--text-muted);line-height:1.5; }
.feature-choice { font-size:0.75rem;color:var(--accent-color);margin-bottom:0.3rem;font-style:italic; }

/* ── Dot legend ── */
.dot-legend { display:flex;gap:0.75rem;font-size:0.6rem;color:var(--text-muted);margin-bottom:0.4rem; }
.dot-legend-item { display:flex;align-items:center;gap:0.2rem; }

/* ── Spell Cards (from sheet.html) ── */
.spell-level-block { margin-bottom:0.6rem; }
.spell-level-header { font-size:0.72rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:0.07em;margin-bottom:0.3rem;padding-bottom:0.2rem;border-bottom:1px solid var(--border-color); }
.spell-card-grid { display:grid;grid-template-columns:1fr 1fr;gap:0.35rem; }

@media (width <= 1500px) { .spell-card-grid { grid-template-columns:1fr; } }
.spell-card { background:var(--bg-color);border:1px solid var(--border-color);border-radius:7px;overflow:hidden;cursor:pointer; }
.spell-card.open { grid-column:1/-1; }
.spell-card-header { display:flex;align-items:center;gap:0.5rem;padding:0.42rem 0.65rem;user-select:none; }
.spell-card-header:hover { background:color-mix(in srgb, var(--text-color) 4%, transparent); }
.spell-card-name { font-weight:600;font-size:0.81rem;flex:1; }
.spell-card-school { font-size:0.66rem;color:var(--text-muted); }
.spell-card-badges { display:flex;gap:0.25rem; }
.spell-caret { color:var(--text-muted);font-size:0.72rem; }
.spell-card-body { display:none;padding:0.55rem 0.65rem;font-size:0.78rem;color:var(--text-muted);line-height:1.5; }
.spell-card.open .spell-card-body { display:block; }
.spell-card.open .spell-card-header { border-bottom:1px solid var(--border-color); }
.spell-meta-row { display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:0.45rem;font-size:0.75rem; }
.spell-meta-item strong { color:var(--text-color); }
.spell-at-higher { margin-top:0.45rem;padding-top:0.45rem;border-top:1px solid color-mix(in srgb, var(--border-color) 50%, transparent);font-style:italic; }

/* ── Cast Spell Sheet ── */
.cast-modal-overlay {
    position: fixed; inset: 0; background: rgb(0,0,0,0.5);
    z-index: 1100; opacity: 0; pointer-events: none; transition: opacity 0.2s;
}
.cast-modal-overlay.open { opacity: 1; pointer-events: auto; }

.cast-modal {
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 1101;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-bottom: none;
    border-radius: 14px 14px 0 0;
    max-height: 70vh;
    display: flex; flex-direction: column;
    transform: translateY(100%);
    transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
}
.cast-modal.open { transform: translateY(0); }
.cast-modal-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--border-color); margin: 10px auto 4px; flex-shrink: 0; }

.cast-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.35rem 0.9rem 0.4rem; border-bottom: 1px solid var(--border-color); flex-shrink: 0;
}
.cast-modal-title { font-size: 0.82rem; font-weight: 700; color: var(--text-color); }
.cast-modal-close { background: none; border: none; color: var(--text-muted); font-size: 1rem; cursor: pointer; padding: 0.15rem 0.3rem; }
.cast-modal-spells { overflow-y: auto; flex: 1; min-height: 0; padding: 0.3rem 0; overscroll-behavior: contain; }

.cast-spell-row {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.45rem 0.9rem; cursor: pointer; transition: background 0.12s;
}
.cast-spell-row:hover, .cast-spell-row.selected { background: color-mix(in srgb, var(--text-color) 6%, transparent); }
.cast-spell-row.selected { border-left: 3px solid var(--accent-color); padding-left: calc(0.9rem - 3px); }
.cast-spell-name { flex: 1; font-size: 0.82rem; font-weight: 600; color: var(--text-color); }
.cast-spell-lvl { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); flex-shrink: 0; }
.cast-spell-row.cantrip .cast-spell-lvl { color: var(--info-color); }
.cast-spell-badges { display: flex; gap: 0.2rem; flex-shrink: 0; }

.cast-modal-footer {
    padding: 0.5rem 0.9rem; border-top: 1px solid var(--border-color);
    flex-shrink: 0; display: flex; flex-direction: column; gap: 0.4rem;
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
}
.cast-slot-pills { display: flex; gap: 0.35rem; flex-wrap: wrap; min-height: 1.6rem; }

.cast-slot-pill {
    padding: 0.2rem 0.55rem; border-radius: 4px; border: 1px solid var(--border-color);
    background: none; color: var(--text-muted); font-size: 0.72rem; font-weight: 600;
    cursor: pointer; font-family: inherit; transition: all 0.12s;
}
.cast-slot-pill.selected { border-color: var(--accent-color); color: var(--accent-color); background: color-mix(in srgb, var(--accent-color) 8%, transparent); }
.cast-slot-pill.depleted { opacity: 0.4; cursor: default; }

.cast-btn-go {
    padding: 0.45rem 1rem; border-radius: 6px; border: none;
    background: var(--accent-color); color: #1a1208; font-weight: 700; font-size: 0.85rem;
    cursor: pointer; font-family: inherit; transition: opacity 0.15s;
    width: 100%; max-width: 420px;  /* cap — prevents 820px span on iPad portrait bottom-sheet */
}
.cast-btn-go:disabled { opacity: 0.35; cursor: default; }

/* ── Toast ── */
.play-toast {
    position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
    background: rgb(30,30,30,0.97); border: 1px solid var(--border-color);
    border-radius: 8px; padding: 0.55rem 1rem; font-size: 0.82rem;
    color: var(--text-color); display: flex; align-items: center; gap: 0.75rem;
    z-index: 9999; box-shadow: 0 4px 18px rgb(0,0,0,0.5);
    transition: opacity 0.2s; pointer-events: auto;
}
.play-toast.hidden { opacity: 0; pointer-events: none; }

.play-toast-undo {
    background: none; border: 1px solid var(--accent-color); color: var(--accent-color);
    border-radius: 4px; padding: 0.15rem 0.55rem; font-size: 0.78rem;
    cursor: pointer; font-family: inherit;
}

/* ── Mobile touch targets ── */
@media (width <= 900px) {
    .hp-step { min-width:44px;min-height:44px; }
    .death-dot { padding:15px; }

    /* Pip touch target ≥44px via padding (visual pip stays 14px). */
    .pip, .slot-pip, .resource-pip { padding: 15px; }
    .action-tok { min-height:44px;display:inline-flex;align-items:center;justify-content:center; }
    .exhaust-adj { min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center; }
}