@import './tokens.css';
@import './fonts.css';
@import './components.css';
/* App adapters for the supplied Mova components. Learning selectors stay stable. */
html {
  scroll-padding-top:100px;
  scroll-padding-bottom:24px;
  overflow-anchor:none
}
body {
  min-width:0
}
button {
  border:0
}
button:disabled {
  cursor:default
}
a {
  color:inherit
}
h1 {
  font-size:40px;
  line-height:1.12;
  font-weight:800;
  letter-spacing:-.03em
}
h2 {
  font-size:28px;
  line-height:1.25;
  font-weight:800;
  letter-spacing:-.02em
}
h3 {
  font-size:18px;
  font-weight:800
}
p {
  line-height:1.65
}
p+p {
  margin-top:12px
}
.uk,[lang="uk"] {
  font-family:var(--font-ua);
  font-weight:500;
  letter-spacing:0
}
.muted,.small-text,.under-card {
  color:var(--text-2)
}
.small-text {
  font-size:13px
}
.lead {
  font-size:18px;
  line-height:1.65
}
.eyebrow {
  margin-bottom:12px
}
.panel {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-2xl);
  box-shadow:var(--shadow);
  padding:28px;
  min-width:0
}
.topbar {
  height:80px
}
.topbar .nav {
  display:flex;
  margin-left:auto
}
.nav-link {
  white-space:nowrap
}
.tabbar {
  grid-template-columns:repeat(5,minmax(0,1fr))
}
.theme-toggle button {
  width:44px;
  height:44px
}
.logo .word {
  font-size:26px
}
.site-footer {
  max-width:1020px;
  margin:0 auto;
  padding:24px 0 36px;
  border-top:1px solid var(--line);
  display:flex;
  gap:20px;
  justify-content:space-between;
  font-size:12px;
  color:var(--text-2)
}
.button,.text-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:12px 22px;
  border-radius:var(--r-lg);
  border:1px solid transparent;
  font-weight:700;
  font-size:16px;
  line-height:1.35;
  text-decoration:none;
  transition:background-color .15s
}
.button.primary {
  background:var(--blue);
  color:var(--on-blue)
}
.button.primary:hover {
  background:var(--blue-hover)
}
.button.secondary {
  background:var(--surface);
  color:var(--text);
  border-color:var(--line-strong)
}
.button.secondary:hover,.button.quiet:hover,.text-link:hover {
  background:var(--surface-2)
}
.button.quiet,.text-link {
  background:transparent;
  color:var(--text);
  padding-inline:12px
}
.button.small,.text-link {
  min-height:44px;
  padding:10px 14px;
  font-size:14px
}
.button:disabled {
  opacity:.5
}
.button.full {
  width:100%
}
.icon-button {
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:transparent;
  color:var(--text)
}
.icon-button:hover {
  background:var(--surface-2)
}
.pill {
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:4px 11px;
  border-radius:var(--r-pill);
  background:var(--yellow);
  color:var(--on-yellow);
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
  line-height:1.4;
  max-width:100%
}
.pill.soft {
  background:var(--blue-soft);
  color:var(--text)
}
fieldset {
  padding:0;
  border:0;
  margin:0;
  min-width:0
}
legend {
  padding:0;
  margin-bottom:12px
}
.field-label {
  display:block;
  font-size:14px;
  font-weight:700;
  margin:20px 0 10px
}
input[type="search"],select {
  width:100%;
  min-height:52px;
  padding:12px 14px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-md);
  background:var(--surface);
  color:var(--text);
  font-size:16px
}
input::placeholder {
  color:var(--text-2)
}
select {
  appearance:none;
  -webkit-appearance:none;
  padding-right:36px;
  background-image:url('../assets/select-arrow.svg');
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:16px
}
.home-hero {
  display:flex;
  flex-direction:column;
  gap:32px
}
.hero-copy {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px
}
.hero-copy h1 {
  font-size:52px;
  line-height:1.1
}
.hero-copy .lead {
  max-width:650px
}
.session-setup {
  padding:28px
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:22px
}
.section-heading h2 {
  font-size:28px
}
.topic-choices {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px
}
.length-field {
  margin:24px 0
}
.length-options {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px
}
.length-choice small {
  font-size:12px
}
.setup-actions {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:24px
}
.setup-actions .primary {
  min-width:240px;
  margin-left:auto
}
.stat-strip {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  padding:0 0 28px;
  border-bottom:1px solid var(--line)
}
.stat-strip>div {
  display:flex;
  flex-direction:column;
  gap:4px
}
.stat-strip strong {
  font-size:34px;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.2
}
.stat-strip span {
  font-size:13px;
  color:var(--text-2)
}
.stat-strip .streak-stat {
  flex-direction:row;
  align-items:center;
  gap:14px
}
.streak-stat>div {
  display:flex;
  flex-direction:column
}
.stat-icon {
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:none;
  background:var(--yellow);
  color:var(--on-yellow)!important;
  border-radius:var(--r-md)
}
.learning-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px
}
.learning-card {
  padding:20px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  gap:10px;
  color:var(--text);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-2xl);
  min-width:0
}
.learning-card:hover {
  border-color:var(--blue)
}
.learning-card p {
  font-size:14px;
  color:var(--text-2)
}
.step-number {
  font-size:12px;
  font-weight:800;
  border:1px solid var(--line-strong);
  border-radius:6px;
  min-width:24px;
  height:24px;
  display:inline-flex;
  align-items:center;
  justify-content:center
}
.card-example {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:baseline;
  border-top:1px solid var(--line);
  padding-top:12px;
  margin-top:auto;
  width:100%
}
.card-example>.uk {
  font-size:19px
}
.card-example>span+span {
  font-size:13px;
  color:var(--text-2)
}
.path-note {
  font-size:13px;
  color:var(--text-2);
  margin-top:16px
}
.curriculum-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px
}
.curriculum-section>p {
  margin-bottom:20px;
  color:var(--text-2)
}
.curriculum-section .learning-card .text-link {
  padding-left:0
}
.vocabulary-promo {
  display:flex;
  gap:24px;
  align-items:center;
  justify-content:space-between
}
.vocabulary-promo h2 {
  margin:8px 0 12px
}
.vocabulary-promo p {
  color:var(--text-2)
}
.vocabulary-promo>.button {
  flex-shrink:0
}
.audio-note {
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:13px;
  line-height:1.65;
  color:var(--text-2);
  padding:8px 0
}
.audio-note .i {
  margin-top:2px
}
.audio-note.unavailable,.storage-warning {
  background:var(--yellow-soft);
  color:var(--text);
  padding:18px;
  border-radius:var(--r-xl)
}
.storage-warning {
  font-size:14px;
  line-height:1.6
}
.under-card {
  font-size:12px;
  line-height:1.6
}
.keyboard-tip {
  display:flex;
  align-items:center;
  gap:5px
}
kbd {
  font:700 12px var(--font-ui);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:24px;
  height:24px;
  border:1px solid var(--line-strong);
  border-radius:6px
}
.exercise-shell {
  width:100%;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:20px
}
.exercise-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-weight:700
}
.session-controls {
  display:flex;
  gap:8px
}
.progress-line {
  display:flex;
  justify-content:space-between;
  font-size:13px;
  color:var(--text-2);
  margin-top:-12px;
  margin-bottom:-12px
}
progress {
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  height:8px;
  border:0;
  border-radius:99px;
  background:var(--line);
  display:block;
  overflow:hidden
}
progress::-webkit-progress-bar {
  background:var(--line)
}
progress::-webkit-progress-value {
  background:var(--blue);
  border-radius:99px
}
progress::-moz-progress-bar {
  background:var(--blue);
  border-radius:99px
}
.question-card {
  padding:36px
}
.section-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:24px
}
.question-prompt {
  font-size:38px;
  line-height:1.3;
  letter-spacing:0;
  font-weight:800;
  white-space:pre-line;
  overflow-wrap:anywhere;
  margin-bottom:14px
}
.question-prompt:has(.uk) {
  font-size:48px;
  font-weight:600
}
.question-prompt .uk {
  font-weight:600
}
.question-instruction {
  font-size:18px;
  margin-bottom:20px
}
.sound-buttons {
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin:18px 0 24px
}
.answer-options {
  display:grid;
  gap:12px;
  margin:24px 0
}
.answers--grid {
  grid-template-columns:repeat(2,minmax(0,1fr))
}
.answer {
  font-size:21px;
  line-height:1.5;
  min-height:68px;
  flex-wrap:wrap
}
.answer>span:nth-child(2) {
  flex:1;
  min-width:0;
  overflow-wrap:anywhere
}
.answer-index {
  width:30px;
  height:30px;
  min-width:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  font:800 13px var(--font-ui);
  color:var(--text-2)
}
.answer-symbol {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:5px;
  font:800 12px var(--font-ui)
}
.answer.correct {
  border-color:var(--ok);
  background:var(--ok-soft);
  color:var(--text)
}
.answer.incorrect {
  border-color:var(--err);
  background:var(--err-soft);
  color:var(--text)
}
.answer.correct .answer-symbol {
  color:var(--ok)
}
.answer.incorrect .answer-symbol {
  color:var(--err)
}
.answer.is-dim {
  opacity:.5
}
.answer:disabled {
  cursor:default
}
.help-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:14px;
  color:var(--text-2)
}
.feedback {
  display:block;
  padding:22px;
  border-radius:var(--r-xl);
  margin:24px 0;
  line-height:1.7
}
.feedback.success {
  background:var(--ok-soft)
}
.feedback.error {
  background:var(--err-soft)
}
.feedback.help {
  background:var(--yellow-soft)
}
.feedback strong {
  font-size:18px;
  font-weight:800;
  display:block;
  margin-bottom:8px
}
.feedback p {
  font-size:16px
}
.feedback .small-text {
  font-size:13px;
  margin-top:14px
}
.feedback-heading {
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:14px
}
.feedback-heading strong {
  margin:0;
  flex:1
}
.feedback__icon {
  color:var(--surface);
  margin-top:2px
}
.feedback-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  margin-top:24px
}
.assessment:focus,.help-panel:focus,[data-detail-anchor]:focus,[data-question-anchor]:focus {
  outline:none
}
[data-question-anchor],[data-detail-anchor],.assessment,.help-panel {
  scroll-margin-top:100px
}
.session-goal,.vocabulary-note,.stem-focus,.study-feedback {
  padding:16px;
  background:var(--surface-2);
  border-radius:var(--r-md);
  font-size:14px;
  margin:20px 0
}
.lesson-card>.pill {
  margin-bottom:24px
}
.lesson-card h1 {
  font-size:28px
}
.lesson-row {
  padding:20px 0;
  border-bottom:1px solid var(--line)
}
.lesson-row .lesson-uk {
  font-size:28px;
  line-height:1.5
}
.lesson-row .sound-buttons {
  margin-bottom:0
}
.lesson-rows {
  margin-bottom:24px
}
.lesson-actions,.study-options {
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px
}
.subject-study {
  margin:24px 0
}
.subject-study h2 {
  font-size:22px
}
.curriculum-context {
  font-size:14px;
  color:var(--text-2);
  line-height:1.8
}
.stem-focus strong {
  font-size:26px
}
.listening-area {
  text-align:center;
  padding:20px 0
}
.listening-area p {
  font-size:14px;
  margin-top:28px
}
.listening-orb {
  margin:16px auto
}
.listening-area+.sound-buttons {
  justify-content:center
}
.session-bar__row {
  display:flex;
  align-items:center;
  gap:12px
}
.session-bar__row>span {
  flex:1;
  min-width:0;
  font-size:13px
}
.session-bar__row strong {
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.session-bar__row small {
  display:block;
  font-size:12px;
  color:var(--text-2)
}
.dialog-actions {
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:28px
}
dialog.sheet {
  text-align:center
}
dialog.sheet h2 {
  margin-bottom:16px
}
dialog.sheet p {
  margin-top:12px
}
dialog.sheet .completion-icon {
  margin-bottom:24px
}
.page-heading {
  max-width:820px
}
.page-heading h1 {
  margin-bottom:14px
}
.verb-layout {
  display:grid;
  grid-template-columns:250px minmax(0,1fr);
  gap:24px;
  align-items:start
}
.verb-browser {
  padding:20px
}
.verb-browser .field-label:first-child {
  margin-top:0
}
.verb-browser>.small-text {
  margin-top:16px
}
.verb-list {
  display:flex;
  flex-direction:column;
  gap:6px;
  margin-top:18px;
  max-height:650px;
  overflow:auto;
  overscroll-behavior:contain;
  padding:4px
}
.verb-list-item {
  width:100%;
  min-height:64px;
  padding:12px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  gap:4px;
  border-radius:10px;
  background:transparent;
  color:var(--text);
  text-align:left
}
.verb-list-item .uk {
  font-size:18px
}
.verb-list-item>span+span {
  font-size:12px;
  color:var(--text-2)
}
.verb-list-item:hover {
  background:var(--surface-2)
}
.verb-list-item.selected {
  background:var(--blue-soft);
  font-weight:700
}
.verb-detail {
  padding:28px
}
.verb-detail h2 {
  font-size:46px;
  line-height:1.3;
  margin:12px 0 6px;
  overflow-wrap:anywhere
}
.verb-detail h2 .uk {
  font-weight:600
}
.verb-meaning {
  font-size:20px;
  color:var(--text-2)
}
.stress-note {
  font-size:12px;
  color:var(--text-2);
  margin:14px 0
}
.conjugation-table {
  width:100%;
  border-collapse:collapse;
  margin:24px 0
}
.conjugation-table caption {
  text-align:left;
  font-size:12px;
  font-weight:800;
  padding-bottom:12px
}
.conjugation-table tr {
  border-bottom:1px solid var(--line)
}
.conjugation-table th {
  text-align:left;
  font-size:17px;
  font-weight:500;
  padding:12px 0
}
.conjugation-table th small {
  display:block;
  font:12px var(--font-ui);
  color:var(--text-2);
  margin-top:4px
}
.conjugation-table td {
  padding:10px 4px;
  font-size:22px
}
.conjugation-table td:last-child {
  text-align:right;
  width:44px
}
.conjugation-table td .uk {
  overflow-wrap:anywhere
}
.pattern-note {
  font-size:14px;
  line-height:1.7;
  margin:24px 0
}
.pattern-note p {
  margin-top:10px;
  color:var(--text-2)
}
.example-block {
  padding:24px;
  border-radius:var(--r-xl);
  background:var(--surface-2)
}
.example-block .example-uk {
  font-size:26px;
  margin:12px 0
}
.example-block .sound-buttons {
  margin-bottom:0
}
.verb-practice {
  margin-top:24px
}
.verb-practice .small-text {
  margin-bottom:16px
}
.mobile-back {
  display:none
}
.word-detail p {
  line-height:1.8
}
.summary {
  max-width:740px;
  width:100%;
  text-align:center;
  padding:40px;
  margin:0 auto
}
.completion-icon {
  width:72px;
  height:72px;
  background:var(--yellow);
  color:var(--on-yellow);
  border-radius:50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-bottom:24px
}
.completion-icon .i {
  width:32px;
  height:32px
}
.summary h1 {
  margin:12px 0 18px
}
.summary h2 {
  font-size:24px;
  margin-bottom:20px
}
.summary-metrics {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  padding:24px 0;
  margin:30px 0;
  border-block:1px solid var(--line)
}
.summary-metrics>div+div {
  border-left:1px solid var(--line)
}
.summary-metrics strong {
  font-size:34px;
  font-weight:800;
  display:block
}
.summary-metrics span {
  font-size:13px;
  color:var(--text-2)
}
.summary .feedback-actions {
  justify-content:center
}
.review-list {
  padding:0;
  margin:20px 0 24px;
  text-align:left
}
.review-list li {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  font-size:15px
}
.review-list strong {
  font-weight:600;
  min-width:0;
  overflow-wrap:anywhere
}
.review-list li>span {
  font-size:13px;
  color:var(--text-2);
  text-align:right
}
.review-list small {
  display:block;
  margin-top:6px
}
.empty-state {
  text-align:center;
  max-width:680px;
  margin:32px auto;
  padding:40px
}
.empty-state>.i {
  width:44px;
  height:44px;
  color:var(--blue);
  margin-bottom:24px
}
.empty-state h1 {
  margin-bottom:16px
}
.empty-state .button {
  margin-top:24px
}
.progress-stats {
  border:0;
  padding:0;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))
}
.progress-stats>div {
  padding:24px;
  border-radius:var(--r-2xl);
  border:1px solid var(--line);
  background:var(--surface)
}
.progress-stats .streak-card {
  background:var(--yellow);
  color:var(--on-yellow)
}
.streak-card span {
  color:var(--on-yellow)
}
.skill-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px
}
.skill-card h2 {
  font-size:34px;
  line-height:1.2;
  margin-bottom:16px
}
.skill-card h2>span {
  font-size:13px;
  color:var(--text-2);
  font-weight:500;
  display:block;
  margin-top:8px;
  letter-spacing:0
}
.skill-card p:last-child {
  font-size:13px;
  color:var(--text-2);
  margin-top:16px
}
.skill-card .eyebrow {
  letter-spacing:.07em
}
.skill-card meter {
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  height:8px;
  display:block;
  border:0;
  border-radius:99px;
  background:var(--line)
}
meter::-webkit-meter-bar {
  border:0;
  background:var(--line);
  height:8px
}
meter::-webkit-meter-optimum-value {
  background:var(--blue)
}
meter::-moz-meter-bar {
  background:var(--blue)
}
.progress-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px
}
.progress-grid h2 {
  font-size:24px;
  margin-bottom:16px
}
.progress-grid p {
  font-size:14px;
  color:var(--text-2)
}
.history-list li {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 0;
  border-bottom:1px solid var(--line)
}
.history-list strong {
  font-size:14px
}
.history-list small {
  display:block;
  font-size:12px;
  color:var(--text-2);
  margin-top:8px
}
.history-list .pill {
  background:var(--blue-soft);
  color:var(--text)
}
.curriculum-progress>p {
  margin:14px 0;
  font-size:14px;
  color:var(--text-2)
}
.curriculum-list li {
  border-bottom:1px solid var(--line);
  padding:12px 0
}
.curriculum-list button {
  text-align:left;
  padding-left:0
}
.curriculum-list span {
  display:block;
  font-size:13px;
  color:var(--text-2)
}
.method-note h2 {
  margin-bottom:16px
}
.method-note p {
  font-size:14px;
  color:var(--text-2)
}
.migration-note {
  padding:20px;
  border-radius:var(--r-xl);
  background:var(--yellow-soft);
  font-size:14px;
  line-height:1.7
}
.skip-link {
  position:fixed;
  top:-100px;
  left:16px;
  z-index:100;
  background:var(--blue);
  color:var(--on-blue);
  padding:14px 20px;
  border-radius:var(--r-lg);
  font-weight:700;
  text-decoration:none
}
.skip-link:focus {
  top:16px
}
@media(min-width:1100px) {
  .home-hero+.stat-strip {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
}
@media(min-width:761px) and (max-width:1000px) {
  .topbar {
    padding-inline:24px;
    gap:10px
  }
  .topbar .nav a {
    padding-inline:8px;
    font-size:13px;
    gap:6px
  }
  .topbar .nav .i {
    width:18px;
    height:18px
  }
  .topbar .theme-toggle button {
    width:38px
  }
  .site-footer {
    margin-inline:40px
  }
  .skill-card {
    padding:20px
  }
}
@media(max-width:760px) {
  html {
    scroll-padding-top:100px;
    scroll-padding-bottom:calc(100px + env(safe-area-inset-bottom))
  }
  .topbar {
    height:76px;
    padding:12px 16px
  }
  .logo .word {
    font-size:23px
  }
  .logo svg {
    width:30px;
    height:30px
  }
  .page {
    gap:24px
  }
  .page--exercise {
    padding-top:24px
  }
  .site-footer {
    margin:0 16px;
    padding-bottom:calc(110px + env(safe-area-inset-bottom));
    flex-wrap:wrap;
    gap:12px
  }
  .site-footer>span:nth-child(2) {
    display:none
  }
  .topbar .nav {
    display:grid;
    margin:0;
    gap:4px
  }
  .tabbar a {
    font-size:10px;
    min-width:0;
    padding:8px 2px;
    flex-direction:column;
    gap:4px
  }
  .hero-copy h1 {
    font-size:36px
  }
  .hero-copy .lead {
    font-size:16px
  }
  .home-hero {
    gap:24px
  }
  .panel,.session-setup {
    padding:20px
  }
  .section-heading {
    align-items:flex-start;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:20px
  }
  .section-heading h2 {
    font-size:24px
  }
  .section-heading>.small-text {
    font-size:12px
  }
  .topic-choices {
    grid-template-columns:1fr
  }
  .length-options {
    gap:8px
  }
  .length-choice {
    padding:14px 8px;
    gap:6px;
    flex-direction:column;
    align-items:flex-start
  }
  .length-choice .choice__dot {
    display:none
  }
  .length-choice strong {
    font-size:14px
  }
  .length-choice small {
    font-size:11px;
    line-height:1.7
  }
  .setup-actions {
    flex-direction:column;
    align-items:stretch;
    gap:16px
  }
  .setup-actions .primary {
    min-width:0;
    margin:0
  }
  .setup-actions>.small-text {
    order:2;
    text-align:center
  }
  .stat-strip {
    gap:10px;
    padding-bottom:24px
  }
  .stat-strip strong {
    font-size:26px
  }
  .stat-strip span {
    font-size:12px
  }
  .streak-stat .stat-icon {
    display:none
  }
  .learning-grid,.curriculum-grid {
    grid-template-columns:1fr
  }
  .learning-card {
    padding:20px
  }
  .learning-section .section-heading {
    margin-bottom:18px
  }
  .vocabulary-promo {
    display:block
  }
  .vocabulary-promo .button {
    margin-top:18px
  }
  .vocabulary-promo h2 {
    font-size:24px
  }
  .page-heading h1 {
    font-size:32px
  }
  .page-heading .lead {
    font-size:16px
  }
  .question-card {
    padding:20px
  }
  .question-prompt {
    font-size:30px;
    line-height:1.3
  }
  .question-prompt:has(.uk) {
    font-size:34px
  }
  .question-instruction {
    font-size:16px
  }
  .section-top {
    gap:10px;
    align-items:flex-start;
    flex-wrap:wrap
  }
  .section-top .pill {
    font-size:11px
  }
  .session-meta--desktop {
    display:none
  }
  .session-bar {
    position:sticky;
    top:0
  }
  .session-bar progress {
    height:6px
  }
  .session-bar .theme-toggle button {
    width:34px;
    height:44px
  }
  .is-in-session .site-footer {
    display:none
  }
  .has-action-bar .page--exercise {
    padding-bottom:calc(var(--action-height,100px) + 36px)
  }
  .feedback-actions.action-bar {
    margin:0;
    flex-wrap:nowrap;
    justify-content:stretch
  }
  .action-bar .button {
    flex:1;
    min-width:0;
    padding:12px 10px;
    font-size:14px;
    min-height:52px
  }
  .action-bar .primary {
    flex:1.4
  }
  .feedback {
    padding:18px
  }
  .feedback strong {
    font-size:17px
  }
  .feedback p {
    font-size:15px
  }
  .feedback-heading {
    gap:10px
  }
  .feedback__icon {
    width:28px;
    height:28px
  }
  .answer-options {
    gap:12px
  }
  .answer {
    padding:14px;
    gap:12px;
    font-size:21px
  }
  .answer-symbol {
    font-size:11px;
    max-width:90px;
    flex-wrap:wrap
  }
  .help-row {
    font-size:12px;
    align-items:flex-start;
    flex-wrap:wrap
  }
  .help-row .text-link {
    padding-inline:0
  }
  .answers--grid {
    grid-template-columns:1fr
  }
  .keyboard-tip {
    display:none
  }
  .sound-buttons {
    gap:4px
  }
  .sound-buttons .button {
    padding-inline:10px;
    font-size:13px
  }
  .lesson-card h1 {
    font-size:25px
  }
  .lesson-row .lesson-uk {
    font-size:26px
  }
  .lesson-actions {
    flex-direction:column;
    align-items:stretch
  }
  .study-options .button {
    flex:1
  }
  .verb-layout {
    grid-template-columns:1fr
  }
  .verb-layout:not(.mobile-detail) .verb-detail {
    display:none
  }
  .verb-layout.mobile-detail .verb-browser,.verb-page-heading.detail-open {
    display:none
  }
  .mobile-back {
    display:inline-flex;
    margin-bottom:14px;
    padding-left:0!important
  }
  .verb-list {
    max-height:none;
    overflow:visible
  }
  .verb-detail h2 {
    font-size:40px
  }
  .conjugation-table th {
    font-size:16px
  }
  .conjugation-table td {
    font-size:20px
  }
  .example-block {
    padding:18px
  }
  .example-block .example-uk {
    font-size:24px
  }
  .verb-practice .button {
    width:100%
  }
  .summary {
    padding:28px 20px
  }
  .summary h1 {
    font-size:32px
  }
  .summary .lead {
    font-size:16px
  }
  .summary-metrics strong {
    font-size:28px
  }
  .summary-metrics span {
    font-size:11px
  }
  .summary .feedback-actions {
    flex-direction:column;
    align-items:stretch
  }
  .summary .review-list li {
    align-items:flex-start;
    flex-direction:column;
    gap:8px
  }
  .summary .review-list li>span {
    text-align:left;
    display:flex;
    gap:12px;
    align-items:center
  }
  .summary .review-list small {
    margin:0
  }
  .summary .pill {
    white-space:normal
  }
  .skill-grid,.progress-grid {
    grid-template-columns:1fr
  }
  .progress-stats {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px
  }
  .progress-stats>div {
    padding:18px
  }
  .skill-card h2 {
    font-size:30px
  }
  .skill-card p:last-child {
    font-size:13px
  }
  .empty-state {
    padding:32px 20px
  }
  .empty-state h1 {
    font-size:32px
  }
}
@media(max-width:370px) {
  .tabbar {
    padding-inline:4px
  }
  .tabbar a {
    font-size:9px
  }
  .theme-toggle button {
    width:38px
  }
  .hero-copy h1 {
    font-size:34px
  }
  .question-card {
    padding:18px
  }
  .question-prompt:has(.uk) {
    font-size:30px
  }
  .answer {
    padding:12px;
    gap:8px;
    font-size:19px
  }
  .answer-symbol {
    font-size:10px;
    max-width:60px
  }
  .conjugation-table td {
    font-size:18px
  }
  .conjugation-table th {
    font-size:14px
  }
  .verb-detail {
    padding:18px
  }
  .length-options {
    gap:6px
  }
  .length-choice {
    padding:12px 6px
  }
  .length-choice small {
    font-size:10px
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important
  }
}
.question-card,.verb-detail {
  scroll-margin-top:100px
}
@media(max-width:760px) {
  .question-card {
    scroll-margin-top:110px
  }
}
.sound-buttons .is-playing {
  background:var(--blue-soft);
  color:var(--text)
}
#pattern-filter {
  font-family:var(--font-ua)
}
/* Artboard rhythm: the hero chip fills the iPad row, but stays compact on mobile. */
.lead { line-height: 1.5; }
.learning-section .section-heading h2 { font-size: 24px; }
@media (min-width: 761px) {
  .page:not(.page--exercise) { padding-top: 40px; }
  .hero-copy > .pill { align-self: stretch; }
}
@media (max-width: 760px) {
  .learning-section .section-heading h2 { font-size: 22px; }
}
/* Dictionary controls use the existing light/dark tokens and touch targets. */
.word-setup { border:0; padding:0; margin:20px 0; min-width:0; }
.word-setup select { width:100%; }
.word-progress-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:16px; }
.word-progress-list h3 { font-size:17px; margin-bottom:6px; }
.word-progress-list small { display:block; font-weight:400; }
.word-progress-list p { font-size:14px; }
.recall-ratings { display:flex; flex-direction:column; gap:14px; margin-block:24px; }
.recall-ratings .button { min-height:56px; white-space:normal; }
.question-prompt,.lesson-uk,.word-detail h2,.word-list-item { overflow-wrap:anywhere; }
#switch-dialog .pause-actions { display:flex; flex-direction:column; gap:12px; }
@media (min-width:761px) {
  .feedback-actions.action-bar { position:fixed; z-index:20; bottom:0; left:max(24px,calc((100vw - 760px)/2)); right:max(24px,calc((100vw - 760px)/2)); margin:0; padding:14px 20px calc(14px + env(safe-area-inset-bottom)); border:1px solid var(--line); border-bottom:0; border-radius:var(--r-lg) var(--r-lg) 0 0; background:var(--surface); }
  .has-action-bar .page--exercise { padding-bottom:calc(var(--action-height,100px) + 48px); }
}

