/*
 * Graphia
 *
 * The canvas palette lives here too, under the --c-* names that renderer.js
 * reads at draw time, so the graph and the interface can never disagree about
 * what "dark mode" means.
 *
 * The dark values appear twice on purpose: once for an explicit user choice via
 * [data-theme], once for the system preference. CSS has no way to share a
 * declaration block between a media query and an attribute selector.
 */

:root {
    color-scheme: light;

    /* Interface */
    --bg: #f5f6f8;
    --panel: #ffffff;
    --panel-alt: #fafbfc;
    --border: #e2e5ea;
    --border-strong: #cfd4dc;
    --text: #1a1d23;
    --text-dim: #626873;
    --text-faint: #8b919c;
    --accent: #2563eb;
    --accent-soft: #e8effe;
    --danger: #dc2626;
    --shadow: 0 1px 2px rgb(16 24 40 / 6%), 0 8px 24px -8px rgb(16 24 40 / 12%);
    --radius: 10px;

    /* Canvas — read by renderer.js */
    --c-surface: #ffffff;
    --c-grid-minor: #f0f1f4;
    --c-grid-major: #dfe2e8;
    --c-axis: #9aa1ad;
    --c-axis-label: #6b7280;
    --c-axis-label-halo: rgb(255 255 255 / 88%);
    --c-riemann-positive: rgb(37 99 235 / 16%);
    --c-riemann-negative: rgb(220 38 38 / 16%);
    --c-riemann-edge: rgb(37 99 235 / 45%);
    --c-tangent: #e11d48;
    --c-secant: #7c3aed;
    --c-derivative-curve: #d97706;
    --c-overlay-line: #94a3b8;
    --c-point-halo: #ffffff;
    --c-tag-bg: rgb(255 255 255 / 94%);
    --c-tag-border: #d8dce3;
    --c-tag-text: #1a1d23;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        color-scheme: dark;

        --bg: #0e1116;
        --panel: #161a21;
        --panel-alt: #1b2028;
        --border: #262c36;
        --border-strong: #333b47;
        --text: #e8eaee;
        --text-dim: #9aa2ae;
        --text-faint: #6f7885;
        --accent: #60a5fa;
        --accent-soft: #1a2740;
        --danger: #f87171;
        --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -8px rgb(0 0 0 / 60%);

        --c-surface: #12161c;
        --c-grid-minor: #1c222b;
        --c-grid-major: #2b333f;
        --c-axis: #5d6775;
        --c-axis-label: #97a1af;
        --c-axis-label-halo: rgb(18 22 28 / 88%);
        --c-riemann-positive: rgb(96 165 250 / 20%);
        --c-riemann-negative: rgb(248 113 113 / 20%);
        --c-riemann-edge: rgb(96 165 250 / 50%);
        --c-tangent: #fb7185;
        --c-secant: #a78bfa;
        --c-derivative-curve: #fbbf24;
        --c-overlay-line: #64748b;
        --c-point-halo: #12161c;
        --c-tag-bg: rgb(22 26 33 / 94%);
        --c-tag-border: #333b47;
        --c-tag-text: #e8eaee;
    }
}

