/* V1.0.1 – Context properties panel aligned to the left, beside the tool rail. */
body.hat063-context-ui{
  --hat063-panel-w:344px;
  --hat063-panel-gap:12px;
  --hat063-panel-top:72px;
  --hat063-panel-left:calc(var(--hat062-rail,63px) + var(--hat063-panel-gap));
}
/* Keep the board width intact; the contextual panel floats over the stage like the reference UI. */
body.hat063-context-ui main{padding-right:0!important;padding-left:0!important;transition:none!important}
body.hat063-context-ui #panel{display:none!important}
body.hat063-context-ui #hat061Inspector{display:none!important}
body.hat063-context-ui #hat061Selection{display:none!important}
body.hat063-context-ui #hat061InkBar{display:none!important}
body.hat063-context-ui #hat062ShapeMenu{display:none!important}
body.hat063-context-ui #hat063Context{
  position:fixed;
  top:var(--hat063-panel-top);
  left:var(--hat063-panel-left);
  right:auto;
  bottom:auto;
  width:min(var(--hat063-panel-w),calc(100vw - var(--hat063-panel-left) - 14px));
  max-height:calc(100vh - var(--hat063-panel-top) - 60px);
  z-index:61;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
  color:#edfaff;
  background:linear-gradient(180deg,#18364f 0%,#10273a 78%);
  border:1px solid #456f86;
  border-radius:18px;
  box-shadow:0 14px 34px rgba(0,0,0,.32),0 3px 0 rgba(120,170,205,.08) inset;
  overflow:hidden;
  backdrop-filter:blur(8px);
}
#hat063Context .hat063-head{display:flex;align-items:center;gap:10px;min-height:62px;padding:10px 12px;border-bottom:1px solid #ffffff1c;background:linear-gradient(180deg,#16314a,#143047)}
#hat063Context .hat063-mark{display:grid;place-items:center;background:#1d6f8f;border-radius:10px;width:34px;height:34px;font-size:19px;flex:0 0 auto;box-shadow:0 0 0 1px #98d9f033 inset}
#hat063Context .hat063-head-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
#hat063Context #hat063Heading{font-size:15px;font-weight:850;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hat063Context #hat063Subtitle{font-size:11px;color:#a8ccd9}
#hat063Context #hat063Collapse{min-width:30px;width:30px;min-height:34px;font-size:20px;background:#224659;color:#fff;border:1px solid #527989;border-radius:8px}
#hat063Context .hat063-body{flex:1;overflow-y:auto;overscroll-behavior:contain;scrollbar-color:#547b89 transparent;scrollbar-width:thin;padding:12px 13px 14px}
#hat063Context .hat063-foot{display:flex;justify-content:space-between;border-top:1px solid #ffffff20;padding:8px 12px;color:#9bbcc6;font-size:10px;letter-spacing:.02em}
#hat063Context .hat063-foot span{color:#83efcf;font-weight:850}
#hat063Context .hat063-description{font-size:12px;color:#bfdce3;margin:2px 0 17px;line-height:1.55}
#hat063Context .hat063-subhead{border-bottom:1px solid #466b78;padding:0 0 8px;margin:18px 0 12px;font-size:12px;font-weight:850;color:#eafafa;text-transform:uppercase;letter-spacing:.035em}
#hat063Context label{display:block;margin:13px 0 6px;color:#c6e0e7;font-size:12px;font-weight:600}
#hat063Context .hat063-field-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:8px 0 12px;color:#cee4e9;font-size:12px}
#hat063Context .hat063-field-head label{margin:0}
#hat063Context .hat063-field-head strong{font-size:12px;color:#a3f2da;font-variant-numeric:tabular-nums}
#hat063Context :is(input[type=text],input[type=number],select){width:100%;box-sizing:border-box;background:#0d2834;color:white;border:1px solid #568290;border-radius:9px;padding:10px;font-size:14px;min-height:42px}
#hat063Context input[type=range]{width:100%;accent-color:#72d9c5;cursor:pointer;min-height:30px}
#hat063Context input[type=checkbox]{accent-color:#51dbc5;width:17px;height:17px;vertical-align:middle}
#hat063Context .hat063-check{display:flex;align-items:center;gap:10px;margin:13px 0;line-height:1.4}
#hat063Context .hat063-native-color{width:44px;min-width:44px;height:37px;border-radius:9px;background:none;padding:1px;border:1px solid #638a96;cursor:pointer}
#hat063Context .hat063-swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:5px;margin:10px 0 17px}
#hat063Context .hat063-swatch{background:var(--swatch);width:26px;height:26px;border-radius:50%;border:2px solid #ffffff65;padding:0;box-shadow:0 1px 7px #0005;cursor:pointer}
#hat063Context .hat063-swatch.is-current{outline:2px solid #89f7e0;outline-offset:2px}
#hat063Context .hat063-widths{display:flex;gap:5px;justify-content:space-between;margin-bottom:12px}
#hat063Context .hat063-widths button{display:flex;align-items:center;justify-content:center;gap:5px;min-width:38px;min-height:42px;padding:5px 4px;color:#d9f7f5;background:#214453;border:1px solid #527784;border-radius:9px;cursor:pointer;font-size:11px}
#hat063Context .hat063-widths button>span{display:block;width:13px;background:#b5e6e8;border-radius:99px}
#hat063Context .hat063-widths button.is-current,#hat063Context .hat063-presets button.is-current{background:#176f75;border-color:#8ff0d8;color:white}
#hat063Context .hat063-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:10px 0 14px}
#hat063Context .hat063-presets button{min-height:41px;min-width:0;padding:6px 3px;background:#254c5b;color:white;border:1px solid #4e7885;border-radius:8px;font-size:14px;cursor:pointer}
#hat063Context .hat063-hint{color:#99bdc7;font-size:11px;line-height:1.6;margin:14px 0}
#hat063Context .hat063-empty{margin:20px 0;padding:16px 8px;text-align:center;border:1px dashed #5f8791;border-radius:12px;color:#bbdde2;line-height:1.55}
#hat063Context .hat063-empty>div{font-size:31px;color:#6cddcf}
#hat063Context .hat063-empty strong{display:block;font-size:12px;margin:8px 0}
#hat063Context .hat063-empty p{font-size:11px}
#hat063Context .hat063-shapes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
#hat063Context .hat063-shapes button{min-height:79px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;background:#234858;border-radius:11px;border:1px solid #578493;color:white;cursor:pointer}
#hat063Context .hat063-shapes button b{font-size:26px}
#hat063Context .hat063-shapes button small{font-size:11px}
#hat063Context .hat063-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:10px 0 14px}
#hat063Context .hat063-card-grid--small{grid-template-columns:repeat(2,minmax(0,1fr))}
#hat063Context .hat063-card{min-height:90px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;padding:11px 12px;text-align:left;background:#203d56;border:1px solid #537a91;border-radius:12px;color:#f7feff;cursor:pointer}
#hat063Context .hat063-card b{font-size:20px;line-height:1;color:#89e7ff}
#hat063Context .hat063-card span{font-size:12px;font-weight:800;line-height:1.35}
#hat063Context .hat063-card small{font-size:10px;color:#b6d3de;line-height:1.45}
#hat063Context .hat063-card--small{min-height:76px}
#hat063Context .hat063-board-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0 6px}
#hat063Context .hat063-board-swatch{display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;padding:8px 6px;background:#223d53;border:1px solid #53798b;border-radius:12px;color:#eaf6f9;cursor:pointer}
#hat063Context .hat063-board-swatch>span{display:block;width:100%;height:38px;border-radius:8px;background:var(--hat063-board);border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
#hat063Context .hat063-board-swatch small{font-size:10px;line-height:1.35;text-align:center}
#hat063Context .hat063-inline-actions{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}
#hat063Context .hat063-inline-actions button{min-height:42px;padding:10px 12px;background:#235364;border:1px solid #5a8290;border-radius:10px;color:#e6fcff;font-size:12px;font-weight:700;text-align:left;cursor:pointer}
#hat063Context .hat063-card:hover,#hat063Context .hat063-board-swatch:hover,#hat063Context .hat063-inline-actions button:hover,#hat063Context .hat063-shapes button:hover{background:#2a516b}
#hat063Context .hat063-context-label{font-size:12px;padding:9px 11px;color:#d4f3f3;background:#225364;border-radius:9px;font-weight:750}
#hat063Context .hat063-extra{margin:18px 0 7px;border:1px solid #456b7b;border-radius:10px;overflow:hidden}
#hat063Context .hat063-extra summary{list-style:auto;cursor:pointer;padding:12px;font-size:12px;font-weight:800;background:#274859;color:#e9f9ff}
#hat063Context .hat063-extra>div{padding:8px}
#hat063Context #selectedPanel{display:block!important;padding:0!important}
#hat063Context #selectedPanel.hidden{display:none!important}
#hat063Context #selectedPanel h3{font-size:13px}
#hat063Context #selectedPanel hr{opacity:.25}
#hat063Context #selectedPanel label{display:block}
#hat063Context #selectedPanel input[type=checkbox]{width:17px}
#hat063Context #selectedPanel :is(input,select){max-width:100%}
#hat063Context #selectedPanel .row{display:flex;gap:6px;flex-wrap:wrap}
#hat063Context #selectedPanel button{min-height:40px;background:#235364;border:1px solid #5a8290;border-radius:8px}
#hat063Context :is(button,input,select,textarea):focus-visible{outline:2px solid #9df4e1;outline-offset:2px}
body.hat063-context-ui.hat063-small{--hat063-panel-w:46px}
body.hat063-small #hat063Context{width:38px;left:calc(var(--hat062-rail,63px) + 8px);right:auto}
body.hat063-small #hat063Context .hat063-body,
body.hat063-small #hat063Context .hat063-foot,
body.hat063-small #hat063Context .hat063-head-text,
body.hat063-small #hat063Context .hat063-mark{display:none!important}
body.hat063-small #hat063Context .hat063-head{padding:4px;justify-content:center;border:none;background:transparent}
body.hat063-small #hat063Context #hat063Collapse{min-width:30px;width:30px}
#hat063Context textarea{width:100%;min-height:76px;box-sizing:border-box;background:#0d2834;color:#fff;border:1px solid #568290;border-radius:9px;padding:10px;font-size:14px;line-height:1.5;font-family:inherit;resize:vertical}
#hat063Context .hat063-offsets{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#hat063Context .hat063-reset{min-height:38px;width:100%;margin-top:10px;background:#295969;border:1px solid #58909a;border-radius:9px;color:#e4f9f7;font-size:12px}
@media(max-width:980px){
  body.hat063-context-ui{--hat063-panel-w:320px;--hat063-panel-top:68px;--hat063-panel-gap:10px}
}
@media(max-width:750px){
  body.hat063-context-ui{--hat063-panel-w:min(296px,calc(100vw - var(--hat062-rail,55px) - 12px));--hat063-panel-top:63px;--hat063-panel-gap:8px}
  body.hat063-context-ui #hat063Context{border-radius:14px;max-height:calc(100vh - var(--hat063-panel-top) - 52px)}
  body.hat063-context-ui #hat063Context .hat063-head{padding:8px;min-height:55px}
  body.hat063-context-ui #hat063Context .hat063-body{padding:10px}
  #hat063Context .hat063-swatches{grid-template-columns:repeat(4,1fr);gap:9px}
#hat063Context .hat063-card-grid,#hat063Context .hat063-board-swatches{grid-template-columns:repeat(2,minmax(0,1fr))}
  #hat063Context .hat063-presets{grid-template-columns:repeat(3,1fr)}
  #hat063Context .hat063-widths{flex-wrap:wrap}
  body.hat063-context-ui.hat063-small{--hat063-panel-w:33px}
  body.hat063-small #hat063Context{width:26px;left:calc(var(--hat062-rail,30px) + 4px)}
  body.hat063-small #hat063Context #hat063Collapse{width:23px;min-width:23px;padding:1px}
}
@media(max-width:430px){
  body.hat063-context-ui{--hat063-panel-w:min(272px,calc(100vw - var(--hat062-rail,55px) - 8px));--hat063-panel-gap:6px}
}
@media print{body.hat063-context-ui main{padding-left:0!important}#hat063Context{display:none!important}}

/* V1.0.4: card-based physics templates and board-theme panel */
#hat063Context .hat063-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:10px 0 15px}
#hat063Context .hat063-card{min-width:0;min-height:102px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;padding:11px 12px;text-align:left;background:#203d56;border:1px solid #537a91;border-radius:12px;color:#f7feff;cursor:pointer;transition:background .12s ease,transform .12s ease}
#hat063Context .hat063-card b{font-size:24px;line-height:1.05;color:#89e7ff}
#hat063Context .hat063-card span{font-size:12px;font-weight:780;line-height:1.35}
#hat063Context .hat063-card small{font-size:10px;color:#b6d3de;line-height:1.45}
#hat063Context .hat063-card:hover,#hat063Context .hat063-board-swatch:hover,#hat063Context .hat063-board-row:hover{background:#2a516b}
#hat063Context .hat063-card:active{transform:scale(.98)}
#hat063Context .hat063-board-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0 12px}
#hat063Context .hat063-board-swatch{display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;min-width:0;padding:8px 5px;background:#223d53;border:1px solid #53798b;border-radius:12px;color:#eaf6f9;cursor:pointer}
#hat063Context .hat063-board-swatch>span{display:block;width:100%;height:37px;border-radius:8px;background:var(--hat063-board);border:1px solid rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
#hat063Context .hat063-board-swatch small{font-size:10px;line-height:1.3;text-align:center}
#hat063Context .hat063-board-list{display:flex;flex-direction:column;gap:6px;margin:9px 0 16px}
#hat063Context .hat063-board-row{display:flex;gap:13px;align-items:center;min-height:51px;width:100%;padding:9px 11px;background:#203d56;border:1px solid #52798d;border-radius:10px;text-align:left;color:#eaf9ff}
#hat063Context .hat063-board-row>span:last-child{display:flex;flex-direction:column;gap:3px;min-width:0}
#hat063Context .hat063-board-row strong{font-size:12px;font-weight:750}
#hat063Context .hat063-board-row small{font-size:10px;color:#aacddc}
#hat063Context .hat104-paper-icon{width:52px;height:34px;flex:0 0 52px;border-radius:5px;background:#f0f5f9;border:1px solid #8a9fb3;display:block}
#hat063Context .hat104-paper-grid{background-image:linear-gradient(#a3b5c844 1px,transparent 1px),linear-gradient(90deg,#a3b5c844 1px,transparent 1px);background-size:10px 10px}
#hat063Context .hat104-paper-notebook{background-image:linear-gradient(#9db3c43f 1px,transparent 1px),linear-gradient(90deg,#9db3c43f 1px,transparent 1px);background-size:6px 6px}
#hat063Context .hat104-paper-lines{background-image:repeating-linear-gradient(0deg,transparent 0 9px,#9cb0c46b 10px,#f0f5f9 11px)}
#hat063Context .hat104-paper-dots{background-image:radial-gradient(#627f9e88 1.15px,transparent 1.6px);background-size:9px 9px}
#hat063Context .hat104-paper-twocol{background-image:linear-gradient(90deg,transparent 49%,#93a9bd 49%,#93a9bd 51%,transparent 51%),linear-gradient(180deg,#abc0d2 0 22%,transparent 22%);background-size:100% 100%;border:4px solid #f2f7fb;outline:1px solid #9bb0c1}
#hat063Context .hat063-inline-actions{display:flex;flex-direction:column;gap:8px;margin:9px 0 17px}
#hat063Context .hat063-inline-actions button{min-height:40px;text-align:left;padding:9px 12px;background:#235364;border:1px solid #5a8290;border-radius:9px;color:#f0fbff;font-size:12px;font-weight:650;cursor:pointer}
#hat063Context .hat063-inline-actions [data-hat063-clear-page]{background:#783134;border-color:#af585b}
#hat104BoardStyle{font-size:12px;font-weight:750;white-space:nowrap;border:1px solid #4c7a91;background:#223951;min-height:27px;padding:4px 10px;border-radius:8px}
#hat104BoardStyle:hover{background:#275974}
@media(max-width:750px){
 #hat063Context .hat063-board-swatches{grid-template-columns:repeat(3,minmax(0,1fr))}
 #hat063Context .hat063-card{min-height:108px}
 #hat063Context .hat063-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:450px){#hat104BoardStyle{font-size:11px;padding:4px 6px}}

/* V1.0.4: actual scalable vector thumbnails in tool cards */
#hat063Context .hat104-preview-image{display:flex;width:100%;height:66px;align-items:center;justify-content:center;background:#fafdfd;border-radius:8px;overflow:hidden;padding:2px}
#hat063Context .hat104-preview-svg{display:block;width:100%;height:100%;max-width:100%;object-fit:contain}
#hat063Context .hat063-card:has(.hat104-preview-image){min-height:135px;align-items:stretch;gap:4px}
#hat063Context .hat063-card:has(.hat104-preview-image)>span:not(.hat104-preview-image){font-size:12px}

/* Keep the quick teaching toolbar above the two-column worksheet headings. */
body.hat10-teaching.hat104-twocol #hat10Dock{top:7px!important}

/* V1.0.8 — taller usable figure / board preset flyout */
body.hat063-context-ui #hat063Context{max-height:calc(100dvh - var(--hat063-panel-top) - 8px);min-height:min(410px,calc(100dvh - var(--hat063-panel-top) - 8px))}
body.hat063-context-ui #hat063Context .hat063-body{min-height:0;overflow-y:auto}
body.hat063-context-ui.hat063-small #hat063Context{min-height:0;max-height:calc(100dvh - var(--hat063-panel-top) - 8px)}
@media(max-width:750px){body.hat063-context-ui #hat063Context{max-height:calc(100dvh - var(--hat063-panel-top) - 8px);min-height:min(300px,calc(100dvh - var(--hat063-panel-top) - 8px))}}

/* V1.0.9: application-standard property tool window. */
body.hat063-context-ui #hat063Context{background:#142338!important;border:1px solid #456079!important;border-radius:12px!important;box-shadow:0 14px 36px #0008!important;max-height:calc(100dvh - var(--hat063-panel-top) - 12px)!important}
body.hat063-context-ui #hat063Context .hat063-head{background:#1b3048!important;min-height:52px!important;flex-shrink:0!important;border-bottom:1px solid #3f5872!important}
body.hat063-context-ui #hat063Context .hat063-body{min-height:0;flex:1;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain}
body.hat063-context-ui #hat063Context .hat063-foot{background:#1b3048;border-top:1px solid #3f5872;flex-shrink:0}
#hat063Context .hat109-library-link{padding:12px;background:#1d3b52;border:1px solid #426b82;border-radius:10px;margin:0 0 14px}
#hat063Context .hat109-library-link strong{font-size:12px;color:#e4faff}
#hat063Context .hat109-library-link p{font-size:11px;color:#bed0df;line-height:1.5}
#hat063Context .hat109-library-link button{width:100%;min-height:39px;background:#206789;color:white;border:1px solid #65abc9;border-radius:8px;font-weight:700;cursor:pointer}
#hat063Context .hat109-library-link button:hover{background:#2c84aa}


/* V1.1.0 – desktop workspace refinement */
body.hat063-context-ui{
  --hat063-panel-w:364px;
  --hat063-panel-gap:10px;
  --hat063-panel-top:64px;
}
body.hat063-context-ui #hat063Context{
  top:var(--hat063-panel-top)!important;
  left:var(--hat063-panel-left)!important;
  bottom:8px!important;
  max-height:calc(100dvh - var(--hat063-panel-top) - 8px)!important;
  min-height:min(540px,calc(100dvh - var(--hat063-panel-top) - 8px))!important;
  width:min(var(--hat063-panel-w),calc(100vw - var(--hat063-panel-left) - 16px))!important;
  border-radius:10px!important;
  border:1px solid #74879b!important;
  box-shadow:0 16px 36px rgba(9,18,29,.34), 0 0 0 1px rgba(255,255,255,.05) inset!important;
  background:linear-gradient(180deg,#1e2f43 0%,#15263a 100%)!important;
  resize:horizontal;
  overflow:hidden;
}
body.hat063-context-ui #hat063Context .hat063-head{
  min-height:46px!important;
  padding:8px 10px!important;
  background:linear-gradient(180deg,#eef3f8,#dde6f0)!important;
  color:#24384f!important;
  border-bottom:1px solid #afbdca!important;
}
body.hat063-context-ui #hat063Context .hat063-mark{
  width:28px;height:28px;border-radius:8px;background:linear-gradient(180deg,#5d7b95,#3b5974);color:#fff;box-shadow:none;
}
body.hat063-context-ui #hat063Context #hat063Heading{color:#203247!important;font-size:14px!important;font-weight:800!important}
body.hat063-context-ui #hat063Context #hat063Subtitle{color:#5d7388!important;font-size:11px!important}
body.hat063-context-ui #hat063Context #hat063Collapse{background:linear-gradient(180deg,#ffffff,#dfe8f2)!important;color:#274158!important;border-color:#9eb1c0!important;border-radius:7px!important;min-height:30px!important}
body.hat063-context-ui #hat063Context .hat063-body{padding:10px 11px 12px!important;background:linear-gradient(180deg,#15273a,#132435)!important}
body.hat063-context-ui #hat063Context .hat063-foot{padding:7px 10px!important;background:linear-gradient(180deg,#eef3f8,#dee7f0)!important;color:#4a6075!important;border-top:1px solid #afbdca!important}
#hat063Context .hat063-subhead{margin:14px 0 10px!important;padding-bottom:6px!important;font-size:11px!important;color:#dce9f8!important;border-bottom:1px solid #40566b!important}
#hat063Context .hat063-card,#hat063Context .hat063-board-swatch,#hat063Context .hat063-board-row,#hat063Context .hat063-shapes button,#hat063Context .hat063-inline-actions button{
  border-radius:9px!important;
  background:#21384d!important;
  border-color:#58718a!important;
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
#hat063Context .hat063-card:hover,#hat063Context .hat063-board-swatch:hover,#hat063Context .hat063-board-row:hover,#hat063Context .hat063-shapes button:hover,#hat063Context .hat063-inline-actions button:hover{background:#294661!important}
#hat063Context :is(input[type=text],input[type=number],select,textarea){border-radius:8px!important;border-color:#648094!important;background:#0f2133!important}
#hat063Context .hat063-body::-webkit-scrollbar{width:11px}
#hat063Context .hat063-body::-webkit-scrollbar-thumb{background:#51697e;border:2px solid #132435;border-radius:10px}
#hat063Context .hat063-body::-webkit-scrollbar-track{background:#132435}
@media(max-width:760px){body.hat063-context-ui #hat063Context{resize:none;width:min(312px,calc(100vw - var(--hat063-panel-left) - 10px))!important;border-radius:12px!important}}