/* ============================================================
   PYTHON COACH TRACE TABLE VISUALISER — overrides on top of
   v2-challenge-layout.css
   /v2/trace-table.html  |  body[data-v2-trace-table]

   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-bottomnav, .ch-tab-btn, dark/light syntax colours.

   Shared chrome classes below (.pg-topbar-logo*, .pg-header-*,
   .pg-example-select, .pg-avatar-*, .pg-info-cta) are duplicated
   verbatim from playground.css, per this codebase's established
   convention (see turtle.css's identical duplication of the same
   classes) rather than shared via an import. Only genuinely new,
   Trace-Table-specific elements use the "tv-" prefix.
   ============================================================ */

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

/* ── VISUALLY-HIDDEN LABEL ───────────────────────────────────────
   Same latent gap as turtle.css / playground.html: .sr-only is used
   on the "Load example" <label> but isn't defined in v2-base.css.
   Duplicated here rather than fixed globally — see turtle.css's own
   comment on this same issue for the full reasoning. ── */
.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;
}

/* ── TOPBAR: LOGO ─────────────────────────────────────────────── */
.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;
}

body[data-v2-trace-table] #ch-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
    border-left: 2px solid var(--border);
    padding-left: 12px;
}

@media (max-width: 600px) {
    body[data-v2-trace-table] #ch-title { display: none; }
}

/* ── EDITOR HEADER CONTROL GROUPS ────────────────────────────── */
body[data-v2-trace-table] .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;
}

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

.pg-example-select option {
    background: var(--bg);
    color: var(--text);
}

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

/* Below 500px, Playground's own convention hides .pg-header-examples
   entirely (Reset/Copy/Share live in its info pane instead). Trace
   Table's example selector is the primary way to load meaningful code
   on a phone -- typing a program by hand there is impractical -- so
   instead of hiding it, the editor header wraps onto a second row and
   the selector gets its own full-width line, keeping it in the editor/
   workflow area rather than moving it into the info pane. Desktop
   layout (>500px) is completely unchanged by this block. */
@media (max-width: 500px) {
    .pg-shortcut-hint { display: none; }

    body[data-v2-trace-table] .ch-editor-header {
        height: auto;
        min-height: 56px;
        flex-wrap: wrap;
        row-gap: 8px;
        padding: 10px 16px;
        gap: 8px;
    }

    .pg-header-controls {
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
        gap: 8px;
    }

    .pg-header-examples {
        width: 100%;
        border-right: none;
        padding-right: 0;
    }

    .pg-example-select {
        flex: 1;
        max-width: none;
    }

    .pg-header-run {
        width: 100%;
        justify-content: flex-end;
    }
}

/* The editor is never made read-only (see trace-table.js's top-of-file
   docstring and initRunBtn()) — it stays a normal, fully editable
   CodeMirror instance at all times, matching Playground. Run re-enables
   itself as soon as a trace starts playing, so it can always be clicked
   again to re-trace whatever the editor currently contains. */

/* ── OUTPUT PANE (repurposed as the "Trace Table" pane) ─────────── */
.tv-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.tv-step-counter {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    min-width: 90px;
}

.tv-step-buttons {
    display: flex;
    gap: 6px;
}

.tv-btn-step {
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xs, 6px);
    padding: 5px 10px;
    cursor: pointer;
    min-width: 34px;
    transition: background 0.15s, border-color 0.15s;
}

.tv-btn-step:hover:not(:disabled) {
    background: var(--border);
    border-color: var(--border-dark);
}

.tv-btn-step:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.tv-speed-control {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    cursor: pointer;
}

.tv-speed-control input[type="range"] {
    width: 90px;
    accent-color: var(--primary);
    cursor: pointer;
}

.tv-speed-val {
    font-variant-numeric: tabular-nums;
    min-width: 32px;
}

.tv-compact-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
}

.tv-compact-toggle input[type="checkbox"] {
    accent-color: var(--primary);
    cursor: pointer;
}

.tv-csv-btn {
    font-family: var(--font);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text);
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-xs, 6px);
    padding: 6px 12px;
    cursor: pointer;
    margin-left: auto;
    transition: background 0.15s, border-color 0.15s;
}

.tv-csv-btn:hover {
    background: var(--border);
    border-color: var(--border-dark);
}

.tv-table-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 14px;
}

.tv-table-placeholder {
    color: var(--text-muted);
    font-size: 0.875rem;
    font-style: italic;
    padding: 4px 0;
}

/* Runtime/tracer failure message — reuses the site's existing error-amber
   convention verbatim (same colours/ratios as .pg-runtime-error in
   playground.css: #B35C00 on white = 4.6:1 WCAG AA; #EEC252 on #0F172A =
   9.0:1 WCAG AA). No new colour introduced here. */
.tv-table-placeholder--error {
    color: #B35C00;
    font-style: normal;
}
[data-theme="dark"] .tv-table-placeholder--error { color: #EEC252; }

.tv-trace-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    font-family: var(--mono);
}

.tv-trace-table th,
.tv-trace-table td {
    border: 1px solid var(--border);
    padding: 6px 10px;
    text-align: left;
    min-width: 40px;
}

.tv-trace-table th {
    position: sticky;
    top: 0;
    background: var(--surface);
    color: var(--text);
    border-bottom: 2px solid var(--border-dark);
    z-index: 1;
}

.tv-trace-table td.tv-line-num {
    color: var(--text-muted);
    width: 30px;
    text-align: right;
    border-right: 1.5px solid var(--border-dark);
    user-select: none;
}

/* "Value changed on this step" — blue tint (never red/green per this
   project's UI rules). Text stays var(--text), so contrast is
   effectively the already-verified --text-on-surface/-bg ratio; the
   background tints below are visibly distinct from the plain table
   background at typical monitor gamma even though this project doesn't
   compute non-text component contrast for a bonus highlight (the
   underlying change is also conveyed via the compact-table row-merge
   logic itself, not colour alone).
   Computed contrast (WCAG relative-luminance formula):
     light: #BFE4F7 bg / #1C1C1C text = 12.71:1
     dark:  #1B3A52 bg / #E2E8F0 text =  9.60:1  */
.tv-trace-table td.tv-value-new {
    background: #BFE4F7;
    color: #1C1C1C;
    font-weight: 700;
}
[data-theme="dark"] .tv-trace-table td.tv-value-new {
    background: #1B3A52;
    color: #E2E8F0;
}

/* Error row — reuses the site's existing error-amber convention
   verbatim (same colours/ratios as .pg-output-pre--error in
   playground.css: #B35C00 on white = 4.6:1 WCAG AA; #EEC252 on
   #0F172A = 9.0:1 WCAG AA). No new colour introduced here. */
.tv-trace-table td.tv-error-row {
    color: #B35C00;
    font-weight: 700;
    text-align: center;
}
[data-theme="dark"] .tv-trace-table td.tv-error-row { color: #EEC252; }

/* ── CODEMIRROR ACTIVE-LINE / ERROR-LINE HIGHLIGHT ───────────────
   Applied via CodeMirror's addLineClass('background', ...) API on the
   live editor instance while stepping through a trace — replaces the
   prototype's separate hidden-textarea + static "codeDisplay" div
   approach, since CodeMirror can highlight its own lines directly.
   Amber/yellow tones only, per this project's "never red/green" rule;
   used here as a status indicator (which line just executed), one of
   this rule's explicitly-permitted categories.
   Computed contrast (WCAG relative-luminance formula):
     active-line bg light #FCE9B0 / text #1C1C1C = 14.14:1
     active-line bg dark  #3A2E12 / text #E2E8F0 = 10.79:1
     left-border #B35C00 vs light bg (non-text, 3:1 min) = 3.92:1
     left-border #EEC252 vs dark bg  (non-text, 3:1 min) = 7.90:1 */
.tv-active-line {
    background: #FCE9B0 !important;
    border-left: 3px solid #B35C00;
}
[data-theme="dark"] .tv-active-line {
    background: #3A2E12 !important;
    border-left: 3px solid #EEC252;
}

/* Error line — border-only accent (no background change) since the
   full-row "Error: ..." message in the table is the primary error
   indicator; this is a secondary visual pointer back to the source
   line. Reuses the same verbatim error-amber colours as above. */
.tv-error-line {
    border-left: 3px solid #B35C00;
}
[data-theme="dark"] .tv-error-line {
    border-left: 3px solid #EEC252;
}

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

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

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

/* ── RIGHT PANE: TRACE TABLE INFO ─────────────────────────────── */
.tv-howto-heading {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-top: 8px;
    margin-bottom: 10px;
}

.tv-howto {
    margin: 0 0 24px;
    padding-left: 20px;
    color: var(--text-secondary);
    font-size: 0.875rem;
    line-height: 1.6;
}

.tv-howto li { margin-bottom: 6px; }
.tv-howto strong { color: var(--text); }

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

/* ── DESKTOP LAYOUT ADJUSTMENTS ─────────────────────────────── */
/*
 * The draggable divider here is the shared row-based editor/table split
 * (#pane-editor above #pane-output), injected by /v2/js/resize-handle.js
 * -- the exact same script Playground loads, unmodified, operating on
 * the same #ch-viewport/#pane-editor/#pane-output ids. No .tv-* CSS is
 * needed for it: v2-challenge-layout.css already supplies both the
 * default grid-template-rows (3fr 12px 2fr) and the .ch-resize-handle
 * styling, and this file never overrides either.
 *
 * An earlier version of this file added a second, vertical divider
 * between the work area and the info pane (a 3-column grid + a
 * .tv-col-resize-handle) -- that was the wrong split for this page
 * (Playground has no work/info splitter at all) and has been removed;
 * the desktop grid below is back to the shared 3fr/2fr two-column
 * default, with #pane-trace-info in column 2 exactly like Playground's
 * #pane-playground.
 */
@media (min-width: 1024px) {

    body[data-v2-trace-table] #ch-desktop-tabs { display: none; }

    body[data-v2-trace-table] #pane-trace-info { padding-bottom: 0; }

    body[data-v2-trace-table] #pane-trace-info {
        grid-column: 2;
        grid-row: 1 / -1;
        overflow: hidden;
    }

    body[data-v2-trace-table] #pane-editor,
    body[data-v2-trace-table] #pane-output,
    body[data-v2-trace-table] #pane-trace-info {
        display: flex !important;
    }

    body[data-v2-trace-table] #ch-bottomnav { display: none; }
}

/* ── SETTINGS MENU (avatar, top-right of topbar) ──────────────
   Identical rules to playground.css's .pg-avatar-* — duplicated here,
   same convention as turtle.css. ── */
.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);
}