/* =========================================================================
   FULL LENGTH TEST — EXAM UI

   TCS-iON layout (section tabs, question palette, bottom action row) with the
   app's own typography and token colours. Token-only, so the same markup is
   a readable exam hall in both dark and light mode.

   Layout is a fixed 100dvh grid — rows: top bar / section tabs / body. Only
   the question text and the palette grid scroll; the chrome never moves. That
   is deliberate: in a timed exam the clock and the action row must not be
   something you have to scroll back to find.
   ========================================================================= */

/* Column flex rather than fixed grid rows: the SSC skin inserts two more chrome
   rows above the tab bar, and a `grid-template-rows` list would have to be kept
   in sync with however many of them are currently display:none. Flex just lets
   the body take whatever is left. */
.ft-exam-shell {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    background: var(--app-bg);
    overscroll-behavior: contain;
}

.ft-exam-shell > .ft-exam-body {
    flex: 1;
    min-height: 0;
}

.ft-exam-shell[hidden] {
    display: none;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */

/* Clock sits dead centre on desktop — same place TCS puts it, and the one
   element a candidate glances at most. */
.ft-clock {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 7px 18px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--brand) 32%, transparent);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 0.82rem;
    font-weight: 700;
    transition: color .3s ease, background-color .3s ease, border-color .3s ease;
}

.ft-clock-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.85;
}

.ft-clock b {
    font-size: 1.02rem;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

/* Under 10 minutes it warms, under 5 it goes red and breathes. Pressure cue,
   not decoration — reduced-motion users still get the colour change. */
.ft-clock.is-warning {
    color: var(--warning);
    background: color-mix(in srgb, var(--warning) 15%, transparent);
    border-color: color-mix(in srgb, var(--warning) 40%, transparent);
}

.ft-clock.is-critical {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 15%, transparent);
    border-color: color-mix(in srgb, var(--danger) 46%, transparent);
    animation: ft-pulse 1.6s ease-in-out infinite;
}

@keyframes ft-pulse {
    50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--danger) 12%, transparent); }
}

.ft-exam-top-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* ── Language switch ─────────────────────────────────────────────────────── */

.ft-lang-switch {
    position: relative;
    width: 66px;
    height: 34px;
    flex: none;
    display: flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-raised);
    cursor: pointer;
    user-select: none;
}

.ft-lang-switch > span:not(.ft-lang-knob) {
    flex: 1;
    text-align: center;
    z-index: 1;
    font-size: 0.86rem;
    font-weight: 800;
    color: var(--text-muted);
    transition: color .2s ease;
}

.ft-lang-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 30px;
    height: 26px;
    border-radius: 999px;
    background: var(--brand);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}

.ft-lang-switch[data-lang="en"] > span:nth-of-type(1),
.ft-lang-switch[data-lang="hi"] > span:nth-of-type(2) {
    color: var(--app-bg);
}

.ft-lang-switch[data-lang="hi"] .ft-lang-knob {
    transform: translateX(30px);
}

.ft-lang-switch:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ── Section tabs ────────────────────────────────────────────────────────── */

/* Row 2 of the exam grid: the section tabs plus the section-submit control.
   The tabs scroll horizontally when they overflow; the button never does, so
   "close this section" stays reachable however many sections a pattern has. */
.ft-tabs-bar {
    display: flex;
    align-items: stretch;
    gap: var(--sp-2);
    padding-right: var(--sp-4);
    background: color-mix(in srgb, var(--surface-raised) 55%, transparent);
    border-bottom: 1px solid var(--line);
    min-width: 0;
}

.ft-tabs {
    flex: 1;
    display: flex;
    gap: 2px;
    padding: 0 var(--sp-5);
    overflow-x: auto;
    scrollbar-width: none;
    min-width: 0;
}

.ft-tabs::-webkit-scrollbar {
    display: none;
}

.ft-tab-count {
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--text-muted) 16%, transparent);
    transition: background-color .18s ease, color .18s ease;
}

.ft-q-marks {
    padding: 4px 11px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: 0.74rem;
    font-weight: 800;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ft-q-chapter {
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--brand-2);
    background: color-mix(in srgb, var(--brand-2) 12%, transparent);
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ft-q-scroll {
    padding: var(--sp-6);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ft-q-passage {
    padding: var(--sp-4) var(--sp-5);
    margin-bottom: var(--sp-5);
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    border-left: 3px solid var(--brand-2);
    background: color-mix(in srgb, var(--surface-raised) 55%, transparent);
    font-size: 0.9rem;
    line-height: 1.75;
    color: var(--text-muted);
}

.ft-q-text {
    font-size: 1.02rem;
    font-weight: 600;
    line-height: 1.7;
    margin-bottom: var(--sp-5);
}

.ft-q-text b,
.ft-q-text strong {
    font-weight: 800;
}

.ft-q-figure {
    margin-bottom: var(--sp-5);
}

.ft-q-figure svg,
.ft-q-figure img {
    max-width: 100%;
    height: auto;
}

/* ── Options ─────────────────────────────────────────────────────────────── */

.ft-options {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    max-width: 760px;
}

.ft-option {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: 13px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-raised) 48%, transparent);
    font-size: 0.94rem;
    line-height: 1.6;
    text-align: left;
    color: var(--text-main);
    font-family: inherit;
    cursor: pointer;
    transition: border-color .16s ease, background-color .16s ease, transform .12s ease;
}

