/* Layout and values measured in the logged-in HanziHero lesson/review UI.
   Source classes and measurements: design/hanzihero-app/grammar-experience-reference.json.
   Sentence sizing and tap choices adapt the reference to Japanese grammar. */
body:is([data-screen="grammar-lesson"],[data-screen="grammar-practice"],[data-screen="grammar-offer"]) .app-shell{max-width:none;padding:0;border:0}
body:is([data-screen="grammar-lesson"],[data-screen="grammar-practice"],[data-screen="grammar-offer"]) .app-header{display:none}
body:is([data-screen="grammar-lesson"],[data-screen="grammar-practice"],[data-screen="grammar-offer"]) main{padding:0 0 32px}
.hh-hero{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:240px;padding:60px 16px 24px;background:linear-gradient(to bottom,var(--teal),var(--pink-dark));color:var(--white);border-radius:0;text-align:center}
.hh-toolbar{position:absolute;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;font:500 13px/24px Inter,Arial,sans-serif;color:var(--white)}
.hh-toolbar button{display:flex;align-items:center;justify-content:center;width:40px;min-height:40px;padding:8px;border:0;border-radius:0;background:transparent;color:var(--white);box-shadow:none}
.hh-toolbar button:active:not(:disabled){background:transparent;color:var(--white)}.hh-toolbar button:focus-visible{outline:2px solid var(--white);outline-offset:-2px}
.hh-hero .hh-romaji{font:400 20px/28px Inter,Arial,sans-serif;margin:0 0 8px;color:var(--white)}
.hh-hero .hh-pattern{font:400 72px/1.1 var(--jp);margin:0;overflow-wrap:anywhere;max-width:100%}.hh-hero .hh-pattern.long-pattern{font-size:36px;line-height:1.4}
.hh-lesson .hh-hero{container-type:inline-size}
.hh-hero .hh-lesson-pattern{width:100%;overflow-wrap:normal;word-break:normal}
.hh-pattern-main,.hh-pattern-reading{display:flex;justify-content:center;flex-wrap:wrap;column-gap:.25em;max-width:100%;font-size:clamp(16px,calc(100cqi / var(--hh-pattern-width)),var(--hh-pattern-max));line-height:1.2}
.hh-pattern-main{--hh-pattern-max:72px;font-size:clamp(24px,calc(100cqi / var(--hh-pattern-width)),var(--hh-pattern-max))}.long-pattern .hh-pattern-main{--hh-pattern-max:36px}
.hh-pattern-unit{white-space:nowrap}
.hh-pattern-reading{--hh-pattern-max:24px;margin-top:8px;line-height:1.5}
.hh-hero .hh-meaning{font:600 17px/2 var(--my);max-width:650px;margin:14px 0 0;color:var(--white);text-wrap:balance}
.hh-section-tabs{display:flex;align-items:center;justify-content:center;gap:8px;min-height:64px;margin:0;padding:0 12px;background:#1e293b;color:var(--white)}
.hh-section-tabs button{position:relative;flex:1;max-width:150px;min-height:32px;padding:4px 8px;border:0;border-radius:8px;background:transparent;color:var(--white);font:400 12px/24px var(--my);white-space:nowrap;box-shadow:none}
.hh-section-tabs button[aria-selected="true"]{background:#334155}
.hh-section-tabs button[aria-selected="true"]::after{content:'';position:absolute;left:50%;transform:translateX(-50%);top:calc(100% + 8px);border-left:12px solid transparent;border-right:12px solid transparent;border-bottom:12px solid var(--white)}
.hh-section-tabs button:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.hh-lesson-pane{max-width:650px;margin:12px auto 0;padding:16px 16px 24px;background:var(--white);color:var(--slate-text)}
.hh-lesson-pane h2{font:400 22px/1.8 var(--my);margin:0 0 16px;padding-bottom:8px;border-bottom:1px solid var(--control-border);color:var(--slate-text)}
.hh-lesson-pane>p{font-size:15px;line-height:2.2}.hh-lesson-pane .words{padding:0}.hh-lesson-pane .word{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:16px 0;gap:16px;font-size:14px}.hh-lesson-pane .word:first-child{border-top:0}.hh-lesson-pane .word>.jp{font-size:22px;line-height:1.8;overflow-wrap:anywhere}
/* Grammar forms use the app's existing blue component boxes and shared tokens. */
.hh-lesson-pane .hh-usage{border:1px solid var(--control-border);border-radius:var(--panel-radius);overflow:hidden}
.hh-lesson-pane .hh-usage-rule{grid-template-columns:minmax(0,.9fr) 14px minmax(0,1.25fr);align-items:center;gap:10px;padding:16px 12px}
.hh-usage-form{min-width:0;text-align:center}
.hh-lesson-pane .component .hh-form-box{display:block;width:100%;padding:8px 10px;font:600 14px/1.9 var(--my);overflow-wrap:anywhere}
.hh-form-box s{text-decoration-thickness:2px}
.hh-lesson-pane .hh-usage-plus{margin:0;font:400 20px/1 Inter,Arial,sans-serif;text-align:center}
.hh-lesson-pane .hh-usage-ending{color:var(--ink);font-size:20px;font-weight:500;line-height:1.9}
.hh-lesson-pane .hh-usage-note{display:block;padding:16px;font-size:15px;line-height:2}
.hh-lesson-pane:has(.hh-usage) .hh-pane-controls{border-top:1px solid var(--panel-line);margin-top:20px;padding-top:8px}
@media(min-width:640px){.hh-lesson-pane .hh-usage-rule{padding:20px;gap:16px;grid-template-columns:minmax(0,1fr) 20px minmax(0,1.25fr)}.hh-lesson-pane .component .hh-form-box{padding:10px 12px;font-size:16px}.hh-lesson-pane .hh-usage-ending{font-size:24px}}
@media(max-width:350px){.hh-lesson-pane .hh-usage-rule{padding:14px 10px;gap:8px}.hh-lesson-pane .component .hh-form-box{padding:8px;font-size:13px}.hh-lesson-pane .hh-usage-ending{font-size:18px}}
.hh-example{padding:18px 0;border-bottom:1px solid var(--panel-line)}.hh-example:first-of-type{padding-top:0}.hh-example>.jp{font-size:23px;line-height:1.9;overflow-wrap:anywhere;color:var(--slate-text)}.hh-example .grammar-translation{font-size:14px;line-height:2.1;margin-top:10px;color:var(--slate-text)}.hh-example .grammar-note{margin-top:12px}.hh-example .grammar-note summary{color:var(--muted)}
.hh-pane-controls{display:flex;justify-content:space-between;gap:12px;margin-top:24px}.hh-pane-controls button{display:flex;align-items:center;gap:8px;flex:0 1 auto;font-size:13px;border:0;border-radius:0;background:none;box-shadow:none;padding:8px 0;color:var(--muted)}.hh-pane-controls button:only-child{margin-left:auto}
.hh-question{max-width:900px;font:400 28px/1.7 var(--jp);overflow-wrap:anywhere;word-break:normal;margin:8px 0;color:var(--white)}
.hh-review-hero .grammar-question{padding:0;margin:0;max-width:900px;border:0;background:none}.hh-review-hero .grammar-question>.jp{font-size:28px;line-height:1.7;color:var(--white)}
.hh-task-band{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:4px;min-height:64px;padding:12px 16px;background:#1e293b;color:var(--white);text-align:center}
.hh-task-band p{color:var(--white);margin:0}.hh-task-label{font-size:14px;line-height:2}.hh-task-band .hh-context{font-size:17px;line-height:2;max-width:65ch}
.hh-answer-area{margin:16px auto 0;padding:0 16px 24px}
.hh-answer-area .grammar-options{display:flex;flex-direction:column;gap:0;background:var(--white);border-radius:0;filter:drop-shadow(0 4px 3px rgb(0 0 0 / .07)) drop-shadow(0 2px 2px rgb(0 0 0 / .06))}
.hh-answer-area .grammar-option{position:relative;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;min-height:80px;padding:16px 40px;border:0;border-bottom:1px solid var(--panel-line);border-radius:0;background:var(--white);color:#334155;text-align:center;box-shadow:none;font-size:15px;line-height:2}
.hh-answer-area .grammar-option:last-child{border-bottom:0}.hh-answer-area .grammar-option>.jp{font-size:24px;line-height:32px;flex:0 1 auto}
.hh-choice-key{position:absolute;left:12px;font:400 12px/24px Inter,Arial,sans-serif;color:var(--muted)}
.hh-answer-area .grammar-option:disabled{background:var(--white);color:var(--muted)}.hh-answer-area .grammar-option.correct:disabled{border:0;border-bottom:1px solid var(--panel-line);padding:16px 40px;background:var(--white);color:var(--ink);font-weight:600;box-shadow:inset 0 -2px var(--ink)}.hh-answer-area .grammar-option.incorrect:disabled{border:0;border-bottom:1px solid var(--panel-line);padding:16px 40px;color:var(--pink-dark);background:var(--surface)}
.hh-answer-area .grammar-option-mark{position:absolute;right:12px;color:var(--ink)}.hh-answer-area .incorrect .grammar-option-mark{color:var(--pink-dark)}
.hh-answer-area .grammar-option:focus-visible{outline:2px solid var(--ink);outline-offset:-3px}.hh-answer-area .grammar-feedback{max-width:650px;padding:18px 0;border:0;border-top:1px solid var(--control-border);border-radius:0;background:none;margin:20px auto 16px}.hh-answer-area .grammar-feedback p{font-size:14px;line-height:2.1}.hh-answer-area>.primary-button{width:100%;max-width:650px;display:block;margin-left:auto;margin-right:auto;min-height:56px;font-size:17px}.hh-answer-area>.grammar-note{max-width:650px;margin-left:auto;margin-right:auto}.hh-answer-area .grammar-note summary{color:var(--muted)}
.hh-keyboard-help{display:none;font:400 12px/24px Inter,var(--my),sans-serif;color:var(--muted);text-align:center;margin:16px 0 0}
.hh-result .hh-hero .hh-pattern{font:500 64px/1.2 Inter,Arial,sans-serif}.hh-result .actions button{font-size:16px}
@media(min-width:640px){.hh-hero{min-height:288px;padding-top:56px}.hh-hero .hh-pattern{font-size:144px}.hh-hero .hh-pattern.long-pattern{font-size:48px}.hh-hero .hh-meaning{font-size:22px}.hh-section-tabs{gap:40px}.hh-section-tabs button{font-size:14px;max-width:180px}.hh-lesson-pane{padding:24px 24px 32px}.hh-lesson-pane h2{font-size:24px;line-height:32px}.hh-question,.hh-review-hero .grammar-question>.jp{font-size:36px;line-height:1.65}.hh-task-band{min-height:96px}.hh-task-label{font-size:18px}.hh-task-band .hh-context{font-size:22px}.hh-answer-area{padding:0 16px 32px}.hh-keyboard-help{display:block}.hh-result .hh-hero .hh-pattern{font-size:96px}}
@media(min-width:640px){.hh-pattern-main{--hh-pattern-max:144px}.long-pattern .hh-pattern-main{--hh-pattern-max:48px}.hh-pattern-reading{--hh-pattern-max:28px}}
@media(max-width:350px){.hh-section-tabs{gap:4px;padding:0 8px}.hh-section-tabs button{padding:4px 6px;font-size:11px}.hh-question,.hh-review-hero .grammar-question>.jp{font-size:25px}.hh-hero .hh-meaning{font-size:15px}.hh-lesson-pane{padding:16px 14px 24px}}
/* Three tap choices adapt the reference's full-width, square answer field. */
@media(min-width:640px){.hh-answer-area .grammar-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.hh-answer-area .grammar-option{border-bottom:0;border-right:1px solid var(--panel-line)}.hh-answer-area .grammar-option:last-child{border-right:0}.hh-answer-area .grammar-option.correct:disabled,.hh-answer-area .grammar-option.incorrect:disabled{border-bottom:0;border-right:1px solid var(--panel-line)}.hh-answer-area .grammar-option.correct:last-child:disabled,.hh-answer-area .grammar-option.incorrect:last-child:disabled{border-right:0}}

/* Phone practice keeps the sentence, answers and next action within reach.
   Controls retain the existing square answer field and shared app tokens. */
body[data-screen="grammar-practice"] main{padding-bottom:0}
.hh-review .hh-review-hero{min-height:164px;padding:56px 16px 24px}
.hh-review .grammar-question>.jp{font-size:26px;line-height:1.7}
.hh-review .hh-task-band{min-height:56px;padding:8px 16px}
.hh-review .hh-task-label{font-size:13px}
.hh-review .hh-context{font-size:16px;line-height:1.9}
.hh-review .hh-answer-area{max-width:900px;padding:0 16px 24px}
.hh-review .grammar-options{filter:none;border:1px solid var(--control-border);box-shadow:var(--shadow)}
.hh-review .grammar-option{min-height:64px;padding:12px 40px;font-size:14px;line-height:1.9;transition:background-color 100ms ease,color 100ms ease,transform 90ms ease}
.hh-review .grammar-option.correct:disabled,.hh-review .grammar-option.incorrect:disabled{padding:12px 40px}
.hh-review .grammar-option.correct:disabled{background:var(--surface)}
.hh-review .grammar-option:active:not(:disabled){background:var(--surface);color:var(--ink);transform:scale(.99)}
.hh-review .grammar-option-mark{display:flex;align-items:center;justify-content:center}
.hh-review .grammar-option-mark .ui-icon{width:20px;height:20px}
.hh-review .grammar-feedback{padding:16px 0 0;margin:16px auto 0}
.hh-review .grammar-feedback .hh-result-label{display:flex;align-items:center;gap:8px;font-size:15px;line-height:2}
.hh-review .is-incorrect .hh-result-label{color:var(--pink-dark)}
.hh-review .grammar-feedback .hh-source-sentence{font-size:20px;line-height:1.8;margin-top:8px;color:var(--ink)}
.hh-review .hh-answer-token{font:500 20px/1.3 var(--jp);padding:2px 4px}
.hh-review .grammar-feedback p{margin-top:8px}
.hh-review .grammar-note{border-top:1px solid var(--panel-line);margin-top:12px}
.hh-review .grammar-note summary{cursor:pointer;min-height:44px;padding:8px 0;font-size:13px;line-height:2}
.hh-review .hh-detail-body{padding-bottom:8px}
.hh-review .hh-filled-answer{font-weight:500;border-bottom:2px solid var(--white)}
.hh-review.has-feedback .hh-answer-area{padding-bottom:calc(100px + var(--app-bottom-inset))}
.hh-practice-footer{position:fixed;z-index:15;bottom:0;left:0;right:0;background:var(--white);border-top:1px solid var(--control-border);padding:12px 16px calc(12px + var(--app-bottom-inset))}
.hh-practice-footer>div{max-width:650px;margin:0 auto}
.hh-practice-footer .primary-button{display:block;width:100%;min-height:52px;font-size:17px}
@media(hover:hover){.hh-review .grammar-option:hover:not(:disabled){background:var(--surface)}}
@media(min-width:640px){.hh-review .hh-review-hero{min-height:224px}.hh-review .grammar-question>.jp{font-size:34px}.hh-review .hh-task-band{min-height:72px}.hh-review .hh-task-label{font-size:16px}.hh-review .hh-context{font-size:19px}.hh-review .grammar-option{min-height:80px;font-size:15px}}
@media(max-width:350px){.hh-review .grammar-question>.jp{font-size:23px}.hh-review .grammar-option{padding:12px 34px}.hh-review .grammar-option.correct:disabled,.hh-review .grammar-option.incorrect:disabled{padding:12px 34px}.hh-review .grammar-feedback .hh-source-sentence{font-size:18px}.hh-review .hh-answer-token{font-size:18px}}
@media(max-height:600px) and (max-width:639px){.hh-review .hh-review-hero{min-height:144px;padding-bottom:20px}}

@keyframes hh-reveal{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes hh-mark{from{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}
.hh-review.enter-question .grammar-question,.hh-review.enter-question .grammar-options{animation:hh-reveal 160ms ease-out both}
.hh-review .grammar-feedback,.hh-practice-footer,.hh-review details[open] .hh-detail-body{animation:hh-reveal 160ms ease-out both}
.hh-review .grammar-option-mark,.hh-review .hh-filled-answer{animation:hh-mark 140ms ease-out both}
@media(prefers-reduced-motion:reduce){.hh-review.enter-question .grammar-question,.hh-review.enter-question .grammar-options,.hh-review .grammar-feedback,.hh-practice-footer,.hh-review details[open] .hh-detail-body,.hh-review .grammar-option-mark,.hh-review .hh-filled-answer{animation:none}.hh-review .grammar-option{transition:none}.hh-review .grammar-option:active:not(:disabled){transform:none}}

.hh-toolbar.hh-practice-toolbar{gap:8px;font-size:11px}
.hh-practice-toolbar>span:last-child{margin-left:auto;white-space:nowrap}
.hh-toolbar .hh-furigana-toggle{width:auto;min-height:40px;padding:6px 8px;border:1px solid var(--white);border-radius:var(--button-radius);font:500 12px/20px Inter,Arial,sans-serif;transition:background-color 100ms ease,color 100ms ease}
.hh-toolbar .hh-furigana-toggle[aria-pressed="true"]{background:var(--white);color:var(--pink-dark)}
.hh-toolbar .hh-furigana-toggle:focus-visible{outline:2px solid var(--white);outline-offset:3px}
.hh-review ruby{ruby-align:center;ruby-position:over}
.hh-review rt{font:400 10px/1.4 var(--jp);color:var(--muted);opacity:1;transition:opacity 120ms ease}
.hh-review-hero rt,.hh-answer-token rt{color:var(--white)}
body[data-furigana="off"] .hh-review rt{opacity:0}
.hh-review-hero .hh-furigana-pending{font:400 11px/2 var(--my);color:var(--white);margin-top:8px}
@media(min-width:640px){.hh-toolbar.hh-practice-toolbar{font-size:13px}.hh-review .hh-question rt{font-size:12px}}
@media(prefers-reduced-motion:reduce){.hh-toolbar .hh-furigana-toggle,.hh-review rt{transition:none}}