/* Courses (build-courses.py, course.js): the course list, the lesson page and
   its practice sets. Built on design.css and jlpt-pages.css (crumbs, hero
   actions); no hard outlines, transitions on the house easing tokens. */

.course .leaf { margin-bottom: clamp(48px, 6vw, 88px); }
.lesson-head {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.lesson-head-copy { display: grid; justify-items: start; min-width: 0; }
.lesson-title { margin-top: 22px; font-size: clamp(40px, 4.6vw, 68px); }
:lang(zh) .lesson-title, :lang(ko) .lesson-title { font-size: clamp(34px, 4vw, 58px); }
.lesson-headline {
  margin-top: 22px;
  font-family: var(--display);
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.6;
  color: var(--pine);
}
.lesson-head-copy .lead { margin-top: 18px; }
.lesson-actions { align-items: center; margin-top: 30px; }
.lesson-actions .chip { align-self: center; }
.chip .i { width: 12px; height: 12px; }

/* The furigana switch: a small track whose knob slides, text says ふりがな. */
.ruby-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 16px 6px 8px;
  border: 0;
  border-radius: 999px;
  background: var(--white);
  color: var(--pine);
  font-size: 14px;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--ring), var(--shadow);
  transition-property: transform, background-color;
  transition-duration: var(--t-micro), var(--t-small);
  transition-timing-function: var(--ease-enter);
}
.ruby-toggle:hover { background: #F3EEE2; }
.ruby-toggle:active { transform: scale(.98); }
.ruby-switch {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: rgba(31, 42, 37, .14);
  transition-property: background-color;
  transition-duration: var(--t-small);
  transition-timing-function: var(--ease-enter);
}
.ruby-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 1px 2px rgba(31, 42, 37, .2);
  transition-property: transform;
  transition-duration: var(--t-small);
  transition-timing-function: var(--ease-enter);
}
.ruby-toggle[aria-pressed="true"] .ruby-switch { background: var(--pine); }
.ruby-toggle[aria-pressed="true"] .ruby-switch::after { transform: translateX(14px); }
rt { font-size: .5em; letter-spacing: 0; color: var(--muted); font-family: var(--text); font-weight: 500; }
.ruby-off rt { display: none; }

.lesson-goals .bezel-core { position: relative; padding: clamp(24px, 2.6vw, 34px); overflow: hidden; }
.hub-head .lesson-goals .bezel-core { padding-bottom: clamp(88px, 8vw, 112px); }
.lesson-glyph {
  position: absolute;
  right: 18px;
  bottom: -6px;
  font-size: clamp(76px, 7vw, 108px);
  line-height: 1;
  color: rgba(43, 76, 64, .1);
  pointer-events: none;
}
.lesson-goals .kicker { position: relative; font-size: 13px; letter-spacing: .04em; color: var(--vermilion-text); }
.goal-list { position: relative; display: grid; gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; counter-reset: goal; }
.goal-list li { position: relative; padding-left: 34px; font-size: 16px; line-height: 1.65; counter-increment: goal; }
.goal-list li::before {
  content: counter(goal);
  position: absolute;
  left: 0;
  top: .1em;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(43, 76, 64, .1);
  color: var(--pine);
  font-family: var(--display);
  font-size: 13px;
}
.goal-meta { position: relative; margin-top: 20px; padding-top: 16px; padding-right: 96px; box-shadow: inset 0 1px var(--hairline); }

/* ---------------------------------------------------------------- lesson body */
.lesson-main {
  display: grid;
  grid-template-columns: 220px minmax(0, 760px);
  justify-content: center;
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}
.lesson-toc { position: sticky; top: 112px; padding-top: 6px; }
.lesson-toc .kicker { margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.lesson-toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.lesson-toc a {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 8px;
  padding: 8px 10px;
  border-radius: 12px;
  color: #3A4640;
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
  transition-property: background-color, color;
  transition-duration: var(--t-small);
  transition-timing-function: var(--ease-enter);
}
.lesson-toc a:hover { background: var(--tint); color: var(--vermilion-text); }
.lesson-toc .num { color: var(--muted); font-size: 13px; }
.lesson-toc a > span:last-child { min-width: 0; }
.course[data-access="paid"]:not([data-unlocked]) .lesson-toc { visibility: hidden; }
.course[data-access="paid"]:not([data-unlocked]) .lesson-practice { display: none; }
.lesson-flow { min-width: 0; }

.lesson-sec { padding-bottom: clamp(40px, 5vw, 64px); }
.lesson-sec + .lesson-sec { padding-top: clamp(40px, 5vw, 64px); box-shadow: inset 0 1px var(--hairline); }
.lesson-h { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; font-size: clamp(26px, 2.6vw, 36px); }
.lesson-h-no { flex: none; font-size: .5em; color: var(--vermilion-text); }
.lesson-h-text { min-width: 0; }
.lesson-p { margin: 0 0 18px; font-size: 17px; line-height: 1.85; }
:lang(en) .lesson-p { line-height: 1.7; }
.lesson-p strong, .note strong, .ex-note strong { font-weight: 650; color: var(--ink); }
.lesson-list { display: grid; gap: 10px; margin: 0 0 20px; padding-left: 1.2em; }

.pattern {
  margin: 8px 0 24px;
  padding: 22px 24px;
  border-radius: 20px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--ring), var(--shadow);
}
.pattern-line { margin: 0; font-family: var(--display); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.9; color: var(--ink); }
.slot {
  display: inline-block;
  margin: 0 .2em;
  padding: 0 .55em;
  border-radius: 8px;
  background: rgba(180, 83, 47, .1);
  color: var(--vermilion-text);
  font-family: var(--text);
  font-size: .62em;
  font-weight: 600;
  line-height: 1.9;
  vertical-align: .18em;
}
.pattern-note { margin-top: 10px; font-size: 15px; line-height: 1.7; color: var(--muted); }

