/* The app's look: every colour, type size and mode from tokens.css, the rules moving screen by screen from the prototype's to the handover's (ADR-0007). */
@import url(../fonts/fonts.css);
@import url(./tokens.css);

:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-text);font-size:var(--text-body);line-height:1.5;-webkit-text-size-adjust:100%;
  overflow-wrap:break-word;overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}
#app{max-width:680px;margin:0 auto;padding:20px 16px 48px}
h1,h2{font-family:var(--font-display);line-height:1.1;margin:0}
h1{font-size:clamp(2.4rem,9vw,3.4rem);font-weight:800;letter-spacing:-.01em}
h2{font-size:1.6rem;font-weight:800}
p{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:var(--focus);outline-offset:3px;border-radius:6px}
.sent:focus-visible{outline-offset:2px}

/* the home screen (App.dc.html): the wordmark on the highlighter, the texts as raised cards, the footer under a quiet rule */
.hero{padding:20px 0 4px;container-type:inline-size}
/* the wordmark stays one line: at a large text size the hero's width caps it */
.hero h1{font-size:min(2.125rem,12.5cqw);line-height:1.15;letter-spacing:0}
.hero h1 span{background:var(--marker);color:var(--marker-ink);padding:0 8px;border-radius:8px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero p{color:var(--soft);margin-top:10px;font-size:var(--text-body);line-height:1.45}
.list{display:grid;gap:12px}
/* the row wraps: at 200% text the badge drops under the title rather than squeezing it (U3) */
.story{display:flex;flex-wrap:wrap;align-items:center;gap:12px;text-align:left;width:100%;
  background:var(--card);color:var(--ink);border:2px solid var(--ink);border-radius:var(--radius-card);padding:14px;
  box-shadow:var(--shadow-press)}
.story:active{transform:translateY(3px);box-shadow:none}
.story .emo{flex:0 0 auto;min-width:40px;text-align:center;font-size:1.875rem;line-height:1}
.story .emo + span{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 6rem}
.story .ttl{font-family:var(--font-display);font-weight:800;font-size:1.25rem;line-height:1.2;text-wrap:pretty}
.story .kind{color:var(--soft);font-size:var(--text-small);line-height:1.3}
.story .best{color:var(--ink);font-size:var(--text-small);font-weight:600;line-height:1;white-space:nowrap}
.story .best.new{background:var(--tip-bg);border-radius:999px;padding:8px 12px}
.foot{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:32px;padding-top:20px;border-top:2px solid var(--line)}
.note{color:var(--soft);font-size:var(--text-small);line-height:1.45}

/* a text's screens */
/* the shared controls (components.dc.html): a tap target has the hard shadow and drops onto it when pressed (ADR-0005) */
.top{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.back{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px 0 12px;
  background:var(--card);color:var(--ink);border:2px solid var(--ink);border-radius:var(--radius-control);
  box-shadow:var(--shadow-press);font-family:var(--font-text);font-weight:600;font-size:var(--text-small);line-height:1}
.back::before{content:"←";content:"←" / "";font-size:1.25rem;line-height:1}
.back:active{transform:translateY(3px);box-shadow:none}
.dots{display:flex;align-items:center;gap:6px;flex:1;justify-content:flex-end;flex-wrap:wrap}
.dot{width:12px;height:12px;border-radius:50%;background:var(--line)}
.dot.done{background:var(--accent)}
.dot.now{width:14px;height:14px;background:var(--card);border:3px solid var(--accent)}
/* the reading stop's title: the read view is the only one opening with an h2, right after the top bar */
.top + h2{font-family:var(--font-display);font-size:1.625rem;line-height:1.2;margin-top:4px;text-wrap:pretty}
.stage{color:var(--soft);font-size:var(--text-small);font-weight:600;margin:4px 0 4px}
.card{background:var(--card);border:2px solid var(--ink);border-radius:var(--radius-card);padding:18px;margin-top:12px}
.card.text{padding:20px 18px}
.text p{font-size:var(--text-read);line-height:var(--line-read)}
.text p + p{margin-top:.7em}
.sent{border-radius:6px;padding:2px 1px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* the find state, the handover's text-searchable: the text stays prose, its lines open to 2.1 so a sentence is a 46 px tap target (U2) */
.findable p{font-size:var(--text-searchable);line-height:2.1}
.findable .sent{cursor:pointer;padding:7px 3px;
  text-decoration:underline dashed var(--accent);text-decoration-thickness:2px;text-underline-offset:6px}
.findable .sent:hover,.findable .sent:active{background:var(--tip-bg);text-decoration-style:solid}
/* a missed sentence: ✗ as well as the colour (U4), the mark silent to a screen reader */
.findable .sent.miss{background:var(--bad-bg);color:var(--ink);text-decoration:none;cursor:default}
.findable .sent.miss::before{content:"✗ ";content:"✗ " / "";color:var(--bad);font-weight:700}
.ask{font-family:var(--font-display);font-weight:800;font-size:var(--text-ask);line-height:1.2}
/* the tip box, the same in the question card and the ordering card, 14 px under the question */
.tip{background:var(--tip-bg);border-radius:var(--radius-box);padding:12px 14px;margin-top:14px;font-size:var(--text-body);line-height:1.45}
.todo{margin-top:14px;font-weight:600}
/* one under the other (P13); 16 px under the question, the design's 4 px margin and 12 px card gap */
.opts{display:grid;gap:12px;margin-top:16px}
/* the true-or-false pair: side by side, one under the other once the text is large (U6) - the minimum is in em, so it grows with the text */
.opts.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,7em),1fr))}
.opts.two .opt{justify-content:center;text-align:center;font-family:var(--font-display);font-weight:800;font-size:1.375rem;line-height:1.2}
.opts.two .opt::before{flex:0 0 auto}
.opt{position:relative;display:flex;gap:10px;width:100%;min-height:52px;padding:13px 16px;text-align:left;
  background:var(--card);color:var(--ink);border:2px solid var(--ink);border-radius:var(--radius-control);box-shadow:var(--shadow-press);
  font-family:var(--font-text);font-weight:500;font-size:var(--text-option);line-height:1.4}
