:root {
  --ink: #17312c;
  --forest: #183b35;
  --paper: #fbfaf3;
  --cream: #f0eadc;
  --mint: #bfe2cf;
  --sun: #f0bd4f;
  --clay: #c95f42;
  --blue: #5297a7;
  --line: #c8c2b4;
  --muted: #5d6a66;
  --focus: #095fba;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--paper); }
body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, "Avenir Next", Arial, sans-serif; }
button { color: inherit; font: inherit; }
button:focus-visible, [tabindex]:focus-visible { outline: 4px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.lesson-shell { min-height: 100vh; }
.lesson-header { display: grid; grid-template-columns: auto minmax(240px, 1fr) minmax(240px, 330px) auto; align-items: center; gap: 22px; min-height: 120px; padding: 22px clamp(20px, 4vw, 64px); border-bottom: 2px solid var(--ink); background: var(--cream); }
.level-mark { display: flex; align-items: baseline; justify-content: center; width: 68px; height: 68px; border: 2px solid var(--ink); border-radius: 50%; background: var(--sun); font-weight: 900; }
.level-mark span { align-self: center; font-size: 27px; }.level-mark small { align-self: center; margin-top: 9px; font-size: 12px; }
.eyebrow { margin: 0 0 4px; color: #7b4a14; font-size: 11px; font-weight: 900; letter-spacing: .09em; }
.lesson-copy h1, .panel-heading h2, .plan-topline h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(25px, 2.5vw, 38px); line-height: 1.02; font-weight: 700; }
.lesson-copy > p:last-child { max-width: 680px; margin: 7px 0 0; color: var(--muted); }
.coach-note { display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 10px; }
.coach-face { display: grid; width: 56px; height: 50px; place-items: center; border: 2px solid var(--ink); border-radius: 44% 52% 42% 47%; background: #808c84; color: white; font-family: Georgia, serif; font-weight: 900; }
.coach-note p { margin: 0; padding: 10px 12px; border: 2px solid var(--ink); border-radius: 8px; background: white; box-shadow: 3px 3px 0 var(--ink); font-size: 13px; line-height: 1.3; }
.coach-note strong, .coach-note span { display: block; }.coach-note strong { margin-bottom: 2px; font-size: 10px; text-transform: uppercase; }
.header-actions { display: grid; justify-items: end; gap: 12px; }
.progress { display: flex; gap: 6px; }.progress i { width: 10px; height: 10px; border: 2px solid var(--ink); border-radius: 50%; }.progress i.current { width: 14px; height: 14px; background: var(--sun); }.progress i.done { background: var(--forest); }
.quiet-button { min-height: 38px; padding: 0 14px; border: 1px solid var(--ink); border-radius: 99px; background: transparent; font-weight: 800; cursor: pointer; }

.month-board { display: grid; grid-template-columns: minmax(420px, 1.02fr) minmax(440px, .98fr); min-height: calc(100vh - 120px); }
.calendar-panel, .plan-panel { min-width: 0; padding: clamp(22px, 3vw, 46px); }
.calendar-panel { color: white; background: var(--forest); }
.plan-panel { background: var(--paper); }
.panel-heading, .plan-topline { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.panel-heading .eyebrow { color: #f7d791; }.panel-heading h2 { color: white; font-size: clamp(28px, 3vw, 44px); }
.day-display { display: grid; justify-items: center; min-width: 66px; padding: 8px; border: 1px solid rgba(255,255,255,.5); border-radius: 8px; }.day-display span { font-size: 10px; font-weight: 900; }.day-display strong { font-family: Georgia, serif; font-size: 28px; }
.balance-strip { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.3); border-radius: 9px 9px 0 0; background: rgba(255,255,255,.08); }
.balance-strip strong { font-size: 22px; }.balance-track { grid-column: 1 / -1; height: 7px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.17); }.balance-track i { display: block; width: 0; height: 100%; background: var(--sun); transition: width .25s ease-out; }
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid rgba(255,255,255,.25); border-left: 1px solid rgba(255,255,255,.25); }
.calendar-day { position: relative; min-height: 66px; padding: 8px; border-right: 1px solid rgba(255,255,255,.25); border-bottom: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.03); }
.calendar-day > b { font-size: 11px; }.calendar-day span { display: block; margin-top: 7px; font-size: 10px; line-height: 1.15; color: #dbe9e4; }.calendar-day.event-day { background: rgba(240,189,79,.12); }.calendar-day.is-current { z-index: 1; box-shadow: inset 0 0 0 3px var(--sun); }
.cashflow-log { min-height: 46px; padding: 13px 15px; border-radius: 0 0 9px 9px; color: var(--ink); background: var(--sun); font-weight: 800; }
.room-card { display: grid; grid-template-columns: minmax(150px, .8fr) 1fr; align-items: center; gap: 18px; margin-top: 24px; padding: 16px; border: 1px solid rgba(255,255,255,.35); border-radius: 12px; background: rgba(255,255,255,.07); }
.room-card strong, .room-card span { display: block; }.room-card strong { margin-bottom: 5px; font-family: Georgia, serif; font-size: 20px; }.room-card span { color: #d6e2de; font-size: 13px; line-height: 1.35; }.room-card .eyebrow { color: #f7d791; }
.room-scene { position: relative; min-height: 112px; overflow: hidden; border: 2px solid #0c2923; border-radius: 7px; background: #e9d8b4; }
.room-scene .window { position: absolute; top: 13px; left: 14px; width: 43px; height: 47px; border: 5px solid #fff7e7; background: #8bc0c8; }.room-scene .sofa { position: absolute; right: 12px; bottom: 13px; width: 72px; height: 34px; border-radius: 9px 9px 3px 3px; background: var(--clay); box-shadow: 0 -14px 0 -5px #b74f36; }.room-scene .lamp { position: absolute; left: 76px; bottom: 12px; width: 5px; height: 55px; background: var(--ink); }.room-scene .lamp::before { content:""; position:absolute; left:-14px; top:-3px; width:33px; height:22px; background:var(--sun); clip-path:polygon(22% 0,78% 0,100% 100%,0 100%); }.room-scene .plant { position: absolute; left: 30px; bottom: 10px; width: 26px; height: 24px; border-radius: 4px 4px 12px 12px; background: #a85f38; }.room-scene .plant::before { content:""; position:absolute; left:3px; bottom:17px; width:24px; height:33px; border-radius:50% 0 50% 0; background:#4e8b59; transform:rotate(-23deg); }.room-scene .shelf { position:absolute; right:10px; top:14px; width:63px; height:7px; background:var(--ink); box-shadow:0 18px 0 var(--ink); }
.room-card.is-tight .room-scene { filter: saturate(.76); }.room-card.is-growing .room-scene::after { content:"Goal in progress"; position:absolute; right:6px; top:5px; padding:4px 6px; border-radius:4px; color:white; background:var(--forest); font-size:9px; font-weight:900; }

.plan-topline h2 { font-size: clamp(28px, 3vw, 42px); }.unallocated { text-align: right; }.unallocated span, .unallocated strong { display: block; }.unallocated span { color: var(--muted); font-size: 11px; }.unallocated strong { font-size: 25px; }
.token-tray { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 7px; min-height: 56px; padding: 12px; border: 2px dashed #81918b; border-radius: 10px; background: #eff4ef; }
.token { display: grid; width: 42px; height: 32px; place-items: center; border: 2px solid var(--ink); border-radius: 5px; color: var(--ink); background: var(--mint); box-shadow: 2px 2px 0 var(--ink); font-weight: 900; cursor: grab; }.token:active { cursor: grabbing; }.token-help { margin: 8px 0 18px; color: var(--muted); font-size: 12px; }
.envelopes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.envelope { position: relative; min-width: 0; padding: 14px; border: 2px solid var(--ink); border-radius: 9px; background: white; box-shadow: 3px 3px 0 var(--ink); transition: transform .15s ease-out, background .15s ease-out; }
.envelope.drag-over { transform: translateY(-3px); background: #edf8f1; }.envelope.covered { border-color: #356a4b; }.envelope.needs-cover { border-color: #a44732; }
.envelope-top { display:flex; justify-content:space-between; gap:10px; }.envelope h3 { margin:0; font-family:Georgia,serif; font-size:19px; }.envelope .amount { font-size:19px; font-weight:900; }.envelope .minimum { min-height:16px; margin:4px 0 10px; color:var(--muted); font-size:11px; }.envelope-track { height:7px; overflow:hidden; border-radius:99px; background:#e2ded4; }.envelope-track i { display:block; height:100%; background:var(--blue); }.envelope-actions { display:flex; gap:8px; margin-top:11px; }.envelope-actions button { flex:1; min-height:34px; border:1px solid var(--ink); border-radius:6px; background:var(--paper); font-size:12px; font-weight:800; cursor:pointer; }.envelope-actions button:first-child { color:white; background:var(--forest); }.envelope-actions button:disabled { opacity:.35; cursor:not-allowed; }
.savings-chute, .surprise-card { display:grid; grid-template-columns:1fr auto; align-items:center; gap:18px; margin-top:16px; padding:16px; border:2px solid var(--ink); border-radius:9px; background:#e2f1e7; }.savings-chute h3, .surprise-card h3 { margin:0; font-family:Georgia,serif; font-size:20px; }.savings-chute p, .surprise-card p { margin:4px 0 0; color:var(--muted); font-size:12px; }.segmented { display:flex; gap:6px; }.segmented button { min-width:52px; min-height:40px; border:1px solid var(--ink); border-radius:6px; background:white; font-weight:900; cursor:pointer; }.segmented button.selected { color:white; background:var(--forest); }.goal-jar { grid-column:1/-1; display:grid; grid-template-columns:auto auto; justify-content:space-between; gap:7px; }.goal-jar i { grid-column:1/-1; height:10px; overflow:hidden; border:1px solid var(--ink); border-radius:99px; background:white; }.goal-jar b { display:block; width:0; height:100%; background:var(--sun); transition:width .3s ease-out; }
.surprise-card { grid-template-columns:auto 1fr; color:#4c2015; background:#f6dfd6; }.surprise-date { display:grid; width:66px; height:66px; place-items:center; border:2px solid currentColor; border-radius:50%; font-size:11px; font-weight:900; }
.action-zone { display:flex; flex-wrap:wrap; align-items:center; gap:10px; min-height:76px; margin-top:18px; padding-top:18px; border-top:1px solid var(--line); }.primary-button, .secondary-button, .choice-button { min-height:48px; padding:0 20px; border:2px solid var(--ink); border-radius:7px; font-weight:900; cursor:pointer; }.primary-button { color:white; background:var(--clay); box-shadow:3px 3px 0 var(--ink); }.secondary-button, .choice-button { background:white; }.action-note { flex-basis:100%; margin:0; color:var(--muted); font-size:13px; }.status-good { color:#245e3d; font-weight:900; }.status-wait { color:#8f3f2f; font-weight:900; }
.result-layer { position:fixed; z-index:50; inset:0; display:grid; place-items:end center; padding:24px; background:rgba(16,36,31,.72); }.result-sheet { width:min(560px,100%); padding:34px; border:3px solid var(--ink); border-radius:12px; background:var(--paper); box-shadow:7px 7px 0 var(--ink); text-align:center; }.result-sheet h2 { margin:5px 0 10px; font-family:Georgia,serif; font-size:36px; }.result-sheet p:not(.eyebrow) { color:var(--muted); line-height:1.5; }

@media (min-width: 981px) and (max-height: 920px) {
  .lesson-header { min-height: 96px; padding: 14px clamp(20px, 3vw, 46px); }
  .level-mark { width: 58px; height: 58px; }
  .month-board { min-height: calc(100vh - 96px); }
  .calendar-panel, .plan-panel { padding: 18px 26px; }
  .panel-heading, .plan-topline { margin-bottom: 10px; }
  .calendar-day { min-height: 54px; padding: 6px; }
  .room-card { margin-top: 12px; padding: 11px; }
  .room-scene { min-height: 88px; }
  .token-tray { min-height: 44px; padding: 8px; }
  .token-help { margin: 5px 0 10px; }
  .envelopes { gap: 8px; }
  .envelope { padding: 10px; }
  .envelope .minimum { margin: 2px 0 6px; }
  .envelope-actions { margin-top: 6px; }
  .savings-chute, .surprise-card { margin-top: 10px; padding: 11px; }
  .action-zone { min-height: 60px; margin-top: 10px; padding-top: 10px; }
}

@media (max-width: 980px) { .lesson-header { grid-template-columns:auto 1fr auto; }.coach-note { grid-column:2/4; }.month-board { grid-template-columns:1fr; }.calendar-panel { min-height:auto; }.plan-panel { padding-bottom:70px; } }
@media (max-width: 650px) { .lesson-header { grid-template-columns:auto 1fr; gap:13px; padding:16px; }.level-mark { width:52px; height:52px; }.coach-note { grid-column:1/-1; }.header-actions { grid-column:1/-1; grid-row:3; display:flex; width:100%; justify-content:space-between; }.calendar-panel,.plan-panel { padding:20px 16px; }.calendar-day { min-height:51px; padding:5px; }.calendar-day span { overflow:hidden; max-height:24px; font-size:8px; }.room-card { grid-template-columns:1fr; }.envelopes { grid-template-columns:1fr; }.savings-chute { grid-template-columns:1fr; }.segmented { grid-column:1; }.result-layer { padding:12px; }.result-sheet { padding:25px 20px; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }