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

   v2-challenge-layout.css provides: body flex column, #ch-topbar,
   #ch-viewport (base mobile styles), .ch-pane show/hide, .ch-editor-header,
   .ch-output-header, #ch-run-btn, #ch-clear-btn, #ch-output-content,
   .v2-cm-wrap, #ch-bottomnav, .ch-tab-btn, dark/light syntax colours.
   Note: this page does NOT use .ch-resize-handle -- see DESKTOP LAYOUT
   ADJUSTMENTS below, which replaces the base layout's editor/output grid
   ROWS entirely with a canvas-first 3-column grid on desktop instead.

   Structurally this file deliberately mirrors v2/css/playground.css --
   same topbar logo, avatar menu, tool cards, info CTA, reset button,
   example select and shortcut hint classes/rules -- duplicated here rather
   than shared, since the two pages are loaded independently and never
   share a stylesheet (playground.css is never touched by this file).
   Turtle-specific additions: canvas-first desktop grid, canvas pane
   sizing, grid/speed controls, help modal, and the secondary "Try the
   Python Playground" link.
   ============================================================ */

/* ── PAGE SHELL ──────────────────────────────────────────────── */
body[data-v2-turtle] {
    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 — "Turtle Playground" is not a lesson name */
body[data-v2-turtle] #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-turtle] #ch-title { display: none; }
}

/* ── VISUALLY-HIDDEN LABEL ───────────────────────────────────────
   .sr-only is used on the "Load example" <label> (kept in the markup for
   a real programmatic label/for-id association, which is better a11y
   than aria-label alone) but is not defined ANYWHERE in this codebase's
   CSS -- confirmed by searching every v2/css/*.html and *.css file.
   playground.html uses the same class on the same kind of label and has
   the same gap; its wide single-pane toolbar just has enough spare room
   that the plain, unstyled label text never visibly wraps there. In
   Turtle's much narrower editor column it did wrap, breaking the
   toolbar. Defining the standard visually-hidden pattern here fixes it
   for this page only -- turtle.css is never loaded on /playground, so
   this cannot change that page's rendering. Not touching the shared
   v2-base.css, which is the only way to fix the same latent bug for
   /playground too (a separate, disclosed follow-up, not done here). ── */
.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;
}

/* ── EDITOR HEADER CONTROL GROUPS ─────────────────────────────
   height: auto (not the shared layout's fixed 56px) with a min-height
   floor is a deliberate safety net: if the controls below ever do wrap
   to a second line at some unusually narrow width, the header simply
   grows taller and pushes the CodeMirror editor down (ordinary flex-
   column flow within #pane-editor) instead of overflowing past a fixed
   height and visually overlapping the editor -- which is what caused
   the "Ctrl+Enter hint over the code" bug reported. */
body[data-v2-turtle] .ch-editor-header {
    height: auto;
    min-height: 56px;
    flex-shrink: 0;
    gap: 12px;
}

.pg-header-controls {
    margin-left: auto;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 6px;
    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);
}

/* ── 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: 130px;
}

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

/* ── RESET / HIDE-CODE / PAUSE — ghost buttons on the gradient
   editor header, same treatment as #ch-clear-btn on the output header. ── */
.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);
}

.pg-reset-btn[hidden] { display: none; }

/* Reserves #tt-pause-btn's layout space in both idle and running states
   (see setRunUiRunning() in turtle.js) -- visibility (not display:none)
   keeps its box in the flex row so the toolbar's total content width,
   and therefore its wrap point/height, never changes when Pause
   appears/disappears. visibility:hidden already makes it un-hit-testable,
   non-focusable, and excluded from the accessibility tree on its own;
   pointer-events:none is just belt-and-braces on top of that. */
.tt-pause-inactive {
    visibility: hidden;
    pointer-events: none;
}

/* ── RUNTIME / RUN STATUS TEXT ───────────────────────────────── */
.tt-status {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    white-space: nowrap;
    /* Fixed slot sized for the longest text used during an actual
       run/stop cycle ("Processing…") so switching between "Ready" and
       "Running…" (or any other in-cycle status) never changes the
       toolbar's content width. The much longer one-off init-failure
       message ("Python failed to load") is not part of that cycle --
       it only ever replaces "Preparing Python…" before any Run is even
       possible -- so it's allowed to exceed this slot rather than
       forcing a much wider, mostly-empty gap during normal use. */
    display: inline-block;
    min-width: 78px;
}

@media (max-width: 640px) {
    .tt-status { display: none; }
}

/* ── ACTIVE-LINE HIGHLIGHT (tracer playback) ─────────────────── */
.v2-cm-wrap .CodeMirror .tt-active-line {
    background: var(--active-line-bg, rgba(255, 217, 0, 0.18));
}
[data-theme="dark"] .v2-cm-wrap .CodeMirror .tt-active-line {
    background: rgba(255, 217, 0, 0.14);
}

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

/* Hide/Show code only make sense on the desktop 4-column grid (the
   bottom-nav tabs already switch between Editor/Canvas on mobile) --
   this breakpoint matches the grid's own @media (min-width: 1024px)
   activation exactly, not the more general 640px mobile-decluttering
   breakpoint above, so there's no gap where the button is visible but
   clicking it does nothing (or worse, leaves a stray "Show code" button
   visible after a resize with no way to actually toggle anything). */
@media (max-width: 1023px) {
    #tt-toggle-code-btn { display: none; }
    #tt-show-code-btn   { display: none; }
}

/* ── THEME CONSISTENCY: editor pane follows var(--bg) ───────── */
body[data-v2-turtle] #pane-editor {
    background: var(--bg);
}

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

/* "Show code" sits inside .tt-toolbar-left, right after the title, so
   it appears near the left edge of the toolbar -- close to where the
   collapsed editor/Hide-code control was. */
#tt-show-code-btn {
    margin-left: 12px;
}

/* ── CANVAS PANE HEADER CONTROLS — 3 fixed zones ─────────────────
   Run/Stop/Pause live here rather than the editor toolbar: the editor
   is only one of three desktop columns now (not a wide single pane like
   /playground's), and cramming examples+reset+hide-code+status+Run+
   Pause+shortcut into that narrow column pushed Run out of view. The
   canvas column is the widest of the three, so execution controls (the
   most important ones) get put where there's reliably room for them.

   Previously this was one flex row with only two anchors -- the title
   on the left, and a single .tt-canvas-controls block pushed flush
   right via margin-left:auto -- so ALL available slack collapsed into
   one gap between them. As the canvas column was dragged narrower or
   wider, that gap grew/shrank, which read as the toolbar's controls
   drifting/reflowing rather than holding a stable shape (the bug
   Adam reported). A 3-column CSS Grid instead gives left/centre/right
   each their own track: the two outer zones (title+Show code, and
   Grid+Speed) size to their own content and never move relative to the
   header's edges; only the flexible CENTRE track (status+Run+Pause)
   absorbs width changes, and its content stays centred within it -- so
   Run always sits dead-centre and Grid/Speed always sit flush right,
   at every canvas width the drag floor below allows. minmax(0, ...) on
   all three tracks (rather than plain max-content/1fr) lets them still
   shrink under the drag floor without forcing the grid itself to
   overflow -- see the container-query compact fallback further down. */
body[data-v2-turtle] .ch-output-header {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content);
    align-items: center;
    column-gap: 16px;
    height: auto;
    min-height: 56px;
    container-type: inline-size;
    container-name: tt-canvas-toolbar;
}

.tt-toolbar-left,
.tt-toolbar-center,
.tt-toolbar-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 6px;
    gap: 14px;
    min-width: 0; /* grid/flex items default to a content-based min-width, which would otherwise block these from ever shrinking within their track and force the header to overflow instead of wrapping */
}

.tt-toolbar-left   { justify-content: flex-start; }
.tt-toolbar-center { justify-content: center; }