:root[data-theme='dark'] {
    color-scheme: dark;

    --bg: #0e1116;
    --panel: #161a21;
    --panel-alt: #1b2028;
    --border: #262c36;
    --border-strong: #333b47;
    --text: #e8eaee;
    --text-dim: #9aa2ae;
    --text-faint: #6f7885;
    --accent: #60a5fa;
    --accent-soft: #1a2740;
    --danger: #f87171;
    --shadow: 0 1px 2px rgb(0 0 0 / 40%), 0 8px 24px -8px rgb(0 0 0 / 60%);

    --c-surface: #12161c;
    --c-grid-minor: #1c222b;
    --c-grid-major: #2b333f;
    --c-axis: #5d6775;
    --c-axis-label: #97a1af;
    --c-axis-label-halo: rgb(18 22 28 / 88%);
    --c-riemann-positive: rgb(96 165 250 / 20%);
    --c-riemann-negative: rgb(248 113 113 / 20%);
    --c-riemann-edge: rgb(96 165 250 / 50%);
    --c-tangent: #fb7185;
    --c-secant: #a78bfa;
    --c-derivative-curve: #fbbf24;
    --c-overlay-line: #64748b;
    --c-point-halo: #12161c;
    --c-tag-bg: rgb(22 26 33 / 94%);
    --c-tag-border: #333b47;
    --c-tag-text: #e8eaee;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background: var(--bg);
    color: var(--text);
    font: 14px/1.45 ui-sans-serif, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

.mono,
code,
kbd,
.stat-value {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

.sprite {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

svg use,
svg symbol {
    fill: none;
    stroke: currentcolor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------------------------------------------------------------- app shell */

.app {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100dvh;
}

.topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    position: relative;
    z-index: 5;
}

.brand {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}

.brand-mark {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.brand-mark ellipse {
    vector-effect: non-scaling-stroke;
}

.brand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.brand-name {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: linear-gradient(100deg, #3b82f6, #a855f7);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.brand-tagline {
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.modes {
    display: flex;
    gap: 2px;
    margin-inline: auto;
    background: var(--panel-alt);
    border: 1px solid var(--border);
    border-radius: 9px;
    padding: 3px;
}

.modes button {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: transparent;
    color: var(--text-dim);
    font: inherit;
    font-weight: 500;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.modes button:hover {
    color: var(--text);
}

.modes button[aria-selected='true'] {
    background: var(--panel);
    color: var(--accent);
    box-shadow: var(--shadow);
}

.mode-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.topbar-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.icon-button {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.icon-button svg {
    width: 19px;
    height: 19px;
}

.icon-button:hover {
    background: var(--panel-alt);
    color: var(--text);
}

.icon-button:active {
    transform: translateY(0.5px);
}

.icon-button.small {
    width: 26px;
    height: 26px;
}

.icon-button.small svg {
    width: 15px;
    height: 15px;
}

.icon-button.danger:hover {
    color: var(--danger);
}

:where(button, input, select, a):focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Only one of the two theme glyphs is ever shown. */
.theme-icon-dark {
    display: none;
}

:root[data-theme='dark'] .theme-icon-dark {
    display: block;
}

:root[data-theme='dark'] .theme-icon-light {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .theme-icon-dark {
        display: block;
    }

    :root:not([data-theme='light']) .theme-icon-light {
        display: none;
    }
}

.sidebar-toggle {
    display: none;
}

/* ----------------------------------------------------------------- workspace */

.workspace {
    display: grid;
    grid-template-columns: 322px 1fr;
    min-height: 0;
}

.sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    background: var(--bg);
    border-right: 1px solid var(--border);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* A display:none sidebar leaves the grid entirely, so the stage becomes the
   first item. The column count has to drop to one to match, otherwise the stage
   inherits the collapsed sidebar column and ends up zero pixels wide. */
.workspace.sidebar-hidden {
    grid-template-columns: 1fr;
}

.workspace.sidebar-hidden .sidebar {
    display: none;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
}

.panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.panel-head h2 {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.panel-note {
    margin: 10px 0 0;
    font-size: 11.5px;
    color: var(--text-faint);
    line-height: 1.5;
}

.panel-note code {
    background: var(--panel-alt);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0 4px;
    font-size: 11px;
}

.link-button {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 11.5px;
    color: var(--accent);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ------------------------------------------------------------ function list */

.curve-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.curve-row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: start;
    gap: 6px;
}

.color-chip {
    width: 20px;
    height: 20px;
    margin-top: 7px;
    border: 2px solid var(--panel);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--border-strong);
    cursor: pointer;
    padding: 0;
    transition: transform 0.12s;
}

.color-chip:hover {
    transform: scale(1.12);
}

.curve-row.is-hidden .color-chip {
    background: var(--panel-alt) !important;
    box-shadow: 0 0 0 1px var(--border-strong) inset;
}

.curve-input {
    min-width: 0;
}

.expr-input {
    width: 100%;
    padding: 7px 9px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13.5px;
    color: var(--text);
    background: var(--panel-alt);
    border: 1px solid var(--border);
    border-radius: 7px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.expr-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.curve-row.has-error .expr-input {
    border-color: var(--danger);
}

.curve-error {
    margin: 4px 0 0;
    font-size: 11.5px;
    color: var(--danger);
    line-height: 1.4;
}

.curve-error:empty {
    display: none;
}

.curve-row.is-hidden .expr-input {
    color: var(--text-faint);
    text-decoration: line-through;
    text-decoration-color: var(--border-strong);
}

.toggle-visible,
.remove-curve {
    margin-top: 4px;
}

/* ---------------------------------------------------------------- form bits */

.field {
    display: block;
    margin-bottom: 12px;
}

.field-label {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-dim);
    margin-bottom: 5px;
}

.field-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--text);
    background: var(--panel-alt);
    border: 1px solid var(--border);
    border-radius: 5px;
    padding: 1px 6px;
}

.field-hint {
    margin: 5px 0 0;
    font-size: 11px;
    color: var(--text-faint);
}

.slider-row,
.interval-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.slider-row input[type='range'] {
    flex: 1;
    min-width: 0;
}

.interval-row .to {
    font-size: 11.5px;
    color: var(--text-faint);
}

input[type='number'],
select {
    font: inherit;
    font-size: 13px;
    color: var(--text);
    background: var(--panel-alt);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 6px 8px;
    width: 100%;
    min-width: 0;
}

input[type='number'] {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    max-width: 84px;
    text-align: right;
}

select {
    cursor: pointer;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentcolor 50%),
        linear-gradient(135deg, currentcolor 50%, transparent 50%);
    background-position: calc(100% - 15px) 52%, calc(100% - 10px) 52%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 26px;
}

input[type='range'] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 18px;
    background: transparent;
    cursor: pointer;
}

input[type='range']::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 2px;
    background: var(--border-strong);
}

input[type='range']::-moz-range-track {
    height: 4px;
    border-radius: 2px;
    background: var(--border-strong);
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    margin-top: -5.5px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--panel);
    box-shadow: 0 1px 3px rgb(0 0 0 / 25%);
}

input[type='range']::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--panel);
}