/* One vocabulary selection shared by practice, search, counts and session creation. */
.word-views,.word-level-choices,.word-actions { display:flex; flex-wrap:wrap; gap:12px; }
.word-views { margin-bottom:24px; }
.vocabulary-workspace { display:grid; gap:24px; min-width:0; }
.word-controls { display:grid; gap:20px; min-width:0; }
.word-filters,.word-selection,.word-customize { min-width:0; }
.word-levels,.word-theme-dialog fieldset { border:0; padding:0; margin:0; min-width:0; }
.word-levels legend { font-size:20px; font-weight:700; }
.word-levels p { margin-block:10px; }
.word-check { display:flex; align-items:center; gap:12px; min-width:44px; min-height:48px; padding:12px 16px; border:2px solid var(--line); border-radius:var(--r-sm); cursor:pointer; overflow-wrap:anywhere; }
.word-check input { position:static; appearance:auto; opacity:1; width:22px; height:22px; min-height:22px; flex:0 0 22px; margin:0; accent-color:var(--blue); }
.word-check.is-selected { border-color:var(--blue); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--blue); }
.word-check:focus-within { outline:3px solid var(--blue); outline-offset:3px; }
.word-theme-dialog { width:min(560px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); overflow:auto; }
.word-theme-dialog legend { margin-bottom:12px; }
.word-theme-list { display:grid; gap:8px; margin-top:8px; overflow:auto; padding:4px; }
.word-customize summary { min-height:56px; cursor:pointer; padding:4px; }
.word-customize summary span { display:block; margin:8px 0 0 20px; font-size:14px; line-height:1.6; }
.word-customize .word-setup { margin-bottom:0; }
.word-selection > .button { margin-top:16px; }
.word-selection p,.word-controls .button,.word-find-setup p,.session-selection { overflow-wrap:anywhere; white-space:normal; }
.word-controls .button,.word-views .button,.word-theme-dialog .button,.word-find .button { min-height:44px; min-width:44px; }
.word-selection .due-emphasis { border-left:4px solid var(--blue); padding-left:12px; font-weight:600; }
.word-find { min-width:0; }
.word-find-setup { margin-bottom:20px; }
.word-list .verb-list-item small { grid-column:1/-1; }
@media (min-width:1000px) {
  .word-controls { max-width:760px; }
}
@media (max-width:760px) {
  .vocabulary-workspace.detail-open .word-controls,.vocabulary-workspace.detail-open .word-find-setup { display:none; }
  .word-views .button { flex:1; }
}
.word-theme-dialog[open] { display:flex; flex-direction:column; gap:8px; height:min(720px,calc(100dvh - 32px)); padding:24px; overflow:hidden; }
.word-theme-dialog h2,.word-theme-dialog .field-label,.word-theme-dialog p { margin:0; }
.word-theme-dialog input[type=search] { flex-shrink:0; }
.word-theme-dialog fieldset { flex:1; display:flex; flex-direction:column; min-height:0; margin:0; }
.word-theme-dialog fieldset > .word-check { flex-shrink:0; }
.word-theme-dialog .word-theme-list { flex:1; min-height:0; max-height:none; }
.word-theme-dialog > .button { position:static; flex-shrink:0; }
@media (max-height:500px) {
  .word-theme-dialog[open] { padding:12px 20px; gap:6px; }
  .word-theme-dialog h2 { font-size:20px; line-height:1.2; }
  .word-theme-dialog .field-label,.word-theme-dialog legend { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); }
  .word-theme-dialog .word-check { min-height:44px; padding:8px 12px; }
  .word-theme-dialog .word-theme-status.is-valid { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
}

