/* HAT Physics SmartBoard 0.6.1 | Focus Workspace
   Interface-only layer: board, input and legacy IDs remain unchanged. */
:root{--ux-bg:#101d2a;--ux-ink:#edf9ff;--ux-surface:#162c3b;--ux-line:#34576a;--ux-accent:#57d6c0;--ux-sky:#63c9ee;--ux-shadow:0 14px 48px #031019a8}
body.hat061-ux{font-family:Inter,'Segoe UI',system-ui,sans-serif;background:var(--ux-bg)}
body.hat061-ux header{height:58px;min-height:58px;overflow:visible;gap:10px;padding:5px clamp(6px,1.1vw,18px);background:linear-gradient(90deg,#10202e,#173041 60%,#10202f);border-bottom:1px solid #345363;position:relative;z-index:29}
body.hat061-ux header .brand{flex:0 0 auto;min-width:0;line-height:1.05;padding-right:clamp(3px,.7vw,14px);white-space:nowrap}
body.hat061-ux header .brand strong{font-size:clamp(12px,1.12vw,16px);font-weight:750;letter-spacing:-.25px}
body.hat061-ux header .brand small{display:block;font-size:10px;line-height:1.4;color:#8cb4bc}
#hat061HeaderBar{display:flex;align-items:center;justify-content:flex-end;gap:6px;flex:1;min-width:0}
#hat061HeaderBar>button,#hat061HeaderBar .ux-top-button{border:1px solid transparent;display:inline-flex;gap:7px;align-items:center;justify-content:center;background:transparent;color:#d5ebf0;min-height:40px;min-width:39px;padding:8px 10px;border-radius:10px;font-size:12px;white-space:nowrap;transition:background .16s,border-color .16s}
#hat061HeaderBar>button:hover,#hat061HeaderBar .ux-top-button:hover{background:#254858;border-color:#436d7c}
#hat061HeaderBar>button.ux-primary{background:#156e73;border:1px solid #50bfb8;color:#fff;font-weight:750}
#hat061HeaderBar>button.ux-selected,#hat061HeaderBar .ux-selected{background:#286079!important;border-color:#73bfc8!important}
#hat061HeaderBar button .ux-label{font-size:12px}
#hat061HeaderBar #saveStatus{font-size:10px}
#hat061HeaderBar .ux-top-divider{width:1px;height:24px;background:#4a6674;margin:0 2px;flex:0 0 1px}
#hat061More{position:relative}
#hat061MoreMenu{position:absolute;right:0;top:calc(100% + 10px);width:min(300px,92vw);z-index:110;display:grid;gap:7px;padding:12px;border:1px solid #527b89;background:#163140;border-radius:15px;box-shadow:var(--ux-shadow);white-space:normal}
#hat061MoreMenu[hidden]{display:none!important}
#hat061MoreMenu>button,#hat061MoreMenu .group button{width:100%;min-height:40px;text-align:left}
#hat061MoreMenu .group{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
#hat061MoreMenu .group button{font-size:11px;text-align:center;padding:5px}
#hat061MoreMenu small{font-size:11px;color:#acc6cc}
body.hat061-ux main{height:calc(100dvh - 92px);width:100vw;min-width:0;display:flex}
body.hat061-ux .stage{width:100%;min-width:0;flex:1;isolation:isolate}
body.hat061-ux #board{touch-action:none}
body.hat061-ux #toolbar{position:fixed;left:10px;top:68px;bottom:auto;max-height:calc(100dvh - 150px);width:min(256px,calc(100vw - 30px));padding:12px;background:linear-gradient(155deg,#193948,#112a38);z-index:85;border:1px solid #547887;border-radius:15px;display:block;overflow-y:auto;box-shadow:var(--ux-shadow);transition:opacity .15s,transform .15s}
body.hat061-ux:not(.hat061-tools-open) #toolbar{opacity:0;pointer-events:none;transform:translateX(-20px)}
body.hat061-ux #hat039ToolGroups{display:grid!important;gap:10px}
body.hat061-ux .hat039ToolGroup{padding:8px;border-radius:12px;border:1px solid #456575;background:#1b3544;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;align-items:center}
body.hat061-ux .hat039ToolCaption{grid-column:1/-1;font-size:11px;color:#95c6d1;margin:1px 3px 4px;font-weight:750;text-transform:uppercase;letter-spacing:.08em}
body.hat061-ux #toolbar button[data-tool]{width:auto;min-width:0;min-height:46px;border-radius:10px;padding:6px 1px;font-size:22px;background:#213b4b;border:1px solid #405f6e}
body.hat061-ux #toolbar button[data-tool].active{background:#147e82;outline:2px solid #79daca;color:white}
body.hat061-ux #panel{position:fixed;top:67px;bottom:44px;right:10px;width:min(365px,calc(100vw - 25px));max-height:none;z-index:75;background:#183240;border:1px solid #567788;box-shadow:var(--ux-shadow);border-radius:16px;padding:14px;overflow-y:auto;transition:opacity .16s,transform .16s}
body.hat061-ux.hat061-panel-collapsed #panel{transform:translateX(20px);opacity:0;pointer-events:none;visibility:hidden}
body.hat061-ux #panel h3{font-size:14px;letter-spacing:.1px}
body.hat061-ux #panel section{box-shadow:none}
#hat061PanelClose{position:sticky;top:0;margin-left:auto;display:block;z-index:2;background:#286078;color:white;font-weight:600;padding:7px 10px;border:1px solid #4f9bba}
body.hat061-ux #hat039Find{position:sticky;top:39px;z-index:2;background:#0e2535}
body.hat061-ux #panel .hat039Group summary{min-height:37px}
body.hat061-ux .status{height:34px;gap:7px;background:#101f2d;border-top:1px solid #375367;position:relative;z-index:20;padding:0 10px}
body.hat061-ux .status button{font-size:13px;padding:3px 9px;min-height:26px}
body.hat061-ux .status #saveStatus{margin-left:4px;max-width:22vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body.hat061-ux #hatInkOptions{display:none!important}
body.hat061-ux #hatInputBar{bottom:44px;left:9px;opacity:.65;z-index:4;font-size:10px;padding:5px;transition:opacity .15s}
body.hat061-ux #hatInputBar:hover{opacity:1}
body.hat061-ux .hat-studio{right:12px;top:65px;bottom:44px;width:min(355px,calc(100vw - 18px));z-index:55}
body.hat061-ux #hatDock{bottom:41px;z-index:30;box-shadow:0 7px 26px #0018;background:#102736ed;border:1px solid #598b95;padding:5px;border-radius:14px;left:50%;right:auto;max-width:calc(100vw - 25px)}
body.hat061-ux #hatDock button{min-width:45px;min-height:43px;border-radius:10px;border-color:transparent;background:transparent;font-size:18px;padding:5px 8px;transition:opacity .14s,background .14s}
body.hat061-ux #hatDock button:hover{background:#286175}
body.hat061-ux #hatDock button small{color:#b6dce2;line-height:1.1}
body.hat061-ux #hatDock button[aria-pressed=true]{background:#66d9c1!important;color:#0b2c30!important;font-weight:800}
body.hat061-ux #hatDock button[aria-pressed=true] small{color:#0d4346}
body.hat061-ux.hat061-inking #hatDock{opacity:.16;pointer-events:none;transition:opacity .15s}
#hat061InkBar{position:absolute;top:12px;left:12px;z-index:19;display:flex;align-items:center;gap:7px;padding:7px 10px;background:#102b3be9;border:1px solid #527a82;box-shadow:0 5px 23px #0005;border-radius:13px;max-width:calc(100% - 24px);min-height:48px;transition:opacity .15s}
#hat061InkBar[hidden]{display:none!important}
#hat061InkBar .ux-ink-title{font-size:11px;font-weight:800;color:#9acdd3;white-space:nowrap}
#hat061InkBar .ux-color{width:26px;height:26px;border:2px solid #d6e3e95e;padding:0;border-radius:50%;flex:0 0 26px}
#hat061InkBar .ux-color.selected{outline:2px solid var(--ux-accent);outline-offset:1px;border-color:#edf}
#hat061InkBar .ux-size{font-size:12px;padding:4px 7px;min-height:31px;border:1px solid #456271;white-space:nowrap}
#hat061InkBar .ux-size.selected{background:#317c86;border-color:#8bdfd0}
#hat061InkBar button{min-width:25px}
#hat061InkBar .ux-ink-split{height:24px;width:1px;background:#577685}
#hat061Selection{position:absolute;top:12px;right:12px;z-index:18;display:flex;gap:5px;align-items:center;max-width:calc(100% - 22px);padding:7px;background:#143b4bdc;border:1px solid #5d9eb0;border-radius:12px;box-shadow:0 5px 22px #0018}
#hat061Selection[hidden]{display:none!important}
#hat061Selection .ux-selection-title{max-width:145px;min-width:0;color:#b5e4eb;white-space:nowrap;font-size:12px;overflow:hidden;text-overflow:ellipsis}
#hat061Selection button{font-size:12px;padding:7px 8px;min-height:33px;background:#214e62;border:1px solid #4a8b99}
#hat061Selection button.ux-danger{color:#ffe2df;border-color:#7a5961}
#hat061Inspector{position:fixed;right:12px;top:65px;bottom:45px;width:min(330px,calc(100vw - 24px));z-index:91;padding:12px;background:#1b3544;border:1px solid #548596;border-radius:16px;box-shadow:var(--ux-shadow);display:flex;flex-direction:column}
#hat061Inspector[hidden]{display:none!important}
#hat061Inspector .ux-inspector-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #416577;padding-bottom:10px;margin-bottom:5px;font-weight:750}
#hat061Inspector .ux-inspector-body{overflow:auto;flex:1}
#hat061Inspector #selectedPanel{display:block;padding:4px}
#hat061Inspector #selectedPanel.hidden{display:none!important}
#hat061Inspector label{display:block;font-size:12px;color:#c3dae0;margin:10px 0 4px}
#hat061Inspector input,#hat061Inspector select{width:100%;padding:8px 10px;background:#0e2938;color:#fff;border:1px solid #577b85;border-radius:8px}
#hat061Inspector input[type=checkbox],#hat061Inspector input[type=range]{width:auto}
#hat061Inspector .row{display:flex;gap:7px;flex-wrap:wrap}
#hat061Inspector .row button{flex:1}
#hat061Zoom{position:absolute;right:12px;bottom:66px;z-index:18;display:flex;gap:5px;align-items:center;border-radius:12px;padding:5px;border:1px solid #436b79;background:#102a3bd4;box-shadow:0 4px 17px #0006}
#hat061Zoom button{min-width:37px;min-height:37px;padding:7px;font-size:18px}
#hat061Zoom span{min-width:50px;text-align:center;font-size:11px;font-variant-numeric:tabular-nums;color:#e5fcff}
#hat061Help{position:fixed;inset:0;z-index:1004;background:#0009;display:grid;place-items:center;padding:12px}
#hat061Help[hidden]{display:none!important}
#hat061Help>div{width:min(660px,96vw);max-height:92vh;overflow:auto;padding:20px;border:1px solid #648c99;border-radius:18px;background:#173442;box-shadow:var(--ux-shadow)}
#hat061Help .ux-help-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
#hat061Help kbd{border-radius:5px;border:1px solid #6c9298;background:#264c5b;padding:2px 6px;color:#f7fbff}
#hat061Help .ux-help-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#hat061Help .ux-help-grid p{margin:6px 0;font-size:13px}
.hat061-status-note{position:absolute;left:12px;bottom:64px;z-index:18;pointer-events:none;color:#e5fafa;background:#133748dd;border-radius:9px;padding:6px 9px;font-size:11px;opacity:0;transition:opacity .2s}
.hat061-status-note.on{opacity:1}
body.hat061-ux :is(button,input,select,textarea):focus-visible{outline:2px solid #89ebd3!important;outline-offset:2px}
body.hat061-ux button:active{transform:translateY(1px)}
body.hat061-ux .hat-presentation #hat061InkBar{display:none}
@media(max-width:1040px){#hat061HeaderBar button .ux-label{display:none}body.hat061-ux header .brand{max-width:180px}body.hat061-ux #hatDock{bottom:42px}#hat061InkBar .ux-ink-title{display:none}}
@media(max-width:700px){body.hat061-ux header{height:54px;min-height:54px}body.hat061-ux header .brand strong{font-size:12px}body.hat061-ux header .brand small{display:none}#hat061HeaderBar{gap:2px}#hat061HeaderBar>button{min-width:33px;min-height:40px;padding:6px}#hat061HeaderBar>button:nth-of-type(n+5):not(.ux-mobile-show){display:none}#hat061HeaderBar .ux-top-divider{display:none}body.hat061-ux main{height:calc(100dvh - 88px)}body.hat061-ux #toolbar{top:59px;max-height:calc(100dvh - 126px)}body.hat061-ux #panel{top:59px;bottom:40px;right:3px;width:min(350px,calc(100vw - 6px))}body.hat061-ux .hat-studio{top:59px;bottom:40px;left:4px;right:4px;width:auto}body.hat061-ux #hatDock{bottom:39px;width:max-content;max-width:calc(100vw - 8px);gap:2px;padding:4px}body.hat061-ux #hatDock button{min-width:42px;min-height:43px;font-size:18px;padding:6px}#hat061InkBar{top:6px;left:6px;gap:5px;padding:5px 7px;max-width:calc(100% - 12px)}#hat061InkBar .ux-color{width:21px;height:21px;flex-basis:21px}#hat061InkBar .ux-size{padding:4px;min-height:27px}#hat061Selection{top:51px;left:6px;right:auto}#hat061Inspector{top:auto;bottom:38px;right:0;left:0;width:100%;max-height:60dvh;border-radius:16px 16px 0 0}#hat061Zoom{right:7px;bottom:101px}body.hat061-ux #hatInputBar{display:none}#hat061Help .ux-help-grid{grid-template-columns:1fr}body.hat061-ux .status{padding:0 5px;gap:4px;font-size:11px}body.hat061-ux #resetView{display:none}}
@media(max-width:440px){body.hat061-ux header .brand strong{font-size:11px}body.hat061-ux header .brand{max-width:128px}#hat061InkBar .ux-size:nth-last-of-type(2){display:none}#hat061InkBar{gap:4px}#hat061InkBar .ux-ink-title{display:none}#hat061Selection .ux-selection-title{max-width:105px}#hat061Zoom{bottom:101px}}
@media print{#hat061InkBar,#hat061Inspector,#hat061Selection,#hat061Zoom,#hat061Help,#hat061More,#hat061MoreMenu{display:none!important}}
/* UX QA: prevent the mobile header from covering its own controls. */
body.hat061-ux header>#hat061HeaderBar{flex:1;justify-content:flex-end;min-width:0}
body.hat061-ux #hatDock{justify-content:center}
body.hat061-ux #hatInputBar{display:none}
@media(max-width:700px){
 body.hat061-ux header{justify-content:space-between}
 body.hat061-ux header .brand{flex:0 0 90px;min-width:90px;max-width:90px;overflow:hidden}
 body.hat061-ux header .brand strong{font-size:0}
 body.hat061-ux header .brand strong::after{content:'⚛ HAT';font-size:16px;letter-spacing:.1px}
 body.hat061-ux #hat061HeaderBar{justify-content:flex-end;gap:4px}
 body.hat061-ux #hat061HeaderBar>button{flex:0 0 39px;min-width:39px;font-size:17px}
 body.hat061-ux #hat061HeaderBar #openProject,
 body.hat061-ux #hat061HeaderBar #undo,
 body.hat061-ux #hat061HeaderBar #redo,
 body.hat061-ux #hat061HeaderBar #hat061PanelButton,
 body.hat061-ux #hat061HeaderBar #hat061Fullscreen{display:none!important}
 body.hat061-ux #hat061HeaderBar #hat061Tools,
 body.hat061-ux #hat061HeaderBar #saveProject,
 body.hat061-ux #hat061HeaderBar #importDocument,
 body.hat061-ux #hat061HeaderBar #hatStudioToggle{display:inline-flex!important}
 body.hat061-ux #hat061More{flex:0 0 auto}
 body.hat061-ux #hat061MoreBtn{min-width:39px;min-height:40px;padding:6px}
 body.hat061-ux #hat061InkBar .ux-ink-title{display:none}
}
@media(max-width:370px){body.hat061-ux header .brand{flex-basis:59px;min-width:59px;max-width:59px}body.hat061-ux header .brand strong::after{content:'⚛';font-size:20px}}
#hat061MoreMenu{max-height:calc(100dvh - 84px);overflow-y:auto;overscroll-behavior:contain}
body.hat061-ux #toolbar button[data-tool]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:58px;font-size:20px}
body.hat061-ux #toolbar button[data-tool] .ux-tool-name{font-size:10px;font-weight:650;line-height:1.1;letter-spacing:-.02em;color:#cae2e8}
body.hat061-ux #toolbar button[data-tool].active .ux-tool-name{color:#fff}