/* The desk: every line's useful act. A framed view of the model; the numbers and the list of places beside it; the form and the draft in a paper column that scrolls past. */

/* Act two: the causal ladder */
.flow-step:nth-child(1){--at:.06}.flow-step:nth-child(2){--at:.24}.flow-step:nth-child(3){--at:.46}.flow-step:nth-child(4){--at:.62}.flow-step:nth-child(5){--at:.8}
.flow-signal{font-family:var(--serif);font-size:clamp(22px,2vw,30px)!important;line-height:1.2!important;color:var(--ink)}
.causes{display:grid;gap:9px;margin-top:6px}
.causes li{display:grid;grid-template-columns:minmax(92px,128px) minmax(0,1fr);gap:12px;font-size:clamp(15.5px,1.2vw,18px);line-height:1.4;padding:9px 12px 10px;background:var(--paper) url('assets/paper.png');box-shadow:0 1px 1px rgba(40,24,8,.26),0 6px 8px -5px rgba(40,24,8,.45)}
.causes b{font-weight:600;color:var(--clay-d)}
.choices{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px}
.choices li{font-size:14.5px;line-height:1.3;padding:7px 11px 8px;border:1px solid rgba(23,53,47,.34);border-radius:2px;background:rgba(248,242,228,.42)}
.symptom-index{max-width:1240px;margin:clamp(24px,5svh,48px) auto 0;border-top:1px solid rgba(23,53,47,.32);padding-top:10px}
.symptom-index summary{cursor:pointer;min-height:44px;display:flex;align-items:center;gap:10px;font-weight:600;font-size:16px}
.symptom-index summary::after{content:'+';margin-left:auto;font:400 22px var(--serif)}.symptom-index[open] summary::after{content:'−'}
.symptom-index dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin:10px 0 0}
.symptom-index dl div{background:var(--paper) url('assets/paper.png');padding:14px 16px;box-shadow:0 1px 1px rgba(40,24,8,.2)}
.symptom-index dt{font-family:var(--serif);font-size:19px;line-height:1.2;margin-bottom:6px}.symptom-index dd{margin:0;font-size:14.5px;line-height:1.48;color:var(--ink-2)}

