/* ============================================================
   PYTHON COACH PLAYGROUND — overrides on top of v2-challenge-layout.css
   /v2/playground.html  |  body[data-v2-playground]

   v2-challenge-layout.css provides: body flex column, #ch-topbar,
   #ch-viewport grid, .ch-pane show/hide, .ch-editor-header,
   .ch-output-header, #ch-run-btn, #ch-clear-btn, #ch-output-content,
   .v2-cm-wrap, .ch-resize-handle, #ch-bottomnav, .ch-tab-btn,
   dark/light syntax colours.

   This file adds only what is different or new for the Playground.
   ============================================================ */

/* ── PAGE SHELL ──────────────────────────────────────────────── */
body[data-v2-playground] {
    height: 100dvh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── TOPBAR: LOGO (replaces back button + avatar) ────────────── */
.pg-topbar-logo {
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    flex-shrink: 0;
}

.pg-topbar-logo-icon { font-size: 1.25rem; line-height: 1; }

.pg-topbar-logo-text {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--primary);
    letter-spacing: -0.2px;
    white-space: nowrap;
}

/* Title: de-emphasise — "Playground" is not a lesson name */
body[data-v2-playground] #ch-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
    border-left: 2px solid var(--border);
    padding-left: 12px;
}

/* Hide title on very narrow phones */
@media (max-width: 600px) {
    body[data-v2-playground] #ch-title { display: none; }
}

/* ── EDITOR HEADER CONTROL GROUPS ───────────────────────────── */
/*
 * Layout: [main.py]                    [examples | run Ctrl+Enter]
 * margin-left:auto on .pg-header-controls pushes all controls right.
 * Two sub-groups (.pg-header-examples, .pg-header-run) separated by
 * a visual gap so the relationship between Run and its shortcut is clear.
 */
body[data-v2-playground] .ch-editor-header {
    gap: 12px;
}

.pg-header-controls {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.pg-header-examples {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-right: 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}

.pg-header-run {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── EXAMPLE SELECTOR ────────────────────────────────────────── */
.pg-example-select {
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-xs, 6px);
    padding: 4px 8px;
    cursor: pointer;
    transition: border-color 0.15s;
    max-width: 160px;
}

.pg-example-select:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.55);
}

/* ── RESET — ghost button on the gradient editor header, same
   treatment as #ch-clear-btn on the output header. Copy code / Share
   link now live in the right panel's "Classroom tools" cards below,
   not here — Run stays the one dominant action in this toolbar. ── */
.pg-reset-btn {
    font-family: var(--font);
    font-size: 0.72rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-xs, 6px);
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
}

.pg-reset-btn:hover {
    color: rgba(255, 255, 255, 0.95);
    border-color: rgba(255, 255, 255, 0.6);
}

/* ── SHORTCUT HINT ───────────────────────────────────────────── */
.pg-shortcut-hint {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
    white-space: nowrap;
    flex-shrink: 0;
}

@media (max-width: 500px) {
    .pg-shortcut-hint        { display: none; }
    .pg-header-examples      { display: none; }
    .pg-header-controls      { gap: 0; }
    body[data-v2-playground] .ch-editor-header { gap: 0; }
}

/* ── OUTPUT LINES (playground-specific pre styles) ───────────── */
.pg-output-placeholder {
    color: var(--text-muted);
    font-size: 0.875rem;
    font-style: italic;
    padding: 4px 0;
}

.pg-output-running {
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-style: italic;
}

.pg-output-pre {
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.65;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
}

