/* Two Worlds: landing photos, a shorter prompt page, and a 3D-only lab (Aadit's 17 Oct pass).
   Photos: see assets/CREDITS.md. */

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.brand-word{letter-spacing:-.6px;word-spacing:2px}

/* ---------- landing: the drawn city under drawn clouds that part as you scroll (no photos) ---------- */
.intro-message h1,.intro-message p{text-shadow:0 2px 24px #07131caa}
.scene-credit{display:none!important}
body.demo-view #agentsNote{display:none!important}

/* ---------- prompt page: the question, one Run button and the two prepared questions ---------- */
.composer-heading h2{margin-bottom:26px}


/* ---------- lab (demo view): the 3D view, then the decision brief ---------- */
body.demo-view .lab-status,body.demo-view .lab-scenarios{display:none!important}
body.demo-view .lab-shell{padding-top:76px;padding-bottom:16px;min-height:0}
body.demo-view .lab-layout{margin-top:10px}
body.demo-view .simulation-viewport,body.demo-view .simulation-viewport.has-mapped-world{height:calc(100vh - 300px);min-height:460px}
body.demo-view .view3d-toggle{display:none!important}                         /* 3D only */
body.demo-view .simulation-viewport.is-3d .motion-button{display:none!important}  /* the 3D view has its own play button */
body.demo-view .timeline-bar{display:none!important}                          /* one timeline: the 3D view's */
body.demo-view #peopleStrip,body.demo-view #labCredit,body.demo-view #runLedger,body.demo-view #ttcWorkbench,body.demo-view #bikeLab,
body.demo-view #impact,body.demo-view #personaLab,body.demo-view #about{display:none!important}
@media(max-width:760px){body.demo-view .simulation-viewport,body.demo-view .simulation-viewport.has-mapped-world{height:72vh;min-height:420px}}

/* ---------- header: no separator line, no "Enter the city" ---------- */
.site-header{border-bottom:0!important}
#enterButton{display:none!important}

/* ---------- decision brief under the 3D view. Figures come from two-world.js. ---------- */
.tw-brief{display:none}
body.demo-view .tw-brief:not([hidden]){display:block;margin-top:28px;padding-top:8px}
.tw-brief-head h2{margin:8px 0 8px;font:500 clamp(28px,3vw,44px)/1.05 'Space Grotesk',sans-serif;letter-spacing:-.045em}
.tw-kicker,.tw-panel header span,.tw-graph header span,.tw-node span,.tw-ledgers span,.tw-hero span,.tw-decide span,.tw-limits span,.tw-context span{color:var(--mint);font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase}
.tw-scope,.tw-panel-note,.tw-chart-note,.tw-lit{color:#8eabae;font-size:12px;line-height:1.5}
.tw-scope{margin:0}
.tw-hero{display:grid;grid-template-columns:minmax(240px,.9fr) minmax(0,1.4fr);gap:18px;align-items:end;margin:22px 0 14px;padding:22px 24px;border:1px solid #a8f4d155;border-radius:16px;background:radial-gradient(circle at 0% 0%,#1d4a44aa,transparent 55%),#102830}
.tw-hero strong{display:block;margin:6px 0 4px;font:500 clamp(34px,4vw,58px)/1 'Space Grotesk',sans-serif;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.tw-hero em{color:#e4f692;font-style:normal;font-weight:700;font-size:14px}
.tw-hero p{margin:0;color:#d5e4e2;font-size:16px;line-height:1.45}
.tw-ledgers,.tw-split,.tw-charts,.tw-flow,.tw-decide{display:grid;gap:12px}
.tw-ledgers{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:12px}
.tw-ledgers article,.tw-panel,.tw-chart,.tw-node,.tw-decide section{border:1px solid #a8f4d124;border-radius:14px;background:#102d34e6}
.tw-ledgers article{padding:16px 18px}
.tw-ledgers strong,.tw-node b{display:block;margin:8px 0 6px;font:500 22px/1.15 'Space Grotesk',sans-serif;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tw-ledgers p,.tw-node p{margin:0;color:#b7cdcb;font-size:12px;line-height:1.45}
.tw-split{grid-template-columns:1fr 1fr;margin-top:12px}
.tw-panel{padding:16px 18px 14px}
.tw-panel h3,.tw-graph h3{margin:4px 0 12px;font:500 22px/1.1 'Space Grotesk',sans-serif;letter-spacing:-.03em}
.tw-legend{margin:-4px 0 12px;color:#9fb4b6;font-size:11px;font-weight:700;letter-spacing:.4px}
.tw-legend i{display:inline-block;width:18px;height:3px;margin:0 4px 2px 8px;border-radius:2px;vertical-align:middle}
.tw-legend i.is-base{background:#ff987e}
.tw-legend i.is-next{background:#a8f4d1}
.tw-bar{display:grid;grid-template-columns:minmax(108px,150px) 1fr auto;gap:10px;align-items:center;margin:7px 0}
.tw-bar-label{color:#d5e3e1;font-size:12px}
.tw-bar b{font-weight:600;font-variant-numeric:tabular-nums;font-size:12px;color:#e7f2ef}
.tw-bar-track{position:relative;height:14px}
.tw-bar-track i{position:absolute;left:0;height:5px;border-radius:3px;min-width:2px}
.tw-bar-base{top:1px;background:#ff987e}
.tw-bar-next{top:8px;background:#a8f4d1}
.tw-charts{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:12px}
.tw-chart{margin:0;padding:12px 12px 6px}
.tw-chart figcaption{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.tw-chart figcaption span{font-weight:700;font-size:13px}
.tw-chart figcaption small{color:#8eabae;font-size:10px}
.tw-chart svg{display:block;width:100%;height:auto;margin-top:4px}
.tw-chart svg text{font-family:'DM Sans',sans-serif}
.tw-chart-note{margin:8px 2px 0}
.tw-graph{margin-top:22px}
.tw-flow{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:4px}
.tw-node{padding:14px 16px}
.tw-node strong{display:block;margin-top:6px;font-size:13px;color:#d7e7e4}
.tw-limits{display:flex;gap:18px;align-items:center;margin-top:16px;padding:14px 16px;border:1px solid #ff987e55;border-radius:14px;background:#24181688}
.tw-limits strong{display:block;margin-top:3px;font:600 16px 'Space Grotesk',sans-serif}
.tw-limits ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.tw-limits li{padding:6px 10px;border:1px solid #ff987e55;border-radius:999px;color:#f4d6cc;font-size:12px;font-weight:600}
.tw-decide{grid-template-columns:1.3fr .9fr .9fr;margin-top:12px}
.tw-decide section{padding:16px 18px}
.tw-decide p,.tw-decide li{color:#d5e3e0;font-size:13px;line-height:1.5}
.tw-decide ul,.tw-decide ol{margin:8px 0 0;padding-left:18px}
.tw-decide li+li{margin-top:6px}
.tw-context{margin-top:12px;padding:12px 14px;border-left:3px solid #8eabae;color:#c5d8d6}
.tw-context p{margin:4px 0 0;font-size:13px;line-height:1.45}
.tw-lit{margin:12px 2px 0}
@media(max-width:980px){
  .tw-hero,.tw-ledgers,.tw-split,.tw-charts,.tw-flow,.tw-decide{grid-template-columns:1fr}
  .tw-limits{display:block}
  .tw-limits ul{margin-top:10px}
}
@media(max-width:640px){
  .tw-bar{grid-template-columns:minmax(0,1fr) auto;gap:4px 8px}
  .tw-bar-label{grid-column:1 / -1}
}