/* The bench */
.maq-grid{grid-template-columns:minmax(0,1.32fr) minmax(330px,.92fr);align-items:start}
.bench-right{display:grid;gap:clamp(14px,2vw,24px);min-width:0}
.maq{position:relative;width:100%;aspect-ratio:16/10;max-height:calc(100svh - 318px);min-height:300px;overflow:hidden;background:#5b4630;box-shadow:0 0 0 7px var(--paper),0 0 0 8px rgba(60,40,18,.28),0 24px 34px -18px rgba(20,12,4,.8);isolation:isolate}
.maq-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab}
.maq.grabbing .maq-canvas{cursor:grabbing}
.maq-iso{position:absolute;inset:0;width:100%;height:100%;display:block;background:#6a5237}
.maq-iso[hidden],.maq-canvas[hidden]{display:none}
.maq-pins{position:absolute;inset:0;pointer-events:none;z-index:2}
.maq-pin{position:absolute;left:-15px;top:-15px;width:30px;height:30px;padding:0;border:0;border-radius:50%;background:var(--paper);color:var(--ink);font:700 13px/30px var(--mono);text-align:center;cursor:pointer;pointer-events:auto;box-shadow:0 1px 2px rgba(20,12,4,.6),0 4px 8px rgba(20,12,4,.35);will-change:transform}
.maq-pin[hidden]{display:none}
.maq-pin[data-tone=hot]{background:#a42e1b;color:#fff8ec}.maq-pin[data-tone=warm]{background:#e0a144;color:#22180a}
.maq-pin.on{box-shadow:0 0 0 3px #fff8ec,0 0 0 5px #a42e1b,0 6px 10px rgba(20,12,4,.45)}
.maq-turns{position:absolute;right:10px;bottom:10px;display:flex;gap:6px;z-index:3}
.maq-turn{width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(248,242,228,.92);color:var(--ink);font-size:20px;line-height:1;cursor:pointer;box-shadow:0 1px 2px rgba(20,12,4,.5)}
.maq-turn:hover{background:#fff}.maq-turn[hidden]{display:none}
.maq-hint{position:absolute;left:12px;bottom:14px;margin:0;z-index:3;font-size:12.5px;line-height:1.3;color:#fbf4e3;text-shadow:0 1px 4px rgba(20,12,4,.95);pointer-events:none;transition:opacity .4s}
.maq.turned .maq-hint,.maq.no-gl .maq-hint{opacity:0}
.maq-grid .bench-live{display:block;margin:18px 0 0;font-family:var(--serif);font-size:clamp(21px,2vw,30px);line-height:1.14;letter-spacing:-.012em;color:#fff6e4;text-shadow:0 1px 14px rgba(20,12,4,.65);text-wrap:balance}
.maq-read{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:1px;margin:10px 0 0;background:rgba(23,53,47,.2);box-shadow:var(--shadow)}
.maq-read div{background:var(--paper) url('assets/paper.png');padding:9px 12px 10px;min-width:0}
.maq-read dt{font-size:12px;line-height:1.28;color:var(--ink-2)}
.maq-read dd{margin:3px 0 0;font:600 clamp(14.5px,1.2vw,17px)/1.2 var(--mono);color:var(--ink);overflow-wrap:anywhere}
.maq-read [data-tone=down] dd{color:#a42e1b}.maq-read [data-tone=up] dd{color:#2e5742}
.maq-stations{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0 0}
.maq-st{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:4px 11px 5px 6px;border:0;border-radius:2px;background:rgba(248,242,228,.9);color:var(--ink);font-size:13.5px;line-height:1.15;cursor:pointer;text-align:left}
.maq-st b{width:22px;height:22px;flex:none;border-radius:50%;background:var(--ink);color:var(--paper);font:700 11.5px/22px var(--mono);text-align:center}
.maq-st[data-tone=hot] b{background:#a42e1b}.maq-st[data-tone=warm] b{background:#c88a2c}
.maq-st.on{background:#fff8ec;box-shadow:inset 0 0 0 2px #a42e1b}
.maq-st:focus-visible,.maq-turn:focus-visible,.maq-pin:focus-visible{outline:3px solid #fbf4e3;outline-offset:2px}
.maq-caption{margin:8px 0 0;padding:10px 14px 11px;background:rgba(20,12,4,.58);color:#fbf4e3;font-size:14.5px;line-height:1.42;min-height:3.8em}

/* The form */
.ctl-line{font-family:var(--serif);font-size:clamp(17px,1.35vw,20px);line-height:1.3;color:var(--ink)}
.ctl-note{font-size:13.5px;line-height:1.42;color:var(--ink-2);margin:-4px 0 0}
[data-panel]{display:grid;gap:14px}
.field-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:12px 16px;align-items:end}
.field-grid .stepper label,.more-grid .stepper label{font-size:13px;font-weight:500;line-height:1.26}
.bench-controls .stepper input{width:auto;flex:1 1 60px;min-width:58px;max-width:128px;font-size:15px}
.bench-controls .st-unit{white-space:nowrap}
.more-block{border-top:1px solid rgba(23,53,47,.22);padding-top:6px}
.more-block summary{cursor:pointer;min-height:40px;display:flex;align-items:center;font-size:14px;font-weight:600}
.more-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:12px 16px;align-items:end;padding:8px 0 4px}
.check-col{display:grid;gap:6px}
.decision-fields{display:grid;gap:12px;border-top:1px solid rgba(23,53,47,.22);padding-top:12px}
.mode-seg .seg-opt span{font-weight:500}
.ov-row{border:0;border-top:1px solid rgba(23,53,47,.18);padding:10px 0 0;margin:0;display:grid;gap:8px}
.ov-row legend{padding:0;font-size:14.5px;font-weight:600}
.station-list{display:grid;gap:6px}
.station-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px;background:rgba(251,248,238,.6);box-shadow:inset 0 0 0 1px rgba(23,53,47,.16)}
.station-row[data-limit=true]{box-shadow:inset 0 0 0 2px #a42e1b;background:#fff4e6}
.station-name{min-width:0}.station-name b{display:block;font-size:14.5px;font-weight:600}.station-name small{display:block;font-size:12.5px;color:var(--ink-2)}
.station-btns{display:flex;align-items:center;gap:0;flex:none}.station-btns .st-btn{width:40px;min-height:40px}
.station-btns output{width:34px;text-align:center;font:600 15px var(--mono)}
.carried{font-size:14px;line-height:1.42;padding:9px 12px;background:#fff4e6;box-shadow:inset 3px 0 0 #a42e1b}
.carried .text-link{margin-left:4px}
.ticket{display:grid;gap:0;margin:0;padding:10px 12px;background:#fff8ec;box-shadow:inset 0 3px 0 #a42e1b,0 1px 2px rgba(40,24,8,.28)}
.ticket>div{display:grid;grid-template-columns:minmax(110px,.9fr) minmax(0,1.1fr);gap:10px;padding:5px 0;border-top:1px solid rgba(23,53,47,.14);font-size:13.5px;line-height:1.35}
.ticket>div:first-child{border-top:0}
.ticket dt{color:var(--ink-2)}.ticket dd{margin:0;font-family:var(--mono);font-weight:600;font-size:13.5px;overflow-wrap:anywhere}
.ticket .ticket-from{display:block}.ticket .ticket-from dt{font-family:var(--serif);font-size:18px;color:var(--ink);line-height:1.2}.ticket .ticket-from dd{font-family:var(--sans);font-weight:400;font-size:14px;margin-top:3px;color:var(--ink-2)}
.go-line{justify-content:space-between;width:100%}.go-line b{font-weight:400}
.carry-link{color:#fbf4e3;border-color:rgba(251,244,227,.5);background:rgba(20,12,4,.2)}.carry-link:hover{background:rgba(20,12,4,.42)}

/* One night, one click behind the film */
.night-wrap{grid-column:1/-1;border-top:1px solid rgba(23,53,47,.3);padding-top:10px;margin-top:8px}
.night-wrap>summary{cursor:pointer;min-height:48px;display:flex;align-items:center;font:400 clamp(20px,1.9vw,27px)/1.2 var(--serif)}
.night-wrap>summary::after{content:'+';margin-left:auto;font-size:26px}.night-wrap[open]>summary::after{content:'−'}
.night-wrap>.lede{margin:6px 0 16px}
.night-wrap .bench-grid{max-width:none}

/* Home: the desk follows the walk */
.home-bench{box-shadow:0 -22px 40px -18px rgba(30,18,6,.55)}
.begin-after{max-width:1240px;margin:clamp(22px,4svh,40px) auto 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;color:#f6ecd6}
.begin-after .ghost{color:#fbf4e3;border-color:rgba(251,244,227,.5);background:rgba(20,12,4,.2)}
.begin-line{font-size:15.5px;line-height:1.4}
.begin-after .responsibility-note{width:100%;margin-top:6px;max-width:44em;color:#ecdfc6}

/* Portrait: the picture stays in sight while the form scrolls under it. Equal capability, different arrangement. */
@media (max-aspect-ratio:1/1),(max-width:900px){
 .maq-grid{grid-template-columns:minmax(0,1fr)}
 .maq-grid .bench-stage{display:contents}
 .maq{position:sticky;top:44px;z-index:6;aspect-ratio:auto;height:clamp(230px,38svh,380px);max-height:none;min-height:0;box-shadow:0 0 0 4px var(--paper),0 14px 18px -10px rgba(20,12,4,.8)}
 .maq-grid .bench-live{order:0;position:static;background:none;padding:0;box-shadow:none;margin-top:12px;font-size:20px}
 .maq-read{margin-top:10px;grid-template-columns:repeat(auto-fit,minmax(128px,1fr))}
 .maq-stations{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;scrollbar-width:thin}
 .maq-st{flex:none}
 .maq-caption{min-height:0}
 .field-grid,.more-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
 .causes li{grid-template-columns:minmax(0,1fr);gap:3px}
 .hotel-film .night-wrap{grid-column:auto}
}
@media (min-aspect-ratio:1/1) and (min-width:901px){.maq-grid .bench-stage{position:sticky;top:60px;z-index:1}}
@media (min-aspect-ratio:1/1) and (max-height:600px){.maq{min-height:220px;max-height:calc(100svh - 240px)}.maq-caption{min-height:0;padding:6px 10px}.maq-read{display:none}}
.reduced-motion .maq-hint{transition:none}
@media print{.maq,.maq-read,.maq-stations,.maq-caption{display:none!important}}