:root {
  color-scheme: dark;
  --ink: #061510;
  --ink-soft: #0b211a;
  --forest: #123c2b;
  --moss: #6f8b5d;
  --sage: #b3c4a5;
  --ivory: #f3ead2;
  --stone: #d5c9aa;
  --mist: #bdc9bd;
  --brass: #d5aa54;
  --brass-bright: #f0cc7b;
  --danger: #efaaa0;
  --edge: rgba(226, 195, 123, .35);
  --glass: rgba(6, 25, 19, .87);
  --serif: Georgia, "Times New Roman", serif;
  --sans: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .76, .24, 1);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; background: var(--ink); }
body { overflow: hidden; color: var(--ivory); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
button, input { font: inherit; }
button { border: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 2px solid var(--brass-bright); outline-offset: 3px; }
h1, h2, h3, p { margin-top: 0; }
svg { flex: 0 0 auto; }

.skip-link { position: fixed; left: 16px; top: -60px; z-index: 200; padding: 10px 14px; background: var(--ivory); color: var(--ink); font-weight: 800; transition: top 160ms ease; }
.skip-link:focus { top: 12px; }
.sr-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.experience { position: relative; width: 100vw; height: 100dvh; min-height: 620px; overflow: hidden; background: var(--ink); }
.scene { position: absolute; inset: 0; isolation: isolate; overflow: hidden; }
.scene::before { content: ""; position: absolute; inset: 0; z-index: -3; background-position: center; background-size: cover; transform: scale(1.006); }
.scene::after { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(90deg, rgba(3, 15, 12, .84) 0%, rgba(4, 17, 13, .27) 48%, rgba(4, 16, 13, .48) 100%), linear-gradient(0deg, rgba(2, 12, 9, .64), transparent 40%); }
.home-scene::before, .estate-scene::before { background-image: url("/apps/vocabulary-adventure/assets/garden-house.webp"); }
.trail-scene::before, .summary-scene::before { background-image: url("/apps/vocabulary-adventure/assets/east-garden.webp"); }
.shop-scene::before, .collection-scene::before, .settings-scene::before { background-image: url("/apps/vocabulary-adventure/assets/word-library.webp"); }
.shop-scene::after, .collection-scene::after, .settings-scene::after { background: linear-gradient(90deg, rgba(3, 15, 12, .94), rgba(4, 18, 14, .7) 60%, rgba(4, 16, 13, .83)); }

.top-rail { position: fixed; inset: 0 0 auto; z-index: 60; display: grid; grid-template-columns: auto 1fr auto; align-items: center; min-height: 82px; padding: 14px clamp(18px, 2.5vw, 38px); border-bottom: 1px solid rgba(224, 190, 114, .27); background: linear-gradient(180deg, rgba(4, 18, 14, .94), rgba(4, 18, 14, .75)); box-shadow: 0 12px 35px rgba(0, 0, 0, .17); backdrop-filter: blur(15px); }
.brand-lockup { display: inline-flex; align-items: center; gap: 11px; padding: 0; background: transparent; color: inherit; text-align: left; }
.brand-mark { display: grid; place-items: center; width: 45px; height: 45px; border: 1px solid var(--brass); border-radius: 50% 50% 50% 10%; color: var(--brass-bright); font-family: var(--serif); font-size: 25px; box-shadow: inset 0 0 0 4px rgba(211, 169, 83, .09); }
.brand-lockup > span:last-child { display: grid; }
.brand-lockup strong { color: var(--ivory); font-family: var(--serif); font-size: 22px; font-weight: 400; letter-spacing: .13em; line-height: 1; }
.brand-lockup em { margin-top: 5px; color: var(--brass-bright); font-size: 14px; font-style: normal; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.stage-chip { justify-self: center; display: grid; justify-items: center; gap: 2px; }
.stage-chip span { color: rgba(230, 219, 185, .62); font-size: 14px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.stage-chip strong { color: var(--ivory); font-family: var(--serif); font-size: 17px; font-weight: 400; }
.status-cluster { display: flex; align-items: center; gap: 8px; }
.rank-pill, .credit-pill { min-height: 48px; border: 1px solid rgba(225, 190, 111, .36); background: rgba(5, 25, 20, .73); box-shadow: inset 0 0 0 2px rgba(229, 204, 143, .035); }
.rank-pill { display: grid; align-content: center; min-width: 150px; padding: 7px 13px; }
.rank-pill span { color: rgba(223, 208, 165, .7); font-size: 14px; letter-spacing: .08em; }
.rank-pill strong { margin-top: 2px; color: var(--ivory); font-family: var(--serif); font-size: 18px; font-weight: 400; }
.credit-pill { display: flex; align-items: center; gap: 9px; min-width: 143px; padding: 6px 12px; color: var(--brass-bright); }
.credit-pill > span { display: grid; }
.credit-pill strong { color: var(--brass-bright); font-family: var(--serif); font-size: 19px; font-weight: 400; line-height: 1; }
.credit-pill em { margin-top: 4px; color: var(--mist); font-size: 14px; font-style: normal; }
.round-button { display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid rgba(225, 190, 111, .42); border-radius: 50%; background: rgba(213, 170, 84, .1); color: var(--brass-bright); transition: transform 160ms var(--ease), background 160ms ease; }
.round-button:hover { transform: translateY(-1px); background: rgba(213, 170, 84, .2); }

.bottom-nav { position: fixed; inset: auto 0 0; z-index: 55; display: grid; grid-template-columns: repeat(4, minmax(120px, 1fr)); min-height: 70px; border-top: 1px solid rgba(224, 190, 114, .29); background: rgba(3, 18, 14, .92); box-shadow: 0 -12px 38px rgba(0, 0, 0, .23); backdrop-filter: blur(17px); }
.bottom-nav button { position: relative; display: flex; align-items: center; justify-content: center; gap: 11px; min-width: 0; border-right: 1px solid rgba(225, 204, 148, .13); background: transparent; color: rgba(230, 223, 197, .72); font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transition: color 160ms ease, background 160ms ease; }
.bottom-nav button:last-child { border-right: 0; }
.bottom-nav button:hover, .bottom-nav button.active { color: var(--brass-bright); background: rgba(213, 170, 84, .075); }
.bottom-nav button.active::before { content: ""; position: absolute; left: 24%; right: 24%; top: 0; height: 2px; background: var(--brass); box-shadow: 0 0 12px rgba(213, 170, 84, .7); }

.eyebrow { display: flex; align-items: center; gap: 7px; margin-bottom: 13px; color: var(--brass-bright); font-size: 14px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.folio-label { margin-bottom: 13px; color: rgba(232, 215, 169, .68); font-size: 14px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.primary-action, .quiet-action { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 45px; padding: 0 18px; font-weight: 800; transition: transform 180ms var(--ease), background 180ms ease, color 180ms ease, border-color 180ms ease; }
.primary-action { border: 1px solid var(--brass); border-radius: 3px 3px 12px 3px; background: linear-gradient(135deg, var(--brass-bright), #c79b42); color: #102017; box-shadow: 0 12px 28px rgba(4, 13, 10, .24), inset 0 1px rgba(255, 255, 255, .34); }
.primary-action:hover:not(:disabled) { transform: translateY(-2px); background: linear-gradient(135deg, #f5d990, #d5a84e); }
.primary-action:disabled { opacity: .38; }
.primary-action.compact { min-height: 39px; padding: 0 14px; font-size: 14px; }
.quiet-action { border: 1px solid rgba(225, 190, 111, .38); background: rgba(6, 27, 21, .64); color: var(--ivory); }
.quiet-action:hover { transform: translateY(-2px); border-color: var(--brass); background: rgba(213, 170, 84, .13); }
.text-action, .hint-button { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0; background: transparent; color: var(--brass-bright); font-size: 14px; font-weight: 800; }
.text-action:hover:not(:disabled), .hint-button:hover { color: var(--ivory); }
.text-action:disabled { opacity: .35; }

/* Home */
.home-scene { padding: 126px clamp(24px, 5.8vw, 94px) 116px; }
.home-scene::after { background: linear-gradient(90deg, rgba(3, 16, 12, .9) 0%, rgba(4, 17, 13, .49) 40%, rgba(4, 17, 13, .11) 72%), linear-gradient(0deg, rgba(3, 16, 12, .75), transparent 54%); }
.hero-copy { position: relative; z-index: 2; width: min(580px, 48vw); margin-top: min(9vh, 90px); animation: rise-in 520ms var(--ease) both; }
.hero-copy h1, .page-heading h1, .summary-folio h1, .gate-folio h1 { margin-bottom: 19px; color: var(--ivory); font-family: var(--serif); font-size: clamp(54px, 6vw, 88px); font-weight: 400; letter-spacing: -.03em; line-height: .91; text-shadow: 0 4px 30px rgba(0, 0, 0, .3); }
h1 i { color: var(--brass-bright); font-weight: 400; }
.hero-intro { max-width: 535px; margin-bottom: 24px; color: #d2dacd; font-size: 14px; line-height: 1.78; text-shadow: 0 2px 12px #061510; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.estate-ledger { position: absolute; right: clamp(24px, 5.5vw, 90px); bottom: 137px; z-index: 2; width: min(330px, 27vw); padding: 21px; border: 1px solid var(--edge); border-top: 2px solid var(--brass); background: linear-gradient(145deg, rgba(5, 26, 20, .88), rgba(8, 36, 27, .7)); box-shadow: 0 22px 55px rgba(0, 0, 0, .28); backdrop-filter: blur(13px); animation: rise-in 600ms 100ms var(--ease) both; }
.ledger-property { display: flex; align-items: center; gap: 11px; padding-bottom: 14px; color: var(--brass-bright); }
.ledger-property span { display: grid; gap: 3px; }
.ledger-property strong { color: var(--ivory); font-family: var(--serif); font-size: 19px; font-weight: 400; }
.ledger-property em { color: var(--mist); font-size: 14px; font-style: normal; }
.ledger-stat { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(229, 210, 159, .15); font-size: 14px; }
.ledger-stat span { color: var(--mist); }
.ledger-stat strong { color: var(--stone); font-weight: 700; }
.stage-selector { position: absolute; left: clamp(24px, 5.8vw, 94px); right: clamp(24px, 5.5vw, 90px); bottom: 84px; z-index: 3; display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)); max-width: 670px; border: 1px solid rgba(229, 207, 151, .2); background: rgba(4, 21, 16, .79); backdrop-filter: blur(11px); }
.stage-selector .stage-choice { appearance: none; position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; padding: 11px 14px; border-right: 1px solid rgba(229, 207, 151, .15); background: transparent; color: inherit; text-align: left; opacity: .52; }
.stage-selector .stage-choice:last-child { border-right: 0; }
.stage-selector button.stage-choice { cursor: pointer; }
.stage-selector .stage-choice.locked { cursor: default; }
.stage-selector .stage-choice.selected { opacity: 1; background: rgba(213, 170, 84, .1); }
.stage-selector .stage-choice.selected::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--brass); }
.stage-selector span { grid-row: 1 / 3; align-self: center; color: var(--brass); font-family: var(--serif); font-size: 21px; }
.stage-selector strong { color: var(--ivory); font-size: 14px; letter-spacing: .04em; }
.stage-selector em { color: var(--mist); font-size: 14px; font-style: normal; }

/* Trail and animated world */
.trail-scene::after { background: linear-gradient(90deg, rgba(3, 14, 11, .6), rgba(3, 14, 11, .05) 55%, rgba(3, 14, 11, .42)), linear-gradient(0deg, rgba(3, 13, 10, .55), transparent 54%); }
.trail-world { position: absolute; inset: 82px 0 0; overflow: hidden; }
.path-glow { position: absolute; left: 42%; bottom: 6%; width: 19%; height: 61%; background: linear-gradient(0deg, rgba(244, 205, 110, .22), rgba(244, 205, 110, calc(var(--progress) * .2)) 68%, transparent); clip-path: polygon(0 100%, 100% 100%, 60% 0, 40% 0); filter: blur(14px); opacity: calc(.18 + var(--progress)); transition: opacity 700ms ease; }
.trail-stone { position: absolute; z-index: 2; display: grid; place-items: center; width: 51px; height: 27px; border: 1px solid rgba(226, 194, 122, .35); border-radius: 50%; background: linear-gradient(#6f6c59, #373b31); box-shadow: 0 7px 12px rgba(0, 0, 0, .32); transform: perspective(160px) rotateX(56deg); transition: filter 500ms ease, box-shadow 500ms ease; }
.trail-stone i { color: rgba(244, 234, 200, .66); font-size: 14px; font-style: normal; transform: rotateX(-25deg); }
.trail-stone.lit { border-color: var(--brass-bright); background: radial-gradient(circle, #f0cd79, #916e2c 65%, #3e432f); box-shadow: 0 0 15px 6px rgba(235, 190, 83, .52), 0 8px 12px rgba(0, 0, 0, .3); }
.trail-stone.current { animation: stone-pulse 1.8s ease-in-out infinite; }
.stone-1 { left: 43%; bottom: 15%; }
.stone-2 { left: 56%; bottom: 27%; transform: scale(.88) perspective(160px) rotateX(56deg); }
.stone-3 { left: 45.5%; bottom: 39%; transform: scale(.76) perspective(160px) rotateX(56deg); }
.stone-4 { left: 53%; bottom: 49%; transform: scale(.65) perspective(160px) rotateX(56deg); }
.stone-5 { left: 48.7%; bottom: 57%; transform: scale(.54) perspective(160px) rotateX(56deg); }
.learner-pair { position: absolute; left: var(--pair-left); bottom: var(--pair-bottom); z-index: 4; width: clamp(235px, 26vw, 420px); transform: translateX(-50%) scale(var(--pair-scale)); transform-origin: center bottom; filter: drop-shadow(0 18px 16px rgba(0, 0, 0, .38)); transition: left 900ms var(--ease), bottom 900ms var(--ease), transform 900ms var(--ease); }
.learner-pair img { display: block; width: 100%; height: auto; }
.pair-shadow { position: absolute; left: 18%; right: 12%; bottom: 1%; height: 7%; border-radius: 50%; background: rgba(0, 0, 0, .42); filter: blur(10px); }
.garden-gate { position: absolute; left: 50%; top: 11%; z-index: 3; width: 125px; height: 156px; transform: translateX(-50%); opacity: 0; pointer-events: none; }
.garden-gate > span { position: absolute; top: 23px; bottom: 0; width: 49%; border: 3px solid #d7b467; background: repeating-linear-gradient(90deg, transparent 0 11px, rgba(218, 181, 96, .85) 12px 14px); box-shadow: 0 0 20px rgba(232, 195, 104, .32); transition: transform 1.2s var(--ease); }
.garden-gate > span:first-child { left: 0; transform-origin: left; }
.garden-gate > span:nth-child(2) { right: 0; transform-origin: right; }
.garden-gate b { position: absolute; left: 50%; top: 0; display: grid; place-items: center; width: 45px; height: 45px; border: 2px solid var(--brass-bright); border-radius: 50%; background: #173524; color: var(--brass-bright); transform: translateX(-50%); box-shadow: 0 0 20px rgba(235, 195, 93, .55); }
.trail-world.gate-open .garden-gate { opacity: 1; animation: gate-reveal 800ms var(--ease) both; }
.trail-world.gate-open .garden-gate > span:first-child { transform: perspective(240px) rotateY(-58deg); }
.trail-world.gate-open .garden-gate > span:nth-child(2) { transform: perspective(240px) rotateY(58deg); }
.fireflies i { position: absolute; left: calc(8% + var(--i) * 9%); top: calc(19% + (var(--i) % 4) * 17%); width: 4px; height: 4px; border-radius: 50%; background: #ffe49a; box-shadow: 0 0 10px 3px rgba(255, 219, 121, .75); animation: firefly calc(4.5s + var(--i) * .3s) ease-in-out calc(var(--i) * -.7s) infinite; }
.trail-brief { position: absolute; left: clamp(18px, 3vw, 46px); top: 112px; z-index: 11; width: min(260px, 24vw); padding: 17px; border: 1px solid var(--edge); border-left: 2px solid var(--brass); background: rgba(5, 25, 19, .79); box-shadow: 0 14px 38px rgba(0, 0, 0, .22); backdrop-filter: blur(12px); }
.trail-brief .eyebrow { margin-bottom: 8px; font-size: 14px; }
.trail-brief > strong { display: block; color: var(--ivory); font-family: var(--serif); font-size: 19px; font-weight: 400; }
.trail-brief > span { display: block; margin: 7px 0 8px; color: var(--mist); font-size: 14px; }
.trail-meter { height: 5px; margin-top: 12px; overflow: hidden; border-radius: 5px; background: rgba(236, 223, 183, .14); }
.trail-meter i { display: block; height: 100%; border-radius: inherit; background: var(--brass); box-shadow: 0 0 12px rgba(218, 176, 83, .78); transition: width 500ms var(--ease); }
.phase-rail { position: absolute; right: clamp(18px, 3vw, 46px); top: 103px; z-index: 10; display: flex; align-items: center; gap: 4px; padding: 7px; border: 1px solid rgba(232, 211, 153, .22); background: rgba(5, 24, 19, .78); backdrop-filter: blur(11px); }
.phase-rail > span { display: flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 8px; color: rgba(224, 224, 203, .52); font-size: 14px; font-weight: 800; text-transform: uppercase; }
.phase-rail i { display: grid; place-items: center; width: 18px; height: 18px; border: 1px solid rgba(228, 204, 145, .25); border-radius: 50%; font-style: normal; }
.phase-rail > span.current { color: var(--ivory); background: rgba(213, 170, 84, .13); }
.phase-rail > span.current i { border-color: var(--brass); color: var(--brass-bright); }
.phase-rail > span.done { color: var(--sage); }
.phase-rail > span.done i { border-color: rgba(176, 202, 158, .55); }
.trail-intro { position: absolute; left: clamp(24px, 6vw, 95px); bottom: 115px; z-index: 8; width: min(520px, 45vw); padding: 25px; border-left: 3px solid var(--brass); background: linear-gradient(110deg, rgba(5, 23, 18, .86), rgba(5, 23, 18, .53)); box-shadow: 0 22px 55px rgba(0, 0, 0, .25); backdrop-filter: blur(12px); }
.trail-intro h1 { margin-bottom: 13px; font-family: var(--serif); font-size: clamp(44px, 5vw, 70px); font-weight: 400; line-height: .93; }
.trail-intro h1 i { color: var(--brass-bright); }
.trail-intro > p:not(.eyebrow) { color: var(--mist); font-size: 14px; line-height: 1.65; }

/* Challenge folios */
.modal-zone { position: absolute; right: clamp(22px, 5vw, 78px); top: 54%; z-index: 24; width: min(535px, 44vw); transform: translateY(-50%); }
.challenge-folio, .feedback-folio, .gate-folio { position: relative; max-height: calc(100dvh - 190px); overflow: auto; padding: 25px 27px 23px; border: 1px solid rgba(226, 188, 102, .53); border-radius: 3px 3px 22px 3px; background: linear-gradient(145deg, rgba(5, 25, 20, .965), rgba(8, 37, 28, .935)); box-shadow: 0 30px 80px rgba(0, 0, 0, .44), inset 0 1px 0 rgba(255, 255, 255, .055); backdrop-filter: blur(18px); animation: folio-in 360ms var(--ease) both; scrollbar-width: thin; scrollbar-color: var(--brass) transparent; }
.folio-rule { width: 49px; height: 3px; margin-bottom: 15px; background: var(--brass); box-shadow: 0 0 12px rgba(218, 175, 79, .48); }
.challenge-topline { display: flex; justify-content: space-between; gap: 12px; }
.challenge-kicker, .challenge-topline > span { margin: 0; color: var(--brass-bright); font-size: 14px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.challenge-topline > span { color: rgba(219, 211, 177, .56); letter-spacing: .04em; }
.word-row { display: flex; justify-content: space-between; gap: 15px; margin-top: 8px; }
.word-row h2 { margin: 0 0 4px; color: var(--ivory); font-family: var(--serif); font-size: clamp(36px, 3.4vw, 49px); font-weight: 400; letter-spacing: -.02em; line-height: .95; }
.word-row p { margin: 0; color: var(--mist); font-size: 14px; }
.challenge-prompt { margin: 15px 0 16px; color: var(--stone); font-size: 14px; line-height: 1.55; }
.hint-note { display: flex; gap: 8px; margin: -4px 0 14px; padding: 9px 10px; border-left: 2px solid var(--brass); background: rgba(213, 170, 84, .08); color: var(--mist); font-size: 14px; line-height: 1.45; }
.inline-notice { margin: -5px 0 13px; padding: 8px 10px; border: 1px solid rgba(225, 189, 103, .28); background: rgba(213, 170, 84, .08); color: var(--brass-bright); font-size: 14px; line-height: 1.4; }
.hint-note svg { color: var(--brass-bright); }
.hint-note strong { color: var(--ivory); }
.hint-button { margin-top: 13px; color: rgba(234, 213, 158, .78); }
.hear-panel { display: grid; justify-items: center; gap: 12px; padding: 2px 0; }
.sound-orb { position: relative; display: grid; justify-items: center; align-content: center; gap: 6px; width: 135px; height: 101px; border: 1px solid rgba(231, 195, 108, .52); border-radius: 30px 30px 5px 30px; background: radial-gradient(circle at 50% 27%, rgba(226, 183, 87, .32), rgba(213, 170, 84, .07) 70%); color: var(--brass-bright); }
.sound-orb:hover { background: radial-gradient(circle at 50% 27%, rgba(226, 183, 87, .42), rgba(213, 170, 84, .1) 70%); }
.sound-orb span { color: var(--ivory); font-size: 14px; font-weight: 800; text-transform: uppercase; }
.sound-orb i { position: absolute; inset: -8px; border: 1px solid rgba(230, 192, 101, .22); border-radius: 35px 35px 7px 35px; animation: sound-ring 2s ease-out infinite; }
.audio-caption { margin: 0; color: var(--stone); font-family: var(--serif); font-size: 17px; }
.audio-caption.muted { color: rgba(205, 210, 193, .55); font-family: var(--sans); font-size: 14px; }
.build-panel { display: grid; gap: 12px; }
.audio-clue { display: inline-flex; align-items: center; gap: 8px; justify-self: center; color: var(--mist); font-size: 14px; }
.audio-clue .round-button { width: 34px; height: 34px; }
.letter-slots { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; min-height: 40px; }
.letter-slot { display: grid; place-items: center; width: 31px; height: 38px; padding: 0; border-bottom: 2px solid rgba(229, 213, 166, .39); background: transparent; color: var(--brass-bright); font-family: var(--serif); font-size: 21px; }
.letter-slot.filled { border-color: var(--brass); background: rgba(213, 170, 84, .05); }
.letter-tray { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.letter-token { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(226, 193, 116, .34); border-radius: 7px; background: rgba(238, 225, 185, .07); color: var(--ivory); font-size: 14px; font-weight: 900; box-shadow: 0 4px 8px rgba(0, 0, 0, .12); transition: transform 150ms var(--ease), border-color 150ms ease, background 150ms ease; }
.letter-token:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--brass); background: rgba(213, 170, 84, .16); }
.letter-token:disabled { opacity: .2; }
.build-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.option-stack { display: grid; gap: 7px; }
.answer-option { display: grid; grid-template-columns: 25px 1fr; align-items: center; gap: 10px; width: 100%; min-height: 43px; padding: 9px 11px; border: 1px solid rgba(231, 215, 170, .16); border-radius: 8px; background: rgba(234, 221, 184, .045); color: var(--ivory); text-align: left; transition: transform 150ms var(--ease), border-color 150ms ease, background 150ms ease; }
.answer-option:hover { transform: translateX(3px); border-color: rgba(227, 190, 102, .55); }
.answer-option.selected { border-color: var(--brass); background: rgba(213, 170, 84, .14); }
.answer-option > span { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid rgba(226, 193, 116, .42); border-radius: 50%; color: var(--brass-bright); font-size: 14px; }
.answer-option strong { font-size: 14px; font-weight: 600; line-height: 1.4; }
.option-submit { justify-self: end; margin-top: 4px; }
.input-challenge { display: grid; gap: 10px; }
.input-challenge label { display: grid; gap: 6px; color: var(--mist); font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.input-challenge input { width: 100%; min-height: 48px; padding: 0 13px; border: 1px solid rgba(231, 195, 108, .42); border-radius: 8px; outline: none; background: rgba(236, 223, 183, .065); color: var(--ivory); font-family: var(--serif); font-size: 22px; letter-spacing: .02em; }
.input-challenge input:focus { border-color: var(--brass-bright); box-shadow: 0 0 0 3px rgba(213, 170, 84, .12); }
.input-challenge .primary-action { justify-self: end; }
.misconception-card { margin: 14px 0; padding: 14px; border: 1px solid rgba(226, 188, 102, .34); border-left: 3px solid var(--brass); background: rgba(213, 170, 84, .075); }
.misconception-card h3 { margin: 4px 0 12px; color: var(--ivory); font-family: var(--serif); font-size: 20px; font-weight: 400; line-height: 1.15; }
.misconception-card > p:last-child { margin: 11px 0 0; color: var(--stone); font-size: 14px; line-height: 1.55; }
.confusion-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.confusion-grid article { display: grid; gap: 4px; padding: 10px; border: 1px solid rgba(233, 214, 161, .14); background: rgba(5, 27, 20, .66); }
.confusion-grid strong { color: var(--brass-bright); font-family: var(--serif); font-size: 19px; font-weight: 400; }
.confusion-grid span { color: var(--ivory); font-size: 14px; font-weight: 700; }
.confusion-grid em { color: var(--mist); font-size: 14px; font-style: normal; line-height: 1.45; }
.feedback-folio::before, .gate-folio::before { content: ""; position: absolute; top: -60px; right: -50px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(226, 180, 76, .17), transparent 68%); pointer-events: none; }
.feedback-mark, .summary-seal, .gate-seal { display: grid; place-items: center; width: 51px; height: 51px; margin-bottom: 15px; border: 1px solid rgba(229, 191, 100, .5); border-radius: 50%; background: rgba(213, 170, 84, .12); color: var(--brass-bright); }
.feedback-folio h2 { margin-bottom: 11px; color: var(--ivory); font-family: var(--serif); font-size: 31px; font-weight: 400; line-height: 1; }
.feedback-folio > p:not(.eyebrow) { color: var(--stone); font-size: 14px; line-height: 1.6; }
.feedback-example { padding: 10px 11px; border-left: 2px solid var(--brass); background: rgba(238, 222, 176, .06); color: var(--mist) !important; font-style: italic; }
.award-line { display: flex; align-items: center; gap: 6px; margin: 7px 0 17px; color: var(--brass-bright); font-size: 14px; font-weight: 800; }
.award-line span { color: var(--sage); }
.gate-folio { text-align: left; }
.gate-folio h1 { font-size: clamp(42px, 4.5vw, 63px); }
.gate-folio > p:not(.eyebrow) { color: var(--mist); font-size: 14px; line-height: 1.65; }
.gate-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 20px 0; border: 1px solid rgba(231, 210, 155, .14); background: rgba(231, 210, 155, .14); }
.gate-stats span { display: grid; padding: 12px; background: rgba(6, 28, 21, .88); color: var(--mist); font-size: 14px; }
.gate-stats strong { color: var(--brass-bright); font-family: var(--serif); font-size: 23px; font-weight: 400; }

/* Page screens */
.page-scene { overflow-y: auto; padding: 122px clamp(22px, 5vw, 78px) 110px; }
.back-button { position: fixed; left: clamp(22px, 3vw, 46px); top: 99px; z-index: 30; display: inline-flex; align-items: center; gap: 6px; min-height: 29px; padding: 0; background: transparent; color: var(--brass-bright); font-size: 14px; font-weight: 800; }
.back-button:hover { color: var(--ivory); transform: translateX(-2px); }
.page-heading { width: min(585px, 56vw); margin-left: min(11vw, 170px); animation: rise-in 430ms var(--ease) both; }
.page-heading.compact { width: min(520px, 55vw); }
.page-heading h1 { font-size: clamp(50px, 5.4vw, 75px); }
.page-heading > p:last-child { max-width: 490px; color: var(--mist); font-size: 14px; line-height: 1.7; }
.notice { display: flex; align-items: center; gap: 8px; max-width: 700px; margin: 16px 0 0 min(11vw, 170px); padding: 10px 13px; border: 1px solid var(--edge); border-left: 2px solid var(--brass); background: rgba(5, 29, 22, .84); color: var(--brass-bright); font-size: 14px; }

/* Shop */
.shop-layout { display: grid; grid-template-columns: minmax(490px, 1fr) 305px; gap: 23px; align-items: start; max-width: 1050px; margin: 30px 0 0 min(11vw, 170px); }
.shop-list { display: grid; gap: 7px; }
.shop-item { display: grid; grid-template-columns: 1fr auto; gap: 13px; align-items: center; padding: 12px; border: 1px solid rgba(230, 213, 165, .16); border-left: 2px solid rgba(213, 170, 84, .4); background: rgba(5, 27, 21, .82); box-shadow: 0 10px 25px rgba(0, 0, 0, .15); backdrop-filter: blur(12px); transition: border-color 160ms ease, transform 160ms var(--ease); }
.shop-item:hover, .shop-item.selected { transform: translateX(3px); border-color: rgba(228, 190, 102, .57); }
.shop-item.owned { border-left-color: var(--sage); }
.item-select { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; min-width: 0; padding: 0; background: transparent; color: inherit; text-align: left; }
.item-select > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(213, 170, 84, .12); color: var(--brass-bright); }
.item-select div { min-width: 0; }
.item-select p { margin: 0 0 3px; color: var(--brass-bright); font-size: 14px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.item-select h2 { margin: 0 0 4px; color: var(--ivory); font-family: var(--serif); font-size: 19px; font-weight: 400; }
.item-select em { display: block; max-width: 350px; color: var(--mist); font-size: 14px; font-style: normal; line-height: 1.4; }
.item-price { display: grid; justify-items: end; gap: 5px; min-width: 90px; }
.item-price small { color: var(--mist); font-size: 14px; }
.item-price strong { display: flex; align-items: center; gap: 4px; color: var(--brass-bright); font-family: var(--serif); font-size: 16px; font-weight: 400; }
.item-price button { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 0 10px; border: 1px solid rgba(223, 185, 96, .45); border-radius: 4px; background: rgba(213, 170, 84, .1); color: var(--brass-bright); font-size: 14px; font-weight: 800; }
.item-price button:hover:not(:disabled) { background: var(--brass); color: var(--ink); }
.item-price button:disabled { opacity: .42; }
.owned-mark { display: flex; align-items: center; gap: 5px; color: var(--sage); font-size: 14px; font-weight: 800; }
.shop-preview { position: sticky; top: 98px; padding: 14px; border: 1px solid var(--edge); background: rgba(5, 27, 21, .84); box-shadow: 0 15px 40px rgba(0, 0, 0, .2); backdrop-filter: blur(13px); }
.preview-image { position: relative; overflow: hidden; aspect-ratio: 1.3; border: 1px solid rgba(235, 218, 171, .16); }
.preview-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(3, 18, 13, .47), transparent 53%); }
.preview-image img { width: 100%; height: 100%; object-fit: cover; }
.preview-ornament { position: absolute; right: 16px; bottom: 14px; z-index: 2; display: grid; place-items: center; width: 49px; height: 49px; border: 1px solid var(--brass); border-radius: 50%; background: rgba(6, 31, 23, .8); color: var(--brass-bright); }
.shop-preview .folio-label { margin: 13px 0 6px; }
.shop-preview h2 { margin-bottom: 7px; color: var(--ivory); font-family: var(--serif); font-size: 24px; font-weight: 400; }
.shop-preview > p:not(.folio-label) { color: var(--mist); font-size: 14px; line-height: 1.55; }
.shop-preview .quiet-action { width: 100%; min-height: 35px; padding: 0 10px; font-size: 14px; }

/* Estate */
.estate-scene::after { background: linear-gradient(90deg, rgba(3, 16, 12, .86), rgba(3, 16, 12, .17) 53%, rgba(3, 16, 12, .13)), linear-gradient(0deg, rgba(3, 16, 12, .62), transparent 58%); }
.estate-world { position: absolute; inset: 82px 0 70px; }
.estate-copy { position: absolute; left: clamp(24px, 7vw, 112px); top: 51%; z-index: 9; width: min(440px, 40vw); transform: translateY(-47%); padding: 24px; border-left: 3px solid var(--brass); background: linear-gradient(110deg, rgba(4, 22, 17, .88), rgba(4, 22, 17, .48)); box-shadow: 0 22px 55px rgba(0, 0, 0, .24); backdrop-filter: blur(11px); }
.estate-copy h1 { margin-bottom: 11px; color: var(--ivory); font-family: var(--serif); font-size: clamp(46px, 5.1vw, 72px); font-weight: 400; line-height: .94; }
.estate-copy > p:not(.eyebrow) { color: var(--mist); font-size: 14px; line-height: 1.7; }
.estate-badges { display: flex; flex-wrap: wrap; gap: 7px; margin: 17px 0; }
.estate-badges span { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid rgba(228, 208, 153, .21); background: rgba(5, 26, 20, .64); color: var(--stone); font-size: 14px; }
.estate-badges svg { color: var(--brass); }
.preview-note { display: grid; gap: 2px; margin-bottom: 15px; padding: 9px 10px; border-left: 2px solid var(--brass); background: rgba(213, 170, 84, .11); }
.preview-note strong { color: var(--ivory); font-size: 14px; }
.preview-note span { color: var(--mist); font-size: 14px; }
.estate-markers { position: absolute; right: clamp(20px, 5vw, 75px); bottom: 105px; z-index: 10; display: grid; gap: 7px; width: min(260px, 24vw); }
.estate-marker { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid rgba(229, 211, 160, .2); background: rgba(4, 24, 18, .78); box-shadow: 0 9px 24px rgba(0, 0, 0, .18); backdrop-filter: blur(9px); }
.estate-marker > span { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid rgba(226, 189, 100, .38); border-radius: 50%; color: var(--brass-bright); }
.estate-marker div { display: grid; gap: 2px; }
.estate-marker strong { color: var(--ivory); font-size: 14px; }
.estate-marker em { color: var(--mist); font-size: 14px; font-style: normal; }
.estate-marker.active { border-color: rgba(226, 189, 100, .57); background: rgba(7, 35, 25, .84); }
.lantern-field i { position: absolute; bottom: calc(16% + (var(--i) % 2) * 7%); left: calc(31% + var(--i) * 6.5%); width: 6px; height: 25px; border: 1px solid #7e6531; background: linear-gradient(#ffe49a 0 33%, #493b20 34%); box-shadow: 0 -8px 18px 4px rgba(255, 214, 112, .55); animation: lantern-flicker calc(2s + var(--i) * .15s) ease-in-out infinite; }
.garden-arch-visual { position: absolute; right: 21%; top: 24%; width: 138px; height: 170px; border: 8px solid rgba(55, 78, 41, .95); border-bottom: 0; border-radius: 70px 70px 0 0; filter: drop-shadow(0 9px 8px rgba(0, 0, 0, .25)); }
.garden-arch-visual i { position: absolute; top: -15px; width: 32px; height: 115%; background: repeating-radial-gradient(circle at 50% 8%, #d89a9d 0 5px, #587242 6px 14px, transparent 15px 25px); }
.garden-arch-visual i:first-child { left: -19px; }.garden-arch-visual i:nth-child(2) { right: -19px; }
.garden-arch-visual span { position: absolute; left: 50%; top: -26px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #38552e; color: #f0d28b; transform: translateX(-50%); }
.fountain-visual { position: absolute; left: 50%; bottom: 27%; width: 145px; height: 74px; border: 7px solid #cfc5a8; border-radius: 50%; background: radial-gradient(ellipse, #779da1 0 46%, #b7ad91 47% 64%, #7c735d 65%); transform: translateX(-50%); box-shadow: 0 11px 14px rgba(0, 0, 0, .23); }
.fountain-visual i { position: absolute; left: 50%; bottom: 35%; width: 21px; height: 58px; border-radius: 8px 8px 0 0; background: linear-gradient(90deg, #8a826d, #ded4b5, #918773); transform: translateX(-50%); }
.fountain-visual span { position: absolute; left: 50%; bottom: 76%; width: 55px; height: 19px; border: 4px solid #cfc5a8; border-radius: 50%; background: #728e8e; transform: translateX(-50%); }
.fountain-visual.stage-surveyed { height: 8px; border-width: 3px; background: repeating-linear-gradient(90deg, #e5c66f 0 8px, transparent 8px 16px); }
.fountain-visual.stage-surveyed i, .fountain-visual.stage-surveyed span { display: none; }
.fountain-visual.stage-foundation { height: 42px; filter: grayscale(.5); }
.fountain-visual.stage-foundation i { height: 25px; }.fountain-visual.stage-foundation span { display: none; }
.fountain-visual.stage-installed span::after { content: ""; position: absolute; left: 50%; bottom: 5px; width: 4px; height: 66px; border-radius: 50%; background: #c4e8e0; transform: translateX(-50%); filter: blur(1px); animation: water-rise 1.8s ease-in-out infinite; }
.fountain-visual.ghost { opacity: .64; filter: saturate(.5); outline: 2px dashed var(--brass-bright); outline-offset: 7px; }

/* Archive and settings */
.collection-sheet, .settings-folio { width: min(900px, calc(100% - min(11vw, 170px))); margin: 28px 0 0 min(11vw, 170px); border-top: 2px solid var(--brass); background: rgba(5, 27, 21, .88); box-shadow: 0 20px 50px rgba(0, 0, 0, .24); backdrop-filter: blur(14px); }
.collection-sheet article { display: grid; grid-template-columns: minmax(130px, 1.1fr) auto minmax(210px, 1.8fr); column-gap: 16px; row-gap: 8px; align-items: center; padding: 15px 17px; border-bottom: 1px solid rgba(229, 211, 158, .13); }
.word-title h2 { margin: 0 0 3px; color: var(--ivory); font-family: var(--serif); font-size: 21px; font-weight: 400; }
.word-title p { margin: 0; color: var(--mist); font-size: 14px; }
.stage-badge { padding: 4px 7px; border: 1px solid rgba(226, 190, 104, .31); border-radius: 99px; color: var(--brass-bright); font-size: 14px; font-weight: 800; }
.stage-badge.strong, .stage-badge.mastered { border-color: rgba(178, 205, 159, .48); color: var(--sage); }
.word-definition { margin: 0; color: var(--stone); font-size: 14px; line-height: 1.45; }
.evidence-row { grid-column: 1 / 4; display: flex; flex-wrap: wrap; gap: 8px; }
.evidence { display: flex; align-items: center; gap: 4px; color: rgba(205, 213, 195, .45); font-size: 14px; }
.evidence i { width: 6px; height: 6px; border-radius: 50%; background: rgba(207, 213, 194, .25); }
.evidence.earned { color: var(--sage); }.evidence.earned i { background: var(--brass); box-shadow: 0 0 7px rgba(224, 182, 82, .55); }
.word-origin { grid-column: 1 / 4; display: flex; justify-content: space-between; gap: 15px; color: rgba(202, 211, 194, .57); font-size: 14px; }
.word-origin b { color: var(--brass-bright); font-weight: 600; }
.collection-empty { display: grid; justify-items: start; gap: 9px; padding: 30px; }
.collection-empty > svg { color: var(--brass); }
.collection-empty h2 { margin: 0; color: var(--ivory); font-family: var(--serif); font-size: 27px; font-weight: 400; }
.collection-empty p { max-width: 440px; margin: 0 0 5px; color: var(--mist); font-size: 14px; line-height: 1.6; }
.settings-folio { width: min(680px, calc(100% - min(11vw, 170px))); }
.setting-row, .profile-row, .reset-row { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 15px 17px; border-bottom: 1px solid rgba(229, 211, 158, .13); }
.setting-row > span, .profile-row > span, .reset-row > span { display: grid; gap: 4px; }
.setting-row strong, .profile-row strong, .reset-row strong { color: var(--ivory); font-size: 14px; }
.setting-row em, .profile-row em, .reset-row em { color: var(--mist); font-size: 14px; font-style: normal; line-height: 1.45; }
.setting-row input { position: absolute; right: 17px; width: 43px; height: 24px; opacity: 0; cursor: pointer; }
.setting-row > i { position: relative; flex: 0 0 auto; width: 43px; height: 24px; border: 1px solid rgba(225, 190, 104, .48); border-radius: 99px; background: rgba(229, 214, 168, .11); pointer-events: none; }
.setting-row > i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--stone); transition: transform 180ms var(--ease), background 180ms ease; }
.setting-row input:checked + i { background: rgba(213, 170, 84, .25); }
.setting-row input:checked + i::after { transform: translateX(19px); background: var(--brass-bright); }
.profile-row b { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--brass); border-radius: 50%; color: var(--brass-bright); font-family: var(--serif); font-size: 18px; font-weight: 400; }
.danger-action { min-height: 31px; padding: 0 10px; border: 1px solid rgba(239, 170, 160, .42); background: rgba(126, 48, 44, .12); color: var(--danger); font-size: 14px; font-weight: 800; }
.danger-action:hover { background: rgba(126, 48, 44, .27); }

/* Summary */
.summary-scene { display: grid; place-items: center; padding: 104px 20px 30px; }
.summary-scene::after { background: linear-gradient(rgba(3, 16, 12, .48), rgba(3, 16, 12, .72)); }
.summary-folio { width: min(640px, calc(100% - 24px)); max-height: calc(100dvh - 125px); overflow: auto; padding: 31px 34px; border: 1px solid rgba(230, 190, 96, .58); border-radius: 3px 3px 25px 3px; background: rgba(5, 27, 20, .92); box-shadow: 0 32px 95px rgba(0, 0, 0, .46); backdrop-filter: blur(18px); animation: rise-in 500ms var(--ease) both; }
.summary-folio h1 { font-size: clamp(45px, 5vw, 66px); }
.summary-folio > p:not(.eyebrow) { color: var(--mist); font-size: 14px; line-height: 1.65; }
.session-stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin: 20px 0 15px; border: 1px solid rgba(230, 211, 157, .14); background: rgba(230, 211, 157, .14); }
.session-stats span { display: grid; gap: 3px; padding: 11px; background: rgba(5, 27, 20, .9); color: var(--mist); font-size: 14px; }
.session-stats strong { color: var(--brass-bright); font-family: var(--serif); font-size: 23px; font-weight: 400; }
.summary-reveal { display: flex; align-items: center; gap: 10px; padding: 12px; border-left: 2px solid var(--brass); background: rgba(213, 170, 84, .08); color: var(--brass-bright); }
.summary-reveal span { display: grid; gap: 3px; }
.summary-reveal strong { color: var(--ivory); font-size: 14px; }.summary-reveal em { color: var(--mist); font-size: 14px; font-style: normal; }
.summary-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 20px; }


/* Elementary experience — Cottage Garden */
.stage-elementary .home-scene::before,
.stage-elementary .estate-scene::before,
.stage-elementary .trail-scene::before,
.stage-elementary .summary-scene::before,
.stage-elementary .shop-scene::before,
.stage-elementary .collection-scene::before,
.stage-elementary .settings-scene::before { background-image: url("/apps/vocabulary-adventure/assets/elementary-orchard.webp"); }

.stage-elementary .home-scene::after { background: linear-gradient(90deg, rgba(244, 231, 190, .14) 0%, rgba(4, 25, 17, .12) 44%, rgba(4, 25, 17, .08) 72%), linear-gradient(0deg, rgba(5, 27, 17, .42), transparent 58%); }
.stage-elementary .trail-scene::after { background: linear-gradient(90deg, rgba(6, 32, 19, .34), rgba(6, 32, 19, .04) 54%, rgba(6, 32, 19, .12)), linear-gradient(0deg, rgba(3, 25, 15, .46), transparent 56%); }
.stage-elementary .estate-scene::after { background: linear-gradient(90deg, rgba(4, 29, 18, .58), rgba(5, 31, 18, .04) 60%), linear-gradient(0deg, rgba(4, 27, 17, .36), transparent 62%); }
.stage-elementary .shop-scene::after,
.stage-elementary .collection-scene::after,
.stage-elementary .settings-scene::after { background: linear-gradient(90deg, rgba(4, 25, 16, .9), rgba(5, 31, 19, .58) 64%, rgba(4, 25, 16, .72)); }
.stage-elementary .summary-scene::after { background: linear-gradient(rgba(3, 28, 17, .24), rgba(3, 25, 16, .55)); }

.stage-elementary .elementary-hero { width: min(590px, 48vw); margin-top: min(7vh, 66px); padding: 25px 28px 27px; border: 1px solid rgba(118, 86, 32, .72); border-radius: 4px 4px 18px 4px; background: linear-gradient(145deg, rgba(250, 239, 207, .95), rgba(231, 210, 157, .91)); box-shadow: 0 25px 64px rgba(28, 24, 12, .24), inset 0 1px rgba(255,255,255,.65); }
.stage-elementary .elementary-hero .eyebrow { color: #6e5523; }
.stage-elementary .elementary-hero h1 { color: #173524; font-size: clamp(46px, 5.3vw, 75px); text-shadow: none; }
.stage-elementary .elementary-hero h1 i { color: #8b641f; }
.stage-elementary .elementary-hero .hero-intro { color: #2f4636; text-shadow: none; font-size: 14px; }
.stage-elementary .elementary-hero .quiet-action { border-color: rgba(74, 91, 54, .48); background: rgba(31, 74, 46, .1); color: #173524; }
.elementary-home-pair { position: absolute; right: clamp(52px, 9vw, 145px); bottom: 68px; z-index: 2; width: clamp(330px, 36vw, 570px); pointer-events: none; filter: drop-shadow(0 23px 20px rgba(0, 0, 0, .32)); }
.elementary-home-pair img { display: block; width: 100%; height: auto; }
.stage-elementary .estate-ledger { right: clamp(18px, 3vw, 52px); width: min(285px, 23vw); background: rgba(247, 235, 199, .91); border-color: rgba(101, 76, 28, .55); color: #183322; }
.stage-elementary .estate-ledger .folio-label,
.stage-elementary .estate-ledger .ledger-stat span { color: #5e684c; }
.stage-elementary .estate-ledger .ledger-stat strong { color: #173524; }
.stage-elementary .stage-selector { background: rgba(248, 237, 204, .92); border-color: rgba(105, 78, 29, .5); }
.stage-elementary .stage-selector .stage-choice { border-color: rgba(103, 80, 35, .23); }
.stage-elementary .stage-selector strong { color: #173524; }
.stage-elementary .stage-selector em { color: #66705a; }
.stage-elementary .stage-selector .stage-choice.selected { background: rgba(113, 135, 79, .18); }

.stage-elementary .trail-stone { width: 68px; height: 38px; border-color: rgba(107, 89, 52, .6); background: linear-gradient(#cfc6a7, #847d66); box-shadow: 0 8px 14px rgba(46, 38, 21, .28); }
.stage-elementary .trail-stone i { color: #324829; transform: rotateX(-25deg); }
.stage-elementary .trail-stone.lit { border-color: #e5b640; background: radial-gradient(circle, #f5dc83, #b78328 65%, #5c633b); box-shadow: 0 0 18px 7px rgba(244, 190, 58, .58), 0 8px 12px rgba(0,0,0,.24); }
.stage-elementary .stone-1 { left: 45%; bottom: 12%; }
.stage-elementary .stone-2 { left: 48%; bottom: 24%; }
.stage-elementary .stone-3 { left: 50%; bottom: 35%; }
.stage-elementary .stone-4 { left: 51%; bottom: 45%; }
.stage-elementary .stone-5 { left: 51%; bottom: 54%; }
.stage-elementary .learner-pair.younger-pair { width: clamp(245px, 31vw, 455px); filter: drop-shadow(0 16px 15px rgba(0,0,0,.28)); }
.stage-elementary .trail-intro.elementary-intro,
.stage-elementary .trail-brief.elementary-brief { border-color: rgba(112, 83, 29, .72); background: linear-gradient(145deg, rgba(249, 238, 203, .96), rgba(231, 211, 160, .93)); color: #173524; }
.stage-elementary .trail-intro.elementary-intro { border-left: 3px solid #9a7428; }
.stage-elementary .trail-intro.elementary-intro .eyebrow,
.stage-elementary .trail-brief.elementary-brief .eyebrow { color: #755923; }
.stage-elementary .trail-intro.elementary-intro h1,
.stage-elementary .trail-brief.elementary-brief strong { color: #173524; text-shadow: none; }
.stage-elementary .trail-intro.elementary-intro > p:not(.eyebrow),
.stage-elementary .trail-brief.elementary-brief span { color: #435342; }
.stage-elementary .phase-rail { background: rgba(248, 237, 204, .92); border-color: rgba(112, 83, 29, .44); }
.stage-elementary .phase-rail > span { color: #727665; border-color: rgba(102, 82, 41, .18); }
.stage-elementary .phase-rail > span.current { color: #173524; background: rgba(124, 145, 85, .18); }
.stage-elementary .phase-rail > span.done { color: #526d45; }
.stage-elementary .phase-rail i { border-color: rgba(110, 84, 35, .36); }

/* Elementary learning folio: instruction first, assessment second. */
.elementary-folio { border-color: rgba(119, 86, 29, .75); background: linear-gradient(145deg, rgba(250, 240, 209, .985), rgba(231, 211, 161, .97)); color: #173524; box-shadow: 0 30px 80px rgba(36, 30, 14, .34), inset 0 1px rgba(255,255,255,.72); }
.elementary-folio .challenge-kicker,
.elementary-folio .challenge-topline > span,
.elementary-folio .eyebrow { color: #755923; }
.elementary-folio .word-row h2,
.elementary-folio.feedback-folio h2,
.elementary-folio.gate-folio h1 { color: #173524; text-shadow: none; }
.elementary-folio .word-row p,
.elementary-folio .challenge-prompt,
.elementary-folio.feedback-folio > p:not(.eyebrow),
.elementary-folio.gate-folio > p:not(.eyebrow) { color: #3f5140; }
.elementary-folio .folio-rule { background: #9b7426; }
.elementary-folio .answer-option { border-color: rgba(84, 95, 57, .28); background: rgba(255, 250, 231, .73); color: #173524; }
.elementary-folio .answer-option:hover { border-color: #987127; background: rgba(255, 246, 213, .94); }
.elementary-folio .answer-option.selected { border-color: #7a6b2f; background: rgba(126, 151, 87, .2); }
.elementary-folio .answer-option > span { border-color: rgba(112, 82, 26, .55); color: #755923; }
.elementary-folio .letter-token { border-color: rgba(112, 82, 26, .48); background: #fff9e7; color: #173524; }
.elementary-folio .letter-slot { border-color: rgba(74, 90, 56, .48); color: #755923; }
.elementary-folio .audio-clue,
.elementary-folio .audio-caption { color: #3e5140; }
.elementary-folio .hint-button { color: #526b3e; }
.elementary-folio .hint-note { border-color: #849c5e; background: rgba(122, 150, 80, .13); color: #3d513e; }
.elementary-folio .hint-note strong { color: #173524; }
.elementary-folio .input-challenge label { color: #52634e; }
.elementary-folio .input-challenge input { border-color: rgba(111, 82, 31, .45); background: rgba(255,250,232,.86); color: #173524; }
.elementary-folio .feedback-example { border-color: #8ba465; background: rgba(255,249,228,.65); color: #40513e !important; }
.elementary-folio .award-line { color: #805d1e; }
.elementary-folio .award-line span { color: #506b44; }
.elementary-folio .gate-stats { border-color: rgba(100, 82, 43, .25); background: rgba(100,82,43,.16); }
.elementary-folio .gate-stats span { background: rgba(255, 249, 229, .76); color: #4e5e49; }
.elementary-folio .gate-stats strong { color: #755923; }
.elementary-folio .feedback-mark,
.elementary-folio .gate-seal { border-color: rgba(110, 82, 29, .5); background: rgba(124, 149, 83, .14); color: #6c822f; }

.discover-panel { display: grid; gap: 10px; }
.maya-note { display: grid; grid-template-columns: 42px 1fr; gap: 10px; align-items: center; padding: 10px 11px; border: 1px solid rgba(99, 122, 67, .35); border-radius: 10px; background: rgba(122, 150, 80, .12); }
.maya-badge { display: grid; place-items: center; width: 40px; height: 40px; border: 2px solid #6e843f; border-radius: 50%; background: #e8dbac; color: #315036; font-family: var(--serif); font-size: 21px; font-weight: 700; }
.maya-note strong { color: #173524; font-family: var(--serif); font-size: 16px; font-weight: 600; }
.maya-note p { margin: 2px 0 0; color: #465746; font-size: 14px; line-height: 1.4; }
.meaning-card, .example-card { padding: 11px 12px; border-left: 3px solid #8ca064; background: rgba(255, 249, 228, .7); }
.meaning-card span, .example-card span { display: block; margin-bottom: 4px; color: #77622f; font-size: 14px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.meaning-card strong { color: #173524; font-family: var(--serif); font-size: 20px; font-weight: 500; line-height: 1.2; }
.example-card p { margin: 0; color: #334837; font-family: var(--serif); font-size: 14px; line-height: 1.45; }
.word-parts { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 8px 0 1px; }
.word-parts > span { display: inline-flex; align-items: center; gap: 5px; color: #6f521c; }
.word-parts b { padding: 4px 7px; border: 1px solid rgba(111, 82, 31, .35); border-radius: 6px; background: rgba(255,249,229,.66); font-family: var(--serif); font-size: 14px; font-weight: 600; }
.word-parts i { font-style: normal; }
.word-parts em { max-width: 235px; color: #54634e; font-size: 14px; font-style: normal; line-height: 1.45; }
.discover-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 4px; }
.elementary-folio .discover-actions .quiet-action { border-color: rgba(79, 98, 58, .45); background: rgba(48, 86, 50, .09); color: #274832; }

/* Elementary garden improvements — layered over the clean orchard world plate. */
.bench-visual { position: absolute; left: 24%; bottom: 21%; width: 112px; height: 62px; filter: drop-shadow(0 8px 5px rgba(0,0,0,.2)); }
.bench-visual i, .bench-visual span { position: absolute; left: 0; right: 0; border: 5px solid #644826; background: linear-gradient(#ad8150, #73502c); }
.bench-visual i { bottom: 24px; height: 20px; border-radius: 5px; }
.bench-visual span { bottom: 6px; height: 12px; }
.bench-visual::before, .bench-visual::after { content: ""; position: absolute; bottom: 0; width: 7px; height: 34px; background: #51391f; }
.bench-visual::before { left: 14px; }.bench-visual::after { right: 14px; }
.pollinator-field { position: absolute; right: 16%; bottom: 16%; width: 210px; height: 105px; }
.pollinator-field i { position: absolute; left: calc((var(--i) % 6) * 18%); bottom: calc((var(--i) % 4) * 16%); width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle, #76551f 0 18%, #f4d863 19% 46%, #dd8f75 47% 68%, transparent 70%); filter: drop-shadow(0 3px 2px rgba(0,0,0,.14)); }
.elementary-lanterns i { bottom: calc(11% + (var(--i) % 3) * 6%); left: calc(36% + var(--i) * 5.7%); }
.greenhouse-visual { position: absolute; right: 13%; top: 24%; width: 155px; height: 115px; border: 5px solid rgba(64, 89, 60, .86); background: linear-gradient(125deg, rgba(216, 239, 222, .42), rgba(154, 199, 173, .22)); box-shadow: inset 0 0 0 1px rgba(245,250,230,.54), 0 12px 15px rgba(0,0,0,.2); clip-path: polygon(12% 25%, 50% 0, 88% 25%, 100% 25%, 100% 100%, 0 100%, 0 25%); }
.greenhouse-visual::after { content:""; position:absolute; left:48%; top:26%; bottom:0; width:4px; background:rgba(63,86,58,.72); }
.greenhouse-visual i { position:absolute; left:9%; right:9%; top:47%; height:4px; background:rgba(63,86,58,.72); }
.greenhouse-visual span { position:absolute; left:50%; bottom:0; width:36px; height:56px; border:3px solid rgba(63,86,58,.75); transform:translateX(-50%); }
.greenhouse-visual.stage-surveyed { height: 16px; top: 40%; background: repeating-linear-gradient(90deg, #dabd65 0 8px, transparent 8px 16px); clip-path:none; border-width:2px; }
.greenhouse-visual.stage-surveyed i, .greenhouse-visual.stage-surveyed span { display:none; }
.greenhouse-visual.stage-foundation { height: 58px; top: 34%; opacity:.72; }
.elementary-arbor { right: 26%; top: 20%; transform: scale(.78); transform-origin: center bottom; }
.bench-visual.ghost, .pollinator-field.ghost, .elementary-lanterns.ghost, .greenhouse-visual.ghost, .elementary-arbor.ghost { opacity: .62; outline: 2px dashed var(--brass-bright); outline-offset: 6px; }
.stage-elementary .elementary-estate-copy { background: linear-gradient(145deg, rgba(249, 238, 204, .95), rgba(229, 210, 160, .91)); border-color: #987127; }
.stage-elementary .elementary-estate-copy h1 { color: #173524; text-shadow: none; }
.stage-elementary .elementary-estate-copy > p:not(.eyebrow) { color: #3f5140; }
.stage-elementary .elementary-estate-copy .eyebrow { color: #725721; }
.stage-elementary .elementary-estate-copy .estate-badges span { border-color: rgba(85, 102, 62, .27); background: rgba(65, 91, 56, .08); color: #3f5140; }
.stage-elementary .elementary-estate-copy .estate-badges svg { color: #7e692f; }
.stage-elementary .elementary-estate-copy .preview-note { background: rgba(123, 148, 84, .13); color: #173524; }
.stage-elementary .elementary-estate-copy .preview-note strong { color: #173524; }
.stage-elementary .elementary-estate-copy .preview-note span { color: #4d5c47; }
.stage-elementary .estate-marker { background: rgba(247, 236, 201, .91); border-color: rgba(104, 79, 31, .45); }
.stage-elementary .estate-marker strong { color: #173524; }
.stage-elementary .estate-marker em { color: #53614d; }
.stage-elementary .estate-marker > span { color: #785b22; }

.stage-elementary .summary-folio.elementary-folio .session-stats span { background: rgba(255, 249, 229, .74); color: #4d5d48; }
.stage-elementary .summary-folio.elementary-folio .summary-reveal { background: rgba(123, 148, 84, .12); color: #6e5b26; }
.stage-elementary .summary-folio.elementary-folio .summary-reveal strong { color: #173524; }
.stage-elementary .summary-folio.elementary-folio .summary-reveal em { color: #4e5c49; }

@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes folio-in { from { opacity: 0; transform: translateX(18px) scale(.985); } to { opacity: 1; transform: translateX(0) scale(1); } }
@keyframes stone-pulse { 0%, 100% { box-shadow: 0 0 0 rgba(232, 193, 97, 0), 0 7px 12px rgba(0, 0, 0, .32); } 50% { box-shadow: 0 0 19px 6px rgba(232, 193, 97, .55), 0 7px 12px rgba(0, 0, 0, .32); } }
@keyframes sound-ring { 0% { opacity: .7; transform: scale(.88); } 80%, 100% { opacity: 0; transform: scale(1.17); } }
@keyframes firefly { 0%, 100% { opacity: .18; transform: translate(0, 0); } 35% { opacity: .95; transform: translate(18px, -13px); } 72% { opacity: .35; transform: translate(-9px, 8px); } }
@keyframes gate-reveal { from { opacity: 0; transform: translateX(-50%) scale(.8); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@keyframes lantern-flicker { 0%, 100% { box-shadow: 0 -8px 16px 3px rgba(255, 214, 112, .43); } 50% { box-shadow: 0 -8px 22px 7px rgba(255, 214, 112, .7); } }
@keyframes water-rise { 0%, 100% { height: 48px; opacity: .7; } 50% { height: 70px; opacity: 1; } }

html[data-reduced-motion="true"] *, html[data-reduced-motion="true"] *::before, html[data-reduced-motion="true"] *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }

@media (max-width: 1000px) {
  .rank-pill { display: none; }
  .hero-copy { width: min(600px, 60vw); }
  .estate-ledger { width: 310px; }
  .modal-zone { width: min(510px, 51vw); right: 24px; }
  .trail-brief { width: 220px; }
  .phase-rail { top: 96px; }
  .shop-layout { grid-template-columns: 1fr; margin-left: 0; }
  .page-heading, .page-heading.compact, .notice, .collection-sheet, .settings-folio { width: 100%; margin-left: 0; }
  .shop-preview { position: relative; top: auto; display: grid; grid-template-columns: 220px 1fr; column-gap: 15px; }
  .shop-preview .preview-image { grid-row: 1 / 5; }
  .shop-preview .folio-label { margin-top: 0; }
}

@media (max-width: 760px) {
  .experience { min-height: 580px; }
  .top-rail { min-height: 70px; grid-template-columns: 1fr auto; padding: 11px 15px; }
  .brand-mark { width: 38px; height: 38px; font-size: 21px; }
  .brand-lockup strong { font-size: 18px; }.brand-lockup em { display: none; }
  .stage-chip { display: none; }
  .credit-pill { min-width: 82px; min-height: 40px; padding: 5px 8px; }.credit-pill em { display: none; }.credit-pill strong { font-size: 16px; }
  .status-cluster .round-button { width: 38px; height: 38px; }
  .bottom-nav { min-height: 61px; grid-template-columns: repeat(4, 1fr); }
  .bottom-nav button { gap: 3px; flex-direction: column; font-size: 14px; letter-spacing: .04em; }.bottom-nav svg { width: 18px; }
  .home-scene { padding: 94px 18px 88px; }
  .home-scene::after { background: linear-gradient(90deg, rgba(3, 16, 12, .86), rgba(3, 16, 12, .29)), linear-gradient(0deg, rgba(3, 16, 12, .78), transparent); }
  .hero-copy { width: 100%; margin-top: 5vh; }.hero-copy h1 { font-size: clamp(48px, 13vw, 70px); }.hero-intro { font-size: 14px; }
  .estate-ledger { display: none; }
  .stage-selector { left: 18px; right: 18px; bottom: 70px; grid-template-columns: 1fr 1.2fr 1fr; }
  .stage-selector .stage-choice { grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: center; gap: 1px; padding: 7px 5px; text-align: center; }.stage-selector span { display: none; }.stage-selector strong { font-size: 14px; }.stage-selector em { font-size: 14px; }
  .trail-world { top: 70px; }
  .learner-pair { width: clamp(205px, 57vw, 315px); }
  .trail-brief { left: 12px; top: 84px; width: 185px; padding: 11px; }.trail-brief > strong { font-size: 16px; }
  .phase-rail { right: 10px; top: 79px; }.phase-rail > span { padding: 0 5px; font-size: 0; }.phase-rail i { font-size: 14px; }
  .modal-zone { left: 12px; right: 12px; top: 57%; width: auto; transform: translateY(-50%); }
  .challenge-folio, .feedback-folio, .gate-folio { max-height: calc(100dvh - 155px); padding: 19px; }
  .trail-intro { left: 15px; right: 15px; bottom: 78px; width: auto; padding: 18px; }.trail-intro h1 { font-size: 44px; }
  .page-scene { padding: 96px 16px 80px; }
  .back-button { position: static; margin-bottom: 18px; }
  .page-heading h1 { font-size: 47px; }
  .shop-item { grid-template-columns: 1fr; }.item-price { grid-template-columns: auto auto auto; justify-content: space-between; align-items: center; justify-items: start; padding-left: 54px; }
  .shop-preview { display: block; }.shop-preview .preview-image { margin-bottom: 12px; }
  .estate-copy { left: 15px; right: 15px; top: 45%; width: auto; transform: translateY(-35%); padding: 17px; }.estate-copy h1 { font-size: 47px; }
  .estate-markers { right: 12px; bottom: 74px; width: 230px; }.estate-marker { padding: 6px 8px; }.estate-marker > span { width: 24px; height: 24px; }
  .fountain-visual { left: 71%; bottom: 24%; transform: translateX(-50%) scale(.74); }
  .garden-arch-visual { right: 7%; transform: scale(.72); transform-origin: bottom right; }
  .lantern-field i { left: calc(20% + var(--i) * 10%); }
  .collection-sheet article { grid-template-columns: 1fr auto; }.word-definition, .evidence-row, .word-origin { grid-column: 1 / 3; }.word-origin { flex-direction: column; gap: 3px; }
  .setting-row, .profile-row, .reset-row { min-height: 72px; }.setting-row em, .profile-row em, .reset-row em { max-width: 230px; }
  .summary-scene { padding: 85px 10px 14px; }.summary-folio { max-height: calc(100dvh - 95px); padding: 22px; }.summary-folio h1 { font-size: 43px; }.session-stats { grid-template-columns: 1fr 1fr; }.summary-actions { display: grid; }.summary-actions > * { width: 100%; }
  .confusion-grid { grid-template-columns: 1fr; }
}

@media (max-height: 700px) and (min-width: 761px) {
  .top-rail { min-height: 70px; padding-top: 9px; padding-bottom: 9px; }
  .home-scene { padding-top: 95px; }.hero-copy { margin-top: 2vh; }.hero-copy h1 { font-size: 58px; }.hero-intro { line-height: 1.55; }
  .estate-ledger { bottom: 90px; }.stage-selector { bottom: 73px; }
  .trail-world { top: 70px; }.trail-brief { top: 88px; }.phase-rail { top: 83px; }.modal-zone { top: 55%; }
  .challenge-folio, .feedback-folio, .gate-folio { max-height: calc(100dvh - 142px); padding-top: 19px; padding-bottom: 18px; }
  .page-scene { padding-top: 98px; }.page-heading h1 { font-size: 52px; margin-bottom: 10px; }.shop-layout { margin-top: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (max-width: 1000px) {
  .stage-elementary .elementary-hero { width: min(560px, 60vw); }
  .stage-elementary .elementary-home-pair { right: 1vw; width: clamp(300px, 40vw, 450px); opacity: .96; }
  .stage-elementary .estate-ledger { display: none; }
}

@media (max-width: 760px) {
  .stage-elementary .elementary-hero { width: 100%; margin-top: 2.5vh; padding: 19px 20px 21px; }
  .stage-elementary .elementary-hero h1 { font-size: clamp(42px, 12vw, 60px); }
  .stage-elementary .elementary-hero .hero-intro { font-size: 14px; line-height: 1.55; }
  .stage-elementary .elementary-home-pair { right: -64px; bottom: 55px; width: 260px; opacity: .22; }
  .stage-elementary .trail-intro.elementary-intro { bottom: 74px; }
  .stage-elementary .learner-pair.younger-pair { width: clamp(205px, 60vw, 300px); }
  .stage-elementary .modal-zone { top: 55%; }
  .elementary-folio .word-parts { align-items: flex-start; flex-direction: column; }
  .elementary-folio .word-parts em { max-width: none; }
  .elementary-folio .discover-actions { display: grid; grid-template-columns: 1fr; }
  .elementary-folio .discover-actions > * { width: 100%; }
  .stage-elementary .elementary-estate-copy { top: 41%; }
  .stage-elementary .bench-visual { left: 18%; transform: scale(.72); transform-origin: bottom left; }
  .stage-elementary .pollinator-field { right: 6%; transform: scale(.7); transform-origin: bottom right; }
  .stage-elementary .greenhouse-visual { right: 5%; transform: scale(.7); transform-origin: top right; }
  .stage-elementary .elementary-arbor { right: 8%; transform: scale(.58); }
  .stage-elementary .elementary-lanterns i { left: calc(16% + var(--i) * 10%); }
}

/* Phase 3 — concrete concept teaching, spiral review, and adult/educator progress */
.progress-scene::before { background-image: url("/apps/vocabulary-adventure/assets/word-library.webp"); }
.progress-scene::after { background: linear-gradient(90deg, rgba(3, 15, 12, .95), rgba(4, 18, 14, .77) 62%, rgba(4, 16, 13, .9)); }
.stage-elementary .progress-scene::before { background-image: url("/apps/vocabulary-adventure/assets/elementary-orchard.webp"); }
.stage-elementary .progress-scene::after { background: linear-gradient(90deg, rgba(4, 25, 16, .92), rgba(5, 31, 19, .7) 64%, rgba(4, 25, 16, .8)); }

.zone-note { display: block; margin: 5px 0 2px; color: #586650; font-size: 14px; font-style: normal; line-height: 1.4; }

.concept-support-card { display: grid; grid-template-columns: minmax(0, 1fr) 145px; gap: 10px 15px; align-items: center; padding: 11px 12px 9px; border: 1px solid rgba(105, 118, 74, .34); border-radius: 12px; background: linear-gradient(135deg, rgba(244, 237, 205, .76), rgba(224, 230, 190, .62)); }
.concept-support-card > div:first-child { min-width: 0; }
.concept-support-card > div:first-child > span { display: block; margin-bottom: 3px; color: #78602b; font-size: 14px; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.concept-support-card > div:first-child > strong { display: block; margin-bottom: 5px; color: #173524; font-family: var(--serif); font-size: 17px; font-weight: 600; }
.concept-support-card > div:first-child > p { margin: 0; color: #40523f; font-size: 14px; line-height: 1.5; }
.concept-support-card > em { grid-column: 1 / -1; padding-top: 7px; border-top: 1px solid rgba(91, 105, 64, .22); color: #516342; font-size: 14px; font-style: normal; font-weight: 800; letter-spacing: .015em; }
.concept-visual { width: 145px; height: 76px; border: 1px solid rgba(104, 87, 45, .24); border-radius: 10px; background: rgba(255, 251, 232, .68); overflow: hidden; }
.concept-visual svg { display: block; width: 100%; height: 100%; }
.concept-visual svg * { vector-effect: non-scaling-stroke; stroke: #536b43; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.concept-visual .leaf-shape, .concept-visual .tree, .concept-visual .near-tree, .concept-visual .shelter-tree { fill: rgba(107, 139, 77, .25); }
.concept-visual .object-solid, .concept-visual .basket, .concept-visual .house, .concept-visual .door { fill: rgba(154, 111, 56, .2); }
.concept-visual .token, .concept-visual .sun, .concept-visual .seed { fill: rgba(210, 168, 78, .38); stroke: #866623; }
.concept-visual .token.faint { opacity: .58; }
.concept-visual .ground { stroke: #7b6a46; }
.concept-visual .glass { fill: rgba(196, 221, 219, .24); stroke: #51726d; }
.concept-visual .detail-dot { fill: #7d6329; stroke: none; }
.concept-visual .check-line { stroke: #6d823f; stroke-width: 5; }
.concept-visual .crack { stroke: #9a593d; }
.concept-visual .umbrella { fill: rgba(213, 171, 81, .18); stroke: #886b32; }
.concept-visual .cloud { fill: rgba(152, 168, 161, .18); }
.concept-visual .rain { stroke: #54777a; }
.concept-visual .pond, .concept-visual .puddle { fill: rgba(95, 150, 153, .2); stroke: #527779; }
.concept-visual .path-wide, .concept-visual .path-narrow { fill: rgba(145, 123, 82, .16); stroke: #806c45; }
.concept-visual .far-mountain { fill: rgba(102, 119, 88, .14); }

.maya-coach-card { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 11px; align-items: start; margin: 14px 0; padding: 12px; border: 1px solid rgba(99, 122, 67, .38); border-radius: 12px; background: rgba(242, 235, 205, .74); }
.maya-coach-card .eyebrow { margin: 1px 0 4px; color: #76602e; font-size: 14px; }
.maya-coach-card h3 { margin: 0 0 5px; color: #173524; font-family: var(--serif); font-size: 18px; font-weight: 600; }
.maya-coach-card p { margin: 0 0 6px; color: #40523f; font-size: 14px; line-height: 1.5; }
.maya-coach-card em { display: block; color: #546747; font-size: 14px; font-style: normal; font-weight: 700; line-height: 1.45; }

.progress-entry { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 75px; padding: 15px 17px; border-bottom: 1px solid rgba(229, 211, 158, .13); background: rgba(213, 170, 84, .04); }
.progress-entry > span { display: grid; gap: 4px; }
.progress-entry strong { color: var(--ivory); font-size: 14px; }
.progress-entry em { max-width: 420px; color: var(--mist); font-size: 14px; font-style: normal; line-height: 1.45; }
.progress-entry .quiet-action { flex: 0 0 auto; min-height: 34px; padding: 0 12px; font-size: 14px; }

.progress-dashboard { width: min(1080px, calc(100% - min(7vw, 110px))); margin: 24px 0 0 min(7vw, 110px); padding-bottom: 30px; animation: rise-in 460ms 80ms var(--ease) both; }
.progress-overview { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid rgba(226, 190, 104, .23); background: rgba(226, 190, 104, .16); }
.progress-overview article { min-height: 105px; padding: 15px; background: rgba(5, 25, 20, .9); }
.progress-overview span { display: block; color: rgba(224, 211, 172, .64); font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.progress-overview strong { display: block; margin: 8px 0 6px; color: var(--brass-bright); font-family: var(--serif); font-size: 28px; font-weight: 400; }
.progress-overview em { color: var(--mist); font-size: 14px; font-style: normal; line-height: 1.45; }
.progress-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.progress-panel { padding: 18px; border: 1px solid rgba(226, 190, 104, .25); background: rgba(5, 25, 20, .88); box-shadow: 0 16px 38px rgba(0, 0, 0, .18); backdrop-filter: blur(12px); }
.progress-panel h2 { margin: -4px 0 15px; color: var(--ivory); font-family: var(--serif); font-size: 25px; font-weight: 400; }
.skill-bars { display: grid; gap: 12px; }
.skill-bars > div > span { display: flex; justify-content: space-between; margin-bottom: 5px; color: var(--stone); font-size: 14px; }
.skill-bars > div > span b { font-weight: 700; }
.skill-bars > div > span em { color: var(--brass-bright); font-style: normal; }
.skill-bars > div > i { display: block; height: 7px; overflow: hidden; border-radius: 99px; background: rgba(224, 210, 167, .12); }
.skill-bars > div > i > b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #95702f, var(--brass-bright)); }
.privacy-note, .empty-progress { margin: 14px 0 0; color: rgba(199, 211, 193, .65); font-size: 14px; line-height: 1.5; }
.support-word-list { display: grid; gap: 1px; border: 1px solid rgba(226, 190, 104, .13); background: rgba(226, 190, 104, .11); }
.support-word-list article { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; padding: 9px 10px; background: rgba(6, 29, 22, .94); }
.support-word-list strong { color: var(--ivory); font-family: var(--serif); font-size: 15px; font-weight: 400; }
.support-word-list span { align-self: center; color: var(--brass-bright); font-size: 14px; font-weight: 800; text-transform: uppercase; }
.support-word-list em { grid-column: 1 / -1; color: var(--mist); font-size: 14px; font-style: normal; }
.stage-progress { margin-top: 14px; }
.stage-progress-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stage-progress-card { display: grid; grid-template-columns: 33px 1fr; gap: 10px; align-items: center; padding: 11px; border: 1px solid rgba(226, 190, 104, .13); background: rgba(223, 210, 167, .045); }
.stage-progress-card > span { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid rgba(226, 190, 104, .38); border-radius: 50%; color: var(--brass-bright); font-family: var(--serif); font-size: 14px; }
.stage-progress-card > div { display: grid; gap: 3px; }
.stage-progress-card strong { color: var(--ivory); font-size: 14px; }
.stage-progress-card em { color: var(--mist); font-size: 14px; font-style: normal; }
.stage-progress-card.active { border-color: rgba(226, 190, 104, .48); background: rgba(213, 170, 84, .09); }

@media (max-width: 1000px) {
  .progress-dashboard { width: 100%; margin-left: 0; }
  .progress-overview { grid-template-columns: repeat(2, 1fr); }
  .progress-columns { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .concept-support-card { grid-template-columns: 1fr; }
  .concept-visual { width: 100%; height: 82px; }
  .progress-entry { align-items: flex-start; flex-direction: column; }
  .progress-overview { grid-template-columns: 1fr 1fr; }
  .stage-progress-grid { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .progress-overview { grid-template-columns: 1fr; }
  .concept-support-card { padding: 9px; }
}

/* Phase 4 — Junior High diagnostic teaching */
.diagnosis-card { display: grid; grid-template-columns: auto 1fr; gap: 13px; margin: 14px 0; padding: 13px 14px; border: 1px solid rgba(114, 170, 158, .28); background: linear-gradient(135deg, rgba(15, 52, 45, .78), rgba(7, 31, 26, .72)); }
.diagnosis-tag { align-self: start; padding: 6px 8px; border: 1px solid rgba(226, 188, 102, .38); color: var(--brass-bright); font-size: 14px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.diagnosis-card .eyebrow { margin: 0 0 4px; }
.diagnosis-card h3 { margin: 0 0 6px; color: var(--ivory); font-family: var(--serif); font-size: 18px; font-weight: 400; line-height: 1.15; }
.diagnosis-card p:not(.eyebrow) { margin: 0 0 7px; color: var(--stone); font-size: 14px; line-height: 1.5; }
.diagnosis-card em { display: block; color: var(--mist); font-size: 14px; font-style: normal; line-height: 1.5; }
.diagnosis-card em strong { color: var(--brass-bright); font-weight: 700; }
.misconception-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.misconception-heading h3 { margin-bottom: 10px; }
.quiet-action.mini { width: auto; min-width: 0; padding: 8px 10px; white-space: nowrap; font-size: 14px; }
.confusion-grid article { position: relative; }
.confusion-grid article.selected-trap { border-color: rgba(226, 188, 102, .5); box-shadow: inset 0 0 0 1px rgba(226, 188, 102, .12); }
.confusion-grid article.selected-trap::after { content: "chosen"; position: absolute; top: 7px; right: 7px; color: rgba(233, 214, 161, .65); font-size: 14px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.confusion-grid b { color: var(--ivory); font-size: 14px; font-weight: 500; line-height: 1.42; }
.memory-key { display: grid; gap: 3px; margin-top: 10px; padding: 9px 10px; border-left: 2px solid var(--brass); background: rgba(226, 188, 102, .07); }
.memory-key span { color: var(--mist); font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.memory-key strong { color: var(--brass-bright); font-family: var(--serif); font-size: 14px; font-weight: 400; }
.misconception-card .retry-cue { margin-top: 8px !important; padding-top: 8px; border-top: 1px solid rgba(233, 214, 161, .12); }
.misconception-card .retry-cue strong { color: var(--ivory); }

@media (max-width: 680px) {
  .diagnosis-card { grid-template-columns: 1fr; }
  .misconception-heading { display: grid; }
  .quiet-action.mini { justify-self: start; }
}
.repair-patterns { display: grid; gap: 7px; margin-top: 15px; padding-top: 13px; border-top: 1px solid rgba(233, 214, 161, .13); }
.repair-patterns > span { display: flex; justify-content: space-between; gap: 10px; color: var(--stone); font-size: 14px; }
.repair-patterns > span b { color: var(--ivory); font-weight: 600; }
.repair-patterns > span em { color: var(--mist); font-style: normal; }
.repair-patterns small { color: var(--brass-bright); font-size: 14px; line-height: 1.45; }
.confusion-grid.three-way { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 880px) { .confusion-grid.three-way { grid-template-columns: 1fr; } }

/* Phase 5 — High School Civic Design District */
.stage-high-school .top-rail { background: linear-gradient(180deg, rgba(5, 18, 20, .95), rgba(5, 20, 21, .78)); }
.stage-high-school .bottom-nav { background: rgba(5, 18, 20, .94); }
.high-school-home::before, .project-scene::before, .hs-property-scene::before, .hs-summary-scene::before { background-image: url("/apps/vocabulary-adventure/assets/high-school-civic.webp"); background-position: center; }
.high-school-home::after, .project-scene::after, .hs-property-scene::after { background: linear-gradient(90deg, rgba(3, 16, 18, .93) 0%, rgba(4, 20, 20, .55) 37%, rgba(5, 21, 20, .12) 66%, rgba(5, 18, 17, .34) 100%), linear-gradient(0deg, rgba(3, 16, 17, .76), transparent 48%); }
.high-school-home { padding: 120px clamp(24px, 4vw, 68px) 118px; }
.high-school-home-shade, .project-world-shade, .hs-property-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 72% 35%, rgba(235, 205, 126, .08), transparent 32%); }
.hs-home-copy { position: relative; z-index: 3; width: min(555px, 43vw); margin-top: min(7vh, 64px); animation: rise-in 520ms var(--ease) both; }
.hs-home-copy h1 { margin: 0 0 18px; color: var(--ivory); font-family: var(--serif); font-size: clamp(48px, 5.6vw, 78px); font-weight: 400; letter-spacing: -.035em; line-height: .95; text-shadow: 0 4px 30px rgba(0,0,0,.35); }
.hs-role-card { display: grid; gap: 4px; width: min(430px, 100%); margin: 18px 0 22px; padding: 13px 15px; border: 1px solid rgba(226, 190, 104, .32); border-left: 3px solid var(--brass); background: rgba(5, 24, 23, .78); backdrop-filter: blur(11px); }
.hs-role-card span, .role-line span { color: #df9e63; font-size: 14px; font-weight: 800; letter-spacing: .13em; }
.hs-role-card strong { color: var(--ivory); font-size: 14px; }
.hs-role-card em { color: var(--mist); font-size: 14px; font-style: normal; }
.hs-home-pair { position: absolute; left: 34%; bottom: 65px; z-index: 1; width: min(620px, 43vw); height: calc(100% - 130px); pointer-events: none; filter: drop-shadow(0 26px 30px rgba(0,0,0,.28)); }
.hs-home-pair img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; }
.hs-status-ledger { position: absolute; right: clamp(22px, 3.2vw, 54px); top: 120px; z-index: 4; width: min(292px, 23vw); padding: 17px; border: 1px solid rgba(226, 190, 104, .3); border-top: 2px solid var(--brass); background: rgba(5, 24, 23, .87); box-shadow: 0 22px 52px rgba(0,0,0,.26); backdrop-filter: blur(14px); }
.hs-status-ledger > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid rgba(226, 208, 157, .12); }
.hs-status-ledger span { color: var(--mist); font-size: 14px; }
.hs-status-ledger strong { color: var(--brass-bright); font-family: var(--serif); font-size: 17px; font-weight: 400; }
.stage-high-school .stage-selector { max-width: 610px; }

.project-scene { padding: 100px 24px 92px; }
.project-pair { position: absolute; left: 12.5%; bottom: 63px; z-index: 1; width: min(620px, 39vw); height: calc(100% - 150px); pointer-events: none; filter: drop-shadow(0 25px 28px rgba(0,0,0,.31)); }
.project-pair img, .project-intro-pair img { width: 100%; height: 100%; object-fit: contain; object-position: bottom center; }
.project-brief-rail { position: absolute; left: 24px; top: 118px; z-index: 5; width: min(290px, 21vw); padding: 17px; border: 1px solid rgba(226, 190, 104, .32); background: rgba(5, 23, 22, .87); box-shadow: 0 20px 45px rgba(0,0,0,.24); backdrop-filter: blur(13px); }
.project-brief-rail > strong { display: block; margin: 13px 0 8px; color: #df9e63; font-size: 14px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.project-brief-rail > p:not(.eyebrow) { color: var(--stone); font-size: 14px; line-height: 1.6; }
.role-line { display: grid; gap: 3px; padding: 9px 0; border-top: 1px solid rgba(226, 190, 104, .14); border-bottom: 1px solid rgba(226, 190, 104, .14); }
.role-line strong { color: var(--ivory); font-size: 14px; font-weight: 600; }
.field-label-stack { display: grid; gap: 6px; margin: 15px 0; }
.field-label-stack span { padding: 7px 9px; border: 1px solid rgba(172, 208, 196, .22); background: rgba(6, 29, 28, .62); color: #d8e2dc; font-size: 14px; }
.project-tablet { position: absolute; right: clamp(26px, 3vw, 54px); top: 118px; bottom: 106px; z-index: 6; width: min(610px, 42vw); padding: 18px; border: 2px solid rgba(184, 166, 123, .47); border-radius: 27px 7px 27px 7px; background: linear-gradient(145deg, rgba(5, 28, 29, .95), rgba(5, 22, 24, .94)); box-shadow: 0 28px 65px rgba(0,0,0,.34), inset 0 0 0 4px rgba(5, 11, 12, .5); overflow: auto; scrollbar-width: thin; backdrop-filter: blur(15px); }
.project-step { min-height: 100%; padding: 12px 13px 10px; }
.project-step h2 { margin: 0 0 13px; color: var(--ivory); font-family: var(--serif); font-size: clamp(26px, 2.4vw, 38px); font-weight: 400; line-height: 1.05; }
.project-step > p:not(.folio-label), .project-problem { color: #d5ddd7; font-size: 14px; line-height: 1.65; }
.constraint-list { display: grid; gap: 8px; margin: 18px 0 22px; padding: 13px; border: 1px solid rgba(226, 190, 104, .16); background: rgba(226, 190, 104, .04); }
.constraint-list > strong { color: var(--brass-bright); font-size: 14px; letter-spacing: .09em; text-transform: uppercase; }
.constraint-list span { display: flex; gap: 7px; align-items: flex-start; color: var(--stone); font-size: 14px; line-height: 1.45; }
.evidence-cards { display: grid; gap: 9px; margin: 16px 0 20px; }
.evidence-card { display: grid; grid-template-columns: 32px 1fr; gap: 10px; width: 100%; padding: 11px 12px; border: 1px solid rgba(170, 201, 190, .22); background: rgba(6, 32, 31, .76); color: var(--ivory); text-align: left; transition: border-color 160ms ease, background 160ms ease, transform 160ms var(--ease); }
.evidence-card:hover { transform: translateY(-1px); border-color: rgba(226, 190, 104, .48); }
.evidence-card > span { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid rgba(226, 190, 104, .28); border-radius: 50%; color: var(--brass-bright); }
.evidence-card strong { font-family: var(--serif); font-size: 15px; font-weight: 400; }
.evidence-card p { margin: 4px 0 0; color: var(--mist); font-size: 14px; line-height: 1.45; }
.evidence-card.reviewed { border-color: rgba(121, 174, 150, .48); background: rgba(25, 61, 50, .72); }
.decision-stem { padding: 13px 14px; border-left: 2px solid var(--brass); background: rgba(226, 190, 104, .06); color: var(--ivory) !important; font-size: 14px !important; line-height: 1.55 !important; }
.project-options, .recommendation-options { display: grid; gap: 7px; margin: 15px 0; }
.project-options button, .recommendation-options button { width: 100%; border: 1px solid rgba(212, 192, 139, .25); background: rgba(6, 30, 29, .76); color: var(--ivory); text-align: left; transition: border-color 150ms ease, background 150ms ease, transform 150ms var(--ease); }
.project-options button { min-height: 44px; padding: 9px 12px; font-family: var(--serif); font-size: 17px; }
.project-options.long button { font-family: var(--sans); font-size: 14px; line-height: 1.5; }
.project-options button:hover, .project-options button.selected, .recommendation-options button:hover, .recommendation-options button.selected { transform: translateY(-1px); border-color: var(--brass); background: rgba(187, 141, 58, .15); }
.recommendation-options button { display: grid; gap: 5px; padding: 10px 11px; }
.recommendation-options strong { color: var(--brass-bright); font-family: var(--serif); font-size: 15px; font-weight: 400; }
.recommendation-options span { color: var(--mist); font-size: 14px; line-height: 1.45; }
.project-feedback { display: grid; grid-template-columns: auto 1fr; gap: 10px; margin: 12px 0; padding: 10px; border: 1px solid rgba(226, 190, 104, .22); background: rgba(226, 190, 104, .055); }
.project-feedback.correct { border-color: rgba(122, 181, 145, .42); background: rgba(53, 100, 70, .19); }
.project-feedback.wrong { border-color: rgba(219, 144, 112, .35); background: rgba(94, 48, 40, .19); }
.project-feedback > svg { color: var(--brass-bright); }
.project-feedback strong { color: var(--ivory); font-size: 14px; }
.project-feedback p { margin: 4px 0 3px; color: var(--stone); font-size: 14px; line-height: 1.48; }
.project-feedback em { color: var(--brass-bright); font-size: 14px; font-style: normal; }
.project-step-actions { display: flex; justify-content: flex-end; margin-top: 14px; }
.rationale-field { display: grid; gap: 6px; margin-top: 14px; }
.rationale-field > span { display: flex; justify-content: space-between; gap: 12px; color: var(--ivory); font-size: 14px; font-weight: 700; }
.rationale-field em { color: var(--mist); font-size: 14px; font-style: normal; font-weight: 500; }
.rationale-field textarea { min-height: 88px; resize: vertical; border: 1px solid rgba(226, 190, 104, .28); border-radius: 0; padding: 10px; background: rgba(2, 15, 16, .76); color: var(--ivory); font: 10px/1.5 var(--sans); }
.rationale-field textarea:focus-visible { outline: 2px solid var(--brass-bright); outline-offset: 2px; }
.rationale-field small { color: rgba(209, 219, 210, .6); font-size: 14px; text-align: right; }
.impact-signal { display: flex; align-items: center; gap: 10px; margin: 18px 0; padding: 14px; border: 1px solid rgba(101, 176, 207, .4); background: linear-gradient(90deg, rgba(30, 114, 142, .18), rgba(41, 117, 87, .16)); color: #a9dcf1; letter-spacing: .11em; font-size: 14px; font-weight: 800; }
.impact-next { display: grid; gap: 4px; margin: 18px 0 22px; padding-top: 13px; border-top: 1px solid rgba(226, 190, 104, .16); }
.impact-next strong { color: var(--brass-bright); font-size: 14px; text-transform: uppercase; letter-spacing: .11em; }
.impact-next span { color: var(--stone); font-size: 14px; }
.project-progress { position: absolute; left: 30%; right: 4%; bottom: 72px; z-index: 7; display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center; min-height: 34px; padding: 0 14px; border: 1px solid rgba(226, 190, 104, .25); background: rgba(4, 20, 20, .87); backdrop-filter: blur(12px); }
.project-progress > span, .project-progress > strong { color: var(--stone); font-family: var(--serif); font-size: 14px; font-weight: 400; }
.project-progress-track { position: relative; display: flex; align-items: center; justify-content: space-between; height: 14px; }
.project-progress-track::before { content:""; position:absolute; left:0; right:0; top:6px; height:2px; background: rgba(209, 201, 178, .24); }
.project-progress-track > i { position:absolute; left:0; top:6px; height:2px; background: var(--brass-bright); transition: width 420ms var(--ease); }
.project-progress-track b { position: relative; z-index: 1; width: 10px; height: 10px; border: 2px solid rgba(195, 194, 177, .42); border-radius: 50%; background: #32403d; }
.project-progress-track b.done, .project-progress-track b.current { border-color: var(--brass-bright); background: var(--brass); box-shadow: 0 0 0 3px rgba(213,170,84,.12); }
.project-progress-track b.current { width: 14px; height: 14px; }
.project-intro-card { position: absolute; left: clamp(30px, 4vw, 70px); top: 150px; z-index: 4; width: min(450px, 38vw); padding: 24px; border: 1px solid rgba(226,190,104,.35); background: rgba(5,24,23,.88); backdrop-filter: blur(13px); box-shadow: 0 26px 60px rgba(0,0,0,.3); }
.project-intro-card h1 { margin: 0 0 14px; font-family: var(--serif); font-weight: 400; font-size: clamp(42px, 4.4vw, 68px); line-height: .95; }
.project-intro-card > p:not(.eyebrow) { color: var(--stone); font-size: 14px; line-height: 1.6; }
.project-intro-pair { position: absolute; left: 42%; bottom: 65px; z-index: 2; width: min(620px, 42vw); height: calc(100% - 145px); pointer-events: none; filter: drop-shadow(0 24px 30px rgba(0,0,0,.28)); }

.hs-property-scene { padding: 118px 5vw 100px; }
.hs-property-copy { position: relative; z-index: 3; width: min(470px, 39vw); margin-top: 11vh; padding: 21px; border: 1px solid rgba(226,190,104,.27); background: rgba(5,24,23,.83); backdrop-filter: blur(13px); }
.hs-property-copy h1 { margin: 0 0 13px; color: var(--ivory); font-family: var(--serif); font-size: clamp(48px, 5vw, 75px); font-weight: 400; line-height: .92; }
.hs-property-copy > p:not(.eyebrow) { color: var(--stone); font-size: 14px; line-height: 1.6; }
.portfolio-board { position: absolute; right: 4vw; top: 132px; bottom: 92px; z-index: 4; width: min(560px, 43vw); padding: 18px; overflow: auto; border: 1px solid rgba(226,190,104,.28); background: rgba(5,24,23,.87); backdrop-filter: blur(14px); }
.portfolio-board article { display: grid; grid-template-columns: 31px 1fr; gap: 10px; margin-bottom: 9px; padding: 12px; border: 1px solid rgba(226,190,104,.14); background: rgba(226,190,104,.04); }
.portfolio-board article > span { display: grid; place-items:center; width:29px; height:29px; border:1px solid rgba(122,181,145,.4); border-radius:50%; color:#9fc6ac; }
.portfolio-board article strong { color: var(--ivory); font-family: var(--serif); font-size: 16px; font-weight: 400; }
.portfolio-board article em { display:block; margin-top:3px; color: var(--brass-bright); font-size: 14px; font-style:normal; }
.portfolio-board article p, .portfolio-empty p { margin:6px 0 0; color: var(--mist); font-size: 14px; line-height:1.5; }
.portfolio-empty { display:grid; place-items:center; min-height:220px; text-align:center; color:var(--stone); }
.portfolio-empty svg { color:var(--brass-bright); }
.portfolio-empty strong { font-family:var(--serif); font-size:20px; font-weight:400; }
.hs-summary-scene::after { background: linear-gradient(90deg, rgba(3,17,18,.84), rgba(5,20,20,.42)), linear-gradient(0deg, rgba(3,16,17,.72), transparent 55%); }
.hs-summary-folio { border-color: rgba(226,190,104,.35); background: rgba(5,24,23,.88); }

@media (max-width: 1080px) {
  .hs-home-pair { left: 39%; width: 48vw; }
  .hs-status-ledger { width: 250px; }
  .project-brief-rail { width: 240px; }
  .project-pair { left: 8%; width: 43vw; opacity: .92; }
  .project-tablet { width: 52vw; }
  .project-progress { left: 24px; right: 24px; }
}

@media (max-width: 820px) {
  body { overflow: auto; }
  .experience { min-height: 860px; height: auto; overflow: visible; }
  .high-school-home, .project-scene, .hs-property-scene { position: relative; min-height: 1000px; }
  .hs-home-copy { width: min(92%, 560px); }
  .hs-home-pair { left: 40%; bottom: 72px; width: 58vw; opacity: .65; }
  .hs-status-ledger { top: auto; right: 24px; bottom: 150px; width: 280px; }
  .project-brief-rail { left: 20px; top: 110px; width: calc(100% - 40px); }
  .project-brief-rail .field-label-stack { display:none; }
  .project-pair { display:none; }
  .project-tablet { left: 20px; right: 20px; top: 325px; bottom: 150px; width: auto; }
  .project-progress { bottom: 82px; }
  .hs-property-copy { width: 92%; margin-top: 45px; }
  .portfolio-board { position: absolute; left: 5vw; right: 5vw; top: 560px; bottom: 90px; width: auto; }
}

@media (max-width: 620px) {
  .high-school-home { padding-left: 18px; padding-right: 18px; }
  .hs-home-copy { width: 100%; }
  .hs-home-pair { display: none; }
  .hs-status-ledger { left: 18px; right: 18px; width: auto; }
  .project-tablet { border-radius: 12px 4px 12px 4px; padding: 10px; }
  .project-progress { grid-template-columns: 1fr; gap: 5px; padding: 8px 10px; }
  .project-progress > strong { display:none; }
  .rationale-field > span { display:grid; }
  .bottom-nav { grid-template-columns: repeat(4, minmax(70px, 1fr)); }
  .bottom-nav button { gap:5px; font-size: 14px; }
}

/* Phase 6 — High School Professional District Network */
.district-network-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  width: min(555px, 100%);
  margin-top: 18px;
}
.district-network-strip > span,
.network-domain-list > span,
.portfolio-domain-grid > span {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 10px;
  align-items: center;
  padding: 8px 9px;
  border: 1px solid rgba(196, 211, 203, .17);
  background: rgba(5, 27, 27, .68);
  backdrop-filter: blur(8px);
}
.district-network-strip b,
.network-domain-list b,
.portfolio-domain-grid b {
  color: #dce4de;
  font-size: 14px;
  font-weight: 700;
}
.district-network-strip em,
.network-domain-list em,
.portfolio-domain-grid em {
  color: rgba(215, 226, 219, .61);
  font-size: 14px;
  font-style: normal;
}
.district-network-strip > span.touched,
.network-domain-list > span.touched,
.portfolio-domain-grid > span.active {
  border-color: rgba(226, 190, 104, .42);
  background: linear-gradient(120deg, rgba(185, 141, 63, .12), rgba(17, 63, 56, .34));
}
.network-intro-card { width: min(530px, 44vw); }
.network-intro-card h1 { font-size: clamp(38px, 4vw, 62px); }
.network-domain-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 17px 0 21px;
}
.domain-badge {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 11px;
  padding: 5px 8px;
  border: 1px solid rgba(226, 190, 104, .25);
  background: rgba(226, 190, 104, .07);
  color: var(--brass-bright);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.randomized-note {
  margin: 13px 0 16px !important;
  padding-top: 11px;
  border-top: 1px solid rgba(226,190,104,.13);
  color: rgba(210, 222, 214, .72) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}
.portfolio-domain-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 17px 0 19px;
}
.portfolio-board article small {
  display: block;
  margin-bottom: 3px;
  color: rgba(170, 203, 190, .75);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.world-impact-overlay {
  position: absolute;
  right: clamp(26px, 3.2vw, 54px);
  bottom: 116px;
  z-index: 3;
  display: grid;
  gap: 6px;
  width: min(285px, 22vw);
  pointer-events: none;
}
.world-impact-marker {
  display: grid;
  grid-template-columns: 24px 1fr;
  grid-template-rows: auto auto;
  gap: 1px 7px;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid rgba(120, 183, 156, .26);
  background: rgba(4, 24, 23, .76);
  box-shadow: 0 10px 25px rgba(0,0,0,.17);
  backdrop-filter: blur(9px);
  transform: translateX(var(--impact-offset, 0px));
}
.world-impact-marker i {
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(226,190,104,.27);
  border-radius: 50%;
  color: var(--brass-bright);
}
.world-impact-marker b {
  color: #e7ece8;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .065em;
}
.world-impact-marker em {
  color: rgba(188, 205, 196, .68);
  font-size: 14px;
  font-style: normal;
}
.project-scene.domain-community-health .project-tablet { box-shadow: 0 28px 65px rgba(0,0,0,.34), inset 0 0 0 4px rgba(16, 38, 35, .58); }
.project-scene.domain-business-operations .project-tablet { box-shadow: 0 28px 65px rgba(0,0,0,.34), inset 0 0 0 4px rgba(38, 31, 18, .44); }
.project-scene.domain-infrastructure-engineering .project-tablet { box-shadow: 0 28px 65px rgba(0,0,0,.34), inset 0 0 0 4px rgba(27, 35, 39, .56); }
.project-scene.domain-environmental-science .project-tablet { box-shadow: 0 28px 65px rgba(0,0,0,.34), inset 0 0 0 4px rgba(18, 44, 31, .54); }
.project-scene.domain-civic-communication .project-tablet { box-shadow: 0 28px 65px rgba(0,0,0,.34), inset 0 0 0 4px rgba(38, 30, 42, .43); }

@media (max-width: 1080px) {
  .world-impact-overlay { display: none; }
  .district-network-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .network-intro-card { width: calc(100% - 40px); }
  .district-network-strip { width: min(92%, 560px); }
  .portfolio-domain-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .district-network-strip,
  .network-domain-list,
  .portfolio-domain-grid { grid-template-columns: 1fr; }
  .network-intro-card { left: 18px; right: 18px; width: auto; padding: 18px; }
}

/* Phase 7 — applied transfer intelligence */
.scenario-chip,
.rail-scenario {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 10px;
  padding: 5px 8px;
  border: 1px solid rgba(126, 179, 164, .28);
  background: rgba(30, 93, 81, .12);
  color: #b8d8cf;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.rail-scenario { margin-top: -5px; }

.precision-repair {
  display: grid;
  gap: 11px;
  margin: 12px 0 14px;
  padding: 13px;
  border: 1px solid rgba(220, 155, 102, .34);
  background: linear-gradient(135deg, rgba(84, 45, 29, .22), rgba(9, 34, 31, .86));
  box-shadow: inset 0 0 0 1px rgba(227, 193, 128, .04);
}
.repair-heading {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.repair-heading > svg { margin-top: 1px; color: var(--brass-bright); }
.repair-heading > span { display: grid; gap: 2px; }
.repair-heading b { color: var(--ivory); font-family: var(--serif); font-size: 17px; font-weight: 400; }
.repair-heading em { color: #d8aa70; font-size: 14px; font-style: normal; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.repair-contrast {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.repair-contrast article {
  padding: 9px 10px;
  border: 1px solid rgba(226, 190, 104, .15);
  background: rgba(3, 22, 22, .56);
}
.repair-contrast span { display: block; color: rgba(213, 224, 218, .58); font-size: 14px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.repair-contrast strong { display: block; margin: 4px 0; color: var(--brass-bright); font-family: var(--serif); font-size: 18px; font-weight: 400; }
.repair-contrast p { margin: 0; color: var(--mist); font-size: 14px; line-height: 1.45; }
.precision-repair > p { margin: 0; color: #dbe4de; font-size: 14px; line-height: 1.5; }
.precision-repair > small { padding-top: 9px; border-top: 1px solid rgba(226, 190, 104, .13); color: #ddbf7d; font-size: 14px; font-weight: 700; line-height: 1.45; }

.applied-domain-insights,
.transfer-insights { margin-top: 14px; }
.domain-insight-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.domain-insight-grid article {
  display: grid;
  gap: 6px;
  min-height: 135px;
  padding: 11px;
  border: 1px solid rgba(226, 190, 104, .15);
  background: rgba(220, 197, 137, .035);
}
.domain-insight-grid article > div { display: grid; gap: 3px; }
.domain-insight-grid strong { color: var(--ivory); font-size: 14px; }
.domain-insight-grid span { color: #9ec6b4; font-size: 14px; font-weight: 700; }
.domain-insight-grid article > b { color: var(--brass-bright); font-family: var(--serif); font-size: 27px; font-weight: 400; }
.domain-insight-grid em { color: var(--mist); font-size: 14px; font-style: normal; }
.domain-insight-grid small { margin-top: auto; color: rgba(197, 211, 203, .63); font-size: 14px; line-height: 1.5; }
.transfer-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.transfer-list article {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 9px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid rgba(226, 190, 104, .13);
  background: rgba(4, 27, 25, .66);
}
.transfer-list article > span {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(226, 190, 104, .24);
  border-radius: 50%;
  color: var(--brass-bright);
}
.transfer-list article > div { display: grid; gap: 2px; }
.transfer-list strong { color: var(--ivory); font-family: var(--serif); font-size: 15px; font-weight: 400; }
.transfer-list em { color: var(--mist); font-size: 14px; font-style: normal; }
.transfer-list small { color: rgba(180, 202, 191, .63); font-size: 14px; }
.transfer-list article.transferred {
  border-color: rgba(115, 177, 145, .37);
  background: linear-gradient(120deg, rgba(43, 104, 73, .16), rgba(5, 28, 25, .7));
}
.hs-repair-patterns {
  display: grid;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(226, 190, 104, .13);
}
.hs-repair-patterns > span { display: flex; justify-content: space-between; gap: 10px; color: var(--stone); font-size: 14px; }
.hs-repair-patterns > span b { color: var(--ivory); font-weight: 600; text-transform: capitalize; }
.hs-repair-patterns > span em { color: var(--mist); font-style: normal; }

@media (max-width: 900px) {
  .domain-insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .repair-contrast,
  .domain-insight-grid,
  .transfer-list { grid-template-columns: 1fr; }
  .precision-repair { padding: 10px; }
  .domain-insight-grid article { min-height: 0; }
}

/* Phase 8 — professional evidence-chain reasoning */
.chain-stage-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 14px;
}
.chain-stage-rail span {
  padding: 7px 8px;
  border: 1px solid rgba(180, 202, 191, .15);
  background: rgba(4, 26, 25, .54);
  color: rgba(200, 214, 206, .58);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}
.chain-stage-rail span.current {
  border-color: rgba(226, 190, 104, .44);
  background: rgba(183, 135, 56, .13);
  color: var(--brass-bright);
}
.chain-stage-rail span.done {
  border-color: rgba(111, 177, 143, .38);
  background: rgba(52, 106, 75, .16);
  color: #b9d7c3;
}
.chain-evidence-cards { margin-bottom: 13px; }
.evidence-card.chain-choice.selected {
  border-color: rgba(226, 190, 104, .6);
  background: linear-gradient(105deg, rgba(177, 130, 52, .17), rgba(18, 58, 50, .74));
  box-shadow: inset 0 0 0 1px rgba(226, 190, 104, .08);
}
.evidence-card.chain-choice.selected > span {
  border-color: rgba(226, 190, 104, .58);
  background: rgba(226, 190, 104, .12);
}
.evidence-chain-summary {
  display: grid;
  gap: 8px;
  margin: 15px 0;
  padding: 12px;
  border: 1px solid rgba(226, 190, 104, .22);
  background: linear-gradient(135deg, rgba(226, 190, 104, .045), rgba(9, 43, 38, .58));
}
.evidence-chain-summary.compact {
  margin: 10px 0 13px;
  padding: 9px;
}
.chain-link {
  display: grid;
  grid-template-columns: 27px 1fr;
  gap: 9px;
  align-items: start;
}
.chain-link > span {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border: 1px solid rgba(226, 190, 104, .42);
  border-radius: 50%;
  color: var(--brass-bright);
  font-family: var(--serif);
  font-size: 14px;
}
.chain-link > div {
  display: grid;
  gap: 3px;
  padding-bottom: 7px;
  border-bottom: 1px solid rgba(226, 190, 104, .09);
}
.chain-link:last-child > div { border-bottom: 0; padding-bottom: 0; }
.chain-link strong {
  color: var(--ivory);
  font-size: 14px;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.chain-link em {
  color: var(--mist);
  font-size: 14px;
  font-style: normal;
  line-height: 1.45;
}
.evidence-chain-summary.compact .chain-link em { font-size: 14px; }
.filed-recommendation {
  display: grid;
  gap: 4px;
  margin: 13px 0;
  padding: 11px 12px;
  border-left: 2px solid #7ab192;
  background: rgba(48, 101, 73, .13);
}
.filed-recommendation > span {
  color: #a8c9b5;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.filed-recommendation strong {
  color: var(--ivory);
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
}
.filed-recommendation p {
  margin: 0;
  color: var(--mist);
  font-size: 14px;
  line-height: 1.48;
}
.rationale-step > p:not(.folio-label) { margin-bottom: 8px; }
.complete-chain .evidence-chain-summary { margin-top: 18px; }
.constraint-options button,
.assumption-options button { min-height: 52px; }

@media (max-width: 620px) {
  .chain-stage-rail { grid-template-columns: 1fr; }
  .chain-stage-rail span { text-align: left; }
  .evidence-chain-summary { padding: 9px; }
  .chain-link { grid-template-columns: 24px 1fr; }
  .chain-link > span { width: 22px; height: 22px; }
}
.portfolio-board article .chain-filed {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  margin-top: 5px;
  color: #a8ceb8;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* Phase 9 — evidence quality and source judgment */
.source-stage-rail {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 14px;
}
.source-stage-rail span {
  padding: 7px 8px;
  border: 1px solid rgba(180, 202, 191, .15);
  background: rgba(4, 26, 25, .54);
  color: rgba(200, 214, 206, .58);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}
.source-stage-rail span.current {
  border-color: rgba(118, 181, 196, .46);
  background: rgba(54, 123, 139, .14);
  color: #bde5ef;
}
.source-stage-rail span.done {
  border-color: rgba(111, 177, 143, .38);
  background: rgba(52, 106, 75, .16);
  color: #b9d7c3;
}
.source-card-grid {
  display: grid;
  gap: 8px;
  margin: 14px 0;
}
.source-card {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(125, 180, 192, .24);
  background: linear-gradient(135deg, rgba(7, 37, 39, .86), rgba(5, 27, 28, .78));
  color: var(--ivory);
  text-align: left;
  transition: border-color 160ms ease, transform 160ms var(--ease), background 160ms ease;
}
.source-card:hover,
.source-card.selected {
  transform: translateY(-1px);
  border-color: rgba(151, 210, 222, .66);
  background: linear-gradient(135deg, rgba(20, 69, 75, .84), rgba(17, 53, 48, .76));
}
.source-card-kicker {
  color: #9ed1dc;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.source-card > strong {
  color: var(--ivory);
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 400;
}
.source-card > p {
  margin: 0;
  color: var(--stone);
  font-size: 14px;
  line-height: 1.45;
}
.source-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 2px 0 0;
}
.source-card dl > div {
  min-width: 0;
  padding: 7px;
  border-top: 1px solid rgba(143, 198, 209, .12);
  background: rgba(4, 24, 25, .42);
}
.source-card dt {
  margin-bottom: 3px;
  color: #8dc4cf;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.source-card dd {
  margin: 0;
  color: var(--mist);
  font-size: 14px;
  line-height: 1.4;
}
.confidence-options {
  display: grid;
  gap: 8px;
  margin: 15px 0;
}
.confidence-option {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid rgba(212, 192, 139, .22);
  background: rgba(6, 30, 29, .76);
  color: var(--ivory);
  text-align: left;
}
.confidence-option:hover,
.confidence-option.selected {
  border-color: rgba(151, 210, 222, .62);
  background: rgba(45, 93, 97, .18);
}
.confidence-option strong {
  color: #c6edf4;
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 400;
}
.confidence-option span {
  color: var(--mist);
  font-size: 14px;
  line-height: 1.45;
}
.source-judgment-summary {
  display: grid;
  gap: 6px;
  margin: 15px 0;
  padding: 11px 12px;
  border: 1px solid rgba(133, 191, 203, .24);
  background: linear-gradient(135deg, rgba(31, 83, 91, .12), rgba(8, 39, 36, .54));
}
.source-judgment-summary.compact {
  margin: 9px 0 12px;
  padding: 9px;
}
.source-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 6px;
  border-top: 1px solid rgba(139, 190, 199, .1);
}
.source-summary-row:first-of-type { padding-top: 0; border-top: 0; }
.source-summary-row span {
  color: #8dc4cf;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.source-summary-row strong {
  max-width: 65%;
  color: var(--ivory);
  font-size: 14px;
  font-weight: 600;
  text-align: right;
}
.source-complete .source-judgment-summary { margin-top: 18px; }

@media (max-width: 620px) {
  .source-stage-rail,
  .source-card dl { grid-template-columns: 1fr; }
  .source-stage-rail span { text-align: left; }
  .source-summary-row { display: grid; gap: 3px; }
  .source-summary-row strong { max-width: none; text-align: left; }
}

/* Phase 10 — conflicting evidence & decision revision */
.revision-stage-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 14px;
}
.revision-stage-rail span {
  padding: 7px 9px;
  border: 1px solid rgba(212, 192, 139, .18);
  background: rgba(4, 25, 25, .58);
  color: rgba(228, 226, 211, .48);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
}
.revision-stage-rail span.current {
  border-color: rgba(223, 173, 77, .72);
  color: var(--brass-bright);
  background: rgba(154, 105, 31, .14);
}
.revision-stage-rail span.done {
  border-color: rgba(116, 184, 145, .44);
  color: #a9d5bd;
  background: rgba(50, 112, 76, .14);
}
.late-evidence-card {
  display: grid;
  gap: 8px;
  margin: 14px 0;
  padding: 13px;
  border: 1px solid rgba(151, 210, 222, .34);
  background: linear-gradient(145deg, rgba(26, 72, 80, .22), rgba(4, 26, 27, .76));
  box-shadow: inset 3px 0 0 rgba(143, 205, 216, .38);
}
.late-evidence-kicker {
  color: #9ed1dc;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.late-evidence-card > strong {
  color: var(--ivory);
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 400;
}
.late-evidence-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}
.late-evidence-card dl > div {
  padding: 8px;
  border-top: 1px solid rgba(151, 210, 222, .12);
  background: rgba(2, 18, 19, .38);
}
.late-evidence-card dt {
  margin-bottom: 3px;
  color: #87c4cf;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.late-evidence-card dd {
  margin: 0;
  color: var(--mist);
  font-size: 14px;
  line-height: 1.45;
}
.decision-revision-step h3 {
  margin: 13px 0 8px;
  color: var(--ivory);
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 400;
}
.revision-impact-options,
.revision-response-options {
  display: grid;
  gap: 7px;
  margin: 10px 0 15px;
}
.revision-impact-option,
.revision-response-option {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 10px 11px;
  border: 1px solid rgba(212, 192, 139, .22);
  background: rgba(6, 30, 29, .76);
  color: var(--ivory);
  text-align: left;
}
.revision-impact-option:hover,
.revision-impact-option.selected,
.revision-response-option:hover,
.revision-response-option.selected {
  transform: translateY(-1px);
  border-color: rgba(151, 210, 222, .66);
  background: rgba(41, 86, 94, .2);
}
.revision-impact-option strong,
.revision-response-option strong {
  color: #c6edf4;
  font-family: var(--serif);
  font-size: 15px;
  font-weight: 400;
}
.revision-impact-option span,
.revision-response-option span {
  color: var(--mist);
  font-size: 14px;
  line-height: 1.42;
}
.filed-recommendation.preliminary {
  border-color: rgba(220, 169, 72, .26);
  background: rgba(104, 71, 18, .12);
}
.decision-revision-summary {
  display: grid;
  gap: 7px;
  margin: 15px 0;
  padding: 11px 12px;
  border: 1px solid rgba(151, 210, 222, .26);
  background: linear-gradient(135deg, rgba(31, 83, 91, .13), rgba(8, 39, 36, .58));
}
.decision-revision-summary.compact {
  margin: 9px 0 12px;
  padding: 9px;
}
.decision-revision-summary > p:not(.folio-label) {
  margin: 4px 0 0;
  color: var(--mist);
  font-size: 14px;
  line-height: 1.45;
}
.revision-complete .decision-revision-summary { margin-top: 18px; }

@media (max-width: 620px) {
  .revision-stage-rail,
  .late-evidence-card dl { grid-template-columns: 1fr; }
  .revision-stage-rail span { text-align: left; }
}

/* Phase 12 — Estate & Lifestyle completion */
.shop-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; max-width: 1050px; margin: 18px 0 0 min(11vw, 170px); border: 1px solid rgba(229, 207, 151, .18); background: rgba(226, 198, 125, .12); }
.shop-overview > div { display: grid; gap: 3px; min-height: 66px; padding: 11px 13px; background: rgba(5, 27, 21, .84); }
.shop-overview span { color: var(--mist); font-size: 14px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.shop-overview strong { color: var(--ivory); font-family: var(--serif); font-size: 18px; font-weight: 400; }
.shop-overview em { color: rgba(210, 220, 205, .72); font-size: 14px; font-style: normal; }
.shop-category-bar { display: flex; flex-wrap: wrap; gap: 6px; max-width: 1050px; margin: 10px 0 0 min(11vw, 170px); }
.shop-category-bar button { min-height: 27px; padding: 0 10px; border: 1px solid rgba(226, 195, 123, .25); border-radius: 999px; background: rgba(4, 25, 19, .72); color: var(--mist); font-size: 14px; font-weight: 800; letter-spacing: .04em; }
.shop-category-bar button:hover, .shop-category-bar button.active { border-color: rgba(240, 204, 123, .72); background: rgba(213, 170, 84, .15); color: var(--brass-bright); }
.shop-layout.expanded-catalog { margin-top: 12px; }
.expanded-catalog .shop-list { max-height: min(50vh, 520px); overflow-y: auto; padding-right: 7px; scrollbar-width: thin; scrollbar-color: rgba(213, 170, 84, .5) rgba(4, 22, 17, .3); }
.build-chip { display: inline-flex; margin-top: 5px; padding: 3px 6px; border: 1px solid rgba(179, 196, 165, .2); border-radius: 999px; color: var(--sage); font-size: 14px; font-style: normal; }
.preview-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 11px 0; border: 1px solid rgba(226, 195, 123, .15); background: rgba(226, 195, 123, .11); }
.preview-specs span { display: grid; gap: 3px; padding: 7px; background: rgba(4, 24, 18, .76); color: var(--mist); font-size: 14px; line-height: 1.35; }
.preview-specs b { color: var(--brass-bright); font-size: 14px; letter-spacing: .07em; text-transform: uppercase; }

.property-completion { display: grid; gap: 5px; margin: 12px 0 16px; }
.property-completion > span { position: relative; height: 5px; overflow: hidden; border-radius: 99px; background: rgba(229, 213, 167, .15); }
.property-completion > span b { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #a67f32, var(--brass-bright)); box-shadow: 0 0 13px rgba(240, 204, 123, .35); }
.property-completion strong { color: var(--stone); font-size: 14px; }
.property-completion em { color: var(--mist); font-size: 14px; font-style: normal; line-height: 1.35; }
.stage-elementary .property-completion > span { background: rgba(76, 92, 57, .18); }
.stage-elementary .property-completion > span b { background: linear-gradient(90deg, #71884e, #b5b86d); }
.stage-elementary .property-completion strong { color: #334b38; }
.stage-elementary .property-completion em { color: #53614d; }

.estate-interior-gallery { position: absolute; right: clamp(286px, 28vw, 430px); top: 102px; z-index: 8; width: min(235px, 20vw); padding: 10px; border: 1px solid rgba(226, 195, 123, .25); background: rgba(4, 22, 17, .79); box-shadow: 0 14px 34px rgba(0,0,0,.25); backdrop-filter: blur(10px); }
.estate-interior-gallery .folio-label { margin-bottom: 7px; }
.estate-interior-gallery > div { display: grid; gap: 5px; }
.estate-interior-gallery article { display: grid; grid-template-columns: 30px 1fr; gap: 7px; align-items: center; min-height: 43px; padding: 6px 7px; border: 1px solid rgba(229, 210, 159, .16); background: linear-gradient(110deg, rgba(8, 36, 28, .88), rgba(15, 46, 37, .62)), url('/apps/vocabulary-adventure/assets/word-library.webp') center/cover; }
.estate-interior-gallery article > span { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid rgba(240, 204, 123, .35); border-radius: 50%; color: var(--brass-bright); background: rgba(5,24,18,.72); }
.estate-interior-gallery article div { display: grid; gap: 2px; }
.estate-interior-gallery strong { color: var(--ivory); font-family: var(--serif); font-size: 14px; font-weight: 400; }
.estate-interior-gallery em { color: var(--mist); font-size: 14px; font-style: normal; line-height: 1.3; }
.estate-interior-gallery article.ghost { opacity: .58; outline: 1px dashed var(--brass-bright); }
.estate-markers { max-height: 46vh; overflow-y: auto; padding-right: 5px; scrollbar-width: thin; scrollbar-color: rgba(213,170,84,.45) rgba(4,22,17,.2); }

.property-visual { pointer-events: none; }
.property-visual.ghost { opacity: .55; outline: 2px dashed var(--brass-bright); outline-offset: 6px; filter: saturate(.58); }
.construction-visual.stage-surveyed { opacity: .57; filter: grayscale(.8) sepia(.25); outline: 2px dashed rgba(240, 204, 123, .75); outline-offset: 5px; }
.construction-visual.stage-foundation { opacity: .76; filter: saturate(.58) contrast(.9); }
.construction-visual.stage-installed { opacity: 1; }

/* Elementary property layers */
.birdbath-visual { position: absolute; left: 39%; bottom: 16%; width: 62px; height: 69px; filter: drop-shadow(0 7px 5px rgba(0,0,0,.2)); }
.birdbath-visual i { position: absolute; left: 50%; bottom: 0; width: 14px; height: 47px; border-radius: 4px 4px 1px 1px; background: linear-gradient(90deg,#7c7566,#d1c7a7,#797261); transform: translateX(-50%); }
.birdbath-visual span { position: absolute; left: 50%; top: 2px; width: 61px; height: 25px; border: 5px solid #b7ad90; border-radius: 50%; background: radial-gradient(ellipse,#7ea3a2 0 47%,#cbc1a2 49%); transform: translateX(-50%); }
.trellis-visual { position: absolute; left: 11%; bottom: 29%; width: 106px; height: 78px; border-left: 5px solid #6e5532; border-right: 5px solid #6e5532; }
.trellis-visual::before, .trellis-visual::after { content:""; position:absolute; left:0; right:0; height:4px; background:#7b6039; }
.trellis-visual::before { top:15px; }.trellis-visual::after { top:42px; }
.trellis-visual i { position:absolute; bottom:-2px; width:39px; height:60px; background: repeating-radial-gradient(circle at 50% 10%, #8a3f55 0 4px, #587943 5px 10px, transparent 11px 17px); }
.trellis-visual i:first-child { left:6px; }.trellis-visual i:nth-child(2) { right:6px; }
.pond-visual { position:absolute; right:4%; bottom:9%; width:180px; height:72px; border:6px solid #9f987c; border-radius:50%; background:radial-gradient(ellipse,#6f9e98 0 48%,#8a8f68 49% 61%,#6d6f55 62%); box-shadow:0 9px 12px rgba(0,0,0,.22); }
.pond-visual i, .pond-visual span { position:absolute; bottom:31px; width:4px; height:35px; background:#657b3f; transform-origin:bottom; }
.pond-visual i { left:17px; transform:rotate(-10deg); }.pond-visual span { right:24px; transform:rotate(12deg); }
.bridge-visual { position:absolute; left:47%; bottom:10%; width:132px; height:50px; border-top:9px solid #7f5e36; border-radius:50% 50% 0 0; transform:rotate(-5deg); filter:drop-shadow(0 7px 5px rgba(0,0,0,.22)); }
.bridge-visual::before, .bridge-visual::after { content:""; position:absolute; top:-2px; bottom:0; width:5px; background:#5d4327; }
.bridge-visual::before { left:15px; }.bridge-visual::after { right:15px; }
.bridge-visual i { position:absolute; left:12px; right:12px; top:4px; height:4px; background:repeating-linear-gradient(90deg,#a98150 0 10px,#694c2e 11px 14px); }
.treehouse-visual { position:absolute; left:7%; top:14%; width:100px; height:100px; }
.treehouse-visual::before { content:""; position:absolute; left:45px; top:45px; bottom:-55px; width:13px; background:#5f472c; }
.treehouse-visual i { position:absolute; left:14px; top:17px; width:73px; height:56px; border:5px solid #6c4d2a; background:linear-gradient(#a78352,#74502d); }
.treehouse-visual i::before { content:""; position:absolute; left:-10px; right:-10px; top:-26px; border-left:45px solid transparent; border-right:45px solid transparent; border-bottom:28px solid #574226; }
.treehouse-visual span { position:absolute; left:42px; top:38px; width:18px; height:31px; border:3px solid #4d3b25; background:#d3bd80; }
.pavilion-visual { position:absolute; right:3%; top:39%; width:118px; height:84px; border-left:6px solid #806747; border-right:6px solid #806747; }
.pavilion-visual::before { content:""; position:absolute; left:-14px; right:-14px; top:-18px; height:22px; background:#6b5336; clip-path:polygon(8% 100%,50% 0,92% 100%); }
.pavilion-visual i { position:absolute; left:8px; right:8px; bottom:6px; height:8px; background:#8d7149; }
.lookout-visual { position:absolute; left:43%; top:10%; width:82px; height:93px; }
.lookout-visual::before { content:""; position:absolute; left:8px; right:8px; top:7px; height:45px; border:5px solid #6a5337; background:rgba(167,185,142,.18); }
.lookout-visual i { position:absolute; left:36px; top:48px; width:10px; height:45px; background:#665035; }
.lookout-visual span { position:absolute; left:18px; top:17px; width:43px; height:9px; border-radius:10px; background:#424a3c; transform:rotate(-18deg); }

/* Junior High lifestyle layers */
.bicycles-visual { position:absolute; left:22%; bottom:11%; width:92px; height:48px; }
.bicycles-visual i { position:absolute; bottom:0; width:31px; height:31px; border:3px solid #d4c29b; border-radius:50%; }
.bicycles-visual i:first-child { left:2px; }.bicycles-visual i:nth-child(2) { right:2px; }
.bicycles-visual span { position:absolute; left:25px; top:11px; width:44px; height:3px; background:#d5aa54; transform:rotate(-8deg); box-shadow:0 10px 0 #d5aa54; }
.terrace-visual { position:absolute; left:36%; bottom:20%; width:92px; height:55px; }
.terrace-visual::before { content:""; position:absolute; left:19px; top:13px; width:51px; height:20px; border:4px solid #b9ab8b; border-radius:50%; background:#8e8065; }
.terrace-visual i, .terrace-visual span, .terrace-visual b { position:absolute; bottom:2px; width:5px; height:28px; background:#6f654f; }
.terrace-visual i { left:25px; }.terrace-visual span { left:44px; }.terrace-visual b { right:23px; }
.sculpture-visual { position:absolute; right:29%; bottom:27%; width:62px; height:88px; }
.sculpture-visual::before { content:""; position:absolute; left:15px; right:15px; bottom:0; height:17px; background:#afa88f; }
.sculpture-visual i { position:absolute; left:23px; top:9px; width:18px; height:62px; border-radius:50% 50% 20% 20%; background:linear-gradient(90deg,#777269,#d8d1be,#8c877b); transform:rotate(11deg); }
.reflecting-pool-visual { position:absolute; left:51%; bottom:9%; width:212px; height:49px; border:5px solid #bbb092; border-radius:45%; background:linear-gradient(90deg,#6f9296,#a3c0bc,#698b91); transform:rotate(-2deg); box-shadow:0 8px 15px rgba(0,0,0,.2); }
.reflecting-pool-visual i { position:absolute; inset:7px 15px; border-radius:45%; border-top:1px solid rgba(226,242,228,.6); }
.conservatory-visual { position:absolute; right:5%; top:22%; width:142px; height:104px; border:5px solid rgba(111,125,96,.92); background:linear-gradient(125deg,rgba(207,229,214,.38),rgba(112,157,133,.18)); clip-path:polygon(10% 28%,50% 0,90% 28%,100% 28%,100% 100%,0 100%,0 28%); }
.conservatory-visual::before { content:""; position:absolute; left:48%; top:28%; bottom:0; width:4px; background:rgba(91,108,83,.75); }
.conservatory-visual i { position:absolute; left:8%; right:8%; top:52%; height:3px; background:rgba(91,108,83,.75); }
.tennis-visual { position:absolute; right:2%; bottom:31%; width:145px; height:73px; border:4px solid #b6ad92; background:#547450; transform:skewX(-7deg) rotate(-2deg); box-shadow:0 8px 12px rgba(0,0,0,.18); }
.tennis-visual::before, .tennis-visual::after { content:""; position:absolute; background:rgba(240,238,215,.75); }
.tennis-visual::before { left:50%; top:0; bottom:0; width:2px; }.tennis-visual::after { left:0; right:0; top:50%; height:2px; }
.tennis-visual i { position:absolute; left:49%; top:-3px; bottom:-3px; width:3px; background:#3d4538; }
.swimming-pool-visual { position:absolute; right:3%; bottom:7%; width:185px; height:68px; border:7px solid #d0c5a8; background:repeating-linear-gradient(0deg,#6f9ea1 0 12px,#7eaaac 13px 24px); transform:perspective(250px) rotateX(50deg); box-shadow:0 9px 13px rgba(0,0,0,.22); }
.swimming-pool-visual i { position:absolute; left:13px; top:11px; bottom:11px; width:3px; background:rgba(230,242,235,.55); box-shadow:45px 0 0 rgba(230,242,235,.45),90px 0 0 rgba(230,242,235,.45),135px 0 0 rgba(230,242,235,.45); }
.pool-pavilion-visual { position:absolute; right:9%; bottom:17%; width:89px; height:63px; border-left:5px solid #8e7956; border-right:5px solid #8e7956; }
.pool-pavilion-visual::before { content:""; position:absolute; left:-9px; right:-9px; top:-14px; height:18px; background:#6a593d; clip-path:polygon(8% 100%,50% 0,92% 100%); }
.pool-pavilion-visual i { position:absolute; left:10px; right:10px; bottom:4px; height:7px; background:#b6a57f; }
.guest-cottage-visual { position:absolute; left:4%; top:25%; width:142px; height:94px; border:5px solid #8e8975; background:linear-gradient(#a69e84,#7d7866); box-shadow:0 10px 13px rgba(0,0,0,.25); }
.guest-cottage-visual::before { content:""; position:absolute; left:-9px; right:-9px; top:-34px; border-left:79px solid transparent; border-right:79px solid transparent; border-bottom:36px solid #574f3d; }
.guest-cottage-visual i, .guest-cottage-visual span { position:absolute; top:22px; width:24px; height:25px; border:3px solid #5d5a4c; background:#d7c98b; }
.guest-cottage-visual i { left:14px; }.guest-cottage-visual span { right:14px; }
.guest-cottage-visual b { position:absolute; left:55px; bottom:0; width:28px; height:46px; background:#5e5141; }
.estate-cart-visual { position:absolute; left:31%; bottom:8%; width:96px; height:48px; border-radius:8px 12px 4px 4px; background:#405b4f; box-shadow:0 6px 10px rgba(0,0,0,.22); }
.estate-cart-visual::before { content:""; position:absolute; left:17px; top:-21px; width:56px; height:24px; border:4px solid #526e61; border-bottom:0; }
.estate-cart-visual i { position:absolute; bottom:-10px; width:23px; height:23px; border:4px solid #272d29; border-radius:50%; background:#8a8c7d; }
.estate-cart-visual i:first-child { left:10px; }.estate-cart-visual i:nth-child(2) { right:10px; }
.estate-cart-visual span { position:absolute; right:10px; top:10px; width:29px; height:15px; background:#b8d0c6; }

@media (max-width: 1100px) {
  .shop-overview, .shop-category-bar { margin-left: 0; }
  .estate-interior-gallery { right: 266px; width: 210px; }
  .guest-cottage-visual { transform:scale(.82); transform-origin:top left; }
  .conservatory-visual { transform:scale(.8); transform-origin:top right; }
  .tennis-visual { transform:scale(.78) skewX(-7deg) rotate(-2deg); transform-origin:bottom right; }
  .swimming-pool-visual { transform:scale(.78) perspective(250px) rotateX(50deg); transform-origin:bottom right; }
}

@media (max-width: 760px) {
  .shop-overview { grid-template-columns: 1fr; }
  .shop-overview > div { min-height: 52px; }
  .shop-category-bar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; }
  .shop-category-bar button { flex: 0 0 auto; }
  .expanded-catalog .shop-list { max-height: none; overflow: visible; padding-right: 0; }
  .preview-specs { grid-template-columns: 1fr; }
  .estate-interior-gallery { left: 14px; right: auto; top: auto; bottom: 78px; width: min(245px, calc(100vw - 28px)); max-height: 128px; overflow-y: auto; }
  .estate-markers { display: none; }
  .birdbath-visual { left: 42%; transform:scale(.72); transform-origin:bottom center; }
  .trellis-visual, .treehouse-visual, .lookout-visual { transform:scale(.68); transform-origin:top left; }
  .pond-visual { transform:scale(.68); transform-origin:bottom right; }
  .bridge-visual { transform:scale(.7) rotate(-5deg); transform-origin:bottom center; }
  .pavilion-visual { transform:scale(.68); transform-origin:top right; }
  .bicycles-visual, .terrace-visual, .sculpture-visual, .reflecting-pool-visual, .pool-pavilion-visual, .estate-cart-visual { transform:scale(.68); transform-origin:bottom center; }
  .guest-cottage-visual { transform:scale(.62); }
  .conservatory-visual { transform:scale(.62); }
  .tennis-visual { transform:scale(.6) skewX(-7deg) rotate(-2deg); }
  .swimming-pool-visual { transform:scale(.62) perspective(250px) rotateX(50deg); }
}

/* ==========================================================================
   Phase 13 — Visual & Animation Polish
   Motion is decorative only, never carries learning meaning, and is fully
   suppressed by the existing reduced-motion setting.
   ========================================================================== */

.experience {
  --pointer-x: 0;
  --pointer-y: 0;
  --parallax-x: 0px;
  --parallax-y: 0px;
}

/* Atmospheric depth: intentionally faint and pointer-transparent. */
.ambient-atmosphere {
  position: fixed;
  inset: 82px 0 70px;
  z-index: 12;
  overflow: hidden;
  pointer-events: none;
  opacity: .56;
  mask-image: radial-gradient(ellipse at 68% 42%, #000 0 48%, rgba(0,0,0,.72) 67%, transparent 94%);
}
.ambient-light,
.ambient-depth {
  position: absolute;
  inset: -8%;
  pointer-events: none;
}
.ambient-light {
  background: radial-gradient(circle at 74% 31%, rgba(245, 213, 126, .13), transparent 20%), radial-gradient(circle at 57% 61%, rgba(151, 193, 153, .08), transparent 24%);
  transform: translate(var(--parallax-x), var(--parallax-y));
  transition: transform 400ms ease-out;
  animation: p13-light-breathe 10s ease-in-out infinite;
}
.ambient-depth {
  background: linear-gradient(120deg, transparent 30%, rgba(242, 222, 166, .045) 46%, transparent 62%);
  animation: p13-depth-sweep 18s linear infinite;
}
.ambient-particles { position: absolute; inset: 0; }
.ambient-particles i {
  position: absolute;
  left: var(--ambient-x);
  top: calc(8% + (var(--ambient-i) * 7.1%));
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(244, 214, 127, .62);
  box-shadow: 0 0 11px rgba(244, 214, 127, .32);
  opacity: .25;
  animation: p13-ambient-drift calc(8s + (var(--ambient-i) * .38s)) var(--ambient-delay) ease-in-out infinite;
}
.ambient-elementary .ambient-particles i {
  width: 8px;
  height: 4px;
  border-radius: 80% 20% 70% 30%;
  background: rgba(247, 226, 157, .68);
  box-shadow: none;
  transform: rotate(calc(var(--ambient-i) * 19deg));
}
.ambient-junior-high .ambient-particles i {
  width: 4px;
  height: 4px;
  background: rgba(248, 207, 97, .85);
  box-shadow: 0 0 9px 2px rgba(239, 191, 67, .35);
}
.ambient-high-school {
  opacity: .38;
  mask-image: linear-gradient(90deg, transparent 0 29%, #000 48% 100%);
}
.ambient-high-school .ambient-particles i {
  width: 15px;
  height: 1px;
  border-radius: 0;
  background: linear-gradient(90deg, transparent, rgba(155, 218, 213, .72), transparent);
  box-shadow: none;
  animation-name: p13-data-glint;
  animation-timing-function: linear;
}

/* Background camera drift and page arrival. */
.scene::before {
  transform: translate(var(--parallax-x), var(--parallax-y)) scale(1.018);
  transition: transform 700ms ease-out;
  animation: p13-world-breathe 22s ease-in-out infinite alternate;
}
.screen-entering main > :not(.trail-world):not(.estate-world):not(.ambient-atmosphere) {
  animation: p13-screen-enter 420ms var(--ease) both;
}
.screen-entering .scene::after { animation: p13-vignette-arrive 520ms ease both; }

/* Rail + buttons feel physical without becoming flashy. */
.top-rail { overflow: hidden; }
.top-rail::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -24%;
  width: 18%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(245, 221, 155, .065), transparent);
  animation: p13-rail-gleam 14s 2s ease-in-out infinite;
}
.brand-mark { animation: p13-brand-breathe 6s ease-in-out infinite; }
.primary-action,
.quiet-action,
.round-button,
.bottom-nav button,
.stage-choice,
.project-options button,
.recommendation-options button,
.source-card,
.confidence-option,
.shop-item {
  -webkit-tap-highlight-color: transparent;
}
.primary-action { position: relative; overflow: hidden; }
.primary-action::after {
  content: "";
  position: absolute;
  inset: -2px auto -2px -40%;
  width: 28%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.34), transparent);
  transform: skewX(-18deg);
  transition: left 420ms var(--ease);
}
.primary-action:hover:not(:disabled)::after { left: 118%; }
.primary-action:active:not(:disabled), .quiet-action:active, .round-button:active { transform: translateY(0) scale(.985); }

/* Credit gain/spend feedback. It is supplementary; the numeric balance stays visible. */
.credit-pill { position: relative; overflow: visible; }
.credit-pill::after {
  content: attr(data-delta);
  position: absolute;
  right: 8px;
  top: 100%;
  z-index: 5;
  min-width: 34px;
  padding: 4px 7px;
  border: 1px solid rgba(240, 204, 123, .46);
  border-radius: 99px;
  background: rgba(5, 24, 18, .94);
  color: var(--brass-bright);
  font-size: 14px;
  font-weight: 900;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}
.credit-pill.credit-gain { animation: p13-credit-gain 720ms var(--ease); }
.credit-pill.credit-spend { animation: p13-credit-spend 620ms var(--ease); }
.credit-pill.credit-gain::after,
.credit-pill.credit-spend::after { animation: p13-credit-delta 940ms var(--ease) both; }
.credit-pill.credit-spend::after { color: var(--stone); }

/* Home character life. Images move independently so positioning remains stable. */
.elementary-home-pair img,
.hs-home-pair img,
.project-intro-pair img,
.project-pair img {
  transform-origin: 50% 100%;
  animation: p13-character-idle 6.2s ease-in-out infinite;
}
.elementary-home-pair::after,
.hs-home-pair::after,
.project-intro-pair::after,
.project-pair::after {
  content: "";
  position: absolute;
  left: 22%;
  right: 15%;
  bottom: 2%;
  height: 6%;
  border-radius: 50%;
  background: rgba(0,0,0,.24);
  filter: blur(12px);
  animation: p13-shadow-breathe 6.2s ease-in-out infinite;
}
.hero-copy .eyebrow svg, .page-heading .eyebrow svg, .estate-copy .eyebrow svg { animation: p13-icon-glint 5.8s ease-in-out infinite; }
.estate-ledger, .hs-status-ledger { transition: transform 300ms var(--ease), border-color 300ms ease; }
.estate-ledger:hover, .hs-status-ledger:hover { transform: translateY(-3px); border-color: rgba(237, 202, 119, .52); }
.stage-selector .stage-choice { transition: opacity 180ms ease, background 180ms ease, transform 180ms var(--ease); }
.stage-selector button.stage-choice:hover { opacity: .9; transform: translateY(-2px); }
.stage-selector .stage-choice.selected { box-shadow: inset 0 0 22px rgba(213, 170, 84, .045); }

/* Trail — illuminated route, destination ripple, and genuine pair movement. */
.path-lighting { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.path-segment {
  position: absolute;
  height: 3px;
  border-radius: 99px;
  opacity: .12;
  background: linear-gradient(90deg, transparent, rgba(239, 202, 105, .38), transparent);
  filter: blur(.3px);
  transform-origin: left center;
  transition: opacity 520ms ease, filter 520ms ease;
}
.path-segment.lit { opacity: .8; filter: drop-shadow(0 0 5px rgba(241, 198, 88, .58)); }
.path-segment.current { opacity: .58; animation: p13-path-current 1.65s ease-in-out infinite; }
.path-segment-1 { left: 44.2%; bottom: 20.5%; width: 14%; transform: rotate(-34deg); }
.path-segment-2 { left: 48.8%; bottom: 31.6%; width: 10.5%; transform: rotate(33deg); }
.path-segment-3 { left: 46.3%; bottom: 43.1%; width: 8%; transform: rotate(-31deg); }
.path-segment-4 { left: 48.8%; bottom: 52.8%; width: 6%; transform: rotate(31deg); }
.path-segment-5 { left: 50.1%; bottom: 59%; width: 2px; height: 10%; background: linear-gradient(0deg, rgba(239, 202, 105, .45), transparent); }
.trail-stone { overflow: visible; }
.trail-stone.current::after,
.trail-stone.just-reached::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(241, 201, 99, .7);
  border-radius: 50%;
  transform: scale(.75);
  animation: p13-stone-ripple 1.7s ease-out infinite;
}
.trail-stone.just-reached::after { animation-duration: .9s; animation-iteration-count: 2; }
.trail-stone.lit i { text-shadow: 0 0 6px rgba(255, 239, 188, .8); }
.learner-pair img { transform-origin: 50% 100%; animation: p13-trail-idle 4.7s ease-in-out infinite; }
.learner-pair .pair-shadow { animation: p13-shadow-breathe 4.7s ease-in-out infinite; }
.garden-gate b { animation: p13-gate-seal 3.3s ease-in-out infinite; }
.trail-world.gate-open::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 10%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 209, 114, .2), transparent 66%);
  transform: translateX(-50%);
  animation: p13-gate-light 1.8s ease both;
}
.stage-elementary .path-segment { background: linear-gradient(90deg, transparent, rgba(255, 203, 66, .56), transparent); }
.stage-elementary .trail-stone.current i svg { animation: p13-leaf-nod 2.1s ease-in-out infinite; }

/* Challenge and professional work surfaces. */
.challenge-folio,
.feedback-folio,
.gate-folio,
.project-tablet,
.shop-preview,
.collection-sheet,
.settings-folio,
.portfolio-board {
  transform-origin: center top;
}
.modal-zone > * { animation: p13-folio-settle 300ms var(--ease) both; }
.project-tablet { animation: p13-tablet-arrive 430ms var(--ease) both; }
.project-progress-track > i { box-shadow: 0 0 9px rgba(240, 204, 123, .34); }
.project-progress-track b.current { animation: p13-progress-node 1.9s ease-in-out infinite; }
.project-options button,
.recommendation-options button,
.source-card,
.confidence-option {
  transition: transform 150ms var(--ease), border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.project-options button:hover,
.recommendation-options button:hover,
.source-card:hover,
.confidence-option:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(0,0,0,.14);
}
.project-feedback.correct { animation: p13-correct-settle 520ms var(--ease) both; }
.project-feedback.wrong { animation: p13-repair-settle 420ms var(--ease) both; }
.world-impact-marker { animation: p13-impact-arrive 430ms calc(var(--impact-index) * 70ms) var(--ease) both; }
.world-impact-marker i { animation: p13-impact-pulse 4s calc(var(--impact-index) * 220ms) ease-in-out infinite; }

/* Estate — build stages look alive while preserving state labels in the UI. */
.estate-world {
  transform: translate(var(--parallax-x), var(--parallax-y));
  transition: transform 650ms ease-out;
}
.property-visual {
  animation: p13-property-fade 520ms calc(var(--property-order, 0) * 42ms) ease both;
}
.property-visual.ghost { animation: p13-preview-breathe 2.6s ease-in-out infinite; }
.property-visual.property-just-changed { animation: p13-property-change 1.15s var(--ease) both; }
.construction-visual.stage-surveyed { opacity: .6; filter: saturate(.65) brightness(1.08); }
.construction-visual.stage-foundation { opacity: .8; filter: saturate(.78); }
.construction-visual.stage-installed { filter: saturate(1.04); }
.estate-marker { animation: p13-marker-arrive 300ms calc(var(--marker-order, 0) * 24ms) var(--ease) both; }
.estate-marker.construction-active > span { animation: p13-build-pulse 2.1s ease-in-out infinite; }
.estate-marker.property-just-changed { border-color: rgba(240, 204, 123, .76); animation: p13-marker-change 1.05s var(--ease) both; }
.pond-visual,
.reflecting-pool-visual,
.swimming-pool-visual { background-position: 0 0; animation-name: p13-property-fade, p13-water-shimmer; animation-duration: 520ms, 7s; animation-delay: calc(var(--property-order, 0) * 42ms), 0s; animation-timing-function: ease, linear; animation-fill-mode: both, none; animation-iteration-count: 1, infinite; }
.pollinator-field > i { animation: firefly calc(3.5s + var(--i) * .17s) calc(var(--i) * -.25s) ease-in-out infinite; }
.bicycles-visual i, .estate-cart-visual i { transition: filter 200ms ease; }
.estate-interior-gallery article { animation: p13-marker-arrive 360ms var(--ease) both; }
.estate-interior-gallery article:nth-child(2) { animation-delay: 60ms; }
.estate-interior-gallery article:nth-child(3) { animation-delay: 120ms; }

/* Shop preview feels like a physical catalog folio. */
.preview-image img { transform: scale(1.012); transition: transform 650ms var(--ease), filter 350ms ease; }
.shop-preview:hover .preview-image img { transform: scale(1.045); }
.shop-item:hover .item-select > span { box-shadow: 0 0 0 4px rgba(213,170,84,.07); }
.shop-category-bar button { transition: transform 140ms var(--ease), background 140ms ease, color 140ms ease, border-color 140ms ease; }
.shop-category-bar button:hover { transform: translateY(-1px); }

/* Responsive/touch hardening. */
@media (pointer: coarse) {
  button, .item-select, .text-action, .hint-button { min-height: 44px; }
  .round-button { width: 44px; height: 44px; }
  .bottom-nav button { min-height: 60px; }
  .project-options button, .recommendation-options button, .source-card, .confidence-option { min-height: 48px; }
  .shop-category-bar button { min-height: 40px; padding-inline: 12px; }
}

@media (max-width: 820px) {
  .ambient-atmosphere { inset: 70px 0 70px; opacity: .32; }
  .scene::before { transform: scale(1.025); }
  .top-rail::after { display: none; }
  .path-segment { opacity: .09; }
  .path-segment.lit { opacity: .55; }
  .elementary-home-pair img, .hs-home-pair img, .project-intro-pair img, .project-pair img { animation-duration: 7.2s; }
  .estate-world { transform: none; }
}

@media (max-width: 620px) {
  .ambient-atmosphere { opacity: .22; }
  .ambient-particles i:nth-child(n+8) { display: none; }
  .credit-pill::after { right: 0; }
  .path-lighting { opacity: .72; }
  .modal-zone > * { animation-duration: 220ms; }
}

@media (max-height: 720px) and (min-width: 821px) {
  .ambient-atmosphere { inset-block: 76px 66px; }
  .hero-copy { margin-top: 2vh; }
  .estate-ledger { bottom: 90px; }
  .stage-selector { bottom: 74px; }
}

/* Explicit motion opt-out, including pointer parallax and decorative water. */
html[data-reduced-motion="true"] .scene::before,
html[data-reduced-motion="true"] .estate-world,
html[data-reduced-motion="true"] .ambient-light {
  transform: none !important;
}
html[data-reduced-motion="true"] .ambient-atmosphere { opacity: .2; }
html[data-reduced-motion="true"] .ambient-particles { display: none; }

@keyframes p13-screen-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes p13-vignette-arrive { from { opacity: .55; } to { opacity: 1; } }
@keyframes p13-world-breathe {
  from { filter: saturate(.98) brightness(.99); }
  to { filter: saturate(1.035) brightness(1.018); }
}
@keyframes p13-light-breathe {
  0%, 100% { opacity: .72; }
  50% { opacity: 1; }
}
@keyframes p13-depth-sweep {
  from { transform: translateX(-18%); }
  to { transform: translateX(18%); }
}
@keyframes p13-ambient-drift {
  0%,100% { opacity:.12; transform: translate3d(0,0,0) rotate(0deg); }
  35% { opacity:.58; transform: translate3d(18px,-20px,0) rotate(35deg); }
  70% { opacity:.24; transform: translate3d(-12px,-37px,0) rotate(85deg); }
}
@keyframes p13-data-glint {
  0% { opacity: 0; transform: translate3d(-24px, 0, 0); }
  25% { opacity: .35; }
  70% { opacity: .08; }
  100% { opacity: 0; transform: translate3d(48px, -26px, 0); }
}
@keyframes p13-rail-gleam {
  0%,76%,100% { transform: translateX(-140%); opacity:0; }
  82% { opacity:1; }
  94% { transform: translateX(760%); opacity:0; }
}
@keyframes p13-brand-breathe {
  0%,100% { box-shadow: inset 0 0 0 4px rgba(211,169,83,.09), 0 0 0 rgba(213,170,84,0); }
  50% { box-shadow: inset 0 0 0 4px rgba(211,169,83,.13), 0 0 18px rgba(213,170,84,.11); }
}
@keyframes p13-character-idle {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-3px) scale(1.002); }
}
@keyframes p13-trail-idle {
  0%,100% { transform: translateY(0) rotate(.12deg); }
  50% { transform: translateY(-2px) rotate(-.12deg); }
}
@keyframes p13-shadow-breathe {
  0%,100% { transform: scaleX(1); opacity:.28; }
  50% { transform: scaleX(.94); opacity:.2; }
}
@keyframes p13-icon-glint {
  0%,82%,100% { filter: drop-shadow(0 0 0 rgba(240,204,123,0)); }
  90% { filter: drop-shadow(0 0 5px rgba(240,204,123,.55)); }
}
@keyframes p13-credit-gain {
  0%,100% { box-shadow: inset 0 0 0 2px rgba(229,204,143,.035); }
  45% { box-shadow: inset 0 0 0 2px rgba(229,204,143,.08), 0 0 18px rgba(240,204,123,.32); }
}
@keyframes p13-credit-spend {
  0%,100% { opacity:1; }
  45% { opacity:.72; }
}
@keyframes p13-credit-delta {
  0% { opacity:0; transform:translateY(-4px) scale(.9); }
  24% { opacity:1; transform:translateY(6px) scale(1); }
  75% { opacity:1; }
  100% { opacity:0; transform:translateY(18px); }
}
@keyframes p13-path-current {
  0%,100% { filter: drop-shadow(0 0 2px rgba(241,198,88,.26)); }
  50% { filter: drop-shadow(0 0 8px rgba(241,198,88,.72)); }
}
@keyframes p13-stone-ripple {
  0% { opacity:.85; transform:scale(.7); }
  80%,100% { opacity:0; transform:scale(1.35); }
}
@keyframes p13-gate-seal {
  0%,100% { box-shadow:0 0 20px rgba(235,195,93,.45); }
  50% { box-shadow:0 0 31px rgba(235,195,93,.72); }
}
@keyframes p13-gate-light {
  from { opacity:0; transform:translateX(-50%) scale(.58); }
  to { opacity:1; transform:translateX(-50%) scale(1); }
}
@keyframes p13-leaf-nod {
  0%,100% { transform:rotate(-2deg); }
  50% { transform:rotate(8deg); }
}
@keyframes p13-folio-settle {
  from { opacity:0; transform:translateY(7px) scale(.992); }
  to { opacity:1; transform:translateY(0) scale(1); }
}
@keyframes p13-tablet-arrive {
  from { opacity:0; transform:translateY(9px) perspective(1200px) rotateX(1.5deg); }
  to { opacity:1; transform:translateY(0) perspective(1200px) rotateX(0); }
}
@keyframes p13-progress-node {
  0%,100% { box-shadow:0 0 0 3px rgba(213,170,84,.12); }
  50% { box-shadow:0 0 0 6px rgba(213,170,84,.08), 0 0 12px rgba(240,204,123,.28); }
}
@keyframes p13-correct-settle {
  0% { opacity:.35; transform:translateY(4px); }
  100% { opacity:1; transform:translateY(0); }
}
@keyframes p13-repair-settle {
  0% { opacity:.45; transform:translateX(3px); }
  100% { opacity:1; transform:translateX(0); }
}
@keyframes p13-impact-arrive {
  from { opacity:0; transform:translateX(18px); }
  to { opacity:1; transform:translateX(calc((var(--impact-index) % 2) * -13px)); }
}
@keyframes p13-impact-pulse {
  0%,100% { box-shadow:0 0 0 rgba(240,204,123,0); }
  50% { box-shadow:0 0 11px rgba(240,204,123,.16); }
}
@keyframes p13-property-fade {
  from { opacity:0; filter:blur(2px) saturate(.82); }
  to { opacity:1; }
}
@keyframes p13-preview-breathe {
  0%,100% { opacity:.48; filter:saturate(.55) brightness(.95); }
  50% { opacity:.68; filter:saturate(.7) brightness(1.06); }
}
@keyframes p13-property-change {
  0% { opacity:.45; filter:brightness(1.45) saturate(1.18); }
  45% { opacity:1; filter:brightness(1.18) saturate(1.12) drop-shadow(0 0 12px rgba(240,204,123,.28)); }
  100% { opacity:1; }
}
@keyframes p13-marker-arrive {
  from { opacity:0; translate:8px 0; }
  to { opacity:1; translate:0 0; }
}
@keyframes p13-marker-change {
  0% { background:rgba(213,170,84,.22); }
  100% { background:rgba(7,35,25,.84); }
}
@keyframes p13-build-pulse {
  0%,100% { box-shadow:0 0 0 rgba(240,204,123,0); }
  50% { box-shadow:0 0 0 4px rgba(240,204,123,.08), 0 0 12px rgba(240,204,123,.18); }
}
@keyframes p13-water-shimmer {
  from { background-position:0 0; }
  to { background-position:48px 0; }
}

/* ==========================================================================
   Phase 14 — Educator, Accessibility & Controls Finish
   Presentation supports never lower academic requirements or create mastery.
   ========================================================================== */

button,
input[type="checkbox"],
input[type="file"] { touch-action: manipulation; }

button:disabled { opacity: .48; cursor: not-allowed; }

.setting-row input:focus-visible + i {
  outline: 3px solid var(--brass-bright);
  outline-offset: 4px;
}

.phase14-settings { width: min(820px, calc(100% - min(11vw, 170px))); padding-bottom: 2px; }
.settings-section-heading {
  display: grid;
  gap: 4px;
  padding: 16px 17px 11px;
  border-bottom: 1px solid rgba(229, 211, 158, .13);
  background: rgba(214, 174, 88, .06);
}
.settings-section-heading span {
  color: var(--brass-bright);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.settings-section-heading strong { color: var(--ivory); font-family: var(--serif); font-size: 17px; font-weight: 400; }
.settings-section-heading.danger-heading { background: rgba(126, 48, 44, .08); }

.progress-entry,
.data-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 72px;
  padding: 15px 17px;
  border-bottom: 1px solid rgba(229, 211, 158, .13);
}
.progress-entry > span,
.data-action-row > span { display: grid; gap: 4px; min-width: 0; }
.progress-entry strong,
.data-action-row strong { color: var(--ivory); font-size: 14px; }
.progress-entry em,
.data-action-row em { max-width: 490px; color: var(--mist); font-size: 14px; font-style: normal; line-height: 1.5; }
.data-action-row > div { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }

.accessibility-guide {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  border-bottom: 1px solid rgba(229, 211, 158, .13);
  background: rgba(229, 211, 158, .12);
}
.accessibility-guide > span { display: grid; gap: 6px; align-content: start; padding: 13px 12px; background: rgba(4, 25, 19, .93); }
.accessibility-guide kbd {
  width: max-content;
  min-width: 28px;
  padding: 4px 7px;
  border: 1px solid rgba(231, 197, 112, .42);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: rgba(239, 226, 186, .08);
  color: var(--brass-bright);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 900;
  text-align: center;
}
.accessibility-guide em { color: var(--mist); font-size: 14px; font-style: normal; line-height: 1.45; }

.visually-hidden-file {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.reset-confirm-panel {
  display: grid;
  gap: 8px;
  margin: 14px 16px 16px;
  padding: 15px;
  border: 1px solid rgba(239, 170, 160, .34);
  border-left: 3px solid var(--danger);
  background: rgba(66, 20, 18, .24);
}
.reset-confirm-panel > strong { color: #ffd8d2; font-size: 14px; }
.reset-confirm-panel > p { margin: 0; max-width: 650px; color: #e9cbc7; font-size: 14px; line-height: 1.55; }
.reset-safeguard-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.reset-safeguard-actions label { display: grid; gap: 4px; min-width: 145px; }
.reset-safeguard-actions label span { color: #e9cbc7; font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.reset-safeguard-actions input {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid rgba(239, 170, 160, .48);
  border-radius: 3px;
  background: rgba(4, 17, 14, .72);
  color: var(--ivory);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .08em;
}
.reset-safeguard-actions input:focus-visible { outline: 3px solid #ffd1ca; outline-offset: 2px; }

.progress-export-bar {
  width: min(1030px, calc(100% - min(11vw, 170px)));
  margin: 20px 0 0 min(11vw, 170px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid rgba(229, 211, 158, .17);
  background: rgba(5, 27, 21, .82);
  backdrop-filter: blur(12px);
}
.progress-export-bar > span { margin-left: auto; max-width: 330px; color: var(--mist); font-size: 14px; line-height: 1.45; text-align: right; }

/* User-controlled visual supports. */
html[data-large-text="true"] .challenge-folio p,
html[data-large-text="true"] .feedback-folio p,
html[data-large-text="true"] .project-step > p,
html[data-large-text="true"] .decision-stem,
html[data-large-text="true"] .source-card p,
html[data-large-text="true"] .source-card dd,
html[data-large-text="true"] .answer-option strong,
html[data-large-text="true"] .project-options button,
html[data-large-text="true"] .confidence-option span,
html[data-large-text="true"] .recommendation-options span,
html[data-large-text="true"] .revision-impact-option span,
html[data-large-text="true"] .revision-response-option span,
html[data-large-text="true"] .word-definition,
html[data-large-text="true"] .settings-folio em,
html[data-large-text="true"] .progress-panel p,
html[data-large-text="true"] .rationale-field textarea { font-size: max(12px, 1em); line-height: 1.65; }

html[data-readable-type="true"] .challenge-folio p,
html[data-readable-type="true"] .feedback-folio p,
html[data-readable-type="true"] .project-step p,
html[data-readable-type="true"] .decision-stem,
html[data-readable-type="true"] .word-definition,
html[data-readable-type="true"] .collection-empty p,
html[data-readable-type="true"] .summary-folio > p:not(.eyebrow),
html[data-readable-type="true"] .project-options button,
html[data-readable-type="true"] .answer-option strong,
html[data-readable-type="true"] .source-card,
html[data-readable-type="true"] .recommendation-options button,
html[data-readable-type="true"] .revision-impact-options button,
html[data-readable-type="true"] .revision-response-options button { font-family: var(--sans); }

html[data-high-contrast="true"] {
  --mist: #eef4e9;
  --stone: #f6f0dd;
  --ivory: #fffdf3;
  --brass-bright: #ffd86f;
}
html[data-high-contrast="true"] .challenge-folio,
html[data-high-contrast="true"] .feedback-folio,
html[data-high-contrast="true"] .gate-folio,
html[data-high-contrast="true"] .project-tablet,
html[data-high-contrast="true"] .collection-sheet,
html[data-high-contrast="true"] .settings-folio,
html[data-high-contrast="true"] .progress-panel,
html[data-high-contrast="true"] .shop-ledger,
html[data-high-contrast="true"] .shop-preview { background: rgba(1, 12, 9, .97); border-color: rgba(255, 221, 127, .58); }
html[data-high-contrast="true"] button:focus-visible,
html[data-high-contrast="true"] input:focus-visible,
html[data-high-contrast="true"] a:focus-visible { outline-width: 3px; outline-color: #ffe37f; }
html[data-high-contrast="true"] .answer-option,
html[data-high-contrast="true"] .project-options button,
html[data-high-contrast="true"] .source-card,
html[data-high-contrast="true"] .confidence-option,
html[data-high-contrast="true"] .recommendation-options button,
html[data-high-contrast="true"] .revision-impact-option,
html[data-high-contrast="true"] .revision-response-option { border-color: rgba(255, 239, 191, .42); }

@media (max-width: 1000px) {
  .phase14-settings,
  .progress-export-bar { width: 100%; margin-left: 0; }
  .accessibility-guide { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .progress-entry,
  .data-action-row { align-items: stretch; flex-direction: column; }
  .data-action-row > div { justify-content: flex-start; }
  .accessibility-guide { grid-template-columns: 1fr 1fr; }
  .reset-safeguard-actions { align-items: stretch; flex-direction: column; }
  .reset-safeguard-actions > *,
  .reset-safeguard-actions label { width: 100%; }
  .progress-export-bar { align-items: stretch; flex-direction: column; }
  .progress-export-bar > * { width: 100%; }
  .progress-export-bar > span { margin-left: 0; max-width: none; text-align: left; }
}

@media print {
  @page { margin: .55in; }
  body { background: #fff !important; color: #111 !important; }
  .top-rail,
  .bottom-nav,
  .back-button,
  .progress-export-bar,
  .ambient-atmosphere,
  .skip-link { display: none !important; }
  .experience,
  .page-scene,
  .progress-scene { min-height: 0 !important; height: auto !important; overflow: visible !important; background: #fff !important; }
  .page-scene::before,
  .page-scene::after { display: none !important; }
  .page-scene { padding: 0 !important; }
  .page-heading,
  .page-heading.compact,
  .progress-dashboard { width: 100% !important; margin: 0 !important; color: #111 !important; }
  .page-heading { margin-bottom: 18px !important; }
  .page-heading h1,
  .page-heading h1 i,
  .page-heading p,
  .progress-panel h2,
  .progress-panel strong,
  .progress-panel b,
  .progress-panel em,
  .progress-panel span,
  .progress-panel small,
  .progress-panel p { color: #111 !important; }
  .progress-panel,
  .progress-overview article,
  .stage-progress-card,
  .domain-insight-grid article,
  .transfer-list article { break-inside: avoid; background: #fff !important; border-color: #bbb !important; box-shadow: none !important; }
  .skill-bars i { border: 1px solid #777 !important; background: #fff !important; }
  .skill-bars i b { background: #333 !important; }
}

/* ========================================================================== */
/* RC 2.15.1 SIGNOFF CORRECTIONS — readability, onboarding, home composition */
/* ========================================================================== */

/* Default readability hierarchy: accessibility "Larger learning text" remains
   an additional step up rather than a requirement for comfortable reading. */
.brand-lockup em { font-size: 14px; }
.stage-chip span { font-size: 14px; }
.stage-chip strong { font-size: 18px; }
.rank-pill span { font-size: 14px; }
.rank-pill strong { font-size: 19px; }
.credit-pill em { font-size: 14px; }
.credit-pill strong { font-size: 20px; }
.bottom-nav button { font-size: 14px; letter-spacing: .1em; }
.eyebrow { font-size: 14px; }
.folio-label { font-size: 14px; }
.primary-action, .quiet-action { min-height: 48px; font-size: 14px; }
.primary-action.compact { min-height: 43px; font-size: 14px; }
.text-action, .hint-button { min-height: 36px; font-size: 14px; }

.hero-intro,
.stage-elementary .elementary-hero .hero-intro { font-size: 16px; line-height: 1.65; }
.ledger-property em { font-size: 14px; }
.ledger-stat { font-size: 14px; }
.stage-selector strong { font-size: 14px; }
.stage-selector em { font-size: 14px; }

.trail-brief .eyebrow { font-size: 14px; }
.trail-brief > strong { font-size: 22px; }
.trail-brief > span { font-size: 14px; line-height: 1.45; }
.phase-rail > span { min-height: 32px; font-size: 14px; }
.trail-intro > p:not(.eyebrow) { font-size: 15px; }

.challenge-kicker,
.challenge-topline > span { font-size: 14px; }
.word-row p { font-size: 14px; }
.challenge-prompt { font-size: 16px; line-height: 1.55; }
.hint-note { font-size: 14px; }
.inline-notice { font-size: 14px; }
.sound-orb span { font-size: 14px; }
.audio-caption.muted { font-size: 14px; }
.audio-clue { font-size: 14px; }
.letter-token { width: 38px; height: 38px; font-size: 16px; }
.answer-option { grid-template-columns: 30px 1fr; min-height: 54px; padding: 12px 14px; }
.answer-option > span { width: 27px; height: 27px; font-size: 14px; }
.answer-option strong { font-size: 15px; line-height: 1.45; }
.input-challenge label { font-size: 14px; }
.feedback-folio > p:not(.eyebrow) { font-size: 15px; }
.award-line { font-size: 14px; }
.gate-folio > p:not(.eyebrow) { font-size: 15px; }
.gate-stats span { font-size: 14px; }

.maya-note strong { font-size: 18px; }
.maya-note p { font-size: 14px; }
.meaning-card span, .example-card span { font-size: 14px; }
.meaning-card strong { font-size: 22px; }
.example-card p { font-size: 16px; }
.word-parts b { font-size: 16px; }
.word-parts em { font-size: 14px; }

.page-heading > p:last-child { font-size: 15px; }
.notice { font-size: 14px; }
.item-select p { font-size: 14px; }
.item-select h2 { font-size: 21px; }
.item-select em { font-size: 14px; line-height: 1.45; }
.item-price small { font-size: 14px; }
.item-price strong { font-size: 18px; }
.item-price button { min-height: 36px; font-size: 14px; }
.owned-mark { font-size: 14px; }
.shop-preview > p:not(.folio-label) { font-size: 14px; }
.shop-preview .quiet-action { min-height: 42px; font-size: 14px; }
.shop-category-bar button { min-height: 34px; padding-inline: 12px; font-size: 14px; }

.word-title p { font-size: 14px; }
.stage-badge { font-size: 14px; }
.word-definition { font-size: 14px; }
.evidence { font-size: 14px; }
.word-origin { font-size: 14px; }
.collection-empty p { font-size: 15px; }

.setting-row strong, .profile-row strong, .reset-row strong,
.progress-entry strong, .data-action-row strong { font-size: 14px; }
.setting-row em, .profile-row em, .reset-row em,
.progress-entry em, .data-action-row em { font-size: 14px; line-height: 1.5; }
.settings-section-heading span { font-size: 14px; }
.settings-section-heading strong { font-size: 19px; }
.accessibility-guide kbd { font-size: 14px; }
.accessibility-guide em { font-size: 14px; }
.progress-entry .quiet-action { min-height: 42px; font-size: 14px; }
.reset-confirm-panel > p { font-size: 14px; }
.reset-safeguard-actions label span { font-size: 14px; }
.progress-export-bar > span { font-size: 14px; }

/* High School professional surfaces also use comfortable default reading sizes. */
.hs-status-ledger span { font-size: 14px; }
.project-step > p:not(.folio-label), .project-problem { font-size: 14px; }
.decision-stem { font-size: 16px !important; }
.project-options.long button { font-size: 14px; }
.recommendation-options span { font-size: 14px; }
.source-card > p, .source-card dd { font-size: 14px; }
.confidence-option span,
.revision-impact-option span,
.revision-response-option span { font-size: 14px; }

/* Larger learning text is now a true second accessibility step. */
html[data-large-text="true"] .challenge-prompt,
html[data-large-text="true"] .challenge-folio p,
html[data-large-text="true"] .feedback-folio p,
html[data-large-text="true"] .project-step > p,
html[data-large-text="true"] .decision-stem,
html[data-large-text="true"] .source-card p,
html[data-large-text="true"] .source-card dd,
html[data-large-text="true"] .answer-option strong,
html[data-large-text="true"] .project-options button,
html[data-large-text="true"] .confidence-option span,
html[data-large-text="true"] .recommendation-options span,
html[data-large-text="true"] .revision-impact-option span,
html[data-large-text="true"] .revision-response-option span,
html[data-large-text="true"] .word-definition,
html[data-large-text="true"] .settings-folio em,
html[data-large-text="true"] .progress-panel p,
html[data-large-text="true"] .rationale-field textarea { font-size: 18px; line-height: 1.65; }
html[data-large-text="true"] .maya-note p,
html[data-large-text="true"] .example-card p,
html[data-large-text="true"] .hero-intro { font-size: 18px; }

/* Elementary home: frame the explorers from the head/shoulders down on first view
   rather than placing their heads above the viewport. */
.stage-elementary .elementary-home-pair {
  right: clamp(58px, 9vw, 145px);
  bottom: -50px;
  width: clamp(310px, 30vw, 430px);
}

/* First-run path choice. */
.welcome-rail .stage-chip strong { font-size: 19px; }
.welcome-header-note { justify-self: end; max-width: 190px; color: var(--mist); font-size: 14px; line-height: 1.35; text-align: right; }
.onboarding-scene {
  overflow-y: auto;
  padding: 116px clamp(24px, 5vw, 74px) 42px;
  background: #071711;
}
.onboarding-scene::before {
  background-image: linear-gradient(90deg, rgba(4,20,14,.55), rgba(4,20,14,.25)), url('/apps/vocabulary-adventure/assets/elementary-orchard.webp');
  background-position: center;
}
.onboarding-scene::after {
  background: linear-gradient(180deg, rgba(4,19,14,.28), rgba(3,17,12,.86));
}
.onboarding-shell { position: relative; z-index: 2; width: min(1180px, 100%); margin: 0 auto; }
.onboarding-heading { max-width: 720px; margin-bottom: 25px; }
.onboarding-heading h1 { margin: 0 0 16px; color: var(--ivory); font-family: var(--serif); font-size: clamp(48px, 5.4vw, 76px); font-weight: 400; line-height: .95; letter-spacing: -.025em; }
.onboarding-heading h1 i { color: var(--brass-bright); }
.onboarding-heading > p:last-child { max-width: 690px; color: #e1e7dd; font-size: 17px; line-height: 1.65; }
.learning-path-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.learning-path-card {
  overflow: hidden;
  min-height: 360px;
  padding: 0;
  border: 1px solid rgba(231,198,116,.38);
  border-radius: 5px 5px 18px 5px;
  background: rgba(5,28,20,.94);
  color: var(--ivory);
  text-align: left;
  box-shadow: 0 20px 50px rgba(0,0,0,.24);
  transition: transform 180ms var(--ease), border-color 180ms ease, box-shadow 180ms ease;
}
.learning-path-card:hover { transform: translateY(-4px); border-color: var(--brass-bright); box-shadow: 0 26px 58px rgba(0,0,0,.32); }
.learning-path-card.selected { border-color: var(--brass-bright); box-shadow: 0 0 0 2px rgba(213,170,84,.15), 0 20px 50px rgba(0,0,0,.25); }
.learning-path-art { position: relative; display: block; height: 145px; background-position: center; background-size: cover; }
.learning-path-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,28,20,.72), transparent 62%); }
.learning-path-art b { position: absolute; left: 16px; bottom: 12px; z-index: 1; color: var(--brass-bright); font-family: var(--serif); font-size: 28px; font-weight: 400; }
.learning-path-copy { display: grid; gap: 8px; padding: 18px 18px 20px; }
.learning-path-copy em { color: var(--brass-bright); font-size: 14px; font-style: normal; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.learning-path-copy strong { color: var(--ivory); font-family: var(--serif); font-size: 25px; font-weight: 400; }
.learning-path-copy p { margin: 0; color: #d9e0d5; font-size: 14px; line-height: 1.55; }
.learning-path-copy small { color: #aebbaa; font-size: 14px; line-height: 1.5; }
.onboarding-note { display: flex; align-items: flex-start; gap: 10px; max-width: 820px; margin-top: 18px; padding: 13px 15px; border-left: 2px solid var(--brass); background: rgba(4,25,18,.84); color: #dce4d9; font-size: 14px; line-height: 1.5; }
.onboarding-note svg { margin-top: 2px; color: var(--brass-bright); }
.onboarding-note strong { color: var(--ivory); }

/* Explicit path switching in Settings. */
.settings-path-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 14px 16px 8px; }
.settings-path-grid .learning-path-card { min-height: 0; border-radius: 4px; }
.settings-path-grid .learning-path-art { height: 76px; }
.settings-path-grid .learning-path-art b { left: 10px; bottom: 7px; font-size: 20px; }
.settings-path-grid .learning-path-copy { gap: 4px; padding: 10px; }
.settings-path-grid .learning-path-copy em { font-size: 14px; }
.settings-path-grid .learning-path-copy strong { font-size: 17px; }
.settings-path-grid .learning-path-copy p { font-size: 14px; line-height: 1.4; }
.settings-path-grid .learning-path-copy small { display: none; }
.path-switch-note { margin: 2px 16px 15px; color: var(--mist); font-size: 14px; line-height: 1.5; }

@media (max-width: 1000px) {
  .stage-elementary .elementary-home-pair { right: 2vw; bottom: -30px; width: clamp(290px, 36vw, 390px); }
  .learning-path-grid { grid-template-columns: 1fr; }
  .learning-path-card { min-height: 0; display: grid; grid-template-columns: 220px 1fr; }
  .learning-path-art { height: 100%; min-height: 180px; }
  .settings-path-grid { grid-template-columns: 1fr; }
  .settings-path-grid .learning-path-card { grid-template-columns: 135px 1fr; }
  .settings-path-grid .learning-path-art { height: 100%; min-height: 104px; }
}

@media (max-width: 760px) {
  .brand-lockup strong { font-size: 18px; }
  .brand-lockup em { font-size: 14px; }
  .stage-chip span { font-size: 14px; }
  .stage-chip strong { font-size: 15px; }
  .welcome-header-note { display: none; }
  .bottom-nav button { font-size: 14px; }
  .stage-selector strong { font-size: 14px; }
  .stage-selector em { font-size: 14px; }
  .stage-elementary .elementary-hero .hero-intro { font-size: 15px; }
  .stage-elementary .elementary-home-pair { right: -28px; bottom: 44px; width: 245px; opacity: .24; }
  .answer-option strong { font-size: 15px; }
  .challenge-prompt { font-size: 15px; }
  .onboarding-scene { padding: 96px 16px 28px; }
  .onboarding-heading h1 { font-size: clamp(43px, 12vw, 58px); }
  .onboarding-heading > p:last-child { font-size: 15px; }
  .learning-path-card { grid-template-columns: 1fr; }
  .learning-path-art { height: 120px; min-height: 120px; }
  .learning-path-copy strong { font-size: 22px; }
  .learning-path-copy p { font-size: 14px; }
  .learning-path-copy small { font-size: 14px; }
  .settings-path-grid .learning-path-card { grid-template-columns: 110px 1fr; }
  .settings-path-grid .learning-path-art { min-height: 100px; }
}

@media (max-height: 700px) and (min-width: 761px) {
  .stage-elementary .elementary-home-pair { bottom: -48px; width: clamp(300px, 29vw, 400px); }
  .challenge-folio, .feedback-folio, .gate-folio { padding-inline: 24px; }
  .answer-option { min-height: 50px; padding-block: 10px; }
  .onboarding-scene { padding-top: 88px; }
  .onboarding-heading { margin-bottom: 14px; }
  .onboarding-heading h1 { font-size: 48px; margin-bottom: 10px; }
  .onboarding-heading > p:last-child { font-size: 14px; line-height: 1.5; }
  .learning-path-card { min-height: 300px; }
  .learning-path-art { height: 115px; }
  .learning-path-copy { padding: 13px 15px 16px; }
  .learning-path-copy strong { font-size: 21px; }
  .learning-path-copy p { font-size: 14px; }
  .learning-path-copy small { font-size: 14px; }
}


/* ========================================================================== */
/* RC 2.15.2 SIGNOFF CORRECTIONS — home readability + contrast restoration    */
/* ========================================================================== */

/* Home copy is comfortably readable at ordinary desktop viewing distance. */
.stage-elementary .elementary-hero .hero-intro,
.hero-intro { font-size: 18px; line-height: 1.68; }
.stage-elementary .estate-ledger .ledger-property em,
.ledger-property em { font-size: 14px; }
.stage-elementary .estate-ledger .ledger-stat,
.ledger-stat { font-size: 14px; }
.stage-selector strong { font-size: 14px; }
.stage-selector em { font-size: 14px; }
.bottom-nav button { font-size: 14px; }
.rank-pill span, .credit-pill em, .stage-chip span { font-size: 14px; }

/* High Contrast must increase contrast without destroying the Elementary
   cream-and-garden palette. The prior inversion made dark green learner text
   sit on a nearly black folio. */
html[data-high-contrast="true"] .stage-elementary .elementary-folio,
html[data-high-contrast="true"] .stage-elementary .challenge-folio.elementary-folio,
html[data-high-contrast="true"] .stage-elementary .feedback-folio.elementary-folio,
html[data-high-contrast="true"] .stage-elementary .gate-folio.elementary-folio {
  background: #fff5d2;
  border-color: #6f531e;
  color: #102f1d;
  box-shadow: 0 30px 80px rgba(25, 20, 8, .38), inset 0 1px rgba(255,255,255,.9);
}
html[data-high-contrast="true"] .stage-elementary .elementary-folio .challenge-kicker,
html[data-high-contrast="true"] .stage-elementary .elementary-folio .challenge-topline > span,
html[data-high-contrast="true"] .stage-elementary .elementary-folio .eyebrow,
html[data-high-contrast="true"] .stage-elementary .elementary-folio .word-row p,
html[data-high-contrast="true"] .stage-elementary .elementary-folio .challenge-prompt,
html[data-high-contrast="true"] .stage-elementary .elementary-folio .audio-clue,
html[data-high-contrast="true"] .stage-elementary .elementary-folio .audio-caption,
html[data-high-contrast="true"] .stage-elementary .elementary-folio .input-challenge label {
  color: #263e2b;
}
html[data-high-contrast="true"] .stage-elementary .elementary-folio .word-row h2,
html[data-high-contrast="true"] .stage-elementary .elementary-folio h1,
html[data-high-contrast="true"] .stage-elementary .elementary-folio h2,
html[data-high-contrast="true"] .stage-elementary .elementary-folio .maya-note strong {
  color: #0b2b18;
}
html[data-high-contrast="true"] .stage-elementary .elementary-folio .maya-note {
  background: #edf1cf;
  border-color: #536a34;
}
html[data-high-contrast="true"] .stage-elementary .elementary-folio .maya-note p { color: #263e2b; }
html[data-high-contrast="true"] .stage-elementary .elementary-folio .meaning-card,
html[data-high-contrast="true"] .stage-elementary .elementary-folio .example-card,
html[data-high-contrast="true"] .stage-elementary .elementary-folio .answer-option,
html[data-high-contrast="true"] .stage-elementary .elementary-folio .letter-token,
html[data-high-contrast="true"] .stage-elementary .elementary-folio .input-challenge input {
  background: #fffdf0;
  color: #0b2b18;
  border-color: #5d643e;
}
html[data-high-contrast="true"] .stage-elementary .elementary-folio .answer-option strong,
html[data-high-contrast="true"] .stage-elementary .elementary-folio .meaning-card strong,
html[data-high-contrast="true"] .stage-elementary .elementary-folio .example-card p { color: #0b2b18; }

/* Dark High-School/Junior-High high-contrast surfaces explicitly receive
   light foreground text instead of inheriting stage-specific dark colors. */
html[data-high-contrast="true"] .stage-junior-high .challenge-folio,
html[data-high-contrast="true"] .stage-junior-high .feedback-folio,
html[data-high-contrast="true"] .stage-junior-high .gate-folio,
html[data-high-contrast="true"] .stage-high-school .project-tablet {
  color: #fffdf3;
}
html[data-high-contrast="true"] .stage-junior-high .challenge-folio .challenge-prompt,
html[data-high-contrast="true"] .stage-junior-high .challenge-folio .word-row h2,
html[data-high-contrast="true"] .stage-junior-high .challenge-folio .word-row p,
html[data-high-contrast="true"] .stage-junior-high .feedback-folio h2,
html[data-high-contrast="true"] .stage-junior-high .feedback-folio p,
html[data-high-contrast="true"] .stage-high-school .project-tablet h1,
html[data-high-contrast="true"] .stage-high-school .project-tablet h2,
html[data-high-contrast="true"] .stage-high-school .project-tablet p,
html[data-high-contrast="true"] .stage-high-school .project-tablet .decision-stem {
  color: #fffdf3;
}

@media (max-width: 760px) {
  .stage-elementary .elementary-hero .hero-intro, .hero-intro { font-size: 16.5px; }
  .stage-selector strong { font-size: 14px; }
  .stage-selector em { font-size: 14px; }
  .bottom-nav button { font-size: 14px; }
}

/* ========================================================================== */
/* RC 2.15.3 SIGNOFF CORRECTIONS — comfortable default reading baseline       */
/* ========================================================================== */
/* Human browser signoff showed that several secondary labels, trail details,
   correction explanations, and professional-dashboard details still rendered
   too small at ordinary laptop/desktop viewing distance. These are default
   sizes; the Larger Learning Text control remains an additional accessibility
   step above this baseline. */

/* Persistent chrome and navigation. */
.brand-lockup em { font-size: 14px; }
.stage-chip span { font-size: 14px; }
.stage-chip strong { font-size: 19px; }
.rank-pill span { font-size: 14px; }
.rank-pill strong { font-size: 20px; }
.credit-pill strong { font-size: 21px; }
.credit-pill em { font-size: 14px; }
.bottom-nav button { font-size: 14px; letter-spacing: .085em; }
.eyebrow { font-size: 14px; }
.folio-label { font-size: 14px; }
.primary-action, .quiet-action { font-size: 15px; }
.primary-action.compact { font-size: 14px; }
.text-action, .hint-button { font-size: 14px; }
.back-button { font-size: 14px; }

/* First visit and home dashboards. */
.welcome-header-note { font-size: 14px; max-width: 225px; }
.onboarding-heading > p:last-child { font-size: 18px; }
.learning-path-copy em { font-size: 14px; }
.learning-path-copy strong { font-size: 27px; }
.learning-path-copy p { font-size: 16.5px; line-height: 1.58; }
.learning-path-copy small { font-size: 14px; line-height: 1.52; }
.onboarding-note { font-size: 15px; }
.hero-intro,
.stage-elementary .elementary-hero .hero-intro { font-size: 20px; line-height: 1.62; }
.ledger-property em { font-size: 14px; }
.ledger-stat { font-size: 14px; }
.stage-selector strong { font-size: 15.5px; }
.stage-selector em { font-size: 14px; }
.hs-role-card span, .role-line span { font-size: 14px; }
.hs-role-card strong { font-size: 16px; }
.hs-role-card em { font-size: 14px; }
.hs-status-ledger span { font-size: 14px; }
.hs-status-ledger strong { font-size: 20px; }
.district-network-strip b,
.network-domain-list b,
.portfolio-domain-grid b { font-size: 14px; }
.district-network-strip em,
.network-domain-list em,
.portfolio-domain-grid em { font-size: 14px; }

/* Trail side rail and phase rail. */
.trail-brief .eyebrow { font-size: 14px; }
.trail-brief > strong { font-size: 24px; }
.trail-brief > span { font-size: 14px; line-height: 1.5; }
.phase-rail > span { min-height: 36px; font-size: 14px; padding-inline: 10px; }
.trail-intro > p:not(.eyebrow) { font-size: 17px; }

/* Core learner-facing challenges. */
.challenge-kicker,
.challenge-topline > span { font-size: 14px; }
.word-row p { font-size: 14px; }
.challenge-prompt { font-size: 18px; line-height: 1.6; }
.hint-note { font-size: 15px; }
.inline-notice { font-size: 14px; }
.sound-orb span { font-size: 14px; }
.audio-caption { font-size: 20px; }
.audio-caption.muted { font-size: 14px; }
.audio-clue { font-size: 14px; }
.answer-option { min-height: 58px; padding-block: 13px; }
.answer-option > span { width: 29px; height: 29px; font-size: 14px; }
.answer-option strong { font-size: 16.5px; line-height: 1.48; }
.input-challenge label { font-size: 14px; }
.input-challenge input { font-size: 24px; }

/* Elementary teaching cards. */
.maya-note strong { font-size: 20px; }
.maya-note p { font-size: 15.5px; line-height: 1.55; }
.meaning-card span, .example-card span { font-size: 14px; }
.meaning-card strong { font-size: 24px; line-height: 1.35; }
.example-card p { font-size: 17px; line-height: 1.55; }
.word-parts b { font-size: 17px; }
.word-parts em { font-size: 14px; }

/* Success, correction, and misconception teaching. */
.feedback-folio > p:not(.eyebrow) { font-size: 17px; line-height: 1.65; }
.award-line { font-size: 15px; }
.misconception-card h3 { font-size: 23px; }
.misconception-card > p:last-child { font-size: 15px; line-height: 1.6; }
.confusion-grid strong { font-size: 21px; }
.confusion-grid span, .confusion-grid b { font-size: 14px; }
.confusion-grid em { font-size: 14px; line-height: 1.5; }
.diagnosis-tag { font-size: 14px; }
.diagnosis-card h3 { font-size: 22px; }
.diagnosis-card p:not(.eyebrow) { font-size: 15px; line-height: 1.58; }
.diagnosis-card em { font-size: 14px; line-height: 1.55; }
.memory-key span { font-size: 14px; }
.memory-key strong { font-size: 17px; }
.repair-patterns > span { font-size: 14px; }
.repair-patterns small { font-size: 14px; }
.repair-heading b { font-size: 21px; }
.repair-heading em { font-size: 14px; }
.repair-contrast span { font-size: 14px; }
.repair-contrast strong { font-size: 21px; }
.repair-contrast p { font-size: 14px; }
.precision-repair > p { font-size: 14.5px; line-height: 1.58; }
.precision-repair > small { font-size: 14px; }

/* Collection, shop, settings, and adult progress surfaces. */
.page-heading > p:last-child { font-size: 17px; }
.notice { font-size: 14.5px; }
.item-select p { font-size: 14px; }
.item-select h2 { font-size: 23px; }
.item-select em { font-size: 14px; }
.item-price small { font-size: 14px; }
.item-price strong { font-size: 20px; }
.item-price button { font-size: 14px; }
.owned-mark { font-size: 14px; }
.shop-preview > p:not(.folio-label) { font-size: 14px; }
.shop-preview .quiet-action { font-size: 14px; }
.shop-category-bar button { font-size: 14px; }
.word-title p { font-size: 14px; }
.stage-badge { font-size: 14px; }
.word-definition { font-size: 16px; }
.evidence, .word-origin { font-size: 14px; }
.setting-row strong, .profile-row strong, .reset-row strong,
.progress-entry strong, .data-action-row strong { font-size: 15px; }
.setting-row em, .profile-row em, .reset-row em,
.progress-entry em, .data-action-row em { font-size: 14px; }
.settings-section-heading span { font-size: 14px; }
.settings-section-heading strong { font-size: 21px; }
.accessibility-guide kbd { font-size: 14px; }
.accessibility-guide em { font-size: 14px; }
.progress-entry .quiet-action { font-size: 14px; }
.reset-confirm-panel > p { font-size: 14px; }
.reset-safeguard-actions label span { font-size: 14px; }
.progress-export-bar > span { font-size: 14px; }

/* High School professional work. */
.project-brief-rail > strong { font-size: 14px; }
.project-brief-rail > p:not(.eyebrow) { font-size: 14px; }
.role-line strong { font-size: 14px; }
.field-label-stack span { font-size: 14px; }
.project-step > p:not(.folio-label), .project-problem { font-size: 16px; line-height: 1.65; }
.constraint-list > strong { font-size: 14px; }
.constraint-list span { font-size: 14px; line-height: 1.5; }
.evidence-card strong { font-size: 18px; }
.evidence-card p { font-size: 14px; line-height: 1.52; }
.decision-stem { font-size: 17px !important; }
.project-options button { font-size: 18px; }
.project-options.long button { font-size: 14.5px; }
.recommendation-options strong { font-size: 18px; }
.recommendation-options span { font-size: 14px; }
.project-feedback strong { font-size: 14px; }
.project-feedback p { font-size: 14px; }
.project-feedback em { font-size: 14px; }
.rationale-field > span { font-size: 14px; }
.rationale-field em, .rationale-field small { font-size: 14px; }
.impact-signal { font-size: 14px; }
.impact-next strong { font-size: 14px; }
.impact-next span { font-size: 14px; }
.project-progress > span, .project-progress > strong { font-size: 14px; }
.project-intro-card > p:not(.eyebrow),
.hs-property-copy > p:not(.eyebrow) { font-size: 15.5px; }
.portfolio-board article em { font-size: 14px; }
.portfolio-board article p, .portfolio-empty p { font-size: 14px; }
.source-card > p, .source-card dd { font-size: 14px; }
.confidence-option span,
.revision-impact-option span,
.revision-response-option span { font-size: 14px; }
.domain-insight-grid strong { font-size: 14px; }
.domain-insight-grid span { font-size: 14px; }
.domain-insight-grid em { font-size: 14px; }
.domain-insight-grid small { font-size: 14px; }
.transfer-list em, .transfer-list small { font-size: 14px; }
.hs-repair-patterns > span { font-size: 14px; }

/* Keep the second accessibility step visibly larger than the new baseline. */
html[data-large-text="true"] .challenge-prompt,
html[data-large-text="true"] .challenge-folio p,
html[data-large-text="true"] .feedback-folio p,
html[data-large-text="true"] .project-step > p,
html[data-large-text="true"] .decision-stem,
html[data-large-text="true"] .source-card p,
html[data-large-text="true"] .source-card dd,
html[data-large-text="true"] .answer-option strong,
html[data-large-text="true"] .project-options button,
html[data-large-text="true"] .confidence-option span,
html[data-large-text="true"] .recommendation-options span,
html[data-large-text="true"] .revision-impact-option span,
html[data-large-text="true"] .revision-response-option span,
html[data-large-text="true"] .word-definition,
html[data-large-text="true"] .settings-folio em,
html[data-large-text="true"] .progress-panel p,
html[data-large-text="true"] .rationale-field textarea { font-size: 20px; line-height: 1.7; }
html[data-large-text="true"] .maya-note p,
html[data-large-text="true"] .example-card p,
html[data-large-text="true"] .hero-intro { font-size: 20px; }

@media (max-width: 760px) {
  .bottom-nav button { font-size: 14px; }
  .stage-chip span, .rank-pill span, .credit-pill em { font-size: 14px; }
  .stage-chip strong { font-size: 16px; }
  .hero-intro, .stage-elementary .elementary-hero .hero-intro { font-size: 17px; }
  .stage-selector strong { font-size: 14px; }
  .stage-selector em { font-size: 14px; }
  .learning-path-copy p { font-size: 15px; }
  .learning-path-copy small { font-size: 14px; }
  .challenge-prompt { font-size: 17px; }
  .answer-option strong { font-size: 15.5px; }
  .trail-brief > span { font-size: 14px; }
}


/* ========================================================================== */
/* RC 2.15.4 TYPOGRAPHY FLOOR — release readability guarantee                 */
/* ========================================================================== */
/* Human signoff established a non-negotiable release rule:
   - 12px absolute minimum for visible secondary metadata
   - 14px minimum for learner-relevant supporting information
   - 16px minimum for ordinary learner-facing instructional/body copy
   - 18px+ for questions and primary directions
   This section intentionally comes last so older compact rules cannot shrink
   meaningful text below the release floor. The only preserved 0px values are
   compact responsive labels that are intentionally hidden, not readable text. */

/* Secondary metadata: never smaller than 12px. */
.brand-lockup em,
.stage-chip span,
.rank-pill span,
.credit-pill em,
.folio-label,
.eyebrow,
.challenge-kicker,
.challenge-topline > span,
.input-challenge label,
.meaning-card span,
.example-card span,
.stage-badge,
.evidence,
.word-origin,
.item-select p,
.item-price small,
.shop-category-bar button,
.settings-section-heading span,
.accessibility-guide kbd,
.reset-safeguard-actions label span,
.field-label-stack span,
.constraint-list > strong,
.project-feedback em,
.rationale-field em,
.rationale-field small,
.impact-signal,
.impact-next strong,
.portfolio-board article em,
.domain-insight-grid span,
.domain-insight-grid em,
.domain-insight-grid small,
.transfer-list em,
.transfer-list small,
.diagnosis-tag,
.memory-key span,
.repair-heading em,
.repair-contrast span,
.hs-role-card span,
.role-line span,
.district-network-strip b,
.network-domain-list b,
.portfolio-domain-grid b,
.district-network-strip em,
.network-domain-list em,
.portfolio-domain-grid em,
.shop-overview span,
.shop-overview em,
.build-chip,
.preview-specs span,
.preview-specs b,
.property-completion em,
.estate-interior-gallery em,
.data-action-row em,
.accessibility-guide em,
.progress-export-bar > span,
.path-switch-note,
.learning-path-copy em,
.learning-path-copy small { font-size: 14px; }

/* Supporting information learners may need to understand: 14px minimum. */
.bottom-nav button,
.text-action,
.hint-button,
.back-button,
.ledger-property em,
.ledger-stat,
.trail-brief > span,
.word-row p,
.audio-caption.muted,
.audio-clue,
.inline-notice,
.confusion-grid span,
.confusion-grid b,
.confusion-grid em,
.diagnosis-card em,
.repair-patterns > span,
.repair-patterns small,
.repair-contrast p,
.precision-repair > small,
.notice,
.item-select em,
.shop-preview > p:not(.folio-label),
.shop-preview .quiet-action,
.word-title p,
.setting-row em,
.profile-row em,
.reset-row em,
.progress-entry em,
.data-action-row em,
.reset-confirm-panel > p,
.progress-export-bar > span,
.project-brief-rail > p:not(.eyebrow),
.role-line strong,
.constraint-list span,
.evidence-card p,
.project-options.long button,
.recommendation-options span,
.project-feedback strong,
.project-feedback p,
.rationale-field > span,
.impact-next span,
.project-progress > span,
.project-progress > strong,
.portfolio-board article p,
.portfolio-empty p,
.source-card > p,
.source-card dd,
.confidence-option span,
.revision-impact-option span,
.revision-response-option span,
.hs-repair-patterns > span,
.maya-note p,
.word-parts em,
.zone-note,
.concept-support-card > div:first-child > p,
.concept-support-card > em,
.maya-coach-card p,
.maya-coach-card em { font-size: 14px; }

/* Normal learner-facing body/instructional copy: 16px minimum. */
.hero-intro,
.stage-elementary .elementary-hero .hero-intro,
.onboarding-note,
.learning-path-copy p,
.trail-intro > p:not(.eyebrow),
.hint-note,
.answer-option strong,
.feedback-folio > p:not(.eyebrow),
.misconception-card > p:last-child,
.diagnosis-card p:not(.eyebrow),
.precision-repair > p,
.word-definition,
.setting-row strong,
.profile-row strong,
.reset-row strong,
.progress-entry strong,
.data-action-row strong,
.project-step > p:not(.folio-label),
.project-problem,
.project-intro-card > p:not(.eyebrow),
.hs-property-copy > p:not(.eyebrow),
.example-card p,
.project-feedback p { font-size: 16px; }

/* Questions, primary directions, and answer choices: 18px minimum. */
.challenge-prompt,
.decision-stem,
.project-options button,
.recommendation-options strong { font-size: 18px !important; }

/* Correction/repair panels are core instruction, not tiny metadata. */
.diagnosis-card h3,
.misconception-card h3 { font-size: 24px; }
.diagnosis-card p:not(.eyebrow),
.misconception-card > p:last-child,
.precision-repair > p { line-height: 1.65; }
.memory-key strong { font-size: 18px; }
.repair-heading b,
.repair-contrast strong { font-size: 20px; }

/* Mobile keeps the same readability floor; layout adapts rather than shrinking text. */
@media (max-width: 760px) {
  .stage-chip span,
  .rank-pill span,
  .credit-pill em,
  .stage-selector em,
  .learning-path-copy small { font-size: 14px; }
  .bottom-nav button,
  .trail-brief > span { font-size: 14px; }
  .hero-intro,
  .stage-elementary .elementary-hero .hero-intro,
  .learning-path-copy p,
  .answer-option strong { font-size: 16px; }
  .challenge-prompt { font-size: 18px; }
}


/* ========================================================================== */
/* RC 2.15.5 GLOBAL READABILITY PASS — human signoff                          */
/* ========================================================================== */
/* Human signoff showed that 12–14px metadata was technically present but not
   comfortably readable at ordinary laptop/desktop distance. 2.15.5 raises the
   entire product one more step and lets layouts reflow/scroll instead of
   shrinking meaningful text to make a composition fit. */

/* Persistent UI: labels must be readable without leaning toward the screen. */
.brand-lockup em,
.stage-chip span,
.rank-pill span,
.credit-pill em,
.eyebrow,
.folio-label,
.challenge-kicker,
.challenge-topline > span,
.stage-selector em,
.stage-selector strong,
.bottom-nav button,
.back-button,
.text-action,
.hint-button { font-size: 15px; }
.stage-chip strong { font-size: 20px; }
.rank-pill strong { font-size: 21px; }
.credit-pill strong { font-size: 22px; }
.primary-action,
.quiet-action,
.primary-action.compact { font-size: 17px; }

/* Home/onboarding/supporting prose. */
.hero-intro,
.stage-elementary .elementary-hero .hero-intro,
.onboarding-heading > p:last-child,
.learning-path-copy p,
.onboarding-note,
.project-intro-card > p:not(.eyebrow),
.hs-property-copy > p:not(.eyebrow) { font-size: 18px; line-height: 1.62; }
.learning-path-copy small,
.learning-path-copy em,
.ledger-property em,
.ledger-stat,
.hs-role-card span,
.hs-role-card em,
.hs-status-ledger span,
.district-network-strip b,
.district-network-strip em,
.network-domain-list b,
.network-domain-list em,
.portfolio-domain-grid b,
.portfolio-domain-grid em,
.domain-badge { font-size: 15px; }
.hs-role-card strong { font-size: 18px; }
.hs-status-ledger strong { font-size: 22px; }

/* Trails and direct instruction. */
.trail-brief .eyebrow,
.phase-rail > span,
.word-row p,
.audio-caption.muted,
.audio-clue,
.inline-notice,
.input-challenge label,
.meaning-card span,
.example-card span,
.word-parts em { font-size: 15px; }
.trail-brief > strong { font-size: 26px; }
.trail-brief > span,
.trail-intro > p:not(.eyebrow),
.hint-note,
.maya-note p,
.maya-coach-card p,
.maya-coach-card em,
.example-card p,
.feedback-folio > p:not(.eyebrow),
.misconception-card > p:last-child,
.diagnosis-card p:not(.eyebrow),
.diagnosis-card em,
.precision-repair > p,
.word-definition { font-size: 18px; line-height: 1.65; }
.challenge-prompt,
.answer-option strong { font-size: 20px !important; line-height: 1.55; }
.sound-orb span { font-size: 16px; }
.audio-caption { font-size: 22px; }
.letter-token { font-size: 17px; }

/* Correction and repair teaching must never look like fine print. */
.diagnosis-tag,
.memory-key span,
.repair-heading em,
.repair-contrast span,
.repair-patterns > span,
.repair-patterns small,
.precision-repair > small { font-size: 15px; }
.diagnosis-card h3,
.misconception-card h3 { font-size: 26px; }
.memory-key strong { font-size: 20px; }
.repair-heading b,
.repair-contrast strong { font-size: 22px; }
.repair-contrast p { font-size: 17px; line-height: 1.6; }

/* Shops, archive, settings and data controls. */
.item-select p,
.item-price small,
.shop-category-bar button,
.stage-badge,
.evidence,
.word-origin,
.settings-section-heading span,
.accessibility-guide kbd,
.reset-safeguard-actions label span,
.progress-export-bar > span { font-size: 15px; }
.item-select em,
.shop-preview > p:not(.folio-label),
.word-title p,
.setting-row em,
.profile-row em,
.reset-row em,
.progress-entry em,
.data-action-row em,
.accessibility-guide em { font-size: 16px; line-height: 1.55; }
.setting-row strong,
.profile-row strong,
.reset-row strong,
.progress-entry strong,
.data-action-row strong { font-size: 18px; }
.item-select h2 { font-size: 25px; }
.item-price strong { font-size: 22px; }

/* Educator / Project Progress: this was the strongest signoff failure. */
.progress-dashboard { width: min(1180px, calc(100% - min(5vw, 72px))); margin-left: min(5vw, 72px); padding-bottom: 115px; }
.progress-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.progress-overview article { min-height: 120px; padding: 18px; }
.progress-overview span,
.skill-bars > div > span,
.support-word-list span,
.stage-progress-card strong,
.stage-progress-card em,
.privacy-note,
.empty-progress { font-size: 16px; line-height: 1.55; }
.progress-overview em,
.support-word-list em { font-size: 16px; line-height: 1.55; }
.progress-panel h2 { font-size: 30px; }
.support-word-list strong { font-size: 20px; }
.stage-progress-card > span { font-size: 17px; }
.domain-insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.domain-insight-grid article { min-height: 190px; padding: 16px; gap: 9px; }
.domain-insight-grid strong { font-size: 18px; }
.domain-insight-grid span,
.domain-insight-grid em { font-size: 16px; }
.domain-insight-grid small { font-size: 15px; line-height: 1.65; }
.domain-insight-grid article > b { font-size: 31px; }
.transfer-list strong { font-size: 19px; }
.transfer-list em,
.transfer-list small,
.hs-repair-patterns > span { font-size: 16px; line-height: 1.55; }

/* High School professional work. */
.project-brief-rail > strong,
.field-label-stack span,
.constraint-list > strong,
.project-feedback em,
.rationale-field em,
.rationale-field small,
.impact-signal,
.impact-next strong,
.portfolio-board article em { font-size: 15px; }
.project-brief-rail > p:not(.eyebrow),
.role-line strong,
.constraint-list span,
.evidence-card p,
.recommendation-options span,
.project-feedback strong,
.project-feedback p,
.rationale-field > span,
.impact-next span,
.project-progress > span,
.project-progress > strong,
.portfolio-board article p,
.portfolio-empty p,
.source-card > p,
.source-card dd,
.confidence-option span,
.revision-impact-option span,
.revision-response-option span,
.hs-repair-patterns > span { font-size: 17px; line-height: 1.6; }
.project-step > p:not(.folio-label),
.project-problem { font-size: 19px; line-height: 1.65; }
.decision-stem,
.project-options button,
.recommendation-options strong { font-size: 20px !important; }
.project-options.long button { font-size: 18px; }
.evidence-card strong { font-size: 20px; }
.portfolio-board article strong { font-size: 19px; }

/* Let longer screens scroll instead of hiding copy behind fixed navigation. */
.high-school-home,
.project-intro-scene,
.progress-scene,
.settings-scene,
.collection-scene,
.shop-scene { overflow-y: auto; scrollbar-gutter: stable; }
.high-school-home { padding-bottom: 175px; }
.high-school-home .hs-home-copy { margin-bottom: 135px; }
.project-intro-card { top: 112px; bottom: 92px; max-height: calc(100dvh - 210px); overflow-y: auto; }

/* Larger Learning Text remains a second, clearly visible accessibility step. */
html[data-large-text="true"] .challenge-prompt,
html[data-large-text="true"] .challenge-folio p,
html[data-large-text="true"] .feedback-folio p,
html[data-large-text="true"] .project-step > p,
html[data-large-text="true"] .decision-stem,
html[data-large-text="true"] .source-card p,
html[data-large-text="true"] .source-card dd,
html[data-large-text="true"] .answer-option strong,
html[data-large-text="true"] .project-options button,
html[data-large-text="true"] .confidence-option span,
html[data-large-text="true"] .recommendation-options span,
html[data-large-text="true"] .revision-impact-option span,
html[data-large-text="true"] .revision-response-option span,
html[data-large-text="true"] .word-definition,
html[data-large-text="true"] .settings-folio em,
html[data-large-text="true"] .progress-panel p,
html[data-large-text="true"] .rationale-field textarea { font-size: 22px; line-height: 1.75; }

@media (max-width: 900px) {
  .progress-dashboard { width: 100%; margin-left: 0; }
  .progress-overview,
  .domain-insight-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .bottom-nav button { font-size: 14px; }
  .hero-intro,
  .stage-elementary .elementary-hero .hero-intro,
  .learning-path-copy p { font-size: 17px; }
  .challenge-prompt,
  .answer-option strong { font-size: 19px !important; }
}

.network-start-note { margin: 12px 0 16px; color: var(--brass-bright) !important; font-size: 17px !important; font-weight: 700; line-height: 1.55 !important; }

/* ========================================================================== */
/* RC 2.15.6 — HIGH SCHOOL CLARITY + GLOBAL COMFORTABLE READING              */
/* ========================================================================== */
/* Human signoff established a stronger standard than a technical pixel floor:
   learner-facing copy must be comfortably readable at normal desktop distance,
   and High School must explain its purpose and next action without requiring
   the learner to decode product terminology. */

body { font-size: 18px; }

/* Global comfortable-reading baseline. Decorative labels may be 16px; content
   a learner needs to understand is 18px or larger. */
.brand-lockup em,
.stage-chip span,
.rank-pill span,
.credit-pill em,
.eyebrow,
.folio-label,
.challenge-kicker,
.challenge-topline > span,
.stage-selector strong,
.stage-selector em,
.bottom-nav button,
.domain-badge { font-size: 16px !important; }

.back-button {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid rgba(226, 190, 104, .34);
  border-radius: 999px;
  background: rgba(4, 22, 19, .82);
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  font-size: 18px !important;
}

.experience main p:not(.eyebrow):not(.folio-label):not(.audio-caption),
.experience main dd,
.experience main dt { font-size: 18px !important; line-height: 1.65 !important; }
.experience main small { font-size: 16px !important; line-height: 1.55 !important; }
.experience main button:not(.round-button):not(.letter-token):not(.letter-slot) { font-size: 17px; }

/* Direct learning text gets another step above body copy. */
.challenge-prompt,
.answer-option strong,
.project-step > p:not(.folio-label),
.project-problem,
.decision-stem,
.project-options button,
.recommendation-options strong { font-size: 20px !important; line-height: 1.6 !important; }
.answer-option strong,
.project-options.long button { font-size: 19px !important; }
.maya-note p,
.maya-coach-card p,
.feedback-folio > p:not(.eyebrow),
.diagnosis-card p:not(.eyebrow),
.precision-repair > p,
.word-definition { font-size: 19px !important; }

/* Cards, archives, shops, settings, property panels and educator information. */
.item-select p,
.shop-preview > p:not(.folio-label),
.setting-row em,
.profile-row em,
.reset-row em,
.progress-entry em,
.data-action-row em,
.accessibility-guide em,
.progress-overview span,
.progress-overview em,
.skill-bars > div > span,
.support-word-list span,
.support-word-list em,
.stage-progress-card strong,
.stage-progress-card em,
.privacy-note,
.empty-progress,
.repair-patterns > span,
.repair-patterns small { font-size: 17px !important; line-height: 1.6 !important; }
.setting-row strong,
.profile-row strong,
.reset-row strong,
.progress-entry strong,
.data-action-row strong,
.support-word-list strong { font-size: 19px !important; }

/* High School: replace internal product jargon with a clear learner journey. */
.hs-home-copy {
  width: min(620px, 48vw);
  margin-top: 2vh;
}
.hs-home-copy h1 { font-size: clamp(50px, 5.2vw, 76px); }
.hs-home-copy .hero-intro { max-width: 600px; font-size: 19px !important; line-height: 1.58 !important; }
.hs-how-card,
.network-how-it-works {
  display: grid;
  gap: 9px;
  margin: 18px 0;
}
.hs-how-card > span,
.network-how-it-works > span {
  display: grid;
  grid-template-columns: 38px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  padding: 11px 13px;
  border: 1px solid rgba(226,190,104,.25);
  background: rgba(5, 26, 24, .78);
}
.hs-how-card b,
.network-how-it-works b {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--brass);
  border-radius: 50%;
  color: var(--brass-bright);
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
}
.hs-how-card strong,
.network-how-it-works strong { color: var(--ivory); font-size: 18px; }
.hs-how-card em,
.network-how-it-works em { color: var(--mist); font-size: 17px; font-style: normal; line-height: 1.45; }
.hs-home-actions { margin-top: 17px; }
.hs-start-action,
.network-start-action { min-height: 55px; padding: 0 23px; font-size: 19px !important; }
.hs-role-card { width: min(560px, 100%); }
.hs-role-card span { font-size: 16px !important; }
.hs-role-card strong { font-size: 20px !important; }
.hs-role-card em { font-size: 17px !important; line-height: 1.5; }
.hs-status-ledger { width: min(310px, 24vw); }
.hs-status-ledger span { font-size: 16px !important; }
.hs-status-ledger strong { font-size: 22px !important; }

/* High School Career Projects landing page: start action first, technical details removed. */
.network-intro-card {
  width: min(570px, 47vw);
  padding: 26px;
}
.network-intro-card h1 { font-size: clamp(44px, 4.2vw, 64px); }
.network-start-note { font-size: 19px !important; line-height: 1.6 !important; }
.network-start-action { width: 100%; margin: 4px 0 8px; }
.network-domain-heading { margin: 18px 0 10px !important; color: var(--brass-bright) !important; font-weight: 800; }
.network-domain-list { gap: 9px; }
.network-domain-list > span { min-height: 58px; padding: 10px 12px; }
.network-domain-list b { font-size: 17px !important; }
.network-domain-list em { font-size: 16px !important; }

/* High School portfolio / My Work. */
.hs-property-copy { width: min(520px, 42vw); }
.hs-property-copy > p:not(.eyebrow) { font-size: 18px !important; line-height: 1.65 !important; }
.portfolio-domain-grid b,
.portfolio-domain-grid em { font-size: 17px !important; }
.portfolio-board article small { font-size: 16px !important; }
.portfolio-board article strong { font-size: 20px !important; }
.portfolio-board article em,
.portfolio-board article p,
.portfolio-empty p { font-size: 18px !important; line-height: 1.6 !important; }
.portfolio-empty strong { font-size: 24px; }

/* Learner-facing High School progress is intentionally simple. Detailed
   educator analytics remain available from Settings instead of bottom nav. */
.hs-learner-progress-scene {
  padding: 112px 0 110px;
  overflow-y: auto;
  background: var(--ink);
}
.hs-learner-progress-scene::before { background-image: url('/apps/vocabulary-adventure/assets/high-school-civic.webp'); background-position: center; }
.hs-learner-progress-scene::after { background: linear-gradient(90deg, rgba(3,16,18,.96), rgba(3,16,18,.83)); }
.hs-progress-heading { width: min(760px, calc(100% - 100px)); margin: 48px auto 24px; }
.hs-progress-heading h1 { font-size: clamp(48px, 5vw, 72px); }
.hs-progress-heading > p:last-child { max-width: 720px; font-size: 19px !important; }
.hs-progress-shell { width: min(1120px, calc(100% - 100px)); margin: 0 auto; display: grid; gap: 18px; padding-bottom: 40px; }
.hs-progress-next,
.hs-progress-explainer,
.hs-progress-domains {
  padding: 24px;
  border: 1px solid rgba(226,190,104,.3);
  background: rgba(5,25,23,.92);
  box-shadow: 0 18px 42px rgba(0,0,0,.2);
}
.hs-progress-next h2,
.hs-progress-explainer h2,
.hs-progress-domains h2 { margin: 0 0 12px; font-family: var(--serif); font-size: 32px; font-weight: 400; }
.hs-progress-next > p:not(.folio-label) { max-width: 820px; font-size: 19px !important; }
.hs-progress-overview { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.hs-progress-overview article { display: grid; gap: 8px; min-height: 145px; padding: 19px; border: 1px solid rgba(226,190,104,.22); background: rgba(5,28,26,.9); }
.hs-progress-overview span { color: var(--mist); font-size: 17px; }
.hs-progress-overview strong { color: var(--brass-bright); font-family: var(--serif); font-size: 34px; font-weight: 400; }
.hs-progress-overview em { color: var(--stone); font-size: 17px; font-style: normal; line-height: 1.5; }
.hs-progress-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.hs-progress-steps article { padding: 18px; border: 1px solid rgba(226,190,104,.22); background: rgba(7,32,29,.72); }
.hs-progress-steps b { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: 11px; border: 1px solid var(--brass); border-radius: 50%; color: var(--brass-bright); font-size: 20px; }
.hs-progress-steps strong { display: block; margin-bottom: 8px; color: var(--ivory); font-size: 21px; }
.hs-progress-steps p { font-size: 18px !important; }
.hs-domain-cards { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.hs-domain-cards article { display: grid; gap: 6px; padding: 16px; border: 1px solid rgba(196,211,203,.18); background: rgba(5,27,27,.72); }
.hs-domain-cards article.active { border-color: rgba(226,190,104,.46); }
.hs-domain-cards strong { font-size: 20px; }
.hs-domain-cards span,
.hs-domain-cards em { font-size: 17px; font-style: normal; }
.hs-domain-cards span { color: var(--brass-bright); }
.hs-domain-cards em { color: var(--mist); }
.hs-educator-note { padding: 16px 18px; border-left: 3px solid var(--brass); background: rgba(213,170,84,.08); font-size: 17px !important; }

/* Educator report is allowed to be information-dense, but not tiny. */
.progress-dashboard { width: min(1120px, calc(100% - 100px)); margin-left: auto; margin-right: auto; }
.domain-insight-grid article { min-height: 225px; padding: 20px; }
.domain-insight-grid strong { font-size: 21px !important; }
.domain-insight-grid span,
.domain-insight-grid em { font-size: 18px !important; }
.domain-insight-grid small { font-size: 17px !important; line-height: 1.65 !important; }
.transfer-list strong { font-size: 21px !important; }
.transfer-list em,
.transfer-list small { font-size: 17px !important; }

/* High School field work needs full reading size too. */
.project-brief-rail > p:not(.eyebrow),
.role-line strong,
.field-label-stack span,
.constraint-list span,
.evidence-card p,
.recommendation-options span,
.project-feedback strong,
.project-feedback p,
.rationale-field > span,
.impact-next span,
.project-progress > span,
.project-progress > strong,
.source-card > p,
.source-card dd,
.confidence-option span,
.revision-impact-option span,
.revision-response-option span { font-size: 18px !important; line-height: 1.6 !important; }
.evidence-card strong,
.recommendation-options strong { font-size: 20px !important; }

/* The lower navigation describes destinations in plain language and remains
   readable at normal desktop distance. */
.stage-high-school .bottom-nav button { font-size: 16px !important; letter-spacing: .08em; }

/* Large-text mode remains a further accessibility increase, not a requirement. */
html[data-large-text="true"] .experience main p:not(.eyebrow):not(.folio-label),
html[data-large-text="true"] .challenge-prompt,
html[data-large-text="true"] .answer-option strong,
html[data-large-text="true"] .project-step > p,
html[data-large-text="true"] .project-options button,
html[data-large-text="true"] .domain-insight-grid small { font-size: 23px !important; line-height: 1.75 !important; }

@media (max-width: 1000px) {
  .hs-home-copy { width: min(650px, 62vw); }
  .hs-status-ledger { display: none; }
  .network-intro-card { width: min(620px, 60vw); }
  .hs-progress-shell, .hs-progress-heading { width: calc(100% - 48px); }
  .hs-progress-steps { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .hs-home-copy, .network-intro-card { width: 100%; }
  .hs-how-card > span, .network-how-it-works > span { grid-template-columns: 34px 1fr; }
  .hs-progress-shell, .hs-progress-heading { width: calc(100% - 28px); }
  .hs-progress-overview, .hs-domain-cards { grid-template-columns: 1fr; }
  .back-button { left: 14px; top: 92px; }
}


/* ========================================================================== */
/* RC 2.15.7 — HIGH SCHOOL ORIENTATION + NO-HIDDEN-CONTENT SIGNOFF            */
/* ========================================================================== */
/* Human signoff showed that the High School stage still behaved like an
   internal analytics/product dashboard. This pass makes the learner journey
   explicit, keeps every action above the fixed navigation, and removes tiny
   information density from learner-facing High School pages. */

/* Strong readable floor for anything a learner is expected to understand. */
.experience main p:not(.eyebrow):not(.folio-label),
.experience main li,
.experience main dd,
.experience main dt,
.experience main label,
.experience main .network-domain-list b,
.experience main .network-domain-list em,
.experience main .portfolio-domain-grid b,
.experience main .portfolio-domain-grid em,
.experience main .estate-badges span,
.experience main .hs-domain-cards span,
.experience main .hs-domain-cards em { font-size: 18px !important; line-height: 1.62 !important; }
.experience main small,
.experience main .eyebrow,
.experience main .folio-label,
.experience main .domain-badge { font-size: 16px !important; line-height: 1.45 !important; }
.experience main button:not(.round-button):not(.letter-token):not(.letter-slot) { font-size: 18px !important; }
.stage-high-school .bottom-nav button { font-size: 17px !important; }
.stage-high-school .bottom-nav button span { font-size: inherit !important; }

/* Home: one purpose, one obvious first action. No stage selector over the copy. */
.hs-guided-home {
  position: absolute;
  overflow-y: auto;
  padding: 100px clamp(28px, 4vw, 64px) 110px;
  scrollbar-gutter: stable;
}
.hs-guided-home .hs-home-copy {
  width: min(610px, 48vw);
  margin-top: 0;
  padding: 20px 22px 24px;
  border: 1px solid rgba(226,190,104,.28);
  background: rgba(4,22,21,.86);
  backdrop-filter: blur(12px);
}
.hs-guided-home .hs-home-copy h1 { margin-bottom: 14px; font-size: clamp(48px, 4.9vw, 70px); }
.hs-value-card { margin: 0 0 14px; padding: 14px 16px; border-left: 4px solid var(--brass); background: rgba(226,190,104,.08); }
.hs-value-card strong { display:block; margin-bottom:6px; color: var(--brass-bright); font-size: 21px; }
.hs-value-card p { margin:0; color: var(--ivory); }
.hs-guided-home .hs-how-card { margin: 12px 0; gap: 8px; }
.hs-guided-home .hs-how-card > span { padding: 9px 11px; }
.hs-guided-home .hs-how-card strong { font-size: 19px; }
.hs-guided-home .hs-how-card em { font-size: 17px; }
.hs-guided-home .hs-home-actions { display:flex; flex-wrap:wrap; gap:10px; margin: 14px 0 10px; }
.hs-guided-home .hs-start-action { min-height: 56px; font-size: 20px !important; }
.start-here-card { margin: 10px 0 0; }
.start-here-card strong { font-size: 20px !important; }
.start-here-card em { font-size: 18px !important; }
.hs-guided-home .hs-home-pair { left: 45%; bottom: 68px; width: min(570px, 40vw); height: calc(100% - 125px); }
.hs-guided-home .hs-status-ledger { top: 105px; }

/* Career Projects: remove internal jargon and make START HERE dominant. */
.project-intro-scene { overflow-y:auto; padding-bottom:110px; }
.guided-project-start {
  position: relative;
  left: auto;
  top: auto;
  bottom: auto;
  width: min(650px, 52vw);
  max-height: none;
  margin: 22px 0 40px 32px;
  padding: 26px;
  overflow: visible;
}
.guided-project-start h1 { font-size: clamp(54px, 5vw, 72px); }
.guided-project-start .network-start-note { margin: 8px 0 14px; font-size: 20px !important; }
.project-purpose { margin: 14px 0; padding: 14px 16px; border:1px solid rgba(226,190,104,.24); background:rgba(226,190,104,.06); }
.project-purpose strong { color:var(--ivory); font-size:21px; }
.project-purpose p { margin:6px 0 0; }
.guided-project-start .network-start-action { min-height:58px; font-size:20px !important; }
.guided-project-start .network-domain-heading { font-size:18px !important; }
.large-domain-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
.large-domain-list > span { min-height:72px; padding:13px 14px; }
.large-domain-list b { font-size:19px !important; }
.large-domain-list em { font-size:17px !important; }
.project-intro-scene .project-intro-pair { left: 55%; width:min(560px,38vw); }

/* My Work: empty learners get direction, not a dashboard of zeros. */
.empty-work-scene { overflow-y:auto; }
.empty-work-scene .hs-property-copy { margin-top: 2vh; width:min(560px,43vw); }
.empty-work-explainer { margin:16px 0; padding:14px 16px; border:1px solid rgba(226,190,104,.22); background:rgba(226,190,104,.06); }
.empty-work-explainer strong { display:block; color:var(--brass-bright); font-size:21px; }
.empty-work-explainer p { margin:5px 0 0; }
.simple-empty-board { display:grid; align-content:center; }
.guided-empty { gap:13px; min-height:360px; padding:30px; }
.guided-empty > span { color:var(--brass-bright); }
.guided-empty strong { font-size:30px !important; }
.guided-empty p { max-width:430px; font-size:19px !important; }
.guided-empty .primary-action { margin-top:6px; }

/* High School learner pages must scroll above nav; nothing may be hidden. */
.stage-high-school .page-scene,
.stage-high-school .hs-property-scene,
.stage-high-school .project-scene,
.stage-high-school .progress-scene { padding-bottom: 120px !important; overflow-y:auto !important; scrollbar-gutter:stable; }
.stage-high-school .collection-sheet { margin-bottom: 36px; }
.stage-high-school .back-button { z-index:70; font-size:18px !important; }

/* Adult/educator analytics stay readable even though they are intentionally dense. */
.stage-high-school .progress-dashboard .domain-insight-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap:16px; }
.stage-high-school .progress-dashboard .domain-insight-grid article { min-height:250px; padding:22px; }
.stage-high-school .progress-dashboard .domain-insight-grid strong { font-size:22px !important; }
.stage-high-school .progress-dashboard .domain-insight-grid span,
.stage-high-school .progress-dashboard .domain-insight-grid em,
.stage-high-school .progress-dashboard .domain-insight-grid small,
.stage-high-school .progress-dashboard .privacy-note,
.stage-high-school .progress-dashboard .empty-progress { font-size:18px !important; line-height:1.65 !important; }

@media (max-width: 1050px) {
  .hs-guided-home .hs-home-copy { width:min(680px,62vw); }
  .hs-guided-home .hs-home-pair { opacity:.58; left:48%; }
  .guided-project-start { width:min(700px,65vw); margin-left:18px; }
  .project-intro-scene .project-intro-pair { opacity:.5; }
}
@media (max-width: 760px) {
  .hs-guided-home { position:relative; min-height:100dvh; padding:96px 14px 110px; }
  .hs-guided-home .hs-home-copy { width:100%; padding:18px; }
  .hs-guided-home .hs-home-pair { display:none; }
  .hs-guided-home .hs-home-actions { display:grid; }
  .guided-project-start { width:calc(100% - 28px); margin:18px 14px 36px; }
  .large-domain-list { grid-template-columns:1fr; }
  .project-intro-scene .project-intro-pair { display:none; }
  .empty-work-scene .hs-property-copy { width:100%; margin-top:0; }
  .simple-empty-board { position:relative; inset:auto; width:100%; margin-top:18px; }
  .stage-high-school .bottom-nav button { font-size:15px !important; }
  .stage-high-school .progress-dashboard .domain-insight-grid { grid-template-columns:1fr; }
}


/* ========================================================================== */
/* RC 2.15.8 — HOME NAVIGATION OVERLAP FIX                                   */
/* ========================================================================== */
/* The old three-path selector was absolutely positioned above the fixed
   bottom navigation and could cover the enlarged Junior High/Elementary
   hero copy and primary buttons. Path switching now lives in Settings and is
   exposed from Home with a normal-flow action, so content can never be hidden. */

.stage-elementary .home-scene,
.stage-junior-high .home-scene {
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding-bottom: 120px;
}

.stage-elementary .home-scene .hero-copy,
.stage-junior-high .home-scene .hero-copy {
  margin-bottom: 40px;
}

.home-path-change {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-top: 14px;
  padding: 0 14px;
  border: 1px solid rgba(226,190,104,.34);
  border-radius: 999px;
  background: rgba(4,22,19,.78);
  color: var(--brass-bright);
  font-size: 17px !important;
  font-weight: 800;
}
.home-path-change:hover { border-color: var(--brass); background: rgba(213,170,84,.12); }
.stage-elementary .home-path-change {
  border-color: rgba(96,78,39,.38);
  background: rgba(250,239,207,.62);
  color: #4f3a13;
}

@media (max-height: 760px) and (min-width: 761px) {
  .stage-elementary .home-scene,
  .stage-junior-high .home-scene { padding-top: 94px; }
  .stage-elementary .home-scene .hero-copy,
  .stage-junior-high .home-scene .hero-copy { margin-top: 0; }
}