/* Shared readable scale and six-item catalogs. Each region owns its layout track. */
:root{font-size:18px}
p{line-height:1.6}h2{font-size:28px;line-height:1.4}h3{font-size:19px;line-height:1.5}
button,.button-link,select{font-size:17px;min-height:44px;padding:9px 16px}
button:active:not(:disabled),.button-link:active{background:#dce6d7;transform:translateY(1px)}
button.primary:active:not(:disabled){background:#183e3c}
button:focus-visible,a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
#app{max-width:1560px;padding:12px 22px 18px;gap:10px;grid-template-rows:36px auto minmax(0,1fr)}
.stats{padding:10px 0}.stats strong{font-size:27px}.stats span{font-size:15px}
.center,.phone .content-stage>.center,#board.board>.center{grid-template-rows:auto minmax(0,1fr) auto}
#screen-footer{display:flex;align-items:center;border-top:1px solid var(--line);min-width:0}
#screen-footer #panel-actions{flex:1;border-top:0;min-width:0}
.content-stage>.center{padding:4px}
.content-stage .screen-heading{padding:16px 24px 10px;display:flex;align-items:baseline;gap:20px}
.content-stage .screen-heading h2{font-size:28px}.content-stage #phase{font-size:14px}
.content-stage .panel,.content-stage .panel.catalog-panel{padding:12px 24px 18px}
.content-stage #panel-actions{padding:12px 24px;gap:8px}
.content-stage .panel.split{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:32px}
.content-stage .event-illustration{max-width:100%;max-height:520px}
.detail-layout .art-container,.capacity-layout .art-container{max-height:none}
.detail-layout .event-illustration,.capacity-layout .event-illustration{max-width:460px;max-height:440px}
.detail-copy{gap:18px;line-height:1.6}
.metrics{gap:22px;padding:12px 0}.metrics span{font-size:16px}.metrics strong{font-size:30px}
.requirements li{font-size:18px;line-height:1.5;padding:10px 0}
.order-conditions li span:not(.condition-mark){font-size:16px}.order-adjustments{font-size:16px}
.choice-list{gap:18px}.choice-list button{font-size:20px;padding:20px;gap:18px;min-height:100px}.choice-list .ui-icon{width:72px;height:72px}
.result-number{font-size:46px}.settlement-copy{display:grid;gap:14px;max-width:850px}.settlement-copy .result-number{margin:0}
/* Settlement is read-only: the amount and illustration share separate columns. */
.content-stage .panel.settlement-layout{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px}
.settlement-layout .settlement-copy{gap:20px;padding:8px 0}
.settlement-layout .result-number{font-size:clamp(40px,4.2vw,64px);line-height:1.35;font-variant-numeric:tabular-nums}
.settlement-layout .result-number[data-direction="negative"]{color:var(--risk)}
.settlement-layout .result-number[data-direction="zero"]{color:var(--ink)}
.settlement-basis{font-size:16px;color:var(--muted)}
.settlement-layout .art-container{padding:0;width:100%;aspect-ratio:5/4;max-height:480px;margin:auto}
.settlement-layout .event-illustration{width:100%;height:100%;aspect-ratio:5/4;object-fit:contain;box-shadow:none;filter:none}
.welcome-view .screen-heading h2{font-size:26px}
.welcome-view .panel.split{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.welcome-view .event-illustration{max-height:100%}
.welcome-copy p{font-size:23px;line-height:1.7}.welcome-copy{gap:14px}
.welcome-view #panel-actions{padding-block:18px}.welcome-view .actions{gap:16px}
.welcome-view .actions button{height:60px;font-size:21px;min-width:190px}
.welcome-view .actions button.primary{min-width:240px;font-size:23px}
#list-pagination{display:flex;justify-content:center;align-items:center;gap:20px;padding:6px 24px 12px;min-height:62px}
#list-pagination span{min-width:55px;text-align:center;font-size:16px;font-variant-numeric:tabular-nums}
#list-pagination button{min-width:105px}
.consultant-grid,.catalog-grid,.measure-browser .measures-grid,.risk-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.consultant-row,.catalog-card,.measure-browser .measure-card{padding:18px;gap:12px;border-radius:12px;align-content:start}
.consultant-row{grid-template-columns:80px minmax(0,1fr)}
.consultant-row>.list-thumbnail{width:80px;height:80px}
.consultant-row h3{font-size:18px;display:block;line-height:1.5}
.consultant-row p{font-size:15px;line-height:1.5;margin-top:5px}
.consultant-row .service-price{display:block;margin-left:0;font-size:18px}
.consultant-row>button{grid-column:1/-1;justify-self:stretch;min-height:44px;margin-top:auto}
.consultant-row{height:100%;align-content:stretch}
.catalog-card h3,.card-heading h3{font-size:18px;line-height:1.5}
.catalog-card p{font-size:16px;line-height:1.5}
.card-price{font-size:17px}.card-tail{font-size:14px;line-height:1.5;gap:10px}
.measure-card{grid-template-columns:80px minmax(0,1fr)}
.measure-card>.list-thumbnail{width:80px;height:80px;grid-row:1;align-self:start}
.measure-card>.card-heading{display:flex;flex-wrap:wrap;align-content:start;gap:4px 8px}
.measure-card .card-heading h3{flex-basis:calc(100% - 48px)}
.measure-card .card-price{flex-basis:100%;margin:0}
.measure-card>p,.measure-card>.card-tail{grid-column:1/-1}
.measure-browser .card-tail button{min-height:44px;padding:7px 14px}
.category-dot{font-size:14px;line-height:22px;padding:0 5px}
.measure-browser{gap:14px}.measure-category-tabs button{min-height:44px;font-size:17px}
.report-card{grid-template-columns:80px minmax(0,1fr)}.report-card>.list-thumbnail{width:80px;height:80px}
.risk-grid .catalog-card{padding:20px;gap:10px}.marketing-grid .catalog-card{padding:20px}
.marketing-grid button{margin-top:auto;align-self:stretch}
.purchase-row{padding:24px;gap:18px;grid-template-columns:minmax(200px,1fr) auto minmax(230px,1fr) auto}
.purchase-row .metrics strong{font-size:26px}.quantity-stepper button{min-width:48px;min-height:48px}
.review-columns ul,.review-tags span{font-size:16px;line-height:1.6}.review-tags{gap:8px}.review-tags span{padding:6px 10px}
.finish-copy{gap:20px;font-size:18px}.finish-copy .metrics strong{font-size:28px}
.carbon-chart{width:100%;display:grid;gap:14px}.chart-caption{display:flex;gap:16px;justify-content:space-between;align-items:center}
.chart-caption p,.chart-basis{font-size:14px;color:var(--muted)}.chart-caption strong{font-size:23px;white-space:nowrap}
.chart-plot{position:relative;width:100%;height:clamp(230px,34dvh,390px);min-width:0}
.chart-plot svg{width:100%;height:100%;display:block;overflow:visible}.chart-plot text{font:14px "Microsoft JhengHei",sans-serif;fill:var(--muted)}
.grid-line{stroke:#dce1d5;stroke-width:1}.goal-line{stroke:#a34f5e;stroke-width:1;stroke-dasharray:5 5}.goal-text{fill:#a34f5e!important}
.carbon-line{stroke:var(--ink);stroke-width:3;fill:none;vector-effect:non-scaling-stroke}.carbon-dot{fill:var(--ink)}
.chart-point{position:absolute;translate:-50% -50%;border:0;width:44px;height:44px;min-height:44px;padding:0;background:transparent;border-radius:50%}
.chart-point:hover,.chart-point:active{background:#244e4d12;transform:none}.chart-point[aria-pressed="true"]{outline:2px solid var(--ink);outline-offset:-14px}
.chart-detail{border:1px solid var(--line);background:#f5f6ee;border-radius:10px;padding:16px 20px;min-height:110px;display:grid;align-content:start;gap:8px}
.chart-detail-values{display:flex;gap:12px 24px;flex-wrap:wrap;font-size:18px}.chart-detail p{font-size:15px;line-height:1.6}
.path-empty{padding:32px;border:1px solid var(--line);border-radius:12px;line-height:1.6}
/* A narrower game area shares room with the coach, retaining the same catalog. */
.tutorial-mode .consultant-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.tutorial-mode .consultant-row,.tutorial-mode .measure-browser .measure-card{padding:12px;gap:8px}
.tutorial-mode .consultant-row{grid-template-columns:64px minmax(0,1fr)}
.tutorial-mode .consultant-row .list-thumbnail,.tutorial-mode .measure-card .list-thumbnail{width:64px;height:64px}
.tutorial-mode .measure-card{grid-template-columns:64px minmax(0,1fr)}
.tutorial-mode .consultant-row h3,.tutorial-mode .card-heading h3{font-size:16px}
.tutorial-mode .consultant-row p,.tutorial-mode .catalog-card p{font-size:14px}
.tutorial-mode .consultant-row button,.tutorial-mode .card-tail button{font-size:15px}
.tutorial-mode .choice-list button{min-height:84px;padding:16px;font-size:18px}
.tutorial-mode .content-stage .screen-heading{padding:12px 16px 8px}
.tutorial-mode .content-stage .panel{padding:8px 16px 12px}
.tutorial-mode .content-stage #panel-actions{padding:8px 16px}
.tutorial-mode #list-pagination{padding:4px 16px 8px;min-height:56px}
@media(min-width:1051px) and (max-height:820px){
 #app{padding:8px 18px 12px;gap:7px}.stats{padding:7px 0}.stats strong{font-size:25px}
 .content-stage .screen-heading{padding:10px 20px 6px}.content-stage .panel,.content-stage .panel.catalog-panel{padding:8px 20px 12px}
 .content-stage #panel-actions{padding:8px 20px}.consultant-row,.catalog-card,.measure-browser .measure-card{padding:16px;gap:9px}
 .measure-browser{gap:10px}.catalog-grid,.consultant-grid,.measure-browser .measures-grid{gap:12px}
 .chart-plot{height:250px}.chart-detail{min-height:105px}
}
/* Short laptop viewports still reserve a full, separate footer track.
   Reduce thumbnail/spacing first; keep readable text and 44px controls. */
@media(min-width:760px) and (max-width:1279px), (min-width:1051px) and (max-height:760px){
 .measure-browser .measure-card{padding:12px;gap:7px;grid-template-columns:64px minmax(0,1fr)}
 .measure-browser .measure-card>.list-thumbnail{width:64px;height:64px}
}
@media(max-width:759px), (max-height:500px) and (max-width:999px){
 :root{font-size:16px}.phone#app{padding:8px 12px max(12px,env(safe-area-inset-bottom));gap:8px}
 .phone .stats span{font-size:14px}.phone .stats strong{font-size:21px}
 .phone .content-stage .screen-heading{display:block;padding:16px 16px 8px}.phone .content-stage .screen-heading h2{font-size:24px}
 .phone .content-stage .panel,.phone .content-stage .panel.catalog-panel{padding:12px 16px 18px;gap:18px}
 .phone .content-stage #panel-actions{padding:12px 16px}.phone .actions{gap:10px}
 .phone .actions button,.phone .actions .button-link{min-height:48px;font-size:16px;padding:10px 14px}
 .phone .art-container,.phone .detail-layout .art-container,.phone .capacity-layout .art-container{height:190px;max-height:none}
 .phone .panel.split>.content-unit:has(>.art-container){flex-basis:190px}
 .phone .center[data-screen="ready"] .art-container{height:190px}.phone .center[data-screen="ready"] .panel>.content-unit:has(>.art-container){flex-basis:190px}
 .phone .choice-list button{font-size:16px;padding:14px 10px;gap:8px;min-height:100px}.phone .choice-list .ui-icon{width:52px;height:52px}
 .phone .consultant-grid,.phone .catalog-grid,.phone .measure-browser .measures-grid{grid-template-columns:minmax(0,1fr);gap:16px}
 .phone .consultant-row,.phone .catalog-card,.phone .measure-browser .measure-card{padding:16px;gap:12px}
 .phone .consultant-row,.phone .measure-card{grid-template-columns:72px minmax(0,1fr)}
 .phone .consultant-row>.list-thumbnail,.phone .measure-card>.list-thumbnail{width:72px;height:72px;grid-row:1}
 .phone .consultant-row h3,.phone .catalog-card h3{font-size:18px;line-height:1.5}
 .phone .consultant-row p,.phone .catalog-card p{font-size:16px;line-height:1.6}
 .phone .card-tail,.phone .status,.phone .service-needs{font-size:14px;line-height:1.6}
 .phone .measure-card>p,.phone .measure-card>.card-tail{grid-column:1/-1}
 .phone .measure-card .card-price{font-size:17px;text-align:left}
 .phone .measure-category-tabs{gap:8px}.phone .measure-category-tabs button{padding:10px 8px}
 .phone .metrics strong{font-size:26px}.phone .metrics span{font-size:16px}
 .phone .purchase-row{padding:18px;grid-template-columns:1fr;gap:16px}.phone .purchase-row .metrics{flex-wrap:wrap}
 .phone .requirements li{font-size:17px}.phone .order-conditions li span:not(.condition-mark){font-size:15px}
 .phone #screen-footer{display:block}
 .phone.welcome-view .center{grid-template-rows:auto minmax(0,1fr) auto}
 .phone.welcome-view .panel.split{padding:8px 16px;grid-template-rows:minmax(180px,1fr) auto}
 .phone.welcome-view .screen-heading h2{font-size:22px}.phone.welcome-view .welcome-copy p{font-size:18px}
 .phone.welcome-view .actions{display:grid;grid-template-columns:1fr;width:100%;gap:10px}
 .phone.welcome-view .actions button{min-width:0;width:100%;height:56px;font-size:19px}
 .phone.welcome-view .actions button.primary{order:-1;font-size:22px;min-width:0}
 .phone #list-pagination{padding:8px 16px;gap:14px;min-height:64px}.phone #list-pagination button{min-width:88px}
 .phone .finish-copy{font-size:16px;gap:16px}.phone .finish-copy .metrics strong{font-size:22px}
 .phone .content-stage .panel.finish-layout>.content-unit:has(>.art-container){height:auto}
 .phone .content-stage .panel.finish-layout .art-container{height:auto;max-height:none;aspect-ratio:5/4}
 .phone .content-stage .panel.finish-layout .event-illustration{height:auto;aspect-ratio:5/4}
 .phone .settlement-layout .settlement-copy{gap:12px;padding:0}
 .phone .settlement-layout .result-number{font-size:42px}
 .phone .settlement-layout .settlement-basis{font-size:14px}
 .phone .panel.settlement-layout>.content-unit:has(>.art-container){flex:0 0 auto}
 .phone .settlement-layout .art-container{height:auto;max-height:none;aspect-ratio:5/4}
 .phone .settlement-layout .event-illustration{height:auto;aspect-ratio:5/4}
 .phone .chart-caption{display:grid;gap:8px}.phone .chart-caption strong{font-size:22px}
 .phone .chart-plot{height:280px}.phone .chart-plot svg{overflow:visible}
 .phone .chart-plot text{font-size:14px}
 .phone .chart-detail{padding:16px;min-height:150px}.phone .chart-detail-values{gap:8px 14px;font-size:16px}
 .phone .chart-basis{font-size:14px;line-height:1.6}
 .phone .content-stage .panel:has(.carbon-chart){overflow-x:visible}
 .tutorial-mode #app.phone .center{grid-template-rows:auto minmax(0,1fr) auto}
 .tutorial-mode #app.phone .content-stage .screen-heading{padding:8px 12px 4px}
 .tutorial-mode #app.phone .consultant-row{grid-template-columns:64px minmax(0,1fr)}
 .tutorial-mode #app.phone .stats strong{font-size:17px}.tutorial-mode #app.phone .stats span{font-size:12px}
 .tutorial-mode #app.phone .panel.split>.content-unit:has(>.art-container){display:none}
 .tutorial-mode #app.phone .choice-list button{min-height:80px;font-size:15px;padding:8px}
 .tutorial-mode #app.phone .choice-list .ui-icon{width:32px;height:32px}
 .tutorial-mode #app.phone #panel-actions{padding:6px 10px}.tutorial-mode #list-pagination{min-height:52px;padding:4px 10px}
 .tutorial-mode #list-pagination button{font-size:14px;min-height:44px}
}

/* Shared goal legend sits below the right-hand end label (plot inset: 24px). */
.chart-plot .goal-text{display:none}
.chart-goal-legend{display:block;color:var(--risk);font-size:14px;line-height:1.5;text-align:right;padding-right:24px;margin:0}
.chart-goal-legend::before{content:"";display:inline-block;width:24px;border-top:1px dashed var(--risk);margin-right:8px;vertical-align:middle}