/* Science Weise HUD, rebuilt from code-defined geometry (1920 x 1080).
   All panels and the progress track are real DOM elements; no background plate. */
:root{--night:#050c16;--base:#0b1522;--panel:#0a1523;--cyan:#68ddf2;--ice:#c5faff;--gold:#f0c87f;--white:#edf8ff;--mint:#a5e8d1;--quiet:#92afbd;--edge:#2b6375}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#040a12;color:var(--white);font-family:'Rajdhani','Segoe UI',sans-serif}
#viewport{position:fixed;inset:0;overflow:hidden;background:radial-gradient(circle at 50% 46%,#172436 0%,#08121e 66%,#040810 100%)}
#hud{position:absolute;width:1920px;height:1080px;top:0;left:0;transform-origin:0 0;padding:42px 42px 38px;display:grid;grid-template-rows:116px 584px 148px 98px;gap:18px;isolation:isolate;background:radial-gradient(ellipse at 63% 43%,#0e2030 0%,#06101d 56%,#040b16 100%);overflow:hidden}
.hud-grid{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.22;background:repeating-linear-gradient(90deg,transparent 0,transparent 63px,rgba(83,181,201,.13) 64px),repeating-linear-gradient(0deg,transparent 0,transparent 63px,rgba(83,181,201,.09) 64px)}
#hud::after{content:"";pointer-events:none;position:absolute;inset:0;z-index:9;background:linear-gradient(180deg,transparent 0%,rgba(104,221,242,.045) 50%,transparent 100%);height:220px;animation:scan 11s linear infinite;mix-blend-mode:screen}
@keyframes scan{from{transform:translateY(-220px)}to{transform:translateY(1080px)}}
@media(prefers-reduced-motion:reduce){#hud::after{animation:none;opacity:0}.meter-fill{transition:none!important}}
.panel{position:relative;min-width:0;min-height:0;clip-path:polygon(0 0,calc(100% - 23px) 0,100% 23px,100% 100%,23px 100%,0 calc(100% - 23px));background:linear-gradient(130deg,#1f788c 0%,#58d3e4 12%,#244658 24%,#36556b 62%,#e4bc7c 94%,#e4bc7c 100%);overflow:hidden}
.panel::before{content:"";position:absolute;inset:2px;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));background:linear-gradient(140deg,rgba(19,37,53,.97),rgba(6,16,29,.97) 58%,rgba(7,19,31,.96)),url('../assets/hex-grid.svg');z-index:0}
.panel::after{content:"";position:absolute;pointer-events:none;z-index:0;left:20px;right:34px;top:6px;height:2px;background:linear-gradient(90deg,transparent,rgba(107,240,255,.68),transparent);box-shadow:0 0 17px rgba(104,221,242,.21)}
.panel-content{position:relative;z-index:1;height:100%;min-width:0;min-height:0}
.panel-label{display:flex;align-items:center;gap:10px;font-family:Orbitron,'Segoe UI',sans-serif;font-size:21px;font-weight:600;letter-spacing:1.3px;white-space:nowrap;color:var(--gold);line-height:1.22}
.panel-label.cyan{color:var(--cyan)}.panel-label.amber{color:var(--gold)}
.label-dashes{color:var(--cyan);font-size:11px;letter-spacing:4px;opacity:.64}
/* Header: CSS grid puts the date at the true center independent of title / clock widths. */
.header{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;padding:22px 32px 18px;gap:12px}
.header::before{background:linear-gradient(160deg,#122638,#0b1827 76%,#0b1827)}
.header .brand,.header .header-date,.header .header-time{position:relative;z-index:1}
.brand-kicker{display:block;margin:0 0 4px;font-family:Orbitron,sans-serif;font-size:14px;letter-spacing:2px;color:var(--cyan)}.brand-kicker .line-label{font-size:12px;color:#8dc5d0;margin-left:9px}
.brand-name{color:var(--gold);font-family:Orbitron,Arial,sans-serif;font-size:38px;letter-spacing:3px;font-weight:700;white-space:nowrap;line-height:1.1}.brand-slashes{color:var(--cyan);font-size:29px}
.header-date{text-align:center;color:var(--ice);font-size:30px;font-weight:600;white-space:nowrap;letter-spacing:.3px}
.header-time{font-family:Orbitron,Consolas,monospace;text-align:right;color:var(--ice);font-size:48px;font-weight:800;letter-spacing:1px;white-space:nowrap;line-height:1.3;font-variant-numeric:tabular-nums}
.header-beam{position:absolute;width:290px;height:4px;top:4px;left:calc(50% - 145px);background:#7cefff;box-shadow:0 0 13px #5cdeef,0 0 29px rgba(104,221,242,.7);z-index:2;pointer-events:none}
/* Main region uses 3 true columns and independently sized sub-panels. */
.main-layout{min-height:0;display:grid;grid-template-columns:312px minmax(0,1fr) 342px;gap:18px}
.left-stack,.center-stack,.countdown-stack{min-width:0;min-height:0;display:grid;gap:18px}
.left-stack{grid-template-rows:440px 126px}.center-stack{grid-template-rows:152px 414px}.countdown-stack{grid-template-rows:repeat(3,minmax(0,1fr))}
.calendar-panel::before{background:linear-gradient(155deg,rgba(14,34,46,.96),rgba(5,17,29,.96)),url('../assets/hex-grid.svg')}
.calendar-content{padding:25px 23px 14px;display:flex;flex-direction:column}
.calendar-month{margin:0 0 14px;font-family:Orbitron,sans-serif;color:var(--ice);font-size:28px;letter-spacing:2px;line-height:1.3;text-align:center;font-weight:700}
.calendar-weekdays,.calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;text-align:center}
.calendar-weekdays{border-top:1px solid rgba(104,221,242,.3);padding-top:12px;margin-bottom:6px;font-size:17px;line-height:21px;font-weight:700;letter-spacing:.2px;color:#82ddec}
.calendar-days{grid-auto-rows:31px;align-content:start}
.cal-cell{font-family:Consolas,monospace;font-size:18px;line-height:31px;color:#cadfeb;border:1px solid rgba(104,221,242,.13);background:rgba(13,31,47,.32)}.cal-cell.empty{border-color:transparent;background:none}.cal-cell.today{background:#8ce5ee;border-color:#b7ffff;color:#071420;font-weight:900;box-shadow:0 0 12px rgba(104,221,242,.48)}
.school-badge-slot{margin-top:auto;padding-top:8px;min-height:102px;display:flex;align-items:center;justify-content:center;border-top:1px solid rgba(104,221,242,.13);background:radial-gradient(ellipse at 50% 60%,rgba(32,83,96,.18),transparent 68%)}
.mode-panel .panel-content{padding:19px 24px 14px}.mode-panel .panel-label{font-size:21px}
.mode-value{margin-top:10px;color:var(--white);font-family:Orbitron,'Segoe UI',sans-serif;font-size:31px;letter-spacing:.5px;line-height:1.05;font-weight:700;white-space:nowrap}
.mode-detail{margin-top:3px;font-family:Orbitron,Arial,sans-serif;color:var(--mint);font-size:16px;line-height:1.2;letter-spacing:1px}.mode-detail:empty{display:none}
/* Directive has one large title; question has generous wrap space. */
.directive-panel .panel-content{padding:23px 32px 19px}.signal-icon{font-size:29px;line-height:0;color:var(--cyan)}
.lesson-title{margin:13px 0 0;color:var(--gold);font-family:Orbitron,Arial,sans-serif;font-size:53px;letter-spacing:.8px;font-weight:700;line-height:1.15;text-transform:uppercase;overflow-wrap:break-word}
.directive-rule{position:absolute;left:33px;right:40px;bottom:17px;height:2px;background:linear-gradient(90deg,rgba(104,221,242,.6),rgba(104,221,242,.15))}.directive-rule span{display:block;background:var(--gold);height:2px;width:125px;box-shadow:0 0 10px rgba(240,200,127,.45)}
.objective-panel .panel-content{padding:26px 34px 30px}.objective-rule{height:1px;background:linear-gradient(90deg,rgba(240,200,127,.58),rgba(104,221,242,.07));margin:14px 0 28px}
.objective-text{margin:0;color:var(--white);font-family:Consolas,'Courier New',monospace;font-size:48px;line-height:1.2;max-width:1050px;overflow-wrap:break-word;white-space:pre-wrap;text-shadow:0 0 14px rgba(104,221,242,.1)}.objective-text::before{content:'> ';color:var(--cyan)}
.schematic{position:absolute;bottom:23px;right:25px;opacity:.3;display:flex;gap:16px;align-items:center;pointer-events:none}.schematic-label{font-family:Orbitron,sans-serif;letter-spacing:1.5px;color:var(--cyan);font-size:12px}.atom{display:block;position:relative;width:42px;height:23px;border:1px solid var(--cyan);border-radius:50%;transform:rotate(45deg)}.atom::before{content:"";position:absolute;inset:-1px;border:1px solid var(--cyan);border-radius:50%;transform:rotate(85deg)}.atom span{position:absolute;background:var(--gold);width:6px;height:6px;border-radius:50%;left:17px;top:8px}
/* Counters reserve real space. Long labels stay up top; large digits live below. */
.counter-panel .panel-content{padding:25px 23px 15px;display:flex;flex-direction:column;align-items:stretch}
.counter-panel .panel-label{font-size:18px;letter-spacing:.45px}
.count-number{font-family:Orbitron,Arial,sans-serif;font-weight:800;color:var(--gold);font-size:85px;line-height:1;margin:auto 4px 7px 0;text-align:right;font-variant-numeric:tabular-nums;text-shadow:0 0 15px rgba(240,200,127,.16)}
.count-rule{width:88%;align-self:flex-end;height:2px;background:linear-gradient(90deg,transparent,rgba(104,221,242,.5))}
.seniors-panel::after{background:linear-gradient(90deg,transparent,rgba(240,200,127,.58),transparent)}
/* Wide communication strip, with actual logo and text containers. */
.communication .panel-content{padding:19px 31px}.communication-inner{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:center;gap:22px}
.logo-hex{width:104px;height:104px;position:relative;display:grid;place-items:center;clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);background:linear-gradient(135deg,var(--gold),var(--cyan));filter:drop-shadow(0 0 10px rgba(104,221,242,.16))}
.logo-hex::before{content:"";inset:3px;position:absolute;clip-path:inherit;background:#071522}.logo-hex img{position:relative;width:87px;height:87px;object-fit:cover;border-radius:50%;z-index:1}
.communication-copy{min-width:0}.communication-copy .panel-label{font-size:21px;gap:21px}.comms-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(104,221,242,.48),transparent)}
.comm-message{margin-top:13px;color:#fff1d9;font-size:32px;font-weight:600;font-style:italic;line-height:1.13;overflow-wrap:break-word}
/* Real rail and fill share DOM geometry, no painted bar to chase. */
.status .panel-content{padding:13px 21px}.status-inner{display:grid;grid-template-columns:262px 151px minmax(0,1fr) 86px 250px;gap:17px;align-items:center}
.status-label{color:var(--gold);font-family:Orbitron,Arial,sans-serif;font-size:23px;font-weight:600;white-space:nowrap;letter-spacing:.3px}.status-kicker{display:block;margin-top:3px;font-family:Rajdhani,Arial,sans-serif;font-size:14px;letter-spacing:2px;color:#81bac6}
.status-min{color:var(--gold);font-family:Orbitron,Arial,sans-serif;font-size:28px;white-space:nowrap;font-weight:800;font-variant-numeric:tabular-nums}
.meter{position:relative;height:26px;overflow:hidden;border:1px solid rgba(104,221,242,.62);background:linear-gradient(180deg,#06131c,#152634);box-shadow:inset 0 0 12px rgba(4,12,19,.7),0 0 7px rgba(104,221,242,.17)}
.meter-fill{height:100%;width:37%;background:linear-gradient(180deg,#ffde83,#d99f46);box-shadow:0 0 18px rgba(240,200,127,.35);transition:width .8s linear}
.status-percent{font-family:Orbitron,Arial,sans-serif;font-size:25px;font-weight:700;color:var(--ice);text-align:right}
.icons{display:flex;align-items:center;justify-content:flex-end;gap:10px}.icon{width:54px;height:54px;display:grid;place-items:center;border:1px solid rgba(104,221,242,.34);background:linear-gradient(145deg,#0d2538,#08202c);color:#8ae5ef}.icon svg{height:35px;width:35px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}

/* Live data behavior: keep the fourth-marking-period-only senior counter out of the layout. */
.seniors-panel[hidden]{display:none!important}
.countdown-stack.two-counters{grid-template-rows:repeat(2,minmax(0,1fr))}
.data-status{position:absolute;bottom:10px;right:50px;max-width:1200px;text-align:right;font-family:Orbitron,Consolas,monospace;font-size:12px;letter-spacing:1px;white-space:nowrap;color:#71cbbd;opacity:.82;z-index:8}
.data-status.warning{color:#f0c87f}