/* Spelling — one stylesheet, no framework.
   Used mostly on a desktop, also on iPhone and iPad, so sizes scale with the
   screen (clamp) rather than being fixed for one of them.
   Dark, high contrast, big type. The practice screen is the one that matters:
   a large input, a large word when it's revealed, and nothing else competing
   for his attention while he's on it. */

:root {
  --bg: #0b1d2a;
  --card: #122a3a;
  --card-2: #183648;
  --line: #24475d;
  --text: #e8f4fb;
  --muted: #95b4c6;
  --accent: #14b8a6;
  --accent-2: #0d9488;
  --good: #22c55e;
  --bad: #f87171;
  --warn: #fbbf24;
  --radius: 14px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-font-smoothing: antialiased;
}

.hidden { display: none !important; }
.muted { color: var(--muted); }
.tiny { font-size: 12px; }
.center { text-align: center; }

/* ---- login ---- */

.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: 100%; max-width: 340px; text-align: center; }
.login-card .logo {
  width: 64px; height: 64px; margin: 0 auto 16px;
  display: grid; place-items: center;
  background: linear-gradient(160deg, var(--accent), var(--accent-2));
  border-radius: 18px; font-size: 28px; font-weight: 800; color: #fff;
}
.login-card h1 { margin: 0 0 4px; font-size: 26px; }
.login-card form { margin-top: 20px; display: grid; gap: 10px; }
.error { color: var(--bad); font-size: 14px; min-height: 20px; }

/* ---- inputs ---- */

input, textarea, select {
  width: 100%; padding: 13px 14px;
  background: var(--card); color: var(--text);
  border: 1px solid var(--line); border-radius: 11px;
  font-size: 16px; /* 16px stops iOS zooming the page on focus */
  font-family: inherit;
}
input[type="checkbox"] { width: 26px; height: 26px; flex: 0 0 auto; accent-color: var(--accent); margin: 0; }
input[type="range"] { padding: 0; background: none; border: 0; accent-color: var(--accent); }
textarea { resize: vertical; line-height: 1.5; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

button {
  padding: 13px 16px;
  background: linear-gradient(160deg, var(--accent), var(--accent-2));
  color: #fff; border: 0; border-radius: 11px;
  font-size: 16px; font-weight: 600; font-family: inherit;
  cursor: pointer;
}
button:disabled { opacity: .55; }
button.secondary { background: var(--card); border: 1px solid var(--line); color: var(--text); }
button.danger { background: none; border: 1px solid rgba(248, 113, 113, .5); color: var(--bad); }
button.small { padding: 9px 13px; font-size: 14px; }
button.wide { display: block; width: calc(100% - 32px); margin: 12px 16px 0; }

/* ---- layout ---- */

#app { min-height: 100vh; }
#screen { padding-bottom: 90px; max-width: 760px; margin: 0 auto; }
body.in-practice .bottom-nav, body.in-practice .topbar { display: none; }
body.in-practice #screen { padding-bottom: 20px; }

.topbar {
  display: flex; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top) + 14px) 18px 12px;
  border-bottom: 1px solid var(--line);
}
.date-label { font-size: 19px; font-weight: 700; }
.sub { font-size: 14px; color: var(--muted); margin-top: 3px; }

.section-label {
  padding: 18px 16px 6px; font-size: 13px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}
.card {
  margin: 12px 16px; padding: 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
}
.card.warn { border-color: var(--warn); color: var(--warn); }
.pad { padding: 12px 16px 0; }