.ft-option:hover {
    border-color: color-mix(in srgb, var(--brand) 40%, transparent);
    background: var(--brand-soft);
}

.ft-option:active {
    transform: scale(0.995);
}

.ft-option:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

.ft-opt-key {
    width: 27px;
    height: 27px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    font-size: 0.8rem;
    font-weight: 800;
    color: var(--text-muted);
    transition: all .16s ease;
}

.ft-option.is-selected {
    border-color: var(--brand);
    background: var(--brand-soft);
}

.ft-option.is-selected .ft-opt-key {
    border-color: var(--brand);
    background: var(--brand);
    color: var(--app-bg);
}

/* Review states, used by the result page's question sheet. */
.ft-option.is-correct {
    border-color: var(--brand-2);
    background: color-mix(in srgb, var(--brand-2) 12%, transparent);
}

.ft-option.is-correct .ft-opt-key {
    border-color: var(--brand-2);
    background: var(--brand-2);
    color: var(--app-bg);
}

.ft-option.is-wrong {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 11%, transparent);
}

.ft-option.is-wrong .ft-opt-key {
    border-color: var(--danger);
    background: var(--danger);
    color: var(--app-bg);
}

.ft-opt-tag {
    margin-left: auto;
    flex: none;
    align-self: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: color-mix(in srgb, var(--text-muted) 18%, transparent);
    color: var(--text-muted);
}

/* ── Action row ──────────────────────────────────────────────────────────── */

/* "Mark for Review" is a toggle, so it has to show its own state — otherwise
   the palette is the only place a candidate can tell whether it took. */
.ft-btn.is-on {
    color: var(--brand);
    border-color: var(--brand);
    background: var(--brand-soft);
}

/* ── Palette ─────────────────────────────────────────────────────────────── */

.ft-palette {
    display: grid;
    grid-template-rows: auto auto auto minmax(0, 1fr) auto;
    min-height: 0;
    background: color-mix(in srgb, var(--surface-raised) 45%, transparent);
}

.ft-palette-head {
    display: flex;
    align-items: center;
    padding: var(--sp-4) var(--sp-4);
    border-bottom: 1px solid var(--line);
}

.ft-palette-head strong {
    font-size: 0.86rem;
    font-weight: 800;
}

.ft-palette-head .ft-icon-btn {
    margin-left: auto;
}

.ft-legend {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-2) var(--sp-3);
    padding: var(--sp-4);
    border-bottom: 1px solid var(--line);
}

.ft-legend-item {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 0.72rem;
    color: var(--text-muted);
    background: none;
    border: 0;
    padding: 2px;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 6px;
    transition: color .16s ease;
}

.ft-legend-item:hover,
.ft-legend-item.is-active {
    color: var(--text-main);
}

.ft-legend-item.is-span-2 {
    grid-column: span 2;
}

.ft-legend-count {
    width: 26px;
    height: 24px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 5px;
    font-size: 0.72rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.ft-palette-section-name {
    padding: var(--sp-3) var(--sp-4) 0;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brand);
}

.ft-palette-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
    gap: var(--sp-2);
    padding: var(--sp-3) var(--sp-4);
    overflow-y: auto;
    overscroll-behavior: contain;
    align-content: start;
}

/* Palette status colours. These five are the exam's shared vocabulary —
   the legend swatches, the palette boxes and the instructions guide all
   pull from the same rules so they can never drift apart. */
.is-not-visited,
.ft-q-box.is-not-visited,
.ft-legend-count.is-not-visited {
    background: color-mix(in srgb, var(--text-muted) 15%, transparent);
    border-color: var(--line);
    color: var(--text-muted);
}

.is-not-answered,
.ft-q-box.is-not-answered,
.ft-legend-count.is-not-answered {
    background: color-mix(in srgb, var(--danger) 78%, transparent);
    color: var(--app-bg);
}

.is-answered,
.ft-q-box.is-answered,
.ft-legend-count.is-answered {
    background: var(--brand-2);
    color: var(--app-bg);
}

.is-marked,
.ft-q-box.is-marked,
.ft-legend-count.is-marked {
    background: color-mix(in srgb, var(--brand) 82%, transparent);
    color: var(--app-bg);
}

