/* ==========================================================================
   Aksh Niti - Calc Lab
   --------------------------------------------------------------------------
   Built on the app's existing tokens (--surface-solid, --line, --text-main,
   --brand …) so light and dark come for free and nothing here has to define a
   palette. The one addition is --cl-accent, the violet already used in the
   portal's brand-mark gradient, reserved here for the two surfaces that are
   Calc Lab's own: the Vault and the Method Race winner.

   Semantic colour (success / warning / danger) stays separate from the accent.
   Timer state, cost bars and mastery all read as green-amber-coral; the accent
   never carries meaning, so a learner never has to decode two colour systems.
   ========================================================================== */

/* Calc Lab takes the whole window. It was a centred dialog first and read as
   something that had popped up on top of the app rather than a place you had
   gone to - the rail and the full bleed are what fix that. */
.cl-backdrop {
    --cl-accent: #9b7bff;
    --cl-accent-soft: rgba(155, 123, 255, 0.16);
    --cl-rail-w: 214px;

    /* ---- type: three roles, not one -----------------------------------
       The subject here is digits, and until now every number in the tool was
       set in the body face at a body weight - the one thing the whole feature
       is about was the least considered thing on the screen.

       display  Archivo. Tight apertures, a real weight range and true tabular
                figures, so 9,312 can be set at 44px and still be a number
                rather than a decoration. Questions, answers, clocks, scores.
       data     JetBrains Mono. Columns that have to line up - the scratchpad
                tape, the working inside a step, an options list.
       body     Inter, unchanged, because the prose is not the point.

       Every stack falls back to the app's own face and then to the system's,
       so an offline first load looks plain rather than broken. Inter already
       comes from Google Fonts, so this adds no failure mode that was not
       already there. */
    --cl-display: 'Archivo', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --cl-data: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* ---- material: four planes ----------------------------------------
       Everything used to be one plane with a hairline around it, which is
       what made the tool read flat next to the rest of the app. An
       instrument has depth: the chrome sits back, cards sit on the ground,
       the thing you are working on is RECESSED like a screen set into a
       case, and only the primary action comes forward. */
    --cl-well: color-mix(in srgb, var(--app-bg) 88%, #000 12%);
    --cl-well-line: color-mix(in srgb, var(--line) 70%, transparent);
    --cl-inset: inset 0 1px 3px rgba(0, 0, 0, 0.45), inset 0 0 0 1px var(--cl-well-line);
    --cl-lift: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 28px rgba(0, 0, 0, 0.32);
    --cl-lift-hi: 0 2px 6px rgba(0, 0, 0, 0.4), 0 20px 52px rgba(0, 0, 0, 0.45);
    --cl-glow: 0 0 0 1px color-mix(in srgb, var(--cl-accent) 55%, transparent),
               0 6px 26px color-mix(in srgb, var(--cl-accent) 26%, transparent);

    /* ---- radius: the app's scale, not a per-component guess ------------
       premium-ui.css has declared --radius and --radius-sm all along and this
       file ignored them, picking 8, 9, 10, 11, 12, 13 and 14 by hand. Three
       steps, and everything snaps to one of them. */
    --cl-r-lg: var(--radius, 20px);
    --cl-r: var(--radius-sm, 14px);
    --cl-r-sm: 10px;

    /* ---- motion --------------------------------------------------------
       One curve for everything that moves, so the whole surface feels like
       one machine. Slightly overshooting on the way out, because a control
       that settles reads as physical and one that stops dead reads as a
       redraw. */
    --cl-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --cl-fast: 0.14s;
    --cl-slow: 0.32s;

    position: fixed;
    inset: 0;
    z-index: 1200;
    background: var(--app-bg, #0c0f15);
    overscroll-behavior: contain;
}

html.theme-light .cl-backdrop {
    --cl-accent: #7b3ff2;
    --cl-accent-soft: rgba(123, 63, 242, 0.10);
    /* A recess in a light room is a shade cooler, not darker-and-muddier. */
    --cl-well: #eef2f9;
    --cl-well-line: color-mix(in srgb, var(--line) 85%, transparent);
    --cl-inset: inset 0 1px 2px rgba(19, 26, 42, 0.07), inset 0 0 0 1px var(--cl-well-line);
    --cl-lift: 0 1px 2px rgba(19, 26, 42, 0.05), 0 8px 24px rgba(19, 26, 42, 0.07);
    --cl-lift-hi: 0 2px 6px rgba(19, 26, 42, 0.06), 0 18px 46px rgba(19, 26, 42, 0.11);
}

/* Everything that moves, moves on the same curve or not at all. */
@media (prefers-reduced-motion: reduce) {
    .cl-backdrop,
    .cl-backdrop * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* Scoped to Calc Lab rather than set globally, so nothing else in the app
   shifts. Without it a width:100% input adds its own padding and border on
   top and sits wider than the column holding it. */
.cl-backdrop,
.cl-backdrop *,
.cl-backdrop *::before,
.cl-backdrop *::after {
    box-sizing: border-box;
}

body.cl-open {
    overflow: hidden;
}

.cl-page {
    display: grid;
    grid-template-columns: var(--cl-rail-w) minmax(0, 1fr);
    height: 100%;
    background:
        radial-gradient(900px 460px at 88% -14%, var(--brand-soft), transparent 64%),
        radial-gradient(680px 380px at -6% 2%, var(--cl-accent-soft), transparent 60%),
        var(--app-bg, #0c0f15);
    color: var(--text-main, #eef2f8);
}

/* ----- rail -------------------------------------------------------------- */

.cl-rail {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 12px;
    border-right: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-solid) 72%, transparent);
    overflow-y: auto;
}

.cl-rail-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 14px;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.cl-rail-mark {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: var(--cl-r);
    background: linear-gradient(140deg, var(--brand), var(--cl-accent));
    color: #fff;
    font-size: 14px;
}

.cl-rail-name {
    display: flex;
    flex-direction: column;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.cl-rail-name small {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-muted);
    letter-spacing: 0;
}

/* flex: none, or the nav shrinks to fit the rail instead of making the rail
   scroll - and the items it squeezes out are the last ones, which is where
   the group shortcuts live now but was where the Scratchpad lived before. */
.cl-rail-nav {
    display: flex;
    flex-direction: column;
    flex: none;
    gap: 2px;
}

/* Splits the rail into "things to do" and "shortcuts into the catalogue", so
   the second half reads as optional rather than as more of the first. */
.cl-rail-label {
    padding: 14px 10px 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cl-rail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--cl-r-sm);
    border: 1px solid transparent;
    background: none;
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

.cl-rail-item i {
    flex: none;
    width: 16px;
    text-align: center;
    font-size: 12px;
}

.cl-rail-item:hover {
    background: var(--surface-raised);
    color: var(--text-main);
}

.cl-rail-item.is-on {
    background: var(--brand-soft);
    border-color: color-mix(in srgb, var(--brand) 34%, transparent);
    color: var(--brand);
}

/* ----- main column ------------------------------------------------------- */

/* min-height:0 matters: without it a grid item defaults to min-content height,
   .cl-body grows to fit all its content instead of scrolling, and the page
   spills past the window. */
.cl-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

/* Content stays in a readable measure however wide the window is. */
.cl-col {
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
}

/* ----- chrome ----------------------------------------------------------- */

.cl-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface-solid) 72%, transparent);
}

.cl-head-text {
    flex: 1;
    min-width: 0;
}

.cl-head-text h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.cl-head-text p {
    margin: 2px 0 0;
    font-size: 12.5px;
    color: var(--text-muted);
}

.cl-back,
.cl-close {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: var(--cl-r);
    border: 1px solid var(--line);
    background: var(--surface-solid);
    color: var(--text-muted);
    font-size: 15px;
    cursor: pointer;
}

.cl-close {
    font-size: 22px;
    line-height: 1;
}

.cl-back:hover,
.cl-close:hover {
    color: var(--text-main);
    border-color: var(--brand);
}

.cl-body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 4px 22px 40px;
}

.cl-section {
    padding-top: 20px;
}

/* ----- hub intro --------------------------------------------------------- */

.cl-intro {
    border: 1px solid var(--line);
    border-radius: var(--cl-r);
    background: var(--surface-raised);
    padding: 16px 18px;
}

.cl-intro h3 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 700;
}

.cl-intro-two {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

.cl-intro-two p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-muted);
}

.cl-intro-two b {
    color: var(--text-main);
}

.cl-intro-stat {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--line);
    font-size: 11.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.cl-h3 {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.cl-count {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.cl-note {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-muted);
}

.cl-soon {
    border-left: 2px solid var(--cl-accent);
    padding-left: 10px;
}

/* ----- mode grid --------------------------------------------------------- */

.cl-modes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 12px;
}