.ex-list { display: grid; gap: 4px; margin: 0 0 24px; padding: 0; list-style: none; counter-reset: ex; }
.ex { position: relative; padding: 14px 0 14px 40px; counter-increment: ex; }
.ex + .ex { box-shadow: inset 0 1px var(--hairline); }
.ex::before { content: counter(ex); position: absolute; left: 0; top: 18px; font-family: var(--display); font-size: 14px; color: var(--muted); }
.ex-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ex-ja, .dialog-ja { margin: 0; font-size: 21px; line-height: 2; }
.ex-tr, .dialog-tr { margin-top: 2px; font-size: 15px; line-height: 1.65; color: #4A554F; }
.ex-note { margin-top: 6px; font-size: 14px; line-height: 1.65; color: var(--muted); }

.say {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  margin-top: 4px;
  border: 0;
  border-radius: 50%;
  background: rgba(43, 76, 64, .08);
  color: var(--pine);
  transition-property: background-color, transform;
  transition-duration: var(--t-small), var(--t-micro);
  transition-timing-function: var(--ease-enter);
}
.say:hover { background: rgba(43, 76, 64, .15); }
.say:active { transform: scale(.94); }
.say.is-playing { background: var(--pine); color: var(--white); }
.no-speech .say { display: none; }

.dialog { margin: 8px 0 26px; padding: 8px 22px; border-radius: 20px; background: var(--paper-2); }
.dialog-cap { padding: 14px 0 6px; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--vermilion-text); }
.dialog dl { margin: 0; }
.dialog-line { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 12px 0; }
.dialog-line + .dialog-line { box-shadow: inset 0 1px var(--hairline); }
.dialog dt { padding-top: 6px; font-family: var(--display); font-size: 15px; color: var(--pine); }
.dialog dd { margin: 0; }

.table-wrap { margin: 6px 0 24px; overflow-x: auto; border-radius: 18px; background: var(--white); box-shadow: inset 0 0 0 1px var(--ring); }
.lesson-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.lesson-table caption { padding: 14px 18px 4px; text-align: left; font-size: 13px; font-weight: 600; color: var(--vermilion-text); caption-side: top; }
.lesson-table th, .lesson-table td { padding: 12px 18px; text-align: left; vertical-align: top; line-height: 1.75; }
.lesson-table th { font-size: 13px; font-weight: 600; color: var(--muted); }
.lesson-table tbody tr { box-shadow: inset 0 1px var(--hairline); }
.lesson-table td[lang="ja"] { font-size: 19px; white-space: nowrap; }

.note { margin: 6px 0 24px; padding: 18px 22px 18px 20px; border-radius: 18px; background: rgba(43, 76, 64, .06); box-shadow: inset 3px 0 var(--pine); }
.note p { font-size: 15.5px; line-height: 1.8; }
.note .note-kind { margin-bottom: 4px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pine); }
.note-title { display: block; margin-bottom: 4px; font-size: 16px; }
.note-warn { background: rgba(180, 83, 47, .07); box-shadow: inset 3px 0 var(--vermilion); }
.note-warn .note-kind { color: var(--vermilion-text); }
.note-culture { background: rgba(198, 160, 102, .14); box-shadow: inset 3px 0 var(--gold); }
.note-culture .note-kind { color: var(--amber-text); }
.note-compare { background: rgba(52, 70, 90, .07); box-shadow: inset 3px 0 var(--indigo); }
.note-compare .note-kind { color: var(--indigo); }