/* the mark column: empty, ✗ on a wrong answer, ✓ on the right one - colour is never the only sign (U4) */
.opt::before{content:"";flex:0 0 22px;font-weight:700}
.opt:not([disabled]):active{transform:translateY(3px);box-shadow:none}
.opt[disabled]{cursor:default;box-shadow:none;color:var(--soft);border-color:var(--line)}
.opt.wrong{color:var(--ink);border-color:var(--bad);background:var(--bad-bg);
  text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:var(--bad)}
.opt.wrong::before{content:"✗";content:"✗" / "";color:var(--bad)}
.opt.right{color:var(--ink);border-color:var(--good);background:var(--good-bg)}
.opt.right::before{content:"✓";content:"✓" / "";color:var(--good)}
/* an answer's state said to a screen reader: hidden visually, still read (F3-023) */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fb{border:2px solid transparent;border-radius:var(--radius-box);padding:12px 14px;margin-top:12px;font-size:var(--text-body);line-height:1.45}
.fb.good{background:var(--good-bg);border-color:var(--good);color:var(--good);font-weight:700}
.fb.bad{background:var(--bad-bg);border-color:var(--bad);color:var(--ink)}
.fb.info{background:var(--tip-bg)}
.next{display:block;width:100%;min-height:56px;margin-top:16px;padding:12px 20px;
  background:var(--accent);color:var(--accent-ink);border:2px solid var(--ink);border-radius:var(--radius-control);box-shadow:var(--shadow-primary);
  font-family:var(--font-display);font-weight:800;font-size:1.375rem;line-height:1.2}
.next:active{transform:translateY(4px);box-shadow:none}
/* what is put in order: numbered green rows, the number on a disc for the eye - the list itself numbers it to a screen reader;
   the disc is 32 px in a 36 px column at 100% text, and grows with the text (docs/design-deviations.md) */
ol.placed{display:grid;gap:8px;padding:0;margin:14px 0 0;counter-reset:n}
.placed li{list-style:none;counter-increment:n;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;
  background:var(--good-bg);border:2px solid var(--good);border-radius:var(--radius-box);padding:10px 12px;
  font-size:var(--text-option);line-height:1.4}