/* A hero is a card you look at, not a row you scan past: the icon is a real
   plate, the title is set in the display face, and the whole thing has room
   to breathe. */
.cl-mode.is-hero {
    align-items: flex-start;
    padding: 20px 20px 18px;
    border-radius: var(--cl-r-lg);
    gap: 14px;
}

.cl-mode.is-hero .cl-mode-ico {
    width: 42px;
    height: 42px;
    font-size: 16px;
    border-radius: var(--cl-r);
    background: linear-gradient(140deg, var(--cl-accent-soft), transparent), var(--surface-solid);
    color: var(--cl-accent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--cl-accent) 30%, transparent);
}

.cl-mode.is-hero .cl-mode-txt strong {
    font-family: var(--cl-display);
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.cl-mode.is-hero .cl-mode-txt small {
    font-size: 12px;
    line-height: 1.5;
}

.cl-mode-go {
    align-self: center;
    transition: transform var(--cl-fast) var(--cl-ease), color var(--cl-fast) var(--cl-ease);
}

.cl-mode:hover .cl-mode-go {
    transform: translateX(3px);
    color: var(--cl-accent);
}

/* The second tier. Small, square-ish, three or four across - they read as a
   toolbar rather than as more of the list above them. */
.cl-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.cl-tile {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 15px 15px 14px;
    border-radius: var(--cl-r);
    border: 1px solid var(--line);
    background: var(--surface-raised);
    box-shadow: var(--cl-lift);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform var(--cl-fast) var(--cl-ease),
                box-shadow var(--cl-fast) var(--cl-ease),
                border-color var(--cl-fast) var(--cl-ease);
}

.cl-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--cl-lift-hi);
    border-color: color-mix(in srgb, var(--cl-accent) 55%, var(--line));
}

.cl-tile:active {
    transform: translateY(0) scale(0.995);
    transition-duration: 0.06s;
}

.cl-tile i {
    font-size: 14px;
    color: var(--cl-accent);
}

.cl-tile strong {
    font-family: var(--cl-display);
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-main);
}

.cl-tile small {
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-muted);
}

.cl-mode {
    display: flex;
    align-items: center;
    gap: 11px;
    text-align: left;
    padding: 13px 14px;
    border-radius: var(--cl-r);
    border: 1px solid var(--line);
    background: var(--surface-raised);
    color: inherit;
    cursor: pointer;
}

/* Cards sit ON the ground and lift when reached for. Two pixels and a
   shadow is the whole difference between a list of links and a surface you
   can pick things up off. */
.cl-mode,
.cl-vrow,
.cl-trick,
.cl-setcard,
.cl-launch-card,
.cl-listrow,
.cl-planstep,
.cl-examstat,
.cl-padrow,
.cl-today {
    box-shadow: var(--cl-lift);
    transition: transform var(--cl-fast) var(--cl-ease),
                box-shadow var(--cl-fast) var(--cl-ease),
                border-color var(--cl-fast) var(--cl-ease);
}

.cl-mode:hover,
.cl-vrow:hover,
.cl-trick:hover,
.cl-setcard:hover,
.cl-launch-card:not(.is-test):hover,
.cl-today:hover {
    transform: translateY(-2px);
    box-shadow: var(--cl-lift-hi);
    border-color: color-mix(in srgb, var(--cl-accent) 55%, var(--line));
}

/* Pressed goes the other way and goes there fast, so the surface reads as
   something that gives rather than something that flickers. */
.cl-mode:active,
.cl-vrow:active,
.cl-trick:active,
.cl-setcard:active,
.cl-launch-card:active,
.cl-today:active {
    transform: translateY(0) scale(0.995);
    transition-duration: 0.06s;
}

/* No longer full-width: "hero" now means a card in the grid rather than a
   band across it, because eight bands stacked is the list this was trying to
   stop being. */
.cl-mode.is-hero {
    background: linear-gradient(150deg, var(--cl-accent-soft), transparent 58%), var(--surface-raised);
    border-color: color-mix(in srgb, var(--cl-accent) 30%, var(--line));
}

.cl-mode-ico {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: var(--cl-r);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 14px;
}

.cl-mode.is-hero .cl-mode-ico {
    background: var(--cl-accent-soft);
    color: var(--cl-accent);
}

.cl-mode-txt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cl-mode-txt strong {
    font-size: 13.5px;
    font-weight: 700;
}

.cl-mode-txt small {
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.35;
}

.cl-mode-go {
    flex: none;
    font-size: 11px;
    color: var(--text-muted);
}

/* ----- vault rows and cards --------------------------------------------- */

.cl-vlist,
.cl-tlist {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cl-vrow,
.cl-trick {
    display: flex;
    align-items: center;
    gap: 11px;
    text-align: left;
    padding: 11px 13px;
    border-radius: var(--cl-r);
    border: 1px solid var(--line);
    background: var(--surface-raised);
    color: inherit;
    cursor: pointer;
}

.cl-vrow:hover,
.cl-trick:hover {
    border-color: var(--brand);
}

.cl-vrow-ico {
    flex: none;
    width: 28px;
    text-align: center;
    color: var(--text-muted);
}

.cl-vrow-txt,
.cl-trick-txt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.cl-vrow-txt strong,
.cl-trick-txt strong {
    font-size: 13px;
    font-weight: 600;
}

.cl-vrow-txt small,
.cl-trick-txt small {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.35;
}

.cl-vrow-stat {
    flex: none;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.cl-vrow-stat b {
    font-family: var(--cl-display);
    font-variant-numeric: tabular-nums lining-nums;
    font-size: 14px;
    font-weight: 700;
}

.cl-vrow-stat small {
    font-size: 10.5px;
    color: var(--text-muted);
    margin-left: 2px;
}

.cl-diff {
    flex: none;
    font-size: 7px;
    letter-spacing: 1.5px;
    color: var(--brand);
}

.cl-diff-off {
    color: var(--line);
}

.cl-setgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px;
}

.cl-setcard {
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-align: left;
    padding: 14px;
    border-radius: var(--cl-r);
    border: 1px solid var(--line);
    background: var(--surface-raised);
    color: inherit;
    cursor: pointer;
}

.cl-setcard:hover {
    border-color: var(--cl-accent);
}

.cl-setcard-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cl-setcard-head i {
    color: var(--cl-accent);
    font-size: 13px;
}

.cl-setcard-head strong {
    font-size: 14px;
    font-weight: 700;
}

.cl-setcard small {
    font-size: 11.5px;
    color: var(--text-muted);
}

.cl-setcard-stat {
    font-size: 11px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* Named -progress, not -rail: the sidebar took that name and a five-pixel
   "display: block; height: 5px" quietly won the cascade over it. */
.cl-progress {
    display: block;
    height: 5px;
    border-radius: 3px;
    background: var(--surface-solid);
    overflow: hidden;
}

.cl-progress i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--success, #4cc38a);
}

/* ----- chips ------------------------------------------------------------- */

.cl-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cl-chips-scroll {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

.cl-chip {
    flex: none;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--surface-raised);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
}

.cl-chip b {
    color: var(--text-main);
    font-variant-numeric: tabular-nums;
}

.cl-chip:hover {
    border-color: var(--brand);
    color: var(--text-main);
}

.cl-chip.is-on {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand);
}

/* ----- mixed practice and mixed test -------------------------------------- */

.cl-mix-sizes {
    margin-bottom: 12px;
}

.cl-mix-sizes .cl-chip {
    padding: 9px 15px;
    font-size: 13px;
}

/* The typed size sits on the same line as the chips it competes with, so it
   reads as one more way of answering the same question rather than a
   separate setting. It wraps to its own line when there is no room. */
