/* ============================================================
   CSS FOUNDATION , African-inspired design system
   Graphic Designer (20yr): Earth tones, sunset palette,
   professional typography hierarchy, authentic terminal
   ============================================================ */

/* --- CSS Custom Properties (Design Tokens) --- */
:root {
    /* African earth palette */
    --color-earth-dark: #1a0f0a;
    --color-earth-brown: #3d2b1f;
    --color-earth-warm: #5c3d2e;
    /* Brand terracotta: previous #c75b39 measured 4.48:1 on dark page bg
       - 0.02 below the WCAG AA 4.5:1 threshold for normal body text.
       Bumped to #cc6040: visually identical (lightness +1.5%, hue
       unchanged), contrast clears 4.6:1 AA. Matters for inline
       warnings, tags, captions, error text - anywhere terracotta
       wraps text under 18px. */
    --color-terracotta: #cc6040;
    --color-ochre: #d4a03c;
    --color-gold: #e8c547;
    /* Amber accent - used by RhcsaRotationRunner (Arc 11 capstone NOC
       dashboard) for "live" indicators, hop buttons, server tags, and
       cmd chips. Dark theme: light amber (#e6c068) on near-black =
       11.5:1 AAA. Light theme override (#b06a00) at 4.28:1 vs white.
       Light-theme override lives in the [data-theme="light"] block.

       AA-LARGE ONLY WHEN USED AS TEXT (>= 18px regular or 14px bold).
       Below that size, light-mode amber as a text/icon color FAILS
       WCAG AA on the page background (4.28:1, threshold 4.5:1).
       Primary intended use is SURFACE FILL (the live-indicator pulse,
       hop-button background). When rendering text on top of an amber
       fill, use --ui-text-on-amber, never --ui-text-primary or cream.
       For body-text amber prose under 18px, use --color-amber-text
       (deeper variant - to be added when first such use lands). */
    --color-amber: #e6c068;
    /* Amber-tinted accent surfaces (callouts, hop buttons, "Resolved"
       badges). Subtle on dark theme, slightly more visible on light
       to avoid disappearing into white. */
    --color-amber-soft: rgba(230, 192, 104, 0.10);
    --color-amber-border: rgba(230, 192, 104, 0.25);

    /* Terracotta soft/border tokens. Mirror the amber pattern above so
       inline widgets (premium-header story-panel card, Impact stripe in
       auto-lesson) can use a theme-aware terracotta wash without
       compositing the same hue twice (text terracotta over background
       terracotta = ~1.7:1 contrast collapse in light mode, was the
       2026-05-19 user-reported bug). Light value at :root[data-theme=
       "light"] overrides this with a deeper deeper terracotta + higher
       alpha to keep the warm wash readable on cream paper. */
    --color-terracotta-soft:   rgba(204, 96, 64, 0.06);
    --color-terracotta-border: rgba(204, 96, 64, 0.25);

    /* Gate 78 token completion - tokens referenced by content/JS that
       previously fell back to inline hex defaults (code smell per the
       gate). Defined here so consumers resolve a real custom property,
       and overridden in :root[data-theme="light"] for theme parity. */
    --code-terracotta:        #c75b39;
    --color-arc16-recon:      #5ab8e8;
    --color-arc16-vuln:       #d4a03c;
    --color-arc16-exploit:    #c75b39;
    --color-arc16-post:       #9d4edd;
    --color-arc16-report:     #2d8c5e;
    --color-error:            #e57373;
    --ui-master:              #d4a03c;
    --ui-text-error:          #ef4444;
    /* Aliases promoted to first-class tokens (used in JS; also need
       light-theme overrides further down). They alias existing
       primitives so theme switches propagate automatically. */
    --ui-bg:                  var(--ui-bg-primary);
    --ui-surface:             var(--ui-bg-secondary);
    --ui-text:                var(--ui-text-primary);
    /* Brand register: previous #4ade80 was Tailwind lime-neon, the
       only cold color in a warm earth-tones palette. Bumped to
       #5ab865 - a brighter sibling of --color-deep-green #2d5a27
       that reads as success while staying in the earthy register.
       Same-or-better contrast (4.8:1 on bg-primary AA). */
    --ui-success:             #5ab865;
    --ui-error:               #ef4444;

    --color-sunset-orange: #e07b3c;
    --color-deep-green: #2d5a27;
    --color-savanna: #a8946a;
    --color-sand: #e8dcc8;
    --color-cream: #f5f0e6;

    /* Terminal palette.
       Amber / Cisco-console feel on dark background, matching the
       classic PuTTY / SecureCRT amber-on-black scheme that most
       Cisco training materials (Jeremy IT Lab, Keith Barker) use.
       Colors are also brand-aligned with the AKONetwork ochre.
       WCAG contrast vs #0c0c0c: fg 7.4:1 AA, fg-bright 10.2:1 AAA.
       Previous pure-white (#ffffff) read as sterile and unrealistic
       for real Cisco IOS console work. */
    /* TERMINAL TOKENS - ISOLATED FROM THEME.
       The terminal is its own design system: always dark, never
       follows the app theme. The app dark/light toggle changes
       --ui-* and --color-* tokens; the --term-* tokens stay as
       defined here regardless. This is a deliberate philosophical
       choice: a terminal is dark by convention, students expect it
       that way (CCNA / RHCSA exam environments are dark), and a
       single-source-of-truth set of tokens here avoids the
       "colour acts funny when I switch mode" class of bugs.
       Three text levels via the same hue at different opacity:
         --term-fg-bright   active output, prompt, just-typed cmd
         --term-fg          regular historical output
         --term-fg-dim      boot preamble / metadata / whitespace
       Use opacity to dim, not a different colour, so semantics
       (red = error, green = success) stay consistent. */
    --term-bg: #0c0c0c;
    --term-fg-bright: #f5cc5c;                  /* active / prompt */
    --term-fg:        #d4a03c;                  /* normal output */
    --term-fg-dim:    rgba(212, 160, 60, 0.55); /* dimmed history */
    --term-green: #3fb950;
    /* Warm-neutralized cyan: previous #00e5ff was electric blue-green,
       the only cold color in a warm-amber terminal palette - it popped
       for the wrong reason (distraction, not info). #7ecfcf still reads
       as "cyan" semantically but desaturated and warm-aligned. AAA on
       term-bg #0c0c0c. */
    --term-cyan: #7ecfcf;
    --term-yellow: #ffd700;
    --term-red: #ff6b4a;
    --term-cursor: #f5cc5c;
    --term-selection: rgba(245, 204, 92, 0.22);

    /* UI palette - dark mode surface separation rebuilt May 2026.
       Reference incident: previous values #111 / #16 / #1a only had
       0.53% luminance delta between page bg, panel, and secondary.
       Calibrated displays showed subtle layering; budget Android +
       TN laptops + auto-brightness screens collapsed all three to
       a single black rectangle, destroying the panel/page/elevated
       hierarchy on the devices most students actually use. New
       values give >= 4% luminance jump per surface tier so the
       hierarchy survives on cheap hardware. */
    /* Surface tiers calibrated for WCAG perceptible separation
       (>= 1.20:1 between adjacent tiers, the threshold below which
       cheap displays collapse the layering). The additive 0.05 in
       the WCAG ratio formula requires sizeable absolute luminance
       gaps even in the dark range, so we anchor primary near-black
       and let panel jump to mid-charcoal. Earlier values
       (#0e/#18/#22) only reached 1.09:1 which the verifier flags
       as "thin surface delta". */
    --ui-bg-primary: #050505;      /* near-black page base */
    --ui-bg-panel: #1f1f1f;        /* panel - 1.24:1 vs page */
    --ui-bg-secondary: #303030;    /* secondary - 1.27:1 vs panel */
    --ui-border: #3a3a3a;          /* border reads >= 1.4:1 on panel */
    --ui-text-primary: #f5f0e6;
    --ui-text-secondary: #c8c0b0;  /* bumped from #a8946a for body contrast */
    --ui-text-muted: #bcb4a4;      /* clears 5.09:1 AA on bg-elevated #404040 (was #b0a898 = 4.40:1, just under AA) */
    --ui-placeholder: #b8b0a0;     /* clears 4.81:1 AA on bg-elevated #404040 (was #9a8f80 = 3.27:1) */
    --ui-accent: #d4a03c;
    --ui-accent-hover: #e8c547;
    /* (Removed duplicate --ui-success #4caf50 + --ui-error #ef5350
       that were silently clobbering the brand-register fix from
       commit 1510182. Final values: --ui-success #5ab865 earthy +
       --ui-error #ef4444 from line 66-67 above.) */
    --ui-xp: #e8c547;
    /* Text color for SVG diagram labels (used as fill="var(--term-text)" across 1200+ mission SVGs).
       Was previously undefined: SVG text fell back to the inherited body color (near-black on the dark
       theme) and appeared invisible. Set to the standard cream used in the rest of the UI. */
    --term-text: #e8dcc8;
    /* Alias for --ui-text-primary. Some Arc 3 mission SVGs (mission_3_1, 3_2, 3_3, 3_4, 3_5, 3_6, 3_7,
       mission_1_1) reference fill="var(--ui-text)" directly. Without this alias those 92 SVG labels
       were invisible on the dark theme. Same bug class as --term-text from commit 9998441. */
    --ui-text: var(--ui-text-primary);
    /* Alias for --ui-bg-panel. Multiple components (arc-card, landing CTA, mock-exam card, exam-choice,
       domain-breakdown rows) reference background: var(--ui-surface). Without this alias those surfaces
       fell back to transparent and merged with the parent bg. Same bug class as --ui-text / --term-text. */
    --ui-surface: var(--ui-bg-panel);
    /* Slightly lighter surface for hover states, letter chips, progress-bar tracks. */
    --ui-surface-alt: var(--ui-bg-secondary);
    /* Alias for --ui-bg-primary. Used by XP level-up card (js/app.js) and level banner (line 531). */
    --ui-bg: var(--ui-bg-primary);
    /* Distinct fourth surface tier for hover / active / elevated cards.
       Originally aliased to --ui-bg-secondary, but the verifier flagged
       elevated == secondary as collapsed. Now its own value, ~1.20:1
       above secondary, so the four-tier hierarchy
       (page < panel < secondary < elevated) survives on cheap displays.
       Used by 5 inline styles in the two-column LEARN layout (auto-code
       section header / progress bar track / dot / predict input /
       auto-code panel chrome) and by 5 wazuh.css panels. */
    --ui-bg-elevated: #404040;
    /* Slight-lift card surface for option lists / answer cards that
       must sit visibly above --ui-bg-panel without going as bright as
       --ui-bg-elevated. Light theme keeps the pure-white card; dark
       theme uses a subtle lift from panel. Paired with --ui-border-soft
       so the border reads on both surfaces without harshness.
       Reference: .sq-option in the assessment phase shipped with
       hardcoded #ffffff bg + #d5c8b5 border which collapsed dark-mode
       contrast to cream-on-white = invisible. Gate 78 (theme parity)
       fix May 2026. */
    --ui-bg-card-elevated: #2a2a2a;
    --ui-border-soft: #3a3a3a;

    /* Text tokens for use ON brand-color FILLS (filled buttons, status
       badges, callout banners). The standard --ui-text-primary cream
       reads only 1.5-2.7:1 on ochre / amber / red / green fills - the
       fills are mid-luminance, the cream is high-luminance, and the
       contrast collapses. These dark-ink tokens flip the relationship
       so filled CTAs clear AA in BOTH themes:
         text-on-accent  on accent #d4a03c  -> 7.6:1 AAA dark / theme-light: 7.0:1 AAA
         text-on-amber   on amber  #e6c068  -> 9.0:1 AAA dark / theme-light: 6.5:1 AA
         text-on-success on success #4ade80 -> 7.5:1 AAA both themes
         text-on-error   on error  #ef4444  -> 5.0:1 AA both themes
       Authors of new filled buttons / badges should reference these
       tokens instead of --ui-text-primary. The old cream-on-ochre
       pattern survives via the legacy --color-cream token where
       intentionally needed. */
    /* Darkened from #1a1410 to clear AA at normal text size on light
       ochre (#9d6a00). At #1a1410 the ratio was 3.9:1 - "AA-large"
       only, but button labels at 13-15px medium are NOT large text
       (large = 18px regular or 14px bold). #120e08 raises light-ochre
       button contrast to ~5.2:1 AA, stays AAA on dark ochre #d4a03c. */
    --ui-text-on-accent:  #120e08;
    --ui-text-on-amber:   #120e08;
    --ui-text-on-success: #0a1f0e;
    --ui-text-on-error:   #2a0808;

    /* Arc 20 (Docker / Kubernetes / CKA) status tokens. Aliases of
       existing brand colors so no new contrast verification is
       needed - they resolve to tokens that already passed the Gate
       78 + WCAG governance. Used by the future kubectl/docker
       simulator output: pod status pills, container state badges,
       service endpoint indicators. The cluster colour-language stays
       in-register (warm earth tones) instead of pulling in K8s
       default neon green / hard red. */
    --ui-status-running:     var(--ui-success);     /* green   - Pod Running, container Up */
    --ui-status-pending:     var(--color-amber);    /* amber   - Pod Pending, ImagePullBackOff */
    --ui-status-failed:      var(--ui-error);       /* red     - Failed / CrashLoopBackOff / OOMKilled */
    --ui-status-terminating: var(--ui-text-muted);  /* gray    - Terminating / Evicted */
    --ui-status-succeeded:   var(--ui-success);     /* green   - Job Succeeded (one-shot) */
    --ui-status-unknown:     var(--ui-text-muted);  /* gray    - Pod status Unknown */

    /* Typography - IBM Plex unified family.
       Why: Inter/Segoe UI/Georgia are the AI-default fonts that
       make every SaaS dashboard look the same. Plex is IBM's
       system: Plex Sans for UI, Plex Mono for terminal (matches
       the simulator's "real machine" feel), Plex Serif for arc
       titles + narrative (technical-editorial register, not the
       literary register Fraunces would force).
       Fallback chain keeps things safe if Plex fails to load
       (offline, corporate proxy stripping Google Fonts, etc.). */
    --font-narrative: 'IBM Plex Serif', 'Georgia', 'Times New Roman', serif;
    --font-ui: 'IBM Plex Sans', 'Segoe UI', 'Helvetica Neue', system-ui, sans-serif;
    --font-terminal: 'IBM Plex Mono', 'Cascadia Mono', 'Consolas', 'Courier New', monospace;
    /* Alias for --font-ui. Used by the level-up banner (line 534). */
    --font-body: var(--font-ui);

    /* Spacing - 8pt grid scale. xs/sm/md/lg/xl/xxl already
       on-grid (4/8/16/24/32/48). Added xxxl/4xl for the larger
       editorial steps (hero sections, arc transitions). */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;
    --space-xxxl: 64px;
    --space-4xl: 96px;

    /* Border-radius cap. The terminal-engineer aesthetic of this
       platform is undercut by bubbly corners - real Cisco IOS,
       RHEL, Kali surfaces don't have rounded chrome. Cap at 6px.
       Anywhere using 8/10/12/14px radius is a legacy SaaS-default
       leak that should be migrated to one of these three tokens. */
    --radius-sm: 2px;   /* tags, badges, small chips */
    --radius-md: 4px;   /* cards, inputs, buttons */
    --radius-lg: 6px;   /* modals, large panels - HARD CAP */

    /* Letter-spacing tokens for editorial typography (uppercase
       labels, large titles). AI-generated CSS never sets letter-
       spacing; designer-made CSS always does. */
    --tracking-tight: -0.02em;     /* large display text */
    --tracking-normal: 0;
    --tracking-wide: 0.05em;       /* small label text */
    --tracking-widest: 0.1em;      /* uppercase eyebrow labels */

    /* Layout */
    --topbar-height: 56px;
    --story-panel-width: 38%;
    --bottombar-height: 48px;
}

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    background-color: var(--ui-bg-primary);
    color: var(--ui-text-primary);
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Layout Structure --- */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

/* --- Top Bar --- */
.topbar {
    height: var(--topbar-height);
    min-height: var(--topbar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-lg);
    background: linear-gradient(135deg, var(--color-earth-dark) 0%, var(--color-earth-brown) 100%);
    border-bottom: 2px solid var(--color-terracotta);
    z-index: 100;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.app-logo {
    font-family: var(--font-ui);
    font-size: 18px;
    font-weight: 700;
    color: var(--color-ochre);
    letter-spacing: 1px;
}

.app-logo span {
    color: var(--color-terracotta);
}

.arc-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 3px 10px;
    background: rgba(212, 160, 60, 0.15);
    border: 1px solid var(--color-ochre);
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-ochre);
}

.topbar-center {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.mission-title {
    font-family: var(--font-narrative);
    font-size: 15px;
    font-style: italic;
    color: var(--ui-text-secondary);
}

.progress-container {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.progress-bar {
    width: 140px;
    height: 6px;
    background: var(--color-earth-brown);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-terracotta), var(--color-ochre));
    border-radius: 3px;
    transition: width 0.5s ease;
    width: 0%;
}

.progress-text {
    font-size: 12px;
    color: var(--ui-text-muted);
    font-weight: 600;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.xp-display {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 4px 12px;
    background: rgba(232, 197, 71, 0.1);
    border: 1px solid rgba(232, 197, 71, 0.3);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 700;
    color: var(--ui-xp);
    /* Editorial micro-details: monospace + tabular-nums = digits
       align perfectly when XP increments. Uppercase XP label is
       tracked wide for the editorial eyebrow look. */
    font-family: var(--font-terminal);
    font-variant-numeric: tabular-nums;
}
.xp-display > span:first-child {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--ui-text-muted);
}

.lang-toggle {
    display: flex;
    background: var(--color-earth-brown);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--ui-border);
}

.lang-btn {
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    background: transparent;
    color: var(--ui-text-muted);
    transition: all 0.2s;
}

.lang-btn.active {
    background: var(--color-terracotta);
    color: var(--ui-text-primary);
}

.lang-btn:hover:not(.active) {
    color: var(--ui-text-primary);
}

/* --- Main Content Area --- */
.main-content {
    flex: 1;
    display: flex;
    overflow: hidden;
}

/* --- Story Panel (Left) --- */
.story-panel {
    width: var(--story-panel-width);
    min-width: 340px;
    display: flex;
    flex-direction: column;
    background: var(--ui-bg-panel);
    border-right: 2px solid var(--ui-border);
    overflow: hidden;
}

.story-header {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--ui-border);
    background: rgba(0, 0, 0, 0.2);
}

.story-chapter-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-terracotta);
    margin-bottom: var(--space-xs);
}

.story-mission-title {
    font-family: var(--font-narrative);
    font-size: 20px;
    font-weight: 700;
    color: var(--ui-text-primary);
}

.story-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-lg);
}

.story-content::-webkit-scrollbar {
    width: 6px;
}

.story-content::-webkit-scrollbar-track {
    background: transparent;
}

.story-content::-webkit-scrollbar-thumb {
    background: var(--ui-border);
    border-radius: 3px;
}

.story-narrative {
    font-family: var(--font-narrative);
    font-size: 15px;
    line-height: 1.8;
    color: var(--ui-text-secondary);
    margin-bottom: var(--space-lg);
}

.story-narrative p {
    margin-bottom: var(--space-md);
    text-indent: 1.5em;
}

.story-narrative p:first-child {
    text-indent: 0;
}

/* Concept explanation box */
.concept-box {
    background: rgba(212, 160, 60, 0.08);
    border-left: 3px solid var(--color-ochre);
    padding: var(--space-md);
    margin: var(--space-lg) 0;
    border-radius: 0 6px 6px 0;
}

.concept-box-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-ochre);
    margin-bottom: var(--space-sm);
}

.concept-box p {
    font-family: var(--font-narrative);
    font-size: 14px;
    line-height: 1.7;
    color: var(--ui-text-secondary);
}

/* Hint box */
.hint-box {
    background: rgba(45, 90, 39, 0.1);
    border-left: 3px solid var(--color-deep-green);
    padding: var(--space-md);
    margin: var(--space-md) 0;
    border-radius: 0 6px 6px 0;
    display: none;
}

.hint-box.visible {
    display: block;
    animation: fadeIn 0.4s ease;
}

.hint-box-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-deep-green);
    margin-bottom: var(--space-xs);
}

.hint-box p {
    font-family: var(--font-narrative);
    font-size: 13px;
    line-height: 1.6;
    color: var(--ui-text-secondary);
}

/* Objectives checklist */
.objectives-section {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--ui-border);
}

.objectives-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-terracotta);
    margin-bottom: var(--space-md);
}

.objective-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    font-size: 13px;
    color: var(--ui-text-muted);
    transition: color 0.3s;
}

.objective-item.completed {
    color: var(--ui-success);
}

.objective-item.active {
    color: var(--ui-text-primary);
}

.objective-check {
    width: 16px;
    height: 16px;
    min-width: 16px;
    border: 2px solid var(--ui-text-muted);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
    transition: all 0.3s;
}

.objective-item.completed .objective-check {
    background: var(--ui-success);
    border-color: var(--ui-success);
}

.objective-item.completed .objective-check::after {
    content: '';
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -2px;
}

.objective-item.active .objective-check {
    border-color: var(--color-ochre);
    box-shadow: 0 0 6px rgba(212, 160, 60, 0.3);
}

.objective-label {
    font-family: var(--font-terminal);
    font-size: 12px;
}

/* Story panel bottom: hint button */
.story-footer {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--ui-border);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.hint-btn {
    padding: 6px 16px;
    background: rgba(45, 90, 39, 0.15);
    border: 1px solid var(--color-deep-green);
    border-radius: 4px;
    color: var(--color-deep-green);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.hint-btn:hover {
    background: rgba(45, 90, 39, 0.25);
}

.hint-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.hint-count {
    font-size: 11px;
    color: var(--ui-text-muted);
}

/* --- Notes Panel --- */
/* ============================================================
   GLOBAL NOTES - platform-wide notepad accessible from every view.
   Floating FAB (bottom-right, always visible) + overlay panel
   with two tabs (current note / all my notes).
   ============================================================ */
.notes-fab {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px 10px 14px;
    background: var(--color-terracotta);
    color: white;
    border: none;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(199, 91, 57, 0.35);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.notes-fab:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(199, 91, 57, 0.45);
}
.notes-fab span[aria-hidden] {
    font-size: 16px;
    line-height: 1;
}
.notes-fab__label {
    letter-spacing: 0.3px;
}

.notes-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 8, 4, 0.55);
    padding: 24px;
}
.notes-overlay__card {
    width: 100%;
    max-width: 640px;
    height: 100%;
    max-height: 580px;
    background: var(--ui-bg-panel);
    border: 1px solid var(--color-terracotta);
    border-radius: 6px /* capped from 10px per radius cap */;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.notes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: rgba(199, 91, 57, 0.1);
    border-bottom: 1px solid var(--ui-border);
}
.notes-header__title {
    font-family: var(--font-narrative), Georgia, serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-terracotta);
}
.notes-close {
    background: none;
    border: none;
    color: var(--ui-text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
}
.notes-close:hover {
    color: var(--ui-text-primary);
    background: rgba(0, 0, 0, 0.06);
}
.notes-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-bg-secondary);
}
.notes-tab {
    flex: 1;
    padding: 11px 14px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--ui-text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.notes-tab:hover { color: var(--ui-text-primary); }
.notes-tab.active {
    color: var(--color-terracotta);
    border-bottom-color: var(--color-terracotta);
    background: var(--ui-bg-panel);
}
.notes-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.notes-current {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.notes-current__label {
    padding: 10px 16px 0;
    font-size: 12px;
    color: var(--ui-text-secondary);
    font-style: italic;
}
.notes-textarea {
    flex: 1;
    padding: 12px 16px;
    background: var(--ui-bg-panel);
    border: none;
    color: var(--ui-text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    resize: none;
    outline: none;
}
.notes-textarea::placeholder { color: var(--ui-text-muted); }

.notes-all {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.notes-search {
    margin: 12px 16px 8px;
    padding: 8px 12px;
    background: var(--ui-bg-secondary);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    color: var(--ui-text-primary);
    font-size: 13px;
}
.notes-search:focus {
    outline: 2px solid var(--color-terracotta);
    outline-offset: -2px;
}
.notes-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 8px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.notes-list-item {
    text-align: left;
    background: var(--ui-bg-secondary);
    border: 1px solid var(--ui-border);
    border-left: 3px solid var(--color-ochre);
    border-radius: 6px;
    padding: 10px 14px;
    cursor: pointer;
    transition: transform 0.1s, border-color 0.15s;
    font-family: inherit;
    color: inherit;
}
.notes-list-item:hover {
    transform: translateX(2px);
    border-left-color: var(--color-terracotta);
}
.notes-list-item__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ui-text-primary);
    margin-bottom: 4px;
}
.notes-list-item__preview {
    font-size: 12px;
    color: var(--ui-text-secondary);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.notes-empty {
    padding: 24px 20px;
    color: var(--ui-text-secondary);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

/* Mobile: panel goes full-screen, FAB stays bottom-right */
@media (max-width: 600px) {
    .notes-overlay { padding: 0; }
    .notes-overlay__card {
        max-width: none;
        max-height: none;
        height: 100%;
        border-radius: 0;
        border: none;
    }
    .notes-fab__label { display: none; }
    .notes-fab { padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
    .notes-fab, .notes-list-item { transition: none; }
    .notes-fab:hover, .notes-list-item:hover { transform: none; }
}

/* --- Review Learn Button --- */
#reviewLearnBtn {
    background: rgba(212, 160, 60, 0.15);
    border-color: var(--color-ochre);
    color: var(--color-ochre);
}
#reviewLearnBtn:hover { background: rgba(212, 160, 60, 0.3); }

/* --- Terminal Panel (Right) --- */
.terminal-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--term-bg);
    position: relative;
}

.terminal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    background: #1a1a1a;
    border-bottom: 1px solid #333;
}

.terminal-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.terminal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.terminal-dot.red { background: #ff5f57; }
.terminal-dot.yellow { background: #febc2e; }
.terminal-dot.green { background: #28c840; }

.terminal-title {
    font-family: var(--font-terminal);
    font-size: 12px;
    color: #888;
    margin-left: var(--space-sm);
}

.terminal-device-info {
    font-family: var(--font-terminal);
    font-size: 11px;
    color: #555;
}

.terminal-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-md);
    font-family: var(--font-terminal);
    font-size: 14px;
    line-height: 1.4;
    color: var(--term-fg);
    cursor: text;
    position: relative;
    background: var(--term-bg);
    text-shadow: 0 0 1px rgba(204,204,204,0.25);
}

.terminal-body::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0) 0px,
        rgba(255,255,255,0) 2px,
        rgba(255,255,255,0.015) 3px,
        rgba(255,255,255,0) 4px
    );
    z-index: 1;
}

.terminal-body > * { position: relative; z-index: 2; }

.terminal-body.term-flash {
    animation: termFlash 0.25s ease-out;
}

@keyframes termFlash {
    0%   { background: #2a0a0a; }
    60%  { background: #1a0505; }
    100% { background: var(--term-bg); }
}

.terminal-body::-webkit-scrollbar {
    width: 8px;
}

.terminal-body::-webkit-scrollbar-track {
    background: #111;
}

.terminal-body::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 4px;
}

/* Terminal output lines */
.term-line {
    white-space: pre-wrap;
    word-wrap: break-word;
    min-height: 1.4em;
}

.term-line.command {
    color: var(--term-fg-bright);
    text-shadow: 0 0 2px rgba(255,255,255,0.35);
}

.term-line.output {
    color: var(--term-fg);
}

.term-line.error {
    color: var(--term-red);
    text-shadow: 0 0 2px rgba(255,80,80,0.4);
}

.term-line.system {
    color: var(--term-yellow);
}

.term-line.success {
    color: var(--term-green);
}

/* Input line */
.term-input-line {
    display: flex;
    white-space: pre;
    min-height: 1.4em;
}

.term-prompt {
    color: var(--term-fg-bright);
    white-space: pre;
    flex-shrink: 0;
}

.term-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--term-fg-bright);
    font-family: var(--font-terminal);
    font-size: 14px;
    line-height: 1.4;
    caret-color: var(--term-cursor);
    padding: 0;
    margin: 0;
    text-shadow: 0 0 2px rgba(255,255,255,0.35);
}

.term-input-line::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 1.2em;
    background: var(--term-cursor);
    vertical-align: bottom;
    margin-left: -8px;
    box-shadow: 0 0 4px var(--term-cursor);
    animation: termCursorBlink 1s steps(2) infinite;
    pointer-events: none;
    opacity: 0.85;
}

