@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 300 700;
    src: url("../fonts/SpaceGrotesk-VariableFont.woff2") format("woff2");
}

@font-face {
    font-family: Oxanium;
    font-style: normal;
    font-weight: 200 800;
    src: url("../fonts/Oxanium-VariableFont.woff2") format("woff2");
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 100 800;
    src: url("../fonts/JetBrainsMono-VariableFont.woff2") format("woff2");
}

@font-face {
    font-family: "Zen Dots";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/ZenDots-Regular.woff2") format("woff2");
}

/* wordmark only - the CEREVANA logo on the menu; never for UI text */
@font-face {
    font-family: "Format 1452";
    font-style: normal;
    font-weight: normal;
    src: url("../fonts/Format1452.woff2") format("woff2");
}

::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: #0000;
}

::-webkit-scrollbar-thumb {
    background-color: var(--bracket-color);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: #0000;
}

:is(button, a, input, select, textarea, summary, label, [tabindex]):focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

:root {
    --step--2: clamp(0.7813rem, 0.6829rem + 0.3575vw, 0.96rem);
    --step--1: clamp(0.9375rem, 0.7931rem + 0.525vw, 1.2rem);
    --step-0: clamp(1.125rem, 0.9188rem + 0.75vw, 1.5rem);
    --step-05: clamp(1.25rem, 0.975rem + 0.9vw, 1.625rem);
    --step-1: clamp(1.35rem, 1.0613rem + 1.05vw, 1.875rem);
    --step-2: clamp(1.62rem, 1.2219rem + 1.4475vw, 2.3438rem);
    --step-3: clamp(1.944rem, 1.4019rem + 1.9714vw, 2.9297rem);
    --step-4: clamp(2.3328rem, 1.6017rem + 2.6586vw, 3.6621rem);
    --step-5: clamp(2.7994rem, 1.8213rem + 3.5566vw, 4.5776rem);

    --text-outline: 0.04em 0 0.06em #11111175,
        0 0.04em 0.06em #11111175,
        -0.04em 0 0.06em #11111175,
        0 -0.04em 0.06em #11111175,
        -0.04em -0.04em 0.06em #11111175,
        -0.04em 0.04em 0.06em #11111175,
        0.04em -0.04em 0.06em #11111175,
        0.04em 0.04em 0.06em #11111175;
    /* Single accent: ONE user-chosen hue at fixed S/L. Every accent token below
       is hsl(var(--accent-hue) S% L%) - S and L are locked so the contrast
       relationships hold for any hue (see UI_DESIGN §2). Default 165 = the
       original sage-teal (#7cb6a8/#4f7d72/#3c6c64). --accent-color is the only
       "look here" colour - spend it on selected states, nav, brackets, progress. */
    --accent-hue: 165;
    --accent-color: hsl(var(--accent-hue) 28% 60%);
    --accent-dim-color: hsl(var(--accent-hue) 23% 40%);
    --accent-deep-color: hsl(var(--accent-hue) 29% 33%);

    /* user-picked main UI font (menu's Appearance panel); js/shared/boot.js
       overrides this pre-paint, js/shared/appearance.js live-updates it */
    --main-font: "Space Grotesk", sans-serif;

    --text-color: #fffffd;
    --background-color: #131312;
    --preamble-color: #fffa;
    --big-input-bg-color: #000a;
    --bracket-color: var(--accent-color);
    --bracket-box-shadow: 0;
    --display-label-color: #fffffd;
    --offcanvas-fg: #fffffd;
    --offcanvas-bg: radial-gradient(circle at top center, #0c0c0b, #131312);
    --small-input-bg-color: #111a;
    --profile-bg: #222;
    --profile-arrow-bg: #131312;
    --profile-border: 1px solid #333;
    --profile-select-bg: #222;
    --profile-select-border: 1px solid #333;
    --multi-input-bg: #000a;
    --single-input-bg: #222a;
    --spinner-bg: #111a;
    --folder-bg: #222;
    --profile-select-highlight: hsl(var(--accent-hue) 31% 27%);
    --profile-select-hover: #444;
    --profile-select-highlight-hover: hsl(var(--accent-hue) 29% 35%);
    --profile-select-delete: #523;
    --profile-select-delete-hover: #956;
    --switch-background-color: #333;
    --switch-unselected-color: #444;
    --switch-selected-color: var(--accent-color);
    --switch-border-color: #666;
    --switch-border-checked-color: var(--accent-color);
    --linear-settings-background-color: #222;
    --select-background-color: #191918;
    /* Verdict pair: semantic green/red, desaturated toward the palette. Each
       is BOTH a button background and answer text, so lightness is a
       compromise (see UI_DESIGN §2.5). Tuned for deuteranopia separation. */
    --correct-color: #4c8434;
    --wrong-color: #8a5264;
    --background-image-bg-color: #000c;
    --background-brightness: 0.50;
    --label-background-color: #0009;
    --label-color: var(--accent-color);
    --overlay-background-color: #000;
    --three-d-background: radial-gradient(circle at center, #54534fE0, #222220E0);
    --inline-input-bg-color: #282828;

    /* Tokenised strays (were hardcoded outside this block) */
    --link-color: var(--accent-color);
    --button-fg-color: hsl(var(--accent-hue) 19% 90%);
    --button-disabled-bg-color: hsl(var(--accent-hue) 15% 20%);
    --danger-color: #7d2f38;
    --danger-glow-color: #8a4d55;
    --frame-glow: 0 0 12px hsl(var(--accent-hue) 25% 23%);
    --progress-halfway-color: hsl(var(--accent-hue) 24% 49%);
    --nback-missed-color: #4a6a7a;
}

.light-mode {
    /* Same relationships as dark, re-derived for a warm off-white room at the
       same hue but higher chroma / lower lightness (the accent must carry
       label/link text on near-white). --accent-deep-color is theme-identical,
       so it inherits from :root - not redeclared here. */
    --accent-color: hsl(var(--accent-hue) 39% 30%);
    --accent-dim-color: hsl(var(--accent-hue) 22% 46%);

    --text-color: #171613;
    --background-color: #faf9f7;
    --text-outline: 0 0.01em 0.04em #11111175;
    --preamble-color: #3f3d38;
    --big-input-bg-color: #AAAa;
    --bracket-color: var(--accent-color);
    --bracket-box-shadow: 0;
    --display-label-color: hsl(var(--accent-hue) 23% 10%);
    --offcanvas-fg: #171613;
    --offcanvas-bg: radial-gradient(circle at top center, #faf9f7, hsl(var(--accent-hue) 18% 92%));
    --small-input-bg-color: #fffa;
    --profile-bg: #eee;
    --profile-arrow-bg: #bbb;
    --profile-border: 1px solid #333;
    --profile-select-bg: #eee;
    --profile-select-border: 1px solid #444;
    --multi-input-bg: #ddda;
    --single-input-bg: #eeea;
    --spinner-bg: #fffa;
    --folder-bg: #bbba;
    --profile-select-highlight: hsl(var(--accent-hue) 26% 78%);
    --profile-select-hover: #BBB;
    --profile-select-highlight-hover: hsl(var(--accent-hue) 32% 85%);
    --profile-select-delete: #D67;
    --profile-select-delete-hover: #F89;
    --switch-background-color: #DDD;
    --switch-unselected-color: #FFF;
    --switch-selected-color: var(--accent-color);
    --switch-border-color: #888;
    --switch-border-checked-color: var(--accent-color);
    --linear-settings-background-color: #DDD;
    --select-background-color: #e6e4e0;
    --correct-color: #307e2c;
    --wrong-color: #582234;
    --background-image-bg-color: #faf9f7;
    --background-brightness: 0.75;
    --label-background-color: #FFF9;
    --label-color: var(--accent-color);
    --overlay-background-color: #DDDA;
    --three-d-background: radial-gradient(circle at center, #FFFFFFE0, hsl(var(--accent-hue) 19% 89% / 88%));
    --inline-input-bg-color: #FAFAFA;

    /* Tokenised strays (--button-fg-color is theme-identical → inherits :root) */
    --link-color: var(--accent-color);
    --button-disabled-bg-color: hsl(var(--accent-hue) 7% 63%);
    --danger-color: #7d2f38;
    --danger-glow-color: #a8737a;
    --frame-glow: 0 0 12px hsl(var(--accent-hue) 19% 75%);
    --progress-halfway-color: hsl(var(--accent-hue) 29% 41%);
    --nback-missed-color: #4a6a7a;
}

body {
    height: 100svh;
    margin: 0;
    padding: 0;
    font-family: var(--main-font);
    font-size: var(--step-0);
    color: var(--text-color);
    background-color: var(--background-color);
}

/* a stray upward swipe must not pull-to-refresh away a running session
   (app-wide so every game page behaves the same on touch screens) */
html,
body {
    overscroll-behavior-y: none;
}

/* Default: every role keeps its own font (Oxanium nav/labels, JetBrains Mono
   monospace panels, Zen Dots headings) - only body follows --main-font. Pick
   a custom font (menu's Appearance panel) and js/shared/appearance.js /
   js/shared/boot.js add .font-override to <html>, which forces every role to
   --main-font too - except the CEREVANA wordmark and coolicons glyphs.
   The plain ":not(...)" is an implicit "*" - it does NOT reach ::before/
   ::after, so real words rendered via `content:` (corner tab captions,
   RIGHT/WRONG/MISSED fast-UI banners, history-card "Answer:" labels) need
   their own explicit pseudo-element selectors here or they silently keep
   whatever font-family the rule for that pseudo happens to hardcode. */
html.font-override :not(.menu__title, i),
html.font-override :not(.menu__title, i)::before,
html.font-override :not(.menu__title, i)::after {
    font-family: var(--main-font) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
pre,
ul {
    margin: 0;
    padding: 0;
}

ul {
    list-style: none;
    max-height: 7.5em;
    padding: 0 1em;
    overflow: auto;
}

ul li:not(:last-child) {
    margin-bottom: 0.3em;
}

a {
  color: var(--link-color);
  text-decoration: none;
  transition: color 0.3s ease;
}

button {
    padding: 0.25em 0.75em;
    font-family: inherit;
    font-size: inherit;
    color: var(--button-fg-color);
    border: 0;
    background-color: var(--accent-deep-color);
    cursor: pointer;
}

button:disabled {
    background-color: var(--button-disabled-bg-color);
    cursor: default;
}

button:not(:disabled):hover {
    box-shadow: 0 2px 4px var(--accent-dim-color);
}

button.delete {
    background-color: var(--danger-color);
}

button.delete:hover {
    box-shadow: 0 2px 4px var(--danger-glow-color);
}

/* start of Utils */
/* The UA's [hidden] { display: none } has the same specificity as any
   single-class rule (e.g. .inline-input__outer { display: flex }) and loses
   to whichever comes last - so JS-toggled `hidden` silently fails on such
   elements. Make hidden always mean hidden. */
[hidden] {
    display: none !important;
}

.mb-05 {
    margin-bottom: 1rem;
}

.mb-1 {
    margin-bottom: 1.5rem;
}

.mb-2 {
    margin-bottom: 2.5rem;
}

.ffmono {
    font-family: "JetBrains Mono", monospace;
}

/* section headers inside panels - bold caps so settings can be skimmed */
.offcanvas-body h4,
.panel-heading {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* collapsible settings sections: native <details> (§6.17 - free keyboard
   support), summary styled as a folder-header row so a long panel reads
   as a handful of skimmable groups instead of one wall */
.panel-section {
    margin-bottom: 1rem;
}

.panel-section > summary {
    list-style: none; /* custom arrow below */
    cursor: pointer;
    background-color: var(--folder-bg);
    padding: 0.5rem 0.75rem;
}

.panel-section > summary::-webkit-details-marker {
    display: none;
}

.panel-section > summary::before {
    content: '▶';
    display: inline-block;
    margin-right: 0.6em;
    font-size: 0.8em;
    transition: transform 0.1s ease-out;
}

.panel-section[open] > summary {
    margin-bottom: 1rem;
}

.panel-section[open] > summary::before {
    transform: rotate(90deg);
}

/* custom elements (js/components/) render plain rows in light DOM;
   display: contents makes the tag invisible to layout so the rendered
   markup participates exactly as if written in place */
help-tip,
num-row,
switch-row,
select-row,
goal-targets,
profile-picker,
corner-panel,
corner-tabs,
rrt-graphs,
nback-graphs,
cct-graphs {
    display: contents;
}

/* empty-state one-liner for panels/popups with no data yet */
.panel-empty {
    color: var(--preamble-color);
    font-size: var(--step--1);
    padding: 1rem 0;
}
/* end of Utils */

.feedback {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    position: fixed;
    transition: all 0.5s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
}

.feedback.active {
    opacity: 1.0;
    pointer-events: all;
}

.feedback .noise-bg {
    border: 8px solid;
    border-left: none;
    border-right: none;
    background-image: url("../img/nnnoise.svg");
    opacity: 0.9;
    position: fixed;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    transition: all 0.5s ease;
    transform: scaleY(0);
}

.feedback.active .noise-bg {
    transform: scaleY(1);
}

.feedback--wrong {
    color: #d00;
}

.feedback--missed {
    color: #fff;
}

.feedback--right {
    color: #0d0;
}

.feedback span {
    font-family: "Zen Dots", sans-serif;
    font-size: var(--step-5);
    letter-spacing: 0.75rem;
    padding: 0.75rem;
    margin-bottom: 10rem;
    position: fixed;
    z-index: 10;
}

.feedback--wrong span {
    border: 4px solid #f00a;
}

.feedback--missed span {
    border: 4px solid #bbba;
}

.feedback--right span {
    border: 4px solid #0f0a;
}

.feedback .line {
    height: 4px;
    position: fixed;
    top: 50%;
    width: 100%;
    z-index: 10;
}

.feedback--wrong .line {
    background-color: #f00a;
}

.feedback--missed .line {
    background-color: #bbba;
}

.feedback--right .line {
    background-color: #0f0a;
}

.main-view {
    place-content: center space-evenly;
    align-items: center;
    border: 4px solid var(--accent-deep-color);
    box-shadow: var(--frame-glow);
    display: grid;
    height: 100%;
    letter-spacing: 0.1em;
    overflow: hidden;
    position: relative;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" /></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.15"/></svg>');
    background-color: var(--overlay-background-color);
    opacity: 0.30;
}

.background-image {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    background-color: var(--background-image-bg-color);
    background-size: cover;
    background-position: center;
    filter: brightness(var(--background-brightness));
}

.metal-gear {
    font-family: Oxanium, sans-serif;
    letter-spacing: 0.25em;
}

.metal-gear .v3 {
    position: relative;
    display: inline-block;
    isolation: isolate;
}

.metal-gear .v3 img {
    position: absolute;
    top: 75%;
    left: 75%;
    z-index: -1;
    transform: translate(-50%, -50%);
    height: 5em;
    opacity: 0.75;
}

.metal-gear h1 {
    font-family: "Zen Dots", sans-serif;
    letter-spacing: 0.3em;
}

.timer-wrap {
    width: 100%;
    margin: 0 auto;
    margin-bottom: 1rem;
}

.timer {
    background-color: #111a;
    border: 2px solid #000;
    border-bottom-width: 4px;
    position: relative;
}
.timer__bar {
    background-color: var(--accent-color);
    height: 8px;
    transition: width .25s ease;
}

.timer__bar.override {
    background-color: var(--accent-dim-color);
}

.custom-time-info {
    display: none;
    font-family: "JetBrains Mono", monospace;
    position: absolute;
    height: 100%;
    width: 100%;
    font-size: var(--step--2);
    align-items: center;
    justify-content: flex-end;
    color: var(--text-color);
    text-shadow: 0 1px 1px #000;
}

.custom-time-info.visible {
    display: flex;
}

.inline-input__outer {
    align-items: center;
    background-color: var(--big-input-bg-color);
    display: flex;
    font-family: Oxanium, sans-serif;
    gap: 1.25rem;
    justify-content: space-between;
    padding: .25rem 1rem;
}
.inline-input__inner {
    background-color: var(--small-input-bg-color);
    font-family: "Space Grotesk", sans-serif;
    padding: .25rem;
    white-space: nowrap;
}
.inline-input__inner > input,
.inline-input__inner > select,
.inline-premise-spinner > input {
    text-align: right;
    background-color: var(--inline-input-bg-color);
    border: none;
    border-bottom: 1px solid #050505;
    margin: 0 3px;
    color: var(--text-color);
    font-size: var(--step--1);
    box-shadow: 0 0 2px #112a;
}

/* Remove spinner buttons on WebKit browsers (Chrome, Safari, etc.) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  margin-left: 5px; /* Adds distance from text */
}

/* Optional: Style spinner buttons for Firefox */
input[type="number"]::-moz-inner-spin-button {
  margin-left: 5px; /* Adds distance from text in Firefox */
}

/* Explicit color + background pair: the dropdown list's default background
   varies by browser/theme (Chrome dark-renders it), so relying on the UA
   default makes one of the two unreadable. */
.inline-input__inner > select option,
.inline-input__inner > select optgroup {
    color: var(--text-color);
    background-color: var(--background-color);
}

.inline-input__inner > input[type="file"] {
    max-width: 13rem;
}

.inline-premise-spinner {
    background-color: var(--spinner-bg);
    font-family: "Space Grotesk", sans-serif;
    padding: .25rem;
    display: flex;
    gap: 0.25rem;
    position: relative;
}

.multi-input {
    align-items: center;
    background-color: var(--multi-input-bg);
    display: flex;
    flex-wrap: wrap; /* rows wider than the panel wrap instead of clipping at its edge */
    gap: 0.2rem;
    justify-content: flex-start;
    padding: .25rem 0 .25rem .75rem;
    margin-left: 1rem;
    margin-bottom: 2.5rem;
}

.single-input {
    display: flex;
    gap: 0.2rem;
    background-color: var(--single-input-bg);
    text-align: center;
    width: fit-content;
    padding: 0 4px;
    flex-direction: column;
    white-space: nowrap;
}

.single-input.grow {
    flex-grow: 1;
}

.single-input.shrink {
    flex-shrink: 1;
}

.select-item {
    background-color: var(--select-background-color);
    color: var(--text-color);
    border: 1px solid #444;
    padding: 10px 12px;
    border-radius: 2px;
    cursor: pointer;
    appearance: none;
}

.select-item:focus {
    border-color: #888;
}

.divider {
    height: 1px; /* Line thickness */
    background-color: #ddd; /* Light gray color */
    margin: 20px 0; /* Space above and below the line */
    border: none; /* No border styles */
}

.game-display {
    flex-grow: 1;
}

.game-area {
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
    border-radius: 0;
    max-width: 750px;
    position: relative;
    box-sizing: content-box;
}

.game-area::before {
    display: none;
    font-family: Oxanium, sans-serif;
    position: absolute;
    bottom: 100%;
    width: calc(100% - 4px);
    left: 2px;
    text-align: center;
    padding: 0.3rem 0;
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #fff;
}

.game-area.right::before {
    content: 'RIGHT';
    display: block;
    background: #28a745;
}

.game-area.wrong::before {
    content: 'WRONG';
    display: block;
    background: #dc3545;
}

.game-area.missed::before {
    content: 'MISSED';
    display: block;
    background: #6c757d;
}

.carousel, .display-outer {
    margin: 0 auto;
    height: fit-content;
    display: none;
}

.carousel.visible, .display-outer.visible {
    display: block;
}

.confirmation-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 0.5rem 0 1.5rem;
    transition: all 0.3s ease-out;
}

.confirmation-true,
.confirmation-false {
    flex-grow: 1;
    font-size: var(--step-1);
    max-width: 10rem;
    padding: 0.45rem 0.7rem;
    touch-action: manipulation;
    transition: filter 0.1s ease;
}

.confirmation-true:hover,
.confirmation-false:hover {
    filter: brightness(1.15);
}

.confirmation-true:active,
.confirmation-false:active {
    filter: brightness(0.85);
}

/* keyboard hint inside the answer buttons - hidden on touch devices,
   matching the "pointer: coarse hides keyboard hints" convention.
   Each hint sits on its key's side: ← left of TRUE, → right of FALSE. */
.key-hint {
    font-family: "JetBrains Mono", monospace;
    font-size: var(--step--2);
    opacity: 0.7;
    margin-left: 0.5em;
}

.confirmation-true .key-hint {
    margin-left: 0;
    margin-right: 0.5em;
}

@media (pointer: coarse) {
    .key-hint {
        display: none;
    }
}

.confirmation-true {
    background-color: var(--correct-color)!important;
}
.confirmation-true:hover {
    box-shadow: 0 3px 5px 0 #4c843488!important;
}

.confirmation-false {
    background-color: var(--wrong-color)!important;
}
.confirmation-false:hover {
    box-shadow: 0 3px 5px 0 #8a526488!important;
}

.score {
    padding: 0 0.5rem;
    font-size: var(--step-1);
    text-shadow: var(--text-outline);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.carousel {
    text-align: center;
}

.carousel_display_label-wrapper, .display-inner {
    position: relative;
    gap: 1em;
}

.carousel_display_label-wrapper {
    padding: 1.5em 1em;
    margin: 0 1.5rem;
}

.display-outer {
    width: fit-content;
    margin-bottom: 1.5rem;
}

.display-inner {
    padding: 1rem 1.5rem;
    margin: 0 3rem;
}

.carousel_display_label-wrapper h2, .display-inner h2 {
    display: flex;
    font-family: Oxanium, sans-serif;
    font-size: var(--step-0);
    letter-spacing: 0.15em;
    justify-content: space-between;
    margin-top: -0.6rem;
    padding: 0 0.5rem 0 0.65rem;
    position: absolute;
    width: 100%;
    gap: 0.5rem;
    top: 0;
    left: 0;
    text-shadow: var(--text-outline);
    color: var(--display-label-color);
}

.carousel_display_label_progress, .display_label_level {
    font-family: "JetBrains Mono", monospace;
    white-space: nowrap;
}

.display_label_type {
    white-space: nowrap;
    overflow: hidden;
}

/* RRT's stage: the nav is an absolute overlay (63px desktop / 45px mobile),
   so a tall question centered against the full viewport slides under it and
   clips. Clear the nav with top padding, keep centering only while the
   content fits (safe), and fall back to scrolling the stage instead of
   clipping it. Scoped to RRT's #game-area - N-Back/CCT boards size
   themselves to fit and the menu pages scroll in their own column.
   :where() keeps specificity at a bare .main-view so the short-viewport
   media block below can still override alignment and padding. */
.main-view:where(:has(#game-area)) {
    place-content: safe center space-evenly;
    overflow: hidden auto;
    padding: 4.5rem 0 0.5rem;
}

.display_text {
    /* 385px = nav clearance (72) + the label/buttons/score chrome inside the
       game area (~305) + breathing room - undersizing this let a tall
       question push the whole stage past the viewport before the premise
       list's own scrollbar kicked in. The floor keeps a usable list on very
       short viewports, where the stage scrolls instead. */
    max-height: max(calc(100svh - 385px), 14rem);
    min-width: 270px;
    line-height: 1.5;
    padding: 0.5rem 0.75rem 0 0.125rem;
    overflow: hidden auto;
}

/* Density steps for tall questions (classes set from the premise count in
   js/rrt/index.js): from 8 premises tighten the leading and spacing, and
   past 12 also step the type down - so the conclusion still lands on screen
   instead of scrolling away with the premises. */
.display_text.dense-question {
    line-height: 1.4;
}

.display_text.dense-question .formatted-premise,
.display_text.dense-question .formatted-operation {
    font-size: 0.92em;
    margin-bottom: 0.35rem;
}

.display_text.big-question {
    line-height: 1.3;
}

.display_text.big-question .formatted-premise,
.display_text.big-question .formatted-operation {
    font-size: 0.85em;
    margin-bottom: 0.2rem;
}

.display_text.minimal .formatted-premise,
.display_text.minimal .formatted-operation,
.display_text.minimal:not(.complicated-conclusion) .formatted-conclusion {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    justify-items: center;
    gap: 1.2rem;
}

.display_text.minimal .formatted-premise > span:nth-child(1),
.display_text.minimal .formatted-operation > span:nth-child(1),
.display_text.minimal:not(.complicated-conclusion) .formatted-conclusion > span:nth-child(1) {
    justify-self: end;
}

.display_text.minimal .formatted-premise > span:nth-child(2),
.display_text.minimal .formatted-operation > span:nth-child(2),
.display_text.minimal:not(.complicated-conclusion) .formatted-conclusion > span:nth-child(2) {
    min-width: 2rem;
    justify-self: center;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.display_text.minimal .formatted-premise > span:nth-child(3),
.display_text.minimal .formatted-operation > span:nth-child(3),
.display_text.minimal:not(.complicated-conclusion) .formatted-conclusion > span:nth-child(3) {
    justify-self: start;
}

.game-area.wide-premises {
    max-width: 900px;
}

.display_text.wide-premises .formatted-premise {
    display: grid;
    grid-template-columns: 1fr 2.5fr 1fr 2.5fr 1fr;
    justify-items: center;
    gap: 0.7rem;
}

.display_text.wide-premises.minimal .formatted-premise {
    grid-template-columns: repeat(5, 1fr);
    gap: 1.2rem;
}

.display_text.wide-premises .formatted-premise > span:nth-child(1) {
    justify-self: end;
}

.display_text.wide-premises .formatted-premise > span:nth-child(3) {
    justify-self: center;
}

.display_text.wide-premises .formatted-premise > span:nth-child(5) {
    justify-self: start;
}

.ci-Wifi_None {
    visibility: hidden;
}

.hqli-preamble,
.hqli-postamble,
.hqli-transform-header {
    font-size: var(--step--2);
    opacity: 0.7;
}

.formatted-premise,
.formatted-operation {
    margin-bottom: 0.7rem;
}

.hqli-premise,
.hqli-operation {
    margin-bottom: 0.4rem;
}

.preamble,
.postamble,
.transform-header {
    user-select: none;
    color: var(--preamble-color);
    display: block;
    font-size: var(--step--1);
    font-weight: bolder;
    line-height: 0.4rem;
    margin: 0.5rem 0 0.9rem;
}

.postamble, .transform-header {
    margin-top: 2.2rem;
}

.highlight {
    font-weight: 700;
    padding: 0 3px;
    background-color: var(--background-color);
    letter-spacing: normal;
    border-radius: 2px;
}

.pos-degree {
    color: #00E5FF;
}

.neg-degree {
    color: #FF6700;
}

.formatted-conclusion {
    margin-top: 0;
    position: relative;
}

.formatted-conclusion,
.formatted-premise,
.formatted-operation,
.preamble,
.postamble,
.transform-header {
    padding: 0 1px;
    text-shadow: var(--text-outline);
}

.spoiler .formatted-conclusion::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 3px;
    background: #000;
}

.spoiler:hover .formatted-conclusion::after {
    background: transparent;
    pointer-events: none;
}

.carousel_controls {
    display: inline-flex;
    gap: 150px;
    margin: 0.5rem auto 0;
}

.border-left,
.border-right,
.bracket-lip-top-left,
.bracket-lip-top-right,
.bracket-lip-bottom-left,
.bracket-lip-bottom-right {
    position: absolute;
    background-color: var(--bracket-color);
    box-shadow: var(--bracket-box-shadow);
}

.border-left,
.border-right {
    height: 100%;
    width: 0.33rem;
    top: 0;
}

.border-left {
    left: -1rem;
}

.border-right {
    right: -1rem;
}

.bracket-lip-top-left {
    top: 0;
    left: -1rem;
    width: 1rem;
    height: 0.33rem;
}

.bracket-lip-bottom-left {
    bottom: 0;
    left: -1rem;
    width: 1rem;
    height: 0.33rem;
}

.bracket-lip-top-right {
    top: 0;
    right: -1rem;
    width: 1rem;
    height: 0.33rem;
}

.bracket-lip-bottom-right {
    bottom: 0;
    right: -1rem;
    width: 1rem;
    height: 0.33rem;
}

.subject {
    font-weight: bolder;
    text-transform: uppercase;
}

.analogy-statement {
    font-size: var(--step--1);
    margin: 2px 0;
}

.level-wrapper {
    justify-self: center;
    width: fit-content;
    margin: 0 auto;
    padding-bottom: 20px;
}

.level {
    position: relative;
    padding: 0 0.5rem 0 calc(4px + 0.5rem);
}

.progress-tracker {
    visibility: hidden;
    position: relative;
    bottom: 6px;
    margin-top: -4px;
    text-align: center;
    font-size: var(--step--2);
    line-height: 1.3;
    min-height: 1.3em;
}

.progress-tracker.visible {
    visibility: visible;
    color: var(--correct-color);
}

.is-connector {
    color: var(--accent-dim-color);
    text-transform: uppercase;
}

.is-negated {
    color: #f00;
}

.is-negated > svg {
    fill: #f00 !important;
}

.negation-explainer {
    color: var(--accent-color);
    font-size: var(--step--1);
    font-style: italic;
}

.sign {
    position: absolute;
    bottom: 0.5em;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Zen Dots", sans-serif;
    color: #444;
    text-decoration: none;
}

label.open {
    display: block;
    background-color: var(--label-background-color);
    color: var(--label-color);
    cursor: pointer;
    font-size: var(--step-0);
    font-weight: bold;
    padding: 1rem;
    position: absolute;
    z-index: 50;
}

.open--top-left {
    left: env(safe-area-inset-left, 0);
    top: env(safe-area-inset-top, 0);
    transform-origin: top left;
    transform: rotateZ(90deg) translateY(-100%);
}

.open--top-right {
    right: env(safe-area-inset-right, 0);
    top: env(safe-area-inset-top, 0);
    transform-origin: top right;
    transform: rotateZ(-90deg) translateY(-100%);
}

.open--bottom-left {
    left: env(safe-area-inset-left, 0);
    bottom: env(safe-area-inset-bottom, 0);
    transform-origin: bottom left;
    transform: rotateZ(90deg) translateX(calc(-100% - 1rem));
}

.open--bottom-right {
    right: env(safe-area-inset-right, 0);
    bottom: env(safe-area-inset-bottom, 0);
    transform-origin: bottom right;
    transform: rotateZ(-90deg) translateX(calc(100% + 1rem));
}

label.open:hover {
    text-shadow: 0 0 5px var(--accent-dim-color);
}

input:checked + .offcanvas {
    transform: translateX(0);
}

.offcanvas {
    align-content: start;
    color: var(--offcanvas-fg);
    background: var(--offcanvas-bg);
    display: flex;
    height: 100%;
    max-width: 480px;
    position: absolute;
    top: 0;
    transition: all 0.3s ease-out;
    width: fit-content;
    z-index: 1000;
}

.offcanvas-body {
    overflow: hidden auto;
    padding: 1rem;
    width: calc(100% - 2rem);
    font-size: var(--step--1);
}

.offcanvas-side {
    width: 2rem;
}

.offcanvas--left {
    left: 0;
    transform: translateX(-100%);
}

.offcanvas--left .offcanvas-body {
    direction: rtl;
}

.offcanvas--right {
    right: 0;
    transform: translateX(100%);
}

.offcanvas-close {
    cursor: pointer;
    font-size: 2rem;
    line-height: 1;
    padding: 0.5rem;
    position: absolute;
    top: 0;
    bottom: 0; /* the whole side strip closes the panel - the only in-panel dismissal on phones, where the panel is full-width and there is no "outside" to tap */
}

.offcanvas--left .offcanvas-close {
    right: 0;
}

.offcanvas--right .offcanvas-close {
    left: 0;
}

.explainer {
    font-size: var(--step--1);
    font-style: italic;
    list-style: none;
    margin: 0.5rem 0.2rem;
    padding-left: 1rem;
}

.ctrl__outer {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    gap: 1.25rem;
}

.ctrl__inner {
    align-items: center;
    display: flex;
    gap: 0.6rem;
}

/* Accent hue picker: the track IS the choice - a hue wheel rendered at the
   accent's own S/L so the thumb position previews the resulting colour. */
.accent-range {
    flex: 1;
    min-width: 6rem;
    height: 0.75rem;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    background: linear-gradient(to right,
        hsl(0deg 28% 60%), hsl(60deg 28% 60%), hsl(120deg 28% 60%),
        hsl(180deg 28% 60%), hsl(240deg 28% 60%), hsl(300deg 28% 60%), hsl(360deg 28% 60%));
    cursor: pointer;
}
.accent-range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 0.9rem;
    height: 1.4rem;
    background: var(--accent-color);
    border: 2px solid var(--text-color);
}
.accent-range::-moz-range-thumb {
    width: 0.9rem;
    height: 1.4rem;
    border: 2px solid var(--text-color);
    border-radius: 0;
    background: var(--accent-color);
}

.big-input {
    font-size: var(--step-0);
}

/* settings rows whose input a mode has locked (e.g. Jaeggi) - dimmed, showing the effective value */
.ctrl__inner:has(input:disabled, select:disabled),
.inline-input__outer:has(input:disabled) {
    opacity: 0.45;
}

.ctrl__inner:has(input:disabled) .switch {
    cursor: default;
}

.switch {
    align-items: center;
    border: 2px solid var(--switch-border-color);
    background-color: var(--switch-background-color);
    cursor: pointer;
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative;
    transition: all 1s ease-out;
    height: 2rem;
    width: 2rem;
}

.switch::after {
    background-color: var(--switch-unselected-color);
    content: "";
    height: 0.75rem;
    position: absolute;
    transition: all 0.1s ease-out;
    width: 0.75rem;
}

.inline-premise-spinner .switch {
    height: 1.5rem;
    width: 1.5rem;
}

input[type="checkbox"]:checked + .switch {
    border-color: var(--switch-border-checked-color);
    box-shadow: 0 0 4px var(--switch-border-checked-color);
    transition-timing-function: ease-in;
}

input[type="checkbox"]:checked + .switch::after {
    background-color: var(--switch-selected-color);
    transition-timing-function: ease-in;
}

.shortcuts {
    display: table;
    border-spacing: 36px 1px;
    margin: 0 -24px;
    border-collapse: separate;
}

.keyboard-shortcut {
    display: table-row;
}

.keyboard-shortcut > span {
    display: table-cell;
}

.keyboard-shortcut > p:nth-child(2) {
    margin: 0 auto;
    text-align: center;
}

.hql-frame {
    display: flex;
    flex-direction: column;
}

/* label/value stat rows atop the history panels (RRT / N-Back / CCT) */
.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    color: var(--preamble-color);
}

.stat-row span {
    color: var(--text-color);
    white-space: nowrap;
}

.hql-frame > button {
    width: 100%;
    margin-top: 0.75rem;
}

/* the list's window label (N-Back / CCT history panels) */
.hql-heading {
    font-size: var(--step--1);
    color: var(--preamble-color);
    margin-top: 0.5rem;
}

/* cancelled games/sessions read as ghosts of the completed ones */
.hqli--cancelled {
    opacity: 0.65;
}

/* the "Show cancelled" switch row in the history panels (N-Back, CCT) */
.hql-frame .ctrl__inner {
    margin: 0.5rem 0;
}

.hql {
    display: grid;
    gap: 1rem;
    padding: 1rem 0;
    max-height: 100%;
    overflow: scroll;
}

.hqli {
    background-color: var(--background-color);
    box-shadow: 0 1px 10px 5px #0004;
    position: relative;
}

.hqli .inner {
    border: 1px solid #333;
    border-bottom: 2px dashed #444;
    display: grid;
    gap: 0.15rem;
    padding: 0.5rem 2rem 0.5rem 0.5rem;
}

.hqli .inner > .hqli-premise:nth-child(even) {
    background-color: #fff1;
}

.hqli-premises, .hqli-conclusion {
    margin-bottom: 4px;
}

.hqli--right .inner {
    background-color: #3e31;
    border-bottom-style: solid;
    border-bottom-color: #3e3a!important;
}

.hqli--wrong .inner {
    background-color: #e331;
    border-bottom-style: solid;
    border-bottom-color: #e33a!important;
}

.hqli-answer-user::before,
.hqli-answer::before,
.hqli-response-time::before {
    color: var(--text-color);
    font-weight: bold;
    margin-right: 0.25rem;
}

.hqli-answer-user::before {
    content: "User Answer:"
}

.hqli-answer::before {
    content: "Right Answer:"
}

.hqli-answer-user.true, .hqli-answer.true {
    color: var(--correct-color);
}

.hqli-answer-user.false, .hqli-answer.false {
    color: var(--wrong-color);
}

.hqli-response-time::before {
    content: "Response Time:"
}

.hqli-footer {
    color: #fff6;
    font-size: var(--step--2);
    margin-right: -1rem;
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hqli .inner .index {
    position: absolute;
    padding: 4px;
    top: 0;
    right: 0;
}

.table {
    display: grid;
    grid-auto-rows: minmax(40px, 1fr);
}

.td {
    padding: 3px;
    border: 1px solid var(--switch-border-color);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

.three-d-scene {
    perspective: 1000px;
    padding: 0 0 10px 20px;
    transform-style: preserve-3d;
}

.three-d-plane {
    box-shadow: 0 10px 10px rgb(0 0 0 / 30%);
    background: var(--three-d-background);
}

.plane-1 { transform: rotateY(10deg) rotateX(10deg) translateZ(0);}
.plane-2 { transform: rotateY(12deg) rotateX(10deg) translateZ(-60px);}
.plane-3 { transform: rotateY(14deg) rotateX(10deg) translateZ(-120px);}
.plane-4 { transform: rotateY(16deg) rotateX(10deg) translateZ(-180px);}
.plane-5 { transform: rotateY(18deg) rotateX(10deg) translateZ(-240px);}
.plane-6 { transform: rotateY(20deg) rotateX(10deg) translateZ(-300px);}
.plane-7 { transform: rotateY(22deg) rotateX(10deg) translateZ(-360px);}
.plane-8 { transform: rotateY(24deg) rotateX(10deg) translateZ(-420px);}
.plane-9 { transform: rotateY(26deg) rotateX(10deg) translateZ(-480px);}
.plane-10 { transform: rotateY(26deg) rotateX(10deg) translateZ(-540px);}
.plane-11 { transform: rotateY(26deg) rotateX(10deg) translateZ(-600px);}

.three-d-scene:has(.plane-2) { padding-left: 10px; }
.three-d-scene:has(.plane-3) { padding-left: 20px; }
.three-d-scene:has(.plane-4) { padding-left: 30px; }
.three-d-scene:has(.plane-5) { padding-left: 40px; }
.three-d-scene:has(.plane-6) { padding-left: 50px; }
.three-d-scene:has(.plane-7) { padding-left: 60px; }
.three-d-scene:has(.plane-8) { padding-left: 70px; }
.three-d-scene:has(.plane-9) { padding-left: 80px; }
.three-d-scene:has(.plane-10) { padding-left: 90px; }
.three-d-scene:has(.plane-11) { padding-left: 100px; }

.four-d-scene {
    padding: 30px;
}

.four-d-scene .three-d-scene {
    padding: 0;
}

.binary-explainer-separator {
    height: 2px; 
    margin: 10px 0;
    width: 100%;
    background-color: var(--accent-dim-color);
}

.depth-a {
    color: #FF0;
}

.depth-b {
    color: #0FF;
}

.depth-c {
    color: #F0F;
}

.depth-d {
    color: #0F0;
}

.depth-e {
    color: #FF8000;
}

.depth-f {
    color: #0080FF;
}

.depth-g {
    color: #8000FF;
}

.depth-h {
    color: #008040;
}

.depth-i {
    color: #000080;
}

.indent-a::before { content: ''; visibility: hidden; }
.indent-b::before { content: '('; visibility: hidden; }
.indent-c::before { content: '(('; visibility: hidden; }
.indent-d::before { content: '((('; visibility: hidden; }
.indent-e::before { content: '(((('; visibility: hidden; }
.indent-f::before { content: '((((('; visibility: hidden; }
.indent-g::before { content: '(((((('; visibility: hidden; }
.indent-h::before { content: '((((((('; visibility: hidden; }
.indent-i::before { content: '(((((((('; visibility: hidden; }

svg.junk, svg.noise, svg.anchor {
    height: 1.125em;
    width: auto;
    vertical-align: middle;
}

svg.junk, svg.noise {
    box-shadow: 0 0 0.02em 0.06em #000;
}

.subject svg.junk {
    margin-bottom: 3px;
}

svg.arrow {
    fill: var(--text-color);
}

table.distinction td,
table.distinction th {
    vertical-align: top;
    border-left: 1px solid var(--text-color);
    border-right: 1px solid var(--text-color);
    min-width: 1em;
}

table.distinction {
    margin: 0 auto;
    border-collapse: collapse;
}

.settings-label::before {
    content: 'SETTINGS';
}

.history-label::before {
    content: 'HISTORY';
}

.info-label::before {
    content: 'INFO';
}

.graph-label::before {
    content: 'GRAPH';
}

.tooltip-container {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "JetBrains Mono", monospace;
    width: 20px;
    height: 20px;
    padding-left: 2px;
    background-color: hsl(var(--accent-hue) 10% 25%);
    color: #fff;
    font-size: var(--step--2);
    font-weight: bold;
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
    user-select: none;
}

.tooltip-text {
    visibility: hidden;
    background-color: var(--background-color);
    color: var(--text-color);
    text-align: left;
    padding: 8px;
    border-radius: 4px;
    position: absolute;
    z-index: 100;
    bottom: 120%;
    white-space: nowrap;
    font-size: var(--step--2);
    box-shadow: 0 2px 6px rgb(0 0 0 / 20%);
}

.tooltip-text.right {
    right: 1px;
}

.tooltip-text.shift-left {
    margin-right: 100px;
}

.tooltip-text.shift-left-left {
    margin-right: 200px;
}

.tooltip-text.shift-right {
    margin-left: 100px;
}

/* bounds width instead of relying on a fixed shift to dodge clipping -
   for tooltips whose content varies (e.g. per-mode copy) and needs to
   stay clear of a narrow sidebar's edges at any viewport width */
.tooltip-text.wrap {
    white-space: normal;
    /* width:max-content so the box fills to max-width instead of collapsing
       to min-content (longest word) - the .tooltip-container containing block
       is only 20px, which otherwise renders a tall skinny ribbon */
    width: max-content;
    max-width: 180px;
}

/* roomy, readable box for long explanatory copy (e.g. Auto Progression).
   inherits position:absolute and bottom:120% from .tooltip-text, so it opens
   upward - this row sits low in a tall panel, with far more room above than
   below. max-height keeps it on-screen on short viewports; it scrolls
   internally if it still doesn't fit. */
.tooltip-text.roomy {
    white-space: normal;
    width: max-content;
    /* the panel body clips (overflow: hidden auto) and the "?" icon sits well
       right of centre, so anchor the box's right edge near the icon and let it
       grow leftward into the open space. width capped to still clear the left
       edge on a narrow (mobile) panel. */
    max-width: 290px;
    right: 1px;
    max-height: 60vh;
    overflow-y: auto;
    line-height: 1.45;
}

.tooltip-text.roomy p {
    margin: 0 0 0.6em;
}

.tooltip-text.roomy p:last-child {
    margin-bottom: 0;
}

.tooltip-text.roomy ul {
    margin: 0 0 0.6em;
    padding-left: 1.2em;
}

.tooltip-text.roomy strong {
    color: var(--accent-color, inherit);
}

.tooltip-container:hover .tooltip-text,
.tooltip-container:focus-within .tooltip-text,
.tooltip-container.show .tooltip-text {
    visibility: visible;
}

.profile-container {
    display: flex;
    position: relative;
    gap: 2px;
    align-items: center;
    justify-content: space-between;
    height: 70px;
}

.profile-dropdown {
    position: relative;
    font-size: var(--step-0);
    font-family: "JetBrains Mono", monospace;
    width: 250px;
}

.profile-input {
    width: 100%;
    padding: 8px;
    font-size: var(--step--1);
    font-family: inherit;
    letter-spacing: inherit;
    box-sizing: border-box;
    color: var(--text-color);
    background-color: var(--profile-bg);
    border: var(--profile-border);
    height: 50px;
}

.profile-arrow {
    position: absolute;
    right: 1px;
    top: 0;
    width: 20%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-arrow, .profile-plus, .profile-share {
    font-size: var(--step-2);
    cursor: pointer;
    user-select: none;
    background-color: var(--profile-arrow-bg);
    text-align: center;
    border: 1px solid #333;
    height: 50px;
}

.profile-plus, .profile-share {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* native <button>s for keyboard operability; undo the global button reset's look */
    padding: 0;
    background-color: transparent;
    color: inherit;
}

.profile-plus:not(:disabled):hover, .profile-share:not(:disabled):hover {
    box-shadow: none;
}

.profile-share .icon {
    line-height: 0;
    font-size: var(--step-1);
}

.profile-copied {
    pointer-events: none;
    opacity: 0;
    position: absolute;
    top: 100%;
    right: 0;
    padding: 4px;
    border-radius: 2px;
    background-color: #224222;
    transition: all 0.2s ease-out;
}

.profile-copied.toast {
    opacity: 0.92;
}

.profile-list {
    display: none;
    position: absolute;
    left: 0;
    margin-top: 2px;
    border: var(--profile-select-border);
    background: var(--profile-select-bg);
    max-height: 300px;
    width: min(360px, calc(100vw - 2rem));
    overflow-y: auto;
    z-index: 1000;
    user-select: none;
}

.profile-list .profile-select {
    border-top: 1px solid #444;
    padding: 8px;
    cursor: pointer;
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    overflow: hidden;
    max-width: 380px;
}

.profile-list .profile-select.highlight {
    background-color: var(--profile-select-highlight);
}

.profile-list .profile-select:hover {
    background-color: var(--profile-select-hover);
}

.profile-list .profile-select.highlight:hover {
    background-color: var(--profile-select-highlight-hover);
}

.profile-list .profile-delete {
    display: flex;
    position: absolute;
    right: 9px;
    justify-content: center;
    align-items: center;
    background-color: var(--profile-select-delete);
    width: 40px;
    padding: 8px;
    margin: -9px;
    border-left: 1px solid #444;
    height: 100%;
}

.profile-list .profile-delete:hover {
    background-color: var(--profile-select-delete-hover);
}


.dropdown-settings {
    position: relative;
}

#progression-dropdown {
    font-size: var(--step--2);
    right: 0;
    width: 16rem;
    gap: 6px;
}

#linear-dropdown {
    left: -8rem;
}

.form-select {
    background-color: var(--select-background-color);
    color: var(--text-color);
    border: 1px solid #AAA;
    padding: 5px;
    padding-right: 30px;
    font-size: 16px;
    border-radius: 2px;
    appearance: none;
    cursor: pointer;
    width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 20px;
}

.form-select:hover, .form-select:focus {
    border-color: #666;
}

.settings-gear {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#linear-settings-button {
    background-color: var(--linear-settings-background-color);
    color: var(--text-color);
    border: 1px solid #444;
    padding: 3px 4px;
    border-radius: 2px;
    display: flex;
    gap: 5px;
}

.dropdown {
    display: none;
    flex-direction: column;
    top: 120%;
    position: absolute;
    background-color: var(--background-color);
    box-shadow: 0 4px 8px rgb(0 0 0 / 30%);
    z-index: 1000;
    padding: 6px;
    border-radius: 7px;
}

.dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    margin-bottom: 4px;
    
}

.error-popup {
    display: none;
    position: fixed;
    bottom: 5%;
    right: 5%;
    background-color: #222;
    font-size: var(--step-0);
    width: fit-content;
    height: fit-content;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.error-popup-content {
    background-color: #333;
    padding: 15px;
    padding-bottom: 50px;
    border-radius: 4px;
    box-shadow: 0 4px 8px rgb(0 0 0 / 20%);
    max-width: 350px;
    overflow-wrap: break-word;
}

#error-stack {
    width: 100%;
    height: 150px;
    margin-top: 10px;
    padding: 10px;
    border: 1px solid #555;
    color: #eee;
    background: #111;
    border-radius: 4px;
    font-family: "JetBrains Mono", monospace;
    font-size: var(--step--2);
    resize: none;
}

#error-close-popup, #graph-close-popup, #run-locally-close-popup {
    font-family: Oxanium, sans-serif;
    font-size: var(--step-1);
    background-color: #633;
    color: white;
    border: none;
    cursor: pointer;
}

#error-close-popup:hover {
    background-color: #744;
}

#graph-close-popup:hover, #run-locally-close-popup:hover {
    box-shadow: 0 3px 5px 0 #7448;
}

#error-close-popup {
    position: absolute;
    bottom: 4px;
    right: 4px;
}