.cl-mix-custom {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cl-mix-custom label {
    font-size: 12px;
    color: var(--text-muted);
}

/* .cl-num is sized for the race screen, where two numbers are the whole
   subject of the page. Here it is a count sitting beside a caption, so it
   comes back down to the size of the chips it is an alternative to. */
.cl-mix-custom .cl-num {
    width: 118px;
    padding: 9px 12px;
    font-size: 15px;
    text-align: center;
}

/* ----- method race ------------------------------------------------------- */

.cl-race-input {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.cl-num {
    font-family: var(--cl-display);
    width: 120px;
    padding: 12px 10px;
    text-align: center;
    font-size: 26px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    border-radius: var(--cl-r);
    border: 1px solid var(--line);
    background: var(--surface-raised);
    color: var(--text-main);
}

.cl-num:focus {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
    border-color: var(--brand);
}

.cl-times {
    font-size: 20px;
    color: var(--text-muted);
}

.cl-answer {
    margin-top: 14px;
    text-align: center;
    font-size: 15px;
    color: var(--text-muted);
}

.cl-answer b {
    font-family: var(--cl-display);
    font-size: 26px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--text-main);
    margin-left: 4px;
}

.cl-race {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cl-method {
    border: 1px solid var(--line);
    border-radius: var(--cl-r);
    background: var(--surface-raised);
    padding: 11px 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.cl-method.is-win {
    border-color: color-mix(in srgb, var(--success) 42%, transparent);
    background: linear-gradient(100deg, color-mix(in srgb, var(--success) 12%, transparent), transparent 62%), var(--surface-raised);
}

.cl-method-top {
    display: flex;
    align-items: baseline;
    gap: 8px;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.cl-method-name {
    font-size: 13px;
    font-weight: 700;
}

.cl-badge {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--success);
    border: 1px solid color-mix(in srgb, var(--success) 40%, transparent);
    border-radius: 999px;
    padding: 2px 7px;
}

.cl-method-secs {
    font-family: var(--cl-display);
    margin-left: auto;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cl-method.is-win .cl-method-secs {
    color: var(--success);
}

.cl-costbar {
    height: 6px;
    border-radius: 3px;
    background: var(--surface-solid);
    overflow: hidden;
}

.cl-costbar i {
    display: block;
    height: 100%;
    border-radius: 3px;
}

.cl-costbar .is-good {
    background: var(--success, #4cc38a);
}

.cl-costbar .is-warn {
    background: var(--warning, #f0b429);
}

.cl-costbar .is-bad {
    background: var(--danger, #f2776b);
}

.cl-cost {
    display: flex;
    gap: 12px;
    font-size: 10.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

/* ----- steps ------------------------------------------------------------- */

.cl-steps {
    border-top: 1px dashed var(--line);
    padding-top: 9px;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.cl-step {
    display: flex;
    gap: 9px;
    align-items: baseline;
}

.cl-step-n {
    flex: none;
    width: 17px;
    height: 17px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    background: var(--surface-solid);
    color: var(--text-muted);
    font-size: 9.5px;
    font-variant-numeric: tabular-nums;
}

.cl-step-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.cl-step-math {
    font-family: var(--cl-data);
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.cl-step-why {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}

.cl-step-note {
    margin: 2px 0 0 26px;
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}

/* ----- verify strip ------------------------------------------------------ */

.cl-verify {
    border: 1px solid var(--line);
    border-radius: var(--cl-r);
    background: var(--surface-raised);
    padding: 12px 14px;
}

.cl-verify h4 {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 700;
}

.cl-verify p {
    margin: 0 0 4px;
    font-size: 12px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.cl-warn-line {
    color: var(--warning) !important;
    line-height: 1.45;
}

/* ----- lesson: the rule -------------------------------------------------- */

.cl-rule {
    margin: 0;
    padding: 0 0 0 26px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    counter-reset: rule;
    list-style: none;
}

.cl-rule li {
    position: relative;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-main);
    counter-increment: rule;
}

.cl-rule li::before {
    content: counter(rule);
    position: absolute;
    left: -26px;
    top: 1px;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ----- lesson: when / pitfall / cost ------------------------------------- */

.cl-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 8px;
}

.cl-fact {
    border: 1px solid var(--line);
    border-radius: var(--cl-r);
    background: var(--surface-raised);
    padding: 12px 14px;
}

.cl-fact h4 {
    margin: 0 0 5px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-muted);
}

.cl-fact h4 i {
    font-size: 11px;
    color: var(--brand);
}

.cl-fact p {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-main);
}

.cl-fact.is-warn {
    border-color: color-mix(in srgb, var(--warning) 32%, transparent);
    background: color-mix(in srgb, var(--warning) 8%, var(--surface-raised));
}

.cl-fact.is-warn h4,
.cl-fact.is-warn h4 i {
    color: var(--warning);
}

/* ----- lesson: worked examples ------------------------------------------- */

.cl-example {
    border: 1px solid var(--line);
    border-radius: var(--cl-r);
    background: var(--surface-raised);
    padding: 12px 14px;
    margin-bottom: 8px;
}

.cl-example:last-child {
    margin-bottom: 0;
}

.cl-example-q {
    font-family: var(--cl-data);
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 9px;
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.cl-example-q b {
    margin-left: auto;
    font-size: 17px;
    font-weight: 700;
    color: var(--success);
}

.cl-example .cl-steps {
    border-top-style: solid;
    border-top-color: var(--line);
}

/* ----- practice ---------------------------------------------------------- */

.cl-btn-sm {
    flex: none;
    padding: 8px 13px;
    font-size: 12px;
}

.cl-practice-out {
    margin-top: 8px;
}

.cl-verdict {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

.cl-verdict.is-right {
    background: color-mix(in srgb, var(--success) 16%, transparent);
    color: var(--success);
}

.cl-verdict.is-wrong {
    background: color-mix(in srgb, var(--danger) 16%, transparent);
    color: var(--danger);
}

/* ----- practice / test launcher ------------------------------------------ */

.cl-launch {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 8px;
}

.cl-launch-card {
    display: flex;
    gap: 12px;
    text-align: left;
    padding: 15px 16px;
    border-radius: var(--cl-r);
    border: 1px solid var(--line);
    background: var(--surface-raised);
    color: inherit;
    cursor: pointer;
}

button.cl-launch-card:hover {
    border-color: var(--brand);
}

.cl-launch-card.is-test {
    cursor: default;
    background: linear-gradient(130deg, var(--cl-accent-soft), transparent 66%), var(--surface-raised);
    border-color: color-mix(in srgb, var(--cl-accent) 30%, var(--line));
}

.cl-launch-ico {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: var(--cl-r);
    background: var(--brand-soft);
    color: var(--brand);
    font-size: 14px;
}

.cl-launch-card.is-test .cl-launch-ico {
    background: var(--cl-accent-soft);
    color: var(--cl-accent);
}

.cl-launch-txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.cl-launch-txt strong {
    font-size: 14.5px;
    font-weight: 700;
}

.cl-launch-txt small {
    font-size: 11.5px;
    line-height: 1.45;
    color: var(--text-muted);
}

/* ----- the run itself ---------------------------------------------------- */

.cl-runbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.cl-runbar-mode {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--cl-accent);
    border: 1px solid color-mix(in srgb, var(--cl-accent) 34%, transparent);
    background: var(--cl-accent-soft);
    border-radius: 999px;
    padding: 3px 10px;
}

.cl-runbar-progress {
    font-size: 12.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.cl-runbar-clock {
    font-family: var(--cl-display);
    margin-left: auto;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
}

.cl-progressline {
    height: 4px;
    border-radius: 2px;
    background: var(--surface-raised);
    overflow: hidden;
    margin-bottom: 18px;
}

.cl-progressline i {
    display: block;
    height: 100%;
    border-radius: 2px;
    background: var(--cl-accent);
}

/* The question gets the room. Nothing else on the screen competes with it. */
/* The screen the instrument reads out on. Recessed rather than raised: the
   question is the one thing on the page you are looking INTO, and giving it
   the same card treatment as the buttons around it was what made every run
   screen read as a form. */
.cl-question {
    position: relative;
    margin: 18px 0 16px;
    padding: 30px 22px 28px;
    border-radius: var(--cl-r-lg);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--cl-accent) 4%, transparent), transparent 42%),
        var(--cl-well);
    box-shadow: var(--cl-inset);
    font-family: var(--cl-display);
    font-size: clamp(30px, 6.4vw, 46px);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.15;
    font-variant-numeric: tabular-nums lining-nums;
    text-align: center;
    text-wrap: balance;
    animation: cl-read var(--cl-slow) var(--cl-ease) both;
}

/* A hairline of accent along the top edge, the way a lit panel catches its
   own bezel. It is one pixel and it is the difference between a recess and
   a hole. */
.cl-question::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    border-radius: var(--cl-r-lg) var(--cl-r-lg) 0 0;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cl-accent) 60%, transparent), transparent);
}

/* Each new question arrives rather than replaces. 8px is enough to read as
   a change and short enough not to be a transition you wait for. */
@keyframes cl-read {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.cl-answerbar {
    display: flex;
    gap: 8px;
    max-width: 460px;
    margin: 0 auto;
}

.cl-answerbox {
    flex: 1;
    min-width: 0;
    padding: 15px 17px;
    border-radius: var(--cl-r);
    border: 1px solid var(--cl-well-line);
    background: var(--cl-well);
    box-shadow: var(--cl-inset);
    color: var(--text-main);
    font-family: var(--cl-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums lining-nums;
    transition: box-shadow var(--cl-fast) var(--cl-ease), border-color var(--cl-fast) var(--cl-ease);
}

.cl-answerbox:focus {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

.cl-answerbox[disabled] {
    opacity: 0.65;
}

.cl-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 8px;
    max-width: 520px;
    margin: 0 auto;
}

.cl-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 15px;
    border-radius: var(--cl-r);
    border: 1px solid var(--line);
    background: var(--surface-raised);
    color: inherit;
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-align: left;
    cursor: pointer;
}

.cl-option:hover {
    border-color: var(--brand);
}

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

.cl-option-key {
    flex: none;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    display: grid;
    place-items: center;
    background: var(--surface-solid);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
}

/* ----- results ----------------------------------------------------------- */

.cl-result {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    padding: 24px 26px;
    border-radius: var(--cl-r-lg);
    border: 1px solid var(--line);
    background: var(--surface-raised);
    box-shadow: var(--cl-lift);
    animation: cl-rise var(--cl-slow) var(--cl-ease) both;
}

@keyframes cl-rise {
    from { opacity: 0; transform: translateY(14px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

.cl-result.is-good {
    border-color: color-mix(in srgb, var(--success) 42%, transparent);
    background: linear-gradient(120deg, color-mix(in srgb, var(--success) 12%, transparent), transparent 62%), var(--surface-raised);
}

.cl-result.is-warn {
    border-color: color-mix(in srgb, var(--warning) 42%, transparent);
    background: linear-gradient(120deg, color-mix(in srgb, var(--warning) 12%, transparent), transparent 62%), var(--surface-raised);
}

.cl-result.is-bad {
    border-color: color-mix(in srgb, var(--danger) 42%, transparent);
    background: linear-gradient(120deg, color-mix(in srgb, var(--danger) 12%, transparent), transparent 62%), var(--surface-raised);
}

.cl-result-score {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-variant-numeric: tabular-nums;
}

.cl-result-score b {
    font-family: var(--cl-display);
    font-size: 52px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
    font-variant-numeric: tabular-nums lining-nums;
}

.cl-result-score span {
    font-size: 15px;
    color: var(--text-muted);
}

.cl-result-meta p {
    margin: 0 0 3px;
    font-size: 13px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.cl-result-meta b {
    color: var(--text-main);
    font-size: 15px;
}


/* ----- option states after answer (practice feedback in place) ----------- */

.cl-option:disabled {
    cursor: default;
    opacity: 0.7;
}

.cl-option.is-right-choice {
    border-color: color-mix(in srgb, var(--success) 60%, transparent);
    background: color-mix(in srgb, var(--success) 14%, var(--surface-raised));
    color: var(--success);
    opacity: 1;
}

.cl-option.is-wrong-choice {
    border-color: color-mix(in srgb, var(--danger) 60%, transparent);
    background: color-mix(in srgb, var(--danger) 14%, var(--surface-raised));
    color: var(--danger);
    opacity: 1;
}

/* Reveal the correct answer when the chosen one was wrong. */
.cl-option.is-correct-reveal {
    border-color: color-mix(in srgb, var(--success) 40%, transparent);
    background: color-mix(in srgb, var(--success) 8%, var(--surface-raised));
    opacity: 1;
}

/* ----- mode-toggle (type ↔ options) ---------------------------------------- */

.cl-run-toggle {
    text-align: center;
    margin-top: 10px;
}

.cl-run-toggle-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
}

.cl-run-toggle-btn:hover {
    border-color: var(--line);
    color: var(--text-main);
}
/* ----- forms ------------------------------------------------------------- */

.cl-form {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
}

.cl-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cl-field>span {
    font-size: 11.5px;
    color: var(--text-muted);
}

.cl-text {
    width: 100%;
    padding: 10px 12px;
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    border-radius: var(--cl-r);
    border: 1px solid var(--line);
    background: var(--surface-raised);
    color: var(--text-main);
}

.cl-text:focus {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
}

.cl-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.cl-choice,
.cl-toggle {
    padding: 7px 11px;
    border-radius: var(--cl-r-sm);
    border: 1px solid var(--line);
    background: var(--surface-raised);
    color: var(--text-muted);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.cl-choice.is-on,
.cl-toggle.is-on {
    background: var(--brand-soft);
    border-color: var(--brand);
    color: var(--brand);
}

.cl-form-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* The one control on any screen that comes forward. */
.cl-btn {
    position: relative;
    padding: 11px 18px;
    border-radius: var(--cl-r);
    border: 1px solid var(--brand);
    background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 92%, #fff 8%), var(--brand));
    color: #08101f;
    font-family: var(--cl-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.005em;
    cursor: pointer;
    box-shadow: var(--cl-lift);
    transition: transform var(--cl-fast) var(--cl-ease),
                box-shadow var(--cl-fast) var(--cl-ease),
                filter var(--cl-fast) var(--cl-ease);
}

.cl-btn:hover:not([disabled]) {
    transform: translateY(-1px);
    box-shadow: var(--cl-lift-hi);
    filter: brightness(1.06);
}

.cl-btn:active:not([disabled]) {
    transform: translateY(1px);
    box-shadow: none;
    transition-duration: 0.06s;
}

html.theme-light .cl-btn {
    color: #fff;
}

.cl-btn[disabled] {
    opacity: 0.4;
    cursor: default;
}

.cl-btn-ghost {
    background: var(--surface-raised);
    border-color: var(--line);
    color: var(--text-muted);
}

.cl-btn-ghost:hover:not([disabled]) {
    color: var(--text-main);
    border-color: var(--brand);
}

.cl-inapt {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--warning);
    border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent);
    background: color-mix(in srgb, var(--warning) 10%, transparent);
    border-radius: var(--cl-r);
    padding: 11px 13px;
}

/* ----- flip cards -------------------------------------------------------- */

.cl-chunkbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.cl-chunk-dots {
    display: flex;
    gap: 3px;
}

.cl-chunk-dots i {
    width: 18px;
    height: 3px;
    border-radius: 2px;
    background: var(--surface-raised);
}

.cl-chunk-dots i.is-on {
    background: var(--cl-accent);
}

.cl-chunk-dots i.is-done {
    background: color-mix(in srgb, var(--cl-accent) 45%, transparent);
}

.cl-chunk-label {
    font-size: 11px;
    color: var(--text-muted);
}

.cl-flips {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

.cl-flip {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 16px 8px 11px;
    border-radius: var(--cl-r);
    border: 1px solid var(--line);
    background: var(--surface-raised);
    color: inherit;
    cursor: pointer;
}

.cl-flip:hover {
    border-color: var(--cl-accent);
}

.cl-flip.is-learnt {
    border-color: color-mix(in srgb, var(--success) 40%, transparent);
}

.cl-flip-front {
    font-size: 20px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.cl-flip-back {
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    overflow-wrap: anywhere;
    text-align: center;
}

.cl-flip.is-open .cl-flip-back {
    color: var(--success);
}

.cl-dots {
    display: flex;
    gap: 3px;
}

.cl-dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--surface-solid);
    border: 1px solid var(--line);
}

.cl-dots i.is-on {
    background: var(--success);
    border-color: var(--success);
}

.cl-dots i.is-part {
    background: var(--warning);
    border-color: var(--warning);
}

/* ----- sheets ------------------------------------------------------------ */

.cl-sheet {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 5px;
}

.cl-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 7px 3px;
    border-radius: var(--cl-r-sm);
    border: 1px solid var(--line);
    background: var(--surface-raised);
    font-variant-numeric: tabular-nums;
}

.cl-cell b {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-muted);
}

.cl-cell span {
    font-size: 13px;
    font-weight: 700;
}

.cl-cell.is-learnt {
    border-color: color-mix(in srgb, var(--success) 40%, transparent);
}

.cl-cell.is-due {
    border-color: color-mix(in srgb, var(--warning) 46%, transparent);
    background: color-mix(in srgb, var(--warning) 10%, transparent);
}

.cl-tablewrap {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--cl-r);
    background: var(--surface-raised);
}

.cl-datatable {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.cl-datatable th,
.cl-datatable td {
    font-family: var(--cl-data);
    padding: 8px 6px;
    text-align: center;
    font-size: 12px;
    border-bottom: 1px solid var(--line);
}

.cl-datatable th {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
}

.cl-datatable tr:last-child td {
    border-bottom: 0;
}

.cl-tlabel {
    text-align: left !important;
    color: var(--text-muted);
    font-weight: 600;
}






.cl-trips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.cl-trip {
    padding: 5px 9px;
    border-radius: var(--cl-r-sm);
    border: 1px solid var(--line);
    background: var(--surface-raised);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.cl-trip.is-learnt {
    border-color: color-mix(in srgb, var(--success) 40%, transparent);
    color: var(--success);
}

/* ----- the vault: scope, recall test, blind grid, report ----------------- */

/* Which slice of the set the buttons below will draw from. It sits above the
   launcher rather than inside it because every card obeys it, not just one. */
.cl-scope {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.cl-scope-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: 2px;
}

.cl-chip small {
    font-size: 10.5px;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.cl-chip.is-on small {
    color: inherit;
    opacity: 0.75;
}

/* The recall card carries the size chips, so like .is-test it is a plain box
   rather than a button - the accent marks it as the headline choice. */
.cl-launch-card.is-recall {
    cursor: default;
    background: linear-gradient(130deg, var(--cl-accent-soft), transparent 66%), var(--surface-raised);
    border-color: color-mix(in srgb, var(--cl-accent) 30%, var(--line));
}

.cl-launch-card.is-recall .cl-launch-ico {
    background: var(--cl-accent-soft);
    color: var(--cl-accent);
}

/* ----- blind grid -------------------------------------------------------- */

.cl-gridwrap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    gap: 6px;
    margin-top: 12px;
}

.cl-gridcell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 8px 9px;
    border-radius: var(--cl-r);
    border: 1px solid var(--line);
    background: var(--surface-raised);
}

.cl-gridcell b {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.cl-gridin {
    width: 100%;
    min-width: 0;
    padding: 7px 8px;
    border-radius: var(--cl-r-sm);
    border: 1px solid var(--line);
    background: var(--surface-solid);
    color: var(--text-main);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cl-gridin:focus {
    outline: 2px solid var(--brand);
    outline-offset: 1px;
    border-color: var(--brand);
}

/* Revealed cells. The border carries the verdict and the answer is always
   shown, right or wrong - the point of the sheet is to read it as a shape. */
.cl-gridcell.is-done {
    gap: 2px;
    padding: 9px 8px;
    font-variant-numeric: tabular-nums;
}

.cl-gridval {
    font-size: 15px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.cl-gridcell.is-done small {
    font-size: 10px;
    line-height: 1.35;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.cl-gridcell.is-right {
    border-color: color-mix(in srgb, var(--success) 45%, transparent);
    background: color-mix(in srgb, var(--success) 9%, var(--surface-raised));
}

.cl-gridcell.is-right .cl-gridval {
    color: var(--success);
}

/* Right, but slower than the set allows. It is not a failure, so it keeps the
   success ground; the dashed edge is what says "not recall yet". */
.cl-gridcell.is-right.is-slow {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--warning) 55%, transparent);
    background: color-mix(in srgb, var(--warning) 9%, var(--surface-raised));
}

.cl-gridcell.is-right.is-slow .cl-gridval {
    color: var(--warning);
}

.cl-gridcell.is-wrong {
    border-color: color-mix(in srgb, var(--danger) 45%, transparent);
    background: color-mix(in srgb, var(--danger) 9%, var(--surface-raised));
}

.cl-gridcell.is-wrong .cl-gridval {
    color: var(--danger);
}

/* A blank recorded nothing, so it is drawn as absent rather than as a mark. */
.cl-gridcell.is-blank {
    border-style: dashed;
    opacity: 0.62;
}

/* ----- recall test: sure / guess ----------------------------------------- */

.cl-sure,
.cl-guess {
    flex: none;
}

.cl-guess {
    /* Deliberately not disabled-looking. Guessing honestly is the useful act
       here; the report only works when the two buttons feel equally available. */
    border-color: color-mix(in srgb, var(--warning) 40%, var(--line));
    color: var(--warning);
}

.cl-guess:hover:not([disabled]) {
    border-color: var(--warning);
    color: var(--warning);
}

.cl-surenote {
    max-width: 460px;
    margin: 10px auto 0;
    text-align: center;
}

/* ----- the three-way split on a timed recall result ---------------------- */

.cl-splits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.cl-split {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 14px;
    border-radius: var(--cl-r);
    border: 1px solid var(--line);
    background: var(--surface-raised);
}

.cl-split b {
    font-family: var(--cl-display);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.cl-split small {
    font-size: 11.5px;
    line-height: 1.4;
    color: var(--text-muted);
}

.cl-split.is-good {
    border-color: color-mix(in srgb, var(--success) 38%, transparent);
}

.cl-split.is-good b {
    color: var(--success);
}

.cl-split.is-warn {
    border-color: color-mix(in srgb, var(--warning) 38%, transparent);
}

.cl-split.is-warn b {
    color: var(--warning);
}

.cl-split.is-bad {
    border-color: color-mix(in srgb, var(--danger) 38%, transparent);
}

.cl-split.is-bad b {
    color: var(--danger);
}

/* ----- mastery report ---------------------------------------------------- */

.cl-buckets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
    gap: 8px;
}

.cl-bucket {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 12px 13px;
    border-radius: var(--cl-r);
    border: 1px solid var(--line);
    background: var(--surface-raised);
}

.cl-bucket b {
    font-family: var(--cl-display);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
}

.cl-bucket small {
    font-size: 11px;
    color: var(--text-muted);
}

.cl-bucket.is-good {
    border-color: color-mix(in srgb, var(--success) 38%, transparent);
}

.cl-bucket.is-good b {
    color: var(--success);
}

.cl-bucket.is-warn {
    border-color: color-mix(in srgb, var(--warning) 38%, transparent);
}

.cl-bucket.is-warn b {
    color: var(--warning);
}

.cl-bucket.is-bad {
    border-color: color-mix(in srgb, var(--danger) 38%, transparent);
}

.cl-bucket.is-bad b {
    color: var(--danger);
}

/* One sentence, and the only thing on the report anyone is obliged to read.
   Not .cl-verdict - that is the run screen's right/wrong pill. */
.cl-report-verdict {
    margin: 12px 0 0;
    padding: 12px 14px;
    border-radius: var(--cl-r);
    border: 1px solid color-mix(in srgb, var(--cl-accent) 26%, var(--line));
    background: linear-gradient(120deg, var(--cl-accent-soft), transparent 70%), var(--surface-raised);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.55;
    text-wrap: balance;
}

/* ----- fact lists and run history ---------------------------------------- */

.cl-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
}

.cl-listrow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 10px;
    padding: 8px 12px;
    border-radius: var(--cl-r-sm);
    border: 1px solid var(--line);
    background: var(--surface-raised);
    font-variant-numeric: tabular-nums;
}

.cl-listrow b {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    overflow-wrap: anywhere;
}

.cl-listrow > span {
    font-size: 14px;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.cl-listrow small {
    font-size: 11px;
    color: var(--text-muted);
    text-align: right;
    white-space: nowrap;
}

/* A row of the by-row table where every fact is learnt. */
.cl-datatable tr.is-learnt td {
    color: var(--success);
}

.cl-datatable tr.is-learnt .cl-tlabel {
    color: var(--success);
}

/* ----- telemetry: the fingerprint and the drill --------------------------- */

/* Semantic tones. Deliberately not the accent: the accent says "this feature",
   these say "this number is a problem", and letting one carry both meanings is
   how a page ends up looking alarmed about its own branding. */
.cl-pace.is-good,
.cl-gacc.is-good,
.cl-reason.is-good,
.cl-gtrend.is-good {
    color: var(--success);
}

.cl-pace.is-warn,
.cl-reason.is-warn {
    color: var(--warning);
}

.cl-pace.is-bad,
.cl-reason.is-bad,
.cl-gtrend.is-bad {
    color: var(--danger);
}

/* The method being drilled, named above the question. */
.cl-runtag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 10px 0 0;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--cl-accent) 30%, var(--line));
    background: var(--cl-accent-soft);
    color: var(--cl-accent);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Time against par, on the correction panel. */
.cl-pace {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-left: auto;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cl-pace small {
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-muted);
}

/* The named slip, on a wrong answer. */
.cl-errchip {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--danger) 30%, var(--line));
    background: color-mix(in srgb, var(--danger) 10%, transparent);
    color: var(--danger);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Rating and delta after a rated session. */
.cl-ratingstrip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: var(--cl-r);
    border: 1px solid color-mix(in srgb, var(--cl-accent) 26%, var(--line));
    background: linear-gradient(120deg, var(--cl-accent-soft), transparent 70%), var(--surface-raised);
}

.cl-ratingstrip-num {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-variant-numeric: tabular-nums;
}

.cl-ratingstrip-num b {
    font-family: var(--cl-display);
    font-variant-numeric: tabular-nums lining-nums;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.cl-ratingstrip-num small {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
}

.cl-ratingstrip-delta {
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: color-mix(in srgb, var(--text-muted) 12%, transparent);
    color: var(--text-muted);
}

.cl-ratingstrip.is-good .cl-ratingstrip-delta {
    background: color-mix(in srgb, var(--success) 14%, transparent);
    color: var(--success);
}

.cl-ratingstrip.is-bad .cl-ratingstrip-delta {
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    color: var(--danger);
}

.cl-ratingstrip-note {
    flex: 1 1 200px;
    min-width: 0;
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-muted);
}

.cl-ratingstrip .cl-btn {
    margin-left: auto;
}

/* ----- the fingerprint hero ---------------------------------------------- */

.cl-rating {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    padding: 16px 18px;
    border-radius: var(--cl-r);
    border: 1px solid color-mix(in srgb, var(--cl-accent) 30%, var(--line));
    background:
        radial-gradient(420px 200px at 4% 0%, var(--cl-accent-soft), transparent 70%),
        var(--surface-raised);
}

.cl-rating-num {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-variant-numeric: tabular-nums;
}

.cl-rating-num b {
    font-family: var(--cl-display);
    font-variant-numeric: tabular-nums lining-nums;
    font-size: 42px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
}

.cl-rating-num span {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--cl-accent);
}

.cl-rating-num small {
    font-size: 11px;
    color: var(--text-muted);
}

.cl-rating-spark {
    flex: 1 1 220px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--cl-accent);
}