/* border-left + padding-left reproduces the old inline divider bar's
   look at the same boundary (end of Run/Pause, start of Grid/Speed),
   without needing an extra DOM element inside a flex row now that the
   boundary is between two grid zones instead of two flex siblings. */
.tt-toolbar-right {
    justify-content: flex-end;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    padding-left: 14px;
}

/* #ch-run-btn's label swaps "Run" <-> "Stop" (setRunUiRunning() in
   turtle.js) -- different text widths otherwise reflowed everything
   after it by a few px on every start/stop. Scoped to this page only:
   #ch-run-btn's base styling in v2-challenge-layout.css is shared with
   /playground and other challenge pages, so this can't be changed there. */
body[data-v2-turtle] #ch-run-btn {
    min-width: 92px;
    justify-content: center;
}

.tt-grid-toggle,
.tt-speed-control {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    white-space: nowrap;
}

.tt-grid-toggle input[type="checkbox"] {
    accent-color: #fff;
    cursor: pointer;
}

.tt-speed-control input[type="range"] {
    width: 90px;
    accent-color: #fff;
    cursor: pointer;
}

.tt-speed-val {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.7);
    min-width: 42px;
    text-align: right;
}

@media (max-width: 640px) {
    .tt-speed-control { display: none; }
    .tt-speed-val { display: none; }
}

/* Compact fallback: below this the toolbar drops the "Speed" word but
   keeps the slider and its current-level readout (still usable, just
   unlabelled -- the range input keeps aria-label="Animation speed" for
   screen readers regardless), and never touches Run. Threshold sits
   below initColumnResizeHandle()'s 560px drag floor above -- normal
   dragging can't reach this at all; it only matters for things the
   floor can't cover, like heavy browser text-zoom inflating the
   toolbar's actual content width past its column width. */
@container tt-canvas-toolbar (max-width: 520px) {
    .tt-speed-label-text { display: none; }
}

/* ── CANVAS AREA ──────────────────────────────────────────────
   Fixed internal drawing resolution (800x600), scaled to fill the pane.

   #turtleCanvas is sized to 100%/100% of its wrapper (not max-width/
   max-height: 100%, which only shrinks the canvas down from its native
   800x600 and never grows it to fill a larger pane). object-fit: contain
   then scales the drawn bitmap to fill that full-size box while
   preserving the 4:3 aspect ratio, letterboxing only the axis that
   doesn't match -- so the canvas genuinely fills the pane rather than
   sitting small inside it. Centred both axes; see the DESKTOP LAYOUT
   ADJUSTMENTS section below for the canvas-first 3-column grid that
   gives this pane the full viewport height (not a fraction of it shared
   with the editor) in the first place.

   Deliberately NOT overriding #pane-output's background here --
   v2-challenge-layout.css sets #pane-output { background: var(--bg)
   !important; }, so the pane itself follows the site theme (light/dark)
   like ordinary UI chrome. The canvas ELEMENT's own background below is
   a static placeholder only, shown for the single frame before JS's
   first drawFrame() call paints over it with the real theme-aware
   default (see _defaultCanvasBg() in turtle.js: dark canvas in dark
   mode, light canvas in light mode, so a default-coloured pen from
   _defaultPenColor() always has contrast against it). */

#tt-canvas-wrap {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 12px;
    box-sizing: border-box;
}

#turtleCanvas {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #1e1e1e;
    border-radius: var(--radius-xs, 6px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

[data-theme="light"] #turtleCanvas {
    background: #ffffff;
}

#tt-coord-display {
    position: absolute;
    bottom: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.65);
    color: #7CFC90;
    padding: 4px 10px;
    border-radius: 4px;
    font-family: var(--mono);
    font-size: 0.72rem;
    pointer-events: none;
}

/* ── RIGHT PANE: TURTLE INFO ─────────────────────────────────── */
/* pane-turtle-info reuses #ch-objective-scroll + .ch-obj-* classes,
   same pattern as playground.css's #pane-playground.                */

/* ── CLASSROOM TOOLS — Copy code / Share link cards (identical
   contrast reasoning as playground.css: see that file for the ratios) */
.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: 20px;
}