/* Amber for errors — #B35C00 on white = 4.6:1 WCAG AA ✓ */
.pg-output-pre--error { color: #B35C00; }

/* Runtime loading status — shown in output pane while Pyodide prepares */
.pg-runtime-status {
    color: var(--text-muted);
    font-size: 0.875rem;
    font-style: italic;
    padding: 4px 0;
}

/* Runtime load failure — amber, same as error output.
   Light: #B35C00 on #FFFFFF = 4.6:1 WCAG AA ✓
   Dark:  #EEC252 on #0F172A = 9.0:1 WCAG AA ✓ */
.pg-runtime-error {
    color: #B35C00;
    font-size: 0.875rem;
    padding: 4px 0;
}
[data-theme="dark"] .pg-runtime-error { color: #EEC252; }

/* Share-link decode failure — same amber treatment/contrast as runtime
   errors above (identical colours, same ratios, reused not re-verified). */
.pg-share-warning {
    color: #B35C00;
    font-size: 0.875rem;
    padding: 4px 0;
}
[data-theme="dark"] .pg-share-warning { color: #EEC252; }

/* Dark mode: #EEC252 on #0F172A = 9.0:1 WCAG AA ✓ */
[data-theme="dark"] .pg-output-pre--error { color: #EEC252; }

/* ── INPUT WIDGET — uses challenge .ch-input-* classes already.
   Only extra rule: wrapping pre container for inline display.    ── */
.pg-input-line {
    white-space: pre-wrap;
    word-break: break-word;
}

/* ── RIGHT PANE: PLAYGROUND INFO ─────────────────────────────── */
/* pane-playground reuses #ch-objective-scroll + .ch-obj-* classes.
   Only new elements below need Playground-specific styling.       */

/* ── CLASSROOM TOOLS — Copy code / Share link cards ──────────────
 * Colours reuse this file's own .pg-avatar-item pattern (text/border on
 * surface, border on hover) rather than --primary or --text-muted:
 *   --text on --surface   = 15.91:1 (light) / 11.87:1 (dark)
 *   --text on --border (hover bg) = 13.53:1 (light) / 9.73:1 (dark)
 *   --text-secondary on --surface (description) = 6.44:1 (light) / 5.71:1 (dark)
 * all comfortably WCAG AA (4.5:1 text minimum). --primary text/border on
 * --surface was tried first and rejected: only 2.78:1 in light mode,
 * below even the 3:1 non-text minimum -- not used here.
 * ──────────────────────────────────────────────────────────────── */
.pg-classroom-tools-heading {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-top: 8px;
    margin-bottom: 10px;
}

.pg-classroom-tools {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.pg-tool-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm, 6px);
}

.pg-tool-card-btn {
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text);
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xs, 6px);
    padding: 6px 14px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.pg-tool-card-btn:hover {
    background: var(--border);
    border-color: var(--border-dark);
}

.pg-tool-card-desc {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-secondary);
    margin: 0;
}

/* Secondary link to /turtle — same rule as turtle.css's .tt-secondary-link
   (which links back to /playground), duplicated here rather than shared
   since these two stylesheets never share rules. Same contrast approach
   as .pg-avatar-item (text/border on surface): --text-secondary on
   --surface = 6.44:1 (light) / 5.71:1 (dark), comfortably WCAG AA. */
.pg-secondary-link {
    display: block;
    text-align: center;
    padding: 10px 14px;
    margin-bottom: 10px;
    color: var(--text-secondary);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm, 6px);
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.pg-secondary-link:hover {
    background: var(--border);
    border-color: var(--border-dark);
}

.pg-info-cta {
    display: block;
    padding: 13px 18px;
    background: var(--primary);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    border-radius: var(--radius-sm, 6px);
    transition: opacity 0.15s;
    margin-top: 4px;
}

.pg-info-cta:hover { opacity: 0.88; }

/* ── TEXTAREA FALLBACK (when CodeMirror fails to load) ──────── */
/*
 * CodeMirror.fromTextArea() hides the textarea with display:none when it
 * successfully replaces it. This rule only fires if CM is absent/failed,
 * preventing a bare resizable textarea from appearing.
 */
#pg-code-area {
    resize: none;
    width: 100%;
    min-height: 0;
    flex: 1;
    font-family: var(--mono);
    font-size: 14px;
    padding: 12px;
    background: var(--bg);
    color: var(--text);
    border: none;
    outline: none;
}

/* ── THEME CONSISTENCY: editor pane follows var(--bg) ───────── */
/*
 * v2-challenge-layout.css sets #pane-editor { background: var(--hint-code-bg) }
 * which is #1A1A2E (always-dark) — correct for the challenge page where the editor
 * must always look like a dark terminal.
 *
 * In the Playground, both editor and output must follow the active theme
 * so they look visually consistent with each other. In light mode both are
 * white; in dark mode both are the dark page background.
 *
 * We also force the CodeMirror background here to be certain — the
 * v2-challenge-layout rule (.v2-cm-wrap .CodeMirror { background: var(--bg) !important })
 * is global but the explicit scoped rule below provides a stronger anchor.
 */
