* {
    box-sizing: border-box;
}

:root {
    --bg: #f7f7f5;
    --card: #fff;
    --ink: #111;
    --muted: #646464;
    --line: #d9d9d4;
    --soft-line: #ececea;
    --panel-bg: #fafaf8;

    /* functional colours (shared with the canvas drawing) */
    --blue: #2468a6;
    --amber: #e69d28;
    --red: #d64f62;
    --green-ok: #2f7d55;

    /* canvas-only surfaces */
    --canvas-sky: #ffffff;
    --canvas-ground: #edece7;
    --canvas-ground-line: #c3c1ba;
    --canvas-court: #dfe9e0;
    --canvas-net: #5b6b7c;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    background: var(--bg);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

h1, h2, h3, p {
    margin: 0;
}

/* ---------- header ---------- */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
    padding: 24px 0 18px;
}

.top-bar h1 {
    font-size: 30px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 14px;
}

.home-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid #d8d2c0;
    border-radius: 50%;
    background: #faf8f1;
    color: #2f5d4f;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(28, 43, 37, 0.05), 0 12px 32px -16px rgba(28, 43, 37, 0.28);
    transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.home-button svg {
    display: block;
}

.home-button.language-switch {
    width: auto;
    min-width: 76px;
    padding: 0 15px;
    border-radius: 999px;
}

.home-button:hover,
.home-button:focus-visible {
    border-color: #8a9a5b;
    color: #3f7060;
    transform: translateY(-2px);
    outline: none;
}

.readout {
    display: grid;
    gap: 4px;
    min-width: 150px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-bg);
    text-align: right;
}

.result-shortcut {
    color: inherit;
    font: inherit;
    cursor: pointer;
}

.result-shortcut:hover,
.result-shortcut:focus-visible {
    border-color: #9aa999;
    outline: none;
}

.readout span {
    color: var(--muted);
    font-size: 12px;
}

.readout strong {
    font-size: 17px;
    font-variant-numeric: tabular-nums;
}

#verdictReadout[data-verdict="in"]  { color: var(--green-ok); }
#verdictReadout[data-verdict="net"] { color: var(--red); }
#verdictReadout[data-verdict="out"] { color: var(--blue); }

/* ---------- layout ----------
   Row 1: the task, full width.
   Row 2: animation + speed strip on the left, the coach on the right. Both
   columns are exactly --work-h tall, so the coach box is fixed and scrolls
   inside rather than stretching the page. */
.layout {
    --work-h: 392px;
    --gap: 22px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: var(--gap);
    width: min(1280px, calc(100% - 48px));
    margin: 0 auto;
    padding: 0 0 40px;
}

.stage-col {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: var(--gap);
    height: var(--work-h);
}

.panel {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
}

h2 {
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

/* ---------- task ---------- */
.task-panel {
    grid-column: 1 / -1;
    padding: 18px 20px 20px;
}

.task-panel h2 {
    margin-bottom: 8px;
}

.task-panel p {
    max-width: 96ch;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.7;
}

.task-panel .katex,
.msg .katex,
.formula-box .katex {
    color: inherit;
    font-size: 1.05em;
}

.task-panel .katex {
    color: var(--ink);
}

/* ---------- speed strip ---------- */
.speed-panel { padding: 16px 20px; }

.strip {
    display: flex;
    align-items: center;
    gap: 18px;
}

.strip-title {
    flex: none;
}

.speed-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex: none;
    min-width: 92px;
}

.speed-value output {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.speed-value .unit {
    color: var(--muted);
    font-size: 14px;
}

.slider-wrap {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.tick {
    flex: none;
    color: var(--muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

input[type="range"] {
    width: 100%;
    margin: 0;
    accent-color: var(--ink);
}

input[type="range"]:disabled { opacity: 0.55; }

input[type="range"][data-verdict="in"]  { accent-color: var(--green-ok); }
input[type="range"][data-verdict="net"] { accent-color: var(--red); }
input[type="range"][data-verdict="out"] { accent-color: var(--blue); }

.ghost-button,
.primary-button {
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.primary-button {
    flex: none;
    min-width: 116px;
    min-height: 40px;
    padding: 0 16px;
    border: 1px solid var(--ink);
    border-radius: 6px;
    color: #fff;
    background: var(--ink);
    transition: opacity 0.15s ease;
}

.primary-button:hover { opacity: 0.85; }

.ghost-button {
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    background: #fff;
    transition: background 0.15s ease;
}

.ghost-button:hover { background: var(--soft-line); }

.primary-button:disabled,
.ghost-button:disabled {
    opacity: 0.45;
    cursor: default;
}

/* ---------- coach ----------
   Fixed box, exactly as tall as the animation plus the speed strip. The log is
   the only part that grows, and it scrolls. */
.coach-panel {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: var(--work-h);
    padding: 18px 20px;
}

.coach-log {
    display: grid;
    align-content: start;
    gap: 10px;
    flex: 1;
    min-height: 0;
    padding-right: 4px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.msg {
    font-size: 14px;
    line-height: 1.6;
}

.coach-math {
    display: block;
    margin: 8px 0 4px;
    overflow-x: auto;
    color: var(--ink);
    line-height: 1.35;
}

.coach-math-inline {
    display: inline-block;
    margin: 0 0.08em;
    color: var(--ink);
    white-space: nowrap;
    vertical-align: -0.08em;
}

.coach-math .katex-display {
    margin: 0.15em 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0.1em 0;
}

.msg-coach { color: var(--muted); }

.msg-mine {
    justify-self: end;
    max-width: 85%;
    padding: 6px 10px;
    border-radius: 10px 10px 2px 10px;
    color: var(--card);
    background: var(--ink);
    font-weight: 600;
}

.coach-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(56px, 1fr));
    gap: 8px;
    flex: none;
}

.coach-options:empty { display: none; }

.option {
    min-height: 36px;
    min-width: 0;
    padding: 6px 8px;
    text-align: center;
    font-size: 13px;
    line-height: 1.25;
    white-space: normal;
}

.multi-option[data-selected="true"] {
    border-color: var(--ink);
    color: var(--card);
    background: var(--ink);
}

.coach-celebration {
    flex: none;
    padding: 8px 10px;
    border: 1px solid var(--green-ok);
    border-radius: 8px;
    color: var(--green-ok);
    background: var(--panel-bg);
    font-weight: 700;
    text-align: center;
    animation: coach-celebrate 0.55s ease-out both;
}

.coach-celebration[hidden] { display: none; }

.coach-ai {
    display: grid;
    gap: 5px;
    flex: none;
    padding-top: 8px;
    border-top: 1px solid var(--soft-line);
}

.coach-ai textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    background: var(--card);
    font: inherit;
    outline: none;
}

.coach-ai textarea {
    height: 36px;
    min-height: 36px;
    max-height: 96px;
    padding: 8px 9px;
    resize: none;
    overflow-x: hidden;
    overflow-y: hidden;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    font-size: 12px;
    line-height: 1.4;
}

.coach-ai textarea:focus {
    border-color: var(--green-ok);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--green-ok) 18%, transparent);
}

.coach-ai-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 52px;
    align-items: end;
    gap: 7px;
}