@keyframes termCursorBlink {
    50% { opacity: 0; }
}

.term-input::selection {
    background: var(--term-selection);
}

/* Boot sequence styling */
.term-boot {
    color: var(--term-fg);
}

.term-boot .highlight {
    color: var(--term-fg-bright);
}

/* --More-- pagination */
.term-more {
    color: var(--term-fg-bright);
    background: rgba(255, 255, 255, 0.1);
    animation: blink 1s step-end infinite;
}

/* --- Bottom Bar --- */
.bottombar {
    height: var(--bottombar-height);
    min-height: var(--bottombar-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-lg);
    background: var(--color-earth-dark);
    border-top: 1px solid var(--ui-border);
    font-size: 12px;
}

.bottombar-left {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    color: var(--ui-text-muted);
}

.bottombar-right {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.device-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--ui-text-muted);
}

.device-indicator .dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ui-success);
}

.mode-indicator {
    padding: 2px 8px;
    background: rgba(199, 91, 57, 0.15);
    border: 1px solid var(--color-terracotta);
    border-radius: 3px;
    color: var(--color-terracotta);
    font-family: var(--font-terminal);
    font-size: 11px;
    font-weight: 600;
}

.keyboard-hint {
    color: var(--ui-text-muted);
    font-size: 11px;
}

.keyboard-hint kbd {
    display: inline-block;
    padding: 1px 5px;
    background: var(--color-earth-brown);
    border: 1px solid var(--ui-border);
    border-radius: 3px;
    font-family: var(--font-terminal);
    font-size: 10px;
    color: var(--ui-text-secondary);
}

/* --- Mission Complete Overlay --- */
.mission-complete-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

.mission-complete-overlay.visible {
    display: flex;
    animation: fadeIn 0.5s ease;
}

.mission-complete-card {
    background: var(--ui-bg-panel);
    border: 2px solid var(--color-ochre);
    border-radius: 6px /* capped from 12px per radius cap */;
    padding: var(--space-xxl);
    text-align: center;
    max-width: 480px;
    width: 90%;
}

.mission-complete-title {
    font-family: var(--font-narrative);
    font-size: 28px;
    font-weight: 700;
    color: var(--color-ochre);
    margin-bottom: var(--space-md);
}

.mission-complete-xp {
    font-size: 36px;
    font-weight: 800;
    color: var(--ui-xp);
    margin: var(--space-md) 0;
    animation: xpGlow 1.5s ease-in-out;
    text-shadow: 0 0 20px rgba(232, 197, 71, 0.4);
}

.mission-complete-xp-total {
    font-size: 12px;
    color: var(--ui-text-muted);
    letter-spacing: 0.05em;
    margin: -6px 0 var(--space-md) 0;
}

.mission-complete-levelup {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin-bottom: var(--space-md);
    background: linear-gradient(135deg, var(--color-terracotta), var(--color-sunset-orange));
    border-radius: 6px /* capped from 20px per radius cap */;
    font-family: var(--font-narrative);
    font-size: 13px;
    font-weight: 700;
    color: white;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    animation: levelUpBounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 16px rgba(199, 91, 57, 0.4);
}

.levelup-sparkle {
    display: inline-block;
    animation: sparkleSpin 1.2s ease-in-out infinite;
    font-size: 14px;
}

.mission-complete-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.mission-complete-confetti span {
    position: absolute;
    top: -10px;
    width: 8px;
    height: 8px;
    border-radius: 1px;
    opacity: 0;
    animation: confettiFall 2.2s ease-out forwards;
}

/* Top-bar XP counter flash when mission XP is added */
@keyframes xpPulse {
    0%   { transform: scale(1); color: var(--ui-xp); text-shadow: none; }
    30%  { transform: scale(1.35); color: var(--color-gold); text-shadow: 0 0 18px rgba(232, 197, 71, 0.8); }
    100% { transform: scale(1); color: var(--ui-xp); text-shadow: none; }
}
.xp-pulse {
    animation: xpPulse 0.9s ease-out;
    display: inline-block;
}

@keyframes xpGlow {
    0%   { text-shadow: 0 0 0 rgba(232, 197, 71, 0); transform: scale(0.9); }
    40%  { text-shadow: 0 0 30px rgba(232, 197, 71, 0.7); transform: scale(1.08); }
    100% { text-shadow: 0 0 20px rgba(232, 197, 71, 0.4); transform: scale(1); }
}

@keyframes levelUpBounce {
    0%   { transform: scale(0) rotate(-8deg); opacity: 0; }
    60%  { transform: scale(1.15) rotate(2deg); opacity: 1; }
    100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes sparkleSpin {
    0%, 100% { transform: scale(1) rotate(0); }
    50%      { transform: scale(1.3) rotate(180deg); }
}

@keyframes confettiFall {
    0%   { transform: translateY(0) rotate(0); opacity: 1; }
    100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .mission-complete-xp,
    .mission-complete-levelup,
    .levelup-sparkle,
    .mission-complete-confetti span,
    .xp-pulse { animation: none !important; text-shadow: none !important; }
}

.mission-complete-text {
    font-family: var(--font-narrative);
    font-size: 15px;
    line-height: 1.7;
    color: var(--ui-text-secondary);
    margin-bottom: var(--space-lg);
}

.mission-next-btn {
    padding: 12px 32px;
    background: linear-gradient(135deg, var(--color-terracotta), var(--color-sunset-orange));
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.mission-next-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(199, 91, 57, 0.4);
}

/* ================================================================
   CELEBRATION TIERS 2 + 3 (arc-complete + cert-complete overlays)
   ================================================================
   Both overlays share .celebrate-overlay base + a tier-specific
   modifier (--arc / --cert). Type-led hero design (Option C from
   the design pass) - no character portrait, the typography +
   passport stamp do the work. The .celebrate-portrait <picture>
   slot is empty by default; sized to zero when no <img> child is
   present so layout doesn't reserve space.
   ================================================================ */

.celebrate-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;            /* above mission-complete (1100) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    background: rgba(0, 0, 0, 0.78);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.celebrate-overlay[hidden] { display: none; }
.celebrate-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}
:root[data-theme="light"] .celebrate-overlay {
    background: rgba(31, 24, 16, 0.65);
}

.celebrate-card {
    position: relative;
    max-width: 540px;
    width: 100%;
    padding: var(--space-xl) var(--space-xxl);
    background: var(--ui-bg-panel);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
    animation: celebrateRise 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.celebrate-card--cert { max-width: 580px; }

@keyframes celebrateRise {
    from { transform: translateY(20px) scale(0.96); opacity: 0; }
    to   { transform: translateY(0) scale(1);       opacity: 1; }
}

/* Eyebrow label - small uppercase track tag */
.celebrate-eyebrow {
    font: 600 11px var(--font-ui);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-terracotta);
    margin-bottom: var(--space-md);
}

/* TIER 2: arc number is the hero. Plex Serif, oversized, brand cream. */
.celebrate-arc-num {
    font-family: var(--font-narrative);
    font-size: 96px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--tracking-tight);
    color: var(--ui-text-primary);
    margin-bottom: var(--space-xs);
}
.celebrate-arc-num__prefix {
    display: block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--color-ochre);
    margin-bottom: var(--space-xs);
}
.celebrate-arc-title {
    font-family: var(--font-narrative);
    font-size: 22px;
    font-weight: 600;
    color: var(--ui-text-secondary);
    margin-bottom: var(--space-md);
    font-style: italic;
}

/* Terracotta divider rule used in both tiers */
.celebrate-rule {
    width: 80px;
    height: 2px;
    margin: var(--space-md) auto;
    background: var(--color-terracotta);
    border-radius: 999px;
}

/* TIER 3: cert stamp slot - hosts the SVG from CelebrationStamp.render */
.celebrate-stamp {
    margin: 0 auto var(--space-md);
    /* Width set by the SVG itself. Slight rotation for the
       "stamped at an angle" feel - undone on dashboard size by JS. */
    transform: rotate(-2deg);
    transform-origin: center;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
}
:root[data-theme="light"] .celebrate-stamp {
    filter: drop-shadow(0 4px 10px rgba(31, 24, 16, 0.18));
}

/* Cert name - Plex Serif large, with the cert code prominently shown. */
.celebrate-cert-name {
    font-family: var(--font-narrative);
    font-size: 28px;
    font-weight: 700;
    color: var(--ui-text-primary);
    margin-top: var(--space-sm);
    margin-bottom: var(--space-xs);
}
.celebrate-cert-sub {
    font: 500 13px var(--font-ui);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ui-text-secondary);
    margin-bottom: var(--space-md);
}

/* Stat row - 3 cards: XP / missions / time. Same visual language
   as the dashboard telemetry cards but tighter. */
.celebrate-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}
.celebrate-stat {
    padding: var(--space-md) var(--space-sm);
    background: var(--ui-bg-secondary);
    border-radius: var(--radius-md);
    border-top: 2px solid var(--color-ochre);
    text-align: center;
}
.celebrate-stat__value {
    font: 700 22px var(--font-ui);
    font-variant-numeric: tabular-nums;
    color: var(--color-ochre);
    line-height: 1.1;
}
.celebrate-stat__label {
    font: 500 10px var(--font-ui);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--ui-text-muted);
    margin-top: 4px;
}

/* Action row - share + next buttons. Share is secondary, next is
   primary (filled with track color or terracotta). */
.celebrate-actions {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-md);
}
.celebrate-btn {
    padding: 12px 24px;
    border-radius: var(--radius-md);
    font: 600 14px var(--font-ui);
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid transparent;
}
.celebrate-btn--share {
    background: transparent;
    color: var(--ui-text-primary);
    border-color: var(--ui-border);
}
.celebrate-btn--share:hover {
    border-color: var(--color-ochre);
    color: var(--color-ochre);
}
.celebrate-btn--next {
    /* Primary action - terracotta fill, theme-aware text via the
       on-accent token (clears AA in both themes per the color
       governance pass; see commit 1510182). */
    background: var(--color-terracotta);
    color: var(--ui-text-on-accent);
    border-color: var(--color-terracotta);
}
.celebrate-btn--next:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(204, 96, 64, 0.4);
}

/* Empty <picture> slot - zero-size when no <img> child. When asset
   lands later, drop in <source>+<img> and the slot expands. */
.celebrate-portrait {
    display: block;
    margin: var(--space-lg) auto 0;
    max-width: 220px;
}
.celebrate-portrait:empty { display: none; }
.celebrate-portrait img { width: 100%; height: auto; border-radius: var(--radius-md); }

/* Toast - "Link copied!" feedback when arc share clipboard completes.
   Positioned absolute inside the celebrate card; auto-fades. */
.celebrate-toast {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    padding: 8px 14px;
    background: var(--ui-success);
    color: var(--ui-text-on-success);
    border-radius: 999px;
    font: 600 12px var(--font-ui);
    letter-spacing: 0.3px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 1;
}
.celebrate-toast.is-visible { opacity: 1; }

/* Mobile: tighter padding, smaller hero numbers, stacked actions. */
@media (max-width: 767px) {
    .celebrate-card {
        padding: var(--space-lg) var(--space-md);
        max-width: 92vw;
    }
    .celebrate-arc-num { font-size: 64px; }
    .celebrate-cert-name { font-size: 22px; }
    .celebrate-stats { gap: 6px; }
    .celebrate-stat__value { font-size: 18px; }
    .celebrate-actions { flex-direction: column-reverse; }
    .celebrate-actions .celebrate-btn { width: 100%; justify-content: center; }
    .celebrate-stamp { transform: rotate(-1.5deg) scale(0.85); transform-origin: center top; }
}

@media (prefers-reduced-motion: reduce) {
    .celebrate-card { animation: none; }
    .celebrate-overlay { transition: none; }
    .celebrate-stamp { transform: none; }
    .celebrate-toast { transition: none; }
}

/* ================================================================
   MISSION 11.30 NOC DASHBOARD CHROME (RhcsaRotationRunner)
   ================================================================
   Reference incident May 2026: light-mode NOC dashboard had three
   contrast failures (priority badges muddy, ticket-card chips warm-
   on-warm, fleet-rail count badges fighting the surface). Root
   cause: rhcsa_rotation.js rendered these chrome elements via
   inline style="" with rgba(0,0,0,0.25) overlays designed for
   dark surfaces. Light mode landed those overlays on cream panels
   producing dark-cream backgrounds that buried the brand-color
   text on top.

   Fix: pull the chrome into class-based CSS so the priority/server-
   chip/count-badge system uses the brand-fill + on-fill-text
   token contract (Gate 1510182) instead of overlay+text. Both
   themes clear AA via the existing on-fill tokens defined per
   theme block.
   ================================================================ */

/* Priority badges - filled chip with on-fill text. Used in two
   places: ticket queue card (middle column) and ticket detail
   panel (right column). Same class everywhere. */
.rhcsa-rot-prio {
    display: inline-block;
    font: 600 10px var(--font-ui);
    padding: 2px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.5;
    border: 1px solid transparent;
    white-space: nowrap;
}
.rhcsa-rot-prio--p1 {
    background: var(--color-terracotta);
    color: var(--ui-text-on-error);
    border-color: var(--color-terracotta);
}
.rhcsa-rot-prio--p2 {
    background: var(--color-amber);
    color: var(--ui-text-on-amber);
    border-color: var(--color-amber);
}
.rhcsa-rot-prio--p3 {
    /* P3 = Normal (low-urgency). Deep green stays in :root only
       (no theme override) so contrast with white text is 7.89:1
       AAA in both themes. */
    background: var(--color-deep-green);
    color: #ffffff;
    border-color: var(--color-deep-green);
}
.rhcsa-rot-prio--p4 {
    background: var(--ui-bg-secondary);
    color: var(--ui-text-secondary);
    border-color: var(--ui-border);
}

/* Server name chip (web01, db01, app01, etc) inside ticket cards.
   Theme-aware surface + text, no transparency overlay. */
.rhcsa-rot-server-chip {
    display: inline-block;
    font: 500 11px var(--font-terminal);
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--ui-bg-secondary);
    color: var(--ui-text-primary);
    border: 1px solid var(--ui-border);
    white-space: nowrap;
}

/* Fleet-rail count badge (right side of each server row: "11",
   "3", "2"). Filled terracotta with white ink in both themes -
   matches the priority/error visual register since these counts
   are open-ticket totals (something to do, like a P1). The
   --zero modifier renders a dimmed dash for servers with no
   open tickets. */
.rhcsa-rot-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    font: 600 11px var(--font-terminal);
    padding: 1px 7px;
    border-radius: 3px;
    background: var(--color-terracotta);
    color: var(--ui-text-on-error);
    border: 1px solid var(--color-terracotta);
}
.rhcsa-rot-count-badge--zero {
    background: transparent;
    color: var(--ui-text-muted);
    border-color: transparent;
    font-weight: 400;
}

/* Ticket-card chrome wrapper. Currently rendered inline in
   rhcsa_rotation.js with bg-elevated; left as CSS hook for
   future class-based refactor without touching this commit's
   surface. */

/* --- Animations --- */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes blink {
    50% { opacity: 0; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-in {
    animation: slideUp 0.3s ease;
}

/* --- Conceptual Mission: OSI Layer Visualization --- */
.layer-explorer {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: var(--space-md);
    gap: var(--space-md);
    overflow-y: auto;
}

.layer-explorer-header {
    text-align: center;
    padding: var(--space-sm) 0;
}

.layer-explorer-title {
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-ochre);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.layer-explorer-subtitle {
    font-size: 12px;
    color: var(--ui-text-muted);
    margin-top: var(--space-xs);
}

.models-container {
    display: flex;
    gap: var(--space-lg);
    flex: 1;
    min-height: 0;
}

.model-column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.model-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ui-text-secondary);
    text-align: center;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--ui-border);
    margin-bottom: var(--space-sm);
}

.osi-layer {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid transparent;
    position: relative;
    min-height: 44px;
}

.osi-layer:hover {
    transform: translateX(3px);
}

.osi-layer.explored {
    border-color: var(--ui-success);
}

.osi-layer.explored::after {
    content: '';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 14px;
    background: var(--ui-success);
    border-radius: 50%;
}

.osi-layer.active {
    border-color: var(--color-ochre);
    box-shadow: 0 0 12px rgba(212, 160, 60, 0.2);
}

/* Layer colors , each layer has its own shade */
.osi-layer[data-layer="7"] { background: rgba(199, 91, 57, 0.2); }
.osi-layer[data-layer="6"] { background: rgba(224, 123, 60, 0.2); }
.osi-layer[data-layer="5"] { background: rgba(212, 160, 60, 0.2); }
.osi-layer[data-layer="4"] { background: rgba(45, 90, 39, 0.25); }
.osi-layer[data-layer="3"] { background: rgba(0, 120, 180, 0.2); }
.osi-layer[data-layer="2"] { background: rgba(100, 60, 150, 0.2); }
.osi-layer[data-layer="1"] { background: rgba(120, 80, 50, 0.25); }

.osi-layer:hover[data-layer="7"] { background: rgba(199, 91, 57, 0.35); }
.osi-layer:hover[data-layer="6"] { background: rgba(224, 123, 60, 0.35); }
.osi-layer:hover[data-layer="5"] { background: rgba(212, 160, 60, 0.35); }
.osi-layer:hover[data-layer="4"] { background: rgba(45, 90, 39, 0.4); }
.osi-layer:hover[data-layer="3"] { background: rgba(0, 120, 180, 0.35); }
.osi-layer:hover[data-layer="2"] { background: rgba(100, 60, 150, 0.35); }
.osi-layer:hover[data-layer="1"] { background: rgba(120, 80, 50, 0.4); }

.layer-number {
    font-family: var(--font-terminal);
    font-size: 13px;
    font-weight: 700;
    color: var(--ui-text-muted);
    min-width: 18px;
}

.layer-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ui-text-primary);
}

/* TCP/IP layers (wider, grouped) */
.tcpip-layer {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid transparent;
    text-align: center;
}

.tcpip-layer:hover { transform: translateX(-3px); }
.tcpip-layer.explored { border-color: var(--ui-success); }

.tcpip-layer[data-tcpip="application"] { background: rgba(199, 91, 57, 0.2); }
.tcpip-layer[data-tcpip="transport"] { background: rgba(45, 90, 39, 0.25); }
.tcpip-layer[data-tcpip="internet"] { background: rgba(0, 120, 180, 0.2); }
.tcpip-layer[data-tcpip="access"] { background: rgba(120, 80, 50, 0.25); }

/* Layer detail panel (shows when a layer is clicked) */
.layer-detail {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--ui-border);
    border-radius: 6px /* capped from 8px per radius cap */;
    padding: var(--space-md);
    margin-top: var(--space-sm);
    animation: slideUp 0.3s ease;
}

.layer-detail-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-ochre);
    margin-bottom: var(--space-sm);
}

.layer-detail-desc {
    font-family: var(--font-narrative);
    font-size: 14px;
    line-height: 1.7;
    color: var(--ui-text-secondary);
    margin-bottom: var(--space-md);
}

.layer-detail-analogy {
    background: rgba(212, 160, 60, 0.1);
    border-left: 3px solid var(--color-ochre);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
    border-radius: 0 4px 4px 0;
}

.layer-detail-analogy-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-ochre);
    margin-bottom: 2px;
}

.layer-detail-analogy p {
    font-family: var(--font-narrative);
    font-size: 13px;
    line-height: 1.5;
    color: var(--ui-text-secondary);
}

.layer-detail-protocols {
    font-family: var(--font-terminal);
    font-size: 12px;
    color: var(--term-green);
    padding: var(--space-sm);
    background: var(--term-bg);
    border-radius: 4px;
}

.layer-detail-protocols-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--ui-text-muted);
    margin-bottom: 2px;
    font-family: var(--font-ui);
}

/* Compare button */
.compare-btn {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: var(--space-sm);
    background: linear-gradient(135deg, var(--color-terracotta), var(--color-sunset-orange));
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.compare-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(199, 91, 57, 0.3);
}

.compare-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    :root {
        --story-panel-width: 35%;
    }
    .story-panel { min-width: 280px; }
}

@media (max-width: 767px) {
    /* MOBILE TAB-SWITCHER ARCHITECTURE
       Breakpoint is 767px not 768px so iPad mini portrait (exactly
       768px wide) stays on the desktop split-pane layout. Tablet
       UX expectation is two panels visible at once; the tab nav is
       phones-only. iPhone 14 Pro Max is 430px wide, so 767 is a
       comfortable phone ceiling.
       --------------------------------
       Below 768px, .main-content stops splitting horizontally and
       starts swapping which panel is visible. One panel takes 100%
       of the available height; the other is fully hidden via
       display:none. The .mobile-tab-nav at the bottom controls the
       swap. .main-content carries the tab state as a class:
         .main-content.is-tab-story  -> story panel visible
         .main-content.is-tab-right  -> terminal/right panel visible
       Default is .is-tab-story (set in JS on mission load unless
       phaseCompleted[0] is true, in which case .is-tab-right). */
    .main-content {
        display: block;
        flex-direction: unset;
        overflow: hidden;
        position: relative;
    }
    .story-panel,
    .terminal-panel {
        width: 100%;
        min-width: unset;
        max-height: unset;
        height: 100%;
        border-right: none;
        border-bottom: none;
        overflow-y: auto;
    }
    .story-panel { padding: 12px; }
    /* Default: story visible, right panel hidden. The is-tab-right
       class on .main-content reverses this. */
    .main-content.is-tab-right .story-panel { display: none; }
    .main-content:not(.is-tab-right) .terminal-panel { display: none; }

    /* Bottombar hides on mobile; the mobile-tab-nav takes its slot.
       The device/mode context that lived in .bottombar moves into a
       sticky header inside .terminal-body so it stays with the
       relevant panel. */
    .bottombar { display: none; }

    /* Mobile tab nav - 48px, replaces .bottombar slot. Each tab is
       50% width, full-tappable target, full-bleed. The active tab
       carries an ochre underline + ochre icon/label color. */
    .mobile-tab-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: var(--bottombar-height); /* 48px - same math as desktop */
        background: var(--ui-bg-panel);
        border-top: 1px solid var(--ui-border);
        z-index: 950; /* below FABs (999) and modals (1000+) */
    }
    .mobile-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        padding: 4px 8px;
        background: transparent;
        border: none;
        border-top: 2px solid transparent;
        color: var(--ui-text-muted);
        cursor: pointer;
        font: 600 11px var(--font-ui);
        letter-spacing: 0.5px;
        transition: color 0.15s, border-color 0.15s, background 0.15s;
        min-height: 44px; /* iOS recommended min tap target */
    }
    .mobile-tab__icon {
        font-size: 18px;
        line-height: 1;
    }
    .mobile-tab[aria-pressed="true"] {
        color: var(--color-ochre);
        border-top-color: var(--color-ochre);
        background: rgba(212, 160, 60, 0.06);
    }
    .mobile-tab:focus-visible {
        outline: 2px solid var(--color-ochre);
        outline-offset: -2px;
    }

    /* Mobile phase badge - replaces the now-hidden mission-title +
       progress-bar in .topbar-center. Tappable pill that opens the
       phase bottom sheet. */
    .topbar-center {
        display: flex;          /* override desktop hide-rule below */
        flex: 1;
        justify-content: center;
        min-width: 0;
    }
    .mission-title,
    .progress-container {
        display: none;          /* mobile: badge replaces both */
    }
    .mobile-phase-badge {
        display: inline-flex !important;  /* override the inline display:none on desktop */
        align-items: center;
        gap: 6px;
        padding: 6px 12px;
        background: var(--ui-bg-secondary);
        color: var(--ui-text-primary);
        border: 1px solid var(--ui-border);
        border-radius: 999px;
        font: 600 11px var(--font-ui);
        letter-spacing: 0.3px;
        cursor: pointer;
        min-height: 32px;
        transition: border-color 0.15s, background 0.15s;
    }
    .mobile-phase-badge:hover,
    .mobile-phase-badge:active {
        border-color: var(--color-ochre);
        background: var(--ui-bg-elevated);
    }
    .mobile-phase-badge__num {
        color: var(--color-ochre);
        font-variant-numeric: tabular-nums;
    }
    .mobile-phase-badge__label {
        color: var(--ui-text-secondary);
        max-width: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mobile-phase-badge__caret {
        font-size: 10px;
        color: var(--ui-text-muted);
    }

    /* In-terminal sticky header replaces the device/mode context that
       used to live in .bottombar. Mounts inside .terminal-body via
       JS (kept theme-aware via the same tokens .bottombar used). */
    .terminal-mobile-header {
        position: sticky;
        top: 0;
        z-index: 5;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        background: var(--color-earth-dark);
        border-bottom: 1px solid var(--ui-border);
        font: 600 10px var(--font-ui);
        letter-spacing: 0.5px;
        color: var(--ui-text-muted);
        text-transform: uppercase;
    }
    .terminal-mobile-header__device { color: var(--color-ochre); }
    .terminal-mobile-header__sep { opacity: 0.4; }

    /* FAB shift: Notes (.notes-fab, bottom-right) and the mentor chat
       (.rt-mentor-btn, also bottom-right inline-styled to bottom:20px)
       both float at the same corner as the new tab nav. Lift them by
       the tab-nav height + breathing room so they sit above the nav
       cleanly. The .rt-mentor-btn rule uses !important because its
       inline style needs overriding. */
    .notes-fab {
        bottom: calc(var(--bottombar-height) + var(--space-md));
    }
    .rt-mentor-btn {
        bottom: calc(var(--bottombar-height) + var(--space-md)) !important;
    }
    .rt-mentor-panel {
        bottom: calc(var(--bottombar-height) + 80px) !important;
    }

    .topbar {
        padding: 6px 8px;
        gap: 4px;
    }
    .topbar-left, .topbar-right {
        gap: 4px;
    }
    /* Topbar items shrink on mobile */
    .app-logo {
        font-size: 14px;
    }
    .arc-badge {
        font-size: 10px;
        padding: 2px 6px;
    }
    .back-btn {
        font-size: 16px;
        padding: 4px 8px;
        min-width: 32px;
        min-height: 32px;
    }
    .lang-btn {
        font-size: 11px;
        padding: 3px 6px;
    }
    .xp-display {
        font-size: 11px;
        padding: 3px 6px;
    }
    /* Mobile terminal improvements */
    .terminal-body {
        font-size: 11px !important;
        padding: 8px !important;
    }
    .term-input {
        font-size: 14px !important; /* prevent iOS zoom on focus */
    }
    .bottombar {
        flex-wrap: wrap;
        padding: 4px 8px;
    }
    .keyboard-hint {
        display: none; /* hide keyboard shortcuts on mobile */
    }
    /* (Old .notes-panel mobile rule removed - the platform-wide
       notes overlay now handles its own responsive layout. See
       the .notes-overlay block earlier in this file.) */
    /* Phase nav tabs: horizontal scroll if needed */
    .phase-nav {
        overflow-x: auto;
        white-space: nowrap;
        gap: 4px !important;
        -webkit-overflow-scrolling: touch;
    }
    .phase-tab {
        font-size: 10px !important;
        padding: 6px 10px !important;
        flex-shrink: 0;
    }
    /* Mission content pictures: 100% width on mobile */
    .story-panel picture img,
    .terminal-body picture img,
    .lesson-content picture img {
        max-width: 100% !important;
    }
    /* Lesson sections: tighter padding on mobile */
    .lesson-section-header {
        padding: 10px 12px !important;
    }
    .lesson-section-body {
        padding: 0 12px 12px !important;
    }
    .lesson-content {
        font-size: 13px !important;
    }
    /* Lab-specific: topology and hint must be scrollable within story panel */
    #labTopology svg, #labTopology picture img {
        max-width: 100%;
        height: auto;
    }
    /* (Removed: .story-panel.collapsed + .mobile-story-toggle were
       dead CSS - the toggle button never existed in the DOM, no JS
       ever toggled .collapsed on .story-panel. The "half-finished
       prior attempt" was actually unfinished; deleted to clear the
       trap before the new tab-switcher lands here.) */
}

@media (max-width: 480px) {
    /* Extra-narrow phones */
    .app-logo span { display: none; }  /* Only show "AKO" */
    .arc-badge { display: none; }
    .story-panel { padding: 10px; }
    .story-panel h4, .story-panel h3 { font-size: 14px !important; }
    .story-panel p { font-size: 12px !important; }
    .topbar { padding: 4px 6px; }
    .mission-title { display: none; }
    /* Tighter phase badge on 320-380px screens */
    .mobile-phase-badge { padding: 5px 10px; font-size: 10px; }
    .mobile-phase-badge__label { max-width: 70px; }
}