.cl-rating-spark small {
    font-size: 11px;
    color: var(--text-muted);
}

/* Unlabelled and unscaled on purpose - it answers "which way", and axes would
   invite reading a precision out of it that a personal rating does not have. */
.cl-spark {
    width: 100%;
    height: 52px;
    overflow: visible;
}

/* ----- the drill offer ---------------------------------------------------- */

.cl-drillcta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 13px 14px;
    border-radius: var(--cl-r);
    border: 1px dashed color-mix(in srgb, var(--cl-accent) 40%, var(--line));
    background: var(--surface-solid);
}

.cl-drillcta-ico {
    flex: none;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: var(--cl-r);
    background: var(--cl-accent-soft);
    color: var(--cl-accent);
}

.cl-drillcta-txt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cl-drillcta-txt strong {
    font-size: 13.5px;
    font-weight: 700;
}

.cl-drillcta-txt small {
    font-size: 11.5px;
    line-height: 1.5;
    color: var(--text-muted);
}

.cl-drillcta .cl-btn {
    flex: none;
}

/* Why a method made the plan. */
.cl-reason {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--text-muted);
}

/* ----- shared proportion bar --------------------------------------------- */

.cl-bar {
    display: block;
    height: 4px;
    margin-top: 5px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 16%, transparent);
    overflow: hidden;
}

