/* 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}
/* a shorter (less tall) prompt bar, full width as before */
.hypothesis-card{padding:8px 10px 8px 14px}
.composer-input-row{margin-top:0}
/* No scrollbar: the question bar grows with its text (fitQuestion in app.js). */
.composer-input-row textarea{min-height:46px;height:46px;padding:10px 6px;font-size:clamp(16px,1.6vw,20px);resize:none;overflow:hidden;scrollbar-width:none}
.composer-input-row textarea::-webkit-scrollbar{display:none}
.run-button{padding:0 14px 0 18px;min-height:44px}
.globe-caption{display:none!important}                                  /* no street-name caption on the landing */
/* After the first run (app.js .is-landed) the prompt page is one screen; the landing scroll comes back only on reload. */
body.is-landed .intro-chapter{height:auto;min-height:0}
body.is-landed .scroll-cue{display:none}

/* ---------- lab (demo view): the 3D view, then the decision brief ---------- */

body.demo-view .lab-shell{padding-top:76px;padding-bottom:16px;min-height:0;padding-left:clamp(10px,1.4vw,22px);padding-right:clamp(10px,1.4vw,22px)}
body.demo-view .lab-layout{margin-top:10px}
body.demo-view .simulation-viewport,body.demo-view .simulation-viewport.has-mapped-world{height:calc(100vh - 110px);min-height:600px}
@media(max-width:760px){body.demo-view .simulation-viewport,body.demo-view .simulation-viewport.has-mapped-world{height:72vh;min-height:420px}}

/* Only the two prepared policies (fare, bike) get the 3D street. Any other question shows the 100 agents and the
   results brief: a compiled run's figures, or the not-simulated card. */
body.demo-view:not([data-scenario=fare]):not([data-scenario=bike]) #lab .lab-layout,body.demo-view:not([data-scenario=fare]):not([data-scenario=bike]) #lab .lab-titlebar,body[data-scenario=compiled] .tw-brief .tw-head h2{display:none!important}

