/* One learning shell. Worlds supply their own instruments, never another app frame. */
html:lang(en) {
  --journey-width: 1080px;
  --journey-pad: clamp(22px, 4vw, 44px);
}
html:lang(en) .learn,
html:lang(en) body.is-observatory .learn {
  max-width: var(--journey-width);
}
html:lang(en) body[data-view='star'] .main,
html:lang(en) body[data-view='path'] .main,
html:lang(en) body[data-view='flow'] .main {
  padding-top: 32px;
}
html:lang(en) .view-bar {
  font-size: 12px;
  margin-bottom: 24px;
  min-width: 0;
}
html:lang(en) .learning-experience {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 4px;
  margin: 0 0 36px;
  padding: 0;
  overflow: clip;
}
html:lang(en) .learning-experience > .star-head {
  padding: 30px var(--journey-pad) 0;
}
html:lang(en) .learning-experience .star-cons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font: 400 11px/1.6 var(--sans);
  color: var(--ink-3);
}
html:lang(en) .learning-experience .star-level,
html:lang(en) .learning-experience .lit-badge {
  font-size: 10px;
  border-radius: 2px;
  padding: 1px 6px;
}
html:lang(en) .learning-experience .star-title {
  max-width: 850px;
  font: 400 clamp(31px, 4.1vw, 48px)/1.07 var(--serif);
  letter-spacing: -.035em;
  margin: 18px 0 12px;
}
html:lang(en) .learning-experience .star-context {
  font: 400 14px/1.65 var(--sans);
  color: var(--ink-2);
  margin: 0 0 8px;
}
html:lang(en) .learning-experience .star-bounds {
  font: 400 11px/1.7 var(--sans);
  color: var(--ink-3);
  margin: 0;
}
html:lang(en) .learning-experience > .steps {
  display: flex;
  gap: clamp(17px, 3vw, 34px);
  overflow-x: auto;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--line-2);
  margin: 22px var(--journey-pad) 0;
  padding: 0;
}
html:lang(en) .learning-experience .step {
  position: relative;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  border: 0;
  min-height: 48px;
  padding: 10px 0 14px;
  color: var(--ink-2);
  font: 400 12px/1.4 var(--sans);
}
html:lang(en) .learning-experience .step:disabled { color: var(--ink-3); opacity: .6; }
html:lang(en) .learning-experience .step-num {
  display: inline;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink-3);
  font: 400 10px/1.4 var(--sans);
}
html:lang(en) .learning-experience .step.is-active { color: var(--ink); }
html:lang(en) .learning-experience .step.is-active::after {
  content: '';
  position: absolute;
  height: 2px;
  inset: auto 0 -1px;
  background: var(--ink);
}
html:lang(en) .learning-experience > .beat-body { padding: 30px var(--journey-pad); }
html:lang(en) .learning-experience .scene {
  font: 400 clamp(22px, 2.3vw, 27px)/1.5 var(--serif);
  max-width: 840px;
}
html:lang(en) .learning-experience .ask { font-size: 15px; font-weight: 500; margin-top: 28px; }
html:lang(en) .learning-experience .option {
  padding: 16px 19px;
  border-radius: 3px;
  background: transparent;
  font: 400 14px/1.6 var(--sans);
}
html:lang(en) .learning-experience .option.is-picked { background: var(--accent-soft); }
html:lang(en) .learning-experience .hint { font-size: 12px; line-height: 1.7; }
html:lang(en) .learning-experience > .step-bar {
  position: static;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  background: transparent;
  padding: 20px var(--journey-pad);
  margin: 0;
  gap: 14px;
}
html:lang(en) .learning-experience .step-back { border-radius: 3px; }
html:lang(en) .learning-experience .step-where { font-size: 11px; }
html:lang(en) .learning-experience .reveal,
html:lang(en) .learning-experience .shared-lever,
html:lang(en) .learning-experience .lab,
html:lang(en) .learning-experience .twin-card,
html:lang(en) .learning-experience .own-light { border-radius: 3px; }
html:lang(en) .learning-experience .wormhole {
  border-radius: 3px;
  font-size: 11px;
  line-height: 1.6;
  margin-top: 12px;
}