.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 /playground — 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. */
.tt-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;
}

.tt-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; }

/* ── LESSON CTA ATTENTION SHIMMER ─────────────────────────────
   Scoped to #tt-lesson-cta (the ID, not the shared .pg-info-cta class)
   so this can never apply anywhere else -- only the main structured-
   lessons button in the info panel gets it. A soft diagonal light sweep,
   not a colour/glow pulse (which reads more like a notification badge)
   -- CSS-only, no JS, no analytics.

   Occasional, not constant: the keyframes spend the first ~6% of a 13s
   cycle sweeping the highlight across the button, then hold it parked
   off-screen (background-position never resets to 0, it just sits at
   150%) for the remaining ~12s until the next cycle. That's roughly one
   gentle shimmer every 13 seconds, comfortably inside the requested
   10-15s cadence, with long quiet stretches in between -- not flashy or
   advert-like. Text/link/Copy/Share are completely unaffected; this is
   an overlay pseudo-element, not a change to the button's own content
   or background. */
#tt-lesson-cta {
    position: relative;
    overflow: hidden;
}

#tt-lesson-cta::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, 0.35) 50%, transparent 60%);
    background-size: 250% 100%;
    background-position: -150% 0;
    pointer-events: none;
    animation: tt-cta-shimmer 13s ease-in-out infinite;
}

@keyframes tt-cta-shimmer {
    0%   { background-position: -150% 0; }
    6%   { background-position: 150% 0; }
    100% { background-position: 150% 0; }
}

/* Disable entirely for reduced-motion users -- the pseudo-element's own
   resting background-position (-150% 0, fully off the visible button)
   means turning the animation off leaves nothing visible at all, not
   just a paused mid-sweep frame. */
@media (prefers-reduced-motion: reduce) {
    #tt-lesson-cta::after {
        animation: none;
    }
}

/* ── TEXTAREA FALLBACK (when CodeMirror fails to load) ──────── */
#tt-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;
}

/* ── COLUMN RESIZE HANDLE ─────────────────────────────────────
   Hidden by default (mobile, and any width below the desktop grid) --
   #ch-viewport isn't a grid outside the @media block below, so a plain
   block-level div here would just show as a stray thin bar in normal
   document flow. Shown and given its own grid column only at
   ≥1024px alongside the rest of the desktop layout below. */
.tt-col-resize-handle {
    display: none;
    align-items: center;
    justify-content: center;
    cursor: col-resize;
    background: var(--border);
    user-select: none;
    touch-action: none;
}

.tt-col-resize-handle::after {
    content: '\22EE'; /* vertical ellipsis, rotated to read as a horizontal drag cue */
    display: block;
    font-size: 14px;
    line-height: 1;
    color: var(--text-muted);
    transform: rotate(90deg);
}

.tt-col-resize-handle:hover,
.tt-col-resize-handle:focus-visible {
    background: var(--border-dark);
    outline: none;
}

.tt-col-resize-handle:hover::after,
.tt-col-resize-handle:focus-visible::after {
    color: var(--primary);
}

.tt-col-resize-handle.is-dragging {
    background: var(--primary);
}

.tt-col-resize-handle.is-dragging::after {
    color: var(--text-inverse);
}

/* Collapsed (Hide code active) -- the handle is squeezed to ~0 width
   by the grid itself, but make it non-interactive too so it can't be
   dragged out of a state setEditorHidden() is managing. */
body[data-v2-turtle].tt-code-hidden .tt-col-resize-handle {
    pointer-events: none;
}

