/* ---- Literacy in Science (app/literacy.js) ---------------------------------
   Built on the app's own components: .row, .rcard, .chip, .meter, .pill,
   .feedback, .media-frame and the study screen's top bar, step rail and
   actions. This sheet only adds what those do not cover (the word card, the
   game tiles, the lesson pictograms), and every colour in it is one of the
   palette tokens in styles.css, so light, dark and higher contrast all follow.
   Fonts are inherited: the app's system font stack, nothing added.
   Everything is scoped under .lit. */

/* Subject accents: the same values study.js uses for a unit
   (SUBJECT_THEMES), scoped to this section rather than set on the document.
   Light theme only. study.js applies them in every theme, which puts a dark
   red on a near-black page; here the dark theme keeps its own readable accent
   instead. Biology and the command words use the app's default green. */
html[data-theme=light] .lit--chemistry{--accent:#c0453c;--accent-dark:#84302a;--accent-soft:#f8e8e5}
html[data-theme=light] .lit--physics{--accent:#4a4e8c;--accent-dark:#333761;--accent-soft:#e9eaf4}
@media (prefers-color-scheme: light){
  html[data-theme=system] .lit--chemistry{--accent:#c0453c;--accent-dark:#84302a;--accent-soft:#f8e8e5}
  html[data-theme=system] .lit--physics{--accent:#4a4e8c;--accent-dark:#333761;--accent-soft:#e9eaf4}
}
.lit-part.lit--command-words{--c:var(--flag)}
.lit-part{--c:var(--accent);display:block;color:var(--ink);text-decoration:none}
.lit-part h2{margin:0;font-size:var(--text-base)}
.lit-part:hover{border-color:var(--c)}
@media(min-width:640px){.lit-parts{grid-template-columns:repeat(2,1fr)}}

/* Lesson pictograms. The SVGs carry class names, not colours, so they take
   the palette: the subject accent, the flag colour for highlights, the focus
   blue for anything that was blue. */
.lit svg .c-fill{fill:var(--accent-soft)}.lit svg .c-line{stroke:var(--accent);fill:none}
.lit svg .c-hi{fill:var(--flag)}.lit svg .c-hil{stroke:var(--flag);fill:none}
.lit svg .c-nuc{fill:var(--focus)}.lit svg .c-bg{fill:var(--surface)}
.lit svg .c-fg{fill:var(--ink)}.lit svg .c-fgl{stroke:var(--ink);fill:none}
.lit svg .c-red,.lit svg .c-orange,.lit svg .c-brown{fill:var(--flag)}
.lit svg .c-pink{fill:var(--flag);fill-opacity:.5}
.lit svg .c-blue{fill:var(--focus)}
.lit svg .c-green{fill:var(--accent)}.lit svg .c-dkgreen{fill:var(--accent-dark)}
.lit svg text{font-family:inherit}

.lit-ic{width:44px;height:44px;flex:none;background:var(--bg);border-radius:var(--r-sm);padding:var(--sp-4)}
.lit-ic svg{width:100%;height:100%;display:block}
.lit-lesson{justify-content:flex-start}.lit-lesson .row__body{flex:1}
.lit-bw{justify-content:flex-start;align-items:flex-start}.lit-bw .row__body{flex:1}
.lit-bw__def{display:block;font-size:var(--text-sm);margin-top:var(--sp-2)}
.lit-speak{display:inline-flex;align-items:center;gap:var(--sp-4);vertical-align:middle}
.lit-speak .icon{width:18px;height:18px}

.lit-search{display:block;margin:var(--sp-12) 0 var(--sp-8)}
.lit-search span{display:block;font-weight:600;font-size:var(--text-sm);margin-bottom:var(--sp-4)}
.lit-search input{width:100%;min-height:48px;border:1px solid var(--line-strong);border-radius:var(--r-sm);padding:var(--sp-10) var(--sp-14);background:var(--surface);color:var(--ink);font:inherit}
.lit-check{margin-bottom:var(--sp-8)}

.lit-cta{margin:var(--sp-16) 0 var(--sp-4);background:var(--surface);border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:var(--r);padding:var(--sp-16)}
.lit-cta__label{margin:0 0 var(--sp-4);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.lit-cta h2{margin:0 0 var(--sp-4);font-size:var(--text-lg)}
.lit-cta p{margin:0 0 var(--sp-12)}
.lit-entry{margin-top:var(--sp-16)}

.lit-card{display:flex;flex-direction:column;gap:var(--sp-16)}
.lit-card .screen-heading{margin-bottom:0}
.lit-card .lede{margin:0}
.lit-inner{margin-top:0}
.row-actions{display:flex;flex-wrap:wrap;gap:var(--sp-10);align-items:center}
#lit-fb:empty{display:none}#lit-fb .feedback{margin-top:0}

.lit-figure summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600;color:var(--accent-dark)}
.lit-figure .media-frame{margin:var(--sp-8) 0 0}
.lit-figure figcaption a{color:var(--accent-dark)}

.lit-word-wrap{display:grid;grid-template-columns:160px 1fr;gap:var(--sp-20);align-items:start}
.lit-pic{background:var(--bg);border-radius:var(--r);padding:var(--sp-12);aspect-ratio:1;display:grid;place-items:center}
.lit-pic svg{width:100%;height:auto;display:block}
.lit-word-body,.lit-q{display:flex;flex-direction:column;gap:var(--sp-12);min-width:0}
.lit-word{font-size:var(--text-3xl);font-weight:700;color:var(--accent-dark);line-height:1.15;margin:0;overflow-wrap:anywhere}
.lit-tag{align-self:flex-start}
.lit-syll{display:flex;flex-wrap:wrap;gap:var(--sp-6);align-items:center}
.lit-syll span{background:var(--accent-soft);color:var(--accent-dark);border-radius:var(--r-sm);padding:var(--sp-2) var(--sp-10);font-weight:600}
.lit-def{font-size:var(--text-lg);margin:0}
.lit-def.is-hidden{min-height:2.4em;background:repeating-linear-gradient(90deg,var(--line) 0 8px,transparent 8px 12px);border-radius:var(--r-sm)}
.lit-hook{background:var(--warn-soft);border-left:5px solid var(--flag);border-radius:var(--r-sm);padding:var(--sp-10) var(--sp-14);font-size:var(--text-sm)}
.lit-hook strong{color:var(--warn-ink)}
.lit-ex{margin:0}
.lit-dots{display:flex;gap:var(--sp-6);flex-wrap:wrap}
.lit-dots i{width:12px;height:12px;border-radius:50%;background:var(--line)}
.lit-dots i.on{background:var(--accent)}.lit-dots i.seen{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--accent)}

.lit-rate-list .lit-rate{display:grid;grid-template-columns:1fr auto;gap:var(--sp-12);align-items:center;border-bottom:1px solid var(--line);padding-bottom:var(--sp-8)}
.lit-rate__w{font-weight:600}
.lit-rate__opts{display:flex;gap:var(--sp-6);flex-wrap:wrap}

/* Game tiles: the same edge, radius and states as .choice in the question
   screens, but buttons, because each one is an answer in itself. */
.lit-match{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--sp-14)}
.lit-col,.lit-pool{display:flex;flex-direction:column;gap:var(--sp-8)}
.lit-pool{flex-direction:row;flex-wrap:wrap}
.lit-tile{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);border-radius:var(--r-sm);padding:var(--sp-12);text-align:left;min-height:48px;line-height:1.4;font:inherit;cursor:pointer}
.lit-tile--word{font-weight:700}
.lit-tile.is-sel{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);background:var(--accent-soft)}
.lit-tile.is-ok{border-color:var(--accent);background:var(--accent-soft);color:var(--accent-dark);cursor:default}
.lit-tile.is-no{border-color:var(--flag);background:var(--warn-soft);color:var(--warn-ink)}
.lit-tile:disabled{opacity:1}
.lit-opts{display:grid;grid-template-columns:repeat(var(--cols,3),minmax(0,1fr));gap:var(--sp-8)}
.lit-prompt{font-size:var(--text-lg);font-weight:700;margin:0}
.lit-slots{list-style:none;counter-reset:slot;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--sp-8)}
.lit-slot{counter-increment:slot;border:1px dashed var(--line-strong);border-radius:var(--r-sm);padding:var(--sp-10) var(--sp-14);min-height:48px;display:flex;gap:var(--sp-12);align-items:center}
.lit-slot::before{content:counter(slot);font-weight:700;color:var(--muted);width:1.5em;flex:none}
.lit-slot.is-filled{border-style:solid;border-color:var(--accent);background:var(--accent-soft);font-weight:700}
.lit-sent{font-size:var(--text-lg);padding:var(--sp-10) 0;margin:0;border-bottom:1px solid var(--line)}
.lit-gap{display:inline-block;min-width:7em;border-bottom:3px solid var(--line-strong);text-align:center;padding:0 var(--sp-6);color:var(--muted)}
.lit-gap.is-act{border-color:var(--accent);background:var(--accent-soft)}
.lit-gap.is-ok{border-color:var(--accent);color:var(--accent-dark);font-weight:700}
.lit-summary{margin:0}@media(min-width:640px){.lit-summary{grid-template-columns:repeat(3,1fr)}}
.lit-summary .rcard{text-align:center}
.lit-shake{animation:lit-shake .35s}
@keyframes lit-shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
@media (prefers-reduced-motion: reduce){.lit-shake{animation:none}}
@media (max-width:640px){
  .lit-word-wrap{grid-template-columns:1fr}.lit-pic{max-width:140px}
  .lit-match,.lit-opts,.lit-rate-list .lit-rate{grid-template-columns:1fr}
}