/* ================================================================
   MOBILE TAB NAV + PHASE BOTTOM SHEET (cross-viewport defaults)
   ================================================================
   Components are display:none by default; the @media (max-width:
   768px) block above turns the tab nav on. The bottom sheet stays
   display:none on every viewport until JS sets display:flex to
   open it - the .mobile-phase-badge that triggers the sheet is
   itself only visible on mobile, so the sheet is mobile-only by
   transitive scoping. */
.mobile-tab-nav {
    display: none;          /* mobile @media re-enables to display:flex */
}

/* Bottom-sheet phase picker. Backdrop covers the page; card slides
   up from the bottom. Card is constrained to a sensible max-width
   so on tablet it doesn't span the whole viewport. */
.mobile-phase-sheet {
    position: fixed;
    inset: 0;
    z-index: 1100;          /* above modals (1000), below mission-complete (1200) */
    align-items: flex-end;
    justify-content: center;
}
.mobile-phase-sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    animation: mobileSheetBackdropIn 0.18s ease-out;
}
.mobile-phase-sheet__card {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: var(--ui-bg-panel);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-top: 1px solid var(--ui-border);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.45);
    padding: 12px 0 max(16px, env(safe-area-inset-bottom));
    animation: mobileSheetIn 0.22s ease-out;
}
.mobile-phase-sheet__handle {
    width: 40px;
    height: 4px;
    background: var(--ui-text-muted);
    opacity: 0.5;
    border-radius: 999px;
    margin: 0 auto 12px;
}
.mobile-phase-sheet__title {
    font: 600 13px var(--font-ui);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-terracotta);
    text-align: center;
    margin-bottom: 12px;
}
.mobile-phase-sheet__list {
    list-style: none;
    margin: 0;
    padding: 0 8px;
}
.mobile-phase-sheet__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--ui-text-primary);
    font: 500 14px var(--font-ui);
    text-align: left;
    cursor: pointer;
    margin-bottom: 4px;
    min-height: 48px;
    transition: background 0.15s, border-color 0.15s;
}
.mobile-phase-sheet__item:hover,
.mobile-phase-sheet__item:active {
    background: var(--ui-bg-secondary);
}
.mobile-phase-sheet__item.is-current {
    background: var(--ui-bg-elevated);
    border-color: var(--color-ochre);
    color: var(--color-ochre);
}
.mobile-phase-sheet__item.is-completed::before {
    content: '\2713';       /* checkmark */
    color: var(--ui-success);
    font-weight: 700;
    margin-right: 4px;
}
.mobile-phase-sheet__item:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.mobile-phase-sheet__item-num {
    color: var(--ui-text-muted);
    font-variant-numeric: tabular-nums;
    min-width: 24px;
    font-size: 12px;
}
.mobile-phase-sheet__item.is-current .mobile-phase-sheet__item-num,
.mobile-phase-sheet__item.is-completed .mobile-phase-sheet__item-num {
    color: inherit;
}

@keyframes mobileSheetBackdropIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes mobileSheetIn {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .mobile-phase-sheet__backdrop,
    .mobile-phase-sheet__card { animation: none; }
}

/* ================================================================
   QUIZ ENGINE STYLES
   Graphic Designer: clean cards, clear feedback, accessible
   ================================================================ */

.quiz-progress {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.quiz-progress-bar {
    flex: 1;
    height: 4px;
    background: var(--color-earth-brown);
    border-radius: 2px;
    overflow: hidden;
}

.quiz-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-terracotta), var(--color-ochre));
    transition: width 0.4s ease;
}

.quiz-progress-text {
    font-size: 12px;
    color: var(--ui-text-muted);
    font-weight: 600;
    min-width: 50px;
    text-align: right;
}

.quiz-timer {
    font-family: var(--font-terminal);
    font-size: 13px;
    color: var(--color-ochre);
    font-weight: 700;
    min-width: 50px;
    text-align: right;
}

.quiz-score-display {
    font-size: 12px;
    color: var(--ui-text-muted);
    text-align: right;
    margin-bottom: var(--space-sm);
}

.quiz-card {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--ui-border);
    border-radius: 6px /* capped from 8px per radius cap */;
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
}

.quiz-question {
    font-family: var(--font-narrative);
    font-size: 15px;
    line-height: 1.7;
    color: var(--ui-text-primary);
    margin-bottom: var(--space-lg);
}

.quiz-choices {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.quiz-choice-btn {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    color: var(--ui-text-primary);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-ui);
}

.quiz-choice-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-ochre);
}

.quiz-choice-btn.selected {
    background: rgba(212, 160, 60, 0.15);
    border-color: var(--color-ochre);
}

.quiz-choice-btn.correct {
    background: rgba(76, 175, 80, 0.2);
    border-color: var(--ui-success);
    color: var(--ui-success);
}

.quiz-choice-btn.incorrect {
    background: rgba(239, 83, 80, 0.2);
    border-color: var(--ui-error);
    color: var(--ui-error);
}

.quiz-choice-btn:disabled {
    cursor: default;
    opacity: 0.8;
}

.quiz-submit-btn {
    display: block;
    width: 100%;
    padding: 10px;
    margin-top: var(--space-md);
    background: linear-gradient(135deg, var(--color-terracotta), var(--color-sunset-orange));
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.quiz-submit-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(199, 91, 57, 0.3);
}

.quiz-submit-btn:disabled {
    opacity: 0.5;
    cursor: default;
    transform: none;
}

/* Order exercise */
.quiz-order-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quiz-order-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    color: var(--ui-text-primary);
    font-size: 13px;
    cursor: grab;
    transition: all 0.2s;
    user-select: none;
}

.quiz-order-item:active { cursor: grabbing; }
.quiz-order-item.dragging { opacity: 0.4; }
.quiz-order-item.drag-over { border-color: var(--color-ochre); background: rgba(212, 160, 60, 0.1); }
.quiz-order-item.correct { border-color: var(--ui-success); background: rgba(76, 175, 80, 0.15); }
.quiz-order-item.incorrect { border-color: var(--ui-error); background: rgba(239, 83, 80, 0.15); }

.quiz-order-grip {
    color: var(--ui-text-muted);
    font-size: 14px;
    flex-shrink: 0;
}

/* Match exercise */
.quiz-match-container {
    display: flex;
    gap: var(--space-lg);
}

.quiz-match-left, .quiz-match-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.quiz-match-item {
    padding: 8px 12px;
    background: rgba(199, 91, 57, 0.15);
    border: 1px solid var(--color-terracotta);
    border-radius: 6px;
    color: var(--ui-text-primary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.quiz-match-item.selected {
    background: rgba(212, 160, 60, 0.3);
    border-color: var(--color-ochre);
    box-shadow: 0 0 8px rgba(212, 160, 60, 0.3);
}

.quiz-match-item.matched {
    opacity: 0.5;
    cursor: default;
}

.quiz-match-target {
    padding: 8px 12px;
    background: rgba(45, 90, 39, 0.15);
    border: 1px solid var(--color-deep-green);
    border-radius: 6px;
    color: var(--ui-text-primary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 38px;
}

.quiz-match-target:hover {
    border-color: var(--color-ochre);
}

.target-label {
    font-weight: 600;
}

.target-match {
    font-size: 12px;
    color: var(--color-ochre);
    font-style: italic;
}

/* Feedback */
.quiz-feedback {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: 6px /* capped from 8px per radius cap */;
    margin-top: var(--space-md);
}

.quiz-feedback.correct {
    background: rgba(76, 175, 80, 0.1);
    border: 1px solid var(--ui-success);
}

.quiz-feedback.incorrect {
    background: rgba(239, 83, 80, 0.1);
    border: 1px solid var(--ui-error);
}

.quiz-feedback-icon {
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.quiz-feedback.correct .quiz-feedback-icon { color: var(--ui-success); }
.quiz-feedback.incorrect .quiz-feedback-icon { color: var(--ui-error); }

.quiz-feedback-text {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ui-text-secondary);
}

.quiz-feedback-text strong {
    display: block;
    margin-bottom: 4px;
    color: var(--ui-text-primary);
}

/* Results */
.quiz-results {
    text-align: center;
    padding: var(--space-xxl) var(--space-lg);
}

.quiz-results-title {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--ui-text-muted);
    margin-bottom: var(--space-md);
}

.quiz-results-score {
    font-size: 48px;
    font-weight: 800;
    margin-bottom: var(--space-xs);
}

.quiz-results-score.passed { color: var(--ui-success); }
.quiz-results-score.failed { color: var(--ui-error); }

.quiz-results-pct {
    font-size: 20px;
    color: var(--ui-text-secondary);
    margin-bottom: var(--space-lg);
}

.quiz-results-message {
    font-family: var(--font-narrative);
    font-size: 15px;
    color: var(--ui-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.quiz-retry-btn {
    padding: 10px 32px;
    background: linear-gradient(135deg, var(--color-terracotta), var(--color-sunset-orange));
    border: none;
    border-radius: 6px;
    color: white;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s;
}

.quiz-retry-btn:hover {
    transform: translateY(-1px);
}

/* Phase navigation */
.phase-nav {
    display: flex;
    gap: 2px;
    padding: var(--space-sm) var(--space-md);
    background: rgba(0, 0, 0, 0.3);
    border-bottom: 1px solid var(--ui-border);
}

.phase-tab {
    flex: 1;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    color: var(--ui-text-muted);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    cursor: default;
    transition: all 0.2s;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.phase-tab[role="button"] {
    cursor: pointer;
}

.phase-tab[role="button"]:hover {
    border-color: var(--color-ochre);
    color: var(--color-ochre);
}

.phase-tab.active {
    background: rgba(212, 160, 60, 0.15);
    border-color: var(--color-ochre);
    color: var(--color-ochre);
}

.phase-tab.completed {
    background: rgba(76, 175, 80, 0.1);
    border-color: var(--ui-success);
    color: var(--ui-success);
}

.phase-tab.locked {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================================
   LESSON SECTIONS , accordion-style deep teaching content
   ============================================================ */

.lesson-section {
    transition: all 0.3s ease;
}

.lesson-section:hover:not(.locked) {
    border-color: var(--color-ochre) !important;
}

.lesson-section.locked {
    opacity: 0.5;
}

.lesson-section-header {
    transition: background 0.2s;
}

.lesson-section-header:hover:not([style*="not-allowed"]) {
    filter: brightness(1.1);
}

/* Legacy-renderer Prev/Next pager (Arcs 0-10 conceptual missions).
   Free-jump navigation between lesson sections matching the mshell
   (Arc 19) and two-column (Arc 17/18) pagers. Both variables
   (--ui-border, --ui-text-primary, --color-ochre, --font-terminal)
   are defined in both dark and light :root blocks (Gate 78 parity). */
.lesson-pager-prev,
.lesson-pager-next {
    padding: 6px 14px;
    border: 1px solid var(--ui-border);
    border-radius: 4px;
    background: transparent;
    color: var(--ui-text-primary);
    cursor: pointer;
    font-size: 13px;
    font-family: var(--font-terminal);
}

.lesson-pager-prev:hover:not(:disabled),
.lesson-pager-next:hover:not(:disabled) {
    border-color: var(--color-ochre);
    color: var(--color-ochre);
}

.lesson-pager-prev:disabled,
.lesson-pager-next:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.lesson-content {
    font-family: var(--font-narrative);
}

.lesson-content p {
    margin-bottom: 12px;
}

.lesson-content ul {
    margin: 8px 0 12px 20px;
    padding: 0;
}

.lesson-content ul li {
    margin-bottom: 6px;
    line-height: 1.6;
}

.lesson-content h4 {
    color: var(--color-ochre);
    font-size: 15px;
    margin: 20px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(212, 160, 60, 0.2);
}

.lesson-content strong {
    color: var(--ui-text-primary);
}

.lesson-checkpoint {
    animation: fadeIn 0.3s ease;
}

.section-done-btn {
    font-size: 13px;
}

/* ================================================================
   LESSON-IN-TERMINAL READABILITY FIX
   ================================================================
   CCNA / CCNP / Sec+ / RHCSA / CySA+ missions with `lessonSections`
   mount the lesson body inside #terminalBody (the right panel) via
   renderConceptualMission(). The .terminal-body class paints the
   #0c0c0c amber-on-black CRT palette - perfect for .term-line CLI
   output, terrible for body prose. Reference incident: a student
   on Mission 1.2 reported the lesson copy was unreadable on the
   amber dark theme (April 2026) - 1200+ words of teaching prose
   rendered as dim amber on near-black with a CRT text-shadow
   glow that made reading painful.

   Scope: only #conceptualContainer (the wrapper renderConceptual
   Mission creates for lessons) shifts to the lighter UI panel
   palette. Device terminal output (.term-line, .input-line, the
   boot sequence, multilab device tabs) lives in .terminal-body
   children that are NOT inside #conceptualContainer, so they keep
   the pitch-black CRT look untouched.

   Light-mode users were never affected because their whole theme
   shifts to a cream surface (RHCSA in light mode reads fine -
   that was the user's reference). This rule fixes the same class
   for amber-dark users on every arc.
   ================================================================ */
#terminalBody #conceptualContainer {
    background: var(--ui-bg-panel);
    color: var(--ui-text-primary);
    text-shadow: none;
}

/* Kill the CRT scanline + glow inside lesson areas (still renders
   on top of .terminal-body via the ::before pseudo on the parent
   - we override by raising the lesson container above z-index 1
   and giving it a solid bg that hides the scanlines below). */
#terminalBody #conceptualContainer .lesson-section {
    background: var(--ui-bg-secondary);
}
#terminalBody #conceptualContainer .lesson-section .lesson-section-body {
    background: var(--ui-bg-panel);
}

/* Body prose, lists, and inline strong tags inside the lesson
   container should read like a textbook - bright text-primary
   against the panel surface, not the dim amber on black. The
   !important overrides the inline `color:var(--ui-text-secondary)`
   that renderLessonSections sets on .lesson-content. Mission
   inline colors INSIDE content_fr/content_en (terracotta tags,
   ochre headers, etc.) keep working because those tags already
   have their own color styles - the !important only catches the
   wrapper div's inherited dim color, not deliberate emphasis. */
#terminalBody #conceptualContainer .lesson-content {
    color: var(--ui-text-primary) !important;
}
#terminalBody #conceptualContainer .lesson-content p,
#terminalBody #conceptualContainer .lesson-content li,
#terminalBody #conceptualContainer .lesson-content ol li,
#terminalBody #conceptualContainer .lesson-content ul li {
    color: var(--ui-text-primary);
}
/* Emphasis text (<strong>) inside lesson prose. Reference incident:
   the original rule used --ui-accent-hover (#e8c547 bright gold)
   which gave 2.4:1 contrast against cream paper - "eye hurting"
   per a user report on Mission 12.10's supply-chain bullet list
   (April 2026). Terracotta (#c75b39) gives 5.4:1 on cream and
   4.5:1 on dark, passes WCAG AA both ways, and stays inside the
   African earth-tone palette per the platform's brand guide
   (CLAUDE.md: "earth tones - terracotta, ochre, deep green;
   accent with gold"). Gold reserved for headings + ornamentation
   where contrast matters less. */
#terminalBody #conceptualContainer .lesson-content strong {
    color: var(--color-terracotta);
}

/* Headings inside lessons keep the ochre accent but with bumped
   weight so they pop against the lighter panel bg. */
#terminalBody #conceptualContainer .lesson-content h4,
#terminalBody #conceptualContainer .lesson-content h3 {
    color: var(--color-ochre);
}

/* Inline <code> in lesson prose: dark chip + bright text so it
   reads as "command artifact" against the panel bg, not buried
   in the same color as surrounding prose. */
#terminalBody #conceptualContainer .lesson-content code:not(pre code) {
    background: rgba(0, 0, 0, 0.45);
    color: var(--term-fg-bright);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.92em;
    font-family: var(--font-terminal);
}

/* <pre> blocks (Do This Now / Two-Minute Drill listings) keep the
   true terminal look so students recognize "this is a command to
   type" - same #0c0c0c bg, amber text. Just inside lesson context.*/
#terminalBody #conceptualContainer .lesson-content pre {
    background: var(--term-bg);
    color: var(--term-fg-bright);
    padding: 12px 14px;
    border-radius: 6px;
    font-family: var(--font-terminal);
    font-size: 13px;
    line-height: 1.5;
    overflow-x: auto;
    border: 1px solid var(--ui-border);
}

/* Section header bar text. Without this the accordion title sits
   on the lighter panel bg in the muted brown the dark-theme inline
   styles assume against #0c0c0c, and it reads as low-contrast. */
#terminalBody #conceptualContainer .lesson-section-header {
    color: var(--ui-text-primary);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.mission-link {
    color: var(--color-ochre);
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    font-weight: 600;
}
.mission-link:hover {
    color: var(--color-terracotta);
}

/* ================================================================
   PREREQ BANNER (Gate 14 Progression Continuity)
   Shown above the multilab topology panel when a student opens a lab
   whose concept-mission prereqs are not fully completed.
   ================================================================ */
.prereq-banner {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-left: 4px solid var(--color-ochre);
    border-radius: 6px;
    padding: 12px 14px;
    margin: 12px 0 6px 0;
}
.prereq-banner.warning {
    border-left-color: var(--color-terracotta);
    background: rgba(199, 91, 57, 0.08);
}
.prereq-banner.info { border-left-color: #4a8bbf; }
.prereq-head {
    font: 600 12px system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ui-text-muted);
    margin-bottom: 8px;
}
.prereq-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.prereq-link {
    background: transparent;
    border: 1px solid var(--ui-border);
    color: var(--ui-text-primary);
    padding: 6px 12px;
    border-radius: 6px /* capped from 14px per radius cap */;
    cursor: pointer;
    font: 500 13px system-ui, sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.prereq-link:hover { border-color: var(--color-ochre); color: var(--color-ochre); }
.prereq-id {
    font: 700 11px ui-monospace, Consolas, monospace;
    color: var(--color-ochre);
}
.prereq-title { color: var(--ui-text-secondary); font-size: 12px; }

/* ================================================================
   DASHBOARD ICON BUTTONS (search + profile + streak)
   ================================================================ */
.dash-icon-btn {
    background: transparent;
    border: 1px solid var(--ui-border);
    color: var(--ui-text-primary);
    width: 36px; height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}
.dash-icon-btn:hover { background: rgba(212,160,60,0.15); border-color: var(--color-ochre); }
.dash-streak {
    font: 600 14px system-ui, sans-serif;
    color: var(--color-ochre);
    background: rgba(212,160,60,0.12);
    border: 1px solid rgba(212,160,60,0.4);
    padding: 6px 12px;
    border-radius: 6px /* capped from 16px per radius cap */;
}

/* ================================================================
   PROFILE PAGE
   ================================================================ */
.profile-page { max-width: 880px; margin: 0 auto; padding: 32px 24px; color: var(--ui-text-primary); }
.profile-header { display: flex; align-items: center; gap: 20px; margin-bottom: 32px; flex-wrap: wrap; }
.profile-back-btn { background: transparent; border: 1px solid var(--ui-border); color: var(--ui-text-primary); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; font-size: 18px; }
.profile-back-btn:hover { border-color: var(--color-ochre); color: var(--color-ochre); }
.profile-avatar {
    width: 72px; height: 72px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font: 700 28px system-ui, sans-serif;
    color: #fff;
    flex-shrink: 0;
}
.profile-id { flex: 1; min-width: 200px; }
.profile-name { font: 700 24px system-ui, sans-serif; margin: 0 0 4px 0; color: var(--ui-text-primary); }
.profile-email { font-size: 13px; color: var(--ui-text-muted); margin: 0; }
.profile-anon-note { font-size: 12px; color: var(--color-ochre); margin: 6px 0 0 0; }
.profile-edit-btn { font-size: 13px; padding: 6px 14px; }

.profile-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 32px;
}
.profile-stat {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 6px /* capped from 8px per radius cap */;
    padding: 16px;
    text-align: center;
}
.stat-num { font: 800 28px system-ui, sans-serif; color: var(--color-ochre); margin-bottom: 4px; }
.stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--ui-text-muted); }
.stat-progress-bar { margin-top: 10px; height: 4px; background: var(--ui-surface-alt); border-radius: 2px; overflow: hidden; }
.stat-progress-fill { height: 100%; background: linear-gradient(90deg, var(--color-terracotta), var(--color-ochre)); }
.stat-progress-text { margin-top: 4px; font-size: 11px; color: var(--ui-text-muted); }

.profile-section-h {
    font: 600 14px system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-terracotta);
    margin: 32px 0 12px 0;
}
.profile-empty { color: var(--ui-text-muted); font-size: 13px; text-align: center; padding: 16px; background: var(--ui-surface); border-radius: 6px; }

.profile-achievements {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}
.profile-ach {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 6px /* capped from 8px per radius cap */;
    padding: 12px 8px;
    text-align: center;
    transition: border-color 0.15s, opacity 0.15s;
}
.profile-ach.locked { opacity: 0.35; filter: grayscale(0.7); }
.profile-ach.earned { border-color: var(--color-ochre); }
.ach-icon { font-size: 26px; margin-bottom: 4px; }
.ach-label { font-size: 11px; color: var(--ui-text-secondary); line-height: 1.3; }

.profile-arcs-list { display: flex; flex-direction: column; gap: 8px; }
.profile-arc-row {
    display: flex; align-items: center; gap: 14px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    padding: 10px 14px;
}
.arc-row-num {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--color-terracotta);
    color: #fff;
    font: 700 13px var(--font-ui);
    font-variant-numeric: tabular-nums;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.arc-row-info { flex: 1; min-width: 0; }
.arc-row-name {
    font: 500 14px var(--font-ui);
    margin-bottom: 4px;
    letter-spacing: var(--tracking-tight);
}
.arc-row-bar { height: 4px; background: var(--ui-surface-alt); border-radius: var(--radius-sm); overflow: hidden; }
.arc-row-bar-fill { height: 100%; background: linear-gradient(90deg, var(--color-terracotta), var(--color-ochre)); }
.arc-row-count {
    font: 600 13px var(--font-terminal);
    font-variant-numeric: tabular-nums;
    color: var(--ui-text-muted);
    white-space: nowrap;
}

.profile-history-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--ui-surface); border-radius: 6px; overflow: hidden; }
.profile-history-table th { text-align: left; padding: 10px 14px; background: var(--ui-surface-alt); font-weight: 600; color: var(--color-ochre); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.profile-history-table td { padding: 10px 14px; border-top: 1px solid var(--ui-border); }
.profile-pill { display: inline-block; font: 600 11px system-ui, sans-serif; padding: 2px 8px; border-radius: 6px /* capped from 10px per radius cap */; }
.profile-pill.pass { background: rgba(63,185,80,0.15); color: #3fb950; }
.profile-pill.fail { background: rgba(199,91,57,0.15); color: var(--color-terracotta); }
.profile-pill.warn { background: rgba(212,160,60,0.15); color: var(--color-ochre); }

.profile-best-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-left: 4px solid var(--color-ochre);
    border-radius: 6px;
    padding: 16px 20px;
}
.best-score { font: 800 32px system-ui, sans-serif; color: var(--color-ochre); }
.best-detail { font-size: 13px; color: var(--ui-text-muted); margin-top: 4px; }

.profile-notes-list { display: flex; flex-direction: column; gap: 10px; }
.profile-note-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-left: 3px solid var(--color-ochre);
    border-radius: 6px;
    padding: 12px 14px;
    transition: border-color 140ms ease;
}
.profile-note-card:hover { border-color: var(--color-ochre); }
.profile-note-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.profile-note-mid { font: 700 11px ui-monospace, Consolas, monospace; color: var(--color-ochre); background: rgba(212,160,60,0.12); border: 1px solid rgba(212,160,60,0.3); padding: 2px 8px; border-radius: 4px; letter-spacing: 0.5px; }
.profile-note-title { font: 600 14px system-ui, sans-serif; color: var(--ui-text-primary); flex: 1; min-width: 120px; }
.profile-note-open { font-size: 12px; padding: 5px 12px; }
.profile-note-body {
    font: 13px/1.55 system-ui, sans-serif;
    color: var(--ui-text-secondary);
    white-space: pre-wrap;
    word-break: break-word;
    padding-top: 6px;
    border-top: 1px dashed var(--ui-border);
}

.profile-settings { display: flex; flex-direction: column; gap: 12px; background: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 6px /* capped from 8px per radius cap */; padding: 16px; }
.setting-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.setting-row label { font-size: 13px; color: var(--ui-text-secondary); }
.setting-row input[type="date"] { padding: 6px 10px; border-radius: 4px; border: 1px solid var(--ui-border); background: var(--ui-bg); color: var(--ui-text-primary); font-size: 13px; }
.profile-signout-btn { align-self: flex-start; margin-top: 8px; }

/* ================================================================
   SEARCH OVERLAY
   ================================================================ */
.search-overlay {
    position: fixed; inset: 0;
    background: rgba(10,6,4,0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 80px;
    z-index: 9000;
}
.search-modal {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 6px /* capped from 10px per radius cap */;
    width: 90%; max-width: 720px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
}
.search-bar {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--ui-border);
}
.search-icon { font-size: 16px; color: var(--ui-text-muted); }
.search-bar input {
    flex: 1; background: transparent; border: none; outline: none;
    font: 400 16px system-ui, sans-serif;
    color: var(--ui-text-primary);
}
.search-bar input::placeholder { color: var(--ui-text-muted); }
.search-close {
    background: transparent; border: 1px solid var(--ui-border);
    color: var(--ui-text-muted); width: 28px; height: 28px;
    border-radius: 50%; cursor: pointer; font-size: 16px;
}
.search-close:hover { color: var(--color-terracotta); border-color: var(--color-terracotta); }
.search-results { flex: 1; overflow-y: auto; padding: 12px 18px; }
.search-arc-h { font: 600 12px system-ui, sans-serif; text-transform: uppercase; letter-spacing: 1.5px; color: var(--color-ochre); margin: 12px 0 8px 0; }
.search-arc-list { display: flex; flex-direction: column; gap: 4px; }
.search-result {
    display: flex; align-items: center; gap: 10px;
    width: 100%; text-align: left;
    background: transparent; border: 1px solid transparent;
    color: var(--ui-text-primary);
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font: 400 14px system-ui, sans-serif;
}
.search-result:hover { background: rgba(212,160,60,0.12); border-color: var(--color-ochre); }
.search-result-status { font-size: 14px; }
.search-result-id { font: 600 12px ui-monospace, Consolas, monospace; color: var(--ui-text-muted); min-width: 36px; }
.search-result-title { flex: 1; }
.search-hint, .search-empty { color: var(--ui-text-muted); font-size: 13px; padding: 16px; text-align: center; }
.search-footer {
    padding: 10px 18px;
    border-top: 1px solid var(--ui-border);
    font-size: 11px;
    color: var(--ui-text-muted);
    text-align: center;
}
.search-footer kbd {
    display: inline-block; padding: 1px 6px;
    background: var(--ui-surface-alt);
    border: 1px solid var(--ui-border);
    border-radius: 3px;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 11px;
}

/* ================================================================
   3G LAZY-LOAD OVERLAY (visible while mission files download)
   ================================================================ */
.platform-loading {
    position: fixed;
    inset: 0;
    background: rgba(10, 6, 4, 0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}
.platform-loading-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 6px /* capped from 12px per radius cap */;
    padding: 32px 40px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.platform-loading-spinner {
    width: 48px;
    height: 48px;
    border: 3px solid var(--ui-border);
    border-top-color: var(--color-ochre);
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: platform-spin 0.8s linear infinite;
}
@keyframes platform-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .platform-loading-spinner { animation: none; border-top-color: var(--color-ochre); }
}
.platform-loading-title {
    font: 600 17px system-ui, sans-serif;
    color: var(--ui-text-primary);
    margin-bottom: 8px;
}
.platform-loading-sub {
    font: 400 13px system-ui, sans-serif;
    color: var(--ui-text-muted);
    line-height: 1.5;
    margin-bottom: 20px;
}
.platform-loading-progress {
    height: 6px;
    background: var(--ui-surface-alt);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 8px;
}
.platform-loading-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--color-terracotta), var(--color-ochre));
    border-radius: 3px;
    transition: width 0.2s ease-out;
}
.platform-loading-count {
    font: 500 12px ui-monospace, Consolas, monospace;
    color: var(--ui-text-muted);
}

