/* Scoped to the practice page. Glyph paths: KanjiVG, CC BY-SA 3.0.
   Revised 4 October 2026 after an audit (labs/hiragana-practice/evidence/audit-2026-10-04/): text sizes in rem; the
   quiz's controls are shown by the page's first script (html.practice-js), not by the page script, so the first frame
   has its final layout; without JavaScript the self-check cards take the quiz's place; a layout for short screens;
   print on US Letter or A4 (chosen by the first script), with the title and credit on every question page.
   Revised again after the re-audit (reaudit-2026-10-04/): the toolbar wraps at large text sizes; the notice joins the
   line under the question; what lies under the question stays hidden until the page script has drawn the question;
   on short screens a word or phrase reads across the box. */
#main:has(.practice-page) { padding-top: 20px; max-width: 1120px; }
/* The page is always taller than the window: keep the scrollbar's place from the first frame, so the page does not
   move sideways when the rest of it arrives. */
:root:has(.practice-page) { scrollbar-gutter: stable; }
/* Prototype mode adds a banner and page tabs above the page: the tabs' own margin is spacing enough. */
#main:has(> .page-tabs):has(.practice-page) { padding-top: 0; }
#main .practice-page { --practice-green: #315e4c; --practice-rust: #a43721; }
#main .practice-page [hidden] { display: none !important; }
#main .practice-page h1 { margin: 0; font-size: clamp(1.625rem, 3.3vw, 2.5rem); line-height: 1.15; }
#main .practice-heading { margin-bottom: 16px; }
#main .practice-heading > p { margin: 6px 0 0; }
#main .practice-layout { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 28px; align-items: start; }
#main .practice-page button, #main .practice-page select, #main .practice-page summary { min-height: 44px; }
#main .practice-page button { cursor: pointer; padding: 8px 14px; border: 1px solid #c7c7bb; border-radius: 8px; background: #fffefa; color: #252c27; font: inherit; line-height: 1.3; }
#main .practice-page button:disabled { cursor: default; opacity: .65; }
#main .practice-page button[aria-pressed="true"], #main .practice-page button[aria-checked="true"] { background: #315e4c; color: white; border-color: #315e4c; }
#main .practice-page button.is-primary:not(:disabled) { background: #315e4c; border-color: #315e4c; color: #fff; font-weight: 600; }
#main .practice-page :is(button, input, select, summary, a):focus-visible { outline: 3px solid #a43721; outline-offset: 3px; }
#main .practice-page select, #main .practice-page input { font: inherit; border: 1px solid #7e8275; border-radius: 6px; background: #fff; color: #252c27; }
/* 16px in fields and menus: iOS Safari zooms the page into a smaller one when it is focused. */
#main .practice-page select { font-size: 1rem; }

/* Without JavaScript, or if the page script fails to load, the quiz and its controls give way to the self-checks. */
html:not(.practice-js) #main .practice-tool, html:not(.practice-js) #main .practice-study, html:not(.practice-js) #main .practice-side-note,
html:not(.practice-js) #main .practice-print-row { display: none; }
html.practice-js #main .practice-static, html.practice-js #main .practice-nojs { display: none; }

/* The toolbar wraps (the method switch moves to its own line) when large text does not fit it on one. */
#main .practice-toolbar { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
#main .practice-toolbar > div { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
#main .practice-toolbar strong { font-size: .875rem; white-space: nowrap; }
#main .practice-switch { gap: 0 !important; flex-wrap: nowrap !important; }
#main .practice-switch button { border-radius: 0; font-size: .875rem; }
#main .practice-switch button:first-child { border-radius: 8px 0 0 8px; }
#main .practice-switch button:last-child { border-radius: 0 8px 8px 0; }
/* The line under the question: what the link named that this quiz does not have, what a one-off round is, and what
   happens to the visitor's own set. Under the question, so it never pushes the question down. */
#main .practice-context { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; margin: 10px 0 0; padding: 2px 0 2px 12px; border-left: 3px solid #315e4c; }
#main .practice-context-text { margin: 0; flex: 1 1 15rem; font-size: .875rem; color: #3f463f; }
#main .practice-context-actions { display: flex; flex-wrap: wrap; gap: 8px; }
#main .practice-context button { font-size: .875rem; }
/* What lies under the question stays hidden until the page script has drawn the question, so that a taller saved state
   (a result, a comparison, the matching game, a waiting setting) cannot move it. */
