/* spellings - one stylesheet for the kid app and the parent page.
   Kid screens always fit the visible viewport (no page scroll): every size is in rem, and the root
   font size comes from the viewport (--base) times a per-device multiplier (--scale, ?scale=0.6..1.6). */
:root {
  --paper: #FAFBF8;
  --ink: #3B3F46;
  --muted: #6A707A;                       /* 4.9:1 on paper (was #7C828C, 3.7:1; WCAG AA needs 4.5) */
  --line: #DDE0DA;
  --card: #FFFFFF;
  --green: #247F49;                       /* 5.1:1 with white text (was #2E9E5B, 3.4:1) */
  --amber: #C2571F;
  --accent: #1F6FB2;
  --scale: 1;
  --base: clamp(14px, calc(1.8vmin + 5px), 24px);
  --tap: max(44px, 3.2rem);               /* minimum touch target: never below 44 CSS px */
  --gap: clamp(.35rem, 1.6vh, 1.1rem);
  --font: "Andika", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
[data-kid="arlet"]  { --accent: #7B3FA0; }
[data-kid="gerard"] { --accent: #1F6FB2; }

* { box-sizing: border-box; }
html { font-size: calc(var(--base) * var(--scale)); }
html.p { font-size: 17px; }                /* parent page: fixed, readable on phone and Mac */
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font); line-height: 1.25;
       -webkit-tap-highlight-color: transparent; }
body.kid { overflow: hidden; }
h1, h2, h3 { margin: 0 0 .4em; line-height: 1.15; }
h1 { font-size: 2rem; margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
svg.ic { width: 1.4em; height: 1.4em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round;
         stroke-linejoin: round; flex: none; }
svg.ic.fill { fill: currentColor; stroke: none; }

/* ---- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: var(--tap); min-width: var(--tap);
       padding: .25em 1em; border-radius: 1rem; border: .15rem solid var(--accent); background: var(--card);
       color: var(--accent); font-weight: 700; user-select: none; touch-action: manipulation; }
.btn.solid { background: var(--accent); color: #fff; }
.btn.green { background: var(--green); border-color: var(--green); color: #fff; }
.btn[disabled] { opacity: .4; cursor: default; }
a.btn { text-decoration: none; }
.btn.small { min-height: 44px; min-width: 44px; padding: .2em .8em; font-size: .9rem; border-width: 2px; }
.btn.danger { border-color: var(--amber); color: var(--amber); }

/* ---- kid app shell: every screen is exactly one viewport tall */
#app { height: 100vh; height: 100dvh; overflow: hidden; }
.screen { height: 100%; display: none; flex-direction: column; gap: var(--gap);
          /* bottom 15% stays empty: some browser toolbars overlay the page without shrinking the viewport */
          padding: .6rem 1rem calc(max(env(safe-area-inset-bottom), 0px) + 15vh); width: 100%; max-width: 1700px;
          margin: 0 auto; overflow: hidden; }
.screen.active { display: flex; }
.topbar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; flex: none; }
.topbar .grow { flex: 1; }
.stat { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; font-size: 1.1rem; }
.stat svg { color: #E0A800; }
/* the middle of a screen: takes the leftover height and lets its children shrink */
.center { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
          gap: var(--gap); text-align: center; }
.center > * { flex-shrink: 0; }
.msg { color: var(--muted); font-size: 1.05rem; margin: 0; }
.msg.err { color: var(--amber); font-weight: 700; }

/* big round buttons shrink to whatever height is left (aspect-ratio keeps them round) */
.bigplay, .holdbtn, .pausebtn { flex: 0 1 var(--d); height: var(--d); max-height: 100%; min-height: 72px; aspect-ratio: 1 / 1;
  width: auto; border-radius: 50%; border: 0; padding: 0; background: var(--accent); color: #fff; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: .2em; font-weight: 700;
  box-shadow: 0 .3rem 0 rgba(0,0,0,.15); }
.center > .bigplay, .center > .holdbtn, .center > .pausebtn { flex-shrink: 1; }
.bigplay, .holdbtn { font-size: 1.4rem; }
.bigplay { --d: min(36vmin, 26rem); }
.holdbtn { --d: min(30vmin, 22rem); }
.pausebtn { --d: min(26vmin, 14rem); }
.bigplay svg, .holdbtn svg, .pausebtn svg { width: 38%; height: 38%; }
.bigplay[disabled], .holdbtn[disabled] { opacity: .35; box-shadow: none; }

/* home */
.tabs, .chips, .row, .dots { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.tab { min-height: var(--tap); padding: .25em 1.2em; border-radius: 999px; border: .15rem solid var(--line); background: var(--card);
       font-weight: 700; }
.tab[aria-selected="true"] { border-color: var(--accent); background: var(--accent); color: #fff; }
.chip { min-height: var(--tap); padding: .15em 1em; border-radius: 1rem; border: 2px solid var(--line); background: var(--card); }
.chip small { display: block; color: var(--muted); font-size: .7rem; }
.chip b { color: var(--accent); }

/* playing */
.word-count { font-size: 2.2rem; font-weight: 700; }
.bar { width: min(900px, 90%); height: .9rem; border-radius: .45rem; background: var(--line); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); width: 0; transition: width .3s; }
.pausebtn svg { width: 50%; height: 50%; }

/* mark: rows share the available height; only if a row would get shorter than ~52px does the list scroll */
.marklist { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: column;
            grid-template-rows: repeat(var(--rows, 1), minmax(52px, 1fr)); gap: .5rem; overflow-y: auto; }
@media (max-width: 640px) { .marklist { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; grid-auto-rows: minmax(52px, 1fr); } }
.markrow { display: flex; align-items: center; gap: .5rem; background: var(--card); border: 2px solid var(--line);
           border-radius: 1rem; padding: .15rem .3rem; max-height: 6.5rem; align-self: center; width: 100%; min-width: 0; }
.markrow .lbl { flex: 1; min-width: 0; font-size: 1.7rem; font-weight: 700; overflow-wrap: anywhere; }
.toggle { min-width: 7.5rem; border-color: var(--line); color: var(--muted); }
.toggle.got { background: var(--green); border-color: var(--green); color: #fff; }
.toggle.not { background: var(--amber); border-color: var(--amber); color: #fff; }
.stars { display: flex; gap: .4rem; justify-content: center; }
.stars svg { width: min(16vmin, 6rem); height: min(16vmin, 6rem); fill: var(--line); stroke: none; }
.stars svg.on { fill: #F2B600; }
.score { font-size: 3.6rem; font-weight: 700; color: var(--accent); display: flex; align-items: center; gap: .3em; }
.score svg { width: .9em; height: .9em; color: #F2B600; }

/* record */
.weekpick { display: flex; align-items: center; gap: .5rem; justify-content: center; }
.reclabel { font-size: clamp(2rem, min(12vh, 12vw), 6.5rem); font-weight: 700; overflow-wrap: anywhere; line-height: 1.05; }
.holdbtn.live { background: #C0392B; transform: scale(1.04); box-shadow: 0 0 0 .6rem rgba(192,57,43,.25); }
.holdbtn { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.dot { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--accent); background: var(--card); padding: 0;
       font-weight: 700; color: var(--accent); }
.dot.has { background: var(--accent); color: #fff; }
.dot.cur { outline: 3px solid var(--ink); outline-offset: 2px; }

/* my stars */
.chart { flex: 1 1 0; min-height: 80px; display: flex; align-items: flex-end; gap: 6px; width: min(1000px, 100%);
         border-bottom: 3px solid var(--line); padding: 1.4rem .5rem 0; }
.chart .b { flex: 1; background: var(--accent); border-radius: .4rem .4rem 0 0; min-height: 4px; position: relative; }
.chart .b span { position: absolute; top: -1.3em; left: 0; right: 0; text-align: center; font-size: .75rem; color: var(--muted); }

/* ---- parent page */
.parent { max-width: 1400px; margin: 0 auto; padding: 1rem; }
.parent h1 { font-size: 1.6rem; }
.kids { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; align-items: start; }
@media (max-width: 800px) { .kids { grid-template-columns: 1fr; } }
.panel { background: var(--card); border: 2px solid var(--line); border-radius: 16px; padding: 1rem; margin-bottom: 1rem; }
.panel h2 { color: var(--accent); }
.panel h3 { font-size: 1rem; margin-top: 1rem; }
.parent input[type=text], .parent input[type=date], .parent textarea {
  width: 100%; padding: .6em; border: 2px solid var(--line); border-radius: 10px; background: #fff; font-size: 1rem; }
.parent textarea { min-height: 7em; }
.wordrow { display: flex; gap: .4rem; align-items: center; margin: .3rem 0; }
.wordrow input { flex: 1; min-width: 0; }
.wordrow input[type=checkbox] { flex: none; width: 1.4rem; height: 1.4rem; }
.bulkbar { justify-content: space-between; }
.bulkbar label { display: flex; align-items: center; gap: .4rem; }
.wordrow .au { font-size: .8rem; color: var(--muted); width: 4.2em; text-align: center; flex: none; }
.wordrow .au.yes { color: var(--green); font-weight: 700; }
.wordrow .au.tts { color: var(--muted); font-weight: 400; width: 6.5em; }
.week { border-top: 1px solid var(--line); padding-top: .6rem; margin-top: .6rem; }
.week > summary { cursor: pointer; font-weight: 700; padding: .4rem 0; min-height: 44px; display: flex; align-items: center; }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
td, th { text-align: left; padding: .3em .4em; border-bottom: 1px solid var(--line); }
.note { color: var(--muted); font-size: .85rem; }
.toast { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); background: var(--ink); color: #fff;
         padding: .6em 1.2em; border-radius: 12px; display: none; z-index: 9; }
.toast.show { display: block; }
.toast.err { background: var(--amber); }

.screenbox { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.screenbox .btn { border-radius: 10px; }
[hidden]{display:none!important}
#qrlink { word-break: break-all; }

/* my weeks / look & listen */
.weeklist, .looklist { display: flex; flex-direction: column; gap: .5rem; overflow-y: auto; min-height: 0; flex: 1 1 0; padding: .25rem; }
.weekrow { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; background: var(--card); border: 2px solid var(--line);
           border-radius: 1rem; padding: .4rem .6rem; }
.weekrow .grow { min-width: 10rem; }
.weekrow small { display: block; color: var(--muted); }
.hist { display: flex; gap: .2rem; align-items: center; color: var(--muted); }
.pip { display: inline-flex; width: 1.6rem; height: 1.6rem; border-radius: 50%; align-items: center; justify-content: center; color: #fff; }
.pip svg { width: 1rem; height: 1rem; stroke: #fff; }
.pip.got { background: var(--green); }
.pip.not { background: var(--amber); }
/* the Tricky-words list on the home screen: shrinks and scrolls instead of pushing Play off screen */
.center > .looklist { flex: 0 1 auto; width: min(100%, 32rem); }
/* term chips (Big Spell / Tricky words) are a second, smaller row under the mode tabs */
.tabs.terms .tab { min-height: 2.4rem; padding: .1em .9em; font-size: .95rem; }

/* Feedback dialog (static/feedback.js): same look on the kid pages and the parent page. */
dialog.feedback { width: min(34rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; border: 2px solid var(--line);
  border-radius: 16px; background: var(--card); color: var(--ink); padding: 1rem; font-size: 17px; }
dialog.feedback::backdrop { background: rgb(0 0 0 / .35); }
dialog.feedback h2 { margin-top: 0; color: var(--accent); }
dialog.feedback textarea, dialog.feedback input { display: block; width: 100%; margin: 0 0 .6rem; padding: .5em;
  border: 2px solid var(--line); border-radius: 10px; background: #fff; }
/* Print: only #printarea (the blank answer sheet or the progress summary) reaches the paper. */
#printarea { display: none; }
@media print {
  body > *:not(main), main.parent > *:not(#printarea), .btn, .toast { display: none !important; }
  #printarea { display: block !important; color: #000; background: #fff; font: 16pt/2.4 serif; }
  #printarea h1 { font-size: 20pt; }
  #printarea pre { font: inherit; white-space: pre-wrap; margin: 0; }
}

/* type-the-word mode (#5604) */
.typebox { font-size: 1.6rem; padding: .4em .6em; text-align: center; max-width: 18em; width: 90%; }