/* ================================================================
   MOCK EXAM (Boson-style CCNA 200-301 timed practice)
   ================================================================ */
.mock-exam-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-left: 4px solid var(--color-ochre);
    border-radius: 6px /* capped from 8px per radius cap */;
    padding: 20px 24px;
    margin-bottom: 24px;
}
.mock-exam-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.mock-exam-card-head h4 {
    font-size: 18px;
    color: var(--ui-text-primary);
    margin: 0 0 4px 0;
}
.mock-exam-card-sub {
    font-size: 13px;
    color: var(--ui-text-muted);
    margin: 0;
}
.mock-exam-card-meta {
    margin-top: 12px;
    font-size: 12px;
    color: var(--ui-text-muted);
    border-top: 1px dashed var(--ui-border);
    padding-top: 12px;
}
.mock-exam-card-meta strong { color: var(--color-ochre); }
.domain-exam-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 8px;
}
.domain-btn {
    font-size: 13px;
    padding: 10px 12px;
    text-align: left;
}
.domain-btn:hover { border-color: #4a8bbf; color: #4a8bbf; }

/* ================================================================
   FILLED-BUTTON COMPONENT CLASSES
   ================================================================
   Risk this addresses: an author writing
       <button style="background: var(--ui-accent); color: var(--ui-text-primary)">
   gets cream-on-ochre, which clears 8:1 in dark mode and FAILS at
   2.35:1 in light mode (white cream on light ochre). The token
   --ui-text-on-accent exists, but nothing forces an author to use it.

   These classes bake the bg + text pairing together so the author
   has no color choice to get wrong. Always use these instead of
   inline color overrides on filled brand-color buttons.

       <button class="btn-fill-accent">Continue</button>
       <button class="btn-fill-amber">Live</button>
       <button class="btn-fill-success">Pass</button>

   Hover states swap to the hover-fill variant but keep the same
   on-fill text - no light/dark text flip on hover (that flickers and
   creates the historical .btn-primary:hover white-on-ochre bug).
   ================================================================ */
.btn-primary,
.btn-secondary,
.btn-fill-accent,
.btn-fill-amber,
.btn-fill-success,
.btn-fill-error {
    font: 600 14px system-ui, sans-serif;
    padding: 10px 20px;
    border-radius: 6px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}

/* Filled primary CTA - terracotta. Historical bug #1: hardcoded
   color: #fff with hover swapping bg to ochre - white on dark ochre
   #d4a03c = 2.35:1 hard FAIL in dark mode. Historical bug #2: even
   without the hover, cream-on-dark-terracotta only measured 3.49:1
   (AA-large only - fails for typical 14-16px medium button labels).
   Fixed: text uses --ui-text-on-accent which resolves to dark ink in
   dark mode (#120e08 on terracotta #cc6040 = 4.86 AA) and white in
   light mode (#fff on terracotta #a04830 = 6.07 AA). Hover stays in
   the terracotta family (filter:brightness, no fill-color flip). */
.btn-primary {
    background: var(--color-terracotta);
    color: var(--ui-text-on-accent);
    border-color: var(--color-terracotta);
}
.btn-primary:hover {
    filter: brightness(1.08);
}
.btn-primary:disabled { opacity: 0.45; cursor: not-allowed; }

/* Filled accent CTA - ochre. Author who needs an ochre filled button
   uses this class (NOT inline color override). The on-accent text
   token resolves to the right ink per theme:
     dark: #120e08 on dark ochre #d4a03c = 8.2 AAA
     light: #ffffff on light ochre #9d6a00 = 4.64 AA */
.btn-fill-accent {
    background: var(--ui-accent);
    color: var(--ui-text-on-accent);
    border-color: var(--ui-accent);
}
.btn-fill-accent:hover {
    background: var(--ui-accent-hover);
    border-color: var(--ui-accent-hover);
    color: var(--ui-text-on-accent);
}
.btn-fill-accent:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-fill-amber {
    background: var(--color-amber);
    color: var(--ui-text-on-amber);
    border-color: var(--color-amber);
}
.btn-fill-amber:hover  { filter: brightness(1.08); }
.btn-fill-amber:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-fill-success {
    background: var(--ui-success);
    color: var(--ui-text-on-success);
    border-color: var(--ui-success);
}
.btn-fill-success:hover { filter: brightness(1.08); }
.btn-fill-success:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-fill-error {
    background: var(--ui-error);
    color: var(--ui-text-on-error);
    border-color: var(--ui-error);
}
.btn-fill-error:hover { filter: brightness(1.08); }
.btn-fill-error:disabled { opacity: 0.45; cursor: not-allowed; }

/* Outline / ghost button - safe in both themes because background
   is transparent and text uses the theme-aware token. */
.btn-secondary {
    background: transparent;
    color: var(--ui-text-primary);
    border-color: var(--ui-border);
}
.btn-secondary:hover { border-color: var(--color-ochre); color: var(--color-ochre); }
.btn-secondary:disabled { opacity: 0.4; cursor: not-allowed; }

.exam-view {
    max-width: 780px;
    margin: 0 auto;
    padding: 32px 24px;
    color: var(--ui-text-primary);
}
.exam-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.exam-progress {
    flex: 1;
    font-size: 14px;
    color: var(--ui-text-muted);
}
.exam-progress strong { color: var(--color-ochre); }
.exam-timer {
    font: 700 22px ui-monospace, Consolas, monospace;
    color: var(--ui-text-primary);
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    padding: 6px 14px;
    min-width: 90px;
    text-align: center;
}
.exam-timer.exam-timer-warning { color: var(--color-ochre); border-color: var(--color-ochre); }
.exam-timer.exam-timer-critical {
    color: #fff;
    background: var(--color-terracotta);
    border-color: var(--color-terracotta);
    animation: exam-pulse 1s infinite;
}
@keyframes exam-pulse { 50% { opacity: 0.7; } }
@media (prefers-reduced-motion: reduce) {
    .exam-timer.exam-timer-critical { animation: none; }
}
.exam-quit {
    font: 600 13px system-ui, sans-serif;
    background: transparent;
    color: var(--ui-text-muted);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    padding: 8px 14px;
    cursor: pointer;
}
.exam-quit:hover { color: var(--color-terracotta); border-color: var(--color-terracotta); }

.exam-card {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 6px /* capped from 10px per radius cap */;
    padding: 28px;
}
.exam-prompt {
    font: 500 17px system-ui, sans-serif;
    line-height: 1.5;
    margin-bottom: 24px;
    color: var(--ui-text-primary);
}
.exam-choices {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}
.exam-choice {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    text-align: left;
    background: transparent;
    border: 1px solid var(--ui-border);
    border-radius: 6px /* capped from 8px per radius cap */;
    padding: 14px 16px;
    color: var(--ui-text-primary);
    cursor: pointer;
    font: 500 14px system-ui, sans-serif;
    transition: background 0.15s, border-color 0.15s;
}
.exam-choice:hover {
    background: rgba(212, 160, 60, 0.08);
    border-color: var(--color-ochre);
}
.exam-choice.selected {
    background: rgba(212, 160, 60, 0.18);
    border-color: var(--color-ochre);
    box-shadow: inset 0 0 0 1px var(--color-ochre);
}
.exam-choice-letter {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ui-surface-alt, rgba(255,255,255,0.05));
    border: 1px solid var(--ui-border);
    font-weight: 700;
    color: var(--color-ochre);
    flex-shrink: 0;
}
.exam-choice.selected .exam-choice-letter {
    background: var(--color-ochre);
    color: #1a1410;
    border-color: var(--color-ochre);
}
.exam-choice-text { line-height: 1.45; }
.exam-nav {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

.exam-results {
    text-align: center;
    padding: 20px 0;
}
.exam-results-title {
    font: 800 64px system-ui, sans-serif;
    margin: 0 0 8px 0;
    letter-spacing: -0.02em;
}
.exam-results-title.passed { color: #3fb950; }
.exam-results-title.failed { color: var(--color-terracotta); }
.exam-timeout-badge {
    display: inline-block;
    font: 600 14px system-ui, sans-serif;
    background: var(--color-terracotta);
    color: #fff;
    padding: 4px 10px;
    border-radius: 6px;
    vertical-align: middle;
    margin-right: 12px;
}
.exam-results-subtitle {
    font-size: 18px;
    color: var(--ui-text-muted);
    margin: 0 0 16px 0;
}
.exam-results-verdict {
    font: 600 16px system-ui, sans-serif;
    margin: 0 0 8px 0;
}
.exam-results-verdict.passed { color: #3fb950; }
.exam-results-verdict.failed { color: var(--color-terracotta); }
.exam-xp-awarded {
    font: 700 20px system-ui, sans-serif;
    color: var(--color-ochre);
    margin: 12px 0 32px 0;
}
.exam-section-heading {
    font: 600 14px system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-terracotta);
    text-align: left;
    margin: 24px 0 12px 0;
}
.exam-domain-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 32px;
}
.exam-domain-row {
    display: grid;
    grid-template-columns: 2fr 60px 160px;
    align-items: center;
    gap: 16px;
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-radius: 6px /* capped from 8px per radius cap */;
    padding: 12px 16px;
    text-align: left;
}
.exam-domain-row.weak {
    border-color: var(--color-terracotta);
    background: rgba(199, 91, 57, 0.08);
}
.exam-domain-name {
    font: 500 14px system-ui, sans-serif;
    color: var(--ui-text-primary);
}
.exam-domain-score {
    font: 600 14px ui-monospace, Consolas, monospace;
    color: var(--ui-text-muted);
    text-align: right;
}
.exam-domain-bar {
    position: relative;
    height: 22px;
    background: var(--ui-surface-alt, rgba(255,255,255,0.04));
    border-radius: 4px;
    overflow: hidden;
}
.exam-domain-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-terracotta), var(--color-ochre));
    border-radius: 4px;
}
.exam-domain-bar-label {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    font: 700 12px system-ui, sans-serif;
    color: var(--ui-text-primary);
}
.exam-weak-badge {
    display: inline-block;
    font: 600 11px system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    background: var(--color-terracotta);
    color: #fff;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 8px;
}
.exam-results-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

.exam-review { padding: 20px 0; }
.exam-review h1 {
    font: 700 28px system-ui, sans-serif;
    color: var(--color-ochre);
    margin: 0 0 8px 0;
}
.exam-review-subtitle {
    color: var(--ui-text-muted);
    font-size: 14px;
    margin: 0 0 24px 0;
}
.exam-review-item {
    background: var(--ui-surface);
    border: 1px solid var(--ui-border);
    border-left: 4px solid var(--color-terracotta);
    border-radius: 6px /* capped from 8px per radius cap */;
    padding: 16px 20px;
    margin-bottom: 16px;
}
.exam-review-q {
    font: 500 15px system-ui, sans-serif;
    color: var(--ui-text-primary);
    line-height: 1.45;
    margin-bottom: 12px;
}
.exam-review-wrong,
.exam-review-right {
    font: 500 14px system-ui, sans-serif;
    margin-bottom: 6px;
    line-height: 1.4;
}
.exam-review-wrong .lbl {
    font-weight: 700;
    color: var(--color-terracotta);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    margin-right: 4px;
}
.exam-review-right .lbl {
    font-weight: 700;
    color: #3fb950;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    margin-right: 4px;
}
.exam-review-exp {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--ui-border);
    color: var(--ui-text-muted);
    font: 400 13px system-ui, sans-serif;
    line-height: 1.5;
}
.exam-review-perfect {
    text-align: center;
    color: #3fb950;
    font: 600 18px system-ui, sans-serif;
    padding: 40px 0;
}
/* ================================================================
   RHCSA Lab (Gate 25 hands-on track for Arc 11)
   Two-column layout: numbered tasks on the left, live RHEL 9
   terminal on the right. Engine validates state after each command.
   ================================================================ */
.rhcsa-lab { display: flex; flex-direction: column; gap: 16px; }
.rhcsa-lab__header h3 {
    font: 600 18px var(--font-narrative);
    color: var(--color-ochre);
    margin: 0 0 6px;
}
.rhcsa-lab__header p {
    color: var(--ui-text-secondary);
    font-size: 13px;
    margin: 0;
}
.rhcsa-lab__split {
    display: grid;
    grid-template-columns: minmax(240px, 30%) 1fr;
    gap: 16px;
    align-items: stretch;
    min-height: 480px;
}
@media (max-width: 900px) {
    .rhcsa-lab__split { grid-template-columns: 1fr; }
}

/* When an rhcsa_lab is active in a CLI phase (1/2/3), shrink the
   left story-panel so the right-side lab gets more horizontal room
   to host the task list AND a usable bash terminal. The narrative is
   already complete (Learn phase done) - we just need the chapter
   label, the title, and the phase tabs visible on the left. */
body.rhcsa-lab-active {
    --story-panel-width: 22%;
}
body.rhcsa-lab-active .story-panel {
    min-width: 220px;
}
.rhcsa-lab__tasks {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 540px;
    overflow-y: auto;
    padding-right: 4px;
}
.rhcsa-task {
    background: var(--ui-bg-panel);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    padding: 10px 12px;
    transition: border-color 0.2s, opacity 0.2s;
}
/* Three-state visual model: done / active / pending. Each state has
   its own border + number-badge color + goal-text opacity so the eye
   instantly knows where we are in the phase. Active state uses a
   solid 2px border (no glow - glow renders inconsistently across
   browsers and adds no information). */

/* DONE: green border + 4px left stripe + check mark. Solid panel bg
   keeps prose readable on either theme - the old rgba(...,0.12) tint
   was unreadable when the card sat over the dark CLI terminal panel
   in light mode. */
.rhcsa-task--done {
    border-color: var(--color-deep-green);
    background: var(--ui-bg-panel);
    box-shadow: inset 4px 0 0 var(--color-deep-green);
    padding-left: 16px;
}
/* ACTIVE: solid 2px terracotta border draws the eye to the next task
   to focus on. The 1px increase is absorbed by reducing padding by
   1px so adjacent cards don't shift when state transitions. */
.rhcsa-task--active {
    border-color: var(--color-terracotta);
    border-width: 2px;
    padding: 9px 11px;
}
/* PENDING: dim everything below 60% opacity. Border stays neutral.
   Number badge + goal text both fade so it's clear "we'll get to
   you, not now". Hover/focus do NOT brighten - the visual signal is
   intentional and shouldn't be cancelled by accidental cursor
   movement. */
.rhcsa-task--pending {
    opacity: 0.55;
}
.rhcsa-task__head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ui-text-muted);
    margin-bottom: 6px;
}
.rhcsa-task__num {
    background: var(--color-terracotta);
    color: white;
    font-weight: 700;
    border-radius: 50%;
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}
.rhcsa-task--done .rhcsa-task__num { background: var(--color-deep-green); }
/* Pending number badge fades to muted grey - the terracotta-on-pending
   was reading as "this is also active". The opacity rule on the parent
   .rhcsa-task--pending dims the whole card; this resets the badge to a
   neutral grey first so the dim looks like "not yet" not "broken". */
.rhcsa-task--pending .rhcsa-task__num {
    background: var(--ui-text-muted);
}
.rhcsa-task__status { flex: 1; }
.rhcsa-task__attempts {
    background: rgba(199, 91, 57, 0.18);
    color: var(--color-terracotta);
    border-radius: 6px /* capped from 10px per radius cap */;
    padding: 1px 8px;
    font-weight: 700;
}
/* Prose in the goal card uses the system sans-serif stack so French
   accents (é, è, ê, à, ç) render cleanly. The <code> spans inside
   are overridden below to keep the monospace terminal aesthetic for
   commands and paths only. This is the single biggest readability
   jump in the rhcsa_lab card UX. */
.rhcsa-task__goal {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: var(--ui-text-primary);
}
.rhcsa-task__goal code {
    background: rgba(0, 0, 0, 0.35);
    padding: 1px 5px;
    border-radius: 3px;
    color: var(--term-fg-bright);
    font-family: var(--font-terminal);
    font-size: 12px;
}
.rhcsa-task__hint {
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(212, 160, 60, 0.1);
    border-left: 3px solid var(--color-ochre);
    border-radius: 4px;
    font-size: 12px;
    color: var(--ui-text-secondary);
}
.rhcsa-task__hint code {
    background: rgba(0, 0, 0, 0.35);
    padding: 1px 5px;
    border-radius: 3px;
    color: var(--term-fg-bright);
    font-family: var(--font-terminal);
    font-size: 12px;
}
.rhcsa-lab__terminal {
    background: var(--term-bg);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.rhcsa-term {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 420px;
}
.rhcsa-term__hint {
    padding: 8px 12px;
    background: rgba(245, 204, 92, 0.06);
    border-bottom: 1px solid var(--ui-border);
    font-size: 11px;
    color: var(--ui-text-muted);
}
.rhcsa-term__output {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
    font: 13px/1.45 var(--font-terminal);
    color: var(--term-fg);
}
.rhcsa-term__line { white-space: pre-wrap; word-wrap: break-word; }
.rhcsa-term__line--cmd { color: var(--term-fg-bright); }
.rhcsa-term__line--error { color: var(--term-red); }
.rhcsa-term__line--warning { color: var(--term-yellow); }
.rhcsa-term__line--hint { color: var(--color-ochre); font-style: italic; }
.rhcsa-term__line--success { color: var(--term-green); }
.rhcsa-term__inputline {
    display: flex;
    align-items: center;
    border-top: 1px solid var(--ui-border);
    padding: 8px 12px;
    gap: 6px;
}
.rhcsa-term__prompt {
    color: var(--term-fg-bright);
    font: 13px var(--font-terminal);
    white-space: nowrap;
}
.rhcsa-term__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--term-fg);
    font: 13px var(--font-terminal);
    caret-color: var(--term-cursor);
}

/* When the runner is mounted in the left panel only (terminal lives
   in the native right panel), the task list takes full width. */
.rhcsa-lab__tasks--standalone {
    max-height: none;
}

/* The Linux terminal takes over the existing #terminalBody, so the
   .rhcsa-term inside it should fill that container. */
#terminalBody .rhcsa-term {
    min-height: 0;
    height: 100%;
}
#terminalBody .rhcsa-term__output {
    min-height: 240px;
}

/* ================================================================
   ARC 15 KALI LAB STYLING
   ================================================================
   The Kali lab reuses .rhcsa-lab + .rhcsa-task layout (no need to
   duplicate two-column grid + task card chrome), and adds:
     - .kali-term* terminal styling with PostgreSQL-blue accents
       (Kali's brand colour family) + Kali dragon glyph next to the
       prompt.
     - .kali-lab__authbanner with a strong amber "Lab only" warning
       that mounts above every Kali phase. Visible signal that the
       student is in a controlled environment, no live targets.
   ================================================================ */
.kali-lab__header h3::before {
    content: "\1F409";  /* dragon emoji - Kali's mascot */
    margin-right: 8px;
    filter: hue-rotate(-30deg);
}
.kali-lab__authbanner {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 152, 0, 0.10);
    border: 1px solid rgba(255, 152, 0, 0.45);
    border-left: 4px solid #ff9800;
    padding: 10px 14px;
    border-radius: 0 6px 6px 0;
    font-size: 12.5px;
    color: var(--ui-text);
}
.kali-lab__authbanner-icon {
    font-size: 16px;
    color: #ff9800;
}
.kali-lab__authbanner-text {
    flex: 1;
    line-height: 1.45;
}

.kali-term {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 420px;
    background: #0a0a0a;
    border: 1px solid #367bf0;
    border-radius: 6px;
    overflow: hidden;
}
.kali-term__hint {
    padding: 8px 12px;
    background: rgba(54, 123, 240, 0.08);
    border-bottom: 1px solid rgba(54, 123, 240, 0.30);
    font-size: 11px;
    color: var(--ui-text-muted);
}
.kali-term__output {
    flex: 1;
    overflow-y: auto;
    padding: 10px 12px;
    font: 13px/1.45 var(--font-terminal);
    color: #e0e0e0;
    background: #0a0a0a;
}
.kali-term__line { white-space: pre-wrap; word-wrap: break-word; }
.kali-term__line--cmd { color: #ffffff; }
.kali-term__line--error { color: #ff5252; }
.kali-term__line--warning { color: #ffc107; }
.kali-term__line--hint { color: #ff9800; font-style: italic; }
.kali-term__line--success { color: #4caf50; }
.kali-term__inputline {
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(54, 123, 240, 0.30);
    padding: 8px 12px;
    gap: 6px;
    background: #0a0a0a;
}
.kali-term__prompt {
    color: #367bf0;
    font: 13px var(--font-terminal);
    white-space: nowrap;
    font-weight: 600;
}
.kali-term__input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #ffffff;
    font: 13px var(--font-terminal);
    caret-color: #367bf0;
}

/* Kali lab task list: same grid shape as RHCSA but with blue active
   ring instead of ochre so the student feels they switched contexts. */
body.kali-lab-active .rhcsa-task--active {
    border-color: #367bf0;
    box-shadow: 0 0 0 1px rgba(54, 123, 240, 0.45);
}
body.kali-lab-active .rhcsa-task--active .rhcsa-task__num {
    background: #367bf0;
}
body.kali-lab-active .rhcsa-task--done .rhcsa-task__num {
    background: #4caf50;
}
.kali-task--done .kali-task__xp-badge,
.rhcsa-task .kali-task__xp-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background: #367bf0;
    color: #fff;
    padding: 2px 8px;
    border-radius: 6px /* capped from 10px per radius cap */;
    font-size: 11px;
    font-weight: 600;
    animation: rhcsa-xp-fly 1.4s ease-out forwards;
    pointer-events: none;
}
.kali-task,
.kali-task--active,
.kali-task--done,
.kali-task--pending {
    /* Aliased to .rhcsa-task* so render code can pick either family.
       The runner emits .kali-task* class names; we map them through
       .rhcsa-task* base styles. */
}
.kali-task { /* alias group, same shape as .rhcsa-task */
    position: relative;
    padding: 12px 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    margin-bottom: 8px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.kali-task--done {
    background: rgba(76, 175, 80, 0.05);
    border-color: rgba(76, 175, 80, 0.45);
}
.kali-task--active {
    background: rgba(54, 123, 240, 0.06);
    border-color: #367bf0;
    box-shadow: 0 0 0 1px rgba(54, 123, 240, 0.45);
}
.kali-task--pending {
    opacity: 0.55;
}
.kali-task__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ui-text-muted);
}
.kali-task__num {
    background: var(--ui-text-muted);
    color: #fff;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}
.kali-task--active .kali-task__num { background: #367bf0; }
.kali-task--done .kali-task__num { background: #4caf50; }
.kali-task__status { flex: 1; }
.kali-task__attempts {
    background: rgba(255, 87, 34, 0.15);
    color: #ff5722;
    padding: 2px 6px;
    border-radius: 6px /* capped from 10px per radius cap */;
    font-size: 10px;
}
.kali-task__goal {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ui-text);
}
.kali-task__goal code {
    background: rgba(54, 123, 240, 0.12);
    color: #367bf0;
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 12px;
}
.kali-task__hint {
    margin-top: 8px;
    padding: 8px 10px;
    background: rgba(255, 152, 0, 0.08);
    border-left: 3px solid #ff9800;
    border-radius: 0 4px 4px 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ui-text);
}
.kali-task__hint code {
    background: rgba(54, 123, 240, 0.15);
    color: #367bf0;
    padding: 1px 5px;
    border-radius: 3px;
}
.kali-task--just-passed {
    animation: rhcsa-task-pulse 0.6s ease-out;
}

/* Make sure the Kali terminal fills #terminalBody when mounted there. */
#terminalBody .kali-term {
    min-height: 0;
    height: 100%;
}
#terminalBody .kali-term__output {
    min-height: 240px;
}

/* ================================================================
   THEME - light mode override
   The dark theme is the default (no qualifier on :root so existing
   token references win). Light theme overrides the surface +
   text tokens; accent colours (terracotta, ochre, gold, deep-green)
   stay identical so brand identity is preserved across themes.
   Terminal palette stays dark (terminals look better dark - this
   is convention, not laziness).
   ================================================================ */
:root[data-theme="light"] {
    /* Light theme surface tiers (May 2026 round 3): previous round
       (#fdfbf6 panel) measured only 1.03:1 vs white page - the
       verifier flagged it as a hard surface-tier COLLAPSE. The
       additive 0.05 in the WCAG ratio formula requires Y_panel
       <= 0.825 for a 1.20:1 ratio against white, which forces
       panel into the deeper-cream range. Shifted the whole ladder
       one tier deeper so the four surfaces all separate visibly.
       Brand voice: warm African earth-cream still carries the
       light-mode aesthetic; the page stays pure white as the
       reading anchor. */
    --ui-bg-primary:    #ffffff;   /* white page background */
    --ui-bg-panel:      #ebe4d4;   /* warm cream panel - 1.26:1 vs page */
    --ui-bg-secondary:  #ddd0b1;   /* deeper cream input/divider - 1.21:1 vs panel */
    --ui-bg-elevated:   #c8b889;   /* burnt-cream elevated card - 1.27:1 vs secondary */
    --ui-border:        #b8a878;   /* warm border, reads on every tier */
    --ui-bg-card-elevated: #ffffff; /* pure white card on cream panel - preserves light-mode look */
    --ui-border-soft:   #d5c8b5;   /* subtle warm tan border on the white card */
    --ui-text-primary:  #1f1810;   /* warm near-black - keeps the brand voice */
    --ui-text-secondary:#5a4a3a;   /* warm dark gray */
    --ui-text-muted:    #4a3d2a;   /* clears 5.24:1 AA on bg-elevated #c8b889 (was #5a4d3a = 4.17:1) */
    --ui-placeholder:   #524430;   /* clears 4.78:1 AA on bg-elevated; 6.15:1 on bg-secondary */

    /* Light-mode brand color tiering (May 2026 calibration round 2).
       Round 1 collapsed amber+ochre to #806400 - lost the semantic
       distinction (amber = capstone vs ochre = standard accent went
       to identical hex) AND shifted ochre to muddy olive (lost brand
       feel). Round 2 keeps more warm saturation while still clearing
       AA on white, AND preserves the amber/ochre/gold ladder so
       components that use each for distinct meaning stay distinct in
       light mode (rgb-distance amber<->ochre = 46, plenty visible). */
    --color-ochre:            #9d6a00;  /* warm gold-brown 4.67:1 AA (vs muddy #806400) */
    --color-gold:             #8a6f00;  /* slightly lighter accent 4.82:1 AA */
    /* Amber preserves the "live / pulse / attention" semantic across
       themes. Round 1 set this to #824500 (burnt orange), but that
       reads as terracotta's sibling - the RHCSA NOC dashboard "live"
       indicator pulse went from warm bright (dark mode) to dark
       brownish "warning" (light mode), breaking the token's meaning.
       #b06a00 stays in the warm orange-gold family.

       AA-LARGE ONLY WHEN USED AS TEXT (>= 18px regular or 14px bold).
       As text on white this measures 4.28:1 - below the 4.5:1 normal-
       text floor. Primary intended use is SURFACE FILL (live indicator
       pulse, hop-button bg). For text on top of an amber surface use
       --ui-text-on-amber (#000 in light, 4.91:1 AA). For amber prose
       under 18px on the page bg, switch to a deeper variant - do not
       use this token. */
    --color-amber:            #b06a00;
    --color-amber-soft:       rgba(176, 106, 0, 0.10);
    --color-amber-border:     rgba(176, 106, 0, 0.40);
    --color-terracotta:       #a04830;  /* 6.06:1 AA */
    --color-terracotta-soft:  rgba(160, 72, 48, 0.08);
    --color-terracotta-border:rgba(160, 72, 48, 0.40);

    /* UI semantic tokens follow the brand colors. */
    --ui-accent:              #9d6a00;  /* matches ochre */
    --ui-accent-hover:        #6b5400;  /* darker on hover, 7.0:1 AAA */
    --ui-master:              #b06a00;  /* matches amber - warm/live semantic preserved */
    --ui-text-error:          #b91c1c;
    --ui-success:             #15803d;
    --ui-error:               #b91c1c;
    --ui-bg:                  var(--ui-bg-primary);
    --ui-surface:             var(--ui-bg-panel);
    --ui-text:                var(--ui-text-primary);

    /* Gate 78 token mirrors (Arc 16 phase colors, code highlight). */
    --code-terracotta:        #a04830;
    --color-arc16-recon:      #2c7fb0;
    --color-arc16-vuln:       #b06a00;  /* matches amber */
    --color-arc16-exploit:    #a04830;
    --color-arc16-post:       #6b3399;
    --color-arc16-report:     #1f5c40;
    --color-error:            #c33333;  /* light-mode error red; AA 4.6:1 on white */

    /* On-fill text tokens - per-theme split because light-mode brand
       fills sit at different luminance levels:
       - light ochre #9d6a00 (Y=0.176, deep): white text wins (4.64:1 AA)
       - light amber #b06a00 (Y=0.195, mid): dark text wins (4.91:1 AA)
       - light terracotta #a04830 (Y=0.123, deep): white text wins (6.07:1 AA)
       Earlier round set on-accent #120e08 (dark) which only cleared
       4.12:1 on light ochre - failed AA for normal text. Per-theme
       discipline: light fills that are DEEP get white text; light
       fills that are MID-bright get dark text. */
    --ui-text-on-accent:  #ffffff;   /* white on deep ochre/terracotta - 4.64:1 / 6.07:1 AA */
    --ui-text-on-amber:   #000000;   /* black on mid-bright amber - 4.91:1 AA */
    --ui-text-on-success: #ffffff;   /* light success #15803d - white reads 5.0:1 AA */
    --ui-text-on-error:   #ffffff;   /* light error #b91c1c - white reads 6.5:1 AA */

    /* Arc 20 status tokens - light-theme parity. Each aliases to
       a token whose light-theme override is already defined above
       in this block, so contrast holds in both modes. */
    --ui-status-running:     var(--ui-success);
    --ui-status-pending:     var(--color-amber);
    --ui-status-failed:      var(--ui-error);
    --ui-status-terminating: var(--ui-text-muted);
    --ui-status-succeeded:   var(--ui-success);
    --ui-status-unknown:     var(--ui-text-muted);
}

/* Body background swap: most components use var(--ui-bg-primary) but
   a few hardcode dark values from the original draft. Catch them. */
:root[data-theme="light"] body {
    background: var(--ui-bg-primary);
    color: var(--ui-text-primary);
}

/* The terracotta and ochre accent strips look perfect on dark, but
   on cream they need slightly more body. Keep the brand colours,
   just darken hover states by one notch. */
:root[data-theme="light"] .lang-btn.active {
    background: var(--color-terracotta);
    color: #fff;
}
:root[data-theme="light"] .lang-toggle {
    background: var(--ui-bg-secondary);
}

/* Narrative text inside lessonSections occasionally has inline
   styles like color:rgba(255,255,255,...) baked in. We can't catch
   every mission, but we can make sure the panel containers have a
   sensible background so cream stays cream. */
:root[data-theme="light"] .story-panel,
:root[data-theme="light"] .dashboard-page,
:root[data-theme="light"] .landing-page {
    background: var(--ui-bg-primary);
    color: var(--ui-text-primary);
}

/* The terminal panel and any code/pre blocks stay dark on purpose
   (terminals are dark, that's the convention students expect). */

/* Toggle button (dark/light icon). One round button, swaps glyph
   between sun and moon. Sits next to the FR/EN toggle. */
.theme-toggle-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--ui-border);
    background: var(--ui-bg-panel);
    color: var(--ui-text-primary);
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.1s;
    padding: 0;
}
.theme-toggle-btn:hover {
    border-color: var(--color-ochre);
    color: var(--color-ochre);
    transform: scale(1.06);
}
.theme-toggle-btn:active {
    transform: scale(0.98);
}
.theme-toggle-btn:focus-visible {
    outline: 2px solid var(--color-ochre);
    outline-offset: 2px;
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
    .theme-toggle-btn,
    .theme-toggle-btn:hover,
    .theme-toggle-btn:active {
        transition: none;
        transform: none;
    }
}