html.practice-js:not(.practice-ready) #main .practice-tool > :not(.practice-toolbar):not(.practice-stage),
html.practice-js:not(.practice-ready) #main .practice-side,
html.practice-js:not(.practice-ready) #main .practice-page > :is(.practice-print-controls, .practice-faq, .practice-source) { visibility: hidden; }
#main .practice-stage { background: #fffefa; border: 1px solid #d9d8cd; border-radius: 16px; padding: 20px; min-height: 420px; box-shadow: 0 6px 20px #252c2705; scroll-margin-top: 8px; }
#main .practice-progress { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 4px; font-size: .875rem; color: #50574f; }
#main .practice-stage progress { width: 100%; height: 5px; accent-color: #315e4c; display: block; margin-bottom: 8px; }
#main .practice-prompt-label { margin: 8px 0 0; text-align: center; font-size: .875rem; font-weight: 400; color: #50574f; letter-spacing: 0; }
#main .practice-prompt-note { margin: 4px 0 0; text-align: center; font-size: .875rem; color: #50574f; }
#main .practice-prompt { height: 140px; display: flex; align-items: center; justify-content: center; gap: 2px; margin: 2px 0; }
#main .practice-prompt.is-word > span:not(.visually-hidden) { flex: 0 1 72px; min-width: 0; }
#main .practice-prompt.is-word { font-size: 1rem; line-height: 1; }
#main .practice-prompt.is-word > span:not(.visually-hidden) { line-height: 0; }
#main .practice-prompt.is-word .glyph { display: block; }
#main .practice-prompt.is-word .glyph { width: 100%; height: auto; max-height: 90px; }
#main .practice-prompt.is-phrase { flex-wrap: wrap; align-content: center; gap: 4px; }
#main .practice-prompt.is-phrase > span:not(.visually-hidden) { flex: 0 0 40px; }
#main .practice-prompt.is-phrase { height: auto; min-height: 140px; padding: 8px 0; }
#main .practice-page .glyph { width: 130px; height: 130px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
#main .practice-page .glyph .mark { stroke-width: 3; }
#main .practice-page .glyph-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
#main .practice-choices { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
#main .practice-choices button { min-height: 56px; font-size: 1.25rem; font-weight: 600; position: relative; }
#main .practice-choices small { position: absolute; left: 10px; top: 8px; font-size: .6875rem; font-weight: 400; color: #656e65; }
#main .practice-type { margin-top: 4px; }
#main .practice-type-label { display: block; font-size: .875rem; color: #3f463f; margin: 0 0 4px; }
#main .practice-type-row { display: flex; gap: 8px; }
#main .practice-type input { min-width: 0; width: 100%; min-height: 48px; padding: 8px 12px; font-size: 1.25rem; }
#main .practice-input-status { min-height: 0; margin: 6px 0 0; font-size: .875rem; color: #3f463f; text-align: center; }
#main .practice-input-status:empty { display: none; }
#main .practice-help { display: flex; gap: 8px; margin-top: 12px; align-items: center; justify-content: center; }
#main .practice-help button { font-size: .875rem; }
/* After an answer: buttons share a row at equal height, and wrap two to a row on narrow screens. */
#main .practice-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; justify-content: center; align-items: stretch; }
#main .practice-actions button { flex: 1 1 8.5rem; max-width: 16rem; font-size: .875rem; }
#main .practice-feedback { min-height: 24px; text-align: center; color: #315e4c; margin: 10px 0 0; font-size: .9375rem; overflow-wrap: anywhere; }
#main .practice-feedback.is-miss { color: #a43721; }
#main .practice-feedback.is-shown { color: #252c27; font-size: 1.125rem; font-weight: 600; }
#main .practice-compare { display: flex; justify-content: center; gap: 14px; margin: 8px 0 0; }
#main .practice-compare figure { text-align: center; margin: 0; min-width: 0; }
#main .practice-compare .glyph { width: 88px; height: 88px; }
#main .practice-compare figcaption { font-size: .875rem; }
#main .practice-compare figure { padding: 4px 12px 8px; border: 2px solid transparent; border-radius: 10px; }
#main .practice-compare figure.is-answer { border-color: #315e4c; }
#main .practice-compare figure.is-chosen { border-color: #d9d8cd; }
#main .practice-compare figcaption strong { display: block; font-size: .75rem; letter-spacing: .03em; }
#main .practice-compare .is-answer strong { color: #315e4c; }
#main .practice-compare .is-chosen strong { color: #a43721; }
#main .practice-explanation { color: #252c27; text-align: left; font-size: .875rem; line-height: 1.5; }
#main .practice-strokes-link { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; }
#main .practice-empty h2 { font-size: 1.375rem; margin: 0 0 8px; }
#main .practice-empty p { font-size: .9375rem; }
#main .practice-round-options { display: flex; gap: 8px 12px; flex-wrap: wrap; margin: 14px 0 0; align-items: end; }
#main .practice-round-options label { font-size: .8125rem; display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 112px; }
#main .practice-round-options label:first-child { flex: 2; min-width: 170px; }
#main .practice-round-options select { width: 100%; padding: 6px; }
#main .practice-round-options button { font-size: .875rem; }
#main .practice-pending { flex-basis: 100%; margin: 0; font-size: .8125rem; color: #3f463f; }
#main .practice-shortcuts { font-size: .75rem; color: #5e645b; margin: 10px 0; }
#main .practice-study { background: #eeefe7; border-radius: 10px; padding: 4px 12px; }
#main .practice-study summary { display: list-item; padding: 10px 0; cursor: pointer; font-size: .9375rem; }
#main .practice-study-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px; padding: 8px 0; }
#main .practice-study-grid > div { text-align: center; font-size: .875rem; }
#main .practice-study-grid .glyph { width: 100%; height: 44px; }
#main .practice-side-note { margin: 24px 0; font-size: .9375rem; }
#main .practice-side-note h2 { font-size: 1.125rem; }
#main .practice-links { display: flex; flex-wrap: wrap; gap: 4px; border: 0; margin: 0; }
#main .practice-links a { min-height: 44px; display: inline-flex; align-items: center; padding: 6px 10px; }
#main .practice-score { font-size: 3rem; color: #315e4c; margin: 18px 0 0; font-weight: 700; line-height: 1.1; }
#main .practice-summary h2 { font-size: 1.5rem; margin: 8px 0; }
#main .practice-summary h3 { font-size: 1.125rem; margin: 16px 0 6px; }
#main .practice-summary-details { margin: 8px 0; padding-left: 20px; }
#main .practice-summary-details li { margin: 2px 0; }
#main .practice-summary-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0; }
#main .practice-summary-actions a { min-height: 44px; display: inline-flex; align-items: center; }
#main .practice-missed-hint { margin: 0 0 8px; font-size: .875rem; color: #50574f; }
#main .practice-missed { display: flex; flex-wrap: wrap; gap: 8px; }
#main .practice-missed a { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 12px; border: 1px solid #c7c7bb; border-radius: 8px; }
#main .practice-picker { box-sizing: border-box; width: min(640px, calc(100% - 24px)); max-width: none; max-height: calc(100dvh - 24px); padding: 18px; border: 1px solid #c7c7bb; border-radius: 16px; color: #252c27; background: #fffefa; }
#main .practice-picker::backdrop { background: #252c2766; }
#main .practice-picker[open] { display: flex; flex-direction: column; }
#main .practice-picker-body { overflow-y: auto; min-height: 0; padding: 0 4px; }
#main .practice-picker header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#main .practice-picker h2 { font-size: 1.375rem; margin: 0; }
#main .practice-picker [data-picker-close] { min-width: 44px; flex-shrink: 0; }
#main .practice-picker label { display: flex; align-items: center; gap: 10px; }
#main .practice-picker select { min-width: 0; width: 100%; padding: 6px; }
#main .practice-picker-presets, #main .practice-look-sets { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
#main .practice-look-sets button { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.2; }
#main .practice-look-sets small { font-size: .75rem; }
#main .practice-picker details > summary { padding: 10px 0; cursor: pointer; }
#main .practice-picker-hint { margin: 0 0 8px; font-size: .8125rem; color: #3f463f; }
#main .practice-individuals { display: grid; grid-template-columns: repeat(auto-fit,minmax(52px,1fr)); gap: 6px; padding-bottom: 8px; }
#main .practice-individuals button { padding: 6px; font-size: .875rem; }
#main .practice-individuals .glyph { width: 44px; height: 44px; display: block; margin: auto; }
#main .practice-picker footer { flex-shrink: 0; padding: 14px 0 4px; background: #fffefa; }
#main .practice-picker footer button { width: 100%; }
#main .practice-picker footer button:not(:disabled) { background: #315e4c; border-color: #315e4c; color: #fff; font-weight: 600; }
#main .practice-print-controls, #main .practice-faq, #main .practice-static { margin-top: 36px; border-top: 1px solid #d9d8cd; padding-top: 20px; }
#main .practice-layout > .practice-static { margin-top: 0; border-top: 0; padding-top: 0; }
#main .practice-print-controls h2, #main .practice-faq h2, #main .practice-static h2 { font-size: 1.375rem; }
#main .practice-print-row { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; margin-bottom: 8px; }
#main .practice-print-row select { min-height: 44px; padding: 6px 8px; }
#main .practice-print-links { display: flex; flex-wrap: wrap; gap: 0 16px; }
#main .practice-print-controls a { display: inline-flex; align-items: center; min-height: 44px; }
#main .practice-faq details { border-bottom: 1px solid #d9d8cd; }
#main .practice-faq summary { padding: 12px 0; cursor: pointer; }
#main .practice-reference-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(110px,1fr)); gap: 10px; }
#main .practice-selfcheck { background: #fffefa; padding: 8px; border: 1px solid #d9d8cd; border-radius: 8px; margin: 0; }
#main .practice-selfcheck .glyph { width: 70px; height: 70px; display: block; margin: 0 auto; }
#main .practice-selfcheck summary { font-size: .75rem; text-align: center; cursor: pointer; }
#main .practice-selfcheck > p { font-size: 1.25rem; text-align: center; }
#main .practice-selfcheck a { display: inline-flex; min-height: 44px; align-items: center; font-size: .875rem; }
#main .practice-paper { display: none; }
#main .practice-source { font-size: .75rem; margin-top: 28px; line-height: 1.7; }
#main .practice-match-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
#main .practice-match-grid > div { display: grid; gap: 6px; }
#main .practice-stage > h2:not(.practice-prompt-label) { font-size: 1.375rem; margin: 0 0 8px; }
#main .practice-match-grid button { height: 52px; padding: 3px 8px; font-size: 1.125rem; }
#main .practice-match-grid .glyph { width: 44px; height: 44px; vertical-align: middle; }
#main .practice-page button[aria-pressed="true"], #main .practice-page button[aria-checked="true"] { font-weight: 700; border-width: 2px; }
@media (forced-colors: active) { #main .practice-page button:is([aria-pressed="true"],[aria-checked="true"]) { outline: 2px solid Highlight; outline-offset: -4px; } }
@media (max-width: 760px) {
  #main .practice-layout { display: block; }
  #main .practice-stage { padding: 14px; min-height: 408px; }
  #main .practice-side { margin-top: 18px; }
  #main .practice-side-note { display: none; }
  #main .practice-links { margin-top: 12px; }
  #main .practice-source { font-size: .8125rem; }
}
@media (max-width: 380px) {
  #main .practice-toolbar, #main .practice-toolbar > div { gap: 6px; }
  #main .practice-toolbar button { padding-inline: 10px; }
}
@media (max-width: 360px) {
  #main:has(.practice-page) { padding-top: 12px; }
  #main:has(> .page-tabs):has(.practice-page) { padding-top: 0; }
  #main:has(> .page-tabs) .practice-page h1 { font-size: 1.375rem; }
  #main:has(> .page-tabs) .practice-heading { margin-bottom: 6px; }
  #main .practice-heading { margin-bottom: 10px; }
  #main .practice-heading > p { display: none; }
  #main .practice-toolbar { gap: 4px; margin-bottom: 8px; }
  #main .practice-toolbar > div { gap: 4px; }
  #main .practice-toolbar strong { font-size: .75rem; }
  #main .practice-prompt { height: 96px; }
  #main .practice-prompt .glyph { width: 90px; height: 90px; }
  #main .practice-prompt.is-word .glyph { width: 100%; height: auto; }
  #main .practice-prompt.is-phrase > span:not(.visually-hidden) { flex-basis: 38px; }
  #main .practice-stage { min-height: 344px; padding: 12px; }
  #main .practice-choices button { min-height: 48px; }
}
/* Short screens (a phone held sideways, a laptop at 200% zoom): a compact heading, and the character beside its
   answers, so that the question and every answer fit on the first screen. */
@media (orientation: landscape) and (max-height: 520px) {
  #main:has(.practice-page) { padding-top: 8px; }
  #main:has(> .page-tabs):has(.practice-page) { padding-top: 0; }
  #main .practice-heading { margin-bottom: 6px; }
  #main .practice-heading > p { display: none; }
  #main .practice-page h1 { font-size: 1.375rem; }
  #main .practice-toolbar { margin-bottom: 6px; }
  #main .practice-context { margin-top: 6px; }
  #main .practice-stage { min-height: 206px; padding: 8px 14px; }
  #main .practice-progress { margin-bottom: 0; }
  #main .practice-stage progress { margin-bottom: 4px; }
  #main .practice-q { display: grid; grid-template-columns: minmax(104px, 30%) minmax(0, 1fr); gap: 4px 16px; align-items: start; }
  #main .practice-q-prompt .practice-prompt-label { margin-top: 0; }
  #main .practice-prompt { height: 104px; }
  #main .practice-prompt .glyph { width: 100px; height: 100px; }
  #main .practice-prompt.is-word .glyph { width: 100%; height: auto; max-height: 64px; }
  #main .practice-prompt.is-phrase { min-height: 104px; }
  /* A word or phrase reads across the box, above its typing field (a long phrase on one line). */
  #main .practice-q.is-word { display: block; }
  #main .practice-q.is-word .practice-prompt { height: auto; min-height: 0; padding: 2px 0; }
  #main .practice-q.is-word .practice-prompt.is-phrase > span:not(.visually-hidden) { flex-basis: 34px; }
  #main .practice-q.is-word .practice-prompt-note { margin-top: 0; }
  #main .practice-choices button { min-height: 48px; }
  #main .practice-help, #main .practice-actions { margin-top: 8px; }
  #main .practice-feedback { margin-top: 6px; }
}
@media (hover: none) and (pointer: coarse) { #main .practice-shortcuts { display: none; } }
@media (prefers-reduced-motion: reduce) { #main .practice-page * { scroll-behavior: auto; } }
/* Very short windows (400% zoom): the whole picker scrolls, so its list is not squeezed between header and footer. */
@media (max-height: 420px) {
  #main .practice-picker[open] { display: block; overflow-y: auto; }
  #main .practice-picker-body { overflow: visible; }
}
@media print {
  /* The paper comes from the page's first script (US Letter or A4, with these margins); without JavaScript the
     browser's print dialog chooses it. */
  @page { margin: 15mm; }
  :root:has(.practice-page), :root:has(.practice-page) body { background: #fff !important; }
  /* The test prints from the page itself; prototype mode's brief tab prints the brief. */
  :root:has(#main > [data-view-panel="preview"]:not([hidden]) .practice-page) body > :is(header, footer, .prototype-banner, .skip-link) { display: none !important; }
  #main:has(> [data-view-panel="preview"]:not([hidden]) .practice-page) { padding: 0; margin: 0; max-width: none; width: 100%; }
  #main:has(> [data-view-panel="preview"]:not([hidden]) .practice-page) > :not([data-view-panel="preview"]) { display: none !important; }
  #main .practice-page > :not(.practice-paper):not(.glyph-defs) { display: none !important; }
  #main .practice-paper { display: block !important; color: #000; }
  #main .practice-paper-sheet { width: 100%; border-collapse: collapse; font-size: 11pt; }
  #main .practice-paper-sheet td { padding: 0; border: 0; }
  #main .practice-paper h2 { margin: 0 0 8px; font-size: 18pt; }
  #main .practice-paper-head { padding-bottom: 6px; }
  #main .practice-paper-head p { margin: 0 0 6px; }
  #main .practice-paper ol { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 8px 24px; padding-left: 24px; margin: 0; }
  #main .practice-paper li { break-inside: avoid; margin: 0; }
  #main .practice-paper .glyph { width: 44px; height: 44px; display: block; }
  #main .paper-line { display: block; border-bottom: 1px solid #777; height: 14px; margin-bottom: 4px; }
  #main .practice-paper-key { break-before: page; }
  #main .practice-paper-key ol { font-size: 10pt; margin-bottom: 12px; }
  #main .practice-paper-source { font-size: 8pt; margin: 8px 0 0; }
}

#main .practice-missed-guides{margin:12px 0;padding:8px 12px}#main .practice-missed-guides>summary{min-height:44px;display:flex;align-items:center}#main .practice-missed-guides a{min-height:44px;display:inline-flex;align-items:center}