/* Bespoke stages live inside precisely the same title, chapter and return system. */
html:lang(en) .experience-world.observatory,
html:lang(en) .experience-world.workshop {
  --obs-bg: var(--surface);
  --obs-raised: var(--surface-2);
  --obs-line: var(--line-2);
  --obs-ink: var(--ink);
  --obs-muted: var(--ink-2);
  --wk-paper: var(--surface);
  --wk-ink: var(--ink);
  --wk-blue: var(--ink);
  --wk-rule: var(--line-2);
  --wk-orange: #b76b42;
  --wk-gold: var(--accent);
  background: transparent;
  color: var(--ink);
  padding: 0;
  border: 0;
  border-radius: 0;
  margin: 0;
  overflow: visible;
  box-shadow: none;
}
html:lang(en) .experience-world .obs-head,
html:lang(en) .experience-world .wk-head,
html:lang(en) .experience-world.wk-phase-1 .wk-head { padding: 26px var(--journey-pad) 0; }
html:lang(en) .experience-world .obs-head h2,
html:lang(en) .experience-world .wk-head h2 {
  font: 400 clamp(25px, 2.7vw, 32px)/1.15 var(--serif);
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0;
  max-width: 850px;
}
html:lang(en) .experience-world .obs-stage,
html:lang(en) .experience-world .wk-stage { padding: 24px var(--journey-pad) 30px; }
html:lang(en) .experience-world .obs-foot,
html:lang(en) .experience-world .wk-foot {
  padding: 20px var(--journey-pad);
  border-top-color: var(--line);
}
html:lang(en) .experience-world :is(.obs-eyebrow,.wk-label) { color: var(--ink-3); }
html:lang(en) .experience-world :is(.obs-scene-intro p,.obs-stage-intro,.wk-scene-copy p,.wk-light-scene,.wk-run-intro p) {
  color: var(--ink-2);
  font: 400 15px/1.8 var(--sans);
}
html:lang(en) .experience-world :is(.obs-note,.obs-context-note,.wk-note,.wk-foot>span,.obs-bet-reply,.wk-bet-reply,.wk-boundary-contrast,.wk-model-boundary,.wk-connected-bounds p,.wk-world>p,.obs-comparison-reading p,.wk-comparison-copy p,.obs-difference-reply,.wk-difference-reply,.wk-mobility-results>p) { color: var(--ink-2); }
html:lang(en) .experience-world :is(.obs-choice,.obs-difference-choice,.wk-pick,.wk-difference-choice) {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
  border-radius: 3px;
  font: 400 14px/1.6 var(--sans);
}
html:lang(en) .experience-world :is(.obs-choice,.obs-difference-choice,.wk-pick,.wk-difference-choice):hover,
html:lang(en) .experience-world :is(.obs-choice,.obs-difference-choice,.wk-pick,.wk-difference-choice).is-picked {
  background: var(--accent-soft);
  color: var(--ink);
  border-color: var(--accent);
}
html:lang(en) .experience-world :is(.obs-choice-index,.wk-note) { color: var(--ink-3); }
html:lang(en) .experience-world :is(.obs-button,.wk-button) {
  min-height: 44px;
  border-radius: 3px;
  border-color: var(--line-2);
  background: transparent;
  color: var(--ink);
  font: 500 12px/1.4 var(--sans);
}
html:lang(en) .experience-world :is(.obs-primary,.wk-primary) {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
html:lang(en) .experience-world :is(.obs-primary,.wk-primary):not(:disabled):hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
  transform: none;
}
html:lang(en) .experience-world :is(.obs-back,.wk-text-button) { color: var(--ink-2); min-height: 44px; }
html:lang(en) .experience-world :is(.obs-control-label,.obs-range-labels,.obs-constant,.obs-holds,.wk-holds,.wk-action-invitation) { color: var(--ink-2); }
html:lang(en) .experience-world :is(.obs-discovery>p,.wk-insight>p:not(.wk-note)) { color: var(--ink); }
html:lang(en) .experience-world :is(.obs-discovery,.obs-application-feedback,.wk-insight:has(>.wk-label)) { border-left-color: var(--accent); }
html:lang(en) .experience-world :is(.obs-difference,.wk-difference,.wk-readout,.wk-model-details) { border-color: var(--line-2); }
html:lang(en) .experience-world :is(.obs-application-feedback p,.obs-completion>p,.wk-completion>p) { color: var(--ink-2); }
html:lang(en) .experience-world .obs-completion {
  margin: 34px 0 0;
  padding: 38px 0 0;
  background: transparent;
  border-color: var(--line-2);
}
html:lang(en) .experience-world .obs-completion :is(h3,.obs-carry p) { color: var(--ink); }
html:lang(en) .experience-world :is(.obs-carry,.wk-completion:not(:empty)) { border-color: var(--line-2); }
html:lang(en) .experience-world :is(.obs-lit-symbol,.wk-lit-star,.obs-completion>.obs-eyebrow) { color: var(--accent); text-shadow: none; }
html:lang(en) .experience-world :is(.obs-own,.wk-own,.obs-sources,.wk-sources) {
  --obs-line: var(--line-2);
  --ink: inherit;
  --ink-2: inherit;
  --ink-3: inherit;
  --surface: inherit;
  --surface-2: inherit;
  --raised: inherit;
  --line: inherit;
  --line-2: inherit;
  --accent: inherit;
  --accent-fill: inherit;
  --on-accent: inherit;
  color: inherit;
  border-color: var(--line-2);
}
html:lang(en) .experience-world :is(.obs-own,.wk-own,.obs-sources,.wk-sources) :is(summary,ul) { color: var(--ink-2); }