/* ================================================================
   THEME - light mode FULL coverage
   The block above defined the token swap. This block forces every
   hardcoded dark surface (topbar gradient, terminal panel, terminal
   body, terminal header, phase nav, story header, scan-line) onto
   theme-aware values so the whole UI flips, not just the left pane.

   CLI / terminal exception: a mission running an actual CLI (Cisco
   lab or RHEL bash) gets the .terminal-body--cli marker class; CSS
   keeps that case dark in both themes (terminals look better dark,
   it's the convention students expect on RHCSA / CCNA exams).
   ================================================================ */

:root[data-theme="light"] .topbar {
    background: linear-gradient(135deg, #f5ecd8 0%, #e8d8b8 100%);
    border-bottom: 2px solid var(--color-terracotta);
}
:root[data-theme="light"] .topbar,
:root[data-theme="light"] .topbar * {
    color: var(--ui-text-primary);
}
:root[data-theme="light"] .topbar .topbar-title,
:root[data-theme="light"] .topbar .mission-title {
    color: var(--color-earth-dark);
}

/* Light mode + LESSON-MODE terminal (no --cli marker, used for
   Arc 0-7 conceptual lessons): swap to cream + dark prose. */
:root[data-theme="light"] .terminal-panel:not(:has(.terminal-body--cli)) {
    background: var(--ui-bg-primary);
}
:root[data-theme="light"] .terminal-body:not(.terminal-body--cli) {
    background: var(--ui-bg-primary);
    color: var(--ui-text-primary);
    text-shadow: none;
}
:root[data-theme="light"] .terminal-body:not(.terminal-body--cli)::before {
    content: none;
}
:root[data-theme="light"] .terminal-panel:not(:has(.terminal-body--cli)) .terminal-header {
    background: var(--ui-bg-secondary);
    border-bottom: 1px solid var(--ui-border);
    color: var(--ui-text-primary);
}
:root[data-theme="light"] .terminal-panel:not(:has(.terminal-body--cli)) .terminal-title,
:root[data-theme="light"] .terminal-panel:not(:has(.terminal-body--cli)) .terminal-device-info {
    color: var(--ui-text-primary);
}

/* CLI-mode terminal stays DARK in both themes. The .terminal-body
   --cli marker is set by engine.js when the mission is type 'lab',
   'multilab', or 'rhcsa_lab'. The base .terminal-* rules already
   define dark; we just ensure the light-theme cascade above doesn't
   accidentally win via specificity. */
:root[data-theme="light"] .terminal-body.terminal-body--cli {
    background: var(--term-bg);
    color: var(--term-fg);
    text-shadow: 0 0 1px rgba(204,204,204,0.25);
}

/* Phase nav strip and tabs: in light mode, the strip is a light tint
   and tab borders use the warm border token. Active / completed
   states keep their accent color. */
:root[data-theme="light"] .phase-nav {
    background: var(--ui-bg-secondary);
    border-bottom: 1px solid var(--ui-border);
}
:root[data-theme="light"] .phase-tab {
    color: var(--ui-text-muted);
    border-color: var(--ui-border);
}
:root[data-theme="light"] .phase-tab.active {
    background: rgba(212, 160, 60, 0.18);
    color: var(--color-earth-dark);
}
:root[data-theme="light"] .phase-tab.completed {
    background: rgba(76, 175, 80, 0.18);
    color: var(--color-deep-green);
}

/* Story header (above the narrative title): semi-transparent dark
   tint flips to a light tint. */
:root[data-theme="light"] .story-header {
    background: rgba(199, 91, 57, 0.06);
}

/* Bottombar: device indicator + mode + keyboard hints. */
:root[data-theme="light"] .bottombar {
    background: var(--ui-bg-secondary);
    border-top: 1px solid var(--ui-border);
    color: var(--ui-text-primary);
}
:root[data-theme="light"] .device-indicator,
:root[data-theme="light"] .mode-indicator,
:root[data-theme="light"] .keyboard-hint {
    color: var(--ui-text-secondary);
}
:root[data-theme="light"] .keyboard-hint kbd {
    background: var(--ui-bg-panel);
    border: 1px solid var(--ui-border);
    color: var(--ui-text-primary);
}

/* Concept box and any panel-style content area inside the right pane. */
:root[data-theme="light"] .concept-box {
    background: var(--ui-bg-panel);
    border-color: var(--ui-border);
    color: var(--ui-text-primary);
}

/* TERMINAL ISOLATION (rolled back the "paper terminal" experiment).
   The terminal is its own design system: always dark, never adapts
   to the app theme. The app dark/light toggle changes only --ui-*
   tokens. The --term-* tokens stay dark always.
   Reasoning:
   - Real terminals are dark by convention. Students expect that on
     CCNA / RHCSA exams.
   - Adapting the terminal to light mode introduced a class of
     bugs ("colour acts funny when I switch mode") because the
     same hue had to render against two backgrounds and the
     transitions left artifacts.
   - One source of truth = no cross-theme contrast bugs.
   The text hierarchy on dark uses three levels of the SAME hue at
   different opacity (--term-fg-bright / --term-fg / --term-fg-dim)
   so semantics (red error, green success) stay consistent. */

/* (.notes-btn was the legacy mission-footer button - replaced by
   the global .notes-fab. The FAB uses tokens that resolve cleanly
   in both themes; no per-theme override needed.) */
:root[data-theme="light"] .objectives-section {
    color: var(--ui-text-primary);
}

/* Story panel narrative text: ensure body paragraphs use the
   primary text token (the v1 narrative had inline color overrides
   in some places). */
:root[data-theme="light"] .story-narrative,
:root[data-theme="light"] .story-narrative p {
    color: var(--ui-text-primary);
}

/* ================================================================
   THEME - light mode FONT/SVG/CODE-BLOCK rescue
   The Arc 0-7 lesson content was authored against a dark page, with
   inline styles like:
     <pre style="background:rgba(0,0,0,0.3);color:#f5cc5c">
     <svg fill="var(--term-fg)">
   On cream paper the dark gold text on a translucent gray bg drops
   contrast to the floor. Same for SVG diagrams whose strokes assume
   a dark background.
   Fix: force these blocks to keep a solid dark mini-card in light
   mode. The lesson stays legible without rewriting every <pre>.
   ================================================================ */

/* Pre / code / svg rescue rules: only apply to lesson PROSE rendered
   inside .terminal-body (Arc 0-7 conceptual lessons). When the
   terminal body is in CLI mode (Arc 8 Cisco labs, Arc 11 RHCSA
   bash), it now has the warm-paper light palette via --term-* token
   overrides and should NOT get the dark mini-card treatment, the
   actual terminal output is the source of truth there. */
:root[data-theme="light"] .terminal-body:not(.terminal-body--cli) pre,
:root[data-theme="light"] .story-narrative pre,
:root[data-theme="light"] .lesson-content pre,
:root[data-theme="light"] .concept-box pre {
    background: #1a1a1a !important;
    color: #f5cc5c !important;
    border-radius: 6px;
}

:root[data-theme="light"] .terminal-body:not(.terminal-body--cli) code:not(pre code),
:root[data-theme="light"] .story-narrative code:not(pre code),
:root[data-theme="light"] .lesson-content code:not(pre code),
:root[data-theme="light"] .concept-box code:not(pre code) {
    background: rgba(26, 26, 26, 0.92) !important;
    color: #f5cc5c !important;
    padding: 1px 6px;
    border-radius: 3px;
    font-family: var(--font-terminal);
    font-size: 12px;
}

:root[data-theme="light"] .terminal-body:not(.terminal-body--cli) svg,
:root[data-theme="light"] .story-narrative svg,
:root[data-theme="light"] .lesson-content svg,
:root[data-theme="light"] .concept-box svg {
    background: #1a1a1a;
    padding: 8px;
    border-radius: 6px;
    margin: 8px 0;
}

/* In CLI light mode, the rhcsa-task cards inside the cream terminal
   panel still need a dark inline pill for <code> so the gold task
   keywords (e.g. /etc, cd, mkdir) pop. The rule above excluded them
   via :not(.terminal-body--cli). Re-apply just for rhcsa-task code
   so those keywords stay legible. */
:root[data-theme="light"] .rhcsa-task code {
    background: rgba(26, 26, 26, 0.92);
    color: #f5cc5c;
    padding: 1px 6px;
    border-radius: 3px;
    font-family: var(--font-terminal);
    font-size: 12px;
}

/* h4 headers inside lessonSections often use color:#d4a03c (ochre)
   or gold inline. On cream paper that's low-contrast. Bump to a
   warm amber that reads on both backgrounds. */
:root[data-theme="light"] .terminal-body h4,
:root[data-theme="light"] .story-narrative h4,
:root[data-theme="light"] .lesson-content h4 {
    color: #b87325 !important;
}

/* Common inline-styled callout boxes (Ako quotes, exam-watch, etc.)
   in lessonSections use rgba(45,90,39,0.1) deep-green or
   rgba(199,91,57,0.1) terracotta tints. Those tints work on cream
   too; just make sure their text stays legible. */
:root[data-theme="light"] .terminal-body div[style*="border-left"],
:root[data-theme="light"] .story-narrative div[style*="border-left"],
:root[data-theme="light"] .lesson-content div[style*="border-left"] {
    color: var(--ui-text-primary);
}

/* ================================================================
   RHCSA task celebration: per-task XP badge, just-passed pulse,
   phase-complete confetti burst + toast.
   Respects @media (prefers-reduced-motion: reduce).
   ================================================================ */

/* Card pulse on transition to done. The keyframes scale the card
   up briefly + flash the green stripe brighter. */
@keyframes rhcsaTaskPass {
    0%   { transform: scale(1); box-shadow: inset 4px 0 0 var(--color-deep-green), 0 0 0 0 rgba(45, 90, 39, 0); }
    25%  { transform: scale(1.02); box-shadow: inset 4px 0 0 var(--color-deep-green), 0 0 0 8px rgba(45, 90, 39, 0.25); }
    100% { transform: scale(1); box-shadow: inset 4px 0 0 var(--color-deep-green), 0 0 0 0 rgba(45, 90, 39, 0); }
}
.rhcsa-task--just-passed {
    animation: rhcsaTaskPass 600ms ease-out;
}

/* Floating "+10 XP" badge that fades + drifts up from the card. */
@keyframes rhcsaXpFloat {
    0%   { opacity: 0; transform: translate(-50%, 0) scale(0.85); }
    20%  { opacity: 1; transform: translate(-50%, -8px) scale(1); }
    80%  { opacity: 1; transform: translate(-50%, -32px) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -48px) scale(0.95); }
}
.rhcsa-task__xp-badge {
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translate(-50%, 0);
    background: linear-gradient(135deg, #d4a03c, #c75b39);
    color: #fff;
    font-weight: 800;
    font-size: 13px;
    padding: 4px 12px;
    border-radius: 6px /* capped from 14px per radius cap */;
    box-shadow: 0 4px 12px rgba(199, 91, 57, 0.45);
    pointer-events: none;
    z-index: 10;
    animation: rhcsaXpFloat 1300ms ease-out forwards;
}
.rhcsa-task { position: relative; }

/* Phase-complete confetti burst (full-screen overlay, falling pieces). */
@keyframes rhcsaConfettiFall {
    0%   { transform: translateY(-20vh) rotate(0deg); opacity: 1; }
    100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}
.rhcsa-confetti-burst {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}
.rhcsa-confetti-burst span {
    position: absolute;
    top: -20vh;
    border-radius: 2px;
    animation: rhcsaConfettiFall ease-out forwards;
}

/* Phase-complete toast at the top center. */
@keyframes rhcsaToastIn {
    0%   { opacity: 0; transform: translate(-50%, -16px); }
    100% { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes rhcsaToastOut {
    0%   { opacity: 1; transform: translate(-50%, 0); }
    100% { opacity: 0; transform: translate(-50%, -16px); }
}
.rhcsa-toast {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translate(-50%, 0);
    background: linear-gradient(135deg, var(--color-deep-green), #4caf50);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    padding: 12px 24px;
    border-radius: 28px;
    box-shadow: 0 8px 24px rgba(45, 90, 39, 0.45);
    z-index: 10000;
    animation: rhcsaToastIn 280ms ease-out forwards;
}
.rhcsa-toast--out {
    animation: rhcsaToastOut 360ms ease-in forwards;
}

/* Reduced motion: disable all animations, keep instant state change. */
@media (prefers-reduced-motion: reduce) {
    .rhcsa-task--just-passed,
    .rhcsa-task__xp-badge,
    .rhcsa-confetti-burst span,
    .rhcsa-toast,
    .rhcsa-toast--out {
        animation: none !important;
    }
    .rhcsa-task__xp-badge { opacity: 0; }
    .rhcsa-confetti-burst { display: none; }
}

/* ================================================================
   LIGHT-MODE INLINE COLOR RESCUE (lesson content callouts)
   The Arc 11 lesson sections bake inline color values like
   color:#a8c4f0 (On-the-job blue), color:#f5cc5c (Self-test Q gold),
   color:#c8b37a (Self-test header savanna) directly into the markup.
   They were authored for dark backgrounds and become unreadable on
   cream paper. Override per-color in light mode via attribute
   selectors so the lesson reads on both themes.
   ================================================================ */
:root[data-theme="light"] [style*="color:#7fb069"] { color: #1f6228 !important; }
:root[data-theme="light"] [style*="color:#a8c4f0"] { color: #1d4d8a !important; }
:root[data-theme="light"] [style*="color:#c8b37a"] { color: #5a4a3a !important; }
:root[data-theme="light"] [style*="color:#c8c0b0"] { color: #3b2e1f !important; }
:root[data-theme="light"] [style*="color:#d4a03c"] { color: #8a5a1a !important; }
:root[data-theme="light"] [style*="color:#e07b3c"] { color: #a82e1a !important; }
:root[data-theme="light"] [style*="color:#e8c547"] { color: #8a6d00 !important; }
:root[data-theme="light"] [style*="color:#f5cc5c"] { color: #5a4220 !important; }
:root[data-theme="light"] [style*="color:#ff8a80"] { color: #a82e1a !important; }
:root[data-theme="light"] [style*="color:#7fb069"] { color: #1f6228 !important; }

/* And the equivalents with a space after the colon. */
:root[data-theme="light"] [style*="color: #a8c4f0"] { color: #1d4d8a !important; }
:root[data-theme="light"] [style*="color: #f5cc5c"] { color: #5a4220 !important; }
:root[data-theme="light"] [style*="color: #c8b37a"] { color: #5a4a3a !important; }
:root[data-theme="light"] [style*="color: #d4a03c"] { color: #8a5a1a !important; }
:root[data-theme="light"] [style*="color: #e07b3c"] { color: #a82e1a !important; }
:root[data-theme="light"] [style*="color: #e8c547"] { color: #8a6d00 !important; }

/* The terminal-force-dark toggle (and the .terminal-dark-toggle
   button on the terminal header) is removed: terminal is always
   dark by design now, the toggle had no purpose anymore. The
   .terminal-dark-toggle CSS class is kept as a no-op so any
   markup left over doesn't break - it just hides. */
.terminal-dark-toggle { display: none; }

/* ================================================================
   RHCSA STRETCH TASKS - optional SME-level extras shown during the
   Verify phase. They never block phase advance. The student can
   ignore them; doing them earns SME points (50 XP each + special
   "+SME" badge animation).
   ================================================================ */
.rhcsa-stretch {
    margin-top: 22px;
    padding: 18px 20px;
    border-top: 2px dashed var(--color-terracotta);
    background: rgba(199, 91, 57, 0.05);
    border-radius: 6px /* capped from 8px per radius cap */;
}
.rhcsa-stretch__header h4 {
    margin: 0 0 6px;
    font: 600 16px var(--font-narrative);
    color: var(--color-terracotta);
    letter-spacing: 0.3px;
}
.rhcsa-stretch__header p {
    margin: 0 0 14px;
    font-size: 13px;
    color: var(--ui-text-secondary);
    line-height: 1.5;
}
.rhcsa-stretch__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.rhcsa-stretch-task {
    position: relative;
    background: var(--ui-bg-panel);
    border: 1px solid var(--color-terracotta);
    border-radius: 6px;
    padding: 12px 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.rhcsa-stretch-task.rhcsa-task--done {
    background: var(--ui-bg-panel);
    box-shadow: inset 4px 0 0 var(--color-terracotta);
    padding-left: 18px;
}
.rhcsa-stretch-task .rhcsa-task__num--sme {
    background: linear-gradient(135deg, var(--color-terracotta), var(--color-sunset-orange));
    color: white;
    font-weight: 800;
    font-size: 10px;
    letter-spacing: 1px;
    width: auto;
    height: 22px;
    padding: 0 8px;
    border-radius: 11px;
}

/* "+50 SME" badge variant (terracotta gradient instead of standard
   amber). */
.rhcsa-task__xp-badge--sme {
    background: linear-gradient(135deg, #c75b39, #a82e1a);
    box-shadow: 0 4px 12px rgba(168, 46, 26, 0.45);
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}

@media (prefers-reduced-motion: reduce) {
    .rhcsa-stretch-task,
    .rhcsa-stretch-task.rhcsa-task--done {
        transition: none;
    }
}

/* ================================================================
   TELEMETRY PANEL - "Tes signaux d'apprentissage"
   ================================================================
   Theme-aware. Replaces the previous always-dark inline-styled
   panel that sat as a dark island on cream pages and had labels
   in #7a6a5a (muted brown) that were near-invisible against
   either bg.

   Structure: header row (title + version) → subtitle → row of
   stat cards → optional highlights.
   ================================================================ */
.telemetry-panel {
    background: var(--ui-bg-panel);
    border: 1px solid var(--ui-border);
    border-left: 4px solid var(--color-terracotta);
    border-radius: 6px /* capped from 10px per radius cap */;
    padding: 18px 20px;
    margin: 20px 0 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.telemetry-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.telemetry-panel__title {
    font-family: var(--font-narrative), Georgia, serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-terracotta);
    letter-spacing: 0.2px;
}
.telemetry-panel__version {
    font-size: 10px;
    color: var(--ui-text-muted);
    font-family: ui-monospace, Consolas, monospace;
}
.telemetry-panel__sub {
    font-size: 13px;
    color: var(--ui-text-secondary);
    line-height: 1.4;
    margin-bottom: 14px;
}
.telemetry-panel__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}
/* Each card: solid panel bg + 3px coloured top stripe in the
   stat's tone. Borders are subtle so the tone stripe carries the
   visual weight - a row of 5 distinct strips reads instantly. */
.telemetry-card {
    background: var(--ui-bg-secondary);
    border: 1px solid var(--ui-border);
    border-top: 3px solid var(--card-tone, var(--color-terracotta));
    border-radius: 6px;
    padding: 10px 12px 12px;
    transition: transform 0.15s ease;
}
.telemetry-card:hover {
    transform: translateY(-1px);
}
.telemetry-card__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ui-text-secondary);
    font-weight: 600;
    margin-bottom: 6px;
}
.telemetry-card__value {
    font-size: 26px;
    font-weight: 700;
    font-family: ui-monospace, Consolas, monospace;
    line-height: 1.1;
}
.telemetry-highlight {
    font-size: 13px;
    color: var(--ui-text-primary);
    margin-top: 8px;
    line-height: 1.5;
}
.telemetry-highlight__label,
.telemetry-highlight__meta {
    color: var(--ui-text-secondary);
    font-weight: 500;
}
.telemetry-highlight strong {
    color: var(--color-terracotta);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .telemetry-card { transition: none; }
    .telemetry-card:hover { transform: none; }
}

/* ============================================================
   Gate 32: Inline retrieval check (active recall)
   ============================================================
   Rendered after each lessonSection's content + checkpoint.
   Student answers 2-3 questions, clicks "Vérifier", sees correct
   answers + explanations, then clicks "Continuer" to advance.
   Theme-aware: uses --ui-* tokens.
   ============================================================ */
.inline-check {
    margin-top: 18px;
    padding: 16px 18px;
    background: rgba(45, 90, 39, 0.05);
    border: 1px solid rgba(45, 90, 39, 0.25);
    border-left: 4px solid var(--color-deep-green);
    border-radius: 6px;
}
.inline-check__head {
    margin-bottom: 14px;
}
.inline-check__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--color-deep-green);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
}
.inline-check__help {
    font-size: 12px;
    color: var(--ui-text-secondary);
    font-style: italic;
}
.inline-check__q {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px dashed var(--ui-border);
}
.inline-check__q:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
.inline-check__prompt {
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-text-primary);
    margin-bottom: 10px;
    line-height: 1.5;
}
.inline-check__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: var(--color-deep-green);
    color: white;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    margin-right: 8px;
    vertical-align: middle;
}
.inline-check__choices {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-left: 30px;
}
.inline-check__choice-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    background: var(--ui-bg-panel);
    border: 1px solid var(--ui-border);
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ui-text-primary);
    transition: border-color 0.15s, background 0.15s;
}
.inline-check__choice-label:hover {
    border-color: var(--color-ochre);
}
.inline-check__choice-label input[type="radio"] {
    margin-top: 2px;
    accent-color: var(--color-deep-green);
}
.inline-check__choice-label--selected {
    border-color: var(--color-ochre);
    background: rgba(212, 160, 60, 0.08);
}
.inline-check__choice-label--correct {
    border-color: var(--color-deep-green);
    border-left: 3px solid var(--color-deep-green);
    background: rgba(45, 90, 39, 0.1);
    font-weight: 600;
}
.inline-check__choice-label--correct::after {
    content: "✓";
    margin-left: auto;
    color: var(--color-deep-green);
    font-weight: 700;
    font-size: 16px;
}
.inline-check__choice-label--wrong {
    border-color: #c75b39;
    border-left: 3px solid #c75b39;
    background: rgba(199, 91, 57, 0.08);
}
.inline-check__choice-label--wrong::after {
    content: "✗";
    margin-left: auto;
    color: #c75b39;
    font-weight: 700;
    font-size: 16px;
}
.inline-check__choice-label input[type="radio"][disabled] {
    cursor: default;
}
.inline-check__choice-label:has(input[disabled]) {
    cursor: default;
}
.inline-check__explain {
    margin: 8px 0 0 30px;
    padding: 10px 12px;
    background: rgba(212, 160, 60, 0.1);
    border-left: 3px solid var(--color-ochre);
    border-radius: 0 4px 4px 0;
    font-size: 13px;
    color: var(--ui-text-secondary);
    line-height: 1.5;
}
.inline-check__hint {
    margin-top: 8px;
    font-size: 12px;
    color: var(--ui-text-muted);
    font-style: italic;
}
.inline-check__summary {
    margin-top: 14px;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}
.inline-check__summary--success {
    background: rgba(45, 90, 39, 0.1);
    border: 1px solid var(--color-deep-green);
    color: var(--color-deep-green);
}
.inline-check__summary--partial {
    background: rgba(212, 160, 60, 0.1);
    border: 1px solid var(--color-ochre);
    color: var(--color-ochre);
}
.inline-check__summary--low {
    background: rgba(199, 91, 57, 0.1);
    border: 1px solid var(--color-terracotta);
    color: var(--color-terracotta);
}

@media (prefers-reduced-motion: reduce) {
    .inline-check__choice-label { transition: none; }
}

/* ================================================================
   ARC 20 - K8sStatePanel (Option D enterprise-feel primitive)
   ================================================================
   The third pane of the K8sLabRunner layout. Shows container /
   pod / image / volume / network / deployment tiles with live
   status colors. Theme-parity per Gate 78 - all colors via
   --ui-* tokens defined in both :root and :root[data-theme="light"].
   ================================================================ */

.state-panel {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-family: var(--font-ui);
    color: var(--ui-text-primary);
}

.state-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--color-earth-dark);
    border-bottom: 1px solid var(--ui-border);
    font: 600 10px var(--font-ui);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--term-fg-dim);
    flex: 0 0 auto;
}

.state-panel__title {
    color: var(--color-terracotta);
}

.state-panel__host {
    color: var(--term-fg-dim);
    font-family: var(--font-terminal);
    text-transform: none;
    letter-spacing: 0.5px;
}

.state-panel__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid var(--ui-border);
    flex: 0 0 auto;
}

.state-panel__tab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: transparent;
    border: 1px solid var(--ui-border);
    border-radius: 12px;
    color: var(--ui-text-muted);
    font: 500 11px var(--font-ui);
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.state-panel__tab:hover {
    color: var(--ui-text-primary);
    border-color: var(--color-terracotta);
}

.state-panel__tab.is-active {
    background: var(--color-terracotta);
    border-color: var(--color-terracotta);
    color: #fff;
}

.state-panel__tab-count {
    display: inline-block;
    min-width: 16px;
    padding: 0 4px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 8px;
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    line-height: 14px;
}

.state-panel__tab.is-active .state-panel__tab-count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.state-panel__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.state-panel__empty {
    padding: 24px 16px;
    text-align: center;
    color: var(--ui-text-muted);
    font: 13px var(--font-ui);
    font-style: italic;
    line-height: 1.5;
}

/* ---------- Tiles ---------- */

.tile {
    padding: 10px 12px;
    background: var(--ui-bg-elevated);
    border: 1px solid var(--ui-border);
    border-left: 3px solid var(--ui-border);
    border-radius: 4px;
    font: 12px var(--font-ui);
    line-height: 1.45;
    animation: tileFadeIn 0.35s ease-out;
}

.tile.is-running {
    border-left-color: var(--ui-status-running);
}

.tile.is-pending {
    border-left-color: var(--ui-status-pending);
}

.tile.is-failed {
    border-left-color: var(--ui-status-failed);
    animation: tileFadeIn 0.35s ease-out, tilePulseFail 1.6s ease-in-out infinite;
}

.tile__head {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    font: 600 13px var(--font-ui);
}

.tile__name {
    flex: 1 1 auto;
    color: var(--ui-text-primary);
    word-break: break-all;
}

.tile__status {
    flex: 0 0 auto;
    padding: 2px 6px;
    background: rgba(0, 0, 0, 0.20);
    border-radius: 10px;
    font: 500 10px var(--font-ui);
    color: var(--ui-text-muted);
    text-transform: none;
    letter-spacing: 0.3px;
}

.tile.is-running .tile__status {
    background: var(--ui-status-running);
    color: #fff;
}

.tile.is-failed .tile__status {
    background: var(--ui-status-failed);
    color: #fff;
}

.tile.is-pending .tile__status {
    background: var(--ui-status-pending);
    color: var(--color-earth-dark);
}

.tile__meta {
    font: 11px var(--font-terminal);
    color: var(--ui-text-muted);
    word-break: break-all;
    margin-top: 2px;
}

.tile__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.badge {
    display: inline-block;
    padding: 1px 6px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--ui-border);
    border-radius: 8px;
    font: 600 9.5px var(--font-terminal);
    color: var(--ui-text-muted);
    letter-spacing: 0.3px;
}

.badge--hard {
    background: rgba(45, 90, 39, 0.15);
    border-color: var(--ui-status-running);
    color: var(--ui-status-running);
}

/* Status dot (small colored circle prefix on tile heads) */
.status-dot {
    flex: 0 0 auto;
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ui-text-muted);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.10);
}

.status-dot.is-running { background: var(--ui-status-running); }
.status-dot.is-pending { background: var(--ui-status-pending); }
.status-dot.is-failed  {
    background: var(--ui-status-failed);
    animation: dotBlinkFail 1.4s ease-in-out infinite;
}

@keyframes tileFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes tilePulseFail {
    0%, 100% { box-shadow: 0 0 0 0 rgba(204, 96, 64, 0.0); }
    50%      { box-shadow: 0 0 0 2px rgba(204, 96, 64, 0.30); }
}

@keyframes dotBlinkFail {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
    .tile,
    .tile.is-failed,
    .status-dot.is-failed { animation: none; }
}

/* Responsive: collapse 3-col layout to a vertical stack under
   1500px viewport. The K8sLabRunner mounts INSIDE the outer
   mission's right panel (~70% of viewport on standard laptops),
   so on a 1366 laptop the right panel is ~956px - too narrow
   for our 3-col grid even at minimum widths. Stacked single-col
   gives the terminal FULL width which is critical for unclipped
   docker / kubectl output. Only truly wide monitors (>1500px)
   get the side-by-side 3-col layout. Reference incident: May
   2026 user browser-walk - terminal text was left-clipped on a
   1366 viewport because the column squeezed below comfortable
   width. Resizing wider cleared it. */
@media (max-width: 1500px) {
    .k8s-lab-grid {
        grid-template-columns: 1fr !important;
    }
    /* In stacked mode, cap the state panel height so it does
       not push the terminal off-screen on small viewports. */
    .k8s-lab-grid #k8s-state-panel {
        max-height: 340px;
    }
}

/* ================================================================
   Gate 4 ext: YAML field hover-doc (kubectl explain in-page).
   Wraps recognized K8s field names in <pre> blocks with a
   tooltip-on-hover. The tooltip uses CSS ::after + ::before for
   the arrow and bubble, content sourced from data-doc-fr/en.
   ================================================================ */
.k8s-explain {
    position: relative;
    display: inline-block;
    cursor: help;
    color: var(--color-ochre);
    border-bottom: 1px dotted var(--color-ochre);
    text-decoration: none;
    transition: background 120ms ease;
}
.k8s-explain:hover,
.k8s-explain:focus {
    background: rgba(212, 160, 60, 0.16);
    outline: none;
}
.k8s-explain::after {
    content: attr(data-doc-fr);
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    min-width: 320px;
    max-width: 420px;
    padding: 10px 12px;
    background: var(--ui-bg-secondary, #1f1815);
    color: var(--ui-text-primary);
    font: 400 12px/1.5 var(--font-ui);
    border: 1px solid var(--color-ochre);
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.40);
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease;
    z-index: 999;
    white-space: normal;
    text-align: left;
}
.k8s-explain[data-lang="en"]::after {
    content: attr(data-doc-en);
}
.k8s-explain:hover::after,
.k8s-explain:focus::after {
    opacity: 1;
}
/* Don't render the tooltip for fields the docs map doesn't cover
   (the span won't have data-doc-fr attribute). */
.k8s-explain:not([data-doc-fr])::after {
    display: none;
}

/* ================================================================
   Gate 4 ext: kubectl get output column legend toggle.
   Renders a "? columns" button below `kubectl get X` output that
   expands a bilingual table of column meanings.
   ================================================================ */
.k8s-col-legend {
    margin: 6px 0 12px;
    font: 400 11px/1.5 var(--font-ui);
}
.k8s-col-legend-trigger {
    display: inline-block;
    background: transparent;
    color: var(--color-ochre);
    border: 1px solid rgba(212, 160, 60, 0.45);
    border-radius: 3px;
    padding: 2px 8px;
    font: 500 11px var(--font-ui);
    cursor: pointer;
    transition: background 120ms ease, color 120ms ease;
}
.k8s-col-legend-trigger:hover,
.k8s-col-legend-trigger:focus {
    background: rgba(212, 160, 60, 0.18);
    color: var(--ui-text-primary);
    outline: none;
}
.k8s-col-legend-trigger[aria-expanded="true"] {
    background: rgba(212, 160, 60, 0.22);
    color: var(--ui-text-primary);
}
.k8s-col-legend-panel {
    margin-top: 6px;
    padding: 10px 12px;
    background: var(--ui-bg-secondary, #1f1815);
    border: 1px solid rgba(212, 160, 60, 0.30);
    border-left: 3px solid var(--color-ochre);
    border-radius: 4px;
    font: 400 12px/1.55 var(--font-ui);
    color: var(--ui-text-primary);
}
.k8s-col-legend-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px;
    padding: 3px 0;
    border-bottom: 1px solid rgba(212, 160, 60, 0.08);
}
.k8s-col-legend-row:last-child { border-bottom: none; }
.k8s-col-legend-name {
    color: var(--color-ochre);
    font-weight: 600;
    font-family: var(--font-terminal);
}
.k8s-col-legend-doc {
    color: var(--ui-text-primary);
}

/* ================================================================
   MSHELL — STEPPED MISSION SHELL (Arc 19+)
   ================================================================
   Three-phase mission chrome (Cours / Lab / Quiz) with persistent
   left sidebar (objectives + XP bar + hint), 48px topbar, and a
   phase-switching main column. Replaces the legacy L2 single-column
   prose layout. Token strategy: all colors map to existing
   AKONetwork tokens (--ui-*, --color-terracotta, --color-ochre,
   --term-bg, --term-fg, --ui-success, --ui-text-error). Theme
   parity is automatic via the existing dark/light :root blocks.
   Radii capped at --radius-lg (6px) per project hard cap.
   ================================================================ */

.mshell-root {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: 100%;
    height: 100%;
    min-height: 600px;
    background: var(--ui-bg-primary);
    color: var(--ui-text-primary);
    font-family: var(--font-ui, system-ui, sans-serif);
}

@media (max-width: 880px) {
    .mshell-root {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
}

/* ---- Sidebar -------------------------------------------------- */

.mshell-sidebar {
    background: var(--ui-bg-panel);
    border-right: 1px solid var(--ui-border);
    padding: 16px 14px 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.mshell-sidebar-inner {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Inline SVGs default to currentColor + 14px square so they don't
   stretch to fill their flex/grid containers (a 0-dimension inline
   SVG defaults to 300x150 in Chromium when a flex parent stretches
   it - we lock the icons at 14px). Component-specific sizes override
   below (e.g. .mshell-tab svg, .mshell-obj-check svg). */
.mshell-root svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.mshell-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mshell-section-title {
    font-family: var(--font-terminal);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--ui-text-muted);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mshell-obj {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 7px 8px;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--ui-text-secondary);
    border-radius: var(--radius-md);
    transition: background 0.12s ease-out, color 0.12s ease-out;
}

.mshell-obj.is-active {
    background: var(--color-terracotta-soft);
    color: var(--ui-text-primary);
    border-left: 2px solid var(--color-terracotta);
    padding-left: 6px;
}

.mshell-obj.is-done {
    color: var(--ui-text-muted);
    text-decoration: line-through;
    text-decoration-color: var(--ui-text-muted);
    text-decoration-thickness: 1px;
}

.mshell-obj-check {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--ui-border);
    border-radius: 50%;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease-out, border-color 0.15s ease-out;
}

.mshell-obj.is-done .mshell-obj-check {
    background: var(--ui-success);
    border-color: var(--ui-success);
}

.mshell-obj.is-done .mshell-obj-check svg {
    display: block;
    width: 9px;
    height: 9px;
    color: var(--ui-text-on-success, #0a1f0e);
}

.mshell-obj-check svg {
    display: none;
}

.mshell-xpbar {
    height: 6px;
    background: var(--ui-bg-secondary);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 2px;
}

.mshell-xpfill {
    height: 100%;
    background: var(--color-terracotta);
    transition: width 0.4s ease;
}

.mshell-xp-label {
    font-family: var(--font-terminal);
    font-size: 10.5px;
    color: var(--ui-text-muted);
    font-variant-numeric: tabular-nums;
    margin-top: 4px;
}

.mshell-hint {
    background: var(--color-terracotta-soft);
    border-left: 3px solid var(--color-terracotta);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: 10px 12px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ui-text-primary);
}

.mshell-hint-title {
    font-family: var(--font-terminal);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-terracotta);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ---- Main column + topbar ----------------------------------- */

.mshell-main {
    display: grid;
    grid-template-rows: 48px 1fr;
    min-width: 0;
    background: var(--ui-bg-primary);
}

.mshell-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 18px;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-bg-panel);
    min-width: 0;
}

.mshell-cert {
    font-family: var(--font-terminal);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--color-ochre);
    white-space: nowrap;
    padding: 3px 8px;
    border: 1px solid var(--color-ochre);
    border-radius: var(--radius-sm);
}

.mshell-title {
    font-family: var(--font-narrative, var(--font-ui));
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.mshell-xp {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: var(--color-terracotta-soft);
    border: 1px solid var(--color-terracotta-border);
    border-radius: var(--radius-md);
    font-family: var(--font-terminal);
    font-size: 11px;
    color: var(--color-terracotta);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mshell-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--ui-bg-secondary);
    border-radius: var(--radius-md);
    padding: 3px;
}

.mshell-tab {
    background: transparent;
    color: var(--ui-text-muted);
    border: 0;
    padding: 5px 12px;
    font-family: var(--font-terminal);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: background 0.12s ease-out, color 0.12s ease-out;
}

.mshell-tab:hover:not(:disabled) {
    color: var(--ui-text-primary);
}

.mshell-tab.is-active {
    background: var(--color-terracotta);
    color: var(--ui-text-on-accent);
}

.mshell-tab.is-done {
    color: var(--ui-success);
}

.mshell-tab:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.mshell-tab:focus-visible {
    outline: 2px solid var(--color-ochre);
    outline-offset: 2px;
}

.mshell-tab svg {
    width: 12px;
    height: 12px;
}

/* ---- Phase columns ------------------------------------------ */

.mshell-content {
    overflow-y: auto;
    padding: 24px 32px 48px;
}

@media (max-width: 720px) {
    .mshell-content {
        padding: 18px 16px 32px;
    }
}

.mshell-phase {
    display: none;
    /* No max-width / centering by default - cards stretch to fill
       the content pane. The legacy 900px cap made cards render at
       ~60% of the available width with dead whitespace on either
       side; killing it lets every phase use the full canvas. */
    margin: 0;
}

.mshell-phase.is-active {
    display: block;
}

/* ---- LEARN (concept cards) ---------------------------------- */

.mshell-concept-card {
    background: var(--ui-bg-panel);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-lg);
    margin: 0 0 18px;
    overflow: hidden;
}

.mshell-concept-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--ui-border);
    background: var(--ui-bg-secondary);
}

.mshell-concept-label {
    font-family: var(--font-terminal);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--color-ochre);
    white-space: nowrap;
}

.mshell-concept-title {
    font-family: var(--font-narrative, var(--font-ui));
    font-size: 16px;
    font-weight: 600;
    color: var(--ui-text-primary);
    line-height: 1.25;
    margin: 0;
}

.mshell-concept-body {
    padding: 18px 22px;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--ui-text-primary);
}

.mshell-concept-body p {
    margin: 0 0 12px;
}

.mshell-concept-body p:last-child {
    margin-bottom: 0;
}

.mshell-concept-body strong {
    color: var(--ui-text-primary);
    font-weight: 600;
}

.mshell-concept-body em {
    color: var(--ui-text-secondary);
}

.mshell-concept-body h4 {
    font-family: var(--font-narrative, var(--font-ui));
    font-size: 14.5px;
    font-weight: 600;
    color: var(--color-ochre);
    margin: 18px 0 8px;
    letter-spacing: 0.2px;
}

.mshell-concept-body h4:first-child {
    margin-top: 0;
}

.mshell-concept-body ul,
.mshell-concept-body ol {
    margin: 0 0 12px;
    padding-left: 22px;
}

.mshell-concept-body li {
    margin: 4px 0;
    line-height: 1.6;
}

.mshell-concept-body a {
    color: var(--color-terracotta);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.mshell-concept-body code:not(pre code) {
    background: var(--ui-bg-secondary);
    color: var(--term-fg-bright);
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    font-family: var(--font-terminal);
    font-size: 0.9em;
}

/* Author-written <pre> blocks inside lesson content_*: the JS
   post-processor adds class="mshell-concept-code" to anything
   without one. This rule covers <pre> that slipped through (e.g.
   has class="lang-yaml" etc) so it still gets the dark theme. */
.mshell-concept-body pre {
    background: var(--term-bg);
    color: var(--term-fg);
    padding: 14px 18px;
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-ochre);
    font-family: var(--font-terminal);
    font-size: 13px;
    line-height: 1.55;
    margin: 12px 0;
    overflow-x: auto;
    white-space: pre-wrap;
}

.mshell-concept-body pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: inherit;
}

/* Section-complete button (bottom of each LEARN card) */
.mshell-section-done {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 14px 0 0;
    padding: 8px 16px;
    background: var(--color-terracotta);
    color: var(--ui-text-on-accent);
    border: 0;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.12s ease-out, transform 0.12s ease-out;
}

.mshell-section-done:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.mshell-section-done:focus-visible {
    outline: 2px solid var(--color-ochre);
    outline-offset: 2px;
}

.mshell-section-done:disabled {
    background: var(--ui-success);
    cursor: default;
    opacity: 0.85;
}

.mshell-section-done svg {
    width: 13px;
    height: 13px;
}

/* Inline check (single-choice mini-quiz at the bottom of a card) */
.mshell-inline-check {
    margin: 16px 0 0;
    padding: 12px 14px;
    background: var(--ui-bg-secondary);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-ochre);
}

.mshell-inline-check__title {
    font-family: var(--font-terminal);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-ochre);
    margin-bottom: 6px;
}

.mshell-inline-check__prompt {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ui-text-primary);
    margin-bottom: 8px;
    line-height: 1.45;
}

.mshell-inline-check__choices {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mshell-inline-check__choice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 10px;
    background: var(--ui-bg-panel);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--ui-text-primary);
    text-align: left;
    transition: border-color 0.12s ease-out;
}

.mshell-inline-check__choice:hover {
    border-color: var(--color-terracotta-border);
}

.mshell-inline-check__choice.is-correct {
    border-color: var(--ui-success);
    background: rgba(90, 184, 101, 0.10);
}

.mshell-inline-check__choice.is-incorrect {
    border-color: var(--ui-text-error);
    background: rgba(239, 68, 68, 0.08);
}

.mshell-inline-check__feedback {
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--ui-bg-panel);
    border-radius: var(--radius-sm);
    font-size: 12px;
    line-height: 1.55;
    color: var(--ui-text-secondary);
}

/* ----------------------------------------------------------------
   STEPPED QUIZ (.sq-*) - Verify phase, one question at a time
   ----------------------------------------------------------------
   Replaces the legacy "worksheet" pattern (all 8 questions visible
   simultaneously, individual Submit buttons) with a checkpoint
   flow: question card -> pick option -> Valider -> reveal correct
   answer + explanation -> "Question suivante" advances. Final
   screen shows score + retry button on failure or VALIDÉ stamp.
   Tokens map to existing AKONetwork palette so theme parity holds.
   ---------------------------------------------------------------- */
.sq-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.sq-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--ui-bg-elevated);
    border-radius: 99px;
    overflow: hidden;
}
.sq-progress-fill {
    height: 6px;
    background: #d4a03c;
    border-radius: 99px;
    transition: width 0.3s ease;
}
.sq-progress-label {
    font-family: var(--font-terminal);
    font-size: 11px;
    color: var(--ui-text-muted);
    font-variant-numeric: tabular-nums;
    min-width: 40px;
    text-align: right;
}

.sq-card {
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--ui-bg-panel);
}
.sq-card-header {
    padding: 10px 14px;
    background: var(--color-terracotta-soft);
    border-bottom: 1px solid var(--color-terracotta-border);
    display: flex;
    align-items: center;
    gap: 8px;
}
.sq-q-badge {
    font-family: var(--font-terminal);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-terracotta);
}
.sq-q-tag {
    font-family: var(--font-terminal);
    font-size: 10px;
    color: var(--ui-text-muted);
    background: var(--ui-bg-secondary);
    padding: 2px 8px;
    border-radius: 99px;
    border: 1px solid var(--ui-border);
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.sq-q-text {
    padding: 14px 16px 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-text-primary);
    line-height: 1.55;
}

.sq-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0 16px;
}
.sq-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    border: 0.5px solid var(--ui-border-soft);
    background: var(--ui-bg-card-elevated);
    cursor: pointer;
    transition: border-color 0.12s ease-out, background 0.12s ease-out;
    font-size: 13px;
    color: var(--ui-text-primary);
    line-height: 1.45;
    text-align: left;
}
/* Keyboard focus on a non-selected option does NOT inherit the
   selected/hover terracotta look. Without this rule, browser-default
   focus on the last button after a phase switch reads as "this option
   is already picked." */
.sq-option:focus-visible {
    outline: 2px solid var(--color-ochre);
    outline-offset: 2px;
    border-color: var(--ui-border-soft);
    background: var(--ui-bg-card-elevated);
}
.sq-option:hover {
    border-color: #cc6040;
    background: #cc604010;
}
.sq-option.selected {
    border-color: #cc6040;
    background: #cc604010;
}
.sq-option.correct {
    border-color: var(--ui-success);
    background: rgba(90, 184, 101, 0.12);
    pointer-events: none;
}
.sq-option.wrong {
    border-color: var(--ui-text-error);
    background: rgba(239, 68, 68, 0.10);
    pointer-events: none;
}

.sq-radio {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 1.5px solid var(--ui-border);
    flex-shrink: 0;
    margin-top: 2px;
    transition: border-color 0.12s ease-out, background 0.12s ease-out;
}
.sq-radio.filled   { border-color: var(--color-terracotta); background: var(--color-terracotta); }
.sq-option.correct .sq-radio { border-color: var(--ui-success); background: var(--ui-success); }
.sq-option.wrong   .sq-radio { border-color: var(--ui-text-error); background: var(--ui-text-error); }

.sq-submit {
    display: block;
    margin: 14px 16px 16px auto;
    padding: 9px 20px;
    border-radius: var(--radius-md);
    background: #cc6040;
    color: var(--ui-text-on-accent);
    border: 0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    opacity: 1;
    transition: filter 0.12s ease-out, opacity 0.12s ease-out;
}
.sq-submit:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
.sq-submit:not(:disabled):hover {
    filter: brightness(1.08);
}
.sq-submit:focus-visible {
    outline: 2px solid var(--color-ochre);
    outline-offset: 2px;
}

.sq-explanation { margin: 0 16px 14px; }
.sq-exp-inner {
    display: flex;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    font-size: 12.5px;
    line-height: 1.6;
}
.sq-exp-ok {
    background: rgba(90, 184, 101, 0.12);
    border: 1px solid var(--ui-success);
    color: var(--ui-text-primary);
}
.sq-exp-err {
    background: rgba(239, 68, 68, 0.10);
    border: 1px solid var(--ui-text-error);
    color: var(--ui-text-primary);
}
.sq-exp-icon {
    font-size: 14px;
    flex-shrink: 0;
    font-weight: 700;
}
.sq-exp-ok  .sq-exp-icon { color: var(--ui-success); }
.sq-exp-err .sq-exp-icon { color: var(--ui-text-error); }

.sq-result {
    text-align: center;
    padding: 40px 20px;
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-lg);
    background: var(--ui-bg-panel);
}
.sq-result-score {
    font-family: var(--font-terminal);
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 8px;
    font-variant-numeric: tabular-nums;
}
.sq-result-pass .sq-result-score { color: var(--ui-success); }
.sq-result-fail .sq-result-score { color: var(--ui-text-error); }
.sq-result-label {
    font-size: 14px;
    color: var(--ui-text-secondary);
    margin-bottom: 18px;
    line-height: 1.55;
}
.sq-stamp {
    display: inline-block;
    font-family: var(--font-terminal);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--color-terracotta);
    border: 2px solid var(--color-terracotta);
    padding: 5px 18px;
    border-radius: var(--radius-sm);
}

/* Completion banner (last card / verify finish) */
.mshell-complete-banner {
    margin: 12px 0;
    padding: 14px 18px;
    background: rgba(90, 184, 101, 0.10);
    border: 1px solid var(--ui-success);
    border-radius: var(--radius-md);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--ui-text-primary);
}

.mshell-complete-banner strong {
    color: var(--ui-success);
}

.mshell-concept-code {
    background: var(--term-bg);
    color: var(--term-fg);
    padding: 14px 18px;
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-ochre);
    font-family: var(--font-terminal);
    font-size: 13px;
    line-height: 1.55;
    margin: 12px 0;
    overflow-x: auto;
    white-space: pre-wrap;
}

.mshell-concept-code .cmd      { color: var(--term-fg-bright); font-weight: 600; }
.mshell-concept-code .flag     { color: var(--color-terracotta); }
.mshell-concept-code .comment  { color: var(--term-fg-dim); font-style: italic; }
.mshell-concept-code .out      { color: var(--term-fg); }
.mshell-concept-code .ok       { color: var(--ui-success); }
.mshell-concept-code .err      { color: var(--ui-text-error); }

/* Amber "why this matters" strip closing every concept card.
   Compact horizontal flex - one icon + one sentence. The amber
   tone breaks the textbook feel and signals "in production".
   Spec from 2026-05-20 polish review. */
.mshell-why {
    margin: 14px 0 4px;
    padding: 10px 14px;
    background: rgba(212, 160, 60, 0.10);
    border-left: 3px solid var(--color-ochre);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ui-text-primary);
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.mshell-why-icon {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-ochre);
    flex-shrink: 0;
}

/* Stepped LEARN pagination - one concept card at a time.
   Replaces the textbook-scroll layout with a per-card pacing rhythm
   (progress bar, dot indicators, prev/next nav). The Concept cards
   themselves keep their existing .mshell-concept-* styling; the
   pager wraps + augments. */
.mshell-pager-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    padding: 0 4px;
}
.mshell-pager-bar {
    flex: 1;
    height: 4px;
    background: var(--ui-border);
    border-radius: 99px;
    overflow: hidden;
}
.mshell-pager-fill {
    height: 100%;
    background: var(--color-terracotta);
    border-radius: 99px;
    transition: width 0.35s ease;
}
.mshell-pager-label {
    font-size: 11px;
    color: var(--ui-text-muted);
    min-width: 42px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.mshell-pager-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 16px 0 4px;
    padding: 0 4px;
}
.mshell-pager-btn {
    padding: 8px 18px;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s ease-out, filter 0.15s ease-out;
    border: 0;
    font-family: inherit;
}
.mshell-pager-btn-prev {
    background: var(--ui-bg-secondary);
    color: var(--ui-text-secondary);
    border: 0.5px solid var(--ui-border);
}
.mshell-pager-btn-prev:disabled {
    opacity: 0.35;
    cursor: default;
}
.mshell-pager-btn-next {
    background: #cc6040;
    color: #ffffff;
}
.mshell-pager-btn-next:not(:disabled):hover {
    filter: brightness(1.08);
}
.mshell-pager-btn:focus-visible {
    outline: 2px solid var(--color-ochre);
    outline-offset: 2px;
}
.mshell-pager-dots {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
.mshell-pager-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ui-border);
    cursor: pointer;
    transition: background 0.15s ease-out, transform 0.15s ease-out;
    border: 0;
    padding: 0;
}
.mshell-pager-dot.is-seen   { background: rgba(204, 96, 64, 0.40); }
.mshell-pager-dot.is-active { background: #cc6040; transform: scale(1.3); }
.mshell-pager-dot:focus-visible {
    outline: 2px solid var(--color-ochre);
    outline-offset: 2px;
}
/* Safety-net counter shown in place of dots when a section has more
   than 8 chunks - the row would be visually unreadable beyond 8. */
.mshell-pager-counter {
    font-size: 12px;
    color: var(--ui-text-muted);
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

/* Unprefixed why-callout used inside concept cards in the LEARN
   phase. Same amber-strip treatment as .mshell-why; separate class
   because mission-authored HTML uses the shorter name. */
.why-callout {
    margin: 14px 0 4px;
    padding: 10px 14px;
    background: rgba(212, 160, 60, 0.10);
    border-left: 3px solid var(--color-ochre);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ui-text-primary);
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.why-icon {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-ochre);
    flex-shrink: 0;
}

/* Legacy title style retained in case any caller still uses it. */
.mshell-why-title {
    font-family: var(--font-terminal);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-terracotta);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ---- DO (lab / terminal-as-hero) ---------------------------- */

.mshell-task-strip {
    background: var(--ui-bg-panel);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-md);
    padding: 12px 16px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.mshell-task-strip__title {
    font-family: var(--font-narrative, var(--font-ui));
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-text-primary);
    margin: 0 0 2px;
}

.mshell-task-strip__sub {
    font-family: var(--font-terminal);
    font-size: 11px;
    color: var(--ui-text-muted);
}

.mshell-task-strip__count {
    font-family: var(--font-terminal);
    font-size: 11px;
    color: var(--color-terracotta);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mshell-terminal-wrap {
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--term-bg);
}

.mshell-terminal-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: var(--ui-bg-secondary);
    border-bottom: 1px solid var(--ui-border);
    font-family: var(--font-terminal);
    font-size: 11px;
    color: var(--ui-text-muted);
}

.mshell-terminal-dots {
    display: inline-flex;
    gap: 6px;
}

.mshell-terminal-dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ui-border);
}

.mshell-terminal-dots span:nth-child(1) { background: var(--ui-text-error); }
.mshell-terminal-dots span:nth-child(2) { background: var(--color-ochre); }
.mshell-terminal-dots span:nth-child(3) { background: var(--ui-success); }

.mshell-terminal-host {
    flex: 1;
    text-align: center;
    color: var(--ui-text-muted);
}

.mshell-terminal-body {
    padding: 14px 16px;
    font-family: var(--font-terminal);
    font-size: 13px;
    line-height: 1.55;
    color: var(--term-fg);
    min-height: 320px;
    max-height: 480px;
    overflow-y: auto;
    background: var(--term-bg);
}

/* Terminal text legend (analyst color coding, stable across themes
   because the terminal is always dark-on-dark). Not derived from
   --term-fg* tokens because those are uniform ochre/amber (CRT
   aesthetic) - the Practice phase needs distinct colors so a
   PLAY RECAP block is scannable in a second:
     - prompt   ochre   (where am I, who am I)
     - cmd      blue    (what I typed)
     - out      gray    (neutral output)
     - ok       green   (PLAY RECAP ok=, success)
     - changed  amber   (PLAY RECAP changed=)
     - error    red     (PLAY RECAP failed=, unreachable=)
     - skipped  blue    (PLAY RECAP skipped=)
     - warning  purple  (deprecation, etc.)
     - dim      gray    (metadata, boot preamble) */
.mshell-terminal-body .t-prompt   { color: #cc6040; font-weight: 600; }
.mshell-terminal-body .t-cmd      { color: #79b8ff; font-weight: 600; }
.mshell-terminal-body .t-out      { color: #e0e0e0; display: block; white-space: pre-wrap; }
.mshell-terminal-body .t-ok,
.mshell-terminal-body .t-success  { color: #85e89d; display: block; white-space: pre-wrap; }
.mshell-terminal-body .t-changed  { color: #f0c674; display: block; white-space: pre-wrap; }
.mshell-terminal-body .t-error,
.mshell-terminal-body .t-failed,
.mshell-terminal-body .t-unreachable { color: #f85149; font-weight: 600; display: block; white-space: pre-wrap; }
.mshell-terminal-body .t-skipped  { color: #79b8ff; display: block; white-space: pre-wrap; }
.mshell-terminal-body .t-warning  { color: #c993ff; display: block; white-space: pre-wrap; }
.mshell-terminal-body .t-dim      { color: #6a737d; font-style: italic; display: block; white-space: pre-wrap; }
.mshell-terminal-body .t-hint     { color: #6a737d; font-style: italic; display: block; white-space: pre-wrap; }
.mshell-terminal-body .t-info     { color: #e0e0e0; display: block; white-space: pre-wrap; }

/* Echoed command lines: prompt + typed command on the same line,
   each colored separately. Set on the <div> that wraps both spans. */
.mshell-terminal-body .t-line-cmd {
    display: block;
    white-space: pre-wrap;
    margin-bottom: 2px;
}

.mshell-terminal-input-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px 10px;
    background: var(--term-bg);
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.mshell-terminal-input-row .t-prompt {
    color: #cc6040;
    font-weight: 600;
    font-family: var(--font-terminal);
    font-size: 13px;
    white-space: pre;
}

.mshell-terminal-input {
    color: #79b8ff;
    font-weight: 600;
}

.mshell-terminal-input {
    flex: 1;
    background: transparent;
    border: 0;
    color: var(--term-fg-bright);
    font-family: var(--font-terminal);
    font-size: 13px;
    outline: none;
    caret-color: var(--term-fg-bright);
}

/* ---- VALIDATE (quiz) ---------------------------------------- */

.mshell-quiz-intro {
    background: var(--ui-bg-panel);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-md);
    padding: 14px 18px;
    margin-bottom: 18px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ui-text-primary);
}

.mshell-q-card {
    background: var(--ui-bg-panel);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-lg);
    margin: 0 0 14px;
    overflow: hidden;
}

.mshell-q-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--ui-bg-secondary);
    border-bottom: 1px solid var(--ui-border);
}

.mshell-q-badge {
    font-family: var(--font-terminal);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-ochre);
    padding: 3px 8px;
    border: 1px solid var(--color-ochre);
    border-radius: var(--radius-sm);
}

.mshell-q-prompt {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ui-text-primary);
    line-height: 1.4;
    flex: 1;
}

.mshell-q-body {
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mshell-q-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: var(--ui-bg-secondary);
    border: 1px solid var(--ui-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ui-text-primary);
    transition: border-color 0.12s ease-out, background 0.12s ease-out;
}

.mshell-q-option:hover {
    border-color: var(--color-terracotta-border);
}

.mshell-q-option.is-selected {
    border-color: var(--color-terracotta);
    background: var(--color-terracotta-soft);
}

.mshell-q-option.is-correct {
    border-color: var(--ui-success);
    background: rgba(90, 184, 101, 0.12);
}

.mshell-q-option.is-incorrect {
    border-color: var(--ui-text-error);
    background: rgba(239, 68, 68, 0.10);
}

.mshell-q-radio {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--ui-border);
    border-radius: 50%;
    margin-top: 2px;
    position: relative;
}

.mshell-q-option.is-selected .mshell-q-radio::after,
.mshell-q-option.is-correct .mshell-q-radio::after,
.mshell-q-option.is-incorrect .mshell-q-radio::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: currentColor;
}

.mshell-q-option.is-selected   .mshell-q-radio { border-color: var(--color-terracotta); color: var(--color-terracotta); }
.mshell-q-option.is-correct    .mshell-q-radio { border-color: var(--ui-success); color: var(--ui-success); }
.mshell-q-option.is-incorrect  .mshell-q-radio { border-color: var(--ui-text-error); color: var(--ui-text-error); }

.mshell-q-explain {
    margin: 8px 0 0;
    padding: 10px 12px;
    background: var(--ui-bg-secondary);
    border-left: 3px solid var(--color-ochre);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--ui-text-secondary);
}

.mshell-submit {
    background: var(--color-terracotta);
    color: var(--ui-text-on-accent);
    border: 0;
    padding: 10px 22px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.12s ease-out, transform 0.12s ease-out;
}

.mshell-submit:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

.mshell-submit:focus-visible {
    outline: 2px solid var(--color-ochre);
    outline-offset: 2px;
}

.mshell-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mshell-xp-reward {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(90, 184, 101, 0.12);
    border: 1px solid var(--ui-success);
    border-radius: var(--radius-md);
    font-family: var(--font-terminal);
    font-size: 11px;
    color: var(--ui-success);
    font-variant-numeric: tabular-nums;
    margin-left: 10px;
}

/* ---- Reduced motion + a11y ---------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .mshell-tab,
    .mshell-obj,
    .mshell-obj-check,
    .mshell-xpfill,
    .mshell-q-option,
    .mshell-submit {
        transition: none;
    }
}

.mshell-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ----------------------------------------------------------------
   PRACTICE FULL-BLEED MODE
   ----------------------------------------------------------------
   When the active phase is "practice", the right pane drops the
   centered max-width=900px page layout and lets the terminal
   stretch edge-to-edge from the sidebar to the viewport edge.
   The task strip becomes a single compact line above the
   terminal, not a floating card.
   ---------------------------------------------------------------- */
/* ----------------------------------------------------------------
   LEARN full-bleed: keep the concept card stretched edge-to-edge
   vertically so short chunks (Concepts 1-5 in mission 19.1 etc.)
   don't shrink-to-fit and leave a huge white gap below. The card
   is now a flex column - chunk content grows, why-callout pins to
   bottom via margin-top:auto, internal scroll if a tall chunk
   overflows.
   ---------------------------------------------------------------- */
.mshell-main.is-learn-mode .mshell-content {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 24px 32px 24px;
}

.mshell-main.is-learn-mode .mshell-phase[data-phase-pane="learn"] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.mshell-main.is-learn-mode .mshell-pager-progress {
    flex-shrink: 0;
}

.mshell-main.is-learn-mode .mshell-concept-card {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.mshell-main.is-learn-mode .mshell-concept-header {
    flex-shrink: 0;
}

.mshell-main.is-learn-mode .mshell-concept-body {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mshell-main.is-learn-mode .mshell-concept-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.mshell-main.is-learn-mode .mshell-why {
    flex-shrink: 0;
    margin-top: auto;
}

.mshell-main.is-learn-mode .mshell-inline-check,
.mshell-main.is-learn-mode .mshell-section-done {
    flex-shrink: 0;
}

.mshell-main.is-learn-mode .mshell-pager-nav {
    flex-shrink: 0;
    padding-top: 12px;
}

@media (max-width: 720px) {
    .mshell-main.is-learn-mode .mshell-content {
        padding: 18px 16px 18px;
    }
}

/* ----------------------------------------------------------------
   DARK THEME contrast overrides for the mshell. Dark is the
   default (no data-theme attribute - see js/theme.js). Existing
   token-based rules give decent contrast, but the 2026-05-20
   polish review called out specific elements that needed
   stronger separation: brighter concept label, warmer title,
   terracotta-tinted why-callout border, terracotta inline code,
   and visible dot/progress backgrounds against the page bg.
   These overrides fire only when [data-theme="light"] is NOT
   set, so light mode keeps its tokenized rules unchanged.
   ---------------------------------------------------------------- */
:root:not([data-theme="light"]) .mshell-concept-card {
    background: #1e1e1e;
    border-color: #2d2d2d;
}
:root:not([data-theme="light"]) .mshell-concept-header {
    background: #161616;
    border-bottom-color: #2d2d2d;
}
:root:not([data-theme="light"]) .mshell-concept-label {
    color: #e07050;
}
:root:not([data-theme="light"]) .mshell-concept-title {
    color: #f0e8d8;
}
:root:not([data-theme="light"]) .mshell-concept-body,
:root:not([data-theme="light"]) .mshell-concept-body p,
:root:not([data-theme="light"]) .mshell-concept-body li {
    color: #c9d1d9;
}
:root:not([data-theme="light"]) .mshell-concept-body strong {
    color: #f0e8d8;
}
:root:not([data-theme="light"]) .mshell-concept-body em {
    color: #b0b6bd;
}
:root:not([data-theme="light"]) .mshell-concept-body h4 {
    color: #e07050;
}
:root:not([data-theme="light"]) .mshell-concept-body code:not(pre code) {
    background: #2d2d2d;
    color: #e07050;
    border: 1px solid #444;
}
/* Amber why-callout retuned for dark - terracotta tint instead of
   ochre so it visually ties to the brand-accent buttons. Per user
   spec 2026-05-20. */
:root:not([data-theme="light"]) .mshell-why,
:root:not([data-theme="light"]) .why-callout {
    background: #cc604018;
    border-left-color: #cc6040;
    border: 1px solid #cc604050;
    color: #e0c8b0;
}
:root:not([data-theme="light"]) .mshell-why-icon,
:root:not([data-theme="light"]) .why-icon {
    color: #e07050;
}
/* Progress bar track needs visible contrast against the dark
   page bg (#050505). The default --ui-border is close enough but
   the spec called for a flat #333 - apply directly. */
:root:not([data-theme="light"]) .mshell-pager-bar {
    background: #333;
}
:root:not([data-theme="light"]) .mshell-pager-fill {
    background: #cc6040;
}
:root:not([data-theme="light"]) .mshell-pager-dot {
    background: #444;
}
:root:not([data-theme="light"]) .mshell-pager-dot.is-seen {
    background: #cc604066;
}
:root:not([data-theme="light"]) .mshell-pager-dot.is-active {
    background: #cc6040;
}

/* ----------------------------------------------------------------
   MSHELL FAB stacking - the mshell-pager-nav "Next" button is inline
   at the right pane's bottom, sitting ~45-79px above the viewport
   floor at 1280x800 / 1500x900. Two fixed FABs (.notes-fab at
   bottom:20px, .rt-mentor-btn inline-styled at bottom:20px) collide
   with that Next button without lifts. Previous fix used 80/140 for
   the mentor only; that left a 1-px touch-gap with Next, and the
   notes FAB still overlapped Next by 15px vertically. New stack from
   bottom up: Next pager (~45-79px) -> 20px gap -> notes FAB
   (100-140px) -> 20px gap -> Ask Ako btn (160-200px) -> Ask Ako
   panel anchor (220px). .rt-mentor-btn uses inline bottom:20px so
   the override needs !important. Scope: mshell takeover only.

   Note-panel collision: .notes-overlay is a full-viewport modal at
   z:1000 with a dark scrim, but .rt-mentor-btn sits at z:9000 and
   "punches through" the scrim. The overlay toggles via inline
   style.display="flex|none", so the :has() + attribute selector
   detects open state. Both mentor surfaces hide while open so they
   never overlap the modal card or distract above the dim layer.
   ---------------------------------------------------------------- */
body[data-mshell="active"] .notes-fab {
    bottom: 100px;
}
body[data-mshell="active"] .rt-mentor-btn {
    bottom: 160px !important;
}
body[data-mshell="active"] .rt-mentor-panel {
    bottom: 220px !important;
}
body[data-mshell="active"]:has(.notes-overlay:not([style*="display:none"]):not([style*="display: none"])) .rt-mentor-btn,
body[data-mshell="active"]:has(.notes-overlay:not([style*="display:none"]):not([style*="display: none"])) .rt-mentor-panel {
    display: none !important;
}

.mshell-main.is-practice-mode .mshell-content {
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.mshell-main.is-practice-mode .mshell-phase[data-phase-pane="practice"] {
    max-width: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.mshell-main.is-practice-mode .mshell-task-strip {
    margin: 0;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid var(--ui-border);
    padding: 8px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    background: var(--ui-bg-secondary);
}

.mshell-main.is-practice-mode .mshell-task-strip__title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--color-ochre);
    font-family: var(--font-terminal);
    margin: 0;
    flex: 0 0 auto;
}

.mshell-main.is-practice-mode .mshell-task-strip__sub {
    font-size: 13px;
    color: var(--ui-text-primary);
    line-height: 1.4;
    flex: 1 1 auto;
    margin: 0;
    /* Single line by default; allow wrapping only on small viewports */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mshell-main.is-practice-mode .mshell-task-strip > div:first-child {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.mshell-main.is-practice-mode .mshell-task-strip__count {
    flex: 0 0 auto;
    font-size: 12px;
}

.mshell-main.is-practice-mode .mshell-terminal-wrap {
    border-radius: 0;
    border: 0;
    border-top: 1px solid var(--ui-border);
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.mshell-main.is-practice-mode .mshell-terminal-bar {
    flex: 0 0 auto;
}

.mshell-main.is-practice-mode .mshell-terminal-body {
    max-height: none;
    min-height: 0;
    flex: 1 1 auto;
    padding: 14px 18px;
}

.mshell-main.is-practice-mode .mshell-terminal-input-row {
    flex: 0 0 auto;
}

/* ----------------------------------------------------------------
   MSHELL TAKEOVER - when an Arc 19+ mission mounts, the renderer
   sets body[data-mshell="active"]. The mshell has its own topbar,
   sidebar, and XP pill, so the legacy outer chrome (story panel
   on the left, global bottombar XP, CRT scanline texture on the
   terminal panel) becomes redundant and must be suppressed.
   ---------------------------------------------------------------- */
body[data-mshell="active"] main.main-content > .story-panel {
    display: none;
}

body[data-mshell="active"] main.main-content {
    grid-template-columns: 1fr;
    grid-template-areas: "term";
}

body[data-mshell="active"] main.main-content > #terminalPanel {
    grid-area: term;
    border-left: 0;
}

body[data-mshell="active"] #terminalPanel > .terminal-header {
    display: none;
}

body[data-mshell="active"] #conceptualContainer > #phaseNav {
    display: none;
}

body[data-mshell="active"] #terminalPanel .terminal-body,
body[data-mshell="active"] #conceptualContainer,
body[data-mshell="active"] #phaseContent {
    padding: 0;
    background: transparent;
    height: 100%;
    min-height: 0;
    overflow: visible;
}

body[data-mshell="active"] #terminalPanel .terminal-body::before {
    display: none;
}

body[data-mshell="active"] .bottombar {
    display: none;
}

body[data-mshell="active"] #terminalPanel {
    overflow: hidden;
}

body[data-mshell="active"] .mshell-root {
    height: 100%;
}

/* ================================================================
   Mobile mshell height-chain fix (deferred from Arc 19, May 2026)
   ----------------------------------------------------------------
   At viewport <= 480px (iPhone SE through small Android), the
   parent chain (#terminalPanel > #phaseContent etc.) does not
   always resolve a height, so .mshell-root's `height: 100%`
   computes to 0 and the entire stepped-shell collapses to a 0x0
   box. The min-height: 600px declared in the base .mshell-root
   rule is shadowed by `body[data-mshell="active"] .mshell-root
   { height: 100% }` at line 7162, so the desktop minimum no
   longer helps.

   Fix: at <= 480px, anchor mshell-root to min-height: 100vh
   (with -webkit-fill-available fallback for iOS Safari address-
   bar shenanigans) and switch the grid to a flex column so the
   row sizes resolve against actual content. Specificity matches
   the existing body[data-mshell="active"] .mshell-root rule.
   ================================================================ */
@media (max-width: 480px) {
    html, body {
        height: 100%;
        min-height: 100%;
    }

    body[data-mshell="active"] .mshell-root {
        /* iOS Safari first (address-bar-aware), then 100vh
           fallback. Chromium/Firefox skip the -webkit value and
           land on 100vh; iOS Safari uses fill-available. Order
           matters - 100vh must declare LAST so it wins the
           cascade on browsers that support both. */
        min-height: -webkit-fill-available;
        min-height: 100vh;
        height: auto;
        display: flex;
        flex-direction: column;
    }

    .mshell-main {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
    }

    .mshell-content {
        flex: 1 1 auto;
        min-height: 0;
    }

    .mshell-concept-card {
        min-height: auto;
        height: auto;
    }

    .mshell-pager-nav {
        flex-direction: column;
        gap: 8px;
        padding: 12px;
    }

    .mshell-pager-btn-prev,
    .mshell-pager-btn-next {
        width: 100%;
        text-align: center;
    }

    .mshell-tabs {
        flex-wrap: wrap;
        gap: 4px;
    }

    .mshell-terminal-wrap {
        width: 100%;
        min-height: 300px;
    }
}

/* ================================================================
   AkoArchDiagram Sprint 1 - cloud architecture diagram panel
   ================================================================
   Mounted in two places:
     - Learn phase (app.js renderLessonSections, height 350px)
     - Practice + Challenge (cloud_lab_runner _mountLabUI, 400px)
   Same id (#arch-diagram-container) is reused; phase transitions
   replace the container's contents so only one is ever in the DOM.
   Both theme blocks (dark default + light override) defined per
   Gate 78 theme parity. SVG fills the panel via .arch-diagram-panel
   svg { width:100%; height:100% } so the renderer (Agent 1's
   arch_diagram.js) does not need to compute pixel sizes manually.
   ================================================================ */

.arch-diagram-panel {
    width: 100%;
    height: 420px;
    border: 1px solid var(--color-terracotta);
    border-radius: 6px;
    overflow: hidden;
    background: var(--ui-bg-secondary);
    margin-bottom: 16px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    color: var(--ui-text-primary);
    transition: height 0.3s ease;
}

.arch-diagram-panel--learn {
    height: 420px;
}

.arch-diagram-panel.collapsed,
.arch-diagram-panel--learn.collapsed {
    height: 48px;
}

.arch-diagram-panel__header {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    cursor: pointer;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 13px;
    color: var(--color-terracotta);
    user-select: none;
    background: var(--ui-bg-secondary);
    border-bottom: 1px solid var(--ui-border);
}

.arch-diagram-panel__header:focus {
    outline: 2px solid var(--color-terracotta);
    outline-offset: -2px;
}

.arch-diagram-panel__chevron {
    transition: transform 0.3s ease;
    display: inline-block;
}

.arch-diagram-panel.collapsed .arch-diagram-panel__chevron {
    transform: rotate(-90deg);
}

.arch-diagram-panel__body {
    height: calc(100% - 48px);
    overflow: hidden;
}

.arch-diagram-panel svg {
    width: 100%;
    height: 100%;
    display: block;
}

.arch-diagram-panel svg text {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
}

.arch-diagram-panel svg text.region-label {
    font-size: 13px;
    font-weight: 700;
}

@media (max-width: 768px) {
    .arch-diagram-panel,
    .arch-diagram-panel--learn {
        height: 280px;
    }
    .arch-diagram-panel.collapsed,
    .arch-diagram-panel--learn.collapsed {
        height: 48px;
    }
}

/* ============================================================
   AKO TUTOR (browser-direct Groq). Inline chat widget rendered
   under each lesson section by the 3 lesson renderers in
   js/app.js. Widget structure: outer .ako-tutor-bar separator,
   inner .ako-chat-widget card with .ako-chat-header
   (avatar + name + tagline), .ako-response (thinking / answer /
   error), and .ako-input-row (text input + submit button).
   ============================================================ */
.ako-tutor-bar {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 2px solid var(--color-ochre);
}

.ako-chat-widget {
    border: 1px solid var(--ui-border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--ui-bg-secondary);
}

.ako-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(212,160,60,0.08), rgba(212,160,60,0.03));
    border-bottom: 1px solid var(--ui-border);
}

.ako-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ako-avatar {
    font-size: 22px;
    line-height: 1;
}

.ako-header-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ako-name {
    font-family: var(--font-terminal);
    font-weight: 700;
    font-size: 15px;
    color: var(--color-ochre);
    letter-spacing: 0.05em;
}

.ako-tagline {
    font-size: 11px;
    opacity: 0.55;
    font-family: var(--font-ui, 'IBM Plex Sans', sans-serif);
    font-style: italic;
}

.ako-response {
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.7;
    border-bottom: 1px solid var(--ui-border);
    max-height: 250px;
    overflow-y: auto;
    font-family: var(--font-ui, 'IBM Plex Sans', sans-serif);
}

.ako-answer {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.ako-answer-icon {
    flex-shrink: 0;
    font-size: 18px;
    margin-top: 2px;
}

.ako-answer-text {
    flex: 1;
    color: var(--ui-text-primary);
    font-family: var(--font-ui, 'IBM Plex Sans', sans-serif);
    font-size: 14px;
    line-height: 1.7;
}

.ako-answer-text p {
    margin: 0 0 8px 0;
}

.ako-answer-text p:last-child {
    margin-bottom: 0;
}

.ako-answer-text strong {
    color: var(--color-ochre);
    font-weight: 600;
}

.ako-answer-text code {
    font-family: var(--font-terminal);
    font-size: 13px;
    background: rgba(255,255,255,0.06);
    padding: 1px 5px;
    border-radius: 3px;
}

.ako-thinking {
    opacity: 0.6;
    font-style: italic;
    font-family: var(--font-ui, 'IBM Plex Sans', sans-serif);
    font-size: 13px;
    animation: ako-pulse 1.5s ease-in-out infinite;
}

@keyframes ako-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.ako-error {
    color: var(--color-terracotta, #c75b39);
    font-size: 13px;
    font-family: var(--font-ui, 'IBM Plex Sans', sans-serif);
}

.ako-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
}

.ako-input {
    flex: 1;
    background: transparent;
    border: 1px solid var(--ui-border);
    border-radius: 6px;
    padding: 9px 13px;
    color: var(--ui-text-primary);
    font-family: var(--font-ui, 'IBM Plex Sans', sans-serif);
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

.ako-input:focus {
    border-color: var(--color-ochre);
    box-shadow: 0 0 0 2px rgba(212,160,60,0.15);
}

.ako-input::placeholder {
    opacity: 0.35;
    font-style: italic;
}

.ako-input:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.ako-char-count {
    font-size: 11px;
    color: var(--ui-text-muted);
    text-align: right;
    padding: 2px 16px 6px;
    font-family: var(--font-terminal);
}

.ako-submit-btn {
    background: var(--color-ochre);
    border: none;
    border-radius: 6px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a1a1a;
    cursor: pointer;
    font-size: 15px;
    flex-shrink: 0;
    transition: opacity 0.2s, transform 0.1s;
}

.ako-submit-btn:hover {
    opacity: 0.88;
    transform: scale(1.05);
}

.ako-submit-btn:active {
    transform: scale(0.97);
}

.ako-submit-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    transform: none;
}


/* ================================================================
   DASHBOARD PAGE: Industrial Sci-Fi (Gate 11 earth-tone palette)
   ================================================================ */

/* Page shell */
.dashboard-page {
    background: #1a1410 !important;
    min-height: 100vh;
    position: relative;
    color: var(--ui-text-primary);
}

/* Warm amber blueprint grid */
.dashboard-page .grid-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
        linear-gradient(rgba(230,192,104,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(230,192,104,0.04) 1px, transparent 1px);
    background-size: 32px 32px;
}

/* Ensure all content sits above the grid */
.dashboard-page > * { position: relative; z-index: 1; }

/* Stats / Signals panel */
.dashboard-page .stats-panel {
    background: rgba(28,20,12,0.90);
    border: 1px solid rgba(230,192,104,0.20);
    border-radius: 8px;
    padding: 20px 24px 22px;
    margin-bottom: 20px;
    box-shadow:
        0 4px 28px rgba(0,0,0,0.55),
        inset 0 1px 0 rgba(255,255,255,0.05);
}

.dashboard-page .stats-panel h2 {
    font-family: var(--font-terminal), monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-amber);
    margin: 0 0 16px 0;
    opacity: 0.90;
}

/* Panel header with left accent bar */
.dashboard-page .panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(230,192,104,0.15);
}
.dashboard-page .panel-header::before {
    content: '';
    flex-shrink: 0;
    width: 3px;
    height: 22px;
    border-radius: 2px;
    background: var(--color-amber);
    box-shadow: 0 0 10px var(--color-amber), 0 0 20px rgba(230,192,104,0.30);
}
.dashboard-page .panel-header h2 { margin: 0; }

/* Metrics grid */
.dashboard-page .metrics-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.dashboard-page .metric-card {
    background: rgba(0,0,0,0.40);
    border: 1px solid rgba(255,255,255,0.06);
    border-top: 2px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    padding: 14px 10px 12px;
    text-align: center;
    transition: border-top-color 0.2s ease, box-shadow 0.2s ease;
}
.dashboard-page .metric-card:hover {
    border-top-color: rgba(230,192,104,0.35);
}
.dashboard-page .metric-card .label {
    display: block;
    font-family: var(--font-terminal), monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ui-text-muted);
    margin-bottom: 5px;
    line-height: 1.3;
}
.dashboard-page .metric-card .value {
    display: block;
    font-family: var(--font-terminal), monospace;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: var(--ui-text-primary);
}
.dashboard-page .text-amber { color: #e6c068 !important; }
.dashboard-page .text-green { color: #5ab865 !important; }
.dashboard-page .text-red   { color: #cc6040 !important; }

.dashboard-page .metric-card.active-glow {
    border-top-color: rgba(230,192,104,0.55) !important;
    box-shadow:
        0 0 18px rgba(230,192,104,0.10),
        inset 0 1px 0 rgba(230,192,104,0.06);
}

/* Roadmap / cert section wrapper */
.dashboard-page .roadmap-wrapper {
    position: relative;
    padding-left: 50px;
    margin-bottom: 20px;
}

/* Amber spine */
.dashboard-page .roadmap-line {
    position: absolute;
    left: 20px;
    top: 0;
    width: 3px;
    height: 100%;
    background: linear-gradient(
        to bottom,
        #e6c068          0%,
        rgba(230,192,104,0.45) 55%,
        rgba(230,192,104,0.08) 100%
    );
    box-shadow:
        0 0 10px rgba(230,192,104,0.75),
        0 0 30px rgba(230,192,104,0.22);
}

/* Chapters container */
.dashboard-page .chapters-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Chapter / Arc card */
.dashboard-page .chapter-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.07);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    user-select: none;
    min-height: 52px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.dashboard-page .chapter-card:hover {
    transform: translateX(4px);
    border-color: rgba(255,255,255,0.14);
    box-shadow: 0 4px 18px rgba(0,0,0,0.5);
}

/* Arc number badge — square metallic frame (chunk 3) */
.dashboard-page .chapter-card .badge {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 5px;
    background:
        linear-gradient(135deg,
            rgba(60,40,16,0.78) 0%,
            rgba(28,16,6,0.92) 50%,
            rgba(48,30,12,0.78) 100%),
        #1c1006;
    border: 1px solid rgba(230,192,104,0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-terminal), monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--color-amber);
    text-shadow: 0 1px 2px rgba(0,0,0,0.6);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -1px 0 rgba(0,0,0,0.45),
        inset 1px 0 0 rgba(255,255,255,0.08),
        inset -1px 0 0 rgba(0,0,0,0.32),
        0 2px 6px rgba(0,0,0,0.45);
}

/* Light textures keep a darker metallic chip for contrast */
.dashboard-page .texture-sand .badge,
.dashboard-page .texture-metal .badge {
    background:
        linear-gradient(135deg,
            rgba(20,12,4,0.70) 0%,
            rgba(8,4,0,0.85) 50%,
            rgba(16,10,2,0.72) 100%),
        #0c0602;
    color: var(--color-amber);
    border-color: rgba(230,192,104,0.42);
}

.dashboard-page .chapter-card .chapter-info {
    flex: 1;
    min-width: 0;
}
.dashboard-page .chapter-card .chapter-info h4 {
    margin: 0 0 2px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--ui-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dashboard-page .chapter-card .chapter-info p {
    margin: 0;
    font-family: var(--font-terminal), monospace;
    font-size: 11px;
    color: var(--ui-text-muted);
}

/* Progress bar (bottom edge strip) */
.dashboard-page .chapter-card .card-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(to right, #e6c068, #e8c547);
    box-shadow: 0 0 6px rgba(230,192,104,0.80);
    border-radius: 0 1px 0 0;
    pointer-events: none;
    transition: width 0.5s ease;
}

/* Active node ("you are here") */
.dashboard-page .chapter-card.active-node {
    border-left: 3px solid #e6c068 !important;
    box-shadow:
        -6px 0 20px rgba(230,192,104,0.28),
        0 2px 10px rgba(0,0,0,0.55) !important;
}

/* Pulsing dot for current mission */
.dashboard-page .node-glow-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #2a6bf2;
    box-shadow: 0 0 8px #2a6bf2, 0 0 20px rgba(42,107,242,0.50);
    flex-shrink: 0;
    animation: nodePulse 2s ease-in-out infinite;
}
@keyframes nodePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.82); }
}