/* Workbook map and field assessment use existing Mova tokens and native controls. */
.workbook-entry { display:flex; flex-wrap:wrap; gap:1.25rem; align-items:center; justify-content:space-between; margin-block:1.5rem; }
.workbook-entry > div { flex:1 1 20rem; }
.workbook-search { margin-block:1rem; max-width:46rem; }
.chapter-map ol { list-style:none; margin:0; padding:0; display:grid; gap:.5rem; }
.chapter-button { display:grid; gap:.35rem; width:100%; padding:1rem; text-align:left; border:2px solid var(--line-strong); border-radius:12px; background:var(--surface); color:var(--text); min-height:44px; white-space:normal; }
.chapter-button.selected { border-color:var(--blue); box-shadow:inset 4px 0 var(--blue); }
.chapter-button span,.chapter-button small { line-height:1.45; }
.chapter-button span { font-size:.83rem; }
.workbook-mode { padding:0; border:0; display:grid; gap:.6rem; margin-block:1rem; }
.workbook-mode .word-check small { display:block; font-weight:normal; }
.chapter-detail { min-width:0; }
.chapter-detail :is(input,select),.workbook-field :is(input,select),.workbook-search input { width:100%; min-height:48px; box-sizing:border-box; }
.workbook-selection { padding:1rem; border:1px solid var(--line-strong); border-radius:12px; }
.workbook-coverage { margin-block:1.5rem; }
.workbook-coverage summary { min-height:44px; cursor:pointer; display:flex; align-items:center; }
.workbook-ref { font-weight:700; }
.worked-sentence { font-size:clamp(1.25rem,3vw,1.8rem); overflow-wrap:anywhere; }
.workbook-pattern dl { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:.65rem; }
.workbook-pattern dt { font-weight:700; }
.workbook-pattern dd { margin:0; }
.workbook-field { padding-block:1rem; border-bottom:1px solid var(--line-strong); }
.workbook-field .field-label { display:block; }
.workbook-field fieldset { border:0; padding:0; margin:0; }
.workbook-field .word-check { margin-block:.6rem; }
.field-correct { border-inline-start:4px solid var(--blue); padding-inline-start:1rem; }
.field-result { overflow-wrap:anywhere; }
.workbook-hints { display:flex; flex-wrap:wrap; gap:.5rem; margin-block:1rem; }
.workbook-hints button { min-height:44px; }
#workbook-answer-form > button { margin-block:1rem; }
@media(max-width:760px) {
 .workbook-pattern dl { grid-template-columns:minmax(0,1fr); }
 .workbook-pattern dd { margin-bottom:.5rem; }
}