/* Controls keep the atlas vocabulary; only the live instruments retain world colour. */
html:lang(en) .experience-world .wk-upgrade-control { background: var(--bg); border-color: var(--line-2); }
html:lang(en) .experience-world :is(.wk-plus,.wk-minus) { border-color: var(--line-2); color: var(--ink); min-height: 44px; }
html:lang(en) .experience-world .wk-plus { background: var(--ink); color: var(--bg); border-color: var(--ink); }
html:lang(en) .experience-world .wk-readout>div>strong { color: var(--ink); }
html:lang(en) .experience-world :is(.wk-readout>div>span:last-child,.wk-readout>.wk-pending) { color: var(--ink-2); }
html:lang(en) .experience-world .wk-flow-wait { color: #ac6039; }
html:lang(en) .experience-world .wk-flow-good { color: var(--ink-2); }
html:lang(en) .experience-world .wk-parallel-results { background: var(--line); border-color: var(--line); }
html:lang(en) .experience-world .wk-parallel-results>div { background: var(--bg); }
html:lang(en) .experience-world .wk-parallel-results>div.is-active { background: var(--raised); }
html:lang(en) .experience-world .wk-parallel-results strong { color: var(--ink); }
html:lang(en) .experience-world .wk-parallel-results>div>span:last-child { color: var(--ink-2); }
html:lang(en) .experience-world :is(.wk-switches,.obs-context-switch) { background: var(--surface-2); border-color: var(--line-2); }
html:lang(en) .experience-world :is(.wk-switch,.obs-context-option) { color: var(--ink-2); }
html:lang(en) .experience-world :is(.wk-switch,.obs-context-option).is-active { color: var(--bg); background: var(--ink); }
html:lang(en) .experience-world .wk-mobility-actions>.wk-button[aria-pressed=true] { background: var(--accent-soft); border-color: var(--accent); }
html:lang(en) .experience-world .wk-own-world { border: 0; background: transparent; margin: 35px 0 0; padding: 0; }
html:lang(en) .experience-world .wk-station-top .wk-label { color: #b1c9c2; }
html:lang(en) .experience-world .wk-production .wk-label { color: #b1c9c2; }
html:lang(en) .experience-world .obs-water-scene { color: #edf0e8; }
html:lang(en) .experience-world .obs-context-option,
html:lang(en) .experience-world .wk-world-tab { min-height: 44px; }
html:lang(en) .experience-world :focus-visible { outline-color: var(--accent); }

/* A question or subject is a route through this same atlas, not a separate dashboard. */
html:lang(en) .path-bar {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 0 0 18px;
}
html:lang(en) .path-title { font-weight: 400; font-size: 13px; }
html:lang(en) .path-count { font-size: 11px; }
html:lang(en) .cons-card {
  border: 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line);
  padding: 24px 0;
  border-radius: 0;
  background: transparent;
}
html:lang(en) .cons-card.is-constellation.is-done { box-shadow: none; }
html:lang(en) .cons-grid { gap: 24px 36px; }
html:lang(en) .cons-card h3 { font: 400 29px/1.15 var(--serif); letter-spacing: -.025em; }
html:lang(en) .cons-card header p { font-size: 12px; line-height: 1.7; }
html:lang(en) .cons-star { padding: 12px 0; border-radius: 0; }
html:lang(en) .cons-star-title { font: 400 18px/1.35 var(--serif); }
html:lang(en) .cons-star-level { font-size: 10px; }
html:lang(en) .cons-progress-chip { border-radius: 3px; font-size: 11px; }
html:lang(en) .focus-menu summary { border-radius: 3px; font-size: 12px; min-height: 44px; }
html:lang(en) .focus-panel { border-radius: 3px; }
html:lang(en) .focus-option { border-radius: 2px; font-size: 12px; min-height: 44px; }

@media (max-width: 720px) {
  html:lang(en) { --journey-pad: 20px; }
  html:lang(en) body[data-view='star'] .main,
  html:lang(en) body[data-view='path'] .main,
  html:lang(en) body[data-view='flow'] .main { padding-top: 22px; }
  html:lang(en) .learning-experience { margin-inline: -20px; border-inline: 0; border-radius: 0; }
  html:lang(en) .learning-experience > .star-head { padding-top: 24px; }
  html:lang(en) .learning-experience .star-title { font-size: 33px; margin-top: 14px; }
  html:lang(en) .learning-experience .star-cons { font-size: 10px; }
  html:lang(en) .learning-experience .star-context { font-size: 12px; }
  html:lang(en) .learning-experience .star-bounds { font-size: 10px; }
  html:lang(en) .learning-experience > .steps { margin-top: 16px; gap: 22px; }
  html:lang(en) .learning-experience .step { font-size: 11px; padding-bottom: 12px; }
  html:lang(en) .learning-experience > .beat-body { padding-block: 24px; }
  html:lang(en) .learning-experience .scene { font-size: 22px; line-height: 1.55; }
  html:lang(en) .learning-experience .option { font-size: 13px; padding: 14px; }
  html:lang(en) .learning-experience > .step-bar { padding-block: 18px; flex-wrap: wrap; }
  html:lang(en) .learning-experience .step-where { font-size: 10px; }
  html:lang(en) .learning-experience .step-bar .btn { font-size: 11px; }
  html:lang(en) .experience-world .obs-head,
  html:lang(en) .experience-world .wk-head,
  html:lang(en) .experience-world.wk-phase-1 .wk-head { padding-top: 23px; }
  html:lang(en) .experience-world .obs-head h2,
  html:lang(en) .experience-world .wk-head h2 { font-size: 26px; }
  html:lang(en) .experience-world .obs-stage,
  html:lang(en) .experience-world .wk-stage { padding-top: 22px; }
  html:lang(en) .experience-world :is(.obs-scene-intro p,.obs-stage-intro,.wk-scene-copy p,.wk-light-scene,.wk-run-intro p) { font-size: 13px; }
  html:lang(en) .experience-world .obs-squares,
  html:lang(en) .experience-world .obs-squares.is-preview { margin-inline: 0; }
  html:lang(en) .experience-world .wk-production { margin-inline: -20px; }
  html:lang(en) .experience-world .wk-foot,
  html:lang(en) .experience-world .obs-foot { align-items: center; flex-wrap: wrap; gap: 10px 18px; }
  html:lang(en) .experience-world :is(.wk-pick,.obs-choice,.obs-difference-choice,.wk-difference-choice) { font-size: 12px; }
  html:lang(en) .experience-world .obs-completion { margin-inline: 0; padding-inline: 0; }
  html:lang(en) .experience-world .wk-parallel-results>div { padding: 13px; }
  html:lang(en) .cons-star-title { font-size: 17px; }
  html:lang(en) .cons-grid { grid-template-columns: 1fr; }
}

html:lang(en) .experience-world input.obs-range {
  background: linear-gradient(90deg, var(--ink-3), var(--line-2)) center/100% 3px no-repeat;
}
html:lang(en) .experience-world input.obs-range::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--ink-3), var(--line-2));
}
html:lang(en) .experience-world input.obs-range::-webkit-slider-thumb {
  border-color: var(--surface);
  outline-color: var(--ink-2);
  background: var(--ink-2);
  box-shadow: 0 0 0 3px var(--surface);
}
html:lang(en) .experience-world input.obs-range::-moz-range-track {
  background: linear-gradient(90deg, var(--ink-3), var(--line-2));
}
html:lang(en) .experience-world input.obs-range::-moz-range-thumb {
  border-color: var(--surface);
  outline-color: var(--ink-2);
  background: var(--ink-2);
}

