/* Joey visual refresh: calm working surface, distinct data and action areas. */
:root{--ink:#142c35;--muted:#627782;--line:#dde5e9;--teal:#08786d;--blue:#497fb4;--orange:#b96b35;--paper:#f7f9fb}
body{background:var(--paper);font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}a,button,input,select,summary{touch-action:manipulation}
:focus-visible{outline:3px solid #258bb3;outline-offset:4px}input:focus-visible,select:focus-visible{outline-offset:2px}
body>header{min-height:80px;padding:18px max(28px,calc((100vw - 1440px)/2));gap:24px;background:#fff;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-family:Georgia,"Times New Roman",serif;font-size:27px;font-weight:400;letter-spacing:-1.2px;white-space:nowrap}
.brand:before{content:none}.brand>.joey-symbol{display:block;width:34px;height:34px;flex-shrink:0;color:#233738}
.brand span{font-family:"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-size:14px;font-weight:450;letter-spacing:0;color:var(--muted);margin-left:7px;padding-left:18px;border-left:1px solid var(--line)}
nav{gap:24px}nav a,.text-button{color:var(--muted);font-size:14px}#homeBtn{color:var(--ink);font-weight:600}nav a:hover,.text-button:hover{color:var(--teal)}
main{max-width:1180px;padding:40px 28px 48px}.training-open main{max-width:1496px;padding-top:32px}
h1{font-size:clamp(28px,3.6vw,38px);font-weight:650;letter-spacing:-.035em;line-height:1.35}h2{font-size:19px;font-weight:650;letter-spacing:-.015em}h3{font-weight:600}
.intro{position:relative;margin-bottom:32px;padding-bottom:28px;border-bottom:1px solid var(--line)}.intro h1{margin:12px 0}.intro>p{font-size:16px}.eyebrow{font-size:12px;letter-spacing:.07em;font-weight:650;color:var(--teal)}
.card{border:1px solid var(--line);border-radius:14px;padding:26px;box-shadow:0 3px 12px #1a354203}
.lobby-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:start}.setup{border-top:3px solid var(--teal)}.setup h2{margin-bottom:22px}.setup label{font-size:14px;font-weight:550;margin:18px 0 8px}
.setup input,.setup select{font-size:15px;min-height:47px;border-radius:8px;border-color:#ccd8de;background:#fcfdfe}.setup>.quiet{font-size:14px;margin-top:18px}.period-inputs{gap:18px}.period-inputs label{margin-top:0}
.period-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:#f2f5f7;border:1px solid var(--line);padding:4px;border-radius:9px;margin:15px 0}.period-presets button{font-size:14px;background:transparent;border-color:transparent;padding:7px 8px}.period-presets button[aria-pressed=true]{background:#fff;color:var(--teal);border-color:#cddcd9;box-shadow:0 2px 5px #15354208}
.period-summary{font-size:14px;background:#edf5f2;color:#216a5f;padding:10px 12px;border-radius:7px;margin:10px 0 22px;font-variant-numeric:tabular-nums}.period-summary.invalid{background:#fff0e8;color:#933b1c}
.primary{border-radius:8px;background:var(--teal);font-size:15px;font-weight:600;min-height:49px;box-shadow:0 3px 7px #08786d12;transition:background .15s,transform .15s}.primary:hover:enabled{background:#07695f;transform:translateY(-1px)}
.fine{font-size:13px;line-height:1.8;color:var(--muted)}.quiet{font-size:15px;line-height:1.8}.saved{max-height:none;background:#fff}.saved h2{margin-bottom:6px}.save-row{padding:22px 0;gap:12px;flex-wrap:wrap;transition:background .15s}.save-row b{font-size:15px;font-weight:600}.save-row small{font-size:12px;line-height:1.7}.save-row strong{font-size:17px;font-weight:550}.save-row strong span{color:var(--muted);font-size:14px;margin-left:8px}.empty-record{padding:26px 0 16px}.empty-record p:first-child{font-weight:600}.empty-record .quiet{font-size:14px}
.how{margin-top:24px;padding-top:24px;gap:18px;font:12px "Segoe UI",sans-serif;letter-spacing:.04em}.how b{font-size:15px;font-weight:600;margin-top:10px}.saved>.fine{margin-top:20px}
details{border-color:var(--line);margin-top:22px;padding-top:16px}summary{font-size:14px;color:var(--ink);line-height:1.6;cursor:pointer}details[open]>summary{margin-bottom:16px}details>summary::marker{color:#7a939f}
.day-heading{align-items:flex-start}.day-heading h1{font-size:30px;margin:9px 0 10px}.day-heading .quiet{font-size:14px;margin:0}.progress-box{font-size:13px;min-width:190px;padding-top:12px;font-variant-numeric:tabular-nums}progress{height:6px;margin-top:10px;border:0;border-radius:3px;overflow:hidden;background:#e3eaee}progress::-webkit-progress-bar{background:#e3eaee}progress::-webkit-progress-value{background:var(--teal)}
.pill{font-size:12px;font-weight:500;padding:4px 8px;border-radius:5px;background:#e6f3ed;color:#206b55}.pill.generated{background:#eaf0f9;color:#44678c}
.score-strip{display:grid;grid-template-columns:1.25fr 1fr 1fr;padding:0;margin:23px 0 28px;border:1px solid var(--line);background:#fff;gap:0;border-radius:12px;overflow:hidden}
.score-strip>div{padding:20px 24px;min-width:0}.score-strip>div+div{border-left:1px solid var(--line)}.score-strip>div:first-child{background:#142f38}.score-strip>div:first-child>span,.score-strip>div:first-child small{color:#b4cbd2}.score-strip>div:first-child strong.gain{color:#bcf39b}.score-strip>div:first-child strong.loss{color:#ffb59e}.score-strip span{font-size:13px}.score-strip strong{font-size:29px;line-height:1.45;font-weight:550;letter-spacing:-.025em;margin-top:7px}.score-strip small{font-size:13px;margin-left:3px;letter-spacing:0}
.gain{color:#08786d}.loss{color:#b05231}.play-grid.with-weather{grid-template-columns:264px minmax(0,1fr) 310px;gap:20px}
.score-strip.with-realization{grid-template-columns:1.2fr 1fr 1fr 1fr}.daily-result .cost-pair{flex-wrap:wrap;gap:20px 28px}.daily-result .realization-note{font-size:12px;line-height:1.85;margin:18px 0 0}
.main-column{display:flex;flex-direction:column;min-width:0}.main-column .card{padding:23px;margin-bottom:20px}.main-column .curves{order:1}.main-column .briefing{order:2}.main-column .daily-result{order:0}.card-title h2{font-size:17px;margin-bottom:16px}.card-title .quiet{font-size:12px}
.legend{font-size:12px;gap:14px}.legend small{font-size:12px}.legend span:before{width:15px;height:2px}.legend-forecast:before{background:var(--blue)}.legend-submit:before{background:var(--teal)}.legend-actual:before{background:var(--orange)}
.curves svg{margin-top:20px}.curves svg text{font-size:13px}.grid-line{stroke:#e7edf1}.curves>.fine{font-size:12px;margin:14px 0 0}
.brief-grid{gap:20px;grid-template-columns:1fr 1fr}.brief-grid>div{padding-left:12px;border-left:2px solid #bdd7d2}.brief-grid span{font-size:12px}.brief-grid strong{font-size:14px;font-weight:600;line-height:1.6;margin-top:7px}.brief-grid p{font-size:13px;line-height:1.7;margin:5px 0}.brief-grid small{font-size:12px;line-height:1.6}.briefing .fine{font-size:12px;line-height:1.7;margin-top:20px}
.with-weather>.decision{padding:23px;border-top:3px solid var(--teal);position:sticky;top:20px}.decision h2{font-size:18px;line-height:1.5;margin:10px 0 21px}.presets{gap:9px}.presets button{position:relative;padding:12px 12px 12px 35px;border:1px solid var(--line);background:#fff;border-radius:8px;transition:border-color .15s,background .15s}
.presets button:before{content:"";position:absolute;left:13px;top:17px;width:10px;height:10px;border:1px solid #b6c6ce;border-radius:50%}.presets button[aria-pressed=true]{background:#edf7f3;border-color:var(--teal)}.presets button[aria-pressed=true]:before{background:var(--teal);border-color:var(--teal);box-shadow:inset 0 0 0 2px #edf7f3}.presets b{font-size:14px;font-weight:600}.presets small{font-size:12px;line-height:1.65;margin-top:4px}.presets button:hover{background:#f4f8f8}
.ratio-line{font-size:14px;margin:24px 0 10px}.ratio-line output{font-size:19px;font-weight:550;font-variant-numeric:tabular-nums}.range-labels{font-size:12px;margin-top:6px}.estimate{background:#f1f6f5;padding:15px;border:1px solid #e2edeb;border-radius:8px;margin-top:22px}.estimate>span{font-size:12px;line-height:1.7}.estimate strong{font-size:26px;line-height:1.35;font-weight:550;margin:10px 0}.estimate>small{font-size:12px;line-height:1.7;display:block}.decision>.fine{font-size:12px;line-height:1.75}.decision .primary{font-size:14px;margin-top:18px}
.journal,.data-note{padding:20px 24px;margin-top:22px;box-shadow:none}.journal>summary,.data-note>summary{font-size:14px}.data-note p{font-size:14px;line-height:1.9}.band-results>div{font-size:14px;gap:12px}.band-results b{font-weight:550;font-variant-numeric:tabular-nums}.cost-pair{gap:28px}.cost-pair b{font-size:17px;font-weight:550;margin-top:8px}.result-big{font-size:44px;font-weight:550;line-height:1.3;margin:15px 0}.daily-result{border-top:3px solid var(--teal)}
.with-weather>.weather-panel{padding:19px;background:#fff}.weather-heading h2{font-size:15px;letter-spacing:-.015em}.weather-badge{font-size:11px;padding:3px 6px;background:#edf3f5;color:#506b77}.weather-date{font-size:12px;margin-top:10px}.weather-map{height:222px;margin-top:10px}.weather-map-caption{font-size:12px;line-height:1.6;margin-bottom:23px}.weather-panel h3{font-size:14px;font-weight:600}.weather-panel h3>span{font-size:11px}.weather-day{grid-template-columns:63px minmax(0,1fr) auto;font-size:13px;gap:5px;padding:12px 0;border-color:#edf1f4}.weather-day-label b{font-size:13px;font-weight:550}.weather-day-label small{font-size:10px;display:block;margin:2px 0 0}.weather-day-label time{font-size:11px;margin-top:2px}.weather-day-source{font-size:11px;line-height:1.6;color:#71858f}.weather-condition{font-size:12px;gap:4px}.weather-icon{width:17px;height:17px}.weather-temperature{font-size:12px}.delivery-weather{background:#edf6f2;margin:0 -8px;padding:12px 8px}.weather-impact{margin-top:23px}.weather-impact li{font-size:13px;line-height:1.75;margin-top:11px}.weather-impact li>b{font-weight:600}.weather-details{margin-top:20px;padding-top:14px}.weather-details summary{font-size:12px;color:var(--muted)}.weather-details .weather-note{border:0;margin:0;padding:0}.weather-credit{font-size:11px;line-height:1.8}
body>footer{max-width:1440px;font-size:12px;line-height:1.8;color:var(--muted);padding:23px 28px;margin:0 auto 14px}
@media(max-width:1250px){.play-grid.with-weather{grid-template-columns:240px minmax(0,1fr) 285px;gap:16px}.with-weather>.weather-panel{padding:16px}.with-weather>.decision,.main-column .card{padding:20px}.brief-grid{grid-template-columns:1fr}.with-weather .card-title{align-items:flex-start}.card-title .quiet{white-space:nowrap}.legend{gap:11px}.legend small{display:none}}
@media(max-width:1100px){.play-grid.with-weather{grid-template-columns:245px minmax(0,1fr);grid-template-areas:"weather content" "weather decision";gap:20px}.with-weather>.decision{position:static}.with-weather .brief-grid{grid-template-columns:1fr 1fr}.main-column .card:last-child{margin-bottom:0}.presets{grid-template-columns:1fr 1fr}.decision .primary{max-width:100%}}
@media(max-width:760px){body>header{padding:15px 20px;min-height:70px;gap:18px;align-items:center}.brand{font-size:22px;gap:10px}.brand span{font-size:12px;padding-left:12px;margin-left:0}.brand:before{content:none}.brand>.joey-symbol{display:block;width:34px;height:34px;flex-shrink:0;color:#233738}nav{gap:18px}nav a,.text-button{font-size:13px}main,.training-open main{padding:28px 18px 36px}.lobby-grid{grid-template-columns:1fr;gap:22px}.intro{padding-bottom:22px;margin-bottom:24px}.intro h1{font-size:29px}.intro>p{font-size:14px}.card{padding:22px}.day-heading{display:block}.day-heading h1{font-size:26px}.progress-box{max-width:none;margin:14px 0 0;padding:0;font-size:12px}.score-strip{margin:20px 0 24px;grid-template-columns:1fr 1fr}.score-strip>div{padding:15px 17px}.score-strip>div:first-child{grid-column:1/-1}.score-strip>div:last-child{grid-column:auto}.score-strip>div:nth-child(2){border-left:0}.score-strip strong{font-size:25px}.score-strip span{font-size:12px}.play-grid.with-weather{grid-template-columns:minmax(0,1fr);grid-template-areas:"weather" "content" "decision";gap:20px}.with-weather>.weather-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 20px;padding:20px}.weather-heading,.weather-date,.weather-details{grid-column:1/-1}.weather-map{height:210px}.weather-map-caption{font-size:11px}.weather-overview{grid-column:1;grid-row:3}.weather-outlook{grid-column:2;grid-row:3;padding-top:15px}.weather-impact{grid-column:1/-1;margin-top:16px}.weather-day{grid-template-columns:1fr auto;gap:5px}.weather-day-label{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between}.weather-day-label small{display:inline;margin-left:4px}.weather-day-source{font-size:11px}.weather-map-caption{margin-bottom:0}.with-weather .brief-grid{grid-template-columns:1fr 1fr}.main-column .card{padding:20px}.with-weather>.decision{padding:23px}.decision .presets{grid-template-columns:1fr 1fr}.legend small{display:inline}.journal,.data-note{padding:19px 20px}.result-big{font-size:38px}.cost-pair{gap:20px}body>footer{padding:20px;font-size:12px}}
@media(max-width:440px){body>header{gap:12px}nav{margin-left:auto}nav{gap:12px}.brand span{border-left:0;padding:0;font-size:12px;margin-left:0}.brand{flex-wrap:wrap;column-gap:8px}.brand span{display:inline;margin:0}.period-inputs{grid-template-columns:1fr;gap:15px}.period-inputs label{margin-top:0}.with-weather .brief-grid{grid-template-columns:1fr}.decision .presets{grid-template-columns:1fr}.weather-map{height:180px}.with-weather>.weather-panel{gap:0 12px;padding:18px}.weather-heading h2{font-size:14px}.legend{gap:12px}.legend small{display:none}.score-strip strong{font-size:24px}.cost-pair{display:grid;grid-template-columns:1fr}.save-row strong{font-size:16px}.weather-outlook{padding-top:6px}.weather-day{padding:10px 0}.delivery-weather{padding:10px 6px;margin:0 -6px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}
@media(max-width:760px){.score-strip.with-realization{grid-template-columns:1fr 1fr}.score-strip.with-realization>div:first-child{grid-column:auto}.score-strip.with-realization>div:nth-child(2){border-left:1px solid var(--line)}.score-strip.with-realization>div:nth-child(3){border-left:0}.score-strip.with-realization>div:nth-child(n+3){border-top:1px solid var(--line)}.score-strip.with-realization>div{padding:15px 14px}.score-strip.with-realization strong{font-size:24px}}

/* 2026-09: align the working surface with the portfolio; preserve chart semantics. */
:root{--ink:#1d2736;--muted:#687484;--line:#e1e6ed;--paper:#f6f8fb}
body>header{min-height:78px;padding-top:16px;padding-bottom:16px}
h1,h2,h3{color:var(--ink);font-weight:500;letter-spacing:-.025em}
.intro h1{font-size:clamp(28px,3.1vw,36px);font-weight:500}
.intro{border-bottom:1px solid var(--line);padding-bottom:25px}
.eyebrow{color:#586d91;font-weight:500;letter-spacing:.06em}
.card{border-radius:7px;box-shadow:none;border-color:var(--line)}
.setup{border-top:1px solid var(--line)}
.setup h2,.saved h2{font-size:21px;font-weight:500}
.setup input,.setup select{background:#fff;border-color:#cfd7e2;border-radius:5px}
.period-presets{border-radius:5px;background:#f2f4f8;border-color:#e3e8ef}
.period-presets button{border-radius:3px}
.period-presets button[aria-pressed=true]{color:#324d84;border-color:#c7d1e2;box-shadow:none}
.period-summary{background:#f1f4fa;color:#4b6289;border-radius:4px}
.period-summary.invalid{background:#fff0e8;color:#933b1c}
.primary{background:#253b5c;border-radius:5px;box-shadow:none;font-weight:500}
.primary:hover:enabled{background:#344f76;transform:none}
.save-row{border-color:var(--line)}
.save-row:hover{background:#f7f9fc}
.how{border-color:var(--line);color:var(--muted)}
.day-heading h1{font-size:29px;font-weight:500}
.score-strip{border-radius:7px}
.score-strip>div:first-child{background:#1b2b43}
.score-strip>div:first-child strong.gain{color:#96d8bb}
.score-strip strong{font-weight:400}
.with-weather>.decision{border-top:2px solid #647fa8}
.with-weather>.decision,.with-weather>.weather-panel,.main-column .card{border-radius:7px}
.decision h2,.card-title h2{font-weight:500}
.presets button,.estimate{border-radius:5px}
.estimate{background:#f5f7fa;border-color:#e2e8f0}
.weather-badge{background:#f0f3f8;color:#5c6e87}
.daily-result{border-top:2px solid #647fa8}
.result-big{font-weight:400}
@media(max-width:760px){body>header{min-height:72px;padding:14px 20px}.intro h1{font-size:28px}.day-heading h1{font-size:26px}.score-strip strong{font-size:25px}}