body[data-v2-playground] #pane-editor {
    background: var(--bg);
}

body[data-v2-playground] .v2-cm-wrap .CodeMirror,
body[data-v2-playground] .v2-cm-wrap .CodeMirror-gutters {
    background: var(--bg) !important;
}

/* ── DESKTOP LAYOUT ADJUSTMENTS ─────────────────────────────── */
@media (min-width: 1024px) {

    /* Desktop tabs hidden — single right pane, no tab switching needed */
    body[data-v2-playground] #ch-desktop-tabs { display: none; }

    /* Right pane: no padding-bottom reserved for desktop tabs */
    body[data-v2-playground] #pane-playground { padding-bottom: 0; }

    /* Right pane maps to the full right column */
    body[data-v2-playground] #pane-playground {
        grid-column: 2;
        grid-row: 1 / -1;
        overflow: hidden;
    }

    /* Ensure all three left-column panes display on desktop */
    body[data-v2-playground] #pane-editor,
    body[data-v2-playground] #pane-output,
    body[data-v2-playground] #pane-playground {
        display: flex !important;
    }

    /* Hide mobile bottom nav on desktop */
    body[data-v2-playground] #ch-bottomnav { display: none; }
}

/* ── EXAMPLE DROPDOWN OPTION CONTRAST ───────────────────────── */
/*
 * Native <option> elements inherit OS defaults and can be unreadable
 * when the page theme differs from the system theme.  Setting explicit
 * background/color ensures options are readable in both light and dark mode
 * regardless of OS dark/light preference.
 * Contrast: #1C1C1C on #FFFFFF = 17.1:1 (light); #E2E8F0 on #1E293B = 10.9:1 (dark).
 */
.pg-example-select option {
    background: var(--bg);
    color: var(--text);
}

/* ── SETTINGS MENU (snake avatar, top-right of topbar) ──────── */
/*
 * Minimal dropdown — no auth required.
 * Replicates the .hub-avatar-wrap/.hub-avatar-btn/.hub-avatar-menu
 * pattern from auth.css without importing that entire file.
 *
 * Positioning: the wrap is the last flex child of #ch-topbar.
 * margin-left: auto on the wrap pushes it to the far right, exactly
 * like the existing challenge-page #ch-topbar #pc-avatar-wrap rule.
 */
.pg-avatar-wrap {
    margin-left: auto;
    position: relative;
    flex-shrink: 0;
}

.pg-avatar-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--surface);
    border: 2px solid var(--border);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background 0.15s, border-color 0.15s;
}

.pg-avatar-btn:hover  { background: var(--border); border-color: var(--border-dark); }
.pg-avatar-btn:active { background: var(--border-dark); }

/* Open state: highlight border so it's clear the menu is active */
.pg-avatar-btn[aria-expanded="true"] {
    background: var(--border);
    border-color: var(--primary);
}

.pg-avatar-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 220px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    padding: 8px;
    z-index: 300;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Hidden via [hidden] attribute; JS toggles it */
.pg-avatar-menu[hidden] { display: none; }

/* Prevent overflow at narrow widths */
@media (max-width: 420px) {
    .pg-avatar-menu {
        width: calc(100vw - 32px);
        right: -8px;
    }
}

/*
 * Each menu item — button or anchor.
 * Contrast: #1C1C1C on #F7F7F7 = 13.9:1 (light); #E2E8F0 on #1E293B = 10.9:1 (dark).
 */
.pg-avatar-item {
    display: block;
    width: 100%;
    padding: 10px 14px;
    background: var(--surface);
    color: var(--text);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xs);
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    line-height: 1.3;
}

.pg-avatar-item:hover  { background: var(--border); border-color: var(--border-dark); }
.pg-avatar-item:active { background: var(--border-dark); }

/* Active theme item — blue border to show current selection */
.pg-avatar-item.is-active {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg);
}