/* Completion belongs to the relationship, whichever instrument revealed it. */
html:lang(en) .learning-experience :is(.wk-completion,.obs-completion):has(>.lit-panel) {
  max-width: none;
  margin: 32px 0 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
}
html:lang(en) .learning-experience .lit-panel {
  color: var(--ink);
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line-2);
  border-radius: 0;
  margin: 28px 0 0;
  padding: 30px 0 0;
  text-align: left;
}
html:lang(en) .learning-experience .lit-panel>.bloom {
  width: 150px;
  margin: 0 auto 20px;
}
html:lang(en) .learning-experience .lit-panel>h2 {
  color: var(--ink);
  font: 400 32px/1.15 var(--serif);
  letter-spacing: -.025em;
  margin: 0 0 14px;
}
html:lang(en) .learning-experience .lit-panel :is(.lit-done,.lit-pattern) {
  max-width: 800px;
  margin: 14px 0;
}
html:lang(en) .learning-experience .lit-panel>.lit-done {
  color: var(--ink);
  font: 400 22px/1.5 var(--serif);
}
html:lang(en) .learning-experience .lit-panel>.lit-pattern { color: var(--ink-2); font: 400 13px/1.8 var(--sans); }
html:lang(en) .learning-experience .lit-panel .twin-card {
  color: var(--ink);
  border-radius: 3px;
  background: var(--bg);
  padding: 18px;
}
html:lang(en) .learning-experience .lit-panel .twin-title { font: 400 24px/1.2 var(--serif); }
html:lang(en) .learning-experience .lit-panel .twin-hint { font-size: 11px; line-height: 1.6; }
html:lang(en) .learning-experience .lit-panel :is(.lit-note,.lit-note.is-bridge) { color: var(--ink-2); font-size: 12px; line-height: 1.7; }
html:lang(en) .learning-experience .lit-panel>.sources { text-align: left; }
html:lang(en) .learning-experience .lit-panel>.use-card { background: var(--accent-soft); border-radius: 3px; text-align: left; }
html:lang(en) .learning-experience .lit-panel :is(.use-when,.use-try) { color: var(--ink); }
html:lang(en) .learning-experience .lit-panel>.own-light { text-align: left; }