.switch {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-dim);
    cursor: pointer;
    padding: 3px 0;
}

.switch input {
    accent-color: var(--accent);
    width: 15px;
    height: 15px;
    cursor: pointer;
    flex-shrink: 0;
}

.subsection {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--border);
}

/* ------------------------------------------------------------ math displays */

.frac {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
    font-size: 12px;
    line-height: 1.05;
    vertical-align: middle;
}

.frac > span:first-child {
    border-bottom: 1px solid currentcolor;
    padding: 0 2px 1px;
}

.frac > span:last-child {
    padding: 1px 2px 0;
}

.frac.wide {
    font-size: 11.5px;
}

.integral-sign,
.integral-big {
    font-family: 'Times New Roman', Times, serif;
    font-size: 19px;
    line-height: 0.8;
}

.integral-big {
    font-size: 30px;
}

.equation-display {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 9px 11px;
    margin-bottom: 12px;
    background: var(--panel-alt);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 13px;
    overflow-x: auto;
}

.equation-body,
.equation-result {
    white-space: nowrap;
}

.equation-result {
    color: var(--accent);
    font-weight: 600;
}

.equals {
    color: var(--text-faint);
}

.limits {
    display: inline-flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 10px;
    line-height: 1.1;
    height: 26px;
    color: var(--text-dim);
}

.formula-line {
    display: flex;
    align-items: center;
    gap: 5px;
    margin: 0 0 10px;
    font-size: 12.5px;
    color: var(--text-dim);
    font-family: 'Times New Roman', Times, serif;
    font-style: italic;
}

.formula-line sub {
    font-size: 9px;
}

.stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin: 0 0 10px;
}

.stats > div {
    background: var(--panel-alt);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 6px 8px;
    min-width: 0;
}

/* Deliberately not uppercased: these labels are mathematical notation, and
   "F(A)" is not the same thing as "f(a)". */
.stats dt {
    font-size: 10.5px;
    letter-spacing: 0.04em;
    color: var(--text-faint);
    margin-bottom: 2px;
}

.stats dd {
    margin: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The tangent equation is the one readout too long for a half-width box. */
.stats > div:has(#stat-tangent) {
    grid-column: span 2;
}

/* Small line samples that tie a panel label to what it draws on the canvas. */
.swatch-line {
    display: inline-block;
    width: 15px;
    height: 0;
    margin-right: 5px;
    vertical-align: 3px;
    border-top-width: 2px;
    border-top-style: dashed;
}

.swatch-line.tangent {
    border-top-style: solid;
    border-top-color: var(--c-tangent);
}

.swatch-line.derivative {
    border-top-color: var(--c-derivative-curve);
}

.swatch-line.secant {
    border-top-color: var(--c-secant);
}

.mini-table {
    width: 100%;
    border-collapse: collapse;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
}

.mini-table th {
    text-align: right;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-faint);
    padding: 3px 5px;
    border-bottom: 1px solid var(--border);
}

.mini-table td {
    text-align: right;
    padding: 2.5px 5px;
    color: var(--text-dim);
    border-bottom: 1px solid var(--border);
}

.mini-table tr:last-child td {
    border-bottom: 0;
}

.mini-table tr.is-current td {
    color: var(--accent);
    font-weight: 600;
}

.sidebar-foot {
    margin-top: auto;
    padding: 4px 2px;
}

/* --------------------------------------------------------------------- stage */

.stage {
    position: relative;
    min-width: 0;
    background: var(--c-surface);
}

#graph {
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: crosshair;
}

#graph.is-panning {
    cursor: grabbing;
}

#graph.is-grabbing {
    cursor: ew-resize;
}