.coach-ai-composer button {
    height: 36px;
    border: 1px solid var(--ink);
    border-radius: 6px;
    color: var(--card);
    background: var(--ink);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.coach-ai-composer button:hover { opacity: 0.84; }

.coach-ai-composer button:disabled,
.coach-ai textarea:disabled {
    opacity: 0.5;
    cursor: wait;
}

.coach-ai-status {
    min-height: 13px;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.3;
}

.coach-ai-status:empty { display: none; }

.msg-ai {
    padding-left: 9px;
    border-left: 2px solid var(--green-ok);
    white-space: pre-wrap;
}

.msg-ai::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    color: var(--green-ok);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.msg-ai-question { max-width: 92%; }

@keyframes coach-celebrate {
    0% { opacity: 0; transform: scale(0.92) translateY(4px); }
    70% { opacity: 1; transform: scale(1.03) translateY(0); }
    100% { opacity: 1; transform: scale(1); }
}

/* ---------- stage ----------
   The canvas is the box: same border and radius as .panel, stretched by the
   grid row to exactly the height of the Speed panel next to it. The element is
   absolutely positioned so measuring the cell can never feed back into its
   own size; scene.js reads the cell and centres the court inside it. */
.stage {
    position: relative;
    min-height: 200px;
}

.stage canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--canvas-sky);
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
    .top-bar,
    .layout { width: calc(100% - 36px); }

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

    .task-panel { grid-column: auto; }

    .stage-col { height: 300px; }

    .coach-panel { height: 430px; }

    .strip {
        flex-wrap: wrap;
        gap: 12px 16px;
    }

    .slider-wrap { order: 3; flex-basis: 100%; }
}

/* ---------- styles for the panels that are not mounted yet ----------
   ui/derivation.js (Working) and ui/feedback.js (Coaching) are kept in the
   repo; these rules are what they need if they are added back to index.html. */
.formula-box {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--panel-bg);
}

.formula-box p {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    color: var(--muted);
    font-size: 14px;
}

.formula-box strong {
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.formula-box p.is-ok  strong { color: var(--green-ok); }
.formula-box p.is-bad strong { color: var(--red); }

.hint-title { margin-bottom: 6px; font-size: 16px; font-weight: 700; }
.hint-body { color: var(--muted); font-size: 14px; line-height: 1.65; }
.hint-scaffold {
    margin-top: 12px;
    padding: 10px 12px;
    border-left: 3px solid var(--amber);
    border-radius: 4px;
    background: var(--panel-bg);
    font-size: 14px;
}
.progress { color: var(--muted); font-size: 13px; text-align: right; }

/* ---------- dark mode · follows system colour scheme ---------- */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #14161a;
        --card: #1d2024;
        --ink: #e7e8ea;
        --muted: #9aa0a8;
        --line: #363a41;
        --soft-line: #2a2e34;
        --panel-bg: #212429;

        --blue: #5aa0dd;
        --green-ok: #58b184;
        --red: #e2707f;

        --canvas-sky: #1d2024;
        --canvas-ground: #23262b;
        --canvas-ground-line: #464b52;
        --canvas-court: #26332c;
        --canvas-net: #7f8fa0;
    }

    .home-button {
        border-color: #363a41;
        background: #1d2024;
        color: #8fb8a8;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 32px -16px rgba(0, 0, 0, 0.7);
    }

    .home-button:hover,
    .home-button:focus-visible {
        border-color: #a3b06e;
        color: #a6c8ba;
    }

    .primary-button { color: var(--bg); }
    .ghost-button { background: var(--card); }
    .ghost-button:hover { background: var(--soft-line); }
    .coach-ai-composer button { color: var(--bg); }
}