.is-answered-marked,
.ft-q-box.is-answered-marked,
.ft-legend-count.is-answered-marked {
    background: var(--brand);
    color: var(--app-bg);
    position: relative;
}

.is-answered-marked::after,
.ft-q-box.is-answered-marked::after {
    content: '';
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--brand-2);
    border: 1px solid var(--app-bg);
}

.ft-palette-foot {
    padding: var(--sp-4);
    border-top: 1px solid var(--line);
}

.ft-scrim {
    display: none;
}

/* ── Paused state ────────────────────────────────────────────────────────── */

/* Pausing must actually hide the questions, otherwise "pause" is a free
   untimed reading session. */
.ft-exam-shell.is-paused .ft-q-scroll,
.ft-exam-shell.is-paused .ft-palette-grid {
    filter: blur(9px);
    pointer-events: none;
    user-select: none;
}

.ft-exam-shell.is-paused .ft-actions {
    pointer-events: none;
    opacity: 0.4;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

.ft-show-mobile {
    display: none !important;
}

@media (max-width: 1024px) {
    .ft-exam-body {
        grid-template-columns: minmax(0, 1fr) 268px;
    }

    .ft-q-scroll,
    .ft-q-head,
    .ft-actions {
        padding-left: var(--sp-5);
        padding-right: var(--sp-5);
    }
}

@media (max-width: 860px) {
    .ft-show-mobile {
        display: inline-grid !important;
    }

    .ft-hide-mobile {
        display: none !important;
    }

    .ft-exam-top {
        padding: var(--sp-2) var(--sp-4);
        flex-wrap: wrap;
    }

    /* Clock leaves the centre and becomes a full-width strip: at this width an
       absolutely centred pill collides with the action buttons. */
    .ft-clock {
        position: static;
        transform: none;
        order: 3;
        width: 100%;
        justify-content: center;
        padding: 5px 14px;
    }

    .ft-exam-id {
        flex: 1;
    }

    .ft-tabs {
        padding: 0 var(--sp-3);
    }

    .ft-tab {
        padding: 11px 13px;
        font-size: 0.79rem;
    }

    .ft-exam-body {
        grid-template-columns: 1fr;
    }

    .ft-q-panel {
        border-right: 0;
    }

    .ft-q-scroll,
    .ft-q-head,
    .ft-actions {
        padding-left: var(--sp-4);
        padding-right: var(--sp-4);
    }

    .ft-q-text {
        font-size: 0.98rem;
    }

    /* Palette becomes a right-hand drawer. */
    .ft-palette {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 120;
        width: min(86vw, 330px);
        background: var(--surface-solid);
        border-left: 1px solid var(--line);
        box-shadow: var(--shadow-md);
        transform: translateX(101%);
        transition: transform .26s cubic-bezier(.4, 0, .2, 1);
    }

    .ft-palette.is-open {
        transform: translateX(0);
    }

    .ft-palette-grid {
        grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    }
}

@media (max-width: 480px) {

    .ft-q-chapter {
        display: none;
    }
}

/* ── Review mode ─────────────────────────────────────────────────────────────
   The finished paper walked in the exam interface itself. The chrome shrinks to
   navigation, and the explanation sits under the options where the candidate is
   already looking. */

.ft-review-explain {
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-width: 760px;
}

.ft-review-verdict {
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.ft-review-verdict.is-correct {
    color: var(--brand-2);
    background: color-mix(in srgb, var(--brand-2) 14%, transparent);
}

.ft-review-verdict.is-incorrect {
    color: var(--danger);
    background: color-mix(in srgb, var(--danger) 14%, transparent);
}

.ft-review-verdict.is-skipped {
    color: var(--text-muted);
    background: color-mix(in srgb, var(--text-muted) 15%, transparent);
}

/* Ask AI, the video solution, Saved, Golden and Report — the same five the
   result screen's review list carries, as one pill sitting in the
   "Question : N" row and facing the question number across the paper. The row
   is the only piece of chrome above the question that is ours rather than the
   replica's, which is why the controls live there and not beside the options. */
.q-no-title-row {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
}

.ft-review-toolbar {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 5px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--surface);
}

.ft-rt-btn,
.ft-review-toolbar .qr-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
}

.ft-rt-btn:hover,
.ft-review-toolbar .qr-btn:hover {
    color: var(--text-main);
    background: color-mix(in srgb, var(--text-muted) 14%, transparent);
}

.ft-rt-btn.is-ai:hover { color: var(--brand); }
.ft-rt-btn.is-video:hover { color: var(--danger); }

/* Saved and Golden both light up amber, exactly as they do in the result
   screen's review list and in every subject app. */
.ft-rt-btn.is-on {
    color: var(--warning);
}