/* The Universe is the same atlas with a dark relational instrument inside it. */
html:lang(en) .connected-universe { max-width: var(--atlas-width); }
html:lang(en) .universe-home {
  --uh-ink: var(--ink);
  --uh-muted: var(--ink-2);
  --uh-line: var(--line);
  background: transparent;
  color: var(--ink);
  border: 0;
  overflow: visible;
}
html:lang(en) .uh-header {
  padding: 0 0 32px;
  border-color: var(--line);
}
html:lang(en) .uh-header h1 { font-size: clamp(38px, 4.4vw, 60px); }
html:lang(en) .uh-header .uh-eyebrow,
html:lang(en) .uh-detail .uh-eyebrow,
html:lang(en) .uh-rail .uh-eyebrow { color: var(--ink-3); }
html:lang(en) .uh-tools .uh-text-button { color: var(--ink-2); border-color: var(--line-2); min-height: 44px; }
html:lang(en) .uh-tools .uh-text-button:hover { color: var(--ink); }
html:lang(en) .uh-workspace { margin-top: 28px; border: 1px solid var(--line); border-radius: 3px; overflow: clip; }
html:lang(en) .uh-detail { background: var(--surface); border-color: var(--line); color: var(--ink); }
html:lang(en) .uh-detail h2 { color: var(--ink); }
html:lang(en) .uh-detail :is(.uh-context,.uh-bridge p,.uh-invitation,.uh-carry p) { color: var(--ink-2); }
html:lang(en) .uh-detail .uh-bounds { color: var(--ink-3); }
html:lang(en) .uh-detail :is(.uh-understood p,.uh-bridge .uh-bridge-question,.uh-pattern strong) { color: var(--ink); }
html:lang(en) .uh-detail :is(.uh-understood,.uh-carry) { border-color: var(--line); }
html:lang(en) .uh-detail .uh-bridge { border-color: var(--accent); }
html:lang(en) .uh-detail-symbol { color: var(--accent); }
html:lang(en) .uh-detail .uh-field { color: var(--ink-2); }
html:lang(en) .uh-detail .uh-action { color: var(--ink); border-color: var(--line-2); }
html:lang(en) .uh-detail .uh-primary { color: var(--bg); background: var(--ink); border-color: var(--ink); }
html:lang(en) .uh-detail .uh-primary:hover { background: var(--ink-2); }
html:lang(en) .uh-rail { border: 0; padding: 28px 0 0; }
html:lang(en) .uh-rail :is(.uh-light-button,.uh-question,.uh-empty-note p) { color: var(--ink); }
html:lang(en) .uh-light-button { border-color: var(--line-2); border-radius: 3px; }
html:lang(en) .uh-light-button.is-active { border-color: var(--accent); background: var(--accent-soft); }
html:lang(en) .uh-rail :is(.uh-light-field,.uh-question small) { color: var(--ink-3); }
html:lang(en) .uh-question { border-color: var(--line); }
html:lang(en) .universe-home button:focus-visible { outline-color: var(--accent); }
/* The canvas labels must stay legible against its fixed dark sky. */
html:lang(en) .uh-scene .uh-eyebrow { color: #9eb9ba; }
html:lang(en) .uh-scene .uh-star { color: #a1b6bd; }

@media(max-width:720px) {
  html:lang(en) .learning-experience .lit-panel>h2 { font-size: 28px; }
  html:lang(en) .learning-experience .lit-panel>.lit-done { font-size: 21px; }
  html:lang(en) .learning-experience .lit-panel .twin-title { font-size: 22px; }
  html:lang(en) .uh-header h1 { font-size: 38px; }
  html:lang(en) .uh-tools { margin-top: 18px; }
}
@media(max-width:650px) {
  html:lang(en) .universe-home { margin-inline: 0; }
  html:lang(en) .uh-workspace { margin-inline: -20px; border-inline: 0; border-radius: 0; }
  html:lang(en) .uh-header { padding-bottom: 24px; }
  html:lang(en) .uh-detail { padding: 26px 20px 30px; }
  html:lang(en) .uh-rail { padding-inline: 0; }
}

/* Every chapter stays named on small screens; the rail scrolls rather than collapsing to numbers. */
html:lang(en) .learning-experience .step .step-label { display: inline; white-space: nowrap; }
html:lang(en) .learning-experience .experience-world .step-bar {
  position: static;
  flex: 1;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
}

/* Learner preferences steer Home recommendations through the existing ranking model. */
html:lang(en) .ds-direction { display:flex; justify-content:flex-end; margin:-28px 0 24px; position:relative; z-index:5; }
html:lang(en) .ds-direction .focus-menu summary { background:transparent; border:1px solid var(--line); border-radius:3px; }
html:lang(en) .ds-direction .focus-panel { right:0; left:auto; max-height:65vh; overflow:auto; }
@media(max-width:720px) { html:lang(en) .ds-direction { margin:-12px 0 20px; justify-content:flex-start; } html:lang(en) .ds-direction .focus-panel { left:0; right:auto; max-width:calc(100vw - 40px); } }

/* Phone polish: learning labels must remain readable, including long source text. */
html:lang(en) .learning-experience :is(.zone-seg,.meter-label,.step-where),
html:lang(en) .path-name {
  white-space: normal;
  text-overflow: clip;
  overflow: visible;
  overflow-wrap: anywhere;
}
html:lang(en) .learning-experience button { border-radius: 3px; }
html:lang(en) .learning-experience :is(.zone-card,.build-outcome,.bridge) { border-radius: 3px; }
@media(max-width:720px) {
  html:lang(en) { --phone-dock-height: 60px; }
  html:lang(en) .dock {
    height: calc(var(--phone-dock-height) + env(safe-area-inset-bottom, 0px));
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom, 0px));
    align-items: stretch;
  }
  html:lang(en) .dock a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0;
    gap: 2px;
    font-size: 10px;
    line-height: 14px;
  }
  html:lang(en) .dock-icon { height: 20px; line-height: 20px; }
  html:lang(en) .main {
    padding-inline: 20px;
    padding-bottom: calc(var(--phone-dock-height) + env(safe-area-inset-bottom, 0px) + 24px);
  }
  html:lang(en) .universe { height: calc(100dvh - var(--topbar) - var(--phone-dock-height) - env(safe-area-inset-bottom, 0px)); }
  html:lang(en) .step-bar { bottom: calc(var(--phone-dock-height) + env(safe-area-inset-bottom, 0px) + 8px); }
  html:lang(en) .learning-experience .zone-track {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(75px, 1fr));
    align-items: stretch;
  }
  html:lang(en) .learning-experience .zone-seg { padding: 8px; line-height: 1.5; }
  html:lang(en) .learning-experience .meter {
    grid-template-columns: minmax(0, 1fr) 42px;
    gap: 5px 10px;
  }
  html:lang(en) .learning-experience .meter-label { grid-column: 1 / -1; }
  html:lang(en) .learning-experience .step-bar { display: grid; grid-template-columns: 40px minmax(0, 1fr); }
  html:lang(en) .learning-experience .step-bar .btn { grid-column: 1 / -1; white-space: normal; text-align: center; min-height: 44px; }
  html:lang(en) .learning-experience .step-where { line-height: 1.5; }
  html:lang(en) .path-bar { flex-wrap: wrap; row-gap: 12px; }
  html:lang(en) .path-title { min-width: 0; }
}
@media(max-width:720px) {
  html:lang(en) .learning-experience { margin-bottom: 0; }
}