.workbook-summary .summary-metrics > div { min-width:0; padding-inline:5px; }
.workbook-summary .summary-metrics span { display:block; white-space:normal; overflow-wrap:break-word; line-height:1.5; margin-top:.4rem; }
.workbook-summary > ul { text-align:left; padding-left:1.2rem; }
.workbook-summary > ul li { margin-block:.6rem; }

/* Letter hints wrap at word boundaries and never expose the hidden answer to speech. */
.letter-hint { margin-block: 1rem; padding: 1rem; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: 12px; }
.letter-hint-mask { font-family: var(--font-ua); font-size: 1.35rem; line-height: 1.8; white-space: pre-wrap; overflow-wrap: anywhere; }
.letter-hint-mask span { display: inline; }
.workbook-analysis { margin-block: 1rem; }
.workbook-analysis summary { min-height: 44px; padding-block: .65rem; cursor: pointer; }
.workbook-analysis fieldset { border: 0; padding: .5rem 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.workbook-analysis legend { font-weight: 700; margin-block: .5rem; }
.workbook-analysis [aria-pressed="true"] { outline: 2px solid var(--blue); outline-offset: 2px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.workbook-field :is(input,select), .chapter-detail :is(input,select), .workbook-search input { background: var(--surface); color: var(--text); border: 1px solid var(--line-strong); border-radius: var(--r-sm); padding: .65rem .8rem; font: inherit; }
.workbook-field [lang="uk"] { font-family: var(--font-ua); }
.workbook-field :is(input,select):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.workbook-progress { margin-block: 1.5rem; }

/* Chapter 1.3: native buttons and readable word lists, including narrow landscape screens. */
.workbook-parts { display:grid;gap:1rem;padding-inline-start:1.5rem; }
.workbook-parts p { margin:.45rem 0; }
.car-example { margin:1rem 0;padding:1rem;border:1px solid var(--line);border-radius:var(--r-xl); }
.car-example [aria-pressed="true"] { outline:3px solid var(--blue);outline-offset:2px; }
.classification-answers { display:flex;flex-wrap:wrap;gap:.75rem;margin:1.5rem 0; }
.classification-answers button { min-width:140px;min-height:48px; }
.classification-card h1 { overflow-wrap:anywhere; }
.workbook-word-list { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,13rem),1fr));gap:.5rem 1rem;padding-inline-start:1.3rem; }
.workbook-word-list li { overflow-wrap:anywhere; }
.workbook-word-list span { display:block; }
.workbook-lists { margin-top:1.5rem; }
.workbook-lists summary { min-height:44px;cursor:pointer; }
.workbook-lists section { border-top:1px solid var(--line);padding-block:1rem; }
.neuter-summary { padding-block:1rem; }