.empty { color: var(--muted); text-align: center; padding: 26px 16px; font-size: 15px; }
.msg { min-height: 20px; font-size: 14px; padding: 6px 16px 0; }
.card .msg, .sec-body .msg { padding: 0; }
.msg.ok { color: var(--good); }
.msg.bad { color: var(--bad); }
.item-meta { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* ---- collapsibles and chips ---- */

.sec { margin: 12px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.sec-head {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 10px;
  background: none; border: 0; padding: 15px 16px; color: var(--text); font-size: 16px; font-weight: 600;
  text-align: left;
}
.sec-chevron { transition: transform .2s; color: var(--muted); font-size: 20px; }
/* Child combinators, not descendant: an open category must not open every
   list inside it. (It did, until 2026-09-28 — the lists could never fold.) */
.sec.open > .sec-head .sec-chevron { transform: rotate(90deg); }
.sec-body { display: none; padding: 0 16px 16px; gap: 10px; grid-template-columns: 1fr; }
.sec.open > .sec-body { display: grid; }
.field-label { font-size: 14px; color: var(--muted); }

.picker { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  padding: 10px 14px; font-size: 15px; font-weight: 600;
  background: var(--card-2); border: 1px solid var(--line); color: var(--muted);
  border-radius: 99px;
}
.chip.on { background: rgba(20, 184, 166, .18); border-color: var(--accent); color: var(--text); }

.inline-row { display: flex; gap: 8px; align-items: center; }
.inline-row input { flex: 1; min-width: 0; }
.inline-row button { flex: 0 0 auto; }

/* ---- progress ---- */

.bar { height: 8px; background: var(--card-2); border-radius: 99px; overflow: hidden; }
.bar-fill { height: 100%; background: var(--accent); border-radius: 99px; transition: width .25s; }
.bar-fill.full { background: var(--good); }

/* ---- practice: choosing ---- */

.list-picker { display: grid; gap: 10px; padding: 0 16px; }
/* Inside a folding category: the body already has its own padding, and on a
   wide screen the cards sit side by side instead of in one long column. */
.pick-group .list-picker { padding: 0; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.pick-group .pick-card { background: var(--card-2); }
.begin { overflow-wrap: anywhere; }

/* Sections inside sections (Lists: category → list). */
.sec .sec { margin: 0; background: var(--card-2); }
.cat-group > .sec-body { gap: 8px; }
.cat-group > .sec-head .sec-title, .pick-group > .sec-head .sec-title { font-size: 17px; }
.cat-row input { flex: 1; }
.inline-row .field-label { flex: 0 0 auto; }
.inline-row select { flex: 1; min-width: 0; }
.pick-card {
  text-align: left; display: grid; gap: 4px;
  background: var(--card); border: 2px solid var(--line); color: var(--text);
  border-radius: var(--radius); padding: 15px 16px; font-weight: 400;
}
.pick-card.on { border-color: var(--accent); background: rgba(20, 184, 166, .12); }
.pick-name { font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.pick-meta { font-size: 14px; color: var(--muted); }
.begin {
  display: block; width: calc(100% - 32px); margin: 18px 16px 0;
  padding: 20px; font-size: 22px; font-weight: 800; border-radius: 16px;
}

/* ---- practice: running ----
   Everything big. The input is the thing; the revealed word is the only thing
   allowed to be bigger. */

.run { display: grid; gap: 14px; padding: calc(env(safe-area-inset-top) + 16px) 16px 16px; }
.run-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.run-count { font-size: 17px; font-weight: 700; color: var(--muted); }
.hear { padding: 18px; font-size: 20px; border-radius: 16px; }
.run-buttons { display: flex; gap: 8px; }
button.secondary.on { border-color: var(--accent); color: var(--accent); }
.run-voice { margin: 0; }

/* ---- the voice panel (picker and mid-practice) ---- */

.voice-panel { display: grid; gap: 10px; }
.voice-favs .chip { font-size: 14px; }
.pin-btn { flex: 0 0 auto; white-space: nowrap; }
.voice-panel input[type="range"] { flex: 1; }
.run-prompt { text-align: center; font-size: 18px; color: var(--muted); }

.reveal {
  text-align: center; padding: 18px 12px;
  background: rgba(251, 191, 36, .1); border: 2px solid var(--warn); border-radius: 16px;
}
.reveal-label { font-size: 14px; color: var(--warn); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.reveal-word { font-size: clamp(30px, 8vw, 52px); font-weight: 800; letter-spacing: .08em; margin-top: 6px; overflow-wrap: anywhere; }

.dots { display: flex; justify-content: center; gap: 14px; }
.dot { width: 22px; height: 22px; border-radius: 99px; border: 3px solid var(--line); }
.dot.on { background: var(--good); border-color: var(--good); }

.answer { display: flex; gap: 10px; }
.answer-input {
  flex: 1; min-width: 0;
  font-size: clamp(24px, 6vw, 34px); font-weight: 600; padding: 16px 18px; letter-spacing: .03em;
  border-width: 2px; border-radius: 16px; text-align: center;
}
.check { flex: 0 0 auto; font-size: 18px; border-radius: 16px; padding: 0 22px; }

.feedback { min-height: 30px; text-align: center; font-size: 21px; font-weight: 700; overflow-wrap: anywhere; }
.feedback.good { color: var(--good); }
.feedback.bad { color: var(--bad); }
.run-hint { text-align: center; font-size: 13px; color: var(--muted); }

/* ---- the report ---- */

.report { padding-top: 4px; }
.back-btn { margin: 12px 16px 0; }
.report-list { font-size: 21px; font-weight: 800; overflow-wrap: anywhere; }
.score { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 8px; }
.score-big { font-size: 40px; font-weight: 800; }
.score-label { color: var(--muted); font-size: 16px; }
.facts { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 14px; }
.fact-value { font-size: 19px; font-weight: 700; }
.fact-label { font-size: 13px; color: var(--muted); }
.note-line { margin-top: 12px; font-size: 15px; color: var(--warn); }
.note-line.good { color: var(--good); }

.word-group { padding: 6px 16px; }
.group-title { padding: 10px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.group-title.wrong { color: var(--bad); }
.group-title.right { color: var(--good); }
.group-title.skipped { color: var(--muted); }
.word-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 0; border-top: 1px solid var(--line); cursor: pointer;
}
.word-body { flex: 1; min-width: 0; }
.word-text { font-size: 19px; font-weight: 700; overflow-wrap: anywhere; }
.word-row.skipped .word-text { color: var(--muted); font-weight: 600; }
.typed { font-size: 15px; margin-top: 3px; overflow-wrap: anywhere; }
.typed-bad { color: var(--bad); font-weight: 600; text-decoration: line-through; text-decoration-thickness: 1px; }
.word-time { font-size: 13px; color: var(--muted); flex: 0 0 auto; }

.add-bar {
  position: sticky; bottom: calc(env(safe-area-inset-bottom) + 76px);
  display: grid; gap: 10px; border-color: var(--accent);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .35);
}
.add-bar { gap: 8px; padding: 12px 14px; }
.add-bar select { flex: 1; min-width: 0; }
.add-bar .msg:empty { display: none; }
.add-count { font-weight: 700; }

/* ---- lists ---- */

.word-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.word-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 5px 5px 12px; font-size: 16px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 99px;
}
.chip-x {
  width: 30px; height: 30px; padding: 0; border-radius: 99px;
  background: none; color: var(--muted); font-size: 20px; line-height: 1;
}

/* ---- reports history ---- */

.history-card {
  display: flex; align-items: center; gap: 14px; width: calc(100% - 32px);
  margin: 8px 16px 0; padding: 14px 16px; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--text); font-weight: 400;
}
.history-main { flex: 1; min-width: 0; }
.history-list { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.history-meta { font-size: 14px; color: var(--muted); margin-top: 3px; }
.history-score-big { font-size: 22px; font-weight: 800; }
.history-score.perfect { color: var(--good); }
.tag {
  display: inline-block; margin-top: 6px; padding: 2px 8px;
  font-size: 12px; color: var(--warn); border: 1px solid rgba(251, 191, 36, .5); border-radius: 99px;
}

/* ---- bottom nav ---- */

.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; background: var(--card);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav .nav-item {
  flex: 1; background: none; border: 0; color: var(--muted); border-radius: 0;
  font-size: 12px; font-weight: 600; padding: 9px 0 8px;
  display: grid; justify-items: center; gap: 3px;
}
.bottom-nav .nav-item svg {
  width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}
.bottom-nav .nav-item.active { color: var(--accent); }

/* ---- desktop ----
   A wide window: the nav stays a compact row in the middle rather than four
   buttons strung across a monitor, and things that can be clicked say so. */

@media (min-width: 900px) {
  .bottom-nav { justify-content: center; }
  .bottom-nav .nav-item { flex: 0 1 140px; }
  .run { padding-top: 40px; gap: 18px; }
}
@media (hover: hover) {
  button:not(:disabled):hover { filter: brightness(1.12); }
  .pick-card:hover, .history-card:hover { border-color: var(--accent); }
  .bottom-nav .nav-item:hover { color: var(--text); filter: none; }
  .word-row:hover .word-text { color: var(--accent); }
}
.fold-all { justify-content: flex-end; }