/* The coach has its own layout track; it never floats over a highlighted control. */
.tutorial-mode{display:grid;grid-template-columns:minmax(0,1fr) 320px;height:100dvh;gap:12px;padding-right:12px}
.tutorial-mode #app{width:100%;max-width:none;margin:0;min-width:0;height:100dvh;padding-inline:12px}
#tutorial-rail{min-width:0;align-self:center;max-height:100%;z-index:30;padding:12px 0}
.tutorial-dialog{display:grid;gap:14px;background:#fffef9;border:1px solid #ccd8c6;border-radius:14px;padding:22px 18px;box-shadow:0 3px 0 #d8e1cf}
.tutorial-dialog h2{font-size:24px}.tutorial-dialog p{font-size:16px;line-height:1.6}
.tutorial-dialog h2 .tile-art{width:42px;height:34px;object-fit:contain;vertical-align:middle;margin-right:6px}
.tutorial-mode #app button[inert]{opacity:.45;cursor:default}
.tutorial-dialog .tutorial-progress,.tutorial-dialog .tutorial-scenario{font-size:14px;color:#52685b}
.tutorial-dialog .tutorial-extra{font-size:14px;border-left:3px solid #849d80;padding-left:10px}
.tutorial-hint{color:#366348}.tutorial-navigation{display:grid;grid-template-columns:auto 1fr;gap:8px}
.tutorial-dialog button{min-height:44px}.tutorial-dialog .quiet{padding:5px}
#tutorial-mask{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:20}
/* The visible frame is drawn by #tutorial-mask from the same bounds as its hole. */
.tutorial-focus{border-radius:8px}
.tutorial-goal{font-size:23px;background:#e9eedf;padding:18px;border-radius:10px;text-align:center}
.tutorial-mode .content-stage>.center{padding:4px}
.tutorial-mode .content-stage .panel{padding-inline:16px}
.tutorial-mode .content-stage .panel.split{gap:18px;grid-template-columns:minmax(0,.6fr) minmax(0,1.4fr)}
.tutorial-mode .consultant-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.tutorial-mode .consultant-row{padding:10px;gap:6px}
.tutorial-mode .consultant-row .list-thumbnail{height:48px;width:48px}
.tutorial-mode .consultant-row h3{font-size:16px}
.tutorial-mode .consultant-row p{font-size:14px}
.tutorial-mode .purchase-row{grid-template-columns:1fr auto;gap:14px;padding:16px}
.tutorial-mode .purchase-row .metrics{grid-column:1;min-width:0}
.tutorial-mode .purchase-row .purchase-action{grid-column:2}
.tutorial-mode .carbon-purchases{gap:12px}
.tutorial-mode .measure-card .list-thumbnail{width:42px;height:42px}
.tutorial-mode .measure-browser .measure-card{padding:6px 8px;gap:4px}
.tutorial-mode .measure-browser{gap:8px}
.tutorial-mode .measure-card .card-heading{flex-wrap:wrap}
.tutorial-mode .measure-card .card-heading h3{min-width:100px}
.tutorial-mode .measure-card .card-price{margin-left:auto}
.tutorial-mode .measure-card .card-tail{align-items:end}
.tutorial-mode .content-stage .screen-heading{display:block;padding:8px 16px}
.tutorial-mode .screen-heading h2{font-size:23px}
.tutorial-mode .content-stage #panel-actions{padding:8px 16px}
@media(max-width:1050px){
 .tutorial-mode{display:flex;flex-direction:column;padding:0;gap:0;height:100dvh}
 .tutorial-mode #app{flex:1;min-height:0;height:0;max-width:none;width:100%;padding:6px 10px;grid-template-rows:28px auto minmax(0,1fr);gap:5px}
 #tutorial-rail{flex-shrink:0;width:100%;max-height:none;padding:6px 10px max(8px,env(safe-area-inset-bottom));align-self:stretch}
 .tutorial-dialog{padding:10px 12px;gap:7px;border-radius:10px;grid-template-columns:2fr 1fr}
 .tutorial-dialog>p,.tutorial-dialog>h2,.tutorial-navigation,.tutorial-dialog>#tutorial-compare{grid-column:1/-1}
 .tutorial-dialog h2{font-size:20px}.tutorial-dialog p{font-size:14px;line-height:1.45}
 .tutorial-dialog .tutorial-progress{font-size:13px}.tutorial-dialog .tutorial-scenario{font-size:13px}
 .tutorial-dialog .tutorial-extra{font-size:13px;line-height:1.4}
 .tutorial-dialog button{font-size:14px;padding:6px 8px;min-height:44px}
 #tutorial-skip{grid-column:1}#tutorial-home{grid-column:2;min-height:44px}
 .tutorial-mode #app.phone .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;padding:5px 0}
 .tutorial-mode #app.phone .stats>div,.tutorial-mode #app.phone .stats>div:last-child{grid-column:auto;padding:0 7px;display:block}
 .tutorial-mode #app.phone .stats .ui-icon{display:none}
 .tutorial-mode .stats strong{font-size:17px}.tutorial-mode .stats span{font-size:12px}
 .tutorial-mode header h1{font-size:17px}
 .tutorial-mode #stage-viewport,.tutorial-mode #app.phone #stage-viewport{height:100%;min-height:0}
 .tutorial-mode #app.phone .center{height:100%;min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto}
 .tutorial-mode #app.phone .content-stage .panel{overflow:auto;display:flex;justify-content:flex-start;gap:10px;padding:8px 10px}
 .tutorial-mode #app.phone .panel>.content-unit{flex-shrink:0;min-height:auto}
 .tutorial-mode .panel .art-container{display:none}
 .tutorial-mode #app.phone .panel.split>.content-unit:has(>.art-container){display:none}
 .tutorial-mode #app.phone .consultant-grid{grid-template-columns:1fr}
 .tutorial-mode #app.phone .consultant-row{grid-template-columns:44px 1fr;padding:8px}
 .tutorial-mode #app.phone .consultant-row>button{min-height:44px}
 .tutorial-mode #app.phone .choice-list{grid-template-columns:1fr 1fr;gap:8px}
 .tutorial-mode #app.phone .choice-list button{padding:8px;min-height:60px;font-size:14px}
 .tutorial-mode #app.phone .choice-list .ui-icon{width:24px;height:24px}
 .tutorial-mode #app.phone #panel-actions{padding:6px 10px}
 .tutorial-mode .screen-heading #phase{font-size:12px}.tutorial-mode .screen-heading h2{font-size:20px}
 .tutorial-mode #app.phone .purchase-row{grid-template-columns:1fr;padding:10px;gap:8px}
 .tutorial-mode #app.phone .purchase-row .metrics,.tutorial-mode #app.phone .purchase-row .purchase-action{grid-column:auto}
 .tutorial-mode .capacity-panel>.metrics{gap:8px}.tutorial-mode .metrics strong{font-size:20px}
 .tutorial-mode .tutorial-goal{padding:12px;font-size:20px}
 .tutorial-mode .board .screen-heading{padding:4px!important}
 .tutorial-mode .board .screen-heading h2{font-size:18px}
 .tutorial-mode .board .screen-heading #phase{margin-bottom:2px}
 .tutorial-mode .board #panel-actions{padding:4px!important}
 .tutorial-mode .board .route-legend{display:none}
 .tutorial-mode .board .movement-center{gap:4px}
 .tutorial-mode .board .game-dice,.tutorial-mode .board .dice-stage{width:48px;height:48px}
 .tutorial-mode .board .route-goal{font-size:12px}
 .tutorial-mode .board .actions{gap:4px}
 .tutorial-mode .board .actions button{min-height:44px;padding:6px 8px;font-size:14px}
}
@media(max-width:1050px) and (orientation:landscape){
 .tutorial-mode{display:grid;grid-template-columns:minmax(0,1fr) 310px;height:auto;min-height:100dvh;align-items:start}
 .tutorial-mode #app{height:auto;min-height:500px;grid-template-rows:28px auto auto}
 .tutorial-mode #app.phone #stage-viewport{height:auto}
 .tutorial-mode #app.phone .content-stage .panel{overflow:visible}
 .tutorial-mode #app.phone .center{height:auto;min-height:380px;grid-template-rows:auto auto auto}
 .tutorial-mode #app.phone #stage-viewport.route-stage{height:400px}
 .tutorial-mode #app.phone .board .center{height:100%;min-height:0;grid-template-rows:auto minmax(0,1fr) auto}
 #tutorial-rail{padding-top:8px}
}