#graph-close-popup {
    position: relative;
    max-width: 300px;
    min-width: 150px;
    align-self: flex-end;
    white-space: nowrap;
    overflow: hidden;
}

#run-locally-close-popup {
    white-space: nowrap;
}

.graph-popup {
    position: fixed;
    display: none;
    z-index: 1000;
    padding: 20px;
    background-color: var(--background-color);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgb(0 0 0 / 20%);
    top: 10.0%;
    left: 10%;
    width: 80vw;
    min-height: 75vh;
}

.graph-popup.visible {
    display: flex;
    gap: 8px;
    flex-direction: column;
}

.graph-popup-content {
    height: 60vh;
    display: none;
}

.graph-popup-content.visible {
    display: block;
}


.run-locally-popup {
    position: fixed;
    display: none;
    z-index: 1000;
    padding: 1.25rem;
    background-color: var(--background-color);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgb(0 0 0 / 20%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(360px, 90vw);
}

.run-locally-popup.visible {
    display: block;
}

.run-locally-popup-content {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

/* select-row's own .mb-2 spacing would break the popup's uniform rhythm */
.run-locally-popup-content .mb-2 {
    margin-bottom: 0;
}

.run-locally-note {
    margin: 0;
    margin-top: -0.5rem;
    font-size: var(--step--2);
    color: var(--preamble-color);
}

.run-locally-steps {
    margin: 0;
    padding-left: 1.25rem;
    font-size: var(--step--2);
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.run-locally-popup-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.graph-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.graph-select {
    flex: 1 1 auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.graph-select.selected {
    background: hsl(var(--accent-hue) 36% 17%);
}

.graph-select.selected:hover {
    background: hsl(var(--accent-hue) 33% 29%);
}

.graph-end-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.graph-end-controls > * {
    flex: 1 1 auto;
}

.anchor-explanation {
    display: grid;
    grid-template-columns: repeat(3, 20px);
    grid-template-rows: repeat(3, 20px);
    gap: 2px;
    width: 70px;
    height: 70px;
    margin: 0 auto;
}

#svg-0 { grid-column: 2 / 3; grid-row:  1 / 2; }
#svg-1 { grid-column: 3 / 4; grid-row:  2 / 3; }
#svg-3 { grid-column: 2 / 3; grid-row:  3 / 4; }
#svg-2 { grid-column: 1 / 2; grid-row:  2 / 3; }

.progress-container {
    display: none;
    flex-direction: column;
    align-items: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    font-family: Oxanium, sans-serif;
}

.progress-container.visible {
    display: flex;
}

#daily-progress-container {
    left: 0;
}

#weekly-progress-container {
    right: 0;
}

.progress-bar-vertical {
    height: 40vh;
    width: 24px;
    background: rgb(0 0 0 / 50%);
    border: 2px solid var(--accent-deep-color);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-fill {
    position: absolute;
    bottom: 0;
    width: 100%;
    background-color: var(--accent-dim-color);
    transition: height 0.5s ease;
}

.progress-fill.halfway {
    background-color: var(--progress-halfway-color);
}

.progress-fill.complete {
    background-color: var(--accent-color);
}

.progress-content {
    writing-mode: vertical-lr;
    transform: rotate(180deg);
    position: absolute;
    z-index: 1;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    pointer-events: none;
    color: rgb(255 255 255 / 80%);
    text-shadow: 0 0 3px rgb(0 0 0 / 70%);
}

.progress-label {
    font-size: 14px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.progress-value {
    font-family: "Space Grotesk", sans-serif;
    font-size: 13px;
    white-space: nowrap;
    color: rgb(255 255 255 / 90%);
    text-shadow: 0 0 3px rgb(0 0 0 / 50%);
}

@media (width <= 768px) {
    .main-view {
        border: 0;
        box-shadow: none;
    }
    .progress-bar-vertical {
      width: 20px;
    }
    .progress-content {
      padding: 8px 0;
    }
    .progress-label {
      font-size: 12px;
    }
    .progress-value {
      font-size: 11px;
    }
    .display_text {
        font-size: var(--step-05);
    }
    .graph-select {
        font-size: var(--step--1);
        flex: 1 1 auto;
        white-space: nowrap;
        overflow: hidden;
    }
    /* [DECISION] the TRUE/FALSE bar pins to the bottom edge: full-width
       thumb-zone targets at a fixed position, instead of small buttons
       that shift vertically with question length (§5) */
    .confirmation-buttons {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        gap: 2px;
        z-index: 100;
        background-color: var(--background-color);
        padding: 0 env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
    }
    .confirmation-true,
    .confirmation-false {
        max-width: none;
        min-height: 3.5rem;
    }
    .game-area {
        padding-bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
    }
    /* keep the bottom corner tabs clear of the answer bar - scoped to the
       page that has one (RRT); elsewhere the tabs stay in their corners */
    body:has(.confirmation-buttons) .open--bottom-left,
    body:has(.confirmation-buttons) .open--bottom-right {
        bottom: calc(3.5rem + env(safe-area-inset-bottom, 0px));
    }
}

@media (width <= 500px) {
    .offcanvas {
        max-width: none;
        width: calc(100vw);
    }

    .display-inner {
        padding: 0.5rem 0.125rem 0.5rem 0.625rem;
        margin: 0;
    }

    .display_text {
        padding-right: 0.375em;
    }

    .display-inner .border-left,
    .display-inner .border-right,
    .display-inner .bracket-lip-top-left,
    .display-inner .bracket-lip-top-right,
    .display-inner .bracket-lip-bottom-left,
    .display-inner .bracket-lip-bottom-right {
        display: none;
    }

    label.open {
        padding: 0.7rem 0.9rem;
    }

    .game-area {
        max-width: calc(100vw - 3rem);
    }

    .inline-input__outer {
        gap: 0.2rem;
    }

    .carousel_display_label-wrapper h2, .display-inner h2 {
        gap: 0.2rem;
    }

    .display_text.minimal {
        font-size: var(--step-1);
    }

    svg.junk, svg.noise, svg.anchor {
        height: 1.25em;
    }

    /* nowrap bubbles overflow a phone viewport - let them wrap */
    .tooltip-text {
        white-space: normal;
        width: max-content;
        max-width: min(80vw, 22rem);
    }

    /* the 180° Mode "?" (the one riding a spinner's right edge) lands at
       the far left when its multi-input row wraps on phones - flip its
       bubble to open rightward */
    .multi-input .inline-premise-spinner .tooltip-text.right {
        left: 0;
        right: auto;
    }

    /* [DECISION] the graph popup becomes a full-screen sheet - the 80vw
       window leaves unusable slivers on a phone (§5) */
    .graph-popup {
        top: 0;
        left: 0;
        width: 100vw;
        height: 100svh;
        min-height: 0;
        border-radius: 0;
        box-sizing: border-box;
        overflow-y: auto;
        padding: 15px;
        padding-bottom: calc(15px + env(safe-area-inset-bottom, 0px));
    }

    /* its footer (footnote + Close) wraps instead of squeezing side by side */
    .graph-end-controls {
        flex-wrap: wrap;
        gap: 0.5rem;
        font-size: var(--step--2);
    }
}

@media (width <= 360px) {
    label.open {
        padding: 0.5rem 0.6rem;
    }

    .display-inner {
        padding: 0.5rem 0 0.5rem 0.25rem;
        margin: 0;
    }

    .display_text {
        padding-right: 0.125em;
    }
}

/* touch screens: the offcanvas panels are dense desktop rows - give
   text/number inputs, selects and buttons a finger-sized hit box
   (checkboxes excluded: the switch-row skin draws its own big track) */
@media (pointer: coarse) {
    .offcanvas-body input:not([type="checkbox"]),
    .offcanvas-body select,
    .offcanvas-body button {
        min-height: 2.4rem;
    }
}

/* short viewports (phone landscape): the centered no-scroll stage clips the
   question behind the nav and buttons - top-align the stage, clear the nav,
   and let the page scroll instead */
@media (height <= 520px) {
    .main-view {
        border: 0;
        box-shadow: none;
        place-content: start space-evenly;
        overflow-y: auto;
        padding: 0; /* .game-area's own margin-top clears the nav here - keeping the base rule's stage padding too would double it */
    }
    .game-area {
        margin-top: 4rem;
    }
    .display_text {
        max-height: none;
    }
}

/* --- N-Back --- */

.game-menu {
    display: flex;
    position: absolute;
    z-index: 50;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--label-background-color);
}

.game-menu__item {
    display: block;
    color: var(--label-color);
    opacity: 0.7; /* 0.5 washes out on the light theme */
    font-family: "Zen Dots", sans-serif;
    font-size: var(--step-0);
    font-weight: bold;
    padding: 1rem;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
}

.game-menu__item:hover { opacity: 0.9; }

.game-menu__item.selected {
    opacity: 1;
    border-bottom-color: var(--label-color);
}

/* the full nav doesn't fit next to the corner tabs at phone widths, and
   wrapping it onto a second row (tried first) grew tall enough to cover
   the HUD stats sitting right below it - show just a back-to-menu button
   instead; switching games happens from the main menu (after the base
   rules above so the overrides win at equal specificity) */
@media (width <= 500px) {
    .game-menu {
        max-width: calc(100vw - 6.5rem);
    }

    .game-menu__item:not(:first-child) {
        display: none;
    }

    .game-menu__item {
        font-size: var(--step--1);
        padding: 0.75rem 0.5rem;
        white-space: nowrap;
    }

    .game-menu__item:first-child::before {
        content: '← ';
    }
}

.nback__match {
    background-color: var(--single-input-bg);
    color: var(--text-color);
    border: 1px solid var(--switch-border-color);
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: var(--step-0);
    padding: 0.75rem 1.5rem;
}

.nback__match--right { background-color: var(--correct-color); }
.nback__match--wrong { background-color: var(--wrong-color); }
.nback__match--missed { background-color: var(--nback-missed-color); }

/* typed answer readout for the arithmetic modes */
.nback__answer { font-size: var(--step-0); }
.nback__answer--right { color: var(--correct-color); }
.nback__answer--wrong { color: var(--wrong-color); }

.nback__start {
    background-color: var(--label-background-color);
    color: var(--label-color);
    border: 1px solid var(--switch-border-color);
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: var(--step-0);
    font-weight: bold;
    padding: 0.75rem 2.5rem;
}

.nback__result {
    font-size: var(--step-0);
    text-align: center;
    line-height: 1.6;
}

/* --- Main menu (title-screen style) --- */

/* Default menu backdrop.
   Photo: https://www.pexels.com/photo/fog-over-green-forest-in-mountains-5407567/
   Photographer: Kieren Ridley - Pexels License (free to use).
   Local copy at 1920px wide (img/menu-bg.jpg).
   Scrim gradients sit in the same background list, so a user-set custom
   background (inline style from js/shared/background.js) overrides both. */
body.menu-mode .background-image {
    background-image:
        linear-gradient(to right, #000d 0%, #0008 45%, #0003 100%),
        linear-gradient(to top, #000c 0%, #0000 45%),
        url('../img/menu-bg.jpg');
    filter: none;
}

body.menu-mode.light-mode .background-image {
    background-image:
        linear-gradient(to right, #fffd 0%, #fff9 45%, #fff5 100%),
        linear-gradient(to top, #fffc 0%, #fff0 45%),
        url('../img/menu-bg.jpg');
}

body.menu-mode .main-view {
    grid-template-columns: 1fr;
    place-content: stretch stretch;
}

.menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 2rem;
    width: 100%;
    height: 100%;
    padding: clamp(1.5rem, 5vh, 3.5rem) clamp(1rem, 7vw, 7rem);
    box-sizing: border-box;
    position: relative;
    z-index: 1;
    max-height: 100%;
    overflow: hidden auto;
    color: var(--text-color);
}

/* Only fits as a corner watermark on wide desktop viewports - anything
   narrower and the menu scrolls taller than one screen, so the logo ends
   up floating over card content instead of the page background. */
.menu__logo {
    display: none;
}

@media (width > 900px) {
    .menu__logo {
        display: block;
        position: absolute;
        right: clamp(1rem, 3vw, 2rem);
        bottom: clamp(1rem, 3vw, 2rem);
        width: clamp(3.5rem, 10vw, 6rem);
        height: clamp(3.5rem, 10vw, 6rem);
        opacity: 0.85;
        pointer-events: none;
        background-color: var(--accent-color);
        -webkit-mask: url('../img/icon-192.png') center / contain no-repeat;
        mask: url('../img/icon-192.png') center / contain no-repeat;
    }
}

.menu__title {
    color: var(--label-color);
    font-family: "Format 1452", "Zen Dots", sans-serif;
    letter-spacing: 0.22em;
    font-size: var(--step-4);
    margin: 0;
    text-shadow: var(--text-outline);
}

.menu__subtitle {
    font-size: var(--step--1);
    letter-spacing: 0.05em;
    color: var(--preamble-color);
    text-shadow: var(--text-outline);
    margin: 0.25rem 0 0 0.25rem;
}

@media (width <= 500px) {
    .menu__subtitle {
        font-size: var(--step--2);
    }
}

.menu__github {
    margin: 1.5rem 0 0;
    text-align: center;
}
.menu__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    align-items: stretch;
    gap: 1.5rem;
    width: min(100%, 72rem);
}

/* 19rem grid track minimum exceeds available width below ~360px once
   .menu's own padding is subtracted - go single-column, per the ≤500px
   "go full-width" rule (UI_DESIGN.md §5). Must come after the base rule
   above - same specificity, and source order decides the tie. */
@media (width <= 500px) {
    .menu__cards {
        grid-template-columns: 1fr;
    }
}

/* combined goal tracker: card-material section above the exercise cards;
   bars are the horizontal cousin of the RRT/CCT .progress-bar-vertical
   widget, same fill-state colors */
.menu__goals {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: min(100%, 72rem);
    padding: 1rem 1.25rem;
    background-color: var(--label-background-color);
    box-sizing: border-box;
}

.menu__goals-heading {
    font-size: var(--step--2);
    letter-spacing: 0.15em;
    color: var(--preamble-color);
    margin-bottom: 0.25rem;
}

.menu-goal {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.menu-goal__label {
    font-family: Oxanium, sans-serif;
    font-weight: 700;
    font-size: var(--step--2);
    letter-spacing: 0.15em;
    min-width: 6.5rem;
    text-align: right;
}

.menu-goal__track {
    flex: 1;
    height: 12px;
    background-color: var(--background-color);
    border: 1px solid var(--accent-deep-color);
    border-radius: 0;
    overflow: hidden;
}

.menu-goal__fill {
    height: 100%;
    width: 0;
    background-color: var(--accent-dim-color);
    transition: width 0.5s ease;
}

.menu-goal__fill.halfway {
    background-color: var(--progress-halfway-color);
}

.menu-goal__fill.complete {
    background-color: var(--accent-color);
}

.menu-goal__value {
    font-size: var(--step--2);
    min-width: 11ch;
    text-align: right;
    white-space: nowrap;
}

@media (width <= 500px) {
    .menu-goal__label {
        min-width: 4.5rem;
        letter-spacing: 0.08em;
    }

    .menu-goal__value {
        min-width: 0;
    }
}

.menu-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    background-color: var(--label-background-color);
    position: relative; /* anchors the "?" tooltip bubble */
    color: var(--text-color);
    text-decoration: none;
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

.menu-card:hover,
.menu-card:focus-visible,
.menu-card:focus-within {
    opacity: 1;
    z-index: 2; /* keep the "?" bubble above sibling cards */
}

/* "?" next to the card name: bubble anchors to the card, drops below the
   name and wraps, so it never clips at the viewport top or right edge */
.menu-card .tooltip-container {
    position: static;
    vertical-align: middle;
    letter-spacing: normal;
}

.menu-card .tooltip-text {
    top: calc(0.5rem + 1.4 * var(--step-2));
    bottom: auto;
    left: 0;
    white-space: normal;
    letter-spacing: normal;
    line-height: 1.5;
    width: max-content;
    max-width: 100%;
    box-sizing: border-box;
}

.menu-card__name {
    color: var(--label-color);
    font-family: "Zen Dots", sans-serif;
    letter-spacing: 0.25em;
    font-size: var(--step-2);
    margin: 0;
    text-shadow: var(--text-outline);
    align-self: flex-start;
    border-bottom: 3px solid transparent;
    transition: border-color 0.15s ease;
}

.menu-card:hover .menu-card__name,
.menu-card:focus-visible .menu-card__name {
    border-bottom-color: var(--label-color);
}

.menu-card__stats { font-size: var(--step--1); }

/* the panel-empty utility's popup padding is too airy inside a card row */
.menu-card .panel-empty { padding: 0; }

.menu-card__recent {
    font-size: var(--step--2);
    color: var(--preamble-color);
}

.menu-card__info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: var(--step--1);
    line-height: 1.5;
    color: var(--preamble-color);
}

.menu-card__info p { margin: 0; }

.menu-card__enter {
    color: var(--label-color);
    font-weight: bold;
    align-self: flex-end;
    margin-top: auto; /* pins ENTER to the card's bottom edge in the grid */
    opacity: 0.8;
    transition: opacity 0.15s ease;
}

.menu-card:hover .menu-card__enter,
.menu-card:focus-visible .menu-card__enter {
    opacity: 1;
}

/* second tier: quiet links to non-game pages (reference/utility) */
.menu__pages {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding-top: 1.5rem;
    font-size: var(--step--1);
    letter-spacing: 0.15em;
}

.menu__pages a {
    color: var(--preamble-color);
    text-decoration: none;
    padding-bottom: 2px;
    border-bottom: 3px solid transparent; /* same hover affordance as .menu-card__name */
    transition: border-color 0.15s ease, color 0.15s ease;
}

.menu__pages a:hover,
.menu__pages a:focus-visible {
    color: var(--label-color);
    border-bottom-color: var(--label-color);
}

.menu__footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    padding-top: 1.5rem;
}

/* labels the backup/reset row so the footer scans as a section */
.menu__footer-heading {
    font-size: var(--step--2);
    letter-spacing: 0.15em;
    color: var(--preamble-color);
    text-shadow: var(--text-outline);
}

/* footer control rows: settings chrome, same size as the offcanvas panels */
.menu__backup,
.menu__appearance,
.menu__run-locally {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--step--1);
}

.menu__appearance {
    gap: 0.75rem 2rem;
}

/* the destructive one stands apart from the safe backup actions */
.menu__backup button.delete {
    margin-left: 1.5rem;
}

/* Heading + controls pairs are grouped in boxes for mobile's benefit; on
   desktop the wrapper dissolves and the footer lays out exactly as before. */
.menu__footer-box {
    display: contents;
}

/* ≤500px: the footer's wrapping flex rows turn into a scannable stack -
   the free-wrap layout lands controls at random x-positions on a 390px
   screen and reads as clutter over the photo background. */
@media (width <= 500px) {
    /* 2x2 grid instead of a 3+1 wrap with CREDITS orphaned on its own line */
    .menu__pages {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
        width: 100%;
    }

    /* each section in its own card-material box, same surface as the
       exercise cards/goals - loose controls floating on the photo don't
       read as sections on a phone-length scroll */
    .menu__footer {
        width: 100%;
        gap: 1rem;
    }

    .menu__footer-box {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        width: 100%;
        background-color: var(--label-background-color);
        padding: 1rem 1.25rem 1.25rem;
    }

    /* one control row per line, left-aligned - no chaotic wrap */
    .menu__appearance {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.9rem;
        width: 100%;
    }

    /* rows wrap as whole controls (Clear drops below Choose Image) instead
       of overflowing the box or squeezing button text into two lines */
    .menu__appearance .ctrl__inner {
        flex-wrap: wrap;
        max-width: 100%;
    }

    .menu__appearance button {
        white-space: nowrap;
    }

    /* equal-width 2x2 button grid; the desktop margin that pushes Reset App
       apart just makes the wrap ragged here */
    .menu__backup {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch; /* the base rule's center leaves 1-line buttons shorter than their 2-line row mates */
        width: 100%;
    }

    .menu__backup button.delete {
        margin-left: 0;
    }

    /* desktop-shortcut installer - meaningless on a phone */
    .menu__footer-box:has(.menu__run-locally) {
        display: none;
    }
}

/* ---- Studies page (studies.html) ---- */

.studies-filters {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

.studies-filters .select-item[type="search"] {
    cursor: text;
}

@media (width >= 500px) {
    .studies-filters {
        grid-template-columns: 1fr 1fr;
    }

    .studies-filters [type="search"] {
        grid-column: 1 / -1;
    }
}

.studies-count {
    font-size: var(--step--1);
    color: var(--preamble-color);
    text-shadow: var(--text-outline);
}

.studies-list {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    padding-bottom: 2rem;
}

.study-card {
    flex: 1 1 30rem;
    box-sizing: border-box;
    min-width: 0;
    background-color: var(--background-color);
    border: 1px solid #333;
    box-shadow: 0 1px 10px 5px #0004;
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Studies of Cerevana's own exercises (RRT / N-Back / CCT) carry the same
   accent stripe .test-card--due uses on transfer.html. */
.study-card--own {
    border-left: 4px solid var(--accent-color);
}

/* Cards with a paper URL are fully clickable (delegated handler in
   js/studies/page.js) - a small lift + tint signals it on hover. */
.study-card--link {
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Keep hoverable cards on their own compositor layer permanently - promoting
   one only while its hover transform runs makes the text re-rasterize and
   shift a subpixel when the animation ends (visible flicker). Hover-capable
   devices only, so touch devices don't pay the extra layer memory. */
@media (hover: hover) {
    .study-card--link {
        will-change: transform;
    }
}

.study-card--link:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 14px 5px #0004;
}

.study-card__title {
    font-size: var(--step-0);
    margin: 0;
    line-height: 1.4;
}

.study-card__title a {
    color: var(--text-color);
    text-decoration: none;
}

.study-card__title a:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.study-card__ext {
    color: var(--accent-color);
}

.study-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
}

.study-card__summary {
    margin: 0;
    font-size: var(--step--1);
    line-height: 1.5;
}

.study-card__figures {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.study-card__figure {
    max-height: 10rem;
    width: auto;
    max-width: 100%;
    border: 1px solid #333;
}

/* ---- Transfer page (transfer.html) ---- */

/* Single-column: browse/log tests at the top, the filterable chart below -
   nothing sits in a persistent sidebar anymore. */
.transfer-bottom {
    width: 100%;
    margin-top: 2rem;
}

.transfer-due-section {
    width: 100%;
    margin-bottom: 1.5rem;
}

.transfer-due {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.transfer-due__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    text-align: left;
    font: inherit;
    color: var(--text-color);
    background-color: var(--background-color);
    border: 1px solid #333;
    border-left: 4px solid var(--accent-color);
    box-shadow: 0 1px 10px 5px #0004;
    padding: 0.6rem 1rem;
    cursor: pointer;
}

.transfer-due__row:hover {
    box-shadow: none;
    background-color: #fff1;
}

.transfer-due__name {
    font-weight: bold;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Only shown when a multi-metric test's siblings have drifted out of sync -
   names the specific metrics that are overdue, not just the parent test. */
.transfer-due__partial {
    font-weight: normal;
    font-size: var(--step--2);
    color: var(--preamble-color);
}

.transfer-due__age {
    font-size: var(--step--2);
    color: var(--preamble-color);
    white-space: nowrap;
}

.transfer-protocol {
    background-color: var(--folder-bg);
    padding: 0.5rem 1rem;
    width: 100%;
    margin-bottom: 1.5rem;
}

.transfer-protocol summary {
    cursor: pointer;
    font-family: Oxanium, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--step--1);
    padding: 0.25rem 0;
}

.transfer-protocol .explainer {
    margin-top: 0.5rem;
}

/* Wrapping flex, not a fixed-column grid: cards grow to fill each row edge
   to edge, so a category with a leftover card doesn't strand empty space on
   the right. */
.transfer-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: stretch;
    width: 100%;
    padding-bottom: 1rem;
}

.transfer-list .test-card {
    flex: 1 1 19rem;
}

.transfer-category {
    width: 100%;
    font-family: Oxanium, sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: var(--step--1);
    margin-top: 1.25rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #333;
}

.transfer-category:first-child {
    margin-top: 0;
}

.transfer-section {
    width: 100%;
}

/* Test cards are plain buttons that open the shared #test-popup - closed by
   default for a compact browse view; the single-line label alone carries
   enough (name + score/delta/due badges) that you don't need to open the
   popup just to see where you stand on it. */
.test-card {
    display: flex;
    /* Column, not a wrapping row: name line on top, badge line beneath, the
       same geometry whether a card carries zero badges or two - a wrapping
       row floated the badge beside the name only when it happened to fit,
       so adjacent cards' names didn't line up. */
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
    /* Room for a badge line reserved up front, so a card doesn't grow the
       moment a score is logged - and .transfer-list's align-items: stretch
       doesn't then drag every other card in that row taller along with it. */
    min-height: 6rem;
    text-align: left;
    font: inherit;
    font-size: var(--step-0);
    color: var(--text-color);
    background-color: var(--background-color);
    border: 1px solid #333;
    box-shadow: 0 1px 10px 5px #0004;
    padding: 0.75rem 1.25rem;
    cursor: pointer;
}

.test-card:hover {
    box-shadow: none;
    background-color: #fff1;
}

.test-card--due {
    border-left: 4px solid var(--accent-color);
}

/* Single line, always - a long test name truncates with an ellipsis rather
   than wrapping (the full name is a native tooltip here, and repeated as
   .test-card__title once the popup opens) so every card in the grid stays
   the same short height, whatever its name length. */
.test-card__name {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Always rendered, even empty on an untested card - reserving the row's
   height keeps every card's name on the same line as its row neighbors'.
   1.75rem ~ a real badge's rendered height (--step--2 line + 0.2rem pads),
   so a card with badges and one without center to the same name position. */
.test-card__badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    min-height: 1.75rem;
}

.test-card__badge,
.study-card__badge {
    flex: 0 0 auto;
    font-family: "JetBrains Mono", monospace;
    font-size: var(--step--2);
    background-color: var(--folder-bg);
    padding: 0.2rem 0.5rem;
    white-space: nowrap;
}

.test-card__badge--right { color: var(--correct-color); }
.test-card__badge--wrong { color: var(--wrong-color); }
.test-card__badge--due,
.study-card__badge--accent { color: var(--accent-color); }
.test-card__badge-warn { flex: 0 0 auto; cursor: help; }

.test-card__title {
    margin: 0;
    font-size: var(--step-0);
    line-height: 1.4;
}

.test-card__meta {
    font-size: var(--step--2);
    letter-spacing: 0.05em;
    color: var(--preamble-color);
}

.test-card__meta a {
    color: var(--preamble-color);
}

.test-card__summary-text {
    margin: 0.75rem 0;
    font-size: var(--step--1);
    line-height: 1.65;
}

.test-card__summary-text:empty {
    display: none; /* a multi-metric group has no single summary - its own margin shouldn't leave a phantom gap */
}

.test-popup-delta {
    margin: 0.75rem 0 0;
}

.test-popup-delta:empty {
    display: none; /* no phantom margin when the metric has under 2 records */
}

.test-card__log {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem 1.5rem;
    background-color: var(--big-input-bg-color);
    padding: 1rem 1.25rem;
}

.test-card__log .inline-input__outer {
    background: none;
    padding: 0;
    gap: 0.5rem;
    width: fit-content;
}

/* The note row soaks up whatever's left of its line, so the free-text field
   gets real room and the submit button lands at the line's right edge. */
.test-card__log .inline-input__outer:has(#test-popup-note) { flex: 1 1 auto; }
.test-card__log .inline-input__outer:has(#test-popup-note) .inline-input__inner { flex: 1; }
#test-popup-note { width: 100%; }

#test-popup-submit {
    margin-left: auto;
    padding: 0.5rem 1.5rem;
}

/* One row per metric (label + its own number input), a stable list that
   fills the same shape whether a test has one metric or several - filling
   in five WAIS-IV Digit Span rows never means clicking between tabs.
   A content-hugging grid, so every input sits right after its label (same
   look as the Date row) and multi-metric inputs line up in one column just
   past the longest label instead of raggedly trailing each name. */
.test-popup-scores {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    gap: 0.6rem 1rem;
    width: 100%; /* still claims its own line in the flex-wrap form */
}

.test-popup-scores .inline-input__outer {
    display: contents; /* label and input become the grid's two cells */
}

.test-popup-scores input[type="number"] {
    width: 8ch;
}

/* Metric name + its own info tooltip + its own baseline/latest badge, all on
   the row's label side - the delta a metric-picker tab used to gate behind a
   click now sits right next to the field you're about to fill in. */
.test-popup-scores__label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* A metric that's a sub-part of an earlier row in the same list (Subgroup in
   the catalog, e.g. Understand Myself's Intellect/Aesthetics under its
   Openness score) - indented with a connecting rule so it reads as nested
   under that row, not a sibling metric of its own. On the label cell, not
   the row: the row is display: contents (paints nothing), and the input
   stays in the shared aligned column. */
.test-popup-scores__row--sub .test-popup-scores__label {
    padding-left: 1.25rem;
    border-left: 2px solid #333;
    margin-left: 0.25rem;
}

/* Tooltip text is nowrap by default (this popup's per-metric descriptions
   run long) - wrap it here so a tooltip never pushes past the
   (overflow-x: hidden) popup's edge and gets silently clipped. A fixed
   width, not max-width: the tooltip bubble's own positioning anchor
   (.tooltip-container) is only 20px wide, so shrink-to-fit sizing against
   that tiny box collapses wrapped text to an oddly narrow column instead of
   filling out to the cap. */
.test-popup-scores .tooltip-text {
    white-space: normal;
    width: 240px;
}

.test-card__note-hint {
    color: var(--preamble-color);
    font-size: var(--step--2);
}

.test-card__history {
    display: flex;
    flex-direction: column;
    font-size: var(--step--1);
    border: 1px solid #333;
    max-height: 14rem;
    overflow-y: auto;
}

.test-card__history:empty {
    display: none; /* no bare bordered box before the first score is logged */
}

.test-card__history-row {
    display: grid;
    grid-template-columns: 7rem 4rem auto 1fr auto;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
}

.test-card__history-row:nth-child(even) {
    background-color: #fff1;
}

.test-card__history-date {
    color: var(--preamble-color);
    font-family: "JetBrains Mono", monospace;
    font-size: var(--step--2);
}

.test-card__history-score {
    font-family: "JetBrains Mono", monospace;
    font-weight: bold;
}

.test-card__history-note {
    color: var(--preamble-color);
    font-size: var(--step--2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0; /* grid tracks size to content by default - without this an unbroken word (a metric tag) forces the "1fr" column, and the whole row, wider than the popup instead of truncating/wrapping in place */
}

/* Which administration form was taken (e.g. "120-item" vs "300-item") - only
   set for tests with more than one non-equivalent form (data/test-battery.md's
   `Variants:` field). */
.test-card__history-variant {
    background-color: var(--folder-bg);
    padding: 0.05rem 0.35rem;
    border-radius: 0.2rem;
}

.test-card__history-delete {
    background: none;
    color: var(--preamble-color);
    padding: 0.25rem 0.5rem;
    line-height: 1;
}

.test-card__history-delete:hover {
    box-shadow: none;
    color: var(--danger-color);
}

/* ---- Test detail popup (opened by clicking a test card or a "ready to
   retest" row) - same fixed/centered/rounded chrome as #graph-popup, at a
   width suited to a form + history list rather than a full-width chart.
   One fixed width for every test, single column top to bottom (title, info,
   History, New entry) - a side-by-side layout used to widen/narrow itself
   depending on whether the open metric had history yet, which read as the
   popup randomly resizing; a stable single column reads the same every time. */
.test-popup {
    position: fixed;
    display: none;
    z-index: 1000;
    top: 8%;
    left: 50%;
    transform: translateX(-50%);
    width: min(92vw, 46rem);
    max-height: 86vh;
    overflow: hidden auto; /* x hidden, y auto - a hidden tooltip's nowrap text can still widen scrollable overflow, and this popup only ever scrolls vertically */
    background-color: var(--background-color);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgb(0 0 0 / 20%);
    padding: 2rem;
}

/* Dim + blur everything behind the popup so it gets full focus. A real
   element (not a pseudo) so clicking it lands outside the popup and the
   existing outside-click close handler fires. */
.test-popup-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999; /* just under .test-popup's 1000 */
    display: none;
    background: rgb(0 0 0 / 35%);
    backdrop-filter: blur(5px);
}

.test-popup-backdrop.visible {
    display: block;
}

.test-popup.visible {
    display: block;
}

/* History / New entry - a small underlined label above each block so the
   popup reads as clearly bounded sections instead of meta text, a history
   table and a form all just floating one after another. */
.test-popup-section {
    margin-top: 1.5rem;
}

.test-popup-section__heading {
    font-size: var(--step--1);
    margin-bottom: 0.5rem;
    padding-bottom: 0.25rem;
    border-bottom: 1px solid #333;
}

.test-popup-content {
    position: relative;
}

.test-popup-close {
    position: absolute;
    top: -0.5rem;
    right: -0.5rem;
    background: none;
    color: var(--preamble-color);
    font-size: 1.5rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
}

.test-popup-close:hover {
    box-shadow: none;
    color: var(--danger-color);
}

/* ---- Popup delta bits: per-step delta inside the merged history rows,
   overall summary line below the history box. ---- */

.transfer-result__row-delta {
    font-family: "JetBrains Mono", monospace;
    font-size: var(--step--2);
    color: var(--preamble-color);
}

.transfer-result__row-delta--right { color: var(--correct-color); }
.transfer-result__row-delta--wrong { color: var(--wrong-color); }

.transfer-result__summary {
    font-size: var(--step--1);
    overflow-wrap: anywhere;
}

.transfer-result__summary strong {
    font-family: "JetBrains Mono", monospace;
    font-size: var(--step-0);
}

.transfer-result__summary--right strong { color: var(--correct-color); }
.transfer-result__summary--wrong strong { color: var(--wrong-color); }

/* Compact - a one-word-ish reliability chip inline after the headline delta,
   not a full sentence on its own line (the full explanation is a title
   tooltip, same pattern as .test-card__badge-warn). */
.transfer-result__warning,
.transfer-result__ok {
    display: inline;
    font-size: var(--step--2);
    cursor: help;
}

.transfer-result__warning { color: var(--accent-color); }
.transfer-result__ok { color: var(--preamble-color); }

/* ---- Chart picker: an "Add to graph" button opens a popup with a
   checkbox list (everything selectable, grouped by test/category - check
   several, then "Add selected") plus one row of removable colored chips for
   the lines actually plotted - the chips are the chart's legend. ---- */
.transfer-chart-picker {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

/* A proper button, sized to be an easy, obvious tap target but no wider than
   its own label - opens the #chart-add-popup below (same fixed/centered/
   backdrop-blurred chrome as #test-popup, so the two popups on this page
   feel like one system). Without align-self it'd stretch to fill its flex
   column parent like every other row here. */
.transfer-chart-add-open {
    align-self: flex-start;
    padding: 0.6rem 1.5rem;
    font-size: var(--step--1);
}

/* Checkbox list grouped by category (training time, then each catalog
   category, multi-metric families as their own labeled sub-group) - a
   selectable option reads in the popup's normal (light) text color, an
   already-logged-out option (no scores yet, so nothing to plot) dims to
   --preamble-color, so which rows are pickable is a color, not a click away. */
.chart-add-options {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    max-height: min(50vh, 26rem);
    overflow-y: auto;
    border: 1px solid #333;
    padding: 0.5rem 0.75rem;
    margin: 0.5rem 0 1rem;
}

.chart-add-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.2rem 0;
    cursor: pointer;
}

.chart-add-option input {
    accent-color: var(--accent-color); /* native grey checkboxes clash with the themed controls everywhere else */
}

.chart-add-option:has(input:disabled) {
    color: var(--preamble-color);
    cursor: not-allowed;
}

.chart-add-option__hint {
    font-size: var(--step--2);
}

/* Same nesting treatment as .test-popup-scores__row--sub - a sub-aspect
   indented under its domain row instead of reading as a plain sibling. */
.chart-add-option--sub {
    padding-left: 1.25rem;
    border-left: 2px solid #333;
    margin-left: 0.25rem;
}

.chart-add-subheading {
    font-size: var(--step--2);
    color: var(--preamble-color);
    margin: 0.3rem 0 0.1rem 0.75rem;
}

.chart-add-submit {
    display: block;
    width: 100%;
    padding: 0.6rem;
}

.transfer-chart-lines {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.transfer-chart-lines:empty {
    display: none;
}

/* Same shape as .qb-chip/.cct-chip, but clickable: the background is the
   line's assigned color, clicking removes the line from the graph. */
.transfer-chart-line {
    padding: 0.15rem 0.5rem;
    border-radius: 0.25rem;
    font: inherit;
    font-size: var(--step--1);
    color: #fffffd;
}

.transfer-chart-line__x {
    opacity: 0.65;
}

.transfer-chart-wrap {
    position: relative;
    height: 22rem;
    margin-top: 0.5rem;
}

@media (width <= 500px) {
    .test-card__history-row {
        grid-template-columns: 5.5rem 3rem auto 1fr auto;
    }
    /* The note column (metric tag + variant tag + free-text note) is too
       narrow here to keep everything on one nowrap line without crushing the
       metric tag itself down to 3-4 letters - let it wrap the row taller
       instead of silently truncating the thing you're trying to identify.
       overflow-wrap: the metric tag is one unbroken word (e.g. "Sequencing")
       with no space to break at - without permission to break mid-word it'd
       still overflow its own cell even with white-space: normal set. overflow
       stays hidden (not visible): anything that still doesn't fit clips at
       its own cell instead of visually spilling into the delete button next to it. */
    .test-card__history-note {
        white-space: normal;
        overflow-wrap: anywhere;
    }
    /* Label (name + tooltip + badge) above its input, both full-width -
       side by side here squeezes the input down to whatever's left over
       after the label wraps its own badge onto a second line. (Back from
       the desktop grid/display: contents layout to stacked flex rows.) */
    .test-popup-scores {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }
    .test-popup-scores .inline-input__outer {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0.35rem;
    }
    .test-popup-scores input[type="number"] {
        width: 100%;
    }
    .test-popup {
        top: 3%;
        width: 94vw;
        max-height: 94vh;
        padding: 1.25rem 1rem;
    }
    /* Stacked, not side by side: the nowrap "last taken N days ago" text
       otherwise crushes the test name down to a few characters + ellipsis. */
    .transfer-due__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.15rem;
    }
    .transfer-due__name {
        white-space: normal;
    }
    /* The log form goes one full-width row per field: finger-sized targets,
       and >= 16px input text stops iOS zooming the whole page on focus. */
    .test-card__log .inline-input__outer {
        width: 100%;
    }
    .test-card__log .inline-input__inner {
        flex: 1 1 auto;
        min-width: 0;
    }
    .test-card__log .inline-input__inner > input,
    .test-card__log .inline-input__inner > select {
        width: 100%;
        margin: 0;
        font-size: 16px; /* iOS auto-zoom threshold, not a type-scale step */
        padding: 0.4rem 0.25rem;
    }
    .test-card__log button[type="submit"] {
        width: 100%;
        padding: 0.6rem;
    }
    .test-card__history-delete {
        padding: 0.4rem 0.6rem; /* finger-sized */
    }
    /* The desktop badge-room reservation stacks up: single-column here, so
       20+ untested catalog entries at 6rem each read as a wall of hollow
       slabs and double the scroll for nothing. The empty badge row goes
       too - it only exists to align names across a desktop row's cards,
       and a single column has no row neighbors to align with. */
    .test-card {
        min-height: 4rem;
    }
    .test-card__badges:empty {
        display: none;
    }
}

/* Stats page (stats.html) - the shared graph components rendered inline
   instead of inside the 60vh graph popup, so each section stays compact */
.stats-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

.stats-filter__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Headline numbers above the charts - same panel chrome as the sections. */
.stats-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0.75rem;
    width: 100%;
    margin-bottom: 1.5rem;
}

.stats-tile {
    background-color: var(--background-color);
    border: 1px solid #333;
    box-shadow: 0 1px 10px 5px #0004;
    padding: 0.75rem 1rem;
}

.stats-tile__label {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: var(--step--2);
    color: var(--preamble-color);
    margin-bottom: 0.35rem;
}

.stats-tile__value {
    font-family: "JetBrains Mono", monospace;
    font-weight: bold;
    font-size: var(--step-1);
    line-height: 1.1;
}

input[type="date"] {
    color-scheme: dark; /* native calendar icon stays visible on the dark theme */
}

.light-mode input[type="date"] {
    color-scheme: light;
}

.stats-section {
    /* .menu is an align-items: flex-start flex column - without an explicit
       width each section (and its chart) shrinks to content width */
    width: 100%;
    margin-bottom: 2rem;
    /* Same panel chrome as the browse cards: without a backdrop the axis
       labels and legends sit straight on the background photo and get lost
       in its texture. */
    background-color: var(--background-color);
    border: 1px solid #333;
    box-shadow: 0 1px 10px 5px #0004;
    padding: 1rem 1.25rem 1.25rem;
}

@media (width <= 500px) {
    .stats-section {
        padding: 0.75rem 0.5rem;
    }
}

.stats-section .graph-popup-content {
    height: 22rem;
}

.stats-chart-wrap {
    position: relative;
    height: 22rem;
}