.cl-bar i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: currentColor;
}

.cl-bar.is-good {
    color: var(--success);
}

.cl-bar.is-warn {
    color: var(--warning);
}

.cl-bar.is-bad {
    color: var(--danger);
}

/* ----- the per-group table ------------------------------------------------ */

.cl-tablewrap {
    margin-top: 8px;
    overflow-x: auto;
}

.cl-gtable {
    width: 100%;
    min-width: 460px;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.cl-gtable th {
    padding: 6px 10px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--line);
}

.cl-gtable td {
    padding: 9px 10px;
    font-size: 13px;
    font-weight: 600;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 60%, transparent);
    vertical-align: top;
}

.cl-gtable tr:last-child td {
    border-bottom: none;
}

/* Too few attempts to rank. Shown, because it is still what happened; dimmed,
   because reading a "weakest group" off two questions is worse than none. */
.cl-gtable tr.is-thin td {
    color: var(--text-muted);
}

.cl-glabel {
    min-width: 120px;
}

.cl-glabel small {
    display: block;
    margin-top: 2px;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-muted);
}

.cl-gacc {
    min-width: 78px;
}

.cl-gpace small {
    display: block;
    font-size: 10.5px;
    font-weight: 500;
    color: var(--text-muted);
}

.cl-gtrend {
    width: 28px;
    text-align: center;
    color: var(--text-muted);
}

