/* Everyday learning, using the site's light and dark cyanotype tokens. */
.learn-hub-page .learn-main { width: min(100% - 2.5rem, 68rem); }
.learn-hub-page .hub-hero { max-width: 48rem; margin: 3.5rem 0 3rem; }
.hub-hero h1 { font-size: clamp(2.5rem, 7vw, 4.75rem); letter-spacing: -.045em; }
.hub-hero h1 .n1 { color: var(--blue); }
.hub-hero .lede { font-size: clamp(1.05rem, 2vw, 1.25rem); max-width: 49ch; }
.hub-chip { border: 0; padding-left: 0; padding-right: 1rem; font-family: var(--sans); letter-spacing: 0; text-transform: none; font-size: .85rem; }
.hub-chip::before { content: '·'; color: var(--accent); margin-right: .5rem; }
.hub-cta { min-height: 48px; padding: .65rem 1rem; border-radius: .5rem; font-family: var(--sans); font-size: .95rem; line-height: 1.4; }
.hub-cta-continue.hub-cta-primary span { color: inherit; }
.hub-cta-lang { margin-left: auto; }
.starter { border-top: 1px solid var(--line); padding-top: 2.2rem; }
.starter-heading { display: flex; justify-content: space-between; gap: 1.5rem; align-items: end; }
.starter-eyebrow { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; color: var(--blue); margin: 0 0 .85rem; }
.starter h2, .decision h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.2; letter-spacing: -.025em; text-wrap: balance; margin: 0 0 .75rem; }
.starter-heading p:not(.starter-eyebrow) { max-width: 52ch; color: var(--dim); margin: 0; }
.starter-total { color: var(--dim); font-size: .8rem; max-width: 15ch; flex: 0 0 auto; text-align: right; }
.starter-progress { display: flex; align-items: center; gap: .8rem; font-size: .8rem; color: var(--dim); margin: 1.75rem 0 1rem; flex-wrap: wrap; }
.starter-progress label { color: var(--fg); }
.starter-progress progress { appearance: none; width: 7rem; height: 5px; border: none; background: var(--line); accent-color: var(--green); }
.starter-progress progress::-webkit-progress-bar { background: var(--line); border-radius: 3px; }
.starter-progress progress::-webkit-progress-value { background: var(--green); border-radius: 3px; }
.starter-progress progress::-moz-progress-bar { background: var(--green); }
.starter-lessons { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.starter-lessons li { min-width: 0; }
.starter-lessons a { display: flex; gap: .8rem; height: 100%; padding: 1.25rem; background: var(--card); border: 1px solid var(--line); border-radius: .65rem; color: var(--fg); text-decoration: none; }
.starter-lessons a:hover { border-color: var(--blue); background: var(--panel); }
.starter-number { color: var(--blue); font-family: var(--mono); font-size: .8rem; padding-top: .12rem; }
.starter-card-body { display: flex; flex-direction: column; min-width: 0; }
.starter-card-body strong { font-size: 1.05rem; line-height: 1.35; margin-bottom: .6rem; }
.starter-card-body > span:not(.starter-card-meta) { color: var(--dim); font-size: .88rem; line-height: 1.5; }
.starter-card-body .starter-card-meta { font-size: .75rem; color: var(--blue); padding-top: 1rem; margin-top: auto; display: flex; gap: .6rem; align-items: center; }
.starter-arrow { margin-left: auto; color: var(--dim); }
.starter-lessons .is-done a { border-color: var(--green); }
.starter-note { font-size: .85rem; color: var(--dim); margin: 1rem 0 0; }
.decision { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; margin: 3.5rem 0; padding: 2rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--panel); }
.decision .starter-eyebrow { color: var(--accent); }
.decision h2 { font-size: 1.5rem; }
.message-sample { background: var(--bg); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: .4rem; padding: 1rem 1.2rem; margin-top: 1.2rem; }
.message-sample > span { font-size: .72rem; color: var(--dim); }
.message-sample blockquote { margin: .5rem 0 0; font-size: 1.05rem; line-height: 1.5; }
.decision-hint { font-size: .8rem; color: var(--dim); margin: 1rem 0 0; }
.decision-choices { align-self: center; }
.decision-choices details { border-bottom: 1px solid var(--line); }
.decision-choices summary { padding: 1rem .3rem; cursor: pointer; min-height: 48px; line-height: 1.45; font-size: .95rem; }
.decision-choices details[open] summary { color: var(--blue); }
.decision-choices details p { margin: 0 .3rem 1rem; font-size: .9rem; color: var(--dim); }
.decision-link { display: inline-block; padding: 1rem 0 0; font-size: .9rem; }
.hub-path { margin-top: 3rem; }
.hub-path > .slot-label, .hub-how > .slot-label { font: 650 1.5rem / 1.3 var(--sans); letter-spacing: -.02em; text-transform: none; }
.hub-path > .slot-label::before, .hub-how > .slot-label::before { content: none; }
.hub-controls { margin-bottom: 1.5rem; }
.hub-search input { min-height: 48px; border-radius: .4rem; }
.hub-filter { min-height: 44px; padding: .45rem .8rem; font-family: var(--sans); border-radius: .4rem; }
.hub-filters { margin-top: .6rem; }
.path-track { margin-top: .75rem; border: 1px solid var(--line); border-radius: .5rem; padding: 0 1.25rem; }
.path-track > summary { display: flex; align-items: center; min-height: 64px; gap: .75rem; cursor: pointer; list-style: none; }
.path-track > summary::-webkit-details-marker { display: none; }
.path-track > summary::before { content: '+'; font-size: 1.25rem; color: var(--blue); }
.path-track[open] > summary::before { content: '−'; }
.path-track > summary .path-track-label { margin: 0; }
.path-track > .path-track-why { margin-top: 0; }
.track-count { margin-left: auto; font-size: .8rem; color: var(--dim); text-align: right; }
.path-track[open] { padding-bottom: 1rem; }
.path-track-label { font-family: var(--sans); font-size: 1.1rem; letter-spacing: 0; text-transform: none; }
.path-unit-link { padding: 1.1rem .25rem; }
.path-title { font-size: 1rem; }
.path-title, .path-why, .path-attack { display: block; }
.path-why { margin-top: .35rem; }
.path-body, .path-lesson a { min-width: 0; }
.path-why, .lesson-list-blurb { line-height: 1.5; }
.unit-lessons summary { min-height: 44px; display: list-item; padding-block: .5rem; }
.hub-progress-actions { display: flex; flex-wrap: wrap; gap: .6rem 1.25rem; }
.hub-text-btn { min-height: 44px; }
[data-progress-feedback] { font-size: .9rem; color: var(--green); }
[data-progress-feedback].is-error { color: var(--red); }
.lesson-jumps { display: flex; gap: .4rem 1rem; flex-wrap: wrap; padding: .65rem 0; margin: 1.6rem 0; border-block: 1px solid var(--line); }
.lesson-jumps a { display: inline-flex; align-items: center; min-height: 44px; font-size: .88rem; }
.lesson-language { display: inline-flex; min-height: 44px; align-items: center; font-size: .85rem; }
.lesson-body { font-size: 1.06rem; }
.lesson-body h2 { scroll-margin-top: 1.5rem; }
.lesson-starter .lesson-head h1 { font-size: clamp(2rem, 4vw, 3rem); }
.lesson-starter .picture { max-width: 32rem; margin-inline: auto; }
.lesson-starter .outcome-list { gap: .55rem; }
.quiz { border-top: 1px solid var(--line); padding-top: 1.75rem; margin-top: 2.5rem; }
.quiz > .slot-label { font: 650 1.4rem / 1.3 var(--sans); letter-spacing: -.02em; text-transform: none; }
.quiz > .slot-label::before { content: none; }
.quiz-intro { color: var(--dim); font-size: .9rem; margin: -.3rem 0 1.25rem; }
.quiz-position { color: var(--blue); font-family: var(--mono); font-size: .8rem; margin-bottom: .6rem; }
.quiz .q { padding: 1.25rem; border-radius: .65rem; }
.quiz.is-enhanced .q-prompt::before { content: none; }
.q-choices { gap: .6rem; }
.q-choices button { min-height: 48px; padding: .8rem; border-radius: .4rem; }
.quiz-nav { display: flex; gap: .65rem; flex-wrap: wrap; }
.quiz-nav button { min-height: 44px; font: inherit; font-size: .9rem; border: 1px solid var(--line); color: var(--fg); background: var(--card); padding: .55rem .9rem; border-radius: .4rem; cursor: pointer; }
.quiz-nav button:disabled { opacity: .5; cursor: default; }
.quiz-nav [data-quiz-next]:not(:disabled) { background: var(--blue); color: var(--button-text); border-color: var(--blue); }
.quiz-score { font-size: .85rem; margin-bottom: 0; }
.lesson-completion { padding: 1rem; border: 1px solid var(--line); border-radius: .5rem; }
.lesson-completion.is-complete { background: var(--green-soft); border-color: var(--green); }
.lesson [id] { scroll-margin-top: 1rem; }
.references summary { min-height: 44px; padding-block: .65rem; }
.quiz [hidden], .lesson-completion[hidden], .hub-cta[hidden], .starter [hidden], [data-progress-feedback][hidden], [data-progress-controls][hidden] { display: none !important; }
.lesson-progress-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.lesson-language { margin-left: 1.25rem; }
@media (max-width: 850px) {
  .starter-lessons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .decision { gap: 1.5rem; padding: 1.5rem; }
}
@media (max-width: 560px) {
  .learn-hub-page .learn-main { width: calc(100% - 2rem); }
  .learn-hub-page .hub-hero { margin-top: 2rem; margin-bottom: 2rem; }
  .hub-cta-row { gap: .55rem; }
  .hub-cta-lang { margin-left: 0; }
  .starter-heading { display: block; }
  .starter-total { display: block; max-width: none; text-align: left; margin-top: 1rem; }
  .starter-lessons { grid-template-columns: 1fr; }
  .starter-lessons a { padding: 1.1rem; }
  .starter-card-body strong { margin-bottom: .4rem; }
  .starter-card-body .starter-card-meta { padding-top: .65rem; }
  .decision { grid-template-columns: 1fr; padding: 1.25rem; margin-block: 2.5rem; }
  .starter-progress { gap: .5rem .7rem; }
  .starter-progress progress { width: 4rem; }
  .hub-filter { font-size: .85rem; padding-inline: .65rem; }
  .quiz .q { padding: .9rem; }
  .lesson-jumps { gap: .25rem .9rem; }
  .lesson-body { font-size: 1rem; }
}
@media print {
  .lesson-jumps, .quiz-nav, .quiz-position, .hub-progress-actions, .lesson-progress-actions { display: none !important; }
  .quiz.is-enhanced .q[hidden] { display: block !important; }
}