.placed li::before{content:counter(n);content:counter(n) / "";display:inline-flex;align-items:center;justify-content:center;
  width:1.78em;height:1.78em;margin-inline:2px;border-radius:50%;background:var(--good);color:var(--paper);
  font-family:var(--font-display);font-weight:800;font-size:var(--text-body);line-height:1}
/* the quiet line over the items left to order: the stage line's look, 18 px under the card above and 14 px over the items */
.left{color:var(--soft);font-size:var(--text-small);font-weight:600;margin:18px 0 0}
.left+.opts{margin-top:14px}
.frames{display:grid;gap:8px;margin-top:10px}
.frames div{border:2px dashed var(--line);border-radius:12px;padding:10px 12px;font-weight:600}
@keyframes pop{0%{transform:scale(.96)}60%{transform:scale(1.02)}100%{transform:scale(1)}}
.fb{animation:pop .22s ease-out}
@media (prefers-reduced-motion: reduce){.fb{animation:none}}
/* the answer state: the text fades to soft, the evidence keeps the highlighter, and stands large in the clue (ADR-0006: marker is these two and the wordmark only) */
.focus .sent{color:var(--soft)}
.focus .sent.hit{background:var(--marker);color:var(--marker-ink);padding:3px 6px;border-radius:8px;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.cluelabel{color:var(--soft);font-weight:600;font-size:var(--text-small)}
.clue{background:var(--marker);color:var(--marker-ink);border-radius:var(--radius-box);padding:14px 16px;margin-top:12px;
  font-size:var(--text-clue);line-height:1.5;font-weight:600;text-wrap:pretty}
.ask.again{margin-top:20px}
h2.lvl{font-size:1.375rem;line-height:1.2;margin:28px 0 16px}
.hero + h2.lvl{margin-top:28px}
.todo.solo{margin-top:0}
/* the closing (App.dc.html, isDone): the star row with no failure look at 0 (§5.2), its empty places soft,
   then the retelling cards: a flat box with one chip per keyword, and its help button the one thing raised */
.card:has(>.stars){container-type:inline-size}
h2:has(+.stars){font-size:min(1.875rem,13.5cqw);line-height:1.15}
.stars{font-size:1.875rem;line-height:1;letter-spacing:4px;margin:12px 0}
.stars .empty{color:var(--soft)}
.stars+p{line-height:1.45}
.retell{display:grid;gap:14px;margin-top:14px}
.rcard{display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  background:var(--paper);color:var(--ink);border:2px solid var(--line);border-radius:var(--radius-box);padding:14px;
  font-size:var(--text-body);line-height:1.5}
.rcard.open{background:var(--tip-bg)}
.rcard b{font-family:var(--font-display);font-weight:800;font-size:1.3125rem;line-height:1.2}
.keys{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:var(--tip-bg);color:var(--ink);border-radius:999px;padding:9px 14px;font-weight:500;line-height:1.3}
.rbtn{display:inline-flex;align-items:center;min-height:48px;padding:0 18px;
  background:var(--card);color:var(--ink);border:2px solid var(--ink);border-radius:var(--radius-control);
  box-shadow:var(--shadow-press);font-family:var(--font-text);font-weight:600;font-size:var(--text-small);line-height:1}
.rbtn:active{transform:translateY(3px);box-shadow:none}
.draw{margin-top:10px;line-height:1.5}

/* the parents page (F2-015): the way to it on home, and a denser page of cards (brief §5 `parents`) */
.to-parents{display:inline-flex;align-items:center;min-height:48px;padding:8px 18px;text-align:left;
  background:var(--card);color:var(--ink);border:2px solid var(--ink);border-radius:var(--radius-control);
  box-shadow:var(--shadow-press);font-family:var(--font-text);font-weight:600;font-size:var(--text-small);line-height:1.2}
.to-parents:active{transform:translateY(3px);box-shadow:none}
h1.page{font-size:1.875rem;line-height:1.15;margin:8px 0 4px}
section.card h2{font-size:1.45rem;line-height:1.2;margin-bottom:8px}
section.card p,section.card li{font-size:var(--text-body);line-height:1.55}
section.card p + p,section.card ul + p,section.card p + ul{margin-top:.6em}
section.card ul{margin:0;padding-left:1.2em}
section.card li + li{margin-top:.4em}