/* ========================================
   ELECTRIMANCER DESIGN TOKENS
   ========================================
   Single source of truth for theme colors.

   THEME SYSTEM:
   - Default theme (Light) in :root
   - Theme variants use [data-theme="name"] selectors
   - Set theme: document.documentElement.dataset.theme = "forest"
   - Clear theme: delete document.documentElement.dataset.theme

   Used by:
   - Simulator HTML files - via <link> tag before core.css
   - globals.css (Next.js site) - MANUAL SYNC REQUIRED

   IMPORTANT: When adding/changing themes here, also update
   the theme variants in site/app/globals.css to match.
*/

/* ========================================
   DEFAULT THEME (Light - Monochrome Professional)
   Pure white + black + teal accent - maximum clarity
   ======================================== */
:root {
    /* Typography - mono stack for instrument voice (labels, chips, logbook lines)
       Defined here so iframe-scoped stylesheets can resolve var(--font-mono).
       The Next.js parent defines this via next/font in site/app/layout.tsx, but
       sim iframes load standalone pages that don't inherit parent custom props.
       Matches that stack (JetBrains Mono first) with system fallbacks. */
    --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

    /* Typography - heading stack for titled headers (mentor-locked titles, locked-phase headers).
       Same iframe-scoping rationale as --font-mono above: parent defines --font-heading via
       next/font (Barlow) in site/app/layout.tsx, but iframes don't inherit parent custom props.
       Matches that stack (Barlow first) with system fallbacks. */
    --font-heading: 'Barlow', system-ui, -apple-system, sans-serif;

    /* Typography - sans stack for banner UI and future default-text surfaces.
       Same iframe-scoping rationale as --font-mono / --font-heading. Matches the
       next/font Inter stack in site/app/layout.tsx. */
    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;

    /* Background Colors - pure whites */
    --bg-dark: #ffffff;
    --bg-panel: #fafafa;
    --grid-line: #e5e5e5;

    /* Brand Colors - teal accent */
    --primary: #0d9488;
    --primary-color: #0d9488;
    --primary-rgb: 13, 148, 136;
    --primary-hover: #0f766e;
    --accent: #115e59;
    --accent-light: #5eead4;

    /* Text Colors - near-black for premium contrast without harshness */
    --text-main: #09090b;
    --text-muted: #525252;
    --text-dim: #737373;
    --text-header: #171717;

    /* Status Colors */
    --success: #15803d;
    --danger: #dc2626;
    --warning: #ca8a04;

    /* Motion — Emil ease curve for UI affordance/feedback (matches globals.css
       for consistency between outside-module and in-sim; do NOT use for pedagogy
       motion like wire draws or ladder energize — those stay on their tuned curves). */
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

    /* Terminal/Component Colors */
    --terminal-size: 16px;
    --terminal-color-default: #525252;

    /* Wire Colors */
    --wire-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);

    /* Gradient Colors */
    --gradient-coral: #0d9488;
    --gradient-purple: #f5f5f5;
    --gradient-glow: linear-gradient(135deg, #2dd4bf 0%, #0d9488 50%, #0f766e 100%);

    /* Header Background */
    --header-bg: #fafafa;

    /* Glass Effect - light frosted glass */
    --glass-bg: rgba(255, 255, 255, 0.95);
    --glass-border: rgba(0, 0, 0, 0.1);

    /* Shadows - crisp for monochrome */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
    --shadow-glow: 0 0 20px rgba(13, 148, 136, 0.25);

    /* Dev Mode Colors */
    --dev-highlight: rgba(13, 148, 136, 0.4);

    /* ---- Phase Accent Colors ---- */
    --color-accent-primary: #0d9488;
    --color-info: #3b82f6;
    --color-accent-exploration: #8b5cf6;
    --color-warning: #ca8a04;
    --color-text-tertiary: #737373;

    /* Spacing */
    --header-height: 64px;

    /* Logo */
    --logo-gradient: linear-gradient(135deg, #2dd4bf 0%, #0d9488 50%, #0f766e 100%);
    --logo-glow: rgba(13, 148, 136, 0.4);
    --logo-filter: brightness(0) saturate(100%) invert(45%) sepia(70%) saturate(500%) hue-rotate(130deg) brightness(95%) contrast(95%);
    --logo-connector: #0d9488;
}

/* ========================================
   FOREST THEME (Green)
   ======================================== */
[data-theme="forest"] {
    /* Background Colors */
    --bg-dark: #052e16;
    --bg-panel: #14532d;
    --grid-line: #166534;

    /* Brand Colors */
    --primary: #4ade80;
    --primary-color: #4ade80;
    --primary-rgb: 74, 222, 128;
    --primary-hover: #86efac;
    --accent: #15803d;
    --accent-light: #86efac;

    /* Text Colors */
    --text-main: #f0fdf4;
    --text-muted: #bbf7d0;
    --text-dim: #86efac;
    --text-header: #dcfce7;

    /* Gradient Colors */
    --gradient-coral: #22c55e;
    --gradient-purple: #14532d;
    --gradient-glow: linear-gradient(135deg, #22c55e 0%, #4ade80 50%, #86efac 100%);

    /* Header Background */
    --header-bg: #14532d;

    /* Glass Effect */
    --glass-bg: rgba(20, 83, 45, 0.85);
    --glass-border: rgba(255, 255, 255, 0.1);

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 20px rgba(74, 222, 128, 0.3);

    /* Logo */
    --logo-gradient: linear-gradient(135deg, #86efac 0%, #4ade80 50%, #22c55e 100%);
    --logo-glow: rgba(74, 222, 128, 0.5);
    --logo-filter: brightness(0) saturate(100%) invert(80%) sepia(30%) saturate(500%) hue-rotate(80deg) brightness(105%) contrast(101%);
    --logo-connector: #bbf7d0;
}

/* ========================================
   ORIGINAL THEME (Coral)
   ======================================== */
[data-theme="original"] {
    /* Background Colors */
    --bg-dark: #0f172a;
    --bg-panel: #1e293b;
    --grid-line: #334155;

    /* Brand Colors */
    --primary: #E88A93;
    --primary-color: #E88A93;  /* Alias for consistency */
    --primary-rgb: 232, 138, 147;  /* For rgba() usage */
    --primary-hover: #F4A4A8;
    --accent: #6B5B7B;
    --accent-light: #a78bfa;

    /* Text Colors */
    --text-main: #f8fafc;
    --text-muted: #d1d5db;
    --text-dim: #64748b;
    --text-header: #ffebcd;

    /* Gradient Colors */
    --gradient-coral: #E88A93;
    --gradient-purple: #5B4872;
    --gradient-glow: linear-gradient(135deg, #E88A93 0%, #a78bfa 50%, #8b5cf6 100%);

    /* Header Background */
    --header-bg: #5B4872;

    /* Glass Effect */
    --glass-bg: rgba(30, 41, 59, 0.8);

    /* Shadows */
    --shadow-glow: 0 0 20px rgba(232, 138, 147, 0.3);

    /* Logo */
    --logo-gradient: linear-gradient(135deg, #d946ef 0%, #a78bfa 50%, #8b5cf6 100%);
    --logo-glow: rgba(139, 92, 246, 0.5);
    --logo-filter: brightness(0) saturate(100%) invert(88%) sepia(20%) saturate(500%) hue-rotate(280deg) brightness(105%) contrast(101%);
    --logo-connector: #FFDAB9;
}

/* ========================================
   MIDNIGHT THEME (Blue)
   ======================================== */
[data-theme="midnight"] {
    /* Background Colors */
    --bg-dark: #030712;
    --bg-panel: #111827;
    --grid-line: #1f2937;

    /* Brand Colors */
    --primary: #60a5fa;
    --primary-color: #60a5fa;  /* Alias for consistency */
    --primary-rgb: 96, 165, 250;  /* For rgba() usage */
    --primary-hover: #93c5fd;
    --accent: #3b82f6;
    --accent-light: #93c5fd;

    /* Text Colors */
    --text-main: #f9fafb;
    --text-muted: #9ca3af;
    --text-dim: #6b7280;
    --text-header: #e0f2fe;

    /* Gradient Colors */
    --gradient-coral: #3b82f6;
    --gradient-purple: #1e3a5f;
    --gradient-glow: linear-gradient(135deg, #3b82f6 0%, #60a5fa 50%, #93c5fd 100%);

    /* Header Background */
    --header-bg: #1e3a5f;

    /* Glass Effect */
    --glass-bg: rgba(17, 24, 39, 0.85);

    /* Shadows */
    --shadow-glow: 0 0 20px rgba(96, 165, 250, 0.3);

    /* Logo */
    --logo-gradient: linear-gradient(135deg, #60a5fa 0%, #93c5fd 50%, #3b82f6 100%);
    --logo-glow: rgba(96, 165, 250, 0.5);
    --logo-filter: brightness(0) saturate(100%) invert(70%) sepia(50%) saturate(500%) hue-rotate(190deg) brightness(105%) contrast(101%);
    --logo-connector: #93c5fd;
}

/* ========================================
   INDUSTRIAL THEME (Stainless Steel)
   ======================================== */
[data-theme="industrial"] {
    /* Background Colors */
    --bg-dark: #1b1e24;
    --bg-panel: #2c313a;
    --grid-line: #3e4451;

    /* Brand Colors */
    --primary: #00e5ff;
    --primary-color: #00e5ff;  /* Alias for consistency */
    --primary-rgb: 0, 229, 255;  /* For rgba() usage */
    --primary-hover: #64efff;
    --accent: #475569;
    --accent-light: #94a3b8;

    /* Text Colors */
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --text-dim: #64748b;
    --text-header: #ffffff;

    /* Gradient Colors */
    --gradient-coral: #06b6d4;
    --gradient-purple: #1e293b;
    --gradient-glow: linear-gradient(135deg, #00e5ff 0%, #06b6d4 50%, #0891b2 100%);

    /* Header Background */
    --header-bg: #1e293b;

    /* Glass Effect */
    --glass-bg: rgba(30, 41, 59, 0.85);

    /* Shadows */
    --shadow-glow: 0 0 20px rgba(0, 229, 255, 0.3);

    /* Logo */
    --logo-gradient: linear-gradient(135deg, #64efff 0%, #00e5ff 50%, #06b6d4 100%);
    --logo-glow: rgba(0, 229, 255, 0.5);
    --logo-filter: brightness(0) saturate(100%) invert(71%) sepia(86%) saturate(2252%) hue-rotate(143deg) brightness(106%) contrast(109%);
    --logo-connector: #64efff;
}

/* ========================================
   DARK THEME (Monochrome Professional)
   Pure black + white + bright teal accent - maximum contrast
   ======================================== */
[data-theme="dark"] {
    /* Background Colors - pure blacks */
    --bg-dark: #000000;
    --bg-panel: #0a0a0a;
    --grid-line: #262626;

    /* Brand Colors - bright teal for visibility */
    --primary: #2dd4bf;
    --primary-color: #2dd4bf;
    --primary-rgb: 45, 212, 191;
    --primary-hover: #5eead4;
    --accent: #0d9488;
    --accent-light: #99f6e4;

    /* Text Colors - pure white for max contrast */
    --text-main: #ffffff;
    --text-muted: #a3a3a3;
    --text-dim: #737373;
    --text-header: #fafafa;

    /* Status Colors */
    --success: #22c55e;
    --danger: #ef4444;
    --warning: #eab308;

    /* Gradient Colors */
    --gradient-coral: #2dd4bf;
    --gradient-purple: #0a0a0a;
    --gradient-glow: linear-gradient(135deg, #5eead4 0%, #2dd4bf 50%, #0d9488 100%);

    /* Header Background */
    --header-bg: #0a0a0a;

    /* Glass Effect - dark glass */
    --glass-bg: rgba(10, 10, 10, 0.95);
    --glass-border: rgba(255, 255, 255, 0.1);

    /* Shadows - minimal on pure black */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.8);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.8);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.9);
    --shadow-glow: 0 0 25px rgba(45, 212, 191, 0.3);

    /* Logo */
    --logo-gradient: linear-gradient(135deg, #5eead4 0%, #2dd4bf 50%, #0d9488 100%);
    --logo-glow: rgba(45, 212, 191, 0.5);
    --logo-filter: brightness(0) saturate(100%) invert(80%) sepia(40%) saturate(500%) hue-rotate(115deg) brightness(105%) contrast(95%);
    --logo-connector: #2dd4bf;
}

/* ========================================
   UX OVERHAUL TOKENS
   ========================================
   New tokens for hover labels, progress tracking,
   and visual affordances. Theme-aware by using
   existing --primary, --glass-bg, etc.
*/

:root {
    /* ---- Hover Label (Glass Tag) ---- */
    --hover-label-bg: var(--glass-bg);
    --hover-label-border: rgba(255, 255, 255, 0.15);
    --hover-label-text: var(--text-main);
    --hover-label-radius: 6px;
    --hover-label-padding: 6px 12px;

    /* ---- Trigger Hover Label (Dark Navy Glass) ---- */
    --trigger-label-bg: rgba(15, 23, 42, 0.88);
    --trigger-label-border: rgba(59, 130, 246, 0.5);
    --trigger-label-name-color: rgba(147, 197, 253, 1);
    --trigger-label-action-color: rgba(226, 232, 240, 0.85);
    --trigger-label-radius: 6px;
    --trigger-label-padding: 5px 10px;

    /* ---- Progress Checklist ---- */
    --checklist-bg: var(--glass-bg);
    --checklist-border: var(--glass-border);
    --checklist-checked-color: var(--success);
    --checklist-pending-color: var(--text-dim);
    --checklist-active-color: var(--primary);

    /* ---- Animation Timing ---- */
    --timing-hover: 150ms;
    --timing-glow-pulse: 2000ms;
    --timing-panel-slide: 300ms;
    --timing-checklist-pop: 250ms;
    --easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ---- Component Info Panel (Nameplate) ---- */
    --nameplate-bg: linear-gradient(135deg, rgba(30, 41, 59, 0.95) 0%, rgba(15, 23, 42, 0.98) 100%);
    --nameplate-border: var(--primary);
    --nameplate-text: var(--text-main);
    --nameplate-accent: var(--primary);
}

/* ========================================
   Mentor Tier UI
   ======================================== */

/* Mentor locked panel (anonymous users) */
.mentor-locked-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 2rem;
    text-align: center;
    gap: 0.75rem;
}
.mentor-locked-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.5;
    color: var(--text-muted, var(--text-dim));
}
.mentor-locked-title {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
}
.mentor-locked-text {
    font-size: 0.85rem;
    color: var(--text-dim);
    line-height: 1.5;
    max-width: 280px;
}
.mentor-locked-signin { margin-top: 0.5rem; }

/* Free tier message counter */
.mentor-free-counter {
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-dim);
    padding: 0.25rem 0;
    border-top: 1px solid var(--border);
}

/* Free tier lockout */
.mentor-free-lockout {
    text-align: center;
    padding: 1rem;
    font-size: 0.85rem;
    color: var(--text-dim);
}
.mentor-free-lockout p { margin: 0.25rem 0; }

/* Locked phase entries (post-commission, non-Pro) */
.locked-phases { padding: 1rem; }
.locked-phase-header {
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.75rem;
}
.locked-phase-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    opacity: 0.6;
}
.locked-phase-badge {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    background: var(--primary);
    color: var(--bg);
    flex-shrink: 0;
}
.locked-phase-name {
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--text);
}
.locked-phase-desc {
    font-size: 0.75rem;
    color: var(--text-dim);
}
.locked-phase-cta {
    margin-top: 1.5rem;
    text-align: center;
}
.locked-phase-hook {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 0.75rem;
}

/* Twin pricing cards (issue #174).
   Monthly carries a "Recommended" ribbon + 2px border (vs 1px on annual)
   for quiet instrument-style elevation. Annual preserved at same size,
   same typography — only the border weight and ribbon differ. */
.locked-phase-pricing {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.locked-phase-pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.85rem 0.5rem 0.7rem;
    border: 1px solid var(--grid-line);
    border-radius: 6px;
    background: var(--bg-panel);
    color: var(--text);
    text-decoration: none;
    transition: border-color 0.15s ease-out, background 0.15s ease-out;
}
.locked-phase-pricing-card:hover {
    border-color: var(--primary);
    background: var(--bg-dark);
}
.locked-phase-pricing-card.is-recommended {
    /* +1 border weight = the single elevation technique (per issue #174 —
       pick ONE, don't stack ribbon + shadow + fill). Compensate padding
       by 1px so both cards remain visually the same size. */
    border: 2px solid var(--primary);
    padding: calc(0.85rem - 1px) calc(0.5rem - 1px) calc(0.7rem - 1px);
}
.locked-phase-pricing-ribbon {
    position: absolute;
    top: -0.55rem;
    right: 0.5rem;
    font-family: var(--font-mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    background: var(--primary);
    color: var(--bg-dark);
    white-space: nowrap;
    line-height: 1.2;
}
.locked-phase-pricing-plan {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
}
.locked-phase-pricing-price {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0.01em;
}

/* Subordinate "View all trainers" link — muted color (was primary teal).
   Per issue #174 — pick ONE subordination technique (muted color, not
   smaller font). Catalog link stays visible, just quieter. */
.locked-phase-catalog {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-dim);
    transition: color 0.15s ease-out;
}
.locked-phase-catalog:hover {
    color: var(--primary);
}

.locked-phase-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid var(--grid-line);
}

.locked-phase-preview-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--text-secondary, var(--text-muted));
    line-height: 1.4;
}

.locked-phase-preview-icon {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

.locked-phase-preview-text {
    flex: 1;
}

/* Curriculum strip — post-commission spatial context (#343).
   Quiet, informational strip showing which circuit was just
   commissioned out of the 5-sim program. Non-interactive. */
.curriculum-strip {
    text-align: center;
    padding: 20px 0;
    margin: 16px 0;
    border-top: 1px solid var(--grid-line);
    border-bottom: 1px solid var(--grid-line);
}
.curriculum-strip-header {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 12px;
    font-family: var(--font-mono);
}
.curriculum-dots {
    display: flex;
    justify-content: center;
    gap: 16px;
}
.curriculum-dot-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.curriculum-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--grid-line);
    background: transparent;
}
.curriculum-dot.is-complete {
    background: var(--success);
    border-color: var(--success);
}
.curriculum-dot-label {
    font-size: 10px;
    font-family: var(--font-mono);
    color: var(--text-dim);
    letter-spacing: 0.5px;
}
.curriculum-dot-label.is-complete {
    color: var(--success);
}

/* Curriculum list in paywall — shows remaining circuits below
   the locked-phase list. BMS-only (#343). */
.locked-phase-curriculum {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--grid-line);
}
.locked-phase-curriculum-label {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 8px;
}
.locked-phase-curriculum-item {
    padding: 6px 0 6px 16px;
    position: relative;
}
.locked-phase-curriculum-item::before {
    content: '\25CB';
    position: absolute;
    left: 0;
    color: var(--grid-line);
    font-size: 10px;
    line-height: 20px;
}
.locked-phase-curriculum-name {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-main);
    line-height: 1.4;
}
.locked-phase-curriculum-hook {
    display: block;
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.3;
    margin-top: 1px;
}