@media (max-width: 720px) {
    /* The labels go; the icons and the pill stay. */
    .ft-rt-btn span { display: none; }
    .ft-review-toolbar { gap: 0; }
}

.ft-review-explain .ft-ai-slot:empty {
    display: none;
}

/* Correct / Incorrect / Skipped, in the palette column. The replica's palette
   has no legend strip to hang a filter off — its SYMBOLS panel explains the
   states instead — so in review this takes the PART analysis card's place. */
.ft-review-filter {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

.ft-review-filter-title {
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 2px;
}

.ft-rf-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.ft-rf-btn b {
    font-variant-numeric: tabular-nums;
}

.ft-rf-btn:hover {
    color: var(--text-main);
    background: color-mix(in srgb, var(--text-muted) 10%, transparent);
}

/* Each filter wears the colour its palette boxes already have, so the row and
   the grid say the same thing. */
.ft-rf-btn.is-answered { color: var(--brand-2); }
.ft-rf-btn.is-marked { color: var(--danger); }

.ft-rf-btn.is-active {
    border-color: currentColor;
    background: color-mix(in srgb, currentColor 12%, transparent);
}

/* Read this paper in the other console. Quieter than the filters above it —
   it changes the frame, not what is being looked at. */
.ft-rf-swap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 9px;
    border: 1px dashed var(--line);
    border-radius: 7px;
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 700;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}

.ft-rf-swap:hover {
    color: var(--brand);
    border-color: color-mix(in srgb, var(--brand) 45%, transparent);
}

.ft-review-explain .ft-btn {
    align-self: flex-start;
}

/* A reviewed option is a statement, not a control. */
.ft-exam-shell.is-reviewing .ft-option:hover {
    border-color: var(--line);
    background: color-mix(in srgb, var(--surface-raised) 48%, transparent);
}

.ft-exam-shell.is-reviewing .ft-option.is-correct:hover {
    border-color: var(--brand-2);
    background: color-mix(in srgb, var(--brand-2) 12%, transparent);
}

.ft-exam-shell.is-reviewing .ft-option.is-wrong:hover {
    border-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 11%, transparent);
}


/* ── Exam workspace layout ──────────────────────────────────────────────────
   This used to live in ft-ssc.css, which meant the exam had no layout of its
   own: unlink that skin and the two columns stacked, the question column
   collapsed to 85px, and the shell scrolled to 5,635px. Layout is not a skin,
   so it belongs here where both interfaces get it.                          */

.ft-exam-shell {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    overflow: hidden;
}

.exam-workspace-grid {
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: stretch;
    gap: 14px;
    padding: 14px 16px 16px;
}

.exam-question-column {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* The question is what scrolls; the column around it does not, so the action
   row and the palette stay put while a long passage moves. */
.q-content-box {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.q-scroll-area {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.exam-palette-column {
    flex: 0 0 300px;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
}

@media (max-width: 860px) {
    /* The palette becomes a drawer below this width; both skins drive it
       through .is-collapsed, so the column simply leaves the flow. */
    .exam-palette-column {
        flex-basis: 260px;
        max-width: 260px;
    }
}

/* ── Panels and overlays ────────────────────────────────────────────────────
   SYMBOLS, INSTRUCTIONS, OVERALL TEST SUMMARY, the pause screen and the submit
   confirmation. All of them live as siblings of the workspace inside the exam
   shell, so if they sit in the flex flow they take their height out of the
   paper: measured at 1,408px between them, which squeezed the question area to
   28px. They are overlays and must be out of flow whether or not a skin has an
   opinion about how they look.

   Opened by .is-open (FtRuntime.openPanel), so that is what reveals them.    */

.exam-panel,
.exam-pause-overlay,
.exam-confirm-overlay {
    position: fixed;
    z-index: 400;
    display: none;
}

.exam-panel {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: min(760px, 92vw);
    max-height: 84dvh;
    overflow-y: auto;
}

.exam-panel.is-open {
    display: block;
}

/* The pause and submit screens cover the paper rather than float above it —
   nothing behind them should be readable while they are up. */
.exam-pause-overlay,
.exam-confirm-overlay {
    inset: 0;
    z-index: 500;
    align-items: center;
    justify-content: center;
}

.exam-pause-overlay.is-open,
.exam-confirm-overlay.is-open,
.exam-pause-overlay[style*="flex"],
.exam-confirm-overlay[style*="flex"] {
    display: flex;
}

/* The SSC replica skin that wears this same markup lives in ft-eduquity.css,
   ported from app/ssc/style.css. A block of 35 rules used to sit here under
   `.ft-skin-system`, dressing the replica chrome in the study console’s --tm-*
   tokens — but nothing has stamped that class since ft-premium.css gave the
   premium console an identity of its own, and this page loads no stylesheet
   that defines --tm-*. It was dead twice over and is gone. */