/* Header/footer contours and floating dock adapted from knight-L/sc-datav Demo1.
   Modified 2026-10-19 for campus controls; license: /licenses/sc-datav/LICENSE.txt */
header{height:100px;background:url('/assets/datav/header-contour.svg') center top/100% 100% no-repeat;border:0;padding:0;pointer-events:none}header:after{display:none}.header-right{position:absolute;inset:0;width:auto;max-width:none;display:block;margin:0;pointer-events:none}.header-right>*{pointer-events:auto}.school-logo{position:absolute;right:26px;top:15px;width:214px;margin:0;filter:none}.header-right .phase-name{position:absolute;left:27px;top:34px;font-size:13px;letter-spacing:1px;color:#a3c1e5}.header-right #fullscreen{position:absolute;right:260px;top:34px;margin:0;padding:0;font-size:11px;color:#92b0d6}.screen-title{left:23%;right:23%;top:16px;display:flex;justify-content:center;align-items:baseline;gap:13px;text-align:center;white-space:nowrap}.screen-title h1{margin:0;font-size:26px;font-weight:650;line-height:1.5;letter-spacing:3px;text-shadow:0 3px 12px #479bff66;color:#e6f4ff}.screen-title p{font-size:18px;font-weight:500;letter-spacing:2px;margin:0;color:#98ccff;text-shadow:0 3px 12px #3287e944}.screen-vignette{inset:100px 0 0}.dock-contour{position:fixed;left:0;right:0;bottom:0;height:116px;background:url('/assets/datav/footer-contour.svg') center bottom/100% 100% no-repeat;z-index:3;pointer-events:none}.tools{left:50%;right:auto;top:auto;bottom:24px;transform:translateX(-50%);flex-direction:row;gap:25px;align-items:flex-end;z-index:6}.tools button{position:relative;display:grid;place-items:center;flex:none;width:57px;height:57px;min-height:57px;padding:0;border:1px solid #418cdd;border-radius:11px;background:linear-gradient(135deg,#2476c7,#16498e);color:#e4f4ff;box-shadow:0 5px 22px #197df44d,inset 0 1px 0 #a5d4ff55;transition:transform .25s,background .25s,box-shadow .25s,border-color .25s}.tools button svg{width:24px;height:24px;display:block;pointer-events:none}.tools button>span{position:absolute;bottom:calc(100% + 12px);left:50%;transform:translateX(-50%);opacity:0;pointer-events:none;white-space:nowrap;background:#0a203be8;border:1px solid #3977b7;color:#d8edff;font-size:12px;line-height:1.4;padding:5px 10px;border-radius:4px;transition:opacity .18s}.tools button:hover,.tools button:focus-visible{transform:translateY(-6px);border-color:#92d5ff;background:linear-gradient(135deg,#398ee4,#205fb4);color:white;box-shadow:0 7px 27px #248eff70,inset 0 1px 0 #bcdeff66}.tools button:hover>span,.tools button:focus-visible>span{opacity:1}.tools button.active{background:linear-gradient(135deg,#42a6ff,#276cdc);border-color:#8dceff;color:white;box-shadow:0 6px 24px #2994ff70,inset 0 1px 0 #daf0ff66}.tools button:disabled{opacity:.45}.tools #clean-view svg{width:27px;height:27px}body.clean-view .tools{display:flex}body.clean-view .tools button{display:none}body.clean-view .tools #clean-view{display:grid}body.clean-view .dock-contour{display:none}body.clean-view header{background:transparent}body.clean-view #fullscreen{right:26px}.directory-panel,.view-panel,.overview-panel{z-index:4}
@media(min-width:1800px){header{height:108px}.screen-title{top:19px;gap:17px}.screen-title h1{font-size:30px;letter-spacing:4px}.screen-title p{font-size:22px;letter-spacing:3px}.school-logo{width:246px;top:16px}.header-right #fullscreen{right:292px;top:39px}.header-right .phase-name{top:39px}.dock-contour{height:132px}.tools{bottom:26px;gap:30px}.tools button{width:65px;height:65px;min-height:65px;border-radius:13px}.tools button svg{width:28px;height:28px}.screen-vignette{top:108px}}
@media(max-width:1200px) and (min-width:761px){.screen-title{left:23%;right:23%;top:21px;gap:9px}.screen-title h1{font-size:20px;letter-spacing:1px}.screen-title p{font-size:14px;letter-spacing:1px}.school-logo{width:170px;right:19px;top:24px}.header-right .phase-name{font-size:11px;left:20px;top:35px}.header-right #fullscreen{right:205px;top:36px}.tools{gap:22px}.tools button{width:52px;height:52px;min-height:52px}.dock-contour{height:110px}}
@media(max-width:760px){header{height:99px;background-size:175% 100%}.screen-title{display:block;white-space:normal;top:13px;left:16px;right:150px;text-align:left}.screen-title h1{font-size:19px;line-height:1.4;letter-spacing:1px}.screen-title p{font-size:10px;letter-spacing:.5px;margin-top:3px}.school-logo{right:16px;top:16px;width:127px}.header-right .phase-name{left:16px;top:66px;font-size:10px}.header-right #fullscreen{right:19px;top:66px;font-size:10px}.dock-contour{height:105px;background-size:220% 100%}.tools{left:50%;right:auto;top:auto;bottom:23px;transform:translateX(-50%);flex-direction:row;gap:15px}.tools button{width:48px;height:48px;min-height:48px;border-radius:10px}.tools button svg{width:22px;height:22px}.tools button>span{font-size:10px;padding:4px 7px}.guide-dock{bottom:122px}.guide-expand{bottom:128px}.screen-vignette{top:99px}body.clean-view #fullscreen{right:19px}}
@media(max-width:370px){.screen-title{right:130px}.screen-title h1{font-size:16px}.screen-title p{font-size:9px}.school-logo{width:108px}.tools{gap:12px}.tools button{width:44px;height:44px;min-height:44px}.tools button svg{width:21px;height:21px}.dock-contour{height:96px}}
@media(prefers-reduced-motion:reduce){.tools button{transition:none}}
@media(max-width:760px){.header-right .phase-name{display:none}.header-right #fullscreen{top:79px}}
/* Quieter title hierarchy; the school name is already carried by its logo. */
.screen-title{top:20px;left:24%;right:24%;display:flex;align-items:center;justify-content:center;gap:0;min-height:39px}.screen-title h1{font-size:27px;font-weight:600;line-height:1.4;letter-spacing:3px;text-shadow:0 2px 14px #559bff29;color:#e7f1ff}.school-logo{right:29px;top:12px;width:211px;opacity:.94}.header-right .phase-name{left:27px;top:24px;padding:6px 12px;border:1px solid #41659340;border-radius:4px;background:#172b4433;font-size:12px;letter-spacing:.5px;color:#a3b9d4}.phase-name:before{box-shadow:0 0 7px #3493ff77;margin-right:9px;width:4px;height:4px}.header-right #fullscreen{right:266px;top:24px;width:34px;height:34px;display:grid;place-items:center;padding:0;border:1px solid #40649055;border-radius:5px;background:#17324f33;color:#9ebcde;transition:background .2s,border-color .2s,color .2s}.header-right #fullscreen svg{width:17px;height:17px}.header-right #fullscreen:hover{color:#e3f3ff;background:#264d7959;border-color:#6096c2}.header-right #fullscreen:focus-visible{outline:2px solid #82c6f1;outline-offset:3px}.header-right #fullscreen[aria-pressed=true]{color:#b3dcff;border-color:#6bb2ef88;background:#24486c55}body.clean-view .header-right #fullscreen{right:29px}
@media(min-width:1800px){.screen-title{top:23px}.screen-title h1{font-size:31px;letter-spacing:4px}.school-logo{width:239px;top:12px;right:32px}.header-right #fullscreen{right:300px;top:29px;width:36px;height:36px}.header-right .phase-name{top:29px;left:32px;font-size:13px}}
@media(max-width:1200px) and (min-width:761px){.screen-title{top:23px;left:24%;right:24%}.screen-title h1{font-size:21px;letter-spacing:1.5px}.school-logo{width:174px;right:21px;top:20px}.header-right #fullscreen{right:218px;top:28px;width:30px;height:30px}.header-right .phase-name{left:20px;top:29px;font-size:10px;padding:5px 9px}}
@media(max-width:760px){.screen-title{top:18px;left:17px;right:159px;min-height:0;justify-content:flex-start;text-align:left;white-space:normal}.screen-title h1{font-size:18px;letter-spacing:1px;line-height:1.55;max-width:210px}.school-logo{width:128px;top:20px;right:16px}.header-right .phase-name{display:none}.header-right #fullscreen{top:66px;right:16px;width:28px;height:28px;background:#0b2036;z-index:1}.header-right #fullscreen svg{width:15px;height:15px}body.clean-view .header-right #fullscreen{right:16px}}
@media(max-width:370px){.screen-title{right:143px}.screen-title h1{font-size:15px;letter-spacing:.5px}.school-logo{width:111px;top:21px;right:16px}}
/* Compact screens use a centered title without the school logo. */
@media(max-width:760px){.school-logo{display:none}.screen-title{left:48px;right:48px;top:21px;justify-content:center;text-align:center;white-space:nowrap}.screen-title h1{max-width:none;font-size:19px;letter-spacing:1px;line-height:1.5}}
@media(max-width:370px){.screen-title{left:30px;right:30px;top:23px}.screen-title h1{font-size:17px;letter-spacing:.5px}}