/* ========================================
   Anon-tier post-Commission signup card (#318 Surface A)
   Sister surface to .locked-phases — anon needs an account-creation hook
   before a Pro pitch can land. Voice intentionally distinct: long-shelf
   memory promise (your wiring sticks around), not a feature pitch.
   ======================================== */
.anon-post-commission {
    padding: 1rem;
    text-align: left;
    margin-top: 0.5rem;
    border-left: 2px solid var(--primary);
    padding-left: 1rem;
}
.anon-post-commission-hook {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--text);
    line-height: 1.4;
    margin-bottom: 0.85rem;
}
.anon-post-commission-body {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.55;
    margin-bottom: 0.75rem;
}
.anon-post-commission-cta {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--primary);
    border-radius: 6px;
    background: var(--primary);
    color: var(--bg-dark);
    font-family: var(--font-heading);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease-out, opacity 0.15s ease-out;
}
.anon-post-commission-cta:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    background: var(--primary-hover, var(--primary));
}
.anon-post-commission-cta:active {
    transform: scale(0.97);
}

/* ========================================
   Anon-only wiring-phase footer card (#318 Surface B)
   Single-line save-your-wiring nudge with dismiss button.
   Sits at the bottom of the wiring task pane below the mentor footnote.
   Dismissal persists in localStorage (electrimancer:wiringFooterDismissed).
   ======================================== */
