/* ── Algorithm trainer (see algorithm-trainer-mockups.html) ───────────────
   Palette maps mockup tokens onto the app theme:
   surface = --mud-palette-surface, tile = --accent-surface-color,
   indigo = --mud-palette-primary. */

.trainer-page {
    --tr-line: rgba(148, 163, 216, .14);
    --tr-line-strong: rgba(148, 163, 216, .28);
    --tr-ink-2: var(--mud-palette-text-secondary);
    --tr-ink-3: #6b7494;
    --tr-indigo: var(--mud-palette-primary);
    --tr-indigo-soft: rgba(99, 102, 241, .16);
    --tr-cyan: #22d3ee;
    --tr-cyan-soft: rgba(34, 211, 238, .14);
    --tr-green: #22c55e;
    --tr-green-soft: rgba(34, 197, 94, .14);
    --tr-amber: #f59e0b;
    --tr-amber-soft: rgba(245, 158, 11, .15);
    --tr-red: #ef4444;
    --tr-red-soft: rgba(239, 68, 68, .14);
    --tr-surface: var(--mud-palette-surface);
    --tr-tile: var(--accent-surface-color, #0b1022);
    --tr-r: 12px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 8px 4px 60px;
}

.trainer-page .tr-card {
    background: var(--tr-surface);
    border: 1px solid var(--tr-line);
    border-radius: var(--tr-r);
}

/* chips */
.tr-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .2px;
    white-space: nowrap;
}
.tr-chip.learning { background: var(--tr-indigo-soft); color: #a5a8ff; }
.tr-chip.drilling { background: var(--tr-cyan-soft); color: #67e3f9; }
.tr-chip.mastered { background: var(--tr-green-soft); color: #4ade80; }
.tr-chip.locked { background: rgba(148, 163, 216, .08); color: var(--tr-ink-3); }
.tr-chip.warn { background: var(--tr-amber-soft); color: #fbbf24; }
.tr-chip.puzzle { background: rgba(99, 102, 241, .14); color: #a5b4fc; }
.tr-chip.bad { background: var(--tr-red-soft); color: #f87171; }

/* case diagram */
.trainer-diag { display: block; }
.trainer-diag .st { fill: #f6d32d; }
.trainer-diag .st.off { fill: #2b3157; }
/* fully colored stickers (2x2 CLL/EG diagrams) — yellow-top scheme, U matches the 3x3 "on" color */
.trainer-diag .st.cU { fill: #f6d32d; }
.trainer-diag .st.cD { fill: #eef1f8; }
.trainer-diag .st.cF { fill: #3fa650; }
.trainer-diag .st.cB { fill: #3f7de0; }
.trainer-diag .st.cR { fill: #f28c28; }
.trainer-diag .st.cL { fill: #d94848; }
.trainer-diag.dim .st { fill: #20284b; }
.trainer-diag.dim .st.off { fill: #1a2140; }
.trainer-diag .ar { stroke: #1e1b4b; stroke-width: 3.4; fill: none; stroke-linecap: round; }
.trainer-diag .qmark-text {
    fill: var(--tr-ink-3);
    font-weight: 700;
    font-size: 44px;
    font-family: inherit;
}

.tr-ringwrap {
    position: relative;
    border-radius: 14px;
    padding: 5px;
    background: conic-gradient(var(--ring, transparent) calc(var(--pct, 0) * 1%), rgba(148, 163, 216, .12) 0);
}
.tr-ringwrap .inner {
    background: var(--tr-tile);
    border-radius: 10px;
    padding: 6px;
    display: block;
    position: relative;
}

/* ── train head: streak pill + charge ── */
.tr-train-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.tr-set-label { font-weight: 600; font-size: 15px; }
.tr-set-label span { color: var(--tr-ink-3); font-weight: 500; font-size: 13px; margin-left: 8px; }

.tr-streak-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    padding: 7px 14px;
    border-radius: 99px;
    border: 1px solid var(--tr-line);
    background: var(--tr-surface);
    font-weight: 700;
    font-size: 16px;
    transition: .2s;
}
.tr-streak-pill .lbl {
    font-weight: 500;
    font-size: 11px;
    color: var(--tr-ink-3);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.tr-streak-pill .flame { color: var(--tr-ink-3); transition: .2s; display: flex; }
.tr-streak-pill.hot { border-color: rgba(245, 158, 11, .5); box-shadow: 0 0 18px rgba(245, 158, 11, .15); }
.tr-streak-pill.hot .flame { color: var(--tr-amber); }
.tr-streak-pill .sep { width: 1px; height: 16px; background: var(--tr-line-strong); }
.tr-streak-pill .today { font-weight: 500; font-size: 12px; color: var(--tr-ink-2); }

.tr-reveal-link {
    flex: none;
    font-size: 12px;
    color: var(--tr-ink-3);
    text-decoration: underline dotted;
    background: none;
    border: none;
    cursor: pointer;
}
.tr-reveal-link:hover { color: #f87171; }

/* ── train container: mirrors the main timer page ── */
.tr-train-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    outline: none;
}
.tr-chrome {
    transition: opacity .4s ease-out, transform .4s ease-out;
}
/* while solving, fade all chrome like the main timer page's solving-active */
.tr-train-container.tr-solving .tr-chrome,
.tr-train-container.tr-solving .tr-scramble-section {
    opacity: 0;
    pointer-events: none;
}
.tr-train-container.tr-solving .tr-scramble-section { transform: translateY(-30px); }
.tr-train-container.tr-solving .tr-chrome { transform: translateY(20px); }

.tr-scramble-section {
    margin-bottom: 8px;
    transition: opacity .4s ease-out, transform .4s ease-out;
}
.tr-reveal-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 2px;
}
.tr-reveal-row .tag {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .7px;
    text-transform: uppercase;
    color: var(--tr-ink-3);
}

/* ── stage: case panel + timer ── */
.tr-stage {
    display: grid;
    grid-template-columns: 290px 1fr;
    gap: 16px;
    margin-bottom: 16px;
    align-items: stretch;
}
.tr-timer-area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 280px;
}
.tr-mode-panel {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px 24px;
    cursor: pointer;
    user-select: none;
    position: relative;
}
.tr-mode-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--tr-r);
    pointer-events: none;
    border: 1px solid transparent;
}
.tr-mode-panel.recall-mode::after { border-color: rgba(239, 68, 68, .45); }
.tr-case-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

@media (max-width: 760px) {
    /* mobile: single column like the main timer page — scramble on top,
       timer front and center, the case reveal as a compact card below */
    .tr-stage {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .tr-timer-area {
        order: -1;
        min-height: 34vh;
    }
    .tr-case-panel {
        flex-direction: row !important;
        text-align: left !important;
        padding: 12px !important;
        gap: 12px !important;
    }
    .tr-case-meta {
        align-items: flex-start;
        gap: 4px;
    }
    .tr-case-meta .nm { font-size: 16px !important; margin-top: 0 !important; }
    .tr-case-stats { justify-content: flex-start !important; gap: 10px !important; }
    .tr-alg-line .moves { font-size: 11px !important; }
    .tr-train-head { gap: 8px; margin-bottom: 8px; flex-wrap: nowrap; }
    .tr-rotation-note { display: none; }
    .tr-input-modes .tr-view-chip { padding: 4px 9px; font-size: 11.5px; }
    .tr-mode-panel { padding: 18px 14px; }
    .tr-mode-box .alg-big { font-size: 15px !important; }
    /* the revealed case collapses to a slim strip */
    .tr-case-panel { padding: 8px 10px !important; gap: 10px !important; min-width: 0; }
    /* cap the case diagram: C# sizes the svg from a mobile UA check, so a narrow
       DESKTOP window still asks for 110px — the svg has a viewBox, so a smaller
       CSS width/height scales it cleanly and stops it reserving 110px */
    .tr-case-panel .tr-ringwrap { padding: 3px; flex: none; }
    .tr-case-panel .tr-ringwrap svg.trainer-diag { width: 56px; height: 56px; }
    /* clamp the alg text to 2 lines so it can't push the overview off-screen */
    .tr-case-panel .tr-alg-line .moves {
        padding: 5px 8px;
        font-size: 11px !important;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .tr-case-stats { font-size: 11px !important; }
}

/* mid-range guard: 761–1000px still uses the 290px + 110px desktop grid, which
   is cramped — shrink the case-panel column and cap the diagram so the alg text
   and case overview keep room */
@media (min-width: 761px) and (max-width: 1000px) {
    .tr-stage { grid-template-columns: 230px 1fr; }
    .tr-case-panel { min-width: 0; }
    .tr-case-panel .tr-ringwrap svg.trainer-diag { width: 80px; height: 80px; }
}
.tr-case-panel {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}
.tr-case-panel .nm { font-weight: 700; font-size: 20px; margin-top: 2px; }
.tr-last-tag {
    align-self: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--tr-ink-3);
    border: 1px solid var(--tr-line);
    border-radius: 99px;
    padding: 2px 9px;
}
.tr-case-stats { display: flex; gap: 14px; font-size: 12.5px; color: var(--tr-ink-2); flex-wrap: wrap; justify-content: center; }
.tr-case-stats b { color: var(--mud-palette-text-primary); }
.tr-case-stats .xr { color: #f87171; }
.tr-case-stats .cs { display: inline-flex; align-items: center; gap: 4px; }
.tr-case-stats .cs .flame { color: var(--tr-amber); display: flex; }

.tr-alg-line { width: 100%; display: flex; flex-direction: column; gap: 5px; font-size: 10.5px; color: var(--tr-ink-3); }
.tr-alg-line .lab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: .6px;
    font-weight: 600;
}
.tr-alg-line .lab button {
    font-size: 11px;
    color: #a5a8ff;
    text-decoration: underline dotted;
    text-transform: none;
    letter-spacing: 0;
    background: none;
    border: none;
    cursor: pointer;
}
.tr-alg-line .moves {
    font-family: 'Roboto Mono', monospace;
    font-size: 12px;
    color: #dbe0ff;
    background: var(--tr-tile);
    border-radius: 8px;
    padding: 8px 10px;
    line-height: 1.6;
    text-align: left;
}

.tr-timer-hint { font-size: 13px; color: var(--tr-ink-3); text-align: center; }
.tr-timer-hint kbd {
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    background: var(--tr-tile);
    border: 1px solid var(--tr-line-strong);
    border-bottom-width: 2px;
    border-radius: 6px;
    padding: 2px 8px;
    margin: 0 2px;
}

.tr-mode-box { display: flex; flex-direction: column; align-items: center; gap: 13px; text-align: center; }
.tr-mode-box .alg-big {
    font-family: 'Roboto Mono', monospace;
    font-size: 19px;
    letter-spacing: .05em;
    color: #dbe0ff;
    line-height: 1.9;
    max-width: 420px;
}
.tr-mode-box .rc-name { font-weight: 700; font-size: 19px; }
.tr-linkish {
    font-size: 12px;
    color: #a5a8ff;
    text-decoration: underline dotted;
    background: none;
    border: none;
    cursor: pointer;
}
.tr-rep-dots { display: flex; gap: 10px; }
.tr-rep-dots .d {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: rgba(148, 163, 216, .15);
    border: 1px solid var(--tr-line-strong);
}
.tr-rep-dots .d.on { background: var(--tr-indigo); border-color: var(--tr-indigo); }

/* ── result line: recognition/execution split + delta + recovery actions,
   sits directly under the timer (the last time is shown in the timer itself) ── */
.tr-result-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
    min-height: 26px;
    font-size: 13px;
    color: var(--tr-ink-2);
}
.tr-result-line .rx { font-family: 'Roboto Mono', monospace; font-size: 12.5px; color: var(--tr-ink-3); }
.tr-result-line .rx b { color: var(--mud-palette-text-primary); }
.tr-result-line .fx { font-size: 13px; color: var(--tr-ink-2); }
.tr-result-line .fx b { color: var(--mud-palette-text-primary); }

/* speed grade colors the timer value / split time (beats TimerDisplay's inline font style) */
.tr-timer-area.res-good .timer-value { color: var(--tr-green) !important; }
.tr-timer-area.res-warn .timer-value { color: var(--tr-amber) !important; }
.tr-timer-area.res-bad .timer-value { color: var(--tr-red) !important; }
.tr-split-time.res-good { color: var(--tr-green); }
.tr-split-time.res-warn { color: var(--tr-amber); }
.tr-split-time.res-bad { color: var(--tr-red); }

.tr-btn-danger {
    padding: 7px 14px;
    font-size: 12.5px;
    border: 1px solid rgba(239, 68, 68, .4);
    color: #f87171;
    border-radius: 10px;
    font-weight: 600;
    background: none;
    cursor: pointer;
}
.tr-btn-danger:hover { background: var(--tr-red-soft); }
.tr-btn-redo {
    padding: 7px 14px;
    font-size: 12.5px;
    border: 1px solid var(--tr-line-strong);
    color: var(--tr-ink-2);
    border-radius: 10px;
    font-weight: 600;
    background: none;
    cursor: pointer;
}
.tr-btn-redo:hover { border-color: var(--tr-indigo); color: #c7c9ff; }

/* ── session row ── */
.tr-next-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.tr-next-row .lbl {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--tr-ink-3);
}
.tr-next-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 12px 7px 8px;
    border-radius: 10px;
    background: var(--tr-surface);
    border: 1px solid var(--tr-line);
    font-size: 13px;
    font-weight: 600;
}
.tr-next-chip small { font-weight: 500; color: var(--tr-ink-3); font-size: 11px; }
.tr-next-chip.okc { border-color: rgba(34, 197, 94, .3); }
.tr-next-chip.okc small { color: #4ade80; }
.tr-next-chip.failc { border-color: rgba(239, 68, 68, .35); }
.tr-next-chip.failc small { color: #f87171; }

/* ── recap strip ── */
.tr-recap-strip {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 13px 18px;
    margin-bottom: 16px;
    border-color: rgba(99, 102, 241, .4);
}
.tr-recap-strip.done { border-color: rgba(34, 197, 94, .5); }
.tr-recap-strip .rs-t b { display: block; font-size: 14px; }
.tr-recap-strip .rs-t span { font-size: 12px; color: var(--tr-ink-3); }
.tr-rq { display: flex; gap: 6px; margin-left: auto; flex-wrap: wrap; }
.tr-rq .q {
    width: 27px;
    height: 27px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    font-weight: 600;
    font-size: 12px;
    color: var(--tr-ink-3);
    background: rgba(148, 163, 216, .08);
    border: 1px solid var(--tr-line);
}
.tr-rq .q.cur { border-color: var(--tr-indigo); color: #c7c9ff; }
.tr-rq .q.ok { background: var(--tr-green-soft); border-color: rgba(34, 197, 94, .4); color: #4ade80; }
.tr-rq .q.miss { background: var(--tr-red-soft); border-color: rgba(239, 68, 68, .4); color: #f87171; }
.tr-skip-link {
    font-size: 12px;
    color: var(--tr-ink-3);
    text-decoration: underline dotted;
    background: none;
    border: none;
    cursor: pointer;
}

/* ── progress tab ── */
.tr-prog-head { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 14px; }
.tr-prog-head h1 { font-size: 24px; font-weight: 700; margin: 0; }
.tr-prog-head .sub { color: var(--tr-ink-3); font-size: 13px; }
.tr-setbar {
    display: flex;
    height: 12px;
    border-radius: 6px;
    overflow: hidden;
    gap: 2px;
    margin-bottom: 10px;
    background: var(--tr-tile);
}
.tr-setbar i { display: block; height: 100%; }
.tr-setlegend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--tr-ink-2); margin-bottom: 26px; }
.tr-setlegend i { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; }
.tr-stage-sec { margin-bottom: 24px; }
.tr-stage-sec h2 {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .4px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 12px;
    flex-wrap: wrap;
}
.tr-stage-sec h2 .n { color: var(--tr-ink-3); font-weight: 500; font-size: 13px; }
.tr-case-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.tr-case-card { padding: 14px; display: flex; gap: 13px; align-items: center; }
.tr-case-card .meta { min-width: 0; }
.tr-case-card .nm { font-weight: 600; font-size: 15px; margin-bottom: 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tr-case-card .st-line { font-size: 12px; color: var(--tr-ink-2); display: flex; gap: 10px; flex-wrap: wrap; }
.tr-case-card .st-line b { color: var(--mud-palette-text-primary); }
.tr-case-card.lockedc { opacity: .62; }
.tr-case-card.next-unlock { opacity: 1; border-color: rgba(99, 102, 241, .5); }
.tr-case-card .ord {
    font-family: 'Roboto Mono', monospace;
    font-size: 11px;
    color: var(--tr-ink-3);
    white-space: nowrap;
    border: 1px solid var(--tr-line);
    border-radius: 6px;
    padding: 1px 6px;
}
.tr-case-card.next-unlock .ord { color: #a5a8ff; border-color: rgba(99, 102, 241, .5); }
.tr-unlock-note {
    margin-top: 14px;
    padding: 13px 16px;
    border-radius: var(--tr-r);
    background: var(--tr-indigo-soft);
    border: 1px solid rgba(99, 102, 241, .3);
    font-size: 13px;
    color: #c7c9ff;
    line-height: 1.6;
}
.tr-unlock-note b { color: var(--mud-palette-text-primary); }

/* ── sets tab ── */
.tr-sec-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .3px;
    margin: 26px 0 12px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.tr-sec-title .n { color: var(--tr-ink-3); font-weight: 500; font-size: 12.5px; }
.tr-streak-card { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 18px 20px; }
.tr-sc-flame {
    width: 54px;
    height: 54px;
    flex: none;
    border-radius: 14px;
    background: var(--tr-amber-soft);
    display: grid;
    place-items: center;
    color: var(--tr-amber);
}
.tr-sc-main { flex: 1; min-width: 230px; }
.tr-sc-main b { font-size: 17px; display: block; }
.tr-sc-main > span { font-size: 12.5px; color: var(--tr-ink-2); }
.tr-goalbar { height: 7px; border-radius: 4px; background: rgba(148, 163, 216, .14); margin-top: 9px; overflow: hidden; max-width: 340px; }
.tr-goalbar span { display: block; height: 100%; background: var(--tr-amber); border-radius: 4px; }
.tr-daydots { display: flex; gap: 5px; justify-content: flex-end; }
.tr-daydots i { width: 12px; height: 12px; border-radius: 4px; background: rgba(148, 163, 216, .14); }
.tr-daydots i.on { background: var(--tr-green); }
.tr-daydots i.today { background: var(--tr-amber); outline: 2px solid rgba(245, 158, 11, .5); outline-offset: 1px; }
.tr-sc-days .cap { font-size: 11px; color: var(--tr-ink-3); margin-top: 7px; text-align: right; }
.tr-set-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.tr-set-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.tr-set-card.active { border-color: rgba(99, 102, 241, .55); box-shadow: 0 0 24px rgba(99, 102, 241, .12); }
.tr-set-card .sc-head { display: flex; align-items: center; gap: 10px; }
.tr-set-card .sc-head b { font-size: 16px; }
.tr-set-card .sc-head .cases {
    font-size: 11px;
    color: var(--tr-ink-3);
    font-family: 'Roboto Mono', monospace;
    white-space: nowrap;
}
.tr-set-card .sc-head .tr-chip { margin-left: auto; }
.tr-set-card .desc { font-size: 12.5px; color: var(--tr-ink-2); line-height: 1.5; margin: 0; }
.tr-mini-row { display: flex; gap: 8px; }
.tr-mini-row .inner2 { background: var(--tr-tile); border-radius: 7px; padding: 4px; display: inline-flex; }
.tr-sc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: auto;
    font-size: 12px;
    color: var(--tr-ink-3);
}
.tr-kbar { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.tr-kbar .track { flex: 1; height: 6px; border-radius: 3px; background: rgba(148, 163, 216, .14); overflow: hidden; }
.tr-kbar .fill { display: block; height: 100%; background: var(--tr-indigo); border-radius: 3px; }

/* ── analytics tab ── */
.tr-apanel { padding: 20px; margin-bottom: 16px; }
.tr-apanel h3 { font-size: 15px; font-weight: 600; margin: 0; }
.tr-apanel .psub { font-size: 12px; color: var(--tr-ink-3); margin-bottom: 14px; }
.tr-know-hero { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.tr-know-hero .kv { font-weight: 700; font-size: 44px; line-height: 1; }
.tr-know-hero .kd { font-size: 13px; color: #4ade80; font-weight: 600; }
.tr-know-hero .kk { font-size: 12.5px; color: var(--tr-ink-3); }
.tr-chartwrap { position: relative; }
.tr-chartwrap svg { display: block; width: 100%; height: auto; }
.tr-chartwrap .grid-line { stroke: rgba(148, 163, 216, .10); }
.tr-chartwrap .axis-lbl { fill: var(--tr-ink-3); font-size: 10px; }
.tr-chartwrap .kline { fill: none; stroke: var(--tr-indigo); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.tr-chartwrap .dot-ok { fill: var(--tr-green); }
.tr-chartwrap .dot-fail { stroke: var(--tr-red); stroke-width: 2.2; fill: none; }
.tr-chartwrap .avg-line { fill: none; stroke: var(--tr-indigo); stroke-width: 2; stroke-linejoin: round; }
.tr-chartwrap .target-dash { stroke: var(--tr-amber); stroke-dasharray: 5 4; stroke-width: 1.5; opacity: .7; }
.tr-chartwrap .target-txt { fill: #fbbf24; font-size: 10px; font-weight: 600; }
.tr-formula {
    margin-top: 14px;
    font-size: 12px;
    color: var(--tr-ink-3);
    line-height: 1.6;
    background: var(--tr-tile);
    border-radius: 8px;
    padding: 10px 14px;
}
.tr-formula b { color: var(--tr-ink-2); }
.tr-pc-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tr-pc-head .nm { font-weight: 700; font-size: 18px; }
.tr-pc-stats { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--tr-ink-2); margin-left: auto; }
.tr-pc-stats b { color: var(--mud-palette-text-primary); }
.tr-pc-empty { padding: 36px 20px; text-align: center; color: var(--tr-ink-3); font-size: 13px; }
.tr-chart-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--tr-ink-2); margin-top: 10px; align-items: center; }
.tr-chart-legend span { display: inline-flex; align-items: center; gap: 7px; }
.tr-atable { width: 100%; border-collapse: collapse; font-size: 13px; }
.tr-atable th {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--tr-ink-3);
    font-weight: 600;
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--tr-line-strong);
    white-space: nowrap;
}
.tr-atable td { padding: 7px 10px; border-bottom: 1px solid var(--tr-line); vertical-align: middle; white-space: nowrap; }
.tr-atable tbody tr { cursor: pointer; transition: background .12s; }
.tr-atable tbody tr:hover { background: rgba(99, 102, 241, .07); }
.tr-atable tbody tr.sel { background: var(--tr-indigo-soft); }
.tr-atable tbody tr.lockedr { opacity: .45; cursor: default; }
.tr-atable tbody tr.lockedr:hover { background: none; }
.tr-atable .cnm { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.tr-atable .num { font-variant-numeric: tabular-nums; }
.tr-atable .xr { color: #f87171; }
.tr-trend-dn { color: #4ade80; font-weight: 600; }
.tr-trend-up { color: #fbbf24; font-weight: 600; }
.tr-trend-new { color: var(--tr-ink-3); }

/* generic bits */
.tr-note-banner {
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: var(--tr-r);
    background: var(--tr-tile);
    border: 1px solid var(--tr-line);
    font-size: 13px;
    color: var(--tr-ink-2);
}
.tr-empty-hero { padding: 48px 24px; text-align: center; color: var(--tr-ink-2); }
.tr-empty-hero h2 { color: var(--mud-palette-text-primary); }

/* alg picker options (inside MudDialog) */
.tr-alg-opts { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.tr-alg-opt {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 11px 13px;
    border: 1px solid var(--tr-line);
    border-radius: 10px;
    cursor: pointer;
    transition: .12s;
    background: var(--tr-tile);
}
.tr-alg-opt:hover { border-color: var(--tr-line-strong); }
.tr-alg-opt.sel { border-color: var(--tr-indigo); background: var(--tr-indigo-soft); }
.tr-alg-opt input[type=radio] { margin-top: 4px; accent-color: var(--tr-indigo); }
.tr-alg-opt > span { flex: 1; min-width: 0; }
.tr-alg-opt .tagname { display: block; font-size: 11.5px; font-weight: 600; color: var(--tr-ink-2); margin-bottom: 3px; }
.tr-alg-opt .tagname .cur { color: #a5a8ff; }
.tr-alg-opt .movesl {
    font-family: 'Roboto Mono', monospace;
    font-size: 13px;
    color: #dbe0ff;
    line-height: 1.6;
    display: block;
    word-break: break-word;
    white-space: normal;
}
.tr-alg-opt input[type=text] {
    width: 100%;
    background: var(--mud-palette-background);
    border: 1px solid var(--tr-line-strong);
    border-radius: 8px;
    color: #dbe0ff;
    font-family: 'Roboto Mono', monospace;
    font-size: 13px;
    padding: 9px 12px;
    margin-top: 6px;
}
.tr-unlock-why {
    font-size: 13px;
    color: var(--tr-ink-2);
    line-height: 1.6;
    background: var(--tr-tile);
    border-radius: 10px;
    padding: 12px 16px;
    text-align: center;
}
.tr-unlock-alg {
    font-family: 'Roboto Mono', monospace;
    font-size: 13.5px;
    color: #dbe0ff;
    line-height: 1.8;
    text-align: center;
}

/* ── smart-cube drill tab ── */
.tr-smart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.tr-smart-modes { display: flex; gap: 6px; flex-wrap: wrap; }
.tr-mode-chip {
    padding: 7px 16px;
    border-radius: 99px;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--tr-ink-2);
    border: 1px solid transparent;
    background: none;
    cursor: pointer;
    transition: .15s;
}
.tr-mode-chip:hover { color: var(--mud-palette-text-primary); background: var(--tr-surface); }
.tr-mode-chip.sel { background: var(--tr-indigo-soft); border-color: rgba(99, 102, 241, .45); color: #c7c9ff; }
.tr-smart-options { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }

.tr-smart-stage {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 16px;
    align-items: start;
}
@media (max-width: 760px) {
    .tr-smart-stage { grid-template-columns: 1fr; }
}
.tr-smart-target {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 26px 20px;
    min-height: 320px;
    justify-content: center;
}
.tr-smart-status { min-height: 26px; }
.tr-smart-actions { display: flex; gap: 8px; }
.tr-smart-side { display: flex; flex-direction: column; gap: 12px; }
.tr-smart-result { padding: 14px 16px; }
.tr-smart-result .rname { font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.tr-smart-result .rrow {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--tr-ink-2);
    padding: 2px 0;
}
.tr-smart-result .rrow b { color: var(--mud-palette-text-primary); font-variant-numeric: tabular-nums; }
.tr-smart-cube3d { height: 220px; overflow: hidden; }
.tr-smart-cube3d > * { height: 100%; }
.tr-smart-history { display: flex; gap: 6px; flex-wrap: wrap; }
.tr-target { display: block; }


/* ── page scroll: body is overflow:hidden app-wide, pages own their scrolling ── */
.trainer-scroll {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100dvh - 120px);
    padding-right: 4px;
}
@media (max-width: 760px) {
    .trainer-scroll { max-height: calc(100dvh - 84px); }
}

/* the main timer page clamps .scramble-display height for its own layout —
   inside the trainer the scramble must size naturally */
.tr-scramble-section .scramble-display,
.tr-scramble-section .multi-scramble-display {
    max-height: none;
    overflow: visible;
}
/* give the scramble text breathing room and drop the copy button in the trainer */
.tr-scramble-section .scramble-text { padding: 10px 0; }
.tr-scramble-section .copy-btn { display: none; }

/* ── per-set page header ── */
.tr-set-header {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.tr-set-header .nm { font-weight: 700; font-size: 18px; }
.tr-set-header .views { margin-left: auto; display: flex; gap: 4px; }
.tr-view-chip {
    padding: 5px 12px;
    border-radius: 99px;
    font-weight: 600;
    font-size: 12.5px;
    color: var(--tr-ink-2);
    border: 1px solid transparent;
    background: none;
    cursor: pointer;
    transition: .15s;
}
.tr-view-chip:hover { color: var(--mud-palette-text-primary); background: var(--tr-surface); }
.tr-view-chip.sel { background: var(--tr-indigo-soft); border-color: rgba(99, 102, 241, .45); color: #c7c9ff; }
.tr-view-chip.off { opacity: .5; }
.tr-target-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    color: #fbbf24;
    background: var(--tr-amber-soft);
    border: 1px solid rgba(245, 158, 11, .3);
    cursor: pointer;
}

/* compact train head: rotation capacity slots + input modes, one row everywhere */
.tr-train-head { align-items: center; flex-wrap: nowrap; }
.tr-cap { display: flex; gap: 8px; align-items: center; flex: none; }
.tr-cap .grp { display: flex; gap: 3px; align-items: center; }
.tr-cap .slot {
    width: 16px;
    height: 8px;
    border-radius: 4px;
    background: rgba(148, 163, 216, .14);
    transition: background .3s;
}
.tr-cap .slot.on { background: var(--tr-cyan); }
.tr-cap .slot.learn { border-radius: 50%; width: 8px; }
.tr-cap .slot.learn.on { background: var(--tr-indigo); }
.tr-add-case {
    border: 1px solid rgba(99, 102, 241, .45);
    background: var(--tr-indigo-soft);
    color: #c7c9ff;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    animation: tr-add-case-in .3s ease;
}
.tr-add-case:hover { border-color: rgba(99, 102, 241, .8); }
/* over the drilling-slot target: still allowed, flagged amber */
.tr-add-case.over {
    border-color: rgba(245, 158, 11, .55);
    background: var(--tr-amber-soft);
    color: #fbbf24;
}
.tr-add-case.over:hover { border-color: rgba(245, 158, 11, .9); }
@keyframes tr-add-case-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
.tr-rotation-note { font-size: 12px; color: var(--tr-ink-3); white-space: nowrap; }
.tr-learn-links { display: flex; gap: 14px; justify-content: center; }

/* unlock case picker */
.tr-unlock-picker { display: flex; flex-direction: column; gap: 10px; }
.tr-unlock-picker .eyebrow {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #a5a8ff;
}
.tr-unlock-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-height: 46vh;
    overflow-y: auto;
    align-content: flex-start;
}
.tr-unlock-grid .subset {
    flex-basis: 100%;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--tr-ink-3);
    margin-top: 4px;
}
.tr-unlock-case {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 6px;
    width: 86px;
    border-radius: 10px;
    border: 1px solid var(--tr-line);
    background: var(--tr-surface);
    color: var(--tr-ink-2);
    font-size: 11.5px;
    cursor: pointer;
}
.tr-unlock-case:hover { border-color: rgba(99, 102, 241, .45); }
.tr-unlock-case.sel { border-color: var(--tr-indigo); background: var(--tr-indigo-soft); color: #c7c9ff; }
.tr-unlock-case .nm { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* setup mode: assess cases you already know */
.tr-setup-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex: none; }
.tr-setup-prog {
    flex: 1;
    height: 8px;
    border-radius: 4px;
    background: rgba(148, 163, 216, .14);
    overflow: hidden;
}
.tr-setup-prog .fill {
    display: block;
    height: 100%;
    background: var(--tr-cyan);
    border-radius: 4px;
    transition: width .3s ease;
}
.tr-setup-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.tr-setup-save {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--tr-ink-2);
    cursor: pointer;
}
.tr-setup-smart-note { color: var(--tr-cyan); font-size: 13px; }
.tr-setup-foot { display: flex; justify-content: center; min-height: 24px; }

/* "try it on your cube" setup line (alg picker) */
.tr-try-setup {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    padding: 8px 10px;
    border-radius: 10px;
    border: 1px dashed var(--tr-line);
    background: var(--tr-surface);
}
.tr-try-setup .lab { font-size: 11px; color: var(--tr-ink-3); white-space: nowrap; }
.tr-try-setup .moves { font-family: 'Roboto Mono', monospace; font-size: 13px; color: var(--tr-ink-1); }
.tr-try-setup button {
    border: none;
    background: none;
    color: #a5a8ff;
    cursor: pointer;
    font-size: 14px;
    padding: 0 2px;
}
.tr-input-modes { margin-left: auto; display: flex; gap: 4px; align-items: center; flex: none; }

/* split timing display */
.tr-split-time {
    font-weight: 700;
    font-size: 56px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    font-family: 'Roboto Mono', monospace;
}
.tr-split-time.running { color: #c7c9ff; }

/* smart rig (3D-first) */
.tr-smart-rig {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px;
    min-height: 300px;
}
.tr-rig-cube { width: 100%; height: 260px; }
.tr-rig-cube.big { height: 340px; }
.tr-rig-cube > * { height: 100%; }
.tr-rig-status { min-height: 24px; }
.tr-case-cube3d { width: 150px; height: 150px; flex: none; }
.tr-case-cube3d > * { height: 100%; }
.tr-smart-stage.rig-first { grid-template-columns: 1fr 240px; }
@media (max-width: 760px) {
    .tr-smart-stage.rig-first { grid-template-columns: 1fr; }
    .tr-rig-cube.big { height: 260px; }
}

/* case overview (replaces the session chips) */
.tr-case-overview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 6px;
    margin-top: 10px;
}
.tr-ov-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 7px 4px 5px;
    border-radius: 10px;
    background: var(--tr-surface);
    border: 1px solid var(--tr-line);
    font-size: 11px;
}
.tr-ov-tile.trained { border-color: rgba(99, 102, 241, .5); }
.tr-ov-tile .ov-name { font-weight: 600; color: var(--tr-ink-2); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-ov-tile .ov-avg { font-family: 'Roboto Mono', monospace; font-size: 10.5px; color: var(--tr-ink-3); }
.tr-ov-tile.good .ov-avg { color: #4ade80; }
.tr-ov-tile.slow .ov-avg { color: #fbbf24; }
.tr-ov-tile .ov-badge {
    position: absolute;
    top: -5px;
    right: -3px;
    padding: 1px 6px;
    border-radius: 99px;
    background: var(--tr-indigo);
    color: #fff;
    font-size: 9.5px;
    font-weight: 700;
}
.tr-ov-tile .ov-badge.bad { background: var(--tr-red); }

/* ── fixed (never-scrolling) train view ───────────────────────────────
   Desktop behaves like trainer-scroll; on mobile the page locks to the
   viewport: every section gets a deterministic slot, the timer flexes,
   and appearing/disappearing feedback can't shift or hide content. */
.trainer-fixed {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: calc(100dvh - 120px);
    padding-right: 4px;
}
/* keep the result line in a fixed slim slot under the timer so it can't shove the stage */
.trainer-fixed .tr-timer-area .tr-result-line { flex: none; }

@media (max-width: 760px) {
    .trainer-fixed {
        height: calc(100dvh - 84px);
        max-height: calc(100dvh - 84px);
        overflow: hidden;
        display: flex;
        flex-direction: column;
        padding: 0 2px;
    }
    .trainer-fixed .tr-train-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    /* fixed slots, top to bottom */
    .trainer-fixed .tr-train-head { flex: none; margin-bottom: 6px; }
    .trainer-fixed .tr-recap-strip {
        flex: none;
        padding: 6px 10px;
        margin-bottom: 6px;
        gap: 8px;
    }
    .trainer-fixed .tr-recap-strip .rs-t span { display: none; }
    .trainer-fixed .tr-scramble-section {
        flex: none;
        max-height: 104px;
        overflow-y: auto;
        margin-bottom: 4px;
    }

    /* the stage flexes; timer takes whatever remains */
    .trainer-fixed .tr-stage {
        flex: 1;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 6px;
    }
    .trainer-fixed .tr-timer-area {
        flex: 1;
        min-height: 0;
        order: -1;
        overflow: hidden;
    }
    .trainer-fixed .tr-mode-panel,
    .trainer-fixed .tr-smart-rig { min-height: 0; overflow: hidden; }
    .trainer-fixed .tr-rig-cube { height: 100%; min-height: 140px; }
    .trainer-fixed .tr-mode-box .alg-big { font-size: 13px !important; line-height: 1.5; }

    /* revealed case: one slim fixed strip; the capped diagram + 2-line alg fit
       within a bounded height instead of a hard 96px that clipped content */
    .trainer-fixed .tr-case-panel {
        flex: none;
        height: auto;
        max-height: 104px;
        overflow: hidden;
        align-items: center;
        min-width: 0;
    }
    .trainer-fixed .tr-case-panel .tr-alg-line .lab { display: none; }
    .trainer-fixed .tr-case-cube3d { width: 80px; height: 80px; }

    /* result line: fixed slim slot under the timer, single non-wrapping row */
    .trainer-fixed .tr-result-line {
        flex: none;
        min-height: 34px;
        margin-top: 6px;
        gap: 8px;
        flex-wrap: nowrap;
        overflow: hidden;
        white-space: nowrap;
        font-size: 11px;
    }
    .trainer-fixed .tr-result-line .fx { overflow: hidden; text-overflow: ellipsis; }
    .trainer-fixed .tr-result-line .tr-chip { display: none; }

    /* bottom block: one-row case overview */
    .trainer-fixed .tr-bottom { flex: none; }
    .trainer-fixed .tr-case-overview {
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        gap: 6px;
        height: 76px;
        margin-top: 6px;
        padding-top: 6px; /* room for the ×N badges */
        scrollbar-width: none;
    }
    .trainer-fixed .tr-case-overview::-webkit-scrollbar { display: none; }
    .trainer-fixed .tr-ov-tile { min-width: 84px; flex: none; }
}

/* ── drills page rework: 3D-only, delay config, analytics ── */
.tr-smart-target.solo {
    max-width: 640px;
    margin: 0 auto;
}
.tr-delay-field { display: inline-flex; }
.tr-options-menu { padding: 10px 12px; width: 190px; }
.tr-drill-summary {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: var(--tr-ink-2);
    justify-content: center;
    margin: 4px 0;
}
.tr-drill-summary b { color: var(--mud-palette-text-primary); font-variant-numeric: tabular-nums; }
.tr-drill-trend {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 56px;
    margin-top: 10px;
    padding: 4px 2px;
    border-radius: 8px;
    background: var(--tr-tile);
}
.tr-drill-trend .bar { flex: 1; max-width: 16px; border-radius: 2px 2px 0 0; }
.tr-drill-trend .bar.opt { background: var(--tr-green); }
.tr-drill-trend .bar.near { background: var(--tr-amber); }
.tr-drill-trend .bar.far { background: var(--tr-red); }
.tr-smart-actions .tr-smart-history { margin-left: 10px; display: inline-flex; gap: 4px; flex-wrap: wrap; }

/* keep the 3D rig within the screen everywhere */
.tr-rig-cube { height: 240px; max-height: 38vh; }
.tr-rig-cube.big { height: 320px; max-height: 48vh; }
.tr-smart-rig { max-height: calc(38vh + 70px); }
@media (max-width: 760px) {
    .tr-rig-cube { height: 100%; max-height: none; min-height: 120px; }
    .tr-rig-cube.big { height: 240px; max-height: 34vh; }
}

.tr-drill-trend.tall { height: 84px; }
.tr-mini-stats { margin-top: 8px; border-top: 1px solid var(--tr-line); padding-top: 8px; }