/* ---------- header: transparent, no separator line, no "Enter the city" ---------- */
.site-header{border-bottom:0!important;background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
/* Past the landing, content scrolls under the header, so it takes the page colour (still no banner or blur). */
body:not([data-phase=intro]):not([data-phase=composer]) .site-header{background:var(--ink)!important}
.site-header .brand-word{text-shadow:0 1px 14px #07131c}

/* ---------- policy impact assessment under the 3D view. Figures come from two-world.js. ----------
   Report layout on a solid full-width surface. Baseline is slate and policy is mint everywhere; chips carry
   robustness (mint holds, amber reverses or outside evidence, lime sensitive, grey pending or info). */
.tw-brief{display:none}
body.demo-view .tw-brief:not([hidden]){
  display:block;max-width:1240px;margin:28px auto 0;padding:40px 4px 48px;
  --before:#9db0b5;--after:#a8f4d1;--line:#a8f4d11f;--rule:#a8f4d10f;--muted:#9fb5b8;--warn:#ffb38a;--lime:#e4f692;--surface:#081a20;--card:#0d252c;
  background:var(--surface);box-shadow:0 0 0 100vmax var(--surface);clip-path:inset(0 -100vmax);
  color:#e6efed;font-variant-numeric:tabular-nums;
}
body.demo-view[data-scenario=custom] .tw-brief:not([hidden]){padding-bottom:96px}
/* Not-simulated report (two-world.js renderSpeculative): the agents' ratings as metrics, then the agent panel itself,
   which moves in without its own heading or summary line. */
.tw-brief .is-support{color:var(--after)}
.tw-brief .is-oppose{color:var(--warn)}
.tw-brief .is-neutral{color:var(--before)}

.tw-poll-live{margin-top:12px!important}

.tw-brief #agentPoll{padding:0;background:none;color:inherit}
.tw-brief #agentPoll .persona-reaction-head{display:none}
.tw-brief .agent-poll-split,.tw-brief .agent-poll-filter,.tw-brief .agent-poll-cards{max-width:none}
.tw-agents[hidden]{display:none}
.tw-brief h2,.tw-brief h3,.tw-brief p,.tw-brief ol,.tw-brief ul,.tw-brief dl,.tw-brief dd{margin:0}
.tw-brief small{font-size:12px}
.tw-brief a{color:var(--after);text-underline-offset:3px}
.tw-eyebrow{color:var(--mint);font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase}
.tw-head h2{margin:10px 0 0;font:500 30px/1.2 'Space Grotesk',sans-serif;letter-spacing:-.025em;max-width:900px;color:#f3f6ed}

.tw-brief .is-before{color:var(--before)}
.tw-brief .is-after{color:var(--after)}

.tw-scope{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:22px!important;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--line)}
.tw-scope div{padding:12px 16px;background:var(--card)}
.tw-scope dt{color:var(--muted);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase}
.tw-scope dd{margin-top:5px;color:#eef6f4;font-size:14px;font-weight:600;line-height:1.4}
.tw-scope dd small{display:block;margin-top:2px;color:var(--muted);font-weight:400}

.tw-card,.tw-kpi{border:1px solid var(--line);border-radius:10px;background:var(--card)}
.tw-card{padding:20px 22px;margin-top:14px}
.tw-card h3{margin-bottom:14px;font:600 15px/1.3 'Space Grotesk',sans-serif;letter-spacing:.01em;color:#eef6f4}
.tw-note{margin-top:12px!important;color:var(--muted);font-size:12.5px;line-height:1.55}
.tw-note--lead{margin:-6px 0 14px!important}
.tw-status{color:#d7e5e3;font-size:13px}

.tw-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 9px 2px 8px;border:1px solid;border-radius:999px;font-size:11px;font-weight:700;line-height:18px;letter-spacing:.2px;white-space:nowrap}
.tw-chip::before{content:'';flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
.tw-chip.is-holds{color:var(--after);border-color:#a8f4d14d;background:#a8f4d10d}
.tw-chip.is-reverses,.tw-chip.is-warn{color:var(--warn);border-color:#ffb38a55;background:#ffb38a10}
.tw-chip.is-sensitive{color:var(--lime);border-color:#e4f69245;background:#e4f6920b}
.tw-chip.is-pending,.tw-chip.is-info,.tw-chip.is-none{color:var(--muted);border-color:#9fb5b83d;background:transparent}

.tw-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:14px}
.tw-kpi{display:flex;flex-direction:column;padding:16px 18px}
.tw-kpi-label{color:#d7e5e3;font-size:13px;font-weight:600}
.tw-kpi-value{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px;margin:10px 0 4px!important;font:500 25px/1.1 'Space Grotesk',sans-serif;letter-spacing:-.02em}
.tw-arrow{color:#6f8a8f;font-size:17px}
.tw-kpi-change{color:#eef6f4;font-size:13.5px;font-weight:600}
.tw-kpi-foot{margin-top:auto!important;padding-top:12px}

.tw-assess-head{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.tw-assess-head h3{margin:0}
.tw-assess-grade{max-width:960px;color:#d7e5e3;font-size:14px;line-height:1.55}
.tw-findings{margin-top:14px!important;padding:0;list-style:none;counter-reset:finding}
.tw-findings li{display:grid;grid-template-columns:26px 1fr auto;gap:12px;align-items:baseline;padding:10px 0;border-top:1px solid var(--rule);counter-increment:finding;color:#e6efed;font-size:14.5px;line-height:1.5}
.tw-findings li::before{content:counter(finding,decimal-leading-zero);color:var(--mint);font-size:11px;font-weight:700;letter-spacing:.6px}

.tw-scroll{overflow-x:auto;margin:0 -4px;padding:0 4px}
.tw-table{width:100%;border-collapse:collapse;font-size:13.5px}
.tw-table thead th{padding:0 10px 9px;color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;text-align:right;vertical-align:bottom;border-bottom:1px solid #a8f4d133}
.tw-table thead th.tw-col-label{text-align:left;padding-left:0}
.tw-table tr.tw-group th{padding:16px 0 6px;color:var(--mint);font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase;text-align:left;border-bottom:1px solid var(--line)}
.tw-table tbody tr:not(.tw-group) th{padding:9px 10px 9px 0;text-align:left;font-weight:500;color:#e6efed;min-width:170px}
.tw-table tbody th small{display:block;margin-top:2px;color:var(--muted);font-weight:400;line-height:1.35}
.tw-table td{padding:9px 10px;text-align:right;white-space:nowrap;color:#d7e5e3}
.tw-table td.tw-col-label{text-align:left;white-space:normal}
.tw-table td small{display:block;margin-top:1px;color:var(--muted)}
.tw-table tbody tr:not(.tw-group){border-bottom:1px solid var(--rule)}
.tw-table tr.is-total th,.tw-table tr.is-total td{font-weight:700}
.tw-table td.is-flip{color:var(--warn)}
.tw-table td.is-flip small{color:#ffb38aaa}
.tw-num-strong{color:#eef6f4!important;font-weight:600}
.tw-impacts td:last-child{text-align:left;padding-right:0}
.tw-impacts thead th:last-child{text-align:left;padding-right:0}
.tw-col-range{min-width:200px}
.tw-card .tw-range-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:2px 0 18px;font-size:12px;color:var(--muted)}
.tw-range-legend strong{color:var(--cream,#f3f6ed);font-weight:700}
.tw-range-legend>span{display:inline-flex;align-items:center;gap:6px}
.tw-key-bar{display:inline-block;width:22px;height:8px;border-radius:4px;background:#9fb5b8}
.tw-key-bar.is-holds{background:var(--after)}.tw-key-bar.is-sensitive{background:var(--lime)}.tw-key-bar.is-reverses{background:var(--warn)}
.tw-key-dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--cream,#f3f6ed);border:2px solid #0b1d27;box-shadow:0 0 0 1.5px #9fb5b8}
.tw-key-zero{display:inline-block;width:0;height:14px;border-left:1.5px solid #f3f6edb0}
/* Change across all runs: bar = smallest to largest change, white dot = base case, tick = 0; colour = robustness. */
.tw-range{display:inline-flex;flex-direction:column;align-items:flex-end;gap:4px;color:var(--muted)}
.tw-range.is-holds{color:var(--after)}.tw-range.is-sensitive{color:var(--lime)}.tw-range.is-reverses{color:var(--warn)}
.tw-range-plot{position:relative;display:block;width:160px;height:24px}
.tw-range-plot::before{content:'';position:absolute;left:4%;right:4%;top:7px;height:2px;border-radius:1px;background:#9fb5b830}
.tw-range-plot b{position:absolute;top:4px;height:8px;border-radius:4px;background:currentColor;opacity:.8}
.tw-range-zero{position:absolute;top:0;width:0;height:16px;border-left:1.5px solid #f3f6edb0}
.tw-range-zero em{position:absolute;top:15px;left:0;transform:translateX(-50%);font:700 9px/1 'DM Sans',sans-serif;font-style:normal;color:var(--muted)}
.tw-range-plot i{position:absolute;top:1px;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--cream,#f3f6ed);border:2.5px solid #0b1d27;box-shadow:0 0 0 1.5px currentColor}
.tw-range-text{color:var(--muted);font-size:12.5px;white-space:nowrap}
.tw-sens tbody th{min-width:200px}
.tw-assumptions td.tw-col-label{color:var(--muted);font-size:12.5px;line-height:1.45;min-width:280px}

.tw-facts{display:grid;grid-template-columns:minmax(150px,200px) 1fr;font-size:13.5px}
.tw-facts dt{padding:9px 12px 9px 0;color:var(--muted);border-bottom:1px solid var(--rule)}
.tw-facts dd{padding:9px 0;color:#eef6f4;font-weight:600;line-height:1.45;border-bottom:1px solid var(--rule)}
.tw-facts dd small{display:block;color:var(--muted);font-weight:400}
.tw-reading{margin-top:14px!important;padding:12px 14px;border-left:2px solid var(--warn);background:#ffb38a0a;color:#eadfd8;font-size:13.5px;line-height:1.55}

.tw-checks{padding:0;list-style:none}
.tw-checks li{display:grid;grid-template-columns:22px 1fr;gap:10px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:13px;line-height:1.5}
.tw-checks strong{display:block;color:#eef6f4;font-weight:600}
.tw-checks span{color:var(--muted)}
.tw-check-icon{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font-size:11px;font-weight:800;color:var(--muted);border:1px solid #9fb5b83d}
.tw-checks li.is-pass .tw-check-icon{color:var(--ink);background:var(--after);border-color:var(--after)}
.tw-checks li.is-fail .tw-check-icon{color:var(--ink);background:#ff8f8f;border-color:#ff8f8f}
.tw-checks li.is-warn .tw-check-icon{color:var(--ink);background:var(--warn);border-color:var(--warn)}

.tw-limits-card>div+div{margin-top:24px}
.tw-limits{list-style:none;padding:0}
.tw-limits li{display:grid;grid-template-columns:minmax(130px,180px) 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--rule);font-size:13px;line-height:1.45}
.tw-limits strong{color:#f1d9d1;font-weight:600}
.tw-limits span{color:var(--muted)}
.tw-measure{padding-left:20px}

.tw-measure li{color:#d7e5e3;font-size:13.5px;line-height:1.5}
.tw-measure li+li{margin-top:8px}

.tw-method summary{cursor:pointer;font:600 14px 'Space Grotesk',sans-serif;color:#d7e5e3}
.tw-method>p,.tw-method li{margin-top:10px!important;color:var(--muted);font-size:13px;line-height:1.55}
.tw-method>ul{padding-left:18px}
.tw-method .tw-scroll{margin-top:12px}

@media(max-width:1080px){
  .tw-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}

  .tw-scope{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .tw-head h2{font-size:24px}
  .tw-kpis,.tw-scope{grid-template-columns:1fr}
  .tw-card{padding:16px 14px}
  .tw-findings li{grid-template-columns:22px 1fr}
  .tw-findings li .tw-chip{grid-column:2;justify-self:start}
  .tw-facts{grid-template-columns:1fr}
  .tw-facts dt{padding-bottom:0;border-bottom:0}
  .tw-limits li{grid-template-columns:1fr;gap:2px}
}

/* ---------- day-by-day line charts (two-world.js chartsCard) ---------- */
.tw-lines-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.tw-lines-head h3{margin:0}
.tw-lines-key{margin:0;color:#b9cfcc;font-size:12px;font-weight:600}
.tw-lines-key i{display:inline-block;width:18px;height:3px;border-radius:2px;margin:0 6px 3px 12px;vertical-align:middle}
.tw-lines-key i.is-base{background:#4fe3ff}.tw-lines-key i.is-next{background:#ff3df0}
.tw-lines-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin-top:12px}
.tw-line{margin:0;padding:12px 12px 6px;border:1px solid #a8f4d124;border-radius:12px;background:#0d262ecc}
.tw-line figcaption{display:flex;flex-direction:column;gap:2px}
.tw-line figcaption span{font:600 14px 'Space Grotesk',sans-serif;color:#eef6f2}
.tw-line figcaption small{color:#9fbab8;font-size:11px}
.tw-line svg{display:block;width:100%;height:auto;margin-top:6px;overflow:visible}
.tw-line svg text{fill:#8eabae;font:10px 'DM Sans',sans-serif}
.tw-line svg .g{stroke:#ffffff14;stroke-width:1}
.tw-line svg .p{stroke:#ffe14d88;stroke-width:1;stroke-dasharray:3 3}
.tw-line svg .pl{fill:#ffe14dcc;font-size:9px}
.tw-line svg .lb{fill:none;stroke:#4fe3ff;stroke-width:2.2}
.tw-line svg .ln{fill:none;stroke:#ff3df0;stroke-width:2.6}
.tw-line svg .db{fill:#4fe3ff}.tw-line svg .dn{fill:#ff3df0}
.tw-footnote{margin:14px 2px 0;color:#86a5a8;font-size:11px}