/* exercise.css — the ONE design system for exercise pages (cloze, translate,
   and whatever joins the meal). Born 2026-07-13 (Adam: "consistent styling for
   Dictation, Cloze, and Translation, in case we want to eventually combine
   them in a session — mixed foods into a meal"). Tokens follow the MAIN APP
   (styles.css: true black, #66b3ff accent, #4caf7d green), not the blog, so a
   future unified session reads as one product. Page-specific rules stay in
   the page; anything two exercises share lives here. */

:root {
    --ex-bg:      #000;
    --ex-surface: #111;
    --ex-border:  #2a2a2a;
    --ex-text:    #ddd;
    --ex-muted:   #888;
    --ex-accent:  #66b3ff;
    --ex-green:   #4caf7d;
    --ex-red:     #e05252;
    --ex-amber:   #e0b252;
}

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

body {
    background: var(--ex-bg);
    color: var(--ex-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
    line-height: 1.6;
    min-height: 100vh;
}

/* ── header ── */
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid var(--ex-border);
}
.logo { font-size: 16px; font-weight: 600; }
.logo span { color: var(--ex-accent); }
.beta {
    font-size: 11px; color: var(--ex-bg); background: var(--ex-green);
    border-radius: 4px; padding: 1px 7px; font-weight: 700;
    margin-left: 8px; vertical-align: 2px;
}
.beta.amber { background: var(--ex-amber); }
header select {
    background: var(--ex-surface); color: var(--ex-text);
    border: 1px solid var(--ex-border); border-radius: 6px;
    padding: 6px 10px; font-size: 14px;
}
header label {
    font-size: 12px; color: var(--ex-muted);
    display: flex; align-items: center; gap: 6px; cursor: pointer;
}

/* ── layout ── */
main { max-width: 620px; margin: 0 auto; padding: 36px 18px 80px; }
.progress {
    font-size: 13px; color: var(--ex-muted); margin-bottom: 22px;
    display: flex; justify-content: space-between;
}
.card {
    background: var(--ex-surface);
    border: 1px solid var(--ex-border);
    border-radius: 12px;
    padding: 28px 26px;
}

/* ── exercise content ── */
.sentence { font-size: 22px; line-height: 1.75; }
.sentence input {
    background: var(--ex-bg); border: none;
    border-bottom: 2px solid var(--ex-accent);
    color: var(--ex-text); font: inherit; text-align: center;
    padding: 0 6px; border-radius: 4px 4px 0 0; outline: none;
}
.sentence input.correct { border-bottom-color: var(--ex-green); color: var(--ex-green); }
.sentence input.wrong   { border-bottom-color: var(--ex-red);   color: var(--ex-red); }

.source { font-size: 21px; line-height: 1.6; margin-bottom: 20px; }
.hint { font-size: 13.5px; color: var(--ex-amber); margin: -10px 0 14px; }

textarea {
    width: 100%; min-height: 84px;
    background: var(--ex-bg); color: var(--ex-text);
    border: 1px solid var(--ex-border); border-radius: 8px;
    padding: 12px 14px; font: inherit; font-size: 17px;
    resize: vertical; outline: none;
}
textarea:focus { border-color: var(--ex-accent); }

/* ── controls ── */
.controls { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; align-items: center; }
button {
    background: var(--ex-surface); color: var(--ex-text);
    border: 1px solid var(--ex-border); border-radius: 8px;
    padding: 10px 18px; font-size: 15px; cursor: pointer;
}
button:hover { border-color: var(--ex-muted); }
button.primary { background: var(--ex-accent); border-color: var(--ex-accent); color: #000; font-weight: 600; }
button.primary:hover { filter: brightness(1.1); }
button.primary:disabled { opacity: 0.5; cursor: wait; }
button:focus-visible { outline: 2px solid var(--ex-accent); outline-offset: 2px; }
@keyframes thinking { 0%,100% { opacity: 0.45; } 50% { opacity: 1; } }
button.grading { animation: thinking 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { button.grading { animation: none; } }

/* ── feedback ── */
.verdict { font-size: 15px; margin-top: 18px; }
.verdict.ok { color: var(--ex-green); }
.verdict.no { color: var(--ex-red); }
.result { margin-top: 20px; display: none; }
.result.shown { display: block; }
.score { font-size: 26px; font-weight: 700; }
.score.ok  { color: var(--ex-green); }
.score.mid { color: var(--ex-amber); }
.score.no  { color: var(--ex-red); }
.gloss { margin-top: 14px; font-size: 15px; color: var(--ex-muted); font-style: italic; display: none; }
.gloss.shown { display: block; }
.better { margin-top: 12px; font-size: 16px; }
.better b { color: var(--ex-green); font-weight: 600; }
.reference { margin-top: 10px; font-size: 15px; color: #bbb; font-style: italic; }
.error-note { margin-top: 14px; font-size: 14px; color: var(--ex-amber); display: none; }

/* ── summary / states ── */
.summary h2 { font-size: 24px; margin-bottom: 10px; }
.summary p { color: var(--ex-muted); margin-bottom: 8px; }
.hidden { display: none !important; }
.loading { color: var(--ex-muted); text-align: center; padding: 60px 0; }

footer { text-align: center; font-size: 12px; color: var(--ex-muted); padding: 18px; }
footer a { color: var(--ex-muted); }

a { color: var(--ex-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── exercise tabs (the Unified path's shared navigation) ── */
.ex-tabs {
    display: flex; gap: 4px; max-width: 620px; margin: 0 auto;
    padding: 14px 18px 0;
}
.ex-tabs a {
    color: var(--ex-muted); font-size: 14px; text-decoration: none;
    padding: 7px 14px; border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
}
.ex-tabs a:hover { color: var(--ex-text); text-decoration: none; }
.ex-tabs a.active {
    color: var(--ex-text);
    border-color: var(--ex-border);
    border-bottom-color: var(--ex-bg);
    background: var(--ex-surface);
}

/* ── semantic element diff (translation) ── */
.elements { margin-top: 10px; font-size: 14px; }
.elements .missing { color: var(--ex-amber); }
.elements .added { color: var(--ex-red); }