/* Texture classes (dark mode) */
.dashboard-page .texture-sand {
    background:
        linear-gradient(135deg,
            rgba(218,190,140,0.55) 0%,
            rgba(195,162,102,0.42) 50%,
            rgba(218,190,140,0.50) 100%),
        #28200e;
}
.dashboard-page .texture-wood {
    background:
        linear-gradient(135deg,
            rgba(145,82,32,0.60) 0%,
            rgba(88,48,16,0.45) 45%,
            rgba(120,64,26,0.55) 100%),
        #1c1006;
}
.dashboard-page .texture-metal {
    background:
        linear-gradient(135deg,
            rgba(185,185,196,0.32) 0%,
            rgba(100,100,114,0.22) 50%,
            rgba(165,165,178,0.30) 100%),
        #1a1a20;
}
.dashboard-page .texture-carbon {
    background:
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,0.025) 0px,
            rgba(255,255,255,0.025) 1px,
            transparent 1px,
            transparent 9px
        ),
        repeating-linear-gradient(
            -45deg,
            rgba(255,255,255,0.015) 0px,
            rgba(255,255,255,0.015) 1px,
            transparent 1px,
            transparent 9px
        ),
        #101012;
}
.dashboard-page .texture-linux {
    background:
        linear-gradient(135deg,
            rgba(60,185,82,0.22) 0%,
            rgba(28,110,45,0.14) 100%),
        #0e1610;
}
.dashboard-page .texture-security {
    background:
        linear-gradient(135deg,
            rgba(204,80,58,0.26) 0%,
            rgba(110,28,18,0.18) 100%),
        #160e0c;
}
.dashboard-page .texture-kali {
    background:
        linear-gradient(135deg,
            rgba(110,55,195,0.28) 0%,
            rgba(62,20,138,0.18) 100%),
        #100c1a;
}
.dashboard-page .texture-auto {
    background:
        linear-gradient(135deg,
            rgba(55,145,225,0.22) 0%,
            rgba(22,88,175,0.14) 100%),
        #0c1018;
}
.dashboard-page .texture-cloud {
    background:
        linear-gradient(135deg,
            rgba(75,185,225,0.22) 0%,
            rgba(35,125,188,0.14) 100%),
        #0c141a;
}
.dashboard-page .texture-contracts {
    background:
        linear-gradient(135deg,
            rgba(225,182,76,0.26) 0%,
            rgba(165,122,36,0.16) 100%),
        #161210;
}

/* Cert section headers */
.dashboard-page .section-title {
    font-family: var(--font-terminal), monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ui-text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0 10px 0;
    margin: 0 0 6px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.dashboard-page .group-progress {
    font-family: var(--font-terminal), monospace;
    font-size: 11px;
    color: var(--ui-text-muted);
    margin-left: auto;
    margin-right: 8px;
    white-space: nowrap;
    opacity: 0.80;
}

/* Exam practice section */
.dashboard-page .btn-start-exam {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    border-radius: 5px;
    border: 1px solid rgba(230,192,104,0.38);
    background: linear-gradient(160deg, #3d2a0e 0%, #2a1a06 100%);
    color: #e6c068;
    font-family: var(--font-terminal), monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: all 0.15s ease;
    box-shadow:
        0 2px 8px rgba(0,0,0,0.45),
        inset 0 1px 0 rgba(230,192,104,0.18);
}
.dashboard-page .btn-start-exam:hover {
    background: linear-gradient(160deg, #4e3618 0%, #3a2410 100%);
    border-color: rgba(230,192,104,0.65);
    color: #f0d080;
    box-shadow:
        0 4px 16px rgba(0,0,0,0.55),
        0 0 14px rgba(230,192,104,0.16),
        inset 0 1px 0 rgba(230,192,104,0.25);
    transform: translateY(-1px);
}
.dashboard-page .btn-start-exam:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

/* Mock exam cards */
.dashboard-page .mock-exam-card {
    background: rgba(18,12,6,0.75);
    border: 1px solid rgba(255,255,255,0.07);
    border-left-width: 4px;
    border-radius: 6px;
    padding: 16px 20px;
    margin-bottom: 12px;
}
.dashboard-page .mock-exam-card-head {
    font-size: 14px;
    font-weight: 600;
    color: var(--ui-text-primary);
    margin-bottom: 6px;
}
.dashboard-page .mock-exam-card-sub {
    font-size: 12px;
    color: var(--ui-text-muted);
    margin-bottom: 12px;
    line-height: 1.55;
}
.dashboard-page .mock-exam-card-meta {
    font-family: var(--font-terminal), monospace;
    font-size: 13px;
    line-height: 1.55;
    color: var(--ui-text-secondary);
    margin-top: 10px;
}

/* Domain exam grid */
.dashboard-page .domain-exam-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

/* Mission signals drill-down panel */
.mission-signals-panel {
    margin-top: 8px;
    padding: 10px 14px;
    background: rgba(0,0,0,0.30);
    border-radius: 4px;
    border: 1px solid rgba(255,255,255,0.05);
}
.signal-metric {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}
.signal-metric:last-child { border-bottom: none; }
.signal-metric-label {
    font-family: var(--font-terminal), monospace;
    font-size: 11px;
    color: var(--ui-text-muted);
}
.signal-metric-value {
    font-family: var(--font-terminal), monospace;
    font-size: 11px;
    color: #e6c068;
}

/* ================================================================
   LIGHT THEME OVERRIDES (warm parchment)
   ================================================================ */
:root[data-theme="light"] .dashboard-page {
    background: #ede0c8 !important;
    color: #1a1208;
}
:root[data-theme="light"] .dashboard-page .grid-overlay {
    background-image:
        linear-gradient(rgba(100,68,28,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(100,68,28,0.07) 1px, transparent 1px);
    background-size: 32px 32px;
}

/* Stats panel */
:root[data-theme="light"] .dashboard-page .stats-panel {
    background: rgba(255,250,238,0.95);
    border-color: rgba(180,128,52,0.28);
    box-shadow:
        0 2px 14px rgba(0,0,0,0.10),
        inset 0 1px 0 rgba(255,255,255,0.85);
}
:root[data-theme="light"] .dashboard-page .stats-panel h2 {
    color: #8a5c18;
}
:root[data-theme="light"] .dashboard-page .panel-header {
    border-bottom-color: rgba(180,128,52,0.22);
}

/* Metric cards */
:root[data-theme="light"] .dashboard-page .metric-card {
    background: rgba(255,255,255,0.65);
    border-color: rgba(180,128,52,0.16);
    border-top-color: rgba(180,128,52,0.16);
}
:root[data-theme="light"] .dashboard-page .metric-card:hover {
    border-top-color: rgba(180,128,52,0.45);
}
:root[data-theme="light"] .dashboard-page .metric-card.active-glow {
    border-top-color: rgba(180,128,52,0.55) !important;
}
:root[data-theme="light"] .dashboard-page .metric-card .label { color: #7a6040; }
:root[data-theme="light"] .dashboard-page .metric-card .value { color: #1a1208; }
:root[data-theme="light"] .dashboard-page .text-amber { color: #9a5c10 !important; }
:root[data-theme="light"] .dashboard-page .text-green { color: #2d6820 !important; }
:root[data-theme="light"] .dashboard-page .text-red   { color: #a82e18 !important; }

/* Arc cards base */
:root[data-theme="light"] .dashboard-page .chapter-card {
    border-color: rgba(180,128,52,0.22);
    color: #1a1208;
}
:root[data-theme="light"] .dashboard-page .chapter-card:hover {
    border-color: rgba(180,128,52,0.42);
    box-shadow: 0 3px 14px rgba(0,0,0,0.12);
}
:root[data-theme="light"] .dashboard-page .chapter-card .badge {
    background:
        linear-gradient(135deg,
            rgba(245,222,168,0.92) 0%,
            rgba(220,182,112,0.85) 50%,
            rgba(238,210,150,0.90) 100%),
        #f0dcaa;
    border-color: rgba(140,92,28,0.42);
    color: #5a3408;
    text-shadow: 0 1px 0 rgba(255,255,255,0.55);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.85),
        inset 0 -1px 0 rgba(140,92,28,0.25),
        inset 1px 0 0 rgba(255,255,255,0.50),
        inset -1px 0 0 rgba(140,92,28,0.18),
        0 2px 5px rgba(0,0,0,0.10);
}
:root[data-theme="light"] .dashboard-page .texture-sand .badge,
:root[data-theme="light"] .dashboard-page .texture-metal .badge {
    background:
        linear-gradient(135deg,
            rgba(232,205,140,0.95) 0%,
            rgba(200,160,90,0.88) 50%,
            rgba(225,195,128,0.92) 100%),
        #e8cd8c;
    border-color: rgba(110,72,20,0.48);
    color: #4a2808;
}
:root[data-theme="light"] .dashboard-page .chapter-card .chapter-info h4 { color: #1a1208; }
:root[data-theme="light"] .dashboard-page .chapter-card .chapter-info p  { color: #6a5030; }
:root[data-theme="light"] .dashboard-page .chapter-card.active-node {
    border-left-color: #9a5c10 !important;
    box-shadow: -5px 0 16px rgba(154,92,16,0.20) !important;
}

/* Light-mode textures (brightened) */
:root[data-theme="light"] .dashboard-page .texture-sand {
    background:
        linear-gradient(135deg, rgba(222,196,148,0.80) 0%, rgba(200,168,108,0.70) 100%),
        #d8c898;
}
:root[data-theme="light"] .dashboard-page .texture-wood {
    background:
        linear-gradient(135deg, rgba(165,100,42,0.55) 0%, rgba(120,70,24,0.45) 100%),
        #c09858;
}
:root[data-theme="light"] .dashboard-page .texture-metal {
    background:
        linear-gradient(135deg, rgba(200,200,212,0.70) 0%, rgba(155,155,170,0.58) 100%),
        #c8c8d2;
}
:root[data-theme="light"] .dashboard-page .texture-carbon {
    background:
        repeating-linear-gradient(
            45deg,
            rgba(0,0,0,0.05) 0px,
            rgba(0,0,0,0.05) 1px,
            transparent 1px,
            transparent 9px
        ),
        #b8b8be;
}
:root[data-theme="light"] .dashboard-page .texture-linux {
    background:
        linear-gradient(135deg, rgba(55,182,78,0.40) 0%, rgba(28,115,48,0.28) 100%),
        #b8d8b8;
}
:root[data-theme="light"] .dashboard-page .texture-security {
    background:
        linear-gradient(135deg, rgba(205,78,55,0.38) 0%, rgba(155,42,28,0.28) 100%),
        #d8b8b0;
}
:root[data-theme="light"] .dashboard-page .texture-kali {
    background:
        linear-gradient(135deg, rgba(115,52,202,0.35) 0%, rgba(68,22,148,0.25) 100%),
        #c0b0d8;
}
:root[data-theme="light"] .dashboard-page .texture-auto {
    background:
        linear-gradient(135deg, rgba(52,148,228,0.35) 0%, rgba(22,88,178,0.25) 100%),
        #b0c8dc;
}
:root[data-theme="light"] .dashboard-page .texture-cloud {
    background:
        linear-gradient(135deg, rgba(72,185,228,0.38) 0%, rgba(38,130,192,0.28) 100%),
        #b0d0e0;
}
:root[data-theme="light"] .dashboard-page .texture-contracts {
    background:
        linear-gradient(135deg, rgba(228,182,72,0.50) 0%, rgba(175,132,38,0.38) 100%),
        #d8c888;
}

/* Section headers */
:root[data-theme="light"] .dashboard-page .section-title {
    color: #5a4028;
    border-bottom-color: rgba(140,92,28,0.18);
}
:root[data-theme="light"] .dashboard-page .group-progress { color: #7a6040; }

/* Roadmap line */
:root[data-theme="light"] .dashboard-page .roadmap-line {
    background: linear-gradient(
        to bottom,
        #b07020 0%,
        rgba(176,112,32,0.35) 60%,
        rgba(176,112,32,0.06) 100%
    );
    box-shadow:
        0 0 8px rgba(176,112,32,0.55),
        0 0 20px rgba(176,112,32,0.18);
}

/* Exam section */
:root[data-theme="light"] .dashboard-page .mock-exam-card {
    background: rgba(255,250,238,0.88);
    border-color: rgba(180,128,52,0.22);
}
:root[data-theme="light"] .dashboard-page .mock-exam-card-head { color: #1a1208; }
:root[data-theme="light"] .dashboard-page .mock-exam-card-sub  { color: #5a4028; }
:root[data-theme="light"] .dashboard-page .mock-exam-card-meta { color: #4a3018; }
:root[data-theme="light"] .dashboard-page .btn-start-exam {
    background: linear-gradient(160deg, #c08830 0%, #a06820 100%);
    border-color: rgba(140,88,16,0.55);
    color: #fff8e8;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.18);
}
:root[data-theme="light"] .dashboard-page .btn-start-exam:hover {
    background: linear-gradient(160deg, #d09838 0%, #b07828 100%);
    box-shadow: 0 4px 14px rgba(0,0,0,0.20), inset 0 1px 0 rgba(255,255,255,0.22);
}

/* Mission signals */
:root[data-theme="light"] .mission-signals-panel {
    background: rgba(255,255,255,0.60);
    border-color: rgba(180,128,52,0.18);
}
:root[data-theme="light"] .signal-metric-label { color: #6a5030; }
:root[data-theme="light"] .signal-metric-value { color: #9a5c10; }

/* Node glow in light mode */
:root[data-theme="light"] .dashboard-page .node-glow-dot {
    background: #1a50d0;
    box-shadow: 0 0 7px #1a50d0, 0 0 16px rgba(26,80,208,0.40);
}

/* ================================================================
   DASHBOARD CHUNK 1: left-rail pivot tiles
   ================================================================
   Each major section (stats, study plan, exam) is now a horizontal
   flex container with a textured 80x80 pivot tile on the left and
   the actual section content on the right. The tile carries an
   iconic glyph (graduation cap, books, compass) and reads as a
   blueprint legend entry. Connector traces between pivot and
   content will land in chunk 2.
   ================================================================ */
.dashboard-page .dashboard-section {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 28px;
}
.dashboard-page .dashboard-section > .section-body {
    flex: 1;
    min-width: 0;
}

.dashboard-page .pivot-tile {
    flex-shrink: 0;
    width: 80px;
    height: 80px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    line-height: 1;
    color: var(--color-amber);
    text-shadow: 0 2px 6px rgba(0,0,0,0.6);
    background:
        linear-gradient(135deg,
            rgba(145,82,32,0.42) 0%,
            rgba(88,48,16,0.32) 100%),
        #1c1006;
    border: 1px solid rgba(230,192,104,0.30);
    box-shadow:
        0 6px 16px rgba(0,0,0,0.55),
        inset 0 1px 0 rgba(255,255,255,0.10),
        inset 0 -1px 0 rgba(0,0,0,0.35);
    user-select: none;
}

/* Stats pivot: amber-warm parchment chip */
.dashboard-page .pivot-stats {
    background:
        linear-gradient(135deg,
            rgba(230,192,104,0.20) 0%,
            rgba(120,68,18,0.22) 100%),
        #1c1006;
}

/* Study plan pivot: neutral walnut (uses base) */

/* Exam pivot: cooler steel-blue chip */
.dashboard-page .pivot-exam {
    background:
        linear-gradient(135deg,
            rgba(80,140,200,0.16) 0%,
            rgba(40,80,120,0.22) 100%),
        #0c1018;
    border-color: rgba(140,180,220,0.30);
    color: #b8d0e8;
}

/* Light theme pivot tiles */
:root[data-theme="light"] .dashboard-page .pivot-tile {
    background:
        linear-gradient(135deg, rgba(222,196,148,0.85) 0%, rgba(200,168,108,0.75) 100%),
        #e8d8b0;
    border-color: rgba(140,92,28,0.40);
    color: #6a4018;
    text-shadow: 0 1px 2px rgba(255,255,255,0.5);
    box-shadow:
        0 4px 12px rgba(0,0,0,0.15),
        inset 0 1px 0 rgba(255,255,255,0.7);
}
:root[data-theme="light"] .dashboard-page .pivot-stats {
    background:
        linear-gradient(135deg, rgba(245,222,168,0.92) 0%, rgba(220,182,112,0.80) 100%),
        #f0dcaa;
}
:root[data-theme="light"] .dashboard-page .pivot-exam {
    background:
        linear-gradient(135deg, rgba(190,210,232,0.90) 0%, rgba(150,180,212,0.75) 100%),
        #c8d8e8;
    border-color: rgba(80,110,150,0.42);
    color: #2a4a78;
}

/* ================================================================
   DASHBOARD CHUNK 2: connector traces
   ================================================================
   Each section's pivot-tile ties into its content via a short
   horizontal trace that bleeds from the tile, across the 20px gap,
   into the section-body's left edge, terminating in a small glow
   dot. Pure CSS via ::before (line) + ::after (terminus dot) on
   the section-body. Per-variant colors match the chunk 1 pivot
   tile palette (stats=amber, studyplan=terracotta, exam=steel).
   ================================================================ */
.dashboard-page .dashboard-section > .section-body {
    position: relative;
}

/* The trace: a thin gradient line emerging from the tile side */
.dashboard-page .dashboard-section > .section-body::before {
    content: '';
    position: absolute;
    left: -22px;
    top: 38px;
    width: 28px;
    height: 2px;
    background: linear-gradient(90deg,
        rgba(230,192,104,0.55) 0%,
        rgba(230,192,104,0.22) 75%,
        rgba(230,192,104,0) 100%);
    pointer-events: none;
}

/* The terminus: a small glowing node where the trace meets content */
.dashboard-page .dashboard-section > .section-body::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 36px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-amber);
    box-shadow: 0 0 7px rgba(230,192,104,0.60);
    pointer-events: none;
}

/* Per-variant trace + terminus colors (dark theme) */
.dashboard-page .dashboard-section-stats > .section-body::before {
    background: linear-gradient(90deg,
        rgba(230,192,104,0.65) 0%,
        rgba(230,192,104,0.22) 75%,
        rgba(230,192,104,0) 100%);
}
.dashboard-page .dashboard-section-stats > .section-body::after {
    background: var(--color-amber);
    box-shadow: 0 0 7px rgba(230,192,104,0.60);
}

.dashboard-page .dashboard-section-studyplan > .section-body::before {
    background: linear-gradient(90deg,
        rgba(199,91,57,0.62) 0%,
        rgba(199,91,57,0.22) 75%,
        rgba(199,91,57,0) 100%);
}
.dashboard-page .dashboard-section-studyplan > .section-body::after {
    background: var(--color-terracotta);
    box-shadow: 0 0 7px rgba(199,91,57,0.55);
}

.dashboard-page .dashboard-section-exam > .section-body::before {
    background: linear-gradient(90deg,
        rgba(140,180,220,0.62) 0%,
        rgba(140,180,220,0.22) 75%,
        rgba(140,180,220,0) 100%);
}
.dashboard-page .dashboard-section-exam > .section-body::after {
    background: #7daacc;
    box-shadow: 0 0 7px rgba(140,180,220,0.55);
}

/* Light theme overrides: deeper saturated lines + dots on cream */
:root[data-theme="light"] .dashboard-page .dashboard-section-stats > .section-body::before {
    background: linear-gradient(90deg,
        rgba(140,92,28,0.55) 0%,
        rgba(140,92,28,0.20) 75%,
        rgba(140,92,28,0) 100%);
}
:root[data-theme="light"] .dashboard-page .dashboard-section-stats > .section-body::after {
    background: #8a5018;
    box-shadow: 0 0 6px rgba(140,92,28,0.40);
}

:root[data-theme="light"] .dashboard-page .dashboard-section-studyplan > .section-body::before {
    background: linear-gradient(90deg,
        rgba(160,72,40,0.55) 0%,
        rgba(160,72,40,0.20) 75%,
        rgba(160,72,40,0) 100%);
}
:root[data-theme="light"] .dashboard-page .dashboard-section-studyplan > .section-body::after {
    background: #a0432c;
    box-shadow: 0 0 6px rgba(160,72,40,0.40);
}

:root[data-theme="light"] .dashboard-page .dashboard-section-exam > .section-body::before {
    background: linear-gradient(90deg,
        rgba(60,90,130,0.55) 0%,
        rgba(60,90,130,0.20) 75%,
        rgba(60,90,130,0) 100%);
}
:root[data-theme="light"] .dashboard-page .dashboard-section-exam > .section-body::after {
    background: #3a5a82;
    box-shadow: 0 0 6px rgba(60,90,130,0.40);
}

/* ================================================================
   DASHBOARD CHUNK 3: decorative globe on the active arc card
   ================================================================
   The card the student is currently working on (rendered with
   .active-node) gets a small floating globe tucked into its top-
   right corner. The globe uses the 🌐 glyph through a ::after
   pseudo, sits above the texture layer via z-index, and pulses
   subtly so it reads as a "you are here on the map" marker.
   Pairs visually with the square metallic badge on the same card.
   ================================================================ */
.dashboard-page .chapter-card.active-node::after {
    content: '🌐';
    position: absolute;
    top: 5px;
    right: 9px;
    font-size: 13px;
    line-height: 1;
    opacity: 0.78;
    filter: drop-shadow(0 0 6px rgba(230,192,104,0.55));
    pointer-events: none;
    z-index: 2;
    animation: globeFloat 6s ease-in-out infinite;
}
@keyframes globeFloat {
    0%, 100% { transform: translateY(0);    opacity: 0.78; }
    50%      { transform: translateY(-1px); opacity: 0.92; }
}

/* Light theme: dial the halo to a warmer brown so it reads on cream */
:root[data-theme="light"] .dashboard-page .chapter-card.active-node::after {
    opacity: 0.82;
    filter: drop-shadow(0 0 5px rgba(140,92,28,0.45));
}

/* ================================================================
   DASHBOARD CHUNK 4: hover polish, mobile collapse, globe variants,
                      cert-section icon chip
   ================================================================
   Four follow-up tweaks bundled together because they all
   reinforce the same structural reading of the dashboard:
     1. .pivot-tile gets a hover lift + warm border accent
     2. <= 640px viewport: tile collapses from 80px to 56px and
        the trace + terminus reposition to the smaller tile center
     3. The active-arc globe swaps glyph by data-arc range so the
        marker matches the track (CCNA 🌐, RHCSA 🐧, Sec 🛡️, etc.)
     4. .cert-section-icon turns the inline emoji on cert headers
        into a small square chip styled like the chapter badge,
        with its frame colored by --cert-color set inline on the h3
   ================================================================ */

/* 1. Pivot tile hover */
.dashboard-page .pivot-tile {
    transition: transform 0.22s ease,
                border-color 0.22s ease,
                box-shadow 0.22s ease;
}
.dashboard-page .pivot-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(230,192,104,0.55);
    box-shadow:
        0 9px 22px rgba(0,0,0,0.62),
        inset 0 1px 0 rgba(255,255,255,0.14),
        inset 0 -1px 0 rgba(0,0,0,0.40);
}
.dashboard-page .pivot-stats:hover {
    border-color: rgba(230,192,104,0.65);
}
.dashboard-page .pivot-studyplan:hover {
    border-color: rgba(199,91,57,0.55);
    box-shadow:
        0 9px 22px rgba(0,0,0,0.62),
        0 0 16px rgba(199,91,57,0.18),
        inset 0 1px 0 rgba(255,255,255,0.14),
        inset 0 -1px 0 rgba(0,0,0,0.40);
}
.dashboard-page .pivot-exam:hover {
    border-color: rgba(140,180,220,0.55);
    box-shadow:
        0 9px 22px rgba(0,0,0,0.62),
        0 0 16px rgba(80,140,200,0.20),
        inset 0 1px 0 rgba(255,255,255,0.14),
        inset 0 -1px 0 rgba(0,0,0,0.40);
}
:root[data-theme="light"] .dashboard-page .pivot-tile:hover {
    border-color: rgba(140,92,28,0.65);
    box-shadow:
        0 6px 18px rgba(0,0,0,0.18),
        inset 0 1px 0 rgba(255,255,255,0.70);
}
:root[data-theme="light"] .dashboard-page .pivot-exam:hover {
    border-color: rgba(60,90,130,0.62);
    box-shadow:
        0 6px 18px rgba(0,0,0,0.18),
        0 0 14px rgba(60,90,130,0.15),
        inset 0 1px 0 rgba(255,255,255,0.70);
}

/* 2. Mobile collapse (<= 640px): smaller tile + repositioned trace */
@media (max-width: 640px) {
    .dashboard-page .dashboard-section {
        gap: 14px;
    }
    .dashboard-page .pivot-tile {
        width: 56px;
        height: 56px;
        font-size: 28px;
        border-radius: 8px;
    }
    .dashboard-page .dashboard-section > .section-body::before {
        top: 27px;
        left: -16px;
        width: 22px;
    }
    .dashboard-page .dashboard-section > .section-body::after {
        top: 25px;
        left: 2px;
    }
}

/* 3. Globe glyph variants per arc track on the active card */
.dashboard-page .chapter-card.active-node[data-arc="11"]::after { content: '🐧'; }
.dashboard-page .chapter-card.active-node[data-arc="12"]::after,
.dashboard-page .chapter-card.active-node[data-arc="13"]::after,
.dashboard-page .chapter-card.active-node[data-arc="14"]::after,
.dashboard-page .chapter-card.active-node[data-arc="27"]::after,
.dashboard-page .chapter-card.active-node[data-arc="28"]::after { content: '🛡️'; }
.dashboard-page .chapter-card.active-node[data-arc="15"]::after { content: '🐉'; }
.dashboard-page .chapter-card.active-node[data-arc="16"]::after { content: '🗡️'; }
.dashboard-page .chapter-card.active-node[data-arc="17"]::after,
.dashboard-page .chapter-card.active-node[data-arc="18"]::after,
.dashboard-page .chapter-card.active-node[data-arc="19"]::after { content: '🐍'; }
.dashboard-page .chapter-card.active-node[data-arc="20"]::after { content: '☸️'; }
.dashboard-page .chapter-card.active-node[data-arc="21"]::after { content: '🪟'; }
.dashboard-page .chapter-card.active-node[data-arc="22"]::after,
.dashboard-page .chapter-card.active-node[data-arc="23"]::after,
.dashboard-page .chapter-card.active-node[data-arc="24"]::after { content: '📜'; }
.dashboard-page .chapter-card.active-node[data-arc="25"]::after,
.dashboard-page .chapter-card.active-node[data-arc="26"]::after { content: '☁️'; }

/* 4. Cert-section icon chip — inline emoji wrapped in a metallic square */
.dashboard-page .cert-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 5px;
    font-size: 14px;
    line-height: 1;
    background:
        linear-gradient(135deg,
            rgba(60,40,16,0.78) 0%,
            rgba(28,16,6,0.92) 50%,
            rgba(48,30,12,0.78) 100%),
        #1c1006;
    border: 1px solid var(--cert-color, currentColor);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -1px 0 rgba(0,0,0,0.45),
        0 2px 4px rgba(0,0,0,0.35);
    vertical-align: middle;
}
:root[data-theme="light"] .dashboard-page .cert-section-icon {
    background:
        linear-gradient(135deg,
            rgba(245,222,168,0.92) 0%,
            rgba(220,182,112,0.85) 50%,
            rgba(238,210,150,0.90) 100%),
        #f0dcaa;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.70),
        inset 0 -1px 0 rgba(140,92,28,0.20),
        0 2px 4px rgba(0,0,0,0.10);
}