/* ----- the error breakdown ------------------------------------------------ */

.cl-errs {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 8px;
}

.cl-errrow {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(0, 2fr) auto;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    border-radius: var(--cl-r-sm);
    border: 1px solid var(--line);
    background: var(--surface-raised);
}

.cl-errrow b {
    font-size: 12.5px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.cl-errrow .cl-bar {
    margin-top: 0;
    height: 6px;
}

.cl-errrow small {
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.cl-advice {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: var(--cl-r-sm);
    border-left: 2px solid var(--warning);
    background: color-mix(in srgb, var(--warning) 8%, transparent);
    color: var(--text-main);
}

.cl-advice i {
    margin-right: 6px;
    color: var(--warning);
}

/* Warning is the base because that is what advice usually is. The Exam
   Simulator's verdict can also be good news or bad news, and a green result
   panel over an amber sentence reads as two different opinions. */
.cl-advice.is-good {
    border-left-color: var(--success);
    background: color-mix(in srgb, var(--success) 8%, transparent);
}

.cl-advice.is-good i {
    color: var(--success);
}

.cl-advice.is-bad {
    border-left-color: var(--danger);
    background: color-mix(in srgb, var(--danger) 8%, transparent);
}

.cl-advice.is-bad i {
    color: var(--danger);
}

/* ----- the daily strip on the hub --------------------------------------- */

/* The only thing on the hub with a deadline attached, so it sits above
   everything else and is the one card allowed to carry the accent. */
/* The one readout on the hub that changes daily, so it is the one panel that
   gets to be a panel: taller, lit from the corner, and carrying the streak at
   a size you can read from across the room. */
.cl-today {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    padding: 22px 24px;
    border-radius: var(--cl-r-lg);
    border: 1px solid color-mix(in srgb, var(--cl-accent) 40%, var(--line));
    background:
        radial-gradient(420px 180px at 8% -30%, var(--cl-accent-soft), transparent 70%),
        linear-gradient(135deg, var(--cl-accent-soft), transparent 62%),
        var(--surface-raised);
    color: inherit;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
}

/* A lit strip down the leading edge - the panel is switched on. */
.cl-today::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: linear-gradient(180deg, var(--cl-accent), color-mix(in srgb, var(--cl-accent) 25%, transparent));
}

.cl-today.is-done::after {
    background: linear-gradient(180deg, var(--success), color-mix(in srgb, var(--success) 25%, transparent));
}

.cl-today:hover {
    transform: translateY(-1px);
    border-color: var(--cl-accent);
}

.cl-today.is-done {
    border-color: color-mix(in srgb, var(--success) 45%, var(--line));
    background: linear-gradient(135deg, color-mix(in srgb, var(--success) 12%, transparent), transparent 70%), var(--surface-raised);
}

.cl-today-ico {
    display: grid;
    place-items: center;
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: var(--cl-r);
    font-size: 20px;
    color: var(--cl-accent);
    background: var(--cl-accent-soft);
}

.cl-today.is-done .cl-today-ico {
    color: var(--success);
    background: color-mix(in srgb, var(--success) 14%, transparent);
}

.cl-today-txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    flex: 1;
}

.cl-today-txt strong {
    font-family: var(--cl-display);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-main);
}

.cl-today-txt small {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
}

.cl-today-streak {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: none;
    line-height: 1.1;
}

.cl-today-streak b {
    font-family: var(--cl-display);
    font-size: 24px;
    font-weight: 800;
    color: var(--cl-accent);
    font-variant-numeric: tabular-nums;
}