/* Navigation: three learning destinations, one optional account entrance. */
.topbar { background:var(--surface); border-bottom-color:var(--line-2); box-shadow:0 1px 0 var(--line); }
.topbar .brand { color:var(--ink); min-height:44px; flex-shrink:0; }
.topbar .brand-name { display:inline; }
.topbar .topright { gap:12px; }
.nav-icon { display:block; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.account-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:8px 12px; border:1px solid var(--line-2); border-radius:10px; background:var(--raised); color:var(--ink); font:500 13px/1.2 var(--sans); }
.account-btn:hover { background:var(--surface-2); border-color:var(--ink-2); }
.account-btn .nav-icon { width:20px; height:20px; }
.account-indicator { width:6px; height:6px; border-radius:50%; background:var(--good); }
.account-sheet { width:min(460px,calc(100% - 32px)); color:var(--ink); background:var(--surface); }
.account-sheet .drawer-head h2 { font-size:28px; }
.account-identity { margin:18px 0 24px; }
.account-identity p { color:var(--ink-2); font-size:14px; line-height:1.6; margin:8px 0; overflow-wrap:anywhere; }
.account-identity .account-name { font-weight:500; font-size:17px; color:var(--ink); }
.account-signin { display:grid; gap:10px; padding:20px; border:1px solid var(--line-2); border-radius:10px; background:var(--raised); }
.account-signin[hidden] { display:none; }
.account-signin h3 { margin:0; font:500 16px/1.4 var(--sans); }
.account-signin p { margin:0; font-size:13px; line-height:1.5; color:var(--ink-2); }
.account-signin label { font-size:13px; font-weight:500; }
.account-signin input { width:100%; min-height:46px; font-size:16px; }
.account-signin #accountSignInStatus:empty { display:none; }
.account-tools { margin-top:20px; }
.account-row { display:flex; width:100%; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; min-height:52px; border:0; border-bottom:1px solid var(--line); border-radius:0; color:var(--ink); background:transparent; font:400 14px/1.5 var(--sans); text-align:left; }
.account-row > button { min-height:44px; color:var(--ink); font-size:13px; }
.account-row .plan-link { text-decoration:underline; text-underline-offset:4px; }
.topbar :is(a,button):focus-visible,.dock a:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
@media(max-width:720px) {
  :root,html:lang(en) { --topbar:calc(60px + env(safe-area-inset-top,0px)); --phone-dock-height:64px; }
  .topbar { padding:env(safe-area-inset-top,0px) max(20px,env(safe-area-inset-right,0px)) 0 max(20px,env(safe-area-inset-left,0px)); gap:12px; }
  .topbar .brand { font-size:24px; gap:8px; }
  .topbar .brand-star { font-size:20px; }
  .topbar .topic-btn { display:none; }
  .topbar .topright { gap:0; }
  .account-btn { padding:8px 10px; }
  .dock,html:lang(en) .dock { height:calc(var(--phone-dock-height) + env(safe-area-inset-bottom,0px)); padding:5px max(16px,env(safe-area-inset-right,0px)) calc(5px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px)); background:var(--surface); border-top:1px solid var(--line-2); box-shadow:0 -3px 16px #00000008; }
  .dock a,html:lang(en) .dock a { color:var(--ink-2); min-height:48px; gap:2px; font-size:11px; font-weight:500; line-height:16px; }
  .dock a.is-active { color:var(--ink); font-weight:600; }
  .dock .dock-icon,html:lang(en) .dock-icon { display:flex; align-items:center; justify-content:center; width:52px; height:28px; line-height:28px; border-radius:10px; }
  .dock a.is-active .dock-icon { background:var(--ink); color:var(--surface); }
  .dock .nav-icon { width:22px; height:22px; }
  .dock-count { top:-1px; left:auto; right:-8px; margin:0; background:var(--ink); color:var(--surface); border:2px solid var(--surface); min-width:18px; font-size:10px; line-height:14px; }
  .dock-count:empty,.nav-count:empty { display:none; }
  .account-sheet { inset:auto 0 0; margin:0; width:100%; max-width:none; max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px)); border-radius:18px 18px 0 0; }
  .account-sheet .sheet-inner { padding:24px 24px calc(24px + env(safe-area-inset-bottom,0px)); }
}

.account-sheet .drawer-close { min-width:44px; min-height:44px; color:var(--ink-2); }
.account-signin input { padding:10px 12px; border:1px solid var(--line-2); border-radius:6px; background:var(--surface); color:var(--ink); font-family:var(--sans); }
.account-signin input::placeholder { color:var(--ink-2); opacity:1; }

/* The brand is supplied artwork; its letters are outlined, never retyped. */
.topbar .brand-wordmark { display:block; width:120px; height:auto; }
@media(max-width:720px) { .topbar .brand-wordmark { width:112px; } }

/* The offer, visible before the wall: a quiet Plans link in the top bar (phones reach it in Account). */
.topbar .plans-btn { border: 0; background: none; color: var(--ink-2); font: 500 13px/1 var(--sans); padding: 8px 10px; cursor: pointer; }
.topbar .plans-btn:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 700px) { .topbar .plans-btn { display: none; } }
.allowance-note.is-last { margin: 8px 0 0; font: 400 13px/1.55 var(--sans); color: var(--ink-2); }
.allowance-note.is-last .link-quiet { font: inherit; padding: 0; }