.anon-wiring-footer {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.85rem;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--grid-line);
    border-radius: 6px;
    background: var(--bg-panel);
}
.anon-wiring-footer-text {
    flex: 1 1 auto;
    font-size: 0.78rem;
    color: var(--text-muted);
    line-height: 1.35;
}
.anon-wiring-footer-cta {
    flex: 0 0 auto;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--primary);
    border-radius: 4px;
    background: var(--primary);
    color: var(--bg-dark);
    font-family: var(--font-heading);
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.15s ease-out;
}
.anon-wiring-footer-cta:hover {
    opacity: 0.9;
    background: var(--primary-hover, var(--primary));
    transform: translateY(-1px);
}
.anon-wiring-footer-cta:active {
    transform: scale(0.97);
}
.anon-wiring-footer-dismiss {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-dim);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 3px;
    transition: color 0.15s ease-out, background 0.15s ease-out;
}
.anon-wiring-footer-dismiss:hover {
    color: var(--text);
    background: var(--bg-dark);
}

/* ========================================
   Review the Lesson card (wiring phase)
   ======================================== */
.review-lesson-card {
    margin-top: 12px;
    border: 1px solid var(--grid-line, #1e293b);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.15s;
}

.review-lesson-card:hover {
    background: rgba(255, 255, 255, 0.03);
}

.review-lesson-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted, #64748b);
}

.review-lesson-icon {
    font-size: 14px;
}

.review-lesson-title {
    flex: 1;
}

.review-lesson-chevron {
    font-size: 10px;
    transition: transform 0.2s;
}

.review-lesson-card.expanded .review-lesson-chevron {
    transform: rotate(90deg);
}

.review-lesson-sections {
    display: none;
    padding: 0 12px 8px;
}

.review-lesson-card.expanded .review-lesson-sections {
    display: block;
}

.review-lesson-item {
    padding: 8px 10px;
    margin: 2px 0;
    font-size: 12px;
    color: var(--text-main, #e2e8f0);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.review-lesson-item:hover {
    background: color-mix(in srgb, var(--primary, #0d9488) 15%, transparent);
    color: var(--primary, #0d9488);
}

/* ========================================
   Review pane (active review mode)
   ======================================== */
.review-back-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: none;
    border-bottom: 1px solid var(--grid-line, #1e293b);
    color: var(--text-main, #e2e8f0);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.review-back-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.review-header {
    padding: 12px 12px 8px;
}

.review-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim, #94a3b8);
    margin-bottom: 2px;
}

.review-section-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main, #e2e8f0);
}

.review-learn-container {
    padding: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}