:root{font-family:ui-rounded,"Trebuchet MS",system-ui,-apple-system,sans-serif;color:#eaf2ff;background:#0b1428;--susceptible:#59d5ff;--vaccinated:#68e49a;--infected:#ff6978;--recovered:#e6e925}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 20% 0%,#1b3460 0%,#0b1428 52%);min-height:100vh}.app{max-width:1480px;margin:auto;padding:22px clamp(12px,2.6vw,38px)}.hero{min-height:176px;position:relative;overflow:hidden;display:flex;align-items:center;background:linear-gradient(105deg,#182b56,#243d68 58%,#0e536a);border:1px solid #45648a;border-radius:23px;padding:24px 32px;box-shadow:0 15px 45px #030a164a;margin-bottom:19px}.hero:after{content:"";position:absolute;width:390px;height:390px;border:3px dashed #ffffff15;border-radius:50%;right:140px;top:-180px}.hero-copy{z-index:1}.eyebrow{color:#7dece2;font-size:11px;letter-spacing:3px;font-weight:900}.hero h1{font-size:clamp(50px,7vw,95px);line-height:.98;letter-spacing:-5px;margin:7px 0 0;font-weight:1000;color:#fff;text-shadow:5px 6px 0 #0c1838}.hero h1 span{color:#ffcf57}.subhead{margin:6px 0 10px;color:#ffc76a;font-weight:900;letter-spacing:3px;font-size:clamp(14px,2vw,22px)}.hero-copy>p:last-child{font-size:14px;color:#d8e8fb;margin:0}.hero-art{position:absolute;right:100px;width:min(39%,410px);opacity:.95;top:22px}.hero-art svg{width:100%}.hero-stamp{position:absolute;right:25px;top:25px;transform:rotate(9deg);background:#fcca49;color:#1b2750;font-size:13px;font-weight:bold;text-align:center;padding:15px;border-radius:14px;box-shadow:4px 5px 0 #b67431;z-index:2}.hero-stamp b{font-size:16px}.panel{background:#162440;border:1px solid #344767;border-radius:19px;padding:19px;min-width:0}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:18px;flex-wrap:wrap}.section-heading>div:first-child{display:flex;align-items:center;gap:11px}.section-heading h2{font-size:19px;letter-spacing:-.4px;margin:0}.step{background:#3d4c70;color:#c8ecff;display:grid;place-items:center;width:32px;height:32px;border-radius:10px;font-size:12px;font-weight:900}.hint,.graph-note{font-size:12px;color:#b7c7df}.setup{margin-bottom:17px}.control-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:17px 28px}.control{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:13px;font-weight:750;color:#d5e5f7}.control output{margin-left:auto;background:#28456a;border:1px solid #3c618d;padding:4px 8px;border-radius:7px;color:white;font-weight:bold;font-variant-numeric:tabular-nums}.control input[type=range]{width:100%;accent-color:#59d5ff;cursor:pointer;height:22px}.control select{width:100%;background:#233a5f;color:white;padding:10px;border:1px solid #54739b;border-radius:9px;cursor:pointer;font:inherit}.colour-panel{display:flex;gap:15px;align-items:center;justify-content:space-between;border-top:1px solid #324460;margin-top:17px;padding-top:15px;flex-wrap:wrap}.colour-heading{font-weight:900;color:#c8e4ff;font-size:12px;letter-spacing:1px}.colour-heading span{display:block;font-weight:400;letter-spacing:0;color:#a5b9d3;padding-top:4px}.colour-grid{display:flex;flex-wrap:wrap;gap:10px 19px}.colour-grid label{font-size:12px;display:flex;align-items:center;gap:7px;cursor:pointer}.colour-grid input{width:34px;height:31px;border:0;padding:0;background:none;cursor:pointer}.actions{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:16px}.actions button,.table-actions button{border:1px solid #6680a4;background:#2c4165;color:#f0f6ff;font-size:13px;font-weight:900;padding:11px 16px;min-height:42px;border-radius:10px;cursor:pointer}.actions .primary{background:#ffce4a;border:0;color:#16233a;box-shadow:0 3px 0 #b78a23;font-size:15px;padding:12px 22px}.actions button:hover:not(:disabled),.table-actions button:hover{filter:brightness(1.17)}button:disabled{opacity:.42;cursor:not-allowed}.status{margin-left:auto;color:#b8cce2;font-size:12px}.settings-note{font-size:11px;color:#8fa7c5;margin:13px 0 0}.experiment{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(270px,.85fr);gap:17px}.arena-wrap{display:flex;flex-direction:column}.time-pill{font-size:12px;background:#283b59;border-radius:50px;padding:8px 11px;font-weight:bold;color:#f7d98d}.arena-container{position:relative;overflow:hidden;border:2px solid #435979;border-radius:13px;flex:1;min-height:295px;background:#0e1c35}.arena-container canvas{display:block;width:100%;height:auto;aspect-ratio:920/500}.arena-overlay{position:absolute;inset:0;background:#0d1a32ab;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:9px;pointer-events:none;padding:15px}.arena-overlay b{font-size:clamp(18px,3vw,32px);color:#ffe08b}.arena-overlay span{font-size:13px}.arena-overlay.hidden{display:none}.arena-corner{position:absolute;top:12px;left:12px;border-radius:6px;background:#101e37ca;font-size:9px;font-weight:900;letter-spacing:1px;padding:6px 9px;color:#b6cde3}.live-dot{display:inline-block;background:#55e7a3;border-radius:50%;width:7px;height:7px;margin-left:5px;vertical-align:middle}.arena-legend{display:flex;gap:9px 17px;flex-wrap:wrap;margin-top:13px;font-size:12px;color:#d8e8f8}.arena-legend span{display:flex;align-items:center;gap:7px}.arena-legend i{background:#fff;display:inline-block;width:12px;height:12px;border-radius:50%}.stats{display:grid;grid-template-columns:1fr 1fr;gap:11px}.stat{background:#203353;border:1px solid #365174;border-radius:12px;padding:12px;min-width:0}.stat>span{font-size:10px;letter-spacing:.7px;font-weight:900;color:#bdd2e8}.stat strong{font-size:33px;display:block;margin:2px 0;font-variant-numeric:tabular-nums}.stat-track{height:5px;border-radius:5px;background:#102039;overflow:hidden}.stat-track i{display:block;height:100%;width:0;background:var(--bar-color);transition:width .3s}.stat[data-kind=susceptible]{--bar-color:var(--susceptible)}.stat[data-kind=vaccinated]{--bar-color:var(--vaccinated)}.stat[data-kind=infected]{--bar-color:var(--infected)}.stat[data-kind=recovered]{--bar-color:var(--recovered)}.highlight-stats{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.highlight-stats div{background:#10203a;border:1px solid #2b4564;border-radius:10px;padding:10px}.highlight-stats small{font-size:10px;color:#94b0ce;display:block;line-height:1.4}.highlight-stats strong{font-size:24px;color:#ffda78}.explain{background:#243a5b;border-left:3px solid #6ee5d9;border-radius:8px;padding:12px;margin-top:13px;font-size:12px;line-height:1.5}.explain p{margin:5px 0 0;color:#c2d4e9}.bottom{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:17px;margin-top:17px}.graph-panel canvas{width:100%;height:auto;display:block}.graph-note{margin-top:6px}.results-panel>p{font-size:13px;line-height:1.5;color:#c5d6ed}.table-scroll{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:12px;white-space:nowrap}th{text-align:left;background:#283d60;color:#aedaee;padding:11px 8px}td{padding:12px 8px;border-bottom:1px solid #344762}tbody tr:nth-child(odd){background:#1b2d49}.empty{text-align:center;color:#9eb3ce;padding:30px}.table-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:16px}.table-actions button{font-size:12px;padding:9px 12px}.teacher-note{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:19px 0;border:1px dashed #576f95;background:#10213b;padding:18px;border-radius:15px}.teacher-note b{font-size:13px;color:#ffdd8c}.teacher-note p{font-size:12px;color:#c1d3e7;line-height:1.6;margin:8px 0 0}footer{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:11px 3px;color:#88a5c6;font-size:11px}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #ffcf57;outline-offset:3px}@media(max-width:1050px){.experiment{grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr)}.bottom{grid-template-columns:1fr}}@media(max-width:750px){.app{padding:10px}.hero{padding:24px 17px;min-height:175px}.hero-art{right:0;opacity:.23;width:70%}.hero-stamp{right:14px;top:12px;transform:scale(.72) rotate(9deg);transform-origin:top right}.hero-copy>p:last-child{max-width:255px}.control-grid{grid-template-columns:1fr 1fr}.experiment{grid-template-columns:1fr}.panel{padding:14px}.teacher-note{grid-template-columns:1fr}.status{margin-left:0;width:100%}}@media(max-width:420px){.control-grid{grid-template-columns:1fr;gap:13px}.hero h1{letter-spacing:-3px}.hero-stamp{display:none}.arena-legend{font-size:10px}.actions button{flex:1 1 auto}.colour-grid{gap:8px}}

/* v1.1: experiment duration and completed run */
.timer-settings{display:flex;align-items:end;flex-wrap:wrap;gap:14px;padding:15px 17px;margin:17px 0;border:1px solid #426184;border-radius:16px;background:#132b49}
.timer-control{min-width:260px;flex:1}.timer-settings .control{min-width:200px}.timer-settings select,.timer-settings input[type=number]{width:100%;padding:10px;border-radius:9px;border:1px solid #517095;background:#10203b;color:#fff}
.timer-settings [hidden],.completion[hidden]{display:none!important}.repeat-toggle{display:flex;gap:9px;align-items:center;font-size:13px;max-width:290px;color:#dbebfc}.repeat-toggle input{width:19px;height:19px;accent-color:#3de7bd}.timer-help{flex-basis:100%;margin:0;color:#aac8df;font-size:12px}
.countdown-area{margin:10px 0 13px;padding:12px 16px;border-radius:14px;background:#132b48;border:1px solid #36577a}.countdown-info{display:flex;justify-content:space-between;gap:12px}.countdown-info>div{display:flex;flex-direction:column;gap:3px}.countdown-info>div:last-child{text-align:right}.countdown-info small,.completion-results small{font-size:11px;font-weight:800;letter-spacing:.08em;color:#accee4}.countdown-info strong{font-size:24px;letter-spacing:.05em;font-variant-numeric:tabular-nums;color:#fff}.countdown-track{height:12px;overflow:hidden;border-radius:30px;background:#304867;margin-top:11px}.countdown-track>div{height:100%;width:0;background:linear-gradient(90deg,#29d9be,#5db7ff);transition:width .12s linear}.countdown-label{display:flex;justify-content:space-between;gap:8px;font-size:10px;font-weight:800;letter-spacing:.05em;color:#9dbad3;margin-top:5px}
.completion{padding:16px;border:1px solid #3c9a82;background:#153e43;border-radius:14px;margin-top:15px}.completion h3{margin:0 0 6px;color:#abffdd}.completion p{margin:7px 0;color:#d7f5ee;font-size:13px}.completion-results{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:12px 0}.completion-results>div{display:flex;flex-direction:column;background:#103039;border-radius:9px;padding:10px}.completion-results b{font-size:22px;color:#fff}
.control input:disabled,.control select:disabled,.timer-settings select:disabled,.timer-settings input:disabled{opacity:.58;cursor:not-allowed}
@media(max-width:600px){.timer-control{min-width:100%}.timer-settings .control{min-width:100%}.countdown-info strong{font-size:20px}}

.wall-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:9px 0}.wall-tools strong{font-size:12px;color:#ffd67b;margin-right:5px}.wall-tools button{border:1px solid #56799d;background:#263e63;color:#eef8ff;padding:9px 12px;border-radius:9px;font-weight:800;font-size:12px;cursor:pointer;min-height:40px}.wall-tools button[aria-pressed=true]{background:#ffce4a;color:#12203a;border-color:#ffce4a}.wall-tools #wallCount{font-size:12px;color:#b6d9ef;margin-left:auto}.wall-tip{color:#a7c6dc;font-size:12px;margin:0 0 9px}.arena-container.wall-draw canvas{cursor:crosshair;touch-action:none}.arena-container.wall-straight canvas{cursor:crosshair;touch-action:none}.arena-container.wall-erase canvas{cursor:cell;touch-action:none}.arena-container.wall-draw .arena-overlay,.arena-container.wall-straight .arena-overlay,.arena-container.wall-erase .arena-overlay{display:none}.arena-container.wall-draw .arena-corner,.arena-container.wall-straight .arena-corner,.arena-container.wall-erase .arena-corner{pointer-events:none}.arena-container.wall-draw,.arena-container.wall-straight,.arena-container.wall-erase{user-select:none}

.quarantine-switch{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:#e9f5ff;background:#263e63;border-radius:9px;padding:8px 10px;flex-wrap:wrap}.quarantine-switch input{width:19px;height:19px;accent-color:#ffce4a}.quarantine-switch span{font-size:11px;font-weight:500;color:#b2d9ee}.arena-container.walls-disabled .arena-corner{border:1px solid #7c8ea1}.arena-corner #motionIndicator{color:#ffe08b}
/* v1.4 freehand drawing */
.wall-tools{border-top:1px solid #345070;padding-top:13px}.wall-tools button[aria-pressed=true]{box-shadow:0 0 0 2px #f4e09f35}.wall-tools #wallUndo{border-color:#7f779f}.arena-container.wall-draw,.arena-container.wall-straight{outline:2px solid #f7c66155;outline-offset:2px}.wall-tip{line-height:1.5}.arena-container.wall-draw canvas,.arena-container.wall-straight canvas,.arena-container.wall-erase canvas{-webkit-user-select:none;user-select:none}

/* ════════════════════════════════════════════════════════════
   v1.5 | SINGLE-SCREEN SCIENCE LAB + SETUP / RESULTS OVERLAYS
   ════════════════════════════════════════════════════════════ */
:root { color-scheme:dark; }
body { background: radial-gradient(ellipse at 5% -25%, #284d78 0%, #0c172b 48%, #0a1224 100%); }
.app { max-width: 1660px; padding: 12px clamp(10px,1.5vw,25px) 6px; }
.hero.hero-compact { min-height: 93px; margin-bottom: 10px; padding: 12px 24px; border-radius: 18px; box-shadow: none; background:linear-gradient(105deg,#142747 0%,#1d3960 57%,#13526b 100%); }
.hero-compact .hero-art { width: 220px; right: 35%; top: -6px; opacity: .45; pointer-events:none; }
.hero-compact .hero-art svg { height:105px; }
.hero-compact .hero-copy { position:relative; z-index:1; }
.hero-compact .eyebrow { font-size: 9px; letter-spacing: 1.8px; }
.hero-compact h1 { font-size: clamp(34px,3.6vw,54px); letter-spacing:-2.6px; margin:2px 0 1px; }
.hero-compact .subhead { font-size: 11px; margin: 2px 0; letter-spacing: 2px; }
.hero-compact .hero-nav { margin-left:auto; z-index:3; display:flex; align-items:center; gap:8px; }
.nav-button { background:#122741c9; border:1px solid #7796b278; color:#f1f8ff; min-height:41px; border-radius:10px; padding:7px 13px; font-size:13px; font-weight:850; cursor:pointer; white-space:nowrap; }
.nav-button:hover {background:#2d5376;}
.nav-count { display:inline-flex; justify-content:center; align-items:center; background:#fbd471; color:#23314a; min-width:20px; height:19px; font-size:11px; border-radius:8px; margin-left:3px; }
.sim-command { display:grid; grid-template-columns:minmax(0,auto) auto minmax(120px,1fr) auto; gap:9px 16px; align-items:center; min-height:69px; padding:10px 16px; margin-bottom:10px; border-radius:16px; background:#1a2a45; }
.run-actions {display:flex; gap:7px; flex-wrap:wrap;}
.run-actions button {background:#294261; border:1px solid #597798; color:#f1f8ff; border-radius:9px; padding:8px 10px; font-size:12px; font-weight:900; min-height:39px; cursor:pointer; white-space:nowrap;}
.run-actions button:hover:not(:disabled){background:#345677;}
.run-actions #pauseBtn:not(:disabled){background:#facf64;color:#1a2b3d;border-color:#facf64;}
.run-actions #compareBtn:not(:disabled){background:#1f685d;border-color:#379788;}
.clock-box{display:flex; gap:7px; align-items:center; border-left:1px solid #426080; padding-left:15px; font-variant-numeric:tabular-nums; white-space:nowrap;}
.clock-label{font-size:9px; color:#9fc0da; font-weight:900; letter-spacing:1px;}
.clock-box>strong{font-size:25px; font-weight:950; color:#ffe29e; letter-spacing:-1px;}
.elapsed-label{display:flex; flex-direction:column; gap:2px;}
.elapsed-label b {font-size:11px;color:#f1f8ff;letter-spacing:0;}
.mini-progress{display:flex; flex-direction:column; gap:5px; min-width:100px;}
.mini-progress #timeProgress{height:8px;background:#304968;border-radius:99px;overflow:hidden;}
.mini-progress #timeProgressFill{width:0;height:100%;background:linear-gradient(90deg,#4bf4bc,#57bbff);transition:width .12s linear;}
.mini-progress #durationLabel{text-align:right;font-size:9px;letter-spacing:.5px;color:#a9c6d9;font-weight:800;}
.sim-command #status { margin:0; font-size:11px; line-height:1.4; text-align:right; color:#cbdcf3; max-width:170px; }
.live-layout {display:grid; grid-template-columns:minmax(0,1.7fr) minmax(340px,.9fr); align-items:stretch; gap:10px;}
.live-layout .panel{border-radius:16px;}
.stage{display:flex;flex-direction:column;padding:14px 15px 12px;min-width:0;gap:0;}
.stage-head{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-bottom:8px;}
.stage-overline{display:block;color:#75dacb;font-size:9px;font-weight:900;letter-spacing:1.5px;margin-bottom:5px;}
.stage-head h2,.side-heading h2{font-size:clamp(16px,1.55vw,20px);margin:0;letter-spacing:-.3px;line-height:1.15;}
.stage-hint{color:#a2bad4;font-size:11px;white-space:nowrap;}
.motion-pill{display:none;}
.quarantine-bar .wall-tools{margin:5px 0 8px;border-top:1px solid #345070; padding:8px 0 0; gap:6px;}
.quarantine-bar .wall-tools strong{font-size:10px;letter-spacing:1px;}
.quarantine-bar .wall-tools button{font-size:11px;padding:7px 9px;min-height:35px;border-radius:8px;}
.quarantine-bar .quarantine-switch{padding:6px 9px;border-radius:8px;font-size:11px;}
.quarantine-bar .quarantine-switch input{width:17px;height:17px;}
.quarantine-bar .quarantine-switch span{font-size:10px;}
.quarantine-bar .wall-tools #wallCount{font-size:11px;margin:0;white-space:nowrap;}
.stage .wall-tip{font-size:11px;margin:0 0 8px;line-height:1.3;color:#b4cce0;}
.stage .arena-container{flex:0 0 auto; min-height:0; border:2px solid #5b7595; box-shadow:0 0 0 3px #0c1930; border-radius:13px;}
.stage .arena-container canvas{width:100%;height:auto;aspect-ratio:920/500;}
.stage .arena-overlay b {font-size:clamp(18px,3vw,32px);}
.stage .arena-legend{margin:0;gap:10px 16px;}
.legend-row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:11px;flex-wrap:wrap;}
.legend-row .people-hint{white-space:nowrap;color:#bdd3e6;font-size:11px;font-weight:750;}
.circle-live{display:inline-block;width:7px;height:7px;background:#70e8b0;border-radius:50%;}
.insights{display:flex;flex-direction:column;gap:10px;min-width:0;}
.insights .panel{padding:12px 15px;}
.side-heading{margin-bottom:10px;}
.side-heading .stage-overline{font-size:9px;margin-bottom:4px;}
.side-heading h2{font-size:16px;}
.stats-board .stats{gap:7px;}
.stats-board .stat{padding:9px 12px;min-height:76px;border-radius:9px;}
.stats-board .stat>span{font-size:9px;letter-spacing:.5px;}
.stats-board .stat strong{font-size:27px;margin:0;line-height:1.3;}
.stats-board .stat-track{height:4px;}
.stats-board .highlight-stats{gap:7px;margin-top:9px;}
.stats-board .highlight-stats div{padding:7px 10px;border-radius:9px;}
.stats-board .highlight-stats small{font-size:9px;line-height:1.25;}
.stats-board .highlight-stats strong{font-size:20px;}
.stats-board .explain{margin-top:9px;padding:7px 10px;font-size:11px;line-height:1.35;border-left-width:2px;}
.stats-board .explain p{margin:2px 0 0;}
.stats-board .completion{padding:10px;margin-top:10px;}
.stats-board .completion h3{font-size:15px;}
.stats-board .completion p{font-size:12px;}
.stats-board .completion-results{margin:7px 0;gap:5px;}
.stats-board .completion-results>div{padding:6px;}
.stats-board .completion-results small{font-size:9px;}
.stats-board .completion-results b{font-size:17px;}
.trend-board{display:flex;flex-direction:column;flex:1;min-height:0;}
.trend-board canvas{width:100%;height:auto;aspect-ratio:960/300;border-radius:7px;background:#10203b;}
.trend-board .graph-foot{font-size:10px;color:#a9c5df;margin:6px 0 0;text-align:right;}
.footer-caption{font-size:11px;color:#8da9c3;text-align:center;margin:10px auto 2px;}
.footer-caption button{border:0;background:transparent;text-decoration:underline;color:#b6e9e3;font:inherit;cursor:pointer;}
.app footer{font-size:10px;padding:4px 2px;}
/* Overlays */
.modal-shell{position:fixed;inset:0;z-index:1000;display:flex;justify-content:center;align-items:center;padding:clamp(10px,3vh,30px) clamp(10px,2vw,24px);}
.modal-shell[hidden],.modal-shell:not(.is-open){display:none!important;}
.modal-backdrop{position:absolute;inset:0;background:#030813d9;backdrop-filter:blur(7px);}
.modal-card{position:relative;z-index:1;display:flex;flex-direction:column;width:min(100%,1020px);max-height:96vh;min-height:0;overflow:hidden;border-radius:22px;border:1px solid #6795ad;background:#172b48;box-shadow:0 22px 95px #000b;}
.modal-top{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;padding:23px 28px 15px;background:linear-gradient(100deg,#1c3a5f,#155365);border-bottom:1px solid #53758e;}
.modal-eyebrow{font-weight:900;font-size:10px;color:#8ef4df;letter-spacing:1.9px;}
.modal-top h2{font-size:32px;letter-spacing:-1.2px;color:#fff;margin:5px 0;}
.modal-top p{font-size:13px;color:#d6e9fa;margin:4px 0 0;}
.modal-close{background:#0d243caa;border:1px solid #7fa5bf;color:#fff;border-radius:10px;width:40px;height:40px;cursor:pointer;font-size:17px;flex-shrink:0;}
.modal-close[hidden]{display:none!important;}
.modal-card .setup-content{padding:21px 28px 16px;overflow-y:auto;min-height:0;}
.setup-content .control-grid{gap:20px 28px;}
.setup-content .timer-settings{margin:18px 0;padding:14px 15px;gap:12px;}
.setup-content .colour-panel{margin-top:0;}
.setup-content .settings-note{margin-bottom:0;}
.modal-footer{padding:13px 28px 18px;display:flex;justify-content:space-between;align-items:center;gap:14px;background:#10213a;border-top:1px solid #43617d;}
.modal-footer p,.modal-footer span{font-size:12px;color:#b7cadf;margin:0;line-height:1.45;}
.setup-footer-actions{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end;}
.launch-btn{border:0;border-radius:11px;background:#ffcf58;color:#14223a;padding:12px 20px;min-height:45px;font-weight:950;font-size:15px;cursor:pointer;box-shadow:0 4px 0 #af8128;}
.launch-btn:disabled{opacity:.48;box-shadow:none;}
.muted-btn{border:1px solid #7997b8;background:#29435f;color:#fff;padding:10px 14px;min-height:40px;border-radius:9px;font-size:12px;font-weight:900;cursor:pointer;}
.muted-btn[hidden]{display:none!important;}
.results-modal{width:min(100%,1130px);}
.results-modal>.results-panel{background:transparent;border:0;border-radius:0;padding:18px 26px;overflow-y:auto;}
.results-modal .results-panel .section-heading{margin-bottom:8px;}
.results-modal .results-panel .section-heading h2{display:none;}
.results-modal .results-panel .step{display:none;}
.results-modal .results-panel>p{margin:0 0 18px;}
.info-modal{width:min(100%,900px);overflow-y:auto;}
.info-modal .teacher-note{margin:20px 25px;}
.info-modal .help-guide{margin:0 25px 22px;border:1px solid #466481;border-radius:12px;padding:14px;color:#bed1e6;line-height:1.5;}
.info-modal .help-guide h3{color:#ffdd8c;margin:0 0 8px;}
.info-modal .help-guide p{margin:0;font-size:13px;}
.visually-hidden{position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
@media(max-width:1320px){
 .sim-command{grid-template-columns:minmax(0,1fr) auto minmax(95px,.6fr);}
 .sim-command #status{grid-column:1/-1;justify-self:end;max-width:none;}
 .live-layout{grid-template-columns:minmax(0,1.6fr) minmax(340px,.88fr);}
 .stage-hint{display:none;}
 .quarantine-bar .wall-tools strong{flex-basis:100%;}
 .quarantine-bar .wall-tools{gap:5px;}
 .quarantine-bar .wall-tools button{min-height:34px;padding:6px 8px;}
}
@media(max-width:970px){
 .live-layout{grid-template-columns:minmax(0,1fr);}
 .insights{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;}
 .trend-board{height:100%;}
 .trend-board canvas{aspect-ratio:960/430;}
 .sim-command{grid-template-columns:1fr auto;}
 .sim-command .mini-progress{grid-column:1/-1;}
 .sim-command #status{grid-column:1/-1;}
}
@media(max-width:680px){
 .app{padding:8px 8px 4px;}
 .hero.hero-compact{min-height:88px;padding:11px 13px;}
 .hero-compact .hero-art{right:20px;opacity:.25;width:175px;}
 .hero-compact h1{font-size:36px;}
 .hero-compact .eyebrow{font-size:8px;letter-spacing:1px;}
 .hero-compact .subhead{font-size:9px;letter-spacing:1.1px;}
 .hero-compact .hero-nav{gap:4px;}
 .nav-button{padding:6px 8px;min-height:37px;font-size:14px;}
 .nav-button>span:not(.nav-count){display:none;}
 .sim-command{padding:9px;gap:7px;}
 .run-actions{gap:5px;}
 .run-actions button{font-size:11px;padding:6px 8px;min-height:37px;}
 .clock-box{padding-left:8px;}
 .clock-box>strong{font-size:21px;}
 .insights{grid-template-columns:1fr;}
 .stage{padding:10px;}
 .stage .wall-tip{font-size:10px;}
 .legend-row .arena-legend{gap:5px 9px;}
 .legend-row .arena-legend span{font-size:10px;}
 .modal-shell{padding:8px;align-items:center;}
 .modal-top{padding:18px 17px 13px;}
 .modal-top h2{font-size:27px;}
 .modal-card .setup-content{padding:15px 17px;}
 .modal-footer{padding:12px 17px;flex-direction:column;align-items:stretch;}
 .modal-footer p{max-width:100%;}
 .setup-footer-actions{justify-content:stretch;}
 .setup-footer-actions button{flex:1;}
 .setup-content .control-grid{grid-template-columns:1fr 1fr;gap:14px;}
 .setup-content .timer-settings{margin:12px 0;}
 .results-modal>.results-panel{padding:15px;}
}
@media(max-width:420px){.setup-content .control-grid{grid-template-columns:1fr;gap:9px}.hero-compact .subhead{max-width:180px}.sim-command{grid-template-columns:1fr}.clock-box{border-left:0;padding-left:0}.run-actions button{flex:1}.quarantine-bar .wall-tools{gap:5px}}
body.modal-open{overflow:hidden}

/* Maintain the population canvas proportions at laptop screen sizes. */
.stage .arena-container canvas{aspect-ratio:920/420}
/* Maximise time spent looking at data: all primary science is in the first view. */
@media (min-width: 1100px) {
  .quarantine-bar .wall-tools>strong{display:none}
  .quarantine-bar .wall-tools{flex-wrap:wrap}
  .quarantine-bar .wall-tools button{padding:7px 8px}
  .stats-board .explain{display:none}
  .stats-board .completion-results{display:none}
}
/* Projector / laptop layout: keep the graph and counters visible at 768px. */
@media (min-width:1100px) and (max-height:820px) {
 .app{padding-top:7px}
 .hero.hero-compact{min-height:77px;padding:8px 20px;margin-bottom:7px}
 .hero-compact h1{font-size:42px}
 .hero-compact .hero-art svg{height:88px}
 .hero-compact .eyebrow{font-size:8px}
 .hero-compact .subhead{font-size:9px}
 .sim-command{min-height:56px;padding:7px 12px;margin-bottom:7px}
 .run-actions button{min-height:35px;padding:6px 9px}
 .stage{padding:10px 12px}
 .stage-head{margin-bottom:6px}
 .stage .wall-tip{display:none}
 .quarantine-bar .wall-tools{margin:2px 0 7px;padding-top:7px}
 .side-heading{margin-bottom:6px}
 .insights .panel{padding:9px 12px}
 .stats-board .stat{min-height:64px;padding:5px 9px}
 .stats-board .stat strong{font-size:23px}
 .stats-board .highlight-stats{margin-top:7px}
 .stats-board .highlight-stats div{padding:5px 8px}
 .stats-board .highlight-stats strong{font-size:17px}
 .trend-board canvas{aspect-ratio:960/260}
 .footer-caption,.app footer{display:none}
}

/* v1.6 – outbreak investigations */
[hidden]{display:none!important}
:root{--exposed:#ffc85b}
.stat[data-kind=exposed]{--bar-color:var(--exposed)}
.disease-stage-panel{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:11px 18px;align-items:center;background:#233b5c;border:1px solid #58749b;padding:14px 16px;border-radius:14px;margin-top:17px}
.stage-switch{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:13px;cursor:pointer}
.stage-switch input{width:20px;height:20px;accent-color:#5ce6b6}
.stage-switch strong{font-size:13px;color:#fff}
.stage-switch>span{flex-basis:100%;font-size:11px;color:#b9d0e9}
.disease-stage-panel .control{font-size:12px}.disease-stage-panel p{grid-column:1/-1;margin:0;font-size:11px;line-height:1.4;color:#adbed6}
.investigate-bar{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin:-1px 0 7px}
.investigate-bar button{min-height:34px;background:#24415d;border:1px solid #6681a3;color:#eaf4ff;border-radius:8px;padding:6px 10px;cursor:pointer;font-weight:850;font-size:11px}
.investigate-bar button[aria-pressed=true]{background:#ecba55;color:#102039;border-color:#fff0a0}
.investigate-bar button:disabled{opacity:.4}
.investigate-bar button span{display:inline-grid;place-items:center;background:#324f77;color:#e7efff;min-width:17px;border-radius:5px;margin-left:3px}
.investigate-tip{flex:1;min-width:140px;text-align:right;font-size:10px;line-height:1.15;color:#a5c4dc}
.hotspot-palette{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:6px;border-radius:12px;background:#122b45;border:1px solid #426483;margin:0 0 8px}
.hotspot-palette button{display:flex;align-items:center;gap:5px;background:#244260;border:1px solid #5d809d;color:#fff;border-radius:8px;font-size:11px;font-weight:800;padding:5px 8px;cursor:pointer}
.hotspot-palette img{width:28px;height:28px}
.palette-label{color:#abcbe2;font-size:10px;font-weight:800;padding:0 4px}
.hotspot-editor{background:#1b354f;border:1px solid #698aa7;padding:9px 12px;margin-bottom:8px;border-radius:10px}
.editor-title{display:flex;align-items:center;gap:9px;font-size:12px}.editor-title img{height:34px;width:34px}.editor-title span{color:#b2d3ec;margin-left:auto}.editor-title button{color:#fff;background:#3a5271;border:1px solid #779db5;border-radius:6px;cursor:pointer;padding:5px 8px}
.hotspot-editor-fields{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:7px;font-size:11px;color:#d1e5f5}
.hotspot-editor-fields label{display:flex;align-items:center;gap:5px}.hotspot-editor-fields input[type=range]{width:76px;accent-color:#5cd3ee}.hotspot-editor-fields output{min-width:24px;color:#ffdc85;font-weight:bold}
.hotspot-editor-fields input[type=checkbox]{accent-color:#56e0ad;width:17px;height:17px}.hotspot-editor-fields button{cursor:pointer;padding:7px 9px;border:1px solid #ee9ea9;border-radius:7px;background:#4e2c42;color:#fff}
.hotspot-editor-fields #hotspotStats{color:#b7cee0}
.arena-container.hotspot-add canvas{cursor:crosshair;touch-action:none}.arena-container.wall-inspect canvas{cursor:pointer;touch-action:none}
.trace-inspector{position:absolute;top:35px;right:9px;width:min(245px,55%);max-height:calc(100% - 44px);overflow-y:auto;background:#0d1b34f2;border:1px solid #8fb7d4;border-radius:13px;padding:11px;z-index:5;box-shadow:0 5px 22px #000a;font-size:11px;color:#e1eefd}
.trace-inspector-head{display:flex;justify-content:space-between;align-items:center;gap:5px}.trace-inspector-head strong{color:#ffdb84;font-size:17px}.trace-inspector-head button{background:#283f62;color:#fff;border:1px solid #6286a6;border-radius:7px;padding:5px 8px;cursor:pointer}
.trace-inspector>p{color:#89e9c7;font-weight:850;margin:3px 0 8px}.person-details{margin:0}.person-details>div{display:flex;justify-content:space-between;gap:6px;padding:4px 0;border-bottom:1px solid #3a5170}.person-details dt{color:#adc6df}.person-details dd{margin:0;text-align:right;font-weight:800;max-width:135px}.trace-section{margin-top:8px}.trace-section>b{font-size:10px;color:#ffda87}.trace-links{display:flex;align-items:center;gap:4px;flex-wrap:wrap;margin-top:5px}.trace-links button{border:1px solid #4f8496;background:#284e60;color:#eafffb;font-size:10px;padding:4px 6px;border-radius:6px;cursor:pointer}.trace-links button.selected-person{border-color:#ffe58b;background:#786438}.trace-links span{color:#bdd2e6}
@media(min-width:1100px){.stats-board .stats{grid-template-columns:repeat(3,minmax(0,1fr))}.stats-board .stat{padding:6px 8px;min-height:61px}.stats-board .stat strong{font-size:22px}.stats-board .stat>span{font-size:8px}.investigate-tip{display:none}.investigate-bar{margin:0 0 5px}.investigate-bar button{padding:5px 8px;min-height:30px}}
@media(min-width:1100px) and (max-height:820px){.stage .investigate-bar button{font-size:10px;min-height:29px}.stage .investigate-bar{margin:0 0 4px}.stage .hotspot-palette{padding:3px}.stage .hotspot-palette img{width:22px;height:22px}.hotspot-editor{padding:6px 8px}}
@media(max-width:680px){.investigate-bar button{flex:1 1 auto}.investigate-tip{display:none}.hotspot-palette .palette-label:last-child{flex-basis:100%}.disease-stage-panel{grid-template-columns:1fr}.disease-stage-panel p{grid-column:auto}.trace-inspector{width:min(220px,66%);font-size:10px}.hotspot-editor-fields{gap:8px}}
.coverage-label{display:block;color:#a4bed9;font-size:10px;margin-top:3px;font-weight:700}
.coverage-label b{color:#bceadb}

/* v1.7 — infection-tracing modes (stay within the single-screen layout) */
.trace-mode-switch{display:inline-flex;gap:2px;flex-wrap:wrap;align-items:center;padding:2px;background:#152b45;border:1px solid #5d789a;border-radius:9px;}
.investigate-bar .trace-mode-switch button{border:0;background:transparent;color:#d7eaff;min-height:28px;padding:5px 8px;border-radius:7px;font-weight:850;font-size:11px;white-space:nowrap;}
.investigate-bar .trace-mode-switch button[aria-pressed="true"]{background:#f9ce69;color:#14233b;box-shadow:inset 0 0 0 1px #ffeaa9;}
.investigate-bar .trace-mode-switch #followLatestBtn{background:#28516c;color:#c8fff3;box-shadow:none;border:1px solid #79b5ad;}
.trace-banner{pointer-events:none;position:absolute;z-index:4;left:9px;top:8px;max-width:calc(100% - 32px);width:max-content;box-sizing:border-box;background:#0a1b33ec;border:1px solid #80acc9;border-left:4px solid #ffd672;color:#e9f7ff;font-size:11px;line-height:1.25;font-weight:800;padding:6px 9px;border-radius:8px;box-shadow:0 3px 12px #0005;}
@media(min-width:1100px){.investigate-bar .trace-mode-switch button{font-size:10px;padding:4px 7px;min-height:26px}.trace-banner{font-size:10px}}
@media(max-width:700px){.investigate-bar .trace-mode-switch{width:100%;justify-content:space-around}.investigate-bar .trace-mode-switch button{flex:1}.trace-banner{font-size:9px;max-width:85%}}
@media (min-width:1100px) and (max-height:820px) {
  /* Keep the three trace controls, animation and graph visible on a projector. */
  .stage .arena-container canvas { aspect-ratio:920/380; }
}
@media (min-width:1100px) and (max-height:820px) {
  .stats-board .completion {padding:6px 9px;margin-top:5px;border-radius:10px;}
  .stats-board .completion h3 {font-size:12px;margin:0 0 2px;}
  .stats-board .completion p {font-size:10px;margin:0;line-height:1.3;}
}

/* v1.8 — The map never has a tracing overlay. Person details occupy a genuine
   second column at desktop widths, and reflow below the map on small screens. */
.arena-trace-layout{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:10px;min-width:0;}
.arena-trace-layout.is-inspecting{grid-template-columns:minmax(0,1fr) minmax(210px,245px);}
.arena-trace-layout .arena-container{min-width:0;width:100%;}
.arena-trace-layout .trace-inspector{position:static;top:auto;right:auto;width:100%;max-height:390px;min-width:0;overflow-y:auto;background:#10233d;border:1px solid #6689a7;border-radius:13px;padding:11px;z-index:auto;box-shadow:none;font-size:11px;color:#e1eefd;}
.arena-trace-layout .trace-inspector[hidden]{display:none!important;}
.arena-trace-layout .trace-inspector:focus-within{outline:1px solid #ffdd83;outline-offset:1px;}
.trace-banner{position:static;z-index:auto;width:100%;max-width:100%;box-shadow:none;margin:0 0 8px;min-height:25px;pointer-events:auto;}
.trace-banner[hidden]{display:none!important;}
.trace-direction-switch{display:inline-flex;gap:2px;flex-wrap:wrap;align-items:center;padding:2px;background:#152b45;border:1px solid #5d789a;border-radius:9px;}
.trace-direction-switch[hidden]{display:none!important;}
.investigate-bar .trace-direction-switch button{border:0;background:transparent;color:#d7eaff;min-height:28px;padding:5px 7px;border-radius:7px;font-weight:850;font-size:10px;white-space:nowrap;}
.investigate-bar .trace-direction-switch button[aria-pressed="true"]{background:#a9eece;color:#17354a;}
.trace-inspector .trace-section{border-top:1px solid #395371;padding-top:7px;margin-top:9px;}
.trace-generation{margin-top:6px;}
.trace-generation>small{color:#a6c7e1;font-size:10px;font-weight:800;display:block;margin:3px 0 4px;}
.trace-generation .trace-links{margin:0;}
.trace-generation .trace-links button{font-size:10px;}
.trace-level-arrow{display:block;color:#cbe6f8;font-weight:900;margin:4px 0 0;}
@media(max-width:1250px){.arena-trace-layout.is-inspecting{grid-template-columns:minmax(0,1fr) minmax(192px,220px)}.arena-trace-layout .trace-inspector{max-height:370px;}}
@media(max-width:1050px){.arena-trace-layout.is-inspecting{grid-template-columns:minmax(0,1fr)}.arena-trace-layout .trace-inspector{max-height:none;overflow:visible;}.trace-inspector .person-details{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}.arena-trace-layout .trace-inspector{font-size:12px}}
@media(max-width:600px){.trace-inspector .person-details{grid-template-columns:1fr}.investigate-bar .trace-direction-switch{width:100%;justify-content:center}.investigate-bar .trace-direction-switch button{flex:1;white-space:normal}}
@media (min-width:1100px) and (max-height:820px){
  /* A long transmission tree scrolls INSIDE the trace panel rather than
     pushing the single-screen graph off the projector. */
  .arena-trace-layout .trace-inspector{max-height:350px;}
}
@media (min-width:1100px) {
  .arena-trace-layout .trace-inspector{max-height:350px;}
}

/* Chemisode catalogue navigation — preserve the Outbreak simulation layout. */
.outbreak-back { display:inline-block;margin-top:3px;color:#9cf3ea;font-size:11px;font-weight:850;text-decoration:underline;text-underline-offset:3px;position:relative;z-index:4; }
.outbreak-back:hover,.outbreak-back:focus-visible {color:#fff;outline:2px solid #ffcf57;outline-offset:3px;border-radius:2px;}
/* Do not let the site's shared footer inherit Outbreak's generic footer styles. */
body > .chemisode-global-footer {max-width:calc(100% - 24px);margin:8px auto 14px;}