/* ---------------------------------------------------------------- locked lesson */
.lesson-lock { display: grid; gap: 28px; padding-bottom: clamp(48px, 6vw, 80px); }
.lock-outline .kicker { margin: 0 0 12px; font-size: 13px; color: var(--muted); }
.lock-outline h3.kicker { margin-top: 26px; }
.lock-sections, .lock-sets { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.lock-sections li { display: grid; grid-template-columns: 34px minmax(0, 1fr); padding: 12px 0; font-family: var(--display); font-size: 21px; line-height: 1.5; box-shadow: inset 0 -1px var(--hairline); }
.lock-sections .num { font-size: 14px; color: var(--vermilion-text); padding-top: 5px; }
.lock-sets li { position: relative; padding: 6px 0 6px 20px; font-size: 15px; color: #3A4640; }
.lock-sets li::before { content: ""; position: absolute; left: 2px; top: 1.05em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.lock-card .bezel-core { padding: clamp(26px, 3vw, 40px); }
.lock-mark { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border-radius: 50%; background: rgba(255, 253, 248, .12); }
.lock-mark .i { width: 20px; height: 20px; }
.lock-title { font-size: clamp(24px, 2.4vw, 32px); color: var(--white); }
.lock-card p { margin-top: 12px; max-width: 36em; color: rgba(255, 253, 248, .84); font-size: 15.5px; line-height: 1.75; }
.lock-status:empty { display: none; }
.lock-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 24px; }
.lock-card .btn-ghost { --btn-fg: var(--white); --btn-hover: rgba(255, 253, 248, .1); box-shadow: inset 0 0 0 1px rgba(255, 253, 248, .3); }
.lock-card .link-arrow { color: #EBD3A8; }

/* ---------------------------------------------------------------- practice */
.lesson-practice { padding-top: clamp(48px, 6vw, 80px); box-shadow: inset 0 1px var(--hairline); }
.practice-title { font-size: clamp(32px, 3.4vw, 46px); }
.practice-lead { margin-top: 12px; max-width: 38em; font-size: 15.5px; line-height: 1.75; color: #4A554F; }
.practice-progress { margin-top: 8px; color: var(--pine); font-weight: 600; }
.practice-progress:empty { display: none; }
.ex-sets { display: grid; gap: 28px; margin-top: 32px; }

.ex-set .bezel-core { padding: clamp(20px, 2.4vw, 30px); }
.ex-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: start; margin-bottom: 18px; }
.ex-no { font-size: 28px; line-height: 1; color: var(--vermilion-text); }
.ex-set.is-done .ex-no { color: var(--pine); }
.ex-title { font-family: var(--text); font-size: 18px; font-weight: 650; line-height: 1.45; letter-spacing: 0; }
.ex-inst { margin-top: 4px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.ex-best { padding-top: 3px; white-space: nowrap; }
.ex-items { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; counter-reset: item; }
.ex-item {
  position: relative;
  padding: 16px 16px 16px 46px;
  border-radius: 18px;
  counter-increment: item;
  transition-property: background-color, box-shadow;
  transition-duration: var(--t-small);
  transition-timing-function: var(--ease-enter);
}
.ex-item::before {
  content: counter(item);
  position: absolute;
  left: 14px;
  top: 19px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--tint);
  color: var(--muted);
  font-family: var(--display);
  font-size: 12px;
}
.ex-item + .ex-item::after { content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: var(--hairline); }
.ex-item.is-right::after, .ex-item.is-wrong::after, .ex-item.is-right + .ex-item::after, .ex-item.is-wrong + .ex-item::after { display: none; }
.ex-item.is-right { background: rgba(43, 76, 64, .05); }
.ex-item.is-right::before { content: "✓"; background: var(--pine); color: var(--white); }
.ex-item.is-wrong { background: rgba(180, 83, 47, .05); }
.ex-item.is-wrong::before { content: "✗"; background: var(--vermilion); color: var(--white); }
.ex-match { padding-left: 16px; }
.ex-match::before { display: none; }

.ex-q { margin: 0; font-size: 19px; line-height: 2.1; }
.ex-q > span[lang="ja"] { font-size: 20px; }
.ex-hint { margin-top: 2px; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.ex-label { margin-right: 8px; padding: 1px 8px; border-radius: 6px; background: var(--tint); font-size: 12px; font-weight: 600; color: var(--muted); }
.gap { display: inline-block; width: 3.2em; height: 1.05em; margin: 0 .2em; vertical-align: -.15em; box-shadow: inset 0 -2px var(--vermilion); }

.ex-options { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ex-option {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 6px 16px 6px 7px;
  border: 0;
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
  text-align: left;
  box-shadow: inset 0 0 0 1px rgba(31, 42, 37, .12);
  transition-property: background-color, box-shadow, transform;
  transition-duration: var(--t-small), var(--t-small), var(--t-micro);
  transition-timing-function: var(--ease-enter);
}
.ex-option b { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: rgba(43, 76, 64, .08); color: var(--pine); font-size: 13px; }
.ex-option:hover:not(:disabled) { background: var(--white); box-shadow: inset 0 0 0 1px rgba(31, 42, 37, .2); }
.ex-option:active:not(:disabled) { transform: scale(.98); }
.ex-option.is-picked { background: rgba(43, 76, 64, .08); box-shadow: inset 0 0 0 1.5px var(--pine); }
.ex-option.is-picked b { background: var(--pine); color: var(--white); }
.ex-option.is-answer { background: rgba(43, 76, 64, .12); box-shadow: inset 0 0 0 1.5px var(--pine); }
.ex-option.is-answer b { background: var(--pine); color: var(--white); }
.ex-option.is-miss { background: rgba(180, 83, 47, .08); box-shadow: inset 0 0 0 1.5px var(--vermilion); }
.ex-option.is-miss b { background: var(--vermilion); color: var(--white); }
.ex-option:disabled { cursor: default; }

.ex-cloze { margin: 0; font-size: 20px; line-height: 2.3; }
.gap-select, .gap-input, .tf-input {
  margin: 0 .25em;
  border: 0;
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font-family: var(--text);
  box-shadow: inset 0 0 0 1px rgba(31, 42, 37, .18);
  transition-property: box-shadow, background-color;
  transition-duration: var(--t-small);
  transition-timing-function: var(--ease-enter);
}
.gap-select {
  min-width: 3.6em;
  height: 1.8em;
  padding: 0 1.6em 0 .6em;
  font-size: 18px;
  vertical-align: .05em;
  background-image: linear-gradient(45deg, transparent 50%, var(--pine) 50%), linear-gradient(-45deg, transparent 50%, var(--pine) 50%);
  background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.gap-input { width: calc(var(--chars, 4) * 1em + 1.2em); height: 1.8em; padding: 0 .5em; font-size: 18px; vertical-align: .05em; }
.gap-select:focus, .gap-input:focus, .tf-input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--pine), 0 0 0 4px rgba(43, 76, 64, .12); }
.is-hit { box-shadow: inset 0 0 0 1.5px var(--pine); background-color: rgba(43, 76, 64, .06); }
.is-miss:is(select, input) { box-shadow: inset 0 0 0 1.5px var(--vermilion); background-color: rgba(180, 83, 47, .06); }
:is(.gap-select, .gap-input, .tf-input):disabled { opacity: 1; color: var(--ink); -webkit-text-fill-color: var(--ink); }

.tf-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tf-from { margin: 0; font-size: 21px; line-height: 2; }
.tf-arrow { color: var(--muted); }
.tf-to { padding: 3px 12px; border-radius: 999px; background: rgba(180, 83, 47, .1); color: var(--vermilion-text); font-size: 14px; font-weight: 600; }
.tf-input { display: block; width: min(100%, 420px); min-height: 50px; margin: 12px 0 0; padding: 10px 16px; font-size: 20px; }

.order-line {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 58px;
  margin-top: 12px;
  padding: 9px;
  border-radius: 16px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(31, 42, 37, .14);
}
.order-line.is-empty { background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(31, 42, 37, .03) 10px 11px), var(--white); }
.order-bank { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tile {
  min-height: 40px;
  padding: 4px 14px;
  border: 0;
  border-radius: 12px;
  background: var(--paper-2);
  color: var(--ink);
  font-size: 18px;
  line-height: 1.9;
  box-shadow: inset 0 -2px rgba(31, 42, 37, .08);
  transition-property: transform, background-color, opacity;
  transition-duration: var(--t-micro), var(--t-small), var(--t-small);
  transition-timing-function: var(--ease-enter);
}
.tile:hover:not(:disabled) { background: #E7DFCF; }
.tile:active:not(:disabled) { transform: scale(.96); }
.tile.is-placed { background: rgba(43, 76, 64, .1); box-shadow: inset 0 -2px rgba(43, 76, 64, .14); }
.tile.is-used { opacity: .28; }
.tile:disabled { cursor: default; }
.is-right .order-line { box-shadow: inset 0 0 0 1.5px var(--pine); }
.is-wrong .order-line { box-shadow: inset 0 0 0 1.5px var(--vermilion); }

.match { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; margin-top: 12px; }
.match-col { display: grid; gap: 8px; align-content: start; }
.m-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 8px 14px 8px 10px;
  border: 0;
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.5;
  text-align: left;
  box-shadow: inset 0 0 0 1px rgba(31, 42, 37, .12);
  transition-property: background-color, box-shadow, transform;
  transition-duration: var(--t-small), var(--t-small), var(--t-micro);
  transition-timing-function: var(--ease-enter);
}
.m-l .m-text { font-size: 18px; }
.m-badge { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--tint); color: var(--white); font-family: var(--display); font-size: 12px; }
.m-item:hover:not(:disabled) { background: var(--white); }
.m-item:active:not(:disabled) { transform: scale(.98); }
.m-item.is-pending { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--gold), 0 0 0 4px rgba(198, 160, 102, .18); }
.m-item.is-paired { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--pine); }
.m-item.is-paired .m-badge { background: var(--pine); }
.m-item.is-hit { box-shadow: inset 0 0 0 1.5px var(--pine); background: rgba(43, 76, 64, .08); }
.m-item.is-miss { box-shadow: inset 0 0 0 1.5px var(--vermilion); background: rgba(180, 83, 47, .06); }
.m-item.is-miss .m-badge { background: var(--vermilion); }
.m-item:disabled { cursor: default; }

.ex-feedback {
  margin-top: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--white);
  box-shadow: inset 0 0 0 1px var(--ring);
  font-size: 15px;
  line-height: 1.7;
  animation: kt-fade var(--t-small) var(--ease-enter) both;
}
.ex-feedback p + p { margin-top: 6px; }
.fb-label { margin-right: 10px; padding: 1px 8px; border-radius: 6px; background: rgba(180, 83, 47, .1); color: var(--vermilion-text); font-size: 12px; font-weight: 700; }
.fb-answer > span[lang="ja"] { font-size: 18px; }
.fb-tr { color: #4A554F; }
.fb-explain { color: var(--muted); }
.fb-pairs { font-size: 15px; }

.ex-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 20px; padding-top: 18px; box-shadow: inset 0 1px var(--hairline); }
.ex-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-right: auto; font-size: 15px; color: #3A4640; }
.ex-score:empty { display: none; }
.ex-score b { font-size: 26px; font-weight: 500; color: var(--vermilion-text); }
.is-perfect .ex-score b { color: var(--pine); }
.ex-unanswered { flex-basis: 100%; font-size: 13.5px; color: var(--muted); }
.ex-again { padding: 6px 0; border: 0; background: transparent; color: var(--pine); font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ex-again:hover { color: var(--vermilion-text); }

/* ---------------------------------------------------------------- turn and hub */
.lesson-turn {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: stretch;
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: 28px;
  box-shadow: inset 0 1px var(--hairline);
}
.lesson-turn a { display: grid; gap: 6px; padding: 14px 18px; border-radius: 18px; color: inherit; text-decoration: none; transition-property: background-color; transition-duration: var(--t-small); transition-timing-function: var(--ease-enter); }
.lesson-turn a:hover { background: var(--tint); }
.lesson-turn .fine { display: inline-flex; align-items: center; gap: 6px; }
.lesson-turn strong { font-family: var(--display); font-size: 19px; font-weight: 500; line-height: 1.45; }
.turn-next { text-align: right; justify-items: end; }
.turn-all { align-self: center; }

.hub-body { display: grid; gap: clamp(56px, 7vw, 96px); }
.hub-course-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); align-items: start; margin-bottom: 28px; }
.hub-glyph { font-size: clamp(72px, 8vw, 120px); line-height: .9; color: var(--pine); }
.hub-course-head h2 { margin-top: 14px; }
.hub-course-sum { margin-top: 12px; max-width: 40em; font-size: 16.5px; line-height: 1.8; color: #3A4640; }
.hub-lessons { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.hub-lesson a {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: 20px 14px;
  border-radius: 18px;
  color: inherit;
  text-decoration: none;
  transition-property: background-color, transform;
  transition-duration: var(--t-small);
  transition-timing-function: var(--ease-enter);
}
.hub-lesson + .hub-lesson { box-shadow: inset 0 1px var(--hairline); }
.hub-lesson a:hover { background: var(--white); box-shadow: 0 0 0 1px var(--ring), var(--shadow); }
.hub-no { font-size: 26px; line-height: 1.2; color: var(--muted); }
.hub-lesson.is-free .hub-no { color: var(--pine); }
.hub-lesson.is-done .hub-no { color: var(--pine); }
.hub-text { display: grid; gap: 4px; min-width: 0; }
.hub-title { font-family: var(--display); font-size: 21px; font-weight: 500; line-height: 1.45; }
.hub-ja { font-size: 16px; line-height: 1.9; color: var(--pine); }
.hub-sum { font-size: 14.5px; line-height: 1.7; color: var(--muted); }
.hub-side { display: grid; justify-items: end; gap: 8px; padding-top: 4px; }
.hub-progress { white-space: nowrap; color: var(--pine); }
/* A course over several levels: one group per level, the level as a quiet heading over its lessons. */
.hub-groups { display: grid; gap: 48px; }
.hub-level { display: flex; align-items: baseline; gap: 14px; margin: 0; padding: 0 14px 14px; box-shadow: inset 0 -1px var(--frame-ink); }
.hub-level-name { font-family: var(--display); font-size: 30px; font-weight: 500; line-height: 1.1; color: var(--pine); }
.hub-level-range { letter-spacing: .02em; }
/* 兴趣阅读: one line under each theme on what its stories are about. */
.hub-group-note { max-width: 64ch; margin: 14px 14px 0; font-size: 15px; line-height: 1.75; color: var(--muted); }
/* 兴趣阅读: how to read the stories, above their list. */
.hub-how { max-width: 72ch; margin-bottom: clamp(48px, 6vw, 80px); }

@media (max-width: 1099px) {
  .lesson-main { grid-template-columns: minmax(0, 760px); }
  .lesson-toc { display: none; }
}
@media (max-width: 899px) {
  .lesson-head { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .lesson-title { font-size: clamp(34px, 9.4vw, 46px); }
  :lang(zh) .lesson-title, :lang(ko) .lesson-title { font-size: clamp(30px, 8.4vw, 40px); }
  .lesson-headline { font-size: 22px; }
  .lesson-actions { gap: 10px; }
  .ex { padding-left: 30px; }
  .ex-ja, .dialog-ja { font-size: 19px; }
  .dialog { padding: 6px 16px; }
  .dialog-line { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .dialog dt { padding-top: 0; font-size: 13px; }
  .pattern { padding: 18px; }
  .lesson-table td[lang="ja"] { white-space: normal; min-width: 4.6em; }
  .lesson-table th, .lesson-table td { padding: 10px 12px; }
  .ex-set .bezel-core { padding: 16px 12px; }
  .ex-head { grid-template-columns: auto minmax(0, 1fr); }
  .ex-best { grid-column: 2; padding-top: 0; }
  .ex-item { padding: 14px 8px 14px 38px; }
  .ex-item::before { left: 8px; top: 17px; }
  .ex-match { padding-left: 8px; }
  .ex-option { font-size: 16px; }
  .match { grid-template-columns: 1fr 1fr; gap: 8px; }
  .m-item { grid-template-columns: minmax(0, 1fr); padding: 10px; font-size: 14.5px; }
  .m-badge { display: none; }
  .m-item.is-paired::after, .m-item[data-pair]:not([data-pair=""])::after { content: attr(data-pair); justify-self: end; margin-top: -1.4em; font-family: var(--display); font-size: 12px; color: var(--pine); }
  .lesson-turn { grid-template-columns: 1fr 1fr; }
  .turn-all { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
  .hub-course-head { grid-template-columns: minmax(0, 1fr); }
  .hub-glyph { font-size: 64px; }
  .hub-lesson a { grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 18px 4px; }
  .hub-side { grid-column: 2; justify-items: start; grid-auto-flow: column; padding-top: 0; }
  .hub-groups { gap: 36px; }
  .hub-level { padding: 0 4px 12px; }
  .hub-level-name { font-size: 26px; }
  .hub-group-note { margin: 12px 4px 0; }
}

/* ---------------------------------------------------------------- the course list (hub) */
.hub-kicker { margin-bottom: 18px; font-size: 13px; letter-spacing: .04em; color: var(--muted); }
.hub-body:has(> .hub-kicker) { display: block; }
.t-part { display: inline-block; }
.course-hub .lesson-title { font-size: clamp(34px, 3.8vw, 56px); }
:lang(zh) .course-hub .lesson-title, :lang(ko) .course-hub .lesson-title { font-size: clamp(30px, 3.4vw, 50px); }
.course-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.course-card .bezel-core {
  display: grid;
  gap: 14px;
  height: 100%;
  padding: clamp(24px, 2.6vw, 34px);
  color: inherit;
  text-decoration: none;
  transition-property: transform;
  transition-duration: var(--t-small);
  transition-timing-function: var(--ease-enter);
}
.course-card { transition-property: transform, box-shadow; transition-duration: var(--t-small); transition-timing-function: var(--ease-enter); }
.course-card:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(31, 42, 37, .12), var(--shadow-lift); }
.course-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.course-glyph { font-size: 56px; line-height: 1; color: var(--pine); }
.course-card-title { font-size: clamp(24px, 2.2vw, 30px); font-weight: 500; line-height: 1.35; }
.course-card-sum { font-size: 15.5px; line-height: 1.75; color: #3A4640; }
.course-card-first { display: grid; gap: 4px; margin: 0; padding: 12px 0 0; list-style: none; box-shadow: inset 0 1px var(--hairline); }
.course-card-first li { display: grid; grid-template-columns: 30px minmax(0, 1fr); font-size: 14.5px; line-height: 1.6; color: #4A554F; }
.course-card-first .num { color: var(--muted); font-size: 13px; }
.course-card-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: auto; padding-top: 6px; }
.course-card .link-arrow { color: var(--vermilion-text); font-size: 14px; font-weight: 600; }
.hub-start { padding-top: clamp(56px, 7vw, 96px); }
.start-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; counter-reset: start; }
.start-path { display: grid; align-content: start; gap: 10px; padding-top: 18px; box-shadow: inset 0 1px var(--hairline); counter-increment: start; }
.start-path::before { content: counter(start, decimal-leading-zero); font-family: var(--display); font-size: 15px; color: var(--vermilion-text); }
.start-path-title { font-size: 21px; font-weight: 500; line-height: 1.4; }
.start-path p { margin: 0; font-size: 15.5px; line-height: 1.75; color: #3A4640; }
@media (max-width: 1199px) {
  .start-paths { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
}
@media (max-width: 899px) {
  .course-cards { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .start-paths { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

/* ---------------------------------------------------------------- kanji cards */
.kanji-cards { display: grid; gap: 18px; margin: 8px 0 28px; padding: 0; list-style: none; }
.kanji-card .bezel-core {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  grid-template-areas: "face info" "face words";
  gap: 4px 26px;
  padding: clamp(18px, 2.4vw, 26px);
}
.kanji-face { grid-area: face; display: grid; justify-items: center; align-content: start; gap: 10px; }
/* The practice square of a copybook: a frame with dashed centre lines. */
.kanji-cell {
  display: grid;
  place-items: center;
  width: 120px;
  aspect-ratio: 1;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(180, 83, 47, .26) 50%, transparent 0) center / 8px 1px repeat-x,
    linear-gradient(rgba(180, 83, 47, .26) 50%, transparent 0) center / 1px 8px repeat-y,
    var(--paper);
  box-shadow: inset 0 0 0 1px rgba(180, 83, 47, .28);
}
.kanji-char { font-family: var(--display); font-size: 84px; line-height: 1; color: var(--ink); }
.kanji-strokes { color: var(--muted); }
.kanji-info { grid-area: info; min-width: 0; }
.kanji-meaning { margin: 2px 0 12px; font-family: var(--display); font-size: 21px; line-height: 1.45; }
.kanji-reads { display: grid; gap: 6px; margin: 0; }
.kanji-reads > div { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 12px; }
.kanji-reads dt {
  padding: 2px 9px;
  border-radius: 999px;
  background: rgba(43, 76, 64, .08);
  color: var(--pine);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.kanji-reads dd { margin: 0; font-size: 18px; line-height: 1.6; }
.kanji-sep { margin: 0 .3em; color: var(--muted); }
.okuri { color: var(--muted); }
.kanji-note { margin: 12px 0 0; font-size: 14.5px; line-height: 1.7; color: var(--muted); }
.kanji-words { grid-area: words; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin: 14px 0 0; padding: 0; list-style: none; }
.kanji-words li { padding: 10px 0; box-shadow: inset 0 1px var(--hairline); }
.kanji-word-ja { margin: 0; font-size: 19px; line-height: 1.9; }
.kanji-word-tr { margin: 0; font-size: 14px; line-height: 1.6; color: #4A554F; }
.kanji-words .say { width: 32px; height: 32px; }
@media (max-width: 639px) {
  .kanji-card .bezel-core { grid-template-columns: 88px minmax(0, 1fr); grid-template-areas: "face info" "words words"; gap: 4px 18px; padding: 16px; }
  .kanji-cell { width: 84px; }
  .kanji-char { font-size: 60px; }
  .kanji-meaning { font-size: 18px; margin-bottom: 8px; }
  .kanji-reads dd { font-size: 16px; }
  .kanji-words { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------------------------------------------------------- reading */
.reading {
  margin: 8px 0 28px;
  padding: clamp(22px, 3vw, 40px) clamp(20px, 3.2vw, 44px);
  border-radius: 22px;
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--ring);
}
.reading-title { margin: 0 0 18px; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.6; }
.reading-para + .reading-para { margin-top: 18px; padding-top: 18px; box-shadow: inset 0 1px var(--hairline); }
.reading-ja { margin: 0; font-size: 20px; line-height: 2.15; text-indent: 1em; }
.reading-tr { margin-top: 6px; }
.reading-tr summary {
  display: inline-flex;
  padding: 4px 12px;
  border-radius: 999px;
  color: var(--pine);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  box-shadow: inset 0 0 0 1px rgba(43, 76, 64, .18);
  transition-property: background-color;
  transition-duration: var(--t-small);
  transition-timing-function: var(--ease-enter);
}
.reading-tr summary::-webkit-details-marker { display: none; }
.reading-tr summary:hover { background: rgba(43, 76, 64, .08); }
.reading-tr[open] summary { background: var(--pine); color: var(--white); box-shadow: none; }
.reading-tr p { margin: 10px 0 0; font-size: 15.5px; line-height: 1.8; color: #3A4640; }
@media (max-width: 639px) {
  .reading { padding: 18px 16px; border-radius: 18px; }
  .reading-ja { font-size: 18px; line-height: 2.1; }
}
.chip-level { background: rgba(52, 70, 90, .09); color: var(--indigo); }

/* ---------------------------------------------------------------- our voices */
/* The headline plays like any example; the voice choice and, for readers
   without access, the browser-speech line sit under the actions. */
.lesson-headline-line { justify-content: flex-start; gap: 14px; margin-top: 22px; }
.lesson-headline-line .lesson-headline { margin-top: 0; }
.lesson-headline-line .say { margin-top: 10px; }
.lesson-voice { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 18px; }
.lesson-voice[hidden] { display: none; }
.lesson-voice .voice-pick { margin: 0; }
.lesson-voice .audio-note { margin: 0; }

/* ---------------------------------------------------------------- listening */
/* A listening item (course.js playListen): the scene and the question as text,
   one play button that turns into stop while it plays, a row of marks for the
   parts (scene, question, each line, the question again: the second speaker's
   lines in gold, the question in vermilion), the options as in choice, and
   the script behind a toggle until the set is checked. */
.listen-stage { display: grid; gap: 2px; }
.listen-scene { margin: 0; font-size: 16px; line-height: 2; color: #4A554F; }
.listen-q { margin: 0; font-size: 20px; line-height: 2.05; color: var(--ink); }
.listen-player { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 10px; }
.listen-play {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 6px 24px 6px 6px;
  border: 0;
  border-radius: 999px;
  background: rgba(43, 76, 64, .09);
  color: var(--pine);
  font-family: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition-property: background-color, color, transform;
  transition-duration: var(--t-small), var(--t-small), var(--t-micro);
  transition-timing-function: var(--ease-enter);
}
.listen-play:hover { background: rgba(43, 76, 64, .15); }
.listen-play:active { transform: scale(.98); }
.listen-icon { position: relative; display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--pine); color: var(--white); transition-property: background-color; transition-duration: var(--t-small); transition-timing-function: var(--ease-enter); }
.listen-icon .i { position: absolute; width: 18px; height: 18px; transition-property: opacity, transform; transition-duration: var(--t-small); transition-timing-function: var(--ease-enter); }
.listen-i-stop { opacity: 0; transform: scale(.6); }
.listen-play.is-playing { background: var(--pine); color: var(--white); }
.listen-play.is-playing:hover { background: var(--pine-deep); }
.listen-play.is-playing .listen-icon { background: rgba(255, 253, 248, .16); }
.listen-play.is-playing .listen-i-play { opacity: 0; transform: scale(.6); }
.listen-play.is-playing .listen-i-stop { opacity: 1; transform: none; }
.listen-steps { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; max-width: 100%; }
.listen-steps i { position: relative; display: block; width: 16px; height: 4px; border-radius: 2px; background: rgba(31, 42, 37, .12); overflow: hidden; }
.listen-steps i[data-kind="q"] { width: 8px; }
.listen-steps i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--pine);
  transform: scaleX(0);
  transform-origin: left center;
  transition-property: transform, opacity;
  transition-duration: var(--t-small);
  transition-timing-function: var(--ease-enter);
}
.listen-steps i[data-turn="1"]::after { background: var(--gold); }
.listen-steps i[data-kind="q"]::after { background: var(--vermilion); }
.listen-steps i.is-past::after { transform: none; opacity: .42; }
.listen-steps i.is-now::after { transform: none; animation: listen-now 1.1s cubic-bezier(.37, 0, .63, 1) var(--t-small) infinite alternate; }
@keyframes listen-now { to { opacity: .5; } }

.listen-toggle {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin-top: 14px;
  padding: 5px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--pine);
  font-family: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  text-align: left;
  box-shadow: inset 0 0 0 1px rgba(43, 76, 64, .18);
  transition-property: background-color, color;
  transition-duration: var(--t-small);
  transition-timing-function: var(--ease-enter);
}
.listen-toggle:hover { background: rgba(43, 76, 64, .08); }
.listen-toggle[aria-expanded="true"] { background: var(--pine); color: var(--white); box-shadow: none; }
.listen-toggle-note { font-size: 12px; font-weight: 500; color: var(--muted); }
.listen-script { margin-top: 12px; padding: 4px 18px; border-radius: 16px; background: var(--paper-2); animation: kt-fade var(--t-small) var(--ease-enter) both; }
.listen-script[hidden] { display: none; }
.listen-lines { margin: 0; padding: 0; list-style: none; }
.listen-line { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 10px 0; }
.listen-line + .listen-line { box-shadow: inset 0 1px var(--hairline); }
.listen-line.is-solo { grid-template-columns: minmax(0, 1fr); }
.listen-who { padding-top: 6px; font-family: var(--display); font-size: 15px; color: var(--pine); }
.listen-line[data-turn="1"] .listen-who { color: var(--amber-text); }
.listen-script .dialog-ja { font-size: 19px; }
.listen-script .say { width: 32px; height: 32px; }
@media (max-width: 767px) {
  .listen-q { font-size: 18px; }
  .listen-player { gap: 10px 14px; }
  .listen-script { padding: 2px 14px; }
  .listen-line { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .listen-who { padding-top: 0; font-size: 13px; }
  .listen-script .dialog-ja { font-size: 18px; }
}