.cl-today-streak small {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cl-today-go {
    flex: none;
    color: var(--text-muted);
}

/* ----- the daily calendar strip ------------------------------------------ */

.cl-cal {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 14px 0 10px;
}

.cl-cal-day {
    font-family: var(--cl-display);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: var(--cl-r-sm);
    border: 1px solid var(--line);
    background: var(--surface-raised);
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.cl-cal-day.is-done {
    border-color: color-mix(in srgb, var(--success) 45%, var(--line));
    background: color-mix(in srgb, var(--success) 16%, transparent);
    color: var(--success);
}

/* Today is outlined whether or not it is done, so the strip always says
   where you are standing in it. */
.cl-cal-day.is-today {
    box-shadow: 0 0 0 2px var(--cl-accent-soft);
    border-color: var(--cl-accent);
    color: var(--text-main);
}

/* ----- the guided walkthrough ------------------------------------------- */

.cl-launch-card.is-guided {
    border-color: color-mix(in srgb, var(--cl-accent) 40%, var(--line));
}

.cl-launch-card.is-guided .cl-launch-ico {
    color: var(--cl-accent);
    background: var(--cl-accent-soft);
}

.cl-guide {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px 0 4px;
    padding: 0;
    list-style: none;
}

.cl-gline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 11px 13px;
    border-radius: var(--cl-r);
    border: 1px solid var(--line);
    background: var(--surface-raised);
    font-size: 14px;
    font-weight: 600;
    color: var(--text-main);
}

.cl-gline i {
    flex: none;
    font-size: 12px;
}

.cl-gline > span {
    font-family: var(--cl-data);
    font-variant-numeric: tabular-nums;
}

.cl-gline small {
    flex-basis: 100%;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
}

/* Narration. It is context rather than working, so it is quieter than the
   steps either side of it and carries no marker. */
.cl-gline.is-note {
    background: transparent;
    border-style: dashed;
    font-weight: 500;
    color: var(--text-muted);
}

.cl-gline.is-got {
    border-color: color-mix(in srgb, var(--success) 40%, var(--line));
    background: color-mix(in srgb, var(--success) 9%, transparent);
}

.cl-gline.is-got i {
    color: var(--success);
}

/* Taken rather than produced. Warm, not red - a step you asked for is not a
   step you got wrong, and colouring it that way would make the honest thing
   feel like a punishment. */
.cl-gline.is-helped {
    border-color: color-mix(in srgb, var(--warning) 40%, var(--line));
    background: color-mix(in srgb, var(--warning) 9%, transparent);
}

.cl-gline.is-helped i {
    color: var(--warning);
}

.cl-gline.is-now {
    border-color: var(--cl-accent);
    background: var(--surface-solid);
    box-shadow: 0 0 0 3px var(--cl-accent-soft);
}

.cl-gline-ask {
    font-family: var(--cl-display);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cl-gline-ask b {
    color: var(--text-muted);
}

.cl-gline-in {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}

.cl-ginput {
    width: 130px;
    padding: 8px 11px;
    border-radius: var(--cl-r-sm);
    border: 1px solid var(--line);
    background: var(--surface-raised);
    color: var(--text-main);
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-family: inherit;
}

.cl-ginput:focus {
    outline: 2px solid var(--cl-accent);
    outline-offset: 1px;
}

.cl-gwrong {
    color: var(--danger) !important;
}

/* ----- the arena --------------------------------------------------------- */

.cl-arena-hud {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 12px 14px;
    border-radius: var(--cl-r);
    border: 1px solid var(--line);
    background: var(--surface-raised);
}

.cl-arena-clock {
    font-family: var(--cl-display);
    flex: none;
    min-width: 92px;
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
}

/* The last ten seconds. Colour rather than motion: an animation here would
   be one more thing moving while somebody is trying to add. */
.cl-arena-clock.is-low {
    color: var(--danger);
}

.cl-arena-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 62px;
    line-height: 1.15;
}

.cl-arena-stat b {
    font-family: var(--cl-display);
    font-size: 20px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
}

.cl-arena-stat small {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.cl-arena-stat.is-hot b {
    color: var(--cl-accent);
}

/* What the last answer just did to the clock. It has to be readable in the
   half-second before the next question is being read, so it is three short
   pieces on one line and nothing else. */
.cl-flash {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-top: 12px;
    padding: 9px 13px;
    border-radius: var(--cl-r-sm);
    border: 1px solid var(--line);
    background: var(--surface-raised);
    font-size: 13px;
    font-weight: 600;
}

.cl-flash b {
    font-family: var(--cl-display);
    font-size: 17px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.cl-flash span {
    color: var(--text-muted);
    font-weight: 500;
}

.cl-flash em {
    margin-left: auto;
    font-style: normal;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cl-flash.is-good {
    border-color: color-mix(in srgb, var(--success) 45%, var(--line));
    background: color-mix(in srgb, var(--success) 10%, transparent);
}

.cl-flash.is-good b,
.cl-flash.is-good em {
    color: var(--success);
}

.cl-flash.is-bad {
    border-color: color-mix(in srgb, var(--danger) 45%, var(--line));
    background: color-mix(in srgb, var(--danger) 10%, transparent);
}

.cl-flash.is-bad b,
.cl-flash.is-bad em {
    color: var(--danger);
}

/* ----- the coach --------------------------------------------------------- */

/* What the coach says, offline or from the model, in the same shape either
   way - the student should not have to work out which half is talking. */
.cl-coachsay {
    display: flex;
    gap: 11px;
    padding: 14px 16px;
    border-radius: var(--cl-r);
    border: 1px solid color-mix(in srgb, var(--cl-accent) 35%, var(--line));
    background: linear-gradient(135deg, var(--cl-accent-soft), transparent 75%), var(--surface-raised);
}

.cl-coachsay i {
    flex: none;
    margin-top: 2px;
    font-size: 15px;
    color: var(--cl-accent);
}

.cl-coachsay p {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--text-main);
}

.cl-coachsay.is-ai {
    margin-top: 12px;
}

.cl-plan {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cl-planstep {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    border-radius: var(--cl-r);
    border: 1px solid var(--line);
    background: var(--surface-raised);
}

/* Numbered because it is an order, not a menu - the first step is the one
   costing the most marks and the list means nothing shuffled. */
.cl-planstep-n {
    font-family: var(--cl-display);
    font-variant-numeric: tabular-nums lining-nums;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--cl-accent-soft);
    color: var(--cl-accent);
    font-size: 11.5px;
    font-weight: 800;
}

.cl-planstep-txt {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.cl-planstep-txt strong {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-main);
}

.cl-planstep-txt small {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.55;
    color: var(--text-muted);
}

.cl-planstep .cl-btn {
    white-space: nowrap;
}

/* ----- the exam simulator ------------------------------------------------ */

/* The four numbers that define the paper, above everything else on the page -
   they are what makes it a paper rather than a practice set, so they are read
   before the Start button and not after it. */
.cl-examhead {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.cl-examstat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 12px 8px;
    border-radius: var(--cl-r);
    border: 1px solid var(--line);
    background: var(--surface-raised);
    text-align: center;
}

.cl-examstat b {
    font-family: var(--cl-display);
    font-size: 20px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
}

.cl-examstat small {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--text-muted);
}

/* The cut-off is the number the other three are measured against. */
.cl-examstat.is-cut {
    border-color: color-mix(in srgb, var(--cl-accent) 45%, var(--line));
    background: var(--cl-accent-soft);
}

.cl-examstat.is-cut b {
    color: var(--cl-accent);
}

/* The blueprint list reuses .cl-listrow; only its count column is new. */
.cl-list .cl-reason b {
    font-variant-numeric: tabular-nums;
}

/* ----- the scratchpad ---------------------------------------------------- */

.cl-padbar {
    display: flex;
    gap: 8px;
}

.cl-padin {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    border-radius: var(--cl-r);
    border: 1px solid var(--line);
    background: var(--surface-raised);
    color: var(--text-main);
    font-size: 17px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-family: inherit;
}

.cl-padin:focus {
    outline: 2px solid var(--cl-accent);
    outline-offset: 1px;
}

.cl-pad {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 14px 0 4px;
    padding: 0;
    list-style: none;
}

/* Line, result and the delete button on one row; anything the line has to say
   about itself wraps underneath at full width. */
.cl-padrow {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) auto 28px;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--cl-r);
    border: 1px solid var(--line);
    background: var(--surface-raised);
}

.cl-padrow-n {
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.cl-padrow-line {
    font-family: var(--cl-data);
    min-width: 0;
    overflow-wrap: anywhere;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}

.cl-padrow-val {
    font-family: var(--cl-display);
    font-size: 17px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text-main);
}

.cl-padrow.is-bad .cl-padrow-val {
    color: var(--danger);
}

.cl-padrow > small,
.cl-padadv {
    grid-column: 1 / -1;
}

.cl-padrow > small {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
}

.cl-padrow-x {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: var(--cl-r-sm);
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
}

.cl-padrow-x:hover {
    background: color-mix(in srgb, var(--danger) 14%, transparent);
    color: var(--danger);
}

/* The chip is the whole point of the pad, so it is the one thing on the row
   allowed to carry the accent. */
.cl-padchip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--cl-accent) 45%, var(--line));
    background: var(--cl-accent-soft);
    color: var(--text-main);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.cl-padchip i {
    color: var(--cl-accent);
}

.cl-padchip b {
    font-variant-numeric: tabular-nums;
}

.cl-padchip small {
    font-weight: 500;
    color: var(--text-muted);
}