/* ── DESKTOP LAYOUT ADJUSTMENTS — CANVAS-FIRST 4-COLUMN GRID ──
   Turtle's first layout copied Playground's stacked editor-over-output
   grid (rows, not columns) with the canvas in the "output" row. That
   meant the canvas had to fit within both a limited WIDTH and a limited
   HEIGHT at once (competing with the editor for vertical space), which
   capped it well below what the pane visually seemed to have room for,
   and made the "Hide code"/auto-hide-on-Run mechanism resize that same
   row -- causing a visible expand-then-snap-back flicker on quick
   drawings, since the collapse/restore was tied to Run starting/finishing
   rather than to a deliberate user action.

   This replaces that with three content columns -- editor | canvas |
   info -- plus a 4th narrow track for the draggable resize handle
   between editor and canvas (initColumnResizeHandle() in turtle.js).
   The canvas gets the FULL viewport height and a generous width, making
   it the dominant element without fighting the editor for vertical
   space. minmax() sets the *default* floor/ratio; a drag (or Hide/Show
   code) overrides it with explicit pixel values via inline style --
   see setEditorHidden() and initColumnResizeHandle() in turtle.js.
   resize-handle.js is not loaded on this page any more (it only
   supports a vertical row-based split, not this column layout). */
@media (min-width: 1024px) {

    body[data-v2-turtle] #ch-viewport {
        display: grid;
        grid-template-columns: minmax(220px, 1fr) 10px minmax(420px, 2.4fr) minmax(220px, 1fr);
        grid-template-rows: 1fr;
    }

    body[data-v2-turtle] #pane-editor {
        grid-column: 1;
        grid-row: 1;
        border-right: 2px solid var(--border);
    }

    .tt-col-resize-handle {
        display: flex;
        grid-column: 2;
        grid-row: 1;
    }

    body[data-v2-turtle] #pane-output {
        grid-column: 3;
        grid-row: 1;
        border-right: 2px solid var(--border);
    }

    /* Right pane maps to the fourth column — same "info pane gets its own
       grid slot" idea playground.css uses for #pane-playground, just a
       column instead of the full row-span (no separate output row here).
       Its width is intentionally never touched by drag or Hide/Show code
       -- only the editor/canvas boundary moves, keeping this pane stable. */
    body[data-v2-turtle] #pane-turtle-info {
        grid-column: 4;
        grid-row: 1;
        padding-bottom: 0;
        overflow: hidden;
    }

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

    /* Ensure all three content columns display on desktop regardless of
       the mobile .is-active tab state */
    body[data-v2-turtle] #pane-editor,
    body[data-v2-turtle] #pane-output,
    body[data-v2-turtle] #pane-turtle-info {
        display: flex !important;
    }

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

/* ── EXAMPLE DROPDOWN OPTION CONTRAST ───────────────────────── */
.pg-example-select option {
    background: var(--bg);
    color: var(--text);
}

/* ── SETTINGS MENU (turtle avatar, top-right of topbar) ──────── */
/* Identical rules to playground.css's .pg-avatar-* — duplicated here
   since the two CSS files are never loaded on the same page. */
.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); }

.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;
}

.pg-avatar-menu[hidden] { display: none; }

@media (max-width: 420px) {
    .pg-avatar-menu {
        width: calc(100vw - 32px);
        right: -8px;
    }
}

.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); }

.pg-avatar-item.is-active {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--bg);
}

/* ── HELP MODAL — supported Turtle commands ──────────────────── */
.tt-modal {
    display: flex;
    position: fixed;
    z-index: 1000;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.tt-modal[hidden] { display: none; }

.tt-modal-content {
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: var(--radius-sm, 10px);
    padding: 20px;
    width: 600px;
    max-width: 100%;
    max-height: 80vh;
    overflow-y: auto;
}

.tt-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
    margin-bottom: 15px;
    padding-bottom: 10px;
}

.tt-modal-header h2 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--text);
    margin: 0;
}

.tt-modal-close {
    cursor: pointer;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-muted);
    background: transparent;
    border: none;
    padding: 4px 8px;
}
.tt-modal-close:hover { color: var(--text); }

.tt-cmd-category h3 {
    font-size: 0.85rem;
    font-weight: 800;
    color: var(--primary);
    margin: 14px 0 8px;
}

.tt-cmd-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.tt-cmd-item span {
    color: var(--text);
    font-weight: 700;
    font-family: var(--mono);
}

@media (max-width: 480px) {
    .tt-cmd-list { grid-template-columns: 1fr; }
}