/* V1.0 teaching controls overlay the workspace; zero canvas height loss. */
body.hat10-teaching{--hat10-ink:#ddfaff;--hat10-border:#457383}
body.hat10-teaching #hat10Dock{position:absolute;z-index:17;top:80px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 28px);color:#eefaff;border:1px solid var(--hat10-border);border-radius:12px;background:#102c3beb;box-shadow:0 6px 24px #0005;backdrop-filter:blur(12px);display:flex;align-items:center;padding:4px 7px;gap:6px}
body.hat10-teaching #hat10Dock .hat10-dock-head{display:flex;gap:5px;align-items:center;flex-shrink:0}
body.hat10-teaching #hat10Dock .hat10-dock-head b{font-size:10px;letter-spacing:.08em;color:#94f2d9;padding:0 4px}
body.hat10-teaching #hat10Dock button{border-radius:8px;min-height:37px;padding:5px 8px;background:#194251;color:#effdff;border:1px solid transparent;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-size:15px}
body.hat10-teaching #hat10Dock button small{font-size:10px;color:#e5f6fa;font-weight:600}
body.hat10-teaching #hat10Dock button:hover{background:#236178;border-color:#56929d}
body.hat10-teaching #hat10Dock [aria-pressed=true]{border-color:#fbcc79!important;background:#6a461d!important}
body.hat10-teaching #hat10Dock .hat10-dock-tools{display:flex;gap:2px;align-items:center;max-width:min(1240px,calc(100vw - 134px));overflow-x:auto;scrollbar-width:thin}
body.hat10-teaching #hat10Dock .hat10-separator{height:26px;width:1px;background:#47707a;margin:0 3px;flex:0 0 auto}
body.hat10-teaching #hat10Dock.collapsed .hat10-dock-tools{display:none}
body.hat10-teaching #hat10Message{position:absolute;z-index:18;top:135px;left:50%;transform:translateX(-50%);max-width:min(540px,90vw);color:#eaffff;background:#153d43;border:1px solid #3b958a;box-shadow:0 6px 16px #0006;border-radius:9px;padding:8px 13px;text-align:center;font-size:12px;pointer-events:none}
body.hat10-teaching #hat10Message.error{background:#55332e;border-color:#db8173}
body.hat10-teaching #hat10CurtainLayer[hidden],body.hat10-teaching #hat10DropHint[hidden]{display:none!important}
body.hat10-teaching #hat10CurtainLayer{position:absolute;top:24%;left:21%;width:58%;height:31%;min-width:220px;min-height:110px;max-width:95%;max-height:80%;z-index:14;background:#e1f2e9;border:3px solid #0f766e;resize:both;overflow:auto;box-shadow:0 7px 23px #0009;color:#0d4a45;border-radius:10px;display:flex;flex-direction:column}
body.hat10-teaching .hat10-curtain-label{touch-action:none;background:#116b65;color:#fff;display:flex;align-items:center;gap:12px;padding:7px 10px;cursor:move;user-select:none;font-size:11px}
body.hat10-teaching .hat10-curtain-label strong{white-space:nowrap}
body.hat10-teaching .hat10-curtain-label span{font-size:10px;opacity:.86}
body.hat10-teaching .hat10-curtain-label button{margin-left:auto;padding:1px 7px;min-height:22px;background:#fff;color:#124c4a}
body.hat10-teaching .hat10-curtain-center{flex:1;display:grid;place-items:center;color:#66aaa0;font:600 58px Georgia,serif}
body.hat10-teaching #hat10DropHint{position:absolute;z-index:40;inset:10px;background:#0e675eb9;color:#fff;border:4px dashed #9dffdd;border-radius:18px;display:grid;place-items:center;text-align:center;font-weight:800;pointer-events:none}
@media(max-width:1150px){body.hat10-teaching #hat10Dock{left:15px;transform:none;max-width:calc(100% - 30px)}body.hat10-teaching #hat10Dock button small{display:none}body.hat10-teaching #hat10Dock .hat10-dock-tools{max-width:calc(100vw - 174px)}body.hat10-teaching #hat10Message{top:98px}}
@media(max-width:620px){body.hat10-teaching #hat10Dock{top:99px;left:5px;max-width:calc(100% - 10px)}body.hat10-teaching #hat10Dock .hat10-dock-head b{display:none}body.hat10-teaching #hat10Dock .hat10-dock-tools{max-width:calc(100vw - 80px)}body.hat10-teaching #hat10Dock button{padding:4px 7px}body.hat10-teaching #hat10CurtainLayer{width:80%;left:10%;top:27%}}
@media print{body.hat10-teaching #hat10Dock,body.hat10-teaching #hat10Message,body.hat10-teaching #hat10CurtainLayer,body.hat10-teaching #hat10DropHint{display:none!important}}

/* V1.0.8 — draggable compact review toolbar */
body.hat10-teaching #hat10Dock .hat10-dock-head{touch-action:none;cursor:grab;user-select:none;min-height:36px}
body.hat10-teaching #hat10Dock.hat108-dragging .hat10-dock-head{cursor:grabbing}
body.hat10-teaching #hat10Dock.hat108-positioned{left:0;top:0;transform:none;right:auto;bottom:auto;max-width:calc(100% - 8px)}
body.hat10-teaching #hat10Dock .hat10-dock-head b{cursor:grab;white-space:nowrap}
body.hat10-teaching #hat10Dock #hat10ResetDock{padding:3px 7px;min-height:29px;font-size:20px;color:#bfffe5}
body.hat10-teaching #hat10Dock .hat10-dock-tools{max-width:min(1240px,calc(100vw - 215px))}
body.hat10-teaching #hat10Dock button:focus-visible{outline:2px solid #9cf5e3;outline-offset:2px}
@media(max-width:1150px){body.hat10-teaching #hat10Dock .hat10-dock-tools{max-width:calc(100vw - 230px)}}
@media(max-width:620px){body.hat10-teaching #hat10Dock .hat10-dock-head b{display:inline!important;font-size:0;width:20px;overflow:hidden}body.hat10-teaching #hat10Dock .hat10-dock-head b::first-letter{font-size:16px}body.hat10-teaching #hat10Dock .hat10-dock-tools{max-width:calc(100vw - 113px)}}

/* V1.0.9: right-edge magnetic docking converts the toolbar into a true vertical rail. */
body.hat10-teaching #hat10Dock.hat109-right{position:absolute!important;inset:10px 8px 10px auto!important;left:auto!important;top:10px!important;right:8px!important;bottom:10px!important;transform:none!important;width:230px!important;max-width:min(260px,calc(100vw - 85px))!important;max-height:calc(100% - 20px)!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;padding:9px!important;border-radius:13px!important;z-index:30!important;box-shadow:-10px 3px 30px #0006!important}
body.hat10-teaching #hat10Dock.hat109-right .hat10-dock-head{width:100%;justify-content:space-between;border-bottom:1px solid #ffffff2b;padding-bottom:7px}
body.hat10-teaching #hat10Dock.hat109-right .hat10-dock-tools{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;width:100%!important;max-width:none!important;max-height:calc(100% - 52px);overflow:auto!important;gap:6px!important;scrollbar-width:thin}
body.hat10-teaching #hat10Dock.hat109-right .hat10-dock-tools button{width:100%;justify-content:center;flex-direction:column;min-height:54px;gap:3px;white-space:normal;padding:7px 2px!important}
body.hat10-teaching #hat10Dock.hat109-right .hat10-dock-tools button small{display:block!important;font-size:10px;text-align:center;line-height:1.2}
body.hat10-teaching #hat10Dock.hat109-right .hat10-separator{grid-column:span 2;width:100%;height:1px;margin:3px 0}
body.hat10-teaching #hat10Dock.hat109-right.collapsed .hat10-dock-tools{display:none!important}
body.hat10-teaching #hat10Dock.hat109-right.collapsed{width:155px!important;bottom:auto!important}
@media(max-width:620px){body.hat10-teaching #hat10Dock.hat109-right{width:170px!important;max-width:calc(100vw - 65px)!important}body.hat10-teaching #hat10Dock.hat109-right .hat10-dock-head b{font-size:11px!important;width:auto!important}}


/* V1.1.0 – teaching dock behaves like a desktop utility panel */
body.hat10-teaching #hat10Dock{
  border-radius:10px!important;
  border:1px solid #788da0!important;
  background:linear-gradient(180deg,#f9fbfd 0%,#e9eff5 12%,#dde7f0 100%)!important;
  color:#23374c!important;
  box-shadow:0 14px 28px rgba(17,28,40,.25)!important;
  backdrop-filter:none!important;
}
body.hat10-teaching #hat10Dock .hat10-dock-head{
  background:linear-gradient(180deg,#fdfefe,#e6edf4);
  border-radius:8px 8px 0 0;
  border-bottom:1px solid #b3c0cb;
  padding:2px 4px 8px;
}
body.hat10-teaching #hat10Dock .hat10-dock-head b{color:#38516b!important;font-size:11px!important}
body.hat10-teaching #hat10Dock button{background:linear-gradient(180deg,#ffffff,#e7eef5)!important;color:#223a51!important;border:1px solid #b8c6d4!important;border-radius:8px!important;box-shadow:0 1px 0 rgba(255,255,255,.75) inset}
body.hat10-teaching #hat10Dock button small{color:#506b83!important}
body.hat10-teaching #hat10Dock button:hover{background:linear-gradient(180deg,#ffffff,#dfeaf5)!important;border-color:#7ea7c4!important}
body.hat10-teaching #hat10Dock [aria-pressed=true]{background:linear-gradient(180deg,#d7eefb,#b9dcf3)!important;border-color:#6ea4c5!important;color:#173651!important}
body.hat10-teaching #hat10Dock.hat109-right{border-radius:10px!important;padding:8px!important}
body.hat10-teaching #hat10Dock.hat109-right .hat10-dock-head{padding-bottom:8px!important}
body.hat10-teaching #hat10Dock.hat109-right .hat10-separator{background:#c4cfd8!important}