.cl-padchip.is-on {
    border-color: var(--cl-accent);
}

.cl-padsteps {
    display: block;
    margin-top: 8px;
}

.cl-padsteps .cl-steps {
    margin: 0;
}

@media (prefers-reduced-motion: reduce) {
    .cl-today {
        transition: none;
    }
}

/* ----- chrome, focus and motion ------------------------------------------ */

/* The rail is not content, so it sits behind the plane the content is on
   rather than beside it. */
.cl-rail {
    background: color-mix(in srgb, var(--app-bg) 82%, #000 18%);
    box-shadow: inset -1px 0 0 var(--line);
    border-right: 0;
}

html.theme-light .cl-rail {
    background: color-mix(in srgb, var(--app-bg) 70%, #fff 30%);
}

.cl-rail-item {
    transition: background var(--cl-fast) var(--cl-ease),
                color var(--cl-fast) var(--cl-ease),
                transform var(--cl-fast) var(--cl-ease);
}

.cl-rail-item:hover {
    transform: translateX(2px);
}

/* The live item gets a lit edge rather than only a tint, so at a glance the
   rail says where you are without being read. */
.cl-rail-item.is-on {
    position: relative;
    box-shadow: var(--cl-glow);
}

.cl-head {
    backdrop-filter: blur(12px);
    background: color-mix(in srgb, var(--app-bg) 78%, transparent);
}

/* One entrance for every screen. draw() replaces the whole body, so without
   this a change of screen is a flicker with no direction to it. */
.cl-col {
    animation: cl-enter var(--cl-slow) var(--cl-ease) both;
}

@keyframes cl-enter {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

/* Sections arrive in order rather than all at once - four steps is enough to
   read as a sequence and short enough that nobody waits for it. */
.cl-col > .cl-section {
    animation: cl-enter var(--cl-slow) var(--cl-ease) both;
}

.cl-col > .cl-section:nth-child(2) { animation-delay: 0.04s; }
.cl-col > .cl-section:nth-child(3) { animation-delay: 0.08s; }
.cl-col > .cl-section:nth-child(4) { animation-delay: 0.12s; }
.cl-col > .cl-section:nth-child(n+5) { animation-delay: 0.16s; }

/* Keyboard focus, which the whole tool depends on and none of it showed. */
.cl-backdrop :is(button, input, a):focus-visible {
    outline: 2px solid var(--cl-accent);
    outline-offset: 2px;
}

.cl-answerbox:focus,
.cl-padin:focus,
.cl-ginput:focus {
    outline: none;
    border-color: var(--cl-accent);
    box-shadow: var(--cl-inset), var(--cl-glow);
}

/* The verdict is the one moment the tool answers back, so it is the one
   thing allowed to move on its own. */
.cl-verdict {
    animation: cl-pop 0.34s var(--cl-ease) both;
}

@keyframes cl-pop {
    0%   { opacity: 0; transform: scale(0.9); }
    60%  { transform: scale(1.03); }
    100% { opacity: 1; transform: scale(1); }
}

.cl-flash {
    animation: cl-slide 0.28s var(--cl-ease) both;
}

@keyframes cl-slide {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: none; }
}

/* The last ten seconds. A pulse rather than a flash: it has to be noticed
   from the corner of an eye that is reading a sum. */
.cl-arena-clock.is-low {
    animation: cl-tick 1s ease-in-out infinite;
}

@keyframes cl-tick {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.75; transform: scale(1.04); }
}

/* Progress fills rather than jumps. */
.cl-progressline i,
.cl-progress i,
.cl-costbar i,
.cl-bar i {
    transition: width var(--cl-slow) var(--cl-ease);
}

/* The step being asked for in a walkthrough, arriving. */
.cl-gline.is-now {
    animation: cl-enter 0.26s var(--cl-ease) both;
}

/* A method chip opening its working. */
.cl-padsteps {
    animation: cl-enter 0.22s var(--cl-ease) both;
}

/* Counting up. Applied by the screen to a number that has just been earned -
   see countUp() in calcLabUI.js, which owns the arithmetic; this only says
   what a number doing it should look like. */
.cl-counting {
    animation: cl-pop 0.4s var(--cl-ease) both;
}

/* ----- narrow windows and phones ---------------------------------------- */

/* Below this the rail cannot be a column without eating the content, so it
   becomes a scrolling strip across the top - same items, same order. */
@media (max-width: 860px) {
    .cl-page {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    .cl-rail {
        flex-direction: row;
        align-items: center;
        gap: 6px;
        padding: 10px 12px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
    }

    .cl-rail-brand {
        padding: 0 10px 0 2px;
        flex: none;
    }

    .cl-rail-name {
        font-size: 13.5px;
    }

    .cl-rail-nav {
        flex-direction: row;
        gap: 4px;
    }

    /* In the strip the label becomes a separator rather than a heading -
       stacked capitals in a row of pills read as a broken button. */
    .cl-rail-label {
        align-self: stretch;
        width: 1px;
        padding: 0;
        margin: 4px 6px;
        overflow: hidden;
        text-indent: -999px;
        background: var(--line);
    }

    /* Labels stay. The strip scrolls, so there is room for them, and an
       icon-only rail is exactly the kind of thing nobody can read. */
    .cl-rail-item {
        flex: none;
        padding: 7px 12px;
        font-size: 12.5px;
        border: 1px solid var(--line);
        background: var(--surface-raised);
    }
}

@media (max-width: 560px) {
    .cl-head {
        padding: 12px 14px;
    }

    .cl-head-text h2 {
        font-size: 15.5px;
    }

    .cl-body {
        padding: 4px 14px 34px;
    }

    .cl-num {
        width: 100px;
        font-size: 22px;
    }

    .cl-rail-name small {
        display: none;
    }

    .cl-gridwrap {
        grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    }

    .cl-buckets {
        grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    }

    .cl-listrow {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .cl-listrow small {
        grid-column: 2;
        grid-row: 2;
    }

    .cl-rating {
        gap: 12px;
        padding: 14px;
    }

    .cl-rating-num b {
        font-size: 34px;
    }

    .cl-drillcta {
        flex-wrap: wrap;
    }

    .cl-drillcta .cl-btn {
        width: 100%;
    }

    /* The bar is the comparison; below this width it would be a stub, and the
       count beside it says the same thing without needing the pixels. */
    .cl-errrow {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .cl-errrow .cl-bar {
        display: none;
    }

    .cl-ratingstrip .cl-btn {
        margin-left: 0;
        width: 100%;
    }

    /* The streak number is the point of the panel; the arrow is not, and at
       this width the two of them together squeeze the text to nothing. */
    .cl-today {
        padding: 16px 16px 16px 18px;
        gap: 13px;
    }

    .cl-today-ico {
        width: 40px;
        height: 40px;
        font-size: 17px;
    }

    .cl-today-txt strong {
        font-size: 15.5px;
    }

    .cl-today-streak b {
        font-size: 30px;
    }

    /* Eight cards whose blurbs run to five lines each is a page you scroll
       past rather than read. Two lines is enough to tell them apart; the card
       itself opens the screen that explains it properly. */
    .cl-mode.is-hero {
        padding: 15px 15px 14px;
        gap: 12px;
    }

    .cl-mode.is-hero .cl-mode-txt small {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .cl-mode.is-hero .cl-mode-ico {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }

    .cl-today-go {
        display: none;
    }

    /* The input drops to its own line rather than shrinking. A four-digit
       answer in a 60px box is unreadable while you are typing it. */
    .cl-gline-in {
        margin-left: 0;
        width: 100%;
    }

    .cl-ginput {
        flex: 1;
        width: auto;
    }

    .cl-arena-clock {
        font-size: 27px;
        min-width: 78px;
    }

    .cl-arena-stat {
        min-width: 52px;
    }

    .cl-cal-day {
        width: 27px;
        height: 27px;
    }

    /* The line and its result get the width; the row number goes, because the
       #n reference is only useful while there is room to read the line. */
    .cl-padrow {
        grid-template-columns: 18px minmax(0, 1fr) auto 24px;
        gap: 7px;
        padding: 9px 10px;
    }

    .cl-padrow-line {
        font-size: 13.5px;
    }

    .cl-padrow-val {
        font-size: 15px;
    }

    .cl-padin {
        font-size: 16px;
        padding: 11px 12px;
    }

    /* The button drops under the text rather than squeezing the reason for
       the step down to two words a line. */
    .cl-planstep {
        grid-template-columns: 24px minmax(0, 1fr);
    }

    .cl-planstep .cl-btn {
        grid-column: 2;
        justify-self: start;
    }

    .cl-examhead {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}