.workbook-parts [aria-pressed="true"] { background:var(--blue-soft);border:2px solid var(--blue); }

/* Shared chapter references and in-place help. */
.worked-sentence { white-space:pre-line; }
.reference-links { display:flex; flex-wrap:wrap; gap:.6rem; margin-block:.8rem; }
.reference-table { width:100%; border-collapse:collapse; margin-block:1rem; font-size:1rem; }
.reference-table th,.reference-table td { text-align:left; padding:.5rem .35rem; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.reference-table caption { text-align:left; font-weight:700; margin-bottom:.6rem; }
.task-references,.workbook-reference { margin-block:1.5rem; padding-block:1rem; border-top:1px solid var(--line); }
.workbook-reference summary { font-weight:700; cursor:pointer; }
.learning-help { max-height:85dvh; overflow:auto; max-width:min(42rem,calc(100vw - 2rem)); }
.learning-help > .button { margin-block:1rem; }
.review-preview { max-height:24rem; overflow:auto; padding-inline-start:1.4rem; }
.review-preview li { margin-block:.6rem; }
.home-review { margin-block:1.5rem; }
@media(max-width:420px) { .reference-table { font-size:.85rem; } .reference-table th,.reference-table td { padding:.4rem .2rem; } }
.learning-help { text-align:left; }
.workbook-hints { display:flex; flex-wrap:wrap; gap:.3rem; }
.workbook-hints .button { font-size:.9rem; padding:.6rem .7rem; }
.review-setup > .button { margin:.5rem .5rem 0 0; }

/* Text, underline and + keep morphology legible without color. */
.verb-changes { margin-block: 1rem; padding: 1rem; border: 1px solid var(--line-strong); border-radius: 12px; }
.verb-changes summary, .field-analysis summary { cursor: pointer; font-weight: 700; }
.verb-change-rows { padding-inline-start: 1.5rem; }
.verb-change-rows li { margin-block: .8rem; }
.verb-change-rows li > span { display: block; }
.verb-changes mark { color: inherit; background: transparent; text-decoration: underline; }
.verb-ending { border-bottom: 2px solid currentColor; }
.field-analysis { margin-block: .8rem; }
.field-analysis button { margin: .25rem; }

.learning-help-header { display:flex; align-items:center; justify-content:space-between; gap:.75rem; position:sticky; top:0; background:var(--surface); z-index:1; padding-block:.4rem; }
.learning-help-header h2 { margin:0; font-size:1.25rem; }
.learning-help-header .button { flex-shrink:0; }
.learning-help .conjugation-table td:last-child { width:44px; }
.learning-help .conjugation-table .icon-button { min-width:44px; }

/* Keep the existing readable reference forms while reserving the audio control. */
.learning-help .conjugation-table th { width:35%; }
.learning-help .conjugation-table td { width:auto; text-align:left; }
.learning-help .conjugation-table td:last-child { width:44px; }
.learning-help .conjugation-table td .uk { white-space:nowrap; overflow-wrap:normal; }
dialog.learning-help { text-align:left; }
@media(max-width:420px) { .learning-help .conjugation-table td { font-size:18px; } }
@media(max-width:360px) { .learning-help .conjugation-table td { font-size:16px; } }
.reference-scroll { max-width: 100%; overflow-x: auto; margin-block: 1rem; }
.reference-scroll table { min-width: 32rem; margin: 0; }
.reference-scroll:focus-visible { outline: 3px solid var(--color-accent, #58704f); outline-offset: 3px; }
.connected-sentence { white-space: pre-line; line-height: 2; }
.sentence-field { font: inherit; color: inherit; background: transparent; border: 1px solid currentColor; border-radius: .35rem; padding: .1rem .35rem; cursor: pointer; }
.sentence-field.correct { border-style: dashed; }
.sentence-field:focus-visible { outline: 3px solid var(--color-accent, #58704f); outline-offset: 3px; }
.subunit-progress, .situation { padding: .75rem; border-inline-start: 3px solid var(--color-accent, #58704f); }
.subunit-position { font-weight: 700; }
.workbook-reference, .chapter-detail, .workbook-field, .learning-help { min-width: 0; overflow-wrap: anywhere; }
.phrase-components { font-size: .9rem; }

/* The same writing surface adapts to the number of fields in any chapter. */
.field-help { border-top:1px solid var(--line); margin-block:.8rem; padding-block:.6rem; }
.field-help > summary,.whole-task > summary,.task-guidance > summary { cursor:pointer; font-weight:650; min-height:44px; padding-block:.55rem; }
.field-help > .field-analysis { margin-block:.5rem; }
.ending-input { display:flex; align-items:center; gap:.5rem; margin-bottom:.8rem; min-width:0; }
.ending-stem { font-size:1.25rem; font-weight:650; overflow-wrap:anywhere; }
.ending-input input { min-width:0; flex:1; width:6rem; }
.writing-navigation { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-block:1rem; }
.writing-navigation label { font-weight:650; }
.writing-navigation select { width:auto; min-width:7rem; flex:1; }
.writing-navigation .button { padding:.55rem .75rem; }
.writing-context { border-left:3px solid var(--blue); padding:.6rem .85rem; margin-block:1rem; background:var(--blue-soft); }
.writing-context p { margin-block:.35rem; font-size:1rem; }
.writing-context .sentence-field { display:inline; border:0; padding:0; font-size:inherit; min-height:0; }
.writing-context .current { font-weight:750; text-decoration:underline; text-underline-offset:.2rem; }
.writing-workspace .workbook-field { margin-block:1rem; }
.writing-continue { display:block; margin-block:.75rem; }
.writing-workspace .task-references { margin-block:1rem; }
.writing-workspace .field-label { margin-top:1rem; }
@media(max-width:420px) { .writing-navigation .button { font-size:.9rem; } .ending-input { gap:.35rem; } }

/* Workbook journey: one page, one column, with normal document scrolling. */
html { scroll-padding-block:80px 24px; }
.page { padding-bottom:40px; }
.page.page--workbook { max-width:904px; padding:28px 32px 48px; }
.workbook-map { display:grid; gap:20px; min-width:0; }
.workbook-map .page-heading { margin:0; }
.workbook-map h1 { font-size:clamp(28px,4vw,36px); overflow-wrap:break-word; }
.workbook-map h2 { font-size:24px; }
.workbook-map p { font-size:16px; }
.workbook-map .panel { padding:24px; }
.workbook-map .chapter-goal { margin-block:12px 0; }
.workbook-search { max-width:none; margin:0; }
.workbook-search .field-label { margin-top:0; }
.workbook-search input { font-size:16px; }
.workbook-search p { margin-block:10px; }
.search-result { border-top:1px solid var(--line); margin-top:16px; padding-top:16px; }
.search-result h2 { font-size:21px; margin-bottom:8px; }
.chapter-map { max-height:none; overflow:visible; padding:0; }
.chapter-map ol { gap:10px; }
.chapter-button { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px; border:1px solid var(--line-strong); box-shadow:var(--shadow); }
.chapter-row-copy { display:grid; gap:5px; flex:1; min-width:0; }
.chapter-button .chapter-row-copy { font-size:16px; }
.chapter-row-copy strong { font-size:17px; line-height:1.35; }
.chapter-row-copy > span { font-size:14px; }
.chapter-button > svg,.part-button > svg { flex:0 0 20px; color:var(--blue); }
.workbook-start h2 { margin-bottom:12px; }
.workbook-selection { margin-block:12px 16px; padding:12px; background:var(--surface-2); line-height:1.55; }
.workbook-start .button { white-space:normal; min-height:48px; }
.workbook-start > .button { width:100%; }
.workbook-customize { margin-top:12px; }
.workbook-customize > summary,.chapter-explanations > summary,.workbook-progress-detail > summary { cursor:pointer; min-height:48px; padding-block:12px; font-weight:650; }
.workbook-customize input,.workbook-customize select { width:100%; min-height:48px; font-size:16px; }
.workbook-customize .field-label { margin-top:16px; }
.workbook-mode .word-check small { font-size:15px; line-height:1.5; margin-top:4px; }
.chapter-parts h2 { margin-bottom:12px; }
.workbook-parts { display:grid; gap:10px; list-style:none; padding:0; margin:0; }
.workbook-parts li { margin:0; }
.part-button { display:flex; justify-content:space-between; align-items:center; gap:12px; width:100%; text-align:left; background:var(--surface); color:var(--text); padding:16px; border:1px solid var(--line-strong); border-radius:12px; min-height:48px; }
.part-button > span { display:grid; gap:6px; min-width:0; }
.part-button strong { font-size:17px; }
.part-button span span { font-size:16px; line-height:1.5; }
.chapter-progress-line { margin:0; }
.chapter-explanations,.workbook-progress-detail { border-top:1px solid var(--line); }
.workbook-back { justify-self:start; min-height:44px; white-space:normal; text-align:left; padding-inline:0; }
.workbook-map :is(button,a,input,select,summary):focus-visible,.topbar :focus-visible,.session-bar :focus-visible { outline:3px solid var(--blue); outline-offset:3px; }

/* One main navigation on ordinary pages, one compact header during practice. */
.topbar { gap:12px; height:80px; }
.topbar .main-navigation { display:flex; position:static; padding:0; border:0; background:none; margin-left:auto; }
.main-navigation .nav-link { padding-inline:12px; font-size:15px; flex-direction:row; }
.main-navigation .workbook-nav { color:var(--blue); background:var(--blue-soft); font-weight:750; }
.menu-toggle { display:none; }
.main-menu { width:min(480px,calc(100vw - 24px)); padding:20px; }
.main-menu .nav { display:grid; gap:8px; margin-block:20px; }
.main-menu .nav a { justify-content:flex-start; min-height:48px; }
.menu-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.menu-heading h2 { margin:0; }
.main-menu .theme-toggle { margin-top:12px; width:max-content; }
.is-in-session .topbar,.is-in-session .site-footer,.session-meta--desktop { display:none; }
.session-bar { display:block; position:sticky; top:0; z-index:10; width:100%; padding:8px max(16px,calc((100vw - 760px)/2)); border-bottom:1px solid var(--line); background:var(--bg); }
.session-bar__row { display:flex; align-items:center; gap:8px; min-height:48px; }
.session-bar__row > span { flex:1; min-width:0; }
.session-bar__row strong { font-size:15px; line-height:1.3; }
.session-bar__row small { font-size:13px; line-height:1.4; }
.session-bar .button { padding:8px; min-width:44px; min-height:44px; }
.session-bar progress { display:block; height:4px; margin-top:6px; }
.page.page--exercise { max-width:820px; padding:20px 32px 48px; }
.exercise-shell > .workbook-ref { margin:0 0 4px; font-size:15px; }
.exercise-shell > .subunit-position { font-size:15px; }
.exercise-shell > p.small-text { display:none; }
.exercise-shell > .question-card { margin-top:16px; }
.feedback-actions.action-bar { position:static; margin-top:16px; padding:0; border:0; border-radius:0; background:none; flex-wrap:wrap; }
.has-action-bar .page.page--exercise { padding-bottom:48px; }
.action-bar .button { min-height:48px; white-space:normal; }
.writing-navigation select { min-height:44px; font-size:16px; }
.writing-navigation .button { min-height:44px; }
.workbook-field :is(input,select) { font-size:18px; }
.writing-context #writing-clause { font-size:20px; line-height:1.6; }
.whole-task,.task-guidance { margin-block:8px; }
.workbook-summary .feedback-actions { flex-direction:column; align-items:stretch; }
.reference-table-wrap { overflow-x:auto; max-width:100%; }
.learning-help-header { align-items:flex-start; }
.learning-help-header .button { min-width:44px; white-space:normal; }
@media(max-width:1100px) {
 .topbar { height:64px; padding:8px 16px; gap:8px; }
 .topbar .main-navigation { margin:0 0 0 auto; }
 .main-navigation .nav-link:not(.workbook-nav) { display:none; }
 .main-navigation .workbook-nav { display:inline-flex; min-height:44px; padding:8px 10px; gap:6px; font-size:15px; white-space:nowrap; }
 .main-navigation .workbook-nav .i { display:inline-block; }
 .desktop-theme { display:none; }
 .menu-toggle { display:inline-flex; width:44px; min-width:44px; height:44px; }
 .topbar .logo { gap:6px; min-height:44px; }
 .topbar .logo svg { width:28px; height:28px; }
 .topbar .logo .word { font-size:23px; }
 .page { padding-bottom:40px; }
 .site-footer { padding-bottom:24px; }
}
@media(max-width:600px) {
 .page.page--workbook,.page.page--exercise { padding:20px 16px 40px; }
 .workbook-map { gap:16px; }
 .workbook-map .panel { padding:16px; }
 .workbook-map h2 { font-size:22px; }
 .workbook-map .lead { font-size:16px; }
 .chapter-button,.part-button { padding:14px; }
 .question-card.panel { padding:16px; }
 .question-card h1 { font-size:28px; }
 .answer-options { grid-template-columns:minmax(0,1fr); }
 .feedback-actions.action-bar { flex-direction:column; align-items:stretch; }
 .learning-help { width:100%; max-width:100%; height:100dvh; max-height:100dvh; margin:0; padding:16px; border-radius:0; }
 .learning-help-header { flex-direction:column-reverse; align-items:stretch; padding-bottom:12px; gap:8px; }
 .learning-help-header .button { align-self:flex-end; padding:10px 14px; }
 .learning-help-header h2 { font-size:23px; }
 .workbook-summary .summary-metrics { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:350px) {
 .topbar { padding-inline:12px; gap:4px; }
 .topbar .logo svg { display:none; }
 .main-navigation .workbook-nav { padding-inline:8px; }
 .main-navigation .workbook-nav .i { width:18px; height:18px; }
}
@media(max-height:450px) {
 .session-bar { position:static; }
 .learning-help { max-height:100dvh; }
}
.session-bar__row strong { white-space:normal; overflow:visible; text-overflow:clip; }
.main-navigation .workbook-nav[aria-current="page"] { box-shadow:inset 0 -3px var(--blue); }
.question-card .small-text { font-size:16px; }

.chapter-button:focus,.part-button:focus { outline:3px solid var(--blue); outline-offset:3px; }
.writing-workspace .workbook-field { margin-block:0; padding-top:0; }
.writing-workspace .field-label { margin-top:0; }

/* One action surface before and after assessment, above the visual keyboard. */
.practice-actions.action-bar {
 position:fixed; z-index:20; bottom:var(--keyboard-inset,0px);
 left:var(--practice-left,0px); right:auto; width:var(--practice-width,100%);
 margin:0; padding:8px 16px calc(8px + env(safe-area-inset-bottom));
 border:0; border-top:1px solid var(--line); border-radius:0;
 background:var(--surface); box-shadow:0 -3px 14px rgb(0 0 0 / .05);
}
.practice-actions-inner { width:100%; max-width:756px; margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:48px; }
.practice-status { margin:0; min-width:0; font-size:16px; font-weight:650; line-height:1.25; }
.practice-buttons { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-left:auto; flex-shrink:0; }
.practice-actions .button { min-height:48px; min-width:44px; margin:0; padding:10px 16px; white-space:normal; line-height:1.25; }
.practice-actions .recall-ratings { display:flex; flex-direction:row; margin:0; gap:8px; flex:1; justify-content:flex-end; }
.practice-actions .recall-ratings .button { flex:1; max-width:180px; padding:4px 6px; }
.practice-actions:has(.recall-ratings) .practice-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.has-action-bar .page.page--exercise { padding-bottom:calc(var(--action-height,72px) + var(--keyboard-inset,0px) + 24px); }
.has-action-bar { scroll-padding-bottom:calc(var(--action-height,72px) + var(--keyboard-inset,0px) + 16px); }
html:has(.practice-actions) { scroll-padding-bottom:calc(var(--action-height,72px) + var(--keyboard-inset,0px) + 16px); }
.feedback-explanation { margin-block:16px; border-top:1px solid var(--line); }
.feedback-explanation summary { min-height:44px; padding-block:10px; font-weight:650; cursor:pointer; }
.field-error { margin-block:8px; padding:8px 0; font-size:16px; color:var(--text); border-left:3px solid var(--line-strong); padding-left:10px; }
.recall-answer { padding-block:8px; }
.recall-answer h2 { font-size:28px; margin-block:8px; }
.answer[aria-pressed="true"],.classification-answers button[aria-pressed="true"] { border-color:var(--blue); background:var(--blue-soft); }
.answer[aria-disabled="true"],.classification-answers button[aria-disabled="true"] { cursor:default; }
.practice-actions .button:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
@media(max-width:350px) {
 .practice-actions.action-bar { padding-inline:12px; }
 .practice-actions-inner { gap:8px; }
 .practice-actions .button { padding-inline:12px; }
 .practice-status { font-size:15px; }
}
@media(max-height:500px) {
 .is-in-session .session-bar { position:static; padding-block:4px; }
 .is-in-session .session-bar progress { display:none; }
}

.is-in-session .under-card:not(.keyboard-tip) { display:none; }
.practice-actions .button { font-size:16px; }
.practice-buttons .button { flex:none; white-space:nowrap; }

/* Games use normal document flow: Safari toolbar changes never cover actions. */
.games-home { margin-block:24px; }
.game-choices { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
.game-entry { display:flex; align-items:center; gap:16px; padding:20px; min-height:96px; border:1px solid var(--line-strong); border-radius:var(--r-xl); background:var(--surface); color:var(--text); text-align:left; }
.game-entry > span:nth-child(2) { flex:1; min-width:0; }
.game-entry strong,.game-entry small { display:block; }
.game-entry strong { font-size:20px; margin-bottom:6px; }
.game-entry small { font-size:15px; line-height:1.5; color:var(--text-2); }
.game-entry-mark { display:grid; place-items:center; flex:none; width:48px; height:48px; border-radius:50%; color:var(--on-yellow); background:var(--yellow); font-size:28px; }
.page--game { max-width:760px; margin-inline:auto; padding:24px max(16px,env(safe-area-inset-right)) calc(24px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); }
.game-setup,.game-summary { width:100%; }
.game-setup > .button:first-child { margin:0 0 16px -12px; }
.game-setup h1 { margin-block:8px 12px; }
.game-setup-record { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; padding-block:20px; border-bottom:1px solid var(--line); margin-block:12px; }
.game-setup-record strong { font-size:32px; }
.game-setup-record small { font-size:16px; font-weight:600; }
.game-selection { font-size:15px; color:var(--text-2); overflow-wrap:anywhere; }
.game-setup-actions,.game-summary-actions { display:grid; gap:10px; margin-block:24px; }
.game-training { padding:12px; border-left:3px solid var(--yellow); background:var(--surface-2); }
.game-customize,.game-rules { margin-top:16px; border-top:1px solid var(--line); }
.game-customize summary,.game-rules summary { min-height:48px; padding-block:14px; cursor:pointer; font-weight:700; }
.game-customize fieldset { margin-block:16px; border:0; padding:0; }
.game-customize legend { font-weight:750; padding-bottom:8px; }
.game-levels { display:flex; gap:12px; flex-wrap:wrap; }
.game-levels label,.game-theme { display:flex; align-items:center; gap:12px; min-height:48px; padding:10px; cursor:pointer; }
.game-theme { margin-bottom:4px; }
.game-customize input { width:24px; height:24px; flex:none; accent-color:var(--blue); }
.game-play { width:100%; }
.game-status { display:flex; justify-content:space-between; gap:12px; padding:4px 4px 12px; }
.game-status > div { min-width:0; }
.game-status span { display:block; font-size:14px; color:var(--text-2); }
.game-status strong { display:block; font-size:30px; line-height:1.35; }
.game-goal { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; font-size:14px; font-weight:700; margin-bottom:12px; }
.game-streak-track { height:6px; background:var(--line); border-radius:8px; overflow:hidden; margin-block:0 16px; }
.game-streak-track > span { display:block; height:100%; background:var(--blue); }
.game-route { display:flex; list-style:none; justify-content:space-between; padding:0; margin:4px 0 16px; gap:8px; }
.game-route li { display:grid; place-items:center; flex:1; height:26px; border-radius:6px; background:var(--surface-2); color:var(--text-2); font-size:13px; border:1px solid var(--line-strong); }
.game-route li.reached { background:var(--blue-soft); border-color:var(--blue); color:var(--text); font-weight:800; }
.game-card { padding:24px; }
.game-card .eyebrow { margin:0 0 8px; font-size:12px; }
.game-card h1 { font-size:34px; line-height:1.4; overflow-wrap:anywhere; margin:0 0 8px; }
.game-scope { font-size:15px; line-height:1.5; margin:0 0 16px; overflow-wrap:anywhere; }
.game-answers { display:grid; gap:10px; margin-top:16px; }
.game-answer { display:flex; align-items:center; gap:12px; min-height:56px; width:100%; padding:12px 14px; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-lg); color:var(--text); text-align:left; font:650 17px/1.4 var(--font-ui); overflow-wrap:anywhere; }
.game-answer > span:nth-child(2) { flex:1; min-width:0; }
.game-answer-key { display:grid; place-items:center; flex:none; width:24px; height:24px; background:var(--surface-2); border-radius:6px; font-size:13px; }
.game-answer small { font-size:13px; flex-shrink:0; }
.game-answer.is-correct { border:2px solid var(--ok); background:var(--ok-soft); }
.game-answer.is-wrong { border:2px solid var(--err); background:var(--err-soft); }
.game-answer:disabled { opacity:1; }
.game-help { display:grid; grid-template-columns:auto 1fr; gap:8px; margin-top:12px; }
.game-help .button { font-size:14px; padding:10px 8px; }
.game-feedback { margin-block:16px; font-size:16px; }
.game-feedback p { line-height:1.5; margin-top:8px; }
.game-card > .button.primary { width:100%; margin-top:12px; }
.game-milestone { color:var(--ok); font-weight:750; }
.game-record-celebration { font-weight:800; padding:8px 12px; border-radius:8px; background:var(--yellow-soft); color:var(--text); animation:game-pop .25s ease-out; }
.game-checkpoint-actions { display:grid; gap:12px; margin-top:24px; }
.game-checkpoint-actions .button { display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:6px; padding:16px; }
.game-checkpoint-actions small { font-size:14px; font-weight:500; }
.game-summary h1 { font-size:48px; margin-bottom:12px; }
.game-summary-word { padding-block:20px; margin-block:20px; border-block:1px solid var(--line); }
.game-summary-word h2 { font-size:20px; margin-bottom:12px; }
.game-dialog { max-width:480px; width:calc(100% - 32px); max-height:calc(100dvh - 32px); overflow-y:auto; padding:24px; }
.game-dialog .dialog-actions { display:grid; gap:10px; margin-top:20px; }
.game-bar { padding-top:max(8px,env(safe-area-inset-top)); padding-inline:max(16px,calc((100vw - 728px)/2),env(safe-area-inset-left)); }
.game-bar .button { min-height:48px; min-width:80px; }
.is-game-page .topbar { height:auto; min-height:64px; padding-top:max(8px,env(safe-area-inset-top)); padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); }
.is-game-page .topbar :is(button,a),.is-game-page .main-menu :is(button,a) { min-width:48px; min-height:48px; }
.is-game-page :is(.menu-toggle,.theme-toggle button) { width:48px; height:48px; }
.is-in-game .site-footer { display:none; }
.game-setup :is(button,summary),.game-play button,.game-summary button,.game-dialog button { min-width:48px; min-height:48px; }
.game-setup :focus-visible,.game-play :focus-visible,.game-summary :focus-visible,.game-dialog :focus-visible,.game-entry:focus-visible { outline:3px solid var(--blue); outline-offset:3px; }
.is-in-game .page--game { padding-top:16px; }
@keyframes game-pop { from { transform:scale(.98); } to { transform:scale(1); } }
@media(max-width:760px) {
  .game-choices { grid-template-columns:1fr; }
  .game-entry { padding:16px; }
  .game-card { padding:18px 16px; border-radius:16px; }
  .game-status strong { font-size:28px; }
  .game-setup,.game-summary,.game-checkpoint { padding:20px; }
  .game-setup h1 { font-size:32px; }
  .game-card h1 { font-size:30px; }
  .game-help { gap:4px; }
}
@media(prefers-reduced-motion:reduce) { .game-record-celebration { animation:none; } }