.smartboard-controls{position:fixed;z-index:180;inset:auto 0 0;background:#141127f5;color:#f5f1ff;border-top:1px solid #a095be;padding:6px 12px;font:600 15px system-ui}
.smartboard-controls[hidden],.smartboard-outline[hidden]{display:none}
.smartboard-controls>div:first-child{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap}
.smartboard-controls button,.smartboard-controls select{min-height:44px;border:1px solid #a095be;border-radius:10px;background:#29213d;color:#fff;padding:8px 14px;font:inherit}
.smartboard-controls button:disabled{opacity:.45}
.smartboard-controls :focus-visible{outline:3px solid #74ddc9;outline-offset:2px}
.smartboard-controls output{min-width:60px;text-align:center}
.smartboard-control-status{margin:0;text-align:center}
.smartboard-control-status:empty{display:none}
.smartboard-outline{position:absolute;bottom:calc(100% + 8px);left:12px;right:12px;background:#181329f5;border:1px solid #a095be;border-radius:12px;box-shadow:0 -12px 32px #0006;padding:4px 8px 8px}
.smartboard-outline-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-left:4px;font-size:13px}
.smartboard-outline-heading button{width:44px;min-height:44px;padding:0;background:transparent;border-color:transparent;font-size:24px}
.smartboard-outline-track{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;padding:4px;scroll-padding-inline:4px}
.smartboard-outline-track>[data-board-slide]{flex:0 0 144px;display:flex;flex-direction:column;gap:5px;text-align:left;padding:5px;border:2px solid transparent;background:#29213d}
.smartboard-thumb-preview{position:relative;display:flex;gap:6px;align-items:center;aspect-ratio:16/9;width:100%;padding:15px 7px 7px;border:1px solid #d8c8d4;border-radius:5px;background:#fbf8f2;color:#2d2633;overflow:hidden}
.smartboard-thumb-preview>b{position:absolute;top:3px;left:5px;font-size:10px;color:#7b315c}
.smartboard-thumb-preview>span{flex:1;min-width:0;font-size:10px;line-height:1.2;font-weight:800;overflow-wrap:anywhere}
.smartboard-thumb-preview img{width:42px;height:48px;object-fit:contain;flex:none}
.smartboard-thumb-title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:12px;line-height:1.25;min-height:30px}
.smartboard-outline-track>[aria-current=step]{border-color:#ead095;background:#453b56}
.has-smartboard-controls #displayShell{--display-stage:calc(100dvh - var(--display-head) - var(--display-foot) - var(--display-strip) - var(--smartboard-controls-height,64px));min-height:calc(100dvh - var(--smartboard-controls-height,64px))}
#smartboardDeckLoader{position:fixed;left:-10000px;top:0;width:800px;height:400px;pointer-events:none}
@media(max-width:700px){.smartboard-controls label{font-size:13px}.smartboard-outline-track>[data-board-slide]{flex-basis:124px}.smartboard-thumb-preview img{width:34px;height:38px}}
@media(max-height:450px){.smartboard-outline-track>[data-board-slide]{flex-basis:112px}.smartboard-thumb-title{display:none}.smartboard-outline-heading{font-size:12px}}

/* A compact presentation dock. Reading tools are revealed on demand. */
.smartboard-controls{inset:auto auto 8px 50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);padding:5px 7px;border:1px solid #b6cce1;border-radius:16px;background:#f8fcfff5;color:#17324f;box-shadow:0 5px 20px #1c466b24;font-size:14px}
.smartboard-controls>div:first-child{gap:6px;flex-wrap:nowrap}
.smartboard-controls button,.smartboard-controls select{border-color:#c7d9e9;background:#edf5fd;color:#204e7c;min-height:44px;border-radius:11px;padding:8px 12px;display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer}
.smartboard-controls button:hover:not(:disabled){background:#dcecff;border-color:#8db3d9}
.smartboard-controls button[aria-expanded=true]{background:#dcecff;border-color:#639ee0}
.smartboard-controls button:disabled{opacity:.4;cursor:default}
.smartboard-controls button svg{width:20px;height:20px;flex:none}
.smartboard-controls :focus-visible{outline:3px solid #245caa;outline-offset:3px}
.smartboard-controls .smartboard-nav{display:flex;align-items:center;gap:2px;padding-right:8px;border-right:1px solid #c7d9e9}
.smartboard-nav button{width:44px;padding:0;background:transparent;border-color:transparent}
.smartboard-controls output{min-width:58px;font-variant-numeric:tabular-nums;font-size:14px;color:#17324f}
.smartboard-controls output span{color:#526b82;font-weight:500}
.smartboard-controls .smartboard-hide{width:40px;padding:0;background:transparent;border-color:transparent}
.smartboard-controls.is-collapsed{left:auto;right:12px;transform:none;bottom:12px;border-radius:999px}
.smartboard-controls.is-collapsed button{border:0;background:transparent;padding:4px 9px}
.smartboard-control-status{font-size:12px;max-width:460px;padding:3px 8px;color:#365674}
.smartboard-outline{left:50%;right:auto;transform:translateX(-50%);bottom:calc(100% + 10px);width:min(760px,calc(100vw - 24px));max-width:calc(100vw - 24px);background:#f8fcfff8;border:1px solid #b6cce1;box-shadow:0 -8px 28px #1c466b24;border-radius:16px;color:#17324f}
.smartboard-outline-heading{font-size:12px}
.smartboard-outline-heading button{background:transparent;border-color:transparent;color:#365674}
.smartboard-outline-track>[data-board-slide]{background:#e8f1fa;border-color:transparent;min-height:0;color:#17324f}
.smartboard-outline-track>[aria-current=step]{border-color:#245caa;background:#d8e9fc}
.smartboard-thumb-title{font-weight:650}
.smartboard-readers{position:absolute;bottom:calc(100% + 10px);right:0;display:grid;gap:10px;width:300px;max-width:calc(100vw - 24px);padding:18px;border:1px solid #b6cce1;border-radius:16px;background:#f8fcff;box-shadow:0 -8px 28px #1c466b24;color:#17324f}
.smartboard-readers[hidden]{display:none}
.smartboard-readers label{font-size:13px;font-weight:500;color:#526b82}
.smartboard-readers select{width:100%;display:block;font-size:15px}
@media(max-width:520px){.smartboard-controls{max-width:calc(100% - 16px);font-size:12px}.smartboard-controls button{padding:8px}.smartboard-controls .smartboard-nav{padding-right:4px}.smartboard-controls output{min-width:46px}.smartboard-controls button svg{width:18px;height:18px}.smartboard-nav button{width:36px}.smartboard-controls .smartboard-hide{width:32px}}

@media(max-width:520px){
  .smartboard-controls [data-board-control="outline"]>span,.smartboard-controls [data-board-control="readers"]>span{display:none}
  .smartboard-controls [data-board-control="outline"],.smartboard-controls [data-board-control="readers"],.smartboard-controls .smartboard-hide,.smartboard-nav button{min-width:44px;width:44px;padding:8px}
}

/* Tactile tools in the same cobalt, mint and honey classroom palette. */
.smartboard-controls{border:2px solid #fff;background:linear-gradient(115deg,#fff,#f0f7ff);box-shadow:0 4px 0 #92b6d869,0 10px 26px #244d7c29}
.smartboard-controls [data-board-control="next"]{background:#2d5cb3;color:#fff;border-color:#2852a1;box-shadow:0 2px 0 #18396c}
.smartboard-controls [data-board-control="next"]:hover:not(:disabled){background:#244e9a;border-color:#244e9a}
.smartboard-controls [data-board-control="readers"]{background:#def4ea;border-color:#b4dbcd;color:#1a6054}
.smartboard-controls [data-board-control="readers"]:hover{background:#ccebdd;border-color:#96cbbb}
.smartboard-controls button[aria-expanded="true"]{background:#ffedbd;border-color:#dfbf76;color:#604a1e}
.smartboard-controls.is-collapsed{background:#fff;border-color:#c0d5ed}
.smartboard-controls .smartboard-outline-track>[aria-current="step"]{border-color:#2d5cb3;background:#ffefc8}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
  .smartboard-controls button{transition:transform .18s ease,background-color .18s ease,box-shadow .18s ease}
  .smartboard-controls button:hover:not(:disabled){transform:translateY(-2px)}
  .smartboard-controls button:active:not(:disabled){transform:translateY(1px)}
}
@media(prefers-reduced-motion:no-preference){
  .smartboard-outline:not([hidden]),.smartboard-readers:not([hidden]){animation:classroom-tools-in .2s ease-out}
}
@keyframes classroom-tools-in{from{opacity:.3;translate:0 8px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){.smartboard-controls *{animation:none!important;transition:none!important}}