/* ============================================================================
   help-panel.css — the "Help & Tours" slide-over drawer (help-panel.js).
   Uses app.css tokens; dark theme via body.narrorift-mode overrides at the
   bottom. z-index 1400 — above studio chrome, below the mode chooser (1500)
   and the session-expired overlay (9500).
   ========================================================================== */

.hp-drawer { position: fixed; inset: 0; z-index: 1400; }
.hp-drawer[hidden] { display: none; }

.hp-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 14, 22, 0.45);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    animation: hp-backdrop-fade 0.28s ease both;
}
@keyframes hp-backdrop-fade { from { opacity: 0; } to { opacity: 1; } }

.hp-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(430px, 94vw);
    display: flex;
    flex-direction: column;
    background: var(--paper, #f5f7fb);
    border-left: 1px solid var(--line, #d8dee8);
    box-shadow: -24px 0 64px rgba(8, 10, 16, 0.28);
    outline: none;
    animation: hp-slide-in 0.32s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}
@keyframes hp-slide-in {
    from { transform: translateX(60px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}
.hp-drawer.is-leaving .hp-panel { animation: hp-slide-out 0.28s ease both; }
.hp-drawer.is-leaving .hp-backdrop { animation: hp-backdrop-out 0.28s ease both; }
@keyframes hp-slide-out { to { transform: translateX(60px); opacity: 0; } }
@keyframes hp-backdrop-out { to { opacity: 0; } }

.hp-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 20px 22px 14px;
    border-bottom: 1px solid var(--line, #d8dee8);
}
.hp-eyebrow {
    margin: 0 0 2px;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent, #d23b45);
}
.hp-head h2 { margin: 0; font-size: 1.3rem; }
.hp-close {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid var(--line, #d8dee8);
    background: var(--surface, #fff);
    color: var(--muted, #64748b);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.hp-close:hover { color: var(--ink, #111827); border-color: var(--muted, #64748b); transform: rotate(90deg); }

.hp-body {
    flex: 1;
    overflow-y: auto;
    padding: 18px 22px 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scrollbar-width: thin;
}

.hp-section-title {
    margin: 10px 0 0;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--muted, #64748b);
}

.hp-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid var(--line, #d8dee8);
    background: var(--surface, #fff);
    animation: hp-card-stagger 0.4s cubic-bezier(0.22, 0.9, 0.3, 1) both;
    animation-delay: calc(var(--hp-stagger, 0) * 45ms);
}
@keyframes hp-card-stagger {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.hp-card p { margin: 2px 0 0; color: var(--muted, #64748b); font-size: 0.85rem; line-height: 1.5; }
.hp-card strong { font-size: 0.95rem; }
.hp-card-eyebrow {
    margin: 0 !important;
    font-size: 0.68rem !important;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--accent, #d23b45) !important;
}

.hp-context { border-color: color-mix(in srgb, var(--accent, #d23b45) 35%, var(--line, #d8dee8)); }
.hp-context-icon { font-size: 1.5rem; line-height: 1; margin-top: 2px; }

.hp-readonly { border-color: color-mix(in srgb, var(--amber, #b45309) 45%, var(--line, #d8dee8)); }
.hp-readonly > span { font-size: 1.3rem; }

/* Tour cards */
.hp-tour-list { display: flex; flex-direction: column; gap: 10px; }
.hp-tour { flex-direction: column; gap: 10px; }
.hp-tour.is-done { opacity: 0.82; }
.hp-tour-main { width: 100%; }
.hp-tour-title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hp-badge {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}
.hp-badge-live {
    background: color-mix(in srgb, var(--accent, #d23b45) 12%, transparent);
    color: var(--accent, #d23b45);
}
.hp-badge-done {
    background: color-mix(in srgb, var(--green, #047857) 14%, transparent);
    color: var(--green, #047857);
}
.hp-tour-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    color: var(--muted, #64748b);
    font-size: 0.75rem;
    font-weight: 700;
}
.hp-progress {
    flex: 1;
    max-width: 140px;
    height: 5px;
    border-radius: 3px;
    background: var(--line, #d8dee8);
    overflow: hidden;
}
.hp-progress-fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--accent, #d23b45), color-mix(in srgb, var(--accent, #d23b45) 55%, #8b5cf6));
}
.hp-tour-actions { display: flex; gap: 8px; }

.hp-btn {
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px solid var(--line, #d8dee8);
    background: var(--paper, #f5f7fb);
    color: var(--ink, #111827);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease, filter 0.15s ease;
}
.hp-btn:hover { border-color: var(--muted, #64748b); transform: translateY(-1px); }
.hp-btn-primary {
    border-color: transparent;
    background: linear-gradient(92deg, var(--accent, #d23b45), color-mix(in srgb, var(--accent, #d23b45) 55%, #8b5cf6));
    color: #fff;
}
.hp-btn-primary:hover { filter: brightness(1.08); border-color: transparent; }

/* Tips */
.hp-tips {
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: hp-card-stagger 0.4s ease both;
    animation-delay: calc(var(--hp-stagger, 0) * 45ms);
}
.hp-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 11px;
    background: var(--surface, #fff);
    border: 1px dashed var(--line, #d8dee8);
}
.hp-tip span { font-size: 1rem; line-height: 1.3; }
.hp-tip p { margin: 0; color: var(--muted, #64748b); font-size: 0.82rem; line-height: 1.5; }

/* Mode card + welcome replay */
.hp-mode { align-items: center; justify-content: space-between; }
.hp-mode > div { flex: 1; }
.hp-replay-welcome {
    align-self: center;
    margin-top: 4px;
    padding: 8px 14px;
    border: none;
    background: transparent;
    color: var(--muted, #64748b);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    border-radius: 9px;
    transition: color 0.15s ease, background 0.15s ease;
    animation: hp-card-stagger 0.4s ease both;
    animation-delay: calc(var(--hp-stagger, 0) * 45ms);
}
.hp-replay-welcome:hover { color: var(--ink, #111827); background: var(--surface, #fff); }

.hp-muted { color: var(--muted, #64748b); font-size: 0.85rem; }

/* ── Dark theme ───────────────────────────────────────────────────────────── */
body.narrorift-mode .hp-panel {
    background: var(--paper, #090b12);
    border-left-color: rgba(255, 255, 255, 0.1);
    box-shadow: -24px 0 64px rgba(0, 0, 0, 0.6);
}
body.narrorift-mode .hp-head { border-bottom-color: rgba(255, 255, 255, 0.08); }
body.narrorift-mode .hp-backdrop { background: rgba(0, 2, 8, 0.6); }
body.narrorift-mode .hp-card,
body.narrorift-mode .hp-tip { border-color: rgba(255, 255, 255, 0.1); }
body.narrorift-mode .hp-close { border-color: rgba(255, 255, 255, 0.14); }
body.narrorift-mode .hp-btn { border-color: rgba(255, 255, 255, 0.16); }
body.narrorift-mode .hp-btn-primary { border-color: transparent; }
body.narrorift-mode .hp-progress { background: rgba(255, 255, 255, 0.12); }

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .hp-panel, .hp-backdrop, .hp-card, .hp-tips, .hp-replay-welcome,
    .hp-drawer.is-leaving .hp-panel, .hp-drawer.is-leaving .hp-backdrop {
        animation: none !important;
    }
    .hp-btn, .hp-close { transition: none; }
}

/* ── [NE] World status card + "How the studio thinks" topics (v0.2.0) ─────── */
.hp-world {
    align-items: center;
    border-color: color-mix(in srgb, var(--blue, #2563eb) 35%, var(--line, #d8dee8));
}
.hp-world > div { flex: 1; min-width: 0; }
.hp-world-lines { font-size: 0.8rem !important; }

.hp-topics {
    display: flex;
    flex-direction: column;
    gap: 8px;
    animation: hp-card-stagger 0.4s ease both;
    animation-delay: calc(var(--hp-stagger, 0) * 45ms);
}
.hp-topic {
    border: 1px solid var(--line, #d8dee8);
    border-radius: 11px;
    background: var(--surface, #fff);
}
.hp-topic > summary {
    padding: 10px 12px;
    cursor: pointer;
    font-size: 0.86rem;
    font-weight: 700;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.hp-topic > summary::-webkit-details-marker { display: none; }
.hp-topic > summary::after {
    content: "";
    margin-left: auto;
    width: 6px;
    height: 6px;
    border-right: 2px solid var(--muted, #64748b);
    border-bottom: 2px solid var(--muted, #64748b);
    transform: rotate(45deg);
    transition: transform 0.15s ease;
}
.hp-topic[open] > summary::after { transform: rotate(225deg); }
.hp-topic > p {
    margin: 0;
    padding: 0 12px 12px;
    color: var(--muted, #64748b);
    font-size: 0.82rem;
    line-height: 1.55;
}

body.narrorift-mode .hp-topic { border-color: rgba(255, 255, 255, 0.1); }
body.narrorift-mode .hp-world { border-color: color-mix(in srgb, var(--blue, #60a5fa) 40%, rgba(255, 255, 255, 0.1)); }

@media (prefers-reduced-motion: reduce) {
    .hp-topics { animation: none !important; }
}

/* ── Status-dot legend (interactive header-indicator guide) ───────────────── */
/* CSS-only: the three hidden radios recolour the demo dot (via --status-accent),
   toggle which description shows, and highlight the active chip — no JS. Colours
   mirror app.css exactly: loading orange / ready green / attention red. */
.hp-status-legend {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    --status-accent: 251 146 60; /* default = loading (orange) */
    border-color: color-mix(in srgb, rgb(var(--status-accent)) 32%, var(--line, #d8dee8));
    transition: border-color 0.25s ease;
}
.hp-status-legend:has(#hp-status-loading:checked) { --status-accent: 251 146 60; }
.hp-status-legend:has(#hp-status-ready:checked) { --status-accent: 52 211 153; }
.hp-status-legend:has(#hp-status-attention:checked) { --status-accent: 239 68 68; }

.hp-status-legend-copy strong { display: block; margin-top: 2px; }
.hp-status-legend-copy p { margin-top: 4px; }

/* Radios drive state but stay visually hidden (still focusable for keyboard). */
.hp-status-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.hp-status-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--line, #d8dee8);
    background: var(--paper, #f5f7fb);
    color: var(--muted, #64748b);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.hp-status-chip:hover { transform: translateY(-1px); }
.hp-status-chip-dot { width: 9px; height: 9px; border-radius: 999px; }
.hp-status-chip[data-state="loading"] .hp-status-chip-dot { background: rgb(251 146 60); }
.hp-status-chip[data-state="ready"] .hp-status-chip-dot { background: rgb(52 211 153); }
.hp-status-chip[data-state="attention"] .hp-status-chip-dot { background: rgb(239 68 68); }

/* Selected chip glows in its own colour. */
.hp-status-legend:has(#hp-status-loading:checked) .hp-status-chip[data-state="loading"],
.hp-status-legend:has(#hp-status-ready:checked) .hp-status-chip[data-state="ready"],
.hp-status-legend:has(#hp-status-attention:checked) .hp-status-chip[data-state="attention"] {
    border-color: rgb(var(--status-accent) / 0.55);
    background: rgb(var(--status-accent) / 0.12);
    color: var(--ink, #111827);
}
/* Keyboard focus ring on the visible chip (radios precede the chip row). */
#hp-status-loading:focus-visible ~ .hp-status-chips .hp-status-chip[data-state="loading"],
#hp-status-ready:focus-visible ~ .hp-status-chips .hp-status-chip[data-state="ready"],
#hp-status-attention:focus-visible ~ .hp-status-chips .hp-status-chip[data-state="attention"] {
    outline: 2px solid rgb(var(--status-accent) / 0.7);
    outline-offset: 2px;
}

/* Live preview: a big dot in the selected state + its description. */
.hp-status-stage {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    border-radius: 12px;
    border: 1px dashed var(--line, #d8dee8);
    background: var(--surface, #fff);
}
.hp-status-demo-dot {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 2px;
    border-radius: 999px;
    background: rgb(var(--status-accent));
    box-shadow: 0 0 0 6px rgb(var(--status-accent) / 0.14), 0 0 10px rgb(var(--status-accent) / 0.6);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}
.hp-status-legend:has(#hp-status-loading:checked) .hp-status-demo-dot {
    animation: hp-status-blink 1.1s ease-in-out infinite;
}
@keyframes hp-status-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

.hp-status-desc {
    display: none;
    margin: 0 !important;
    font-size: 0.85rem !important;
    line-height: 1.5;
    color: var(--muted, #64748b);
}
.hp-status-desc strong { color: var(--ink, #111827); }
.hp-status-legend:has(#hp-status-loading:checked) .hp-status-desc[data-for="loading"],
.hp-status-legend:has(#hp-status-ready:checked) .hp-status-desc[data-for="ready"],
.hp-status-legend:has(#hp-status-attention:checked) .hp-status-desc[data-for="attention"] {
    display: block;
    animation: hp-status-desc-in 0.28s ease both;
}
@keyframes hp-status-desc-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Brief pulse when opened from the header dot (focusStatusLegend). */
.hp-status-legend.is-highlighted { animation: hp-status-legend-pulse 1.6s ease; }
@keyframes hp-status-legend-pulse {
    0%, 100% { box-shadow: none; }
    18% { box-shadow: 0 0 0 3px rgb(var(--status-accent) / 0.5); }
}

body.narrorift-mode .hp-status-chip { border-color: rgba(255, 255, 255, 0.12); }
body.narrorift-mode .hp-status-stage { border-color: rgba(255, 255, 255, 0.12); }

@media (prefers-reduced-motion: reduce) {
    .hp-status-demo-dot,
    .hp-status-desc,
    .hp-status-legend.is-highlighted { animation: none !important; }
}