:root{color-scheme:dark;--night:#05080d;--paper:#efe9db;--ink:#1b1d1f;--muted:#b8c0c8;--amber:#f2a33a;--line:#303b48}*{box-sizing:border-box}body{margin:0;background:var(--night);color:#f4f1ea;font:15px/1.5 "IBM Plex Sans",system-ui,sans-serif}.bar{height:64px;padding:0 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:12px;align-items:center;text-decoration:none;color:inherit}.brand svg{width:32px;height:32px}.brand b{font:600 18px "IBM Plex Sans Condensed",sans-serif}#identity{color:var(--muted);font-size:14px}main{max-width:1920px;margin:auto;padding:18px 24px}.briefing{display:flex;justify-content:space-between;align-items:center;gap:20px}.brief-title{display:grid;grid-template-columns:auto 1fr;column-gap:22px;align-items:center}.eyebrow{grid-column:1/-1;color:var(--amber);font:500 10px "IBM Plex Mono",monospace;letter-spacing:1.5px}h1{font:600 28px "IBM Plex Sans Condensed",sans-serif;margin:5px 0}#scenario-name{color:var(--muted);font-size:14px;margin:5px 0}.flight-actions{display:flex;flex-wrap:wrap;gap:8px}button{font:500 14px "IBM Plex Sans Condensed",sans-serif;border:1px solid #697480;background:#111820;color:#f4f1ea;padding:11px 15px;border-radius:2px;cursor:pointer;min-height:42px}button:hover{background:#26303c}button.primary{background:var(--paper);color:var(--ink);border-color:var(--paper);font-weight:600}button:disabled{opacity:.5;cursor:wait}button:focus-visible,a:focus-visible{outline:3px solid var(--amber);outline-offset:3px}.statusbar{display:flex;justify-content:space-between;gap:14px;border-bottom:1px solid var(--line);padding:9px 0 12px;margin-bottom:12px;color:var(--muted);font:11px "IBM Plex Mono",monospace}.statusbar>span:first-child{display:flex;align-items:center;gap:8px}#status-dot{height:7px;width:7px;border-radius:50%;background:var(--amber);display:inline-block;flex:none}#status-dot.saved{background:#3fd28a}.elapsed{white-space:nowrap}#elapsed{color:var(--paper);font-size:14px}.elapsed span:last-child{font-size:9px;letter-spacing:1px;margin-left:8px}.cockpit{background:#080c12;border:1px solid var(--line);border-radius:3px;overflow:hidden}iframe{display:block;width:100%;height:calc(100dvh - 210px);min-height:650px;border:0}.ad{border:1px solid #29323e;background:#0a0f16;padding:14px 18px;display:flex;justify-content:space-between;color:#a1acb9;font-size:12px;margin:20px auto 0;max-width:970px}.ad span:first-child{font:10px "IBM Plex Mono",monospace}footer{display:flex;justify-content:space-between;gap:16px;padding:12px 28px 18px;font-size:11px;color:#a1acb9}#error{border-left:3px solid var(--amber);background:#221c13;padding:12px 16px}#back{display:inline-block;margin-bottom:16px;color:var(--paper)}body.focus .bar,body.focus .brief-title,body.focus footer{display:none}body.focus main{padding:8px;max-width:none}body.focus .briefing{justify-content:flex-end}body.focus .flight-actions button{padding:7px 12px;min-height:34px}body.focus .statusbar{margin-bottom:7px;padding:7px 0}body.focus iframe{height:calc(100dvh - 98px);min-height:500px}[hidden]{display:none!important}@media(max-width:900px){.bar{padding:0 16px}main{padding:16px 12px}.briefing{align-items:flex-start;flex-direction:column;gap:10px}.brief-title{display:block}.brief-title h1{font-size:26px}#scenario-name{font-size:13px}.flight-actions{width:100%}.flight-actions button{flex:1;padding:10px;font-size:13px}.statusbar{font-size:10px}.elapsed span:last-child{display:none}iframe{height:80dvh;min-height:760px}footer{padding:12px;flex-wrap:wrap}}

/* The training page occupies the viewport; the cockpit owns remaining space. */
html,body{height:100%;height:100dvh;overflow:hidden}
body{display:flex;flex-direction:column;min-height:0}
.bar{height:48px;flex:none;padding:0 18px}
main{display:flex;flex-direction:column;flex:1;min-height:0;width:100%;max-width:none;margin:0;padding:8px 12px;gap:6px}
.briefing{flex:none;min-width:0;gap:10px}.brief-title{min-width:0;column-gap:12px}.eyebrow{display:none}h1{font-size:22px;margin:0}#scenario-name{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.flight-actions{flex-wrap:nowrap;flex:none;gap:6px}.flight-actions button{min-height:32px;padding:7px 10px;font-size:13px}
.statusbar{flex:none;margin:0;padding:4px 0 6px;min-width:0}.statusbar>span:first-child{min-width:0}#save-state{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cockpit{flex:1;min-height:0}iframe,body.focus iframe{height:100%;min-height:0;width:100%}
.ad{flex:none;min-height:0;max-width:none;margin:0;padding:4px 10px;font-size:11px}
footer{flex:none;padding:3px 12px 7px;font-size:10px}
#error{flex:none;margin:0;padding:6px 10px;font-size:12px}#back{flex:none;margin:0}
body.focus main{padding:5px;gap:4px}body.focus .statusbar{margin:0;padding:3px 0}
@media(max-width:900px){.briefing{flex-direction:row;align-items:center}.brief-title h1{font-size:18px}#scenario-name{display:none}.flight-actions{width:auto}.flight-actions button{flex:none;font-size:12px;padding:7px}.elapsed span:last-child{display:none}footer span:last-child{display:none}}
@media(max-width:520px),(max-height:600px){.bar,footer,.ad,.brief-title{display:none}.briefing{justify-content:flex-end}.flight-actions{width:100%}.flight-actions button{flex:1}.statusbar{font-size:10px}}

/* Leave the available height to the actual cockpit. */
.bar{height:34px}.brand svg{width:24px;height:24px}.brand b{font-size:16px}
footer{display:none}
.brief-title h1{font-size:18px}.briefing{min-height:30px}
.flight-actions button{min-height:28px;padding:5px 9px}

/* Ads stay below the viewport, leaving the cockpit's original height intact. */
body.with-ad{height:auto;min-height:100dvh;overflow:auto}
html:has(body.with-ad){height:auto;overflow:auto}
body.with-ad main{flex:none;height:calc(100dvh - 34px)}
body.with-ad #flight-ad{display:block;flex:none;width:100%;max-width:1200px;margin:0 auto 20px;padding:16px;box-sizing:border-box;min-height:120px}
.ad-heading{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:12px}
#ad-slot{width:100%}