/* Airplane Boarding ops-control aesthetic. Dark by default, .light variant on . */ :root { --bg: #070d16; --bg-2: #0a1220; --panel: rgba(13, 24, 38, 0.72); --panel-solid: #0d1826; --hull: rgba(15, 27, 43, 0.92); --line: rgba(102, 150, 200, 0.16); --line-strong: rgba(102, 150, 200, 0.32); --ink: #dce8f5; --ink-2: #93a7bd; --ink-3: #7d8da3; --accent: #37b8d8; --accent-ink: #071018; --amber: #e89b2e; --good: #45d992; --bad: #e8455c; --party: #ff8ad8; --radius: 10px; --font-display: "Michroma", sans-serif; --font-body: "Chakra Petch", sans-serif; --font-mono: "IBM Plex Mono", monospace; } html.light { --bg: #e8edf4; --bg-2: #dde5ef; --panel: rgba(255, 255, 255, 0.8); --panel-solid: #ffffff; --hull: #f5f9fd; --line: rgba(30, 60, 100, 0.18); --line-strong: rgba(30, 60, 100, 0.35); --ink: #14213a; --ink-2: #44546d; --ink-3: #5a6a80; --accent: #0d7f9e; } * { box-sizing: border-box; margin: 0; padding: 0; } [hidden] { display: none !important; } html { color-scheme: dark; } html.light { color-scheme: light; } body { font-family: var(--font-body); color: var(--ink); background: radial-gradient(1100px 500px at 80% -10%, rgba(55, 184, 216, 0.09), transparent 60%), radial-gradient(900px 600px at 0% 110%, rgba(154, 112, 240, 0.07), transparent 60%), repeating-linear-gradient(0deg, transparent 0 39px, var(--line) 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, var(--line) 39px 40px), linear-gradient(var(--bg), var(--bg-2)); background-attachment: fixed; min-height: 100vh; padding: 0 clamp(8px, 2vw, 28px) 40px; line-height: 1.45; } .sr-only { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* ===== Header ===== */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 4px 12px; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 14px; } .brand-mark { font-size: 26px; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 12px; background: linear-gradient(145deg, rgba(55, 184, 216, 0.18), transparent); color: var(--accent); } .brand h1 { font-family: var(--font-display); font-size: clamp(14px, 4.4vw, 24px); letter-spacing: 0.14em; text-transform: uppercase; } .tagline { color: var(--ink-2); font-size: 13px; } .topbar-actions { display: flex; gap: 8px; } /* ===== Buttons ===== */ button { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink); background: transparent; border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 14px; cursor: pointer; transition: border-color .15s, background .15s, transform .08s; } button:hover { border-color: var(--accent); } button:active { transform: translateY(1px); } button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } button:disabled { opacity: 0.45; cursor: not-allowed; } button.icon { padding: 8px 11px; } button.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 0 18px rgba(55, 184, 216, 0.35); } button.primary:hover { filter: brightness(1.1); } button.race { border-color: var(--amber); color: var(--amber); background: rgba(232, 155, 46, 0.08); } button.ghost { background: rgba(120, 160, 210, 0.06); } /* ===== Panels & layout ===== */ .panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); backdrop-filter: blur(10px); padding: 16px; position: relative; } .panel::before { content: ""; position: absolute; inset: 0 auto auto 0; width: 100%; height: 2px; border-radius: 2px 2px 0 0; background: linear-gradient(90deg, var(--accent), transparent 60%); opacity: 0.5; } .panel-title { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px; } .panel-title .sub { font-family: var(--font-body); letter-spacing: 0; text-transform: none; color: var(--ink-3); font-size: 12px; margin-left: 8px; } .workspace { display: grid; grid-template-columns: 290px minmax(0, 1fr) 280px; gap: 14px; align-items: start; } .panel.wide { margin-top: 14px; } /* ===== Config panel ===== */ .config section { margin-bottom: 18px; } .config h3 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 8px; } .config.locked section, .config.locked details, .config.locked .seedrow { opacity: 0.45; pointer-events: none; } .config.locked::after { content: "locked while boarding"; position: absolute; top: 14px; right: 14px; font-size: 10px; color: var(--amber); letter-spacing: 0.1em; text-transform: uppercase; } .chips button.on, .scenario-card.on { border-color: var(--accent); background: rgba(55, 184, 216, 0.12); box-shadow: inset 0 0 0 1px var(--accent); } .statgrid, .metricgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; } .statgrid > div, .metricgrid > div { background: rgba(120, 160, 210, 0.05); border: 1px solid var(--line); border-radius: 7px; padding: 6px 8px; display: flex; flex-direction: column; gap: 1px; min-width: 0; } .statgrid span, .metricgrid span { font-size: 9.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.07em; } .statgrid strong, .metricgrid strong { font-family: var(--font-mono); font-size: 14px; font-weight: 600; } .fieldrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-2); margin: 8px 0; } .fieldrow input[type="number"], .fieldrow select { font-family: var(--font-mono); font-size: 13px; color: var(--ink); background: var(--panel-solid); border: 1px solid var(--line-strong); border-radius: 6px; padding: 6px 8px; width: 130px; max-width: 45%; } .fieldrow input[type="range"] { flex: 1; accent-color: var(--accent); } .fieldrow.check { justify-content: flex-start; cursor: pointer; } .fieldrow.check input, .check input { accent-color: var(--accent); width: 15px; height: 15px; } .fieldrow .unit { color: var(--ink-3); font-size: 11px; margin-left: auto; } .fieldrow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; } .classes-grid { grid-template-columns: repeat(3, 1fr); margin-top: 8px; } .fieldrow-grid label { font-size: 11px; color: var(--ink-3); display: flex; flex-direction: column; gap: 3px; } .fieldrow-grid input { font-family: var(--font-mono); color: var(--ink); background: var(--panel-solid); border: 1px solid var(--line-strong); border-radius: 6px; padding: 5px 7px; width: 100%; } .chips { display: flex; flex-wrap: wrap; gap: 5px; } .chips button { padding: 5px 10px; font-size: 12px; border-radius: 999px; font-weight: 500; } .blurb { font-size: 12.5px; color: var(--ink-2); margin: 8px 0; } .adv { border-top: 1px dashed var(--line-strong); padding-top: 10px; margin-top: 4px; } .adv summary { cursor: pointer; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); margin-bottom: 6px; } .seedrow { display: flex; align-items: center; justify-content: space-between; border-top: 1px dashed var(--line-strong); padding-top: 12px; margin-top: 12px; font-size: 12px; color: var(--ink-2); } .seedrow strong { font-family: var(--font-mono); } /* ===== Cabin panel ===== */ .cabin-panel { display: flex; flex-direction: column; gap: 10px; } .cabin-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; } .viewbtns { display: flex; gap: 5px; } .viewtoggles { display: flex; gap: 14px; font-size: 12px; color: var(--ink-2); } .viewtoggles .check { display: flex; align-items: center; gap: 6px; cursor: pointer; } #cabin-wrap { position: relative; height: min(72vh, 780px); overflow: auto; display: flex; justify-content: center; border: 1px solid var(--line); border-radius: 8px; background: radial-gradient(600px 300px at 50% 0%, rgba(55, 184, 216, 0.05), transparent), repeating-linear-gradient(0deg, transparent 0 24px, rgba(102, 150, 200, 0.05) 24px 25px); } #cabin { margin: 10px auto; flex: none; } .hint-key { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); border: 1px solid var(--line-strong); padding: 3px 10px; border-radius: 999px; } .controlbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 2px; } #speed-group { display: flex; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; } #speed-group button { border: 0; border-radius: 0; padding: 8px 10px; font-family: var(--font-mono); font-size: 12px; background: transparent; } #speed-group button + button { border-left: 1px solid var(--line); } #speed-group button.on { background: var(--accent); color: var(--accent-ink); } .legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; color: var(--ink-2); } .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; } .legend i.ring { background: transparent; border: 2px solid #fff; } html.light .legend i.ring { border-color: #333; } .legend i.ring.party { border-color: var(--party); } /* ===== Side-by-side race panes ===== */ #multi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px; width: 100%; height: 100%; padding: 8px; /* panes hug their cabin so the leftover space sits between them, not inside a half-empty column */ justify-items: center; align-content: center; } .pane { max-width: 100%; } .pane { display: flex; flex-direction: column; min-width: 0; min-height: 0; border: 1px solid var(--line); border-radius: 8px; background: rgba(120, 160, 210, 0.03); overflow: hidden; } .pane.winner { border-color: var(--amber); box-shadow: 0 0 16px rgba(232, 155, 46, 0.25); } .pane-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; border-bottom: 1px solid var(--line); background: rgba(120, 160, 210, 0.05); } .pane-head strong { font-size: 12px; } .pane-stat { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); margin-left: auto; } .pane-rank { font-size: 11px; font-weight: 700; color: var(--amber); border: 1px solid var(--amber); border-radius: 999px; padding: 1px 8px; } .pane-scroll { flex: 1; overflow: auto; display: flex; justify-content: center; min-height: 0; } .pane-scroll canvas { margin: 6px auto; flex: none; } .sel-hint { font-size: 11px; color: var(--ink-3); margin: 6px 0 0; font-style: italic; } /* live standings (multi mode) */ .live-row { display: grid; grid-template-columns: minmax(0, 1.3fr) 1fr auto; gap: 8px; align-items: center; margin: 7px 0; font-size: 12px; } .live-row.lead .live-name { color: var(--amber); } .live-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .live-track { height: 8px; border-radius: 999px; overflow: hidden; background: rgba(120, 160, 210, 0.12); border: 1px solid var(--line); } .live-track span { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--good)); } .live-val { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); min-width: 52px; text-align: right; } /* ===== Dashboard ===== */ .dash { position: sticky; top: 12px; } .bigmetric { display: flex; flex-direction: column; margin-bottom: 8px; } .bigmetric-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-3); } .bigmetric-val { font-family: var(--font-mono); font-size: 38px; font-weight: 600; color: var(--accent); line-height: 1.1; font-variant-numeric: tabular-nums; } .progress { height: 8px; border-radius: 999px; overflow: hidden; background: rgba(120, 160, 210, 0.12); border: 1px solid var(--line); margin-bottom: 12px; } #progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--good)); transition: width 0.3s; } .metricgrid { grid-template-columns: repeat(2, 1fr); } .dash .metricgrid { grid-template-columns: repeat(2, 1fr); } .feed-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); margin: 12px 0 6px; } .feed { display: flex; flex-direction: column; gap: 4px; min-height: 120px; } .feed-line { font-size: 11.5px; color: var(--ink-2); border-left: 2px solid var(--line-strong); padding-left: 8px; } .feed-line .feed-t { font-family: var(--font-mono); color: var(--ink-3); margin-right: 6px; font-size: 10.5px; } .feed-idle { color: var(--ink-3); font-style: italic; } /* ===== Scenarios ===== */ .scenario-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; } .scenario-card { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; text-align: left; padding: 10px 12px; font-weight: 500; } .scenario-card strong { font-size: 13px; } .scenario-card span { font-size: 11px; color: var(--ink-3); } .scenario-status { font-size: 13px; color: var(--ink-2); margin: 0 0 10px; border-left: 3px solid var(--accent); background: rgba(55, 184, 216, 0.07); padding: 9px 12px; border-radius: 0 8px 8px 0; } .scenario-status strong { color: var(--ink); } #scenarios.locked { pointer-events: none; opacity: 0.5; } .scenario-verdict { font-size: 14px; font-weight: 600; padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; } .scenario-verdict.win { background: rgba(69, 217, 146, 0.12); border: 1px solid var(--good); color: var(--good); } .scenario-verdict.lose { background: rgba(232, 69, 92, 0.1); border: 1px solid var(--bad); color: var(--bad); } /* ===== Race results ===== */ .podium { display: flex; gap: 10px; align-items: flex-end; margin: 6px 0 14px; } .podium-slot { flex: 1; text-align: center; border: 1px solid var(--line-strong); border-radius: 8px; padding: 12px 8px 10px; background: rgba(120, 160, 210, 0.05); } .podium-slot.p1 { border-color: var(--amber); background: rgba(232, 155, 46, 0.1); padding-top: 22px; order: 2; } .podium-slot.p2 { order: 1; } .podium-slot.p3 { order: 3; opacity: 0.85; } .podium-rank { font-family: var(--font-display); font-size: 13px; color: var(--amber); letter-spacing: 0.1em; } .podium-slot.p2 .podium-rank, .podium-slot.p3 .podium-rank { color: var(--ink-3); } .podium-name { font-weight: 600; font-size: 14px; margin: 4px 0 2px; } .podium-time { font-family: var(--font-mono); color: var(--ink-2); font-size: 13px; } .awards { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .award { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--line); border-radius: 7px; padding: 6px 12px; background: rgba(120, 160, 210, 0.05); font-size: 13px; } .award span { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); } .panel.wide h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-2); margin: 14px 0 8px; } .rbar { display: flex; flex-direction: column; gap: 6px; } .rbar-row { display: grid; grid-template-columns: 160px 1fr 150px; gap: 10px; align-items: center; } .rbar-label { font-size: 12.5px; text-align: right; color: var(--ink-2); } .rbar-track { background: rgba(120, 160, 210, 0.08); border-radius: 4px; height: 18px; overflow: hidden; } .rbar-fill { display: block; height: 100%; background: var(--accent); opacity: 0.55; border-radius: 0 4px 4px 0; } .rbar-fill.best { opacity: 1; box-shadow: 0 0 12px rgba(55, 184, 216, 0.5); } .rbar-val { font-family: var(--font-mono); font-size: 12px; } .rbar-val em { font-style: normal; color: var(--ink-3); font-size: 11px; } .race-actions { margin: 14px 0 4px; } .tablewrap { overflow-x: auto; } .tablewrap table { border-collapse: collapse; width: 100%; font-size: 12.5px; } .tablewrap th, .tablewrap td { padding: 6px 10px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; } .tablewrap th:first-child, .tablewrap td:first-child { text-align: left; } .tablewrap th { color: var(--ink-3); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; } .tablewrap td { font-family: var(--font-mono); } .tablewrap td:first-child { font-family: var(--font-body); font-weight: 600; } .tablewrap tr.best td { color: var(--accent); } /* ===== Achievements ===== */ .ach-grid { display: flex; flex-wrap: wrap; gap: 8px; } .ach { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--ink-3); border: 1px dashed var(--line-strong); border-radius: 999px; padding: 5px 14px; background: none; cursor: pointer; } .ach:hover { border-color: var(--accent); } .ach-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-3); opacity: 0.4; } .ach.on { color: var(--ink); border-style: solid; border-color: var(--amber); } .ach.on .ach-dot { background: var(--amber); opacity: 1; box-shadow: 0 0 8px var(--amber); } /* ===== Footer ===== */ /* the readable prose block under the app: the only substantial text on the home page, so it gets guide-like typography rather than dashboard sizing */ .seo-copy { margin-top: 18px; padding: 22px 26px; } .seo-copy h2 { font-family: var(--font-display); font-size: 15px; letter-spacing: 0.05em; color: var(--ink); margin: 0 0 10px; padding-bottom: 9px; border-bottom: 1px solid var(--line); } .seo-copy h2 + p { margin-top: 0; } .seo-copy h2:not(:first-child) { margin-top: 22px; } .seo-copy p { font-size: 14px; color: var(--ink-2); line-height: 1.62; max-width: 74ch; margin: 9px 0; } .seo-copy strong { color: var(--ink); } .seo-copy a { color: var(--accent); } .seo-copy .bullets li { font-size: 14px; color: var(--ink-2); line-height: 1.6; max-width: 74ch; } @media (max-width: 720px) { .seo-copy { padding: 16px 15px; } .seo-copy p, .seo-copy .bullets li { font-size: 13.5px; } } .footer { margin-top: 20px; text-align: center; font-size: 11.5px; color: var(--ink-3); } .footer p { max-width: 720px; margin: 4px auto; } /* ===== Dialogs ===== */ dialog { background: var(--panel-solid); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 14px; padding: 26px; max-width: 560px; width: calc(100vw - 40px); max-height: calc(100dvh - 24px); overflow-y: auto; margin: auto; } dialog::backdrop { background: rgba(3, 8, 15, 0.7); backdrop-filter: blur(3px); } dialog h2 { font-family: var(--font-display); font-size: 19px; letter-spacing: 0.06em; margin-bottom: 4px; } .modal-eyebrow { font-size: 10px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--accent); margin-bottom: 6px; } .btn-close { position: absolute; top: 12px; right: 12px; padding: 6px 10px; border-radius: 50%; } .result-hero { display: flex; align-items: center; gap: 28px; margin: 18px 0 6px; } .score-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; } .score-cap { font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-3); } .score-ring { width: 110px; height: 110px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(closest-side, var(--panel-solid) 78%, transparent 79% 100%), conic-gradient(var(--accent) calc(var(--val) * 1%), rgba(120, 160, 210, 0.12) 0); } .score-ring span { font-family: var(--font-mono); font-size: 34px; font-weight: 600; color: var(--accent); } .result-time .bigmetric-val { font-size: 46px; } .why { font-size: 13px; color: var(--ink); background: rgba(55, 184, 216, 0.07); border-left: 3px solid var(--accent); padding: 10px 12px; border-radius: 0 8px 8px 0; margin: 12px 0; } .modal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } .how-list { padding-left: 20px; margin: 12px 0; display: flex; flex-direction: column; gap: 8px; font-size: 13.5px; } /* ===== Tooltip ===== */ #tooltip { display: none; position: fixed; z-index: 60; pointer-events: none; background: var(--panel-solid); border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 12px; font-size: 12px; max-width: 240px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4); } #tooltip strong { display: block; font-size: 13px; margin-bottom: 2px; } #tooltip span { display: block; color: var(--ink-2); font-size: 11.5px; } /* ===== Toasts ===== */ #toasts { position: fixed; right: 16px; bottom: 16px; z-index: 70; display: flex; flex-direction: column; gap: 8px; } .toast { background: var(--panel-solid); border: 1px solid var(--amber); border-radius: 10px; padding: 10px 16px; min-width: 240px; max-width: 320px; opacity: 0; transform: translateY(8px); transition: all 0.35s; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); } .toast.show { opacity: 1; transform: none; } .toast strong { display: block; color: var(--amber); font-size: 13px; } .toast span { font-size: 12px; color: var(--ink-2); } /* ===== Confetti ===== */ #confetti { position: fixed; inset: 0; pointer-events: none; z-index: 80; overflow: hidden; } #confetti i { position: absolute; top: -12px; width: 7px; height: 11px; border-radius: 2px; animation: fall linear forwards; } @keyframes fall { to { transform: translateY(105vh) rotate(540deg); opacity: 0.4; } } /* ===== Responsive ===== */ @media (max-width: 1180px) { .workspace { grid-template-columns: 1fr 1fr; } .cabin-panel { grid-column: 1 / -1; order: -1; } #cabin-wrap { height: min(58vh, 620px); } .dash { position: static; } } /* ===== Mobile ===== */ .sheet-toggle { display: none; } @media (max-width: 720px) { body { padding: 0 8px 20px; } .workspace { grid-template-columns: 1fr; gap: 10px; } /* aircraft first, then the numbers, then the controls that change them */ .cabin-panel { order: 1; } .workspace > .panel.config { order: 2; } .dash { order: 3; } .topbar { padding: 10px 2px 8px; gap: 8px; } .brand { gap: 9px; min-width: 0; } /* the two-word wordmark is allowed to stack rather than shrink the topbar actions out of reach */ .brand h1, .brand .wordmark { letter-spacing: 0.05em; font-size: 15px; line-height: 1.15; } .brand-mark { width: 34px; height: 34px; font-size: 18px; } .brand-mark .ic { width: 20px; height: 20px; } .tagline { display: none; } .topbar-actions { gap: 6px; } .topbar-actions .btn-link, .topbar-actions button { padding: 8px 10px; font-size: 12px; } .panel { padding: 12px; } #cabin-wrap { height: 58vh; } /* collapsible setup sheet and expandable stats */ .config.locked::after { display: none; } .config.locked .sheet-toggle { border-color: var(--amber); color: var(--amber); } #config-panel.collapsed { cursor: pointer; border-color: var(--accent); } #config-panel.collapsed .panel-title { margin-bottom: 2px; color: var(--ink); } #config-panel.collapsed::after { content: "Aircraft, strategies, doors, luggage and passengers"; display: block; font-size: 11.5px; color: var(--ink-2); font-family: var(--font-body); letter-spacing: 0; text-transform: none; } .sheet-toggle { display: inline-block; float: right; margin-top: -4px; font-family: var(--font-body); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: rgba(55, 184, 216, 0.1); border: 1px solid var(--accent); border-radius: 999px; padding: 5px 12px; min-height: 0; cursor: pointer; } #config-body { display: block; } #config-panel.collapsed #config-body { display: none; } .dash:not(.open) #dash-single .metricgrid > div:nth-child(n+5) { display: none; } .dash:not(.open) .feed-title, .dash:not(.open) .feed { display: none; } .dash .metricgrid { grid-template-columns: repeat(2, 1fr); } .bigmetric-val { font-size: 32px; } /* one compact sticky action bar */ .controlbar { position: sticky; bottom: calc(6px + env(safe-area-inset-bottom, 0px)); z-index: 30; background: var(--panel-solid); border: 1px solid var(--line-strong); border-radius: 10px; padding: 6px; gap: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45); } .controlbar button { padding: 8px 10px; font-size: 12px; } .controlbar .ic { margin-right: 0.3em; } /* four speeds fit a phone; 2x and 30x are close enough to their neighbours */ #speed-group { overflow-x: auto; } #speed-group button { padding: 8px 9px; font-size: 11px; } #speed-group button[data-speed="2"], #speed-group button[data-speed="30"] { display: none; } #btn-instant, #btn-race { flex: 1 1 46%; justify-content: center; display: inline-flex; align-items: center; } #btn-race { font-size: 11px; white-space: nowrap; } /* panes must fill their track, not hug content: a pane header is wider than a narrow vertical cabin and would push the grid past the screen edge */ #multi-grid { justify-items: stretch; padding: 4px; gap: 4px; } .pane-head { padding: 5px 7px; gap: 5px; min-width: 0; } .pane-head strong { font-size: 11px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pane-stat { font-size: 10px; } .pane-rank { font-size: 10px; padding: 0 6px; } .cabin-toolbar { gap: 6px; } .viewtoggles { font-size: 11px; gap: 10px; } .legend { font-size: 10.5px; gap: 4px 10px; } .rbar-row { grid-template-columns: 96px 1fr 92px; } .rbar-label { font-size: 10.5px; } .rbar-val { font-size: 10.5px; } .podium { flex-direction: column; } .podium-slot.p1 { order: 0; padding-top: 12px; } .podium-slot.p2 { order: 1; } .result-hero { gap: 16px; flex-wrap: wrap; } .score-ring { width: 88px; height: 88px; } .score-ring span { font-size: 26px; } .result-time .bigmetric-val { font-size: 34px; } .modal-actions button { flex: 1 1 45%; } dialog { padding: 18px 16px; } .scenario-grid { grid-template-columns: 1fr 1fr; } .statgrid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 420px) { .scenario-grid { grid-template-columns: 1fr; } .chips button { font-size: 11px; padding: 6px 9px; } .modal-actions button { flex: 1 1 100%; } } @media (pointer: coarse) { button, select, .btn-link { min-height: 44px; } #speed-group button { min-height: 44px; } .sheet-toggle { min-height: 44px; padding: 10px 16px; margin-top: -10px; } } /* ===== Reduced motion ===== */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } #confetti { display: none; } } /* ===== Link-styled buttons ===== */ .btn-link { display: inline-flex; align-items: center; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 14px; background: rgba(120, 160, 210, 0.06); transition: border-color .15s; } .btn-link:hover { border-color: var(--accent); } .btn-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ===== Metric help tooltip ===== */ #help-tip { display: none; position: fixed; z-index: 90; pointer-events: none; background: var(--panel-solid); border: 1px solid var(--accent); border-radius: 9px; padding: 10px 13px; max-width: 290px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } #help-tip strong { display: block; font-size: 12.5px; color: var(--accent); margin-bottom: 3px; } #help-tip span { display: block; font-size: 12px; color: var(--ink-2); line-height: 1.45; } .has-help { cursor: help; } .statgrid .has-help:hover, .metricgrid .has-help:hover, .statgrid .has-help:focus-visible, .metricgrid .has-help:focus-visible { border-color: var(--accent); outline: none; } th.has-help { cursor: help; text-decoration: underline dotted var(--line-strong); text-underline-offset: 3px; } th.has-help:hover { color: var(--accent); } .bigmetric-label.has-help, .score-cap.has-help { text-decoration: underline dotted var(--line-strong); text-underline-offset: 3px; } /* ===== Guide page ===== */ /* A long document is expensive to composite: drop the fixed background and the per-panel backdrop blur, which otherwise repaint on every scroll frame. */ .guide-body { padding-bottom: 60px; background-attachment: scroll; } .guide-body .panel { backdrop-filter: none; background: var(--panel-solid); } .guide-body .panel::before { opacity: 0.35; } .guide-shell { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 16px; align-items: start; max-width: 1180px; margin: 0 auto; } .guide-toc { position: sticky; top: 12px; } .guide-toc nav { display: flex; flex-direction: column; gap: 1px; } .guide-toc a { color: var(--ink-2); text-decoration: none; font-size: 12.5px; padding: 6px 10px; border-left: 2px solid transparent; border-radius: 0 6px 6px 0; } .guide-toc a:hover { color: var(--ink); background: rgba(120, 160, 210, 0.06); } .guide-toc a.on { color: var(--accent); border-left-color: var(--accent); background: rgba(55, 184, 216, 0.08); } /* page header on the guide: the h1 belongs to the page subject, so the topbar wordmark is a plain span there and styled to match what an h1 looked like */ .brand .wordmark { display: block; font-family: var(--font-display); font-size: clamp(14px, 4.4vw, 24px); letter-spacing: 0.14em; text-transform: uppercase; } .guide-head { max-width: 1180px; margin: 0 auto 14px; padding: 20px 26px; } .guide-head h1 { font-family: var(--font-display); font-size: clamp(18px, 3.4vw, 27px); letter-spacing: 0.03em; color: var(--ink); margin: 8px 0 10px; line-height: 1.25; } .guide-head p { font-size: 14.5px; color: var(--ink-2); line-height: 1.6; max-width: 78ch; } .crumbs { font-size: 11.5px; color: var(--ink-3); display: flex; gap: 7px; align-items: center; } .crumbs a { color: var(--accent); text-decoration: none; } .crumbs a:hover { text-decoration: underline; } .guide-toc .toc-head { font-family: var(--font-body); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-3); padding: 12px 10px 5px; border-bottom: 1px solid var(--line); margin-bottom: 4px; } .guide-toc .toc-head:first-child { padding-top: 2px; } .guide-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; } /* the technical half of the guide opens with a divider panel, so a reader can see where reference material starts and stop reading */ .tech-divider { border-color: var(--line-strong); background: rgba(120, 160, 210, 0.07); } .tech-divider h2 { border-bottom-color: var(--line-strong); } /* three epistemic labels: what research supports, what the engine assumes, and what is merely an output of this implementation */ .claim { display: inline-block; font-family: var(--font-body); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; border: 1px solid currentColor; border-radius: 5px; padding: 2px 7px; margin-right: 7px; vertical-align: 1px; white-space: nowrap; /* a tinted fill so it reads as a label rather than as the first words of the sentence; the trailing colon in the markup carries the same job in plain text */ background: color-mix(in srgb, currentColor 14%, transparent); } .claim-res { color: #45d992; } .claim-mod { color: var(--amber); } .claim-sim { color: #9a70f0; } /* the dark-theme hues fall to 1.8:1 on a light panel, so the light theme gets its own set: these clear 5:1 on white */ html.light .claim-res { color: #1d7a4c; } html.light .claim-mod { color: #8a5200; } html.light .claim-sim { color: #5b2fbf; } .callout.warn { border-left-color: var(--amber); background: rgba(232, 155, 46, 0.07); } .callout.warn strong { color: var(--amber); } /* bulky inventories and benchmark tables collapse so the guide keeps moving */ .disclose { border: 1px solid var(--line); border-radius: 8px; margin: 12px 0; background: rgba(120, 160, 210, 0.03); } .disclose > summary { cursor: pointer; padding: 9px 13px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); list-style: none; display: flex; align-items: center; gap: 9px; min-height: 40px; border-radius: 8px; } .disclose > summary::-webkit-details-marker { display: none; } .disclose > summary::before { content: ''; flex: none; width: 7px; height: 7px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); transition: transform .15s; } .disclose[open] > summary::before { transform: rotate(45deg); } .disclose > summary:hover { color: var(--ink); } .disclose > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .disclose[open] > summary { border-bottom: 1px solid var(--line); border-radius: 8px 8px 0 0; } .disclose > *:not(summary) { padding: 0 13px 11px; } .disclose .tablewrap table { margin-top: 10px; } /* tables whose cells hold sentences read as prose, not as numeric columns */ .tablewrap table.prose td { font-family: var(--font-body); white-space: normal; text-align: left; } .tablewrap table.prose th { text-align: left; white-space: normal; } .guide-sec { padding: 24px 28px; scroll-margin-top: 16px; } .guide-sec h2 { font-family: var(--font-display); font-size: 17px; letter-spacing: 0.05em; color: var(--ink); margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); } .guide-sec h3 { font-size: 14px; color: var(--accent); margin: 20px 0 8px; letter-spacing: 0.02em; } .guide-sec p { font-size: 14px; color: var(--ink-2); margin: 9px 0; max-width: 74ch; line-height: 1.62; } .guide-sec p.lead { font-size: 15.5px; color: var(--ink); } .guide-sec strong { color: var(--ink); } .guide-sec a { color: var(--accent); } .guide-sec code { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); background: rgba(120, 160, 210, 0.1); padding: 1px 5px; border-radius: 4px; } .bullets, .steps { margin: 10px 0 10px 20px; display: flex; flex-direction: column; gap: 7px; } .bullets li, .steps li { font-size: 14px; color: var(--ink-2); line-height: 1.6; max-width: 74ch; } .steps li { padding-left: 4px; } .callout { border-left: 3px solid var(--accent); background: rgba(55, 184, 216, 0.07); padding: 11px 14px; border-radius: 0 8px 8px 0; font-size: 13.5px; color: var(--ink-2); margin: 14px 0; } .callout strong { color: var(--accent); } .guide-legend { flex-direction: column; align-items: flex-start; gap: 7px; margin: 10px 0; } .guide-legend li { display: flex; align-items: center; font-size: 13.5px; } .guide-legend i { width: 12px; height: 12px; flex: none; } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; } .explain-card { border: 1px solid var(--line); border-radius: 9px; padding: 14px 16px; background: rgba(120, 160, 210, 0.04); } .explain-card h3 { margin-top: 0; } .diagram { width: 100%; height: auto; margin: 6px 0 10px; } .d-aisle { fill: rgba(120, 160, 210, 0.1); stroke: var(--line-strong); } .d-seat { fill: rgba(110, 140, 180, 0.1); stroke: var(--line-strong); } .d-occupied { fill: rgba(69, 217, 146, 0.2); stroke: #45d992; } .d-blocked { fill: #e8455c; } .d-stow { fill: #c68120; } .d-stand { fill: #e89b2e; } .d-window { fill: #3b93f0; } .d-bin { fill: none; stroke: var(--ink-3); } .d-line { stroke: var(--ink-3); stroke-dasharray: 2 2; } .d-arrow { stroke: #3b93f0; stroke-width: 1.5; fill: none; marker-end: none; } .d-label { fill: var(--ink-3); font-size: 9px; font-family: var(--font-mono); text-anchor: middle; } .fine { font-size: 12.5px !important; color: var(--ink-3) !important; } .gloss td, .gloss th, .mini td, .mini th { text-align: left; vertical-align: top; } .gloss td { font-family: var(--font-body) !important; font-size: 13px; padding: 9px 12px; line-height: 1.5; } .gloss td:first-child { font-weight: 600; white-space: nowrap; } .mini { border-collapse: collapse; width: 100%; font-size: 13px; margin: 10px 0; } .mini th, .mini td { padding: 7px 12px; border-bottom: 1px solid var(--line); } .mini th { color: var(--ink-3); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; } .mini td { color: var(--ink-2); } .notation { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; } .notation span { font-size: 12.5px; color: var(--ink-2); border: 1px solid var(--line); border-radius: 7px; padding: 5px 11px; background: rgba(120, 160, 210, 0.04); } .strat-card { border: 1px solid var(--line); border-radius: 9px; padding: 15px 18px; margin: 12px 0; background: rgba(120, 160, 210, 0.035); } .strat-card.feature { border-color: var(--amber); background: rgba(232, 155, 46, 0.06); } .strat-card h3 { margin: 0 0 6px; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .strat-card h4 { margin: 16px 0 6px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-2); border-top: 1px solid var(--line); padding-top: 12px; } .tag { font-family: var(--font-body); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); border: 1px solid var(--line-strong); border-radius: 999px; padding: 2px 9px; } .tag.gold { color: var(--amber); border-color: var(--amber); } .math { font-family: var(--font-mono) !important; font-size: 12.5px !important; background: rgba(120, 160, 210, 0.07); border-left: 2px solid var(--accent); padding: 9px 12px; border-radius: 0 6px 6px 0; line-height: 1.7 !important; } .verdict { font-size: 13px !important; } .verdict strong { color: var(--accent); } .formula-block { background: rgba(120, 160, 210, 0.07); border: 1px solid var(--line); border-radius: 8px; padding: 14px 18px; margin: 14px 0; } .formula-block p { font-family: var(--font-mono); font-size: 13px; margin: 5px 0; color: var(--ink); } .guide-footer { margin-top: 24px; } .guide-footer p { max-width: 74ch; } @media (max-width: 720px) { /* The guide's tables are prose, so stack them into labelled cards. The race table is numeric and only useful when its columns align, so that one keeps its shape and scrolls sideways instead (see below). */ .guide-body .tablewrap table { width: 100%; } .guide-body .tablewrap thead { display: none; } .guide-body .tablewrap tbody tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); } .guide-body .tablewrap tbody td { display: block; width: auto; text-align: left !important; padding: 2px 0; white-space: normal; border: 0; } .guide-body .tablewrap tbody td:first-child { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 3px; } .guide-body .tablewrap tbody td[data-label]:not(:first-child)::before { content: attr(data-label) ": "; color: var(--ink-3); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; margin-right: 4px; } .gloss td, .mini td { font-size: 12.5px; } /* Race table on a phone: compact, scrolls sideways, strategy name pinned so you always know which row you are reading. */ #race-table table { font-size: 11px; } #race-table th, #race-table td { padding: 6px 8px; } #race-table th:first-child, #race-table td:first-child { position: sticky; left: 0; z-index: 1; background: var(--panel-solid); box-shadow: 1px 0 0 var(--line); max-width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #race-table { position: relative; } #race-table::after { content: "swipe the table sideways for the rest of the columns"; display: block; font-size: 10.5px; color: var(--ink-3); padding: 6px 2px 0; letter-spacing: 0.02em; } .guide-sec { padding: 16px 14px; } .guide-sec p, .bullets li, .steps li { font-size: 13.5px; } .notation span { font-size: 11.5px; } .math { font-size: 11.5px !important; } } @media (max-width: 900px) { .guide-shell { grid-template-columns: 1fr; } .guide-toc { position: static; } .guide-toc nav { flex-direction: row; flex-wrap: wrap; } /* the contents list goes horizontal, so each group label needs its own line */ .guide-toc .toc-head { flex: 1 0 100%; padding: 8px 2px 4px; } .two-col { grid-template-columns: 1fr; } .guide-sec { padding: 18px 16px; } } /* ===== Brand as home link ===== */ a.brand { text-decoration: none; color: inherit; border-radius: 12px; } a.brand:hover .brand-mark { border-color: var(--accent); background: linear-gradient(145deg, rgba(55, 184, 216, 0.3), transparent); } a.brand:hover h1, a.brand:hover .wordmark { color: var(--accent); } a.brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } a.brand h1, a.brand .wordmark, a.brand .tagline { transition: color .15s; } /* ===== Aircraft selector ===== */ .wide-select { width: 100%; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--ink); background: var(--panel-solid); border: 1px solid var(--line-strong); border-radius: 8px; padding: 9px 10px; cursor: pointer; } .wide-select:hover { border-color: var(--accent); } .wide-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .aircraft-note { font-size: 11.5px; color: var(--ink-3); line-height: 1.5; margin: 7px 0 4px; border-left: 2px solid var(--line-strong); padding-left: 9px; } /* Empty-state hint: a quiet banner under the legend, never over the cabin */ .empty-hint { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; text-align: center; font-size: 12.5px; color: var(--ink-2); border-top: 1px dashed var(--line-strong); padding-top: 10px; margin-top: 2px; } #tooltip .tt-quirk { color: #e8d44d; font-weight: 600; } /* ===== Inline SVG icon set (replaces emoji glyphs) ===== */ .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .ic { width: 1.05em; height: 1.05em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.16em; } /* buttons that pair an icon with a label */ button .ic, .btn-link .ic { margin-right: 0.45em; } button.icon .ic, .btn-close .ic { margin-right: 0; } .brand-mark .ic { width: 24px; height: 24px; vertical-align: 0; stroke-width: 0; } .btn-close .ic { width: 0.95em; height: 0.95em; } /* medal colours for the top three finishers */ .medal-1 { color: #e8c15a; } .medal-2 { color: #b8c4d0; } .medal-3 { color: #cd8f5a; } .live-name .ic { margin-right: 0.35em; vertical-align: -0.2em; width: 1.15em; height: 1.15em; } .live-rank { font-style: normal; color: var(--ink-3); margin-right: 0.35em; font-family: var(--font-mono); font-size: 11px; } .pane-rank .ic { width: 1.1em; height: 1.1em; margin-right: 0.3em; vertical-align: -0.2em; } .scenario-verdict .ic { width: 1.2em; height: 1.2em; margin-right: 0.4em; vertical-align: -0.22em; } /* ===== Slim scrollbars (the cabin panes show one when a hair too tall) ===== */ #cabin-wrap, .pane-scroll, .tablewrap, .guide-main, #speed-group { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; } #cabin-wrap::-webkit-scrollbar, .pane-scroll::-webkit-scrollbar, .tablewrap::-webkit-scrollbar, #speed-group::-webkit-scrollbar { width: 7px; height: 7px; } #cabin-wrap::-webkit-scrollbar-track, .pane-scroll::-webkit-scrollbar-track, .tablewrap::-webkit-scrollbar-track, #speed-group::-webkit-scrollbar-track { background: transparent; } #cabin-wrap::-webkit-scrollbar-thumb, .pane-scroll::-webkit-scrollbar-thumb, .tablewrap::-webkit-scrollbar-thumb, #speed-group::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 999px; } @media (pointer: coarse) { .hint-key { display: none; } } /* score scale, shown inline next to the number it explains */ .score-note { font-size: 11.5px; color: var(--ink-3); margin: 8px 0 2px; max-width: 62ch; } /* short laptops: keep the control bar above the fold */ @media (max-height: 760px) and (min-width: 721px) { #cabin-wrap { height: min(56vh, 620px); } } /* inline text link styled as such (buttons inside prose) */ .linklike { display: inline; padding: 0; border: 0; background: none; min-height: 0; font: inherit; font-weight: 600; color: var(--accent); text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; } @media (pointer: coarse) { .linklike { min-height: 0; } }