#graph.is-draggable {
    cursor: grab;
}

.stage-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.control-group {
    display: flex;
    flex-direction: column;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 9px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.control-group .icon-button {
    border-radius: 0;
    width: 34px;
    height: 32px;
}

.control-group .icon-button + .icon-button {
    border-top: 1px solid var(--border);
}

.stage-status {
    position: absolute;
    left: 12px;
    bottom: 10px;
    display: flex;
    align-items: flex-end;
    gap: 10px;
    pointer-events: none;
}

.readout {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    color: var(--text-dim);
    background: color-mix(in srgb, var(--panel) 88%, transparent);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 4px 8px;
    backdrop-filter: blur(6px);
}

.readout:empty {
    display: none;
}

.readout .swatch {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.readout .dim {
    color: var(--text-faint);
}

.perf {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 10.5px;
    color: var(--text-faint);
    opacity: 0.75;
    padding-bottom: 4px;
}

.stage-hint {
    position: absolute;
    left: 50%;
    bottom: 14px;
    transform: translateX(-50%);
    margin: 0;
    font-size: 12px;
    color: var(--text-dim);
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 14px;
    box-shadow: var(--shadow);
    pointer-events: none;
    max-width: min(90%, 460px);
    text-align: center;
}

/* --------------------------------------------------------------------- help */

.help-dialog {
    max-width: 620px;
    width: calc(100% - 32px);
    max-height: 84dvh;
    padding: 24px 26px 26px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--panel);
    color: var(--text);
    box-shadow: 0 24px 64px -12px rgb(0 0 0 / 40%);
    overflow-y: auto;
}

.help-dialog::backdrop {
    background: rgb(9 12 17 / 55%);
    backdrop-filter: blur(2px);
}

.help-close {
    float: right;
    margin: -6px -6px 0 0;
}

.help-dialog h2 {
    margin: 0 0 4px;
    font-size: 20px;
    letter-spacing: 0.02em;
}

.help-dialog h3 {
    margin: 22px 0 8px;
    font-size: 11px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--text-faint);
}

.help-lede {
    margin: 0;
    color: var(--text-dim);
    font-size: 13.5px;
    max-width: 46ch;
}

.help-dialog p {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.6;
}

.help-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.help-table td {
    padding: 4px 8px 4px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-dim);
    vertical-align: top;
}

.help-table td:first-child {
    white-space: nowrap;
    width: 45%;
    color: var(--text);
}

.help-table code,
.help-dialog code {
    background: var(--panel-alt);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 0 4px;
    font-size: 11.5px;
}

kbd {
    display: inline-block;
    min-width: 17px;
    text-align: center;
    background: var(--panel-alt);
    border: 1px solid var(--border-strong);
    border-bottom-width: 2px;
    border-radius: 5px;
    padding: 0 4px;
    font-size: 11px;
    color: var(--text);
}

.help-foot {
    margin-bottom: 0;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 12px;
    color: var(--text-faint);
}

/* -------------------------------------------------------------------- toast */

.toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translate(-50%, 8px);
    background: var(--text);
    color: var(--panel);
    font-size: 12.5px;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 999px;
    box-shadow: var(--shadow);
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    z-index: 20;
}

.toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* --------------------------------------------------------------- responsive */

@media (max-width: 900px) {
    .brand-tagline {
        display: none;
    }

    .modes button {
        padding: 6px 10px;
    }
}

@media (max-width: 760px) {
    .topbar {
        gap: 8px;
        padding: 7px 10px;
    }

    .sidebar-toggle {
        display: inline-grid;
    }

    .brand-text {
        display: none;
    }

    .modes {
        margin-inline: 0;
        flex: 1;
        justify-content: center;
    }

    /* Icon-only tabs: at this width the labels crowd the action buttons off the
       end of the bar. Each tab keeps its notation glyph, which is the part that
       identifies it anyway. */
    .mode-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    .modes button {
        padding: 6px 13px;
    }

    .topbar-actions .icon-button {
        width: 30px;
    }

    .workspace {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, auto) minmax(220px, 1fr);
    }

    .sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--border);
        max-height: 46dvh;
        padding: 10px;
    }

    .workspace.sidebar-hidden {
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
    }

    .stats {
        grid-template-columns: 1fr 1fr;
    }

    .stage-status {
        left: 8px;
        bottom: 8px;
    }

    .perf {
        display: none;
    }
}

/* Phone-width: drop the brand mark so the tabs and actions both fit. */
@media (max-width: 420px) {
    .topbar {
        gap: 6px;
        padding: 7px 8px;
    }

    .brand {
        display: none;
    }

    .topbar-actions {
        gap: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
    }
}