/* Syllabuild Board · Teaching Studio R1 (2026-10-18)
   Deliberately limited to the Board shell. Whiteboard canvas, lesson data,
   authentication, student work, grading, and API functionality are untouched. */
:root {
  --navy:#22313a;
  --accent:#247987;
  --bg:#f4f3ee;
  --panel:#fffefa;
  --line:#d8dfde;
  --text:#22313a;
  --muted:#617078;
  --board-radius:14px;
  --board-shadow:0 18px 48px rgba(20,39,48,.13);
  --board-line:rgba(61,83,92,.18);
  --studio-coral:#d17868;
  --studio-coral-strong:#a54437;
  --studio-navy:#1a2931;
}
/* HTML hidden must defeat older mobile !important display rules. */
[hidden]{display:none!important}
.appHeader .topbtn[hidden],.appHeader .mobileMenuAction[hidden]{display:none!important}
html,body,#app{background:var(--bg);}
/* Preserve the bright white writing area. Decorative imagery is deliberately
   not applied behind a teaching canvas. */
.appHeader{
  background:linear-gradient(115deg,#182730 0%,#223640 68%,#2a343b 100%)!important;
  border-bottom:1px solid rgba(255,255,255,.09);
  box-shadow:0 4px 24px rgba(10,25,34,.17)!important;
  height:64px;
}
.appHeader::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;pointer-events:none;background:linear-gradient(90deg,#d17868 0 17%,transparent 48%)}
.appHeader .brandWrap{gap:9px}
.appHeader .appMark{box-shadow:0 2px 10px #0004;border:1px solid #ffffff25;border-radius:10px}
.appHeader .brandText strong{color:#fffefa;letter-spacing:-.018em}
.appHeader .brandText small{color:#ccd6d8}
.appHeader #boardTitle{background:rgba(255,255,255,.095);border-color:rgba(255,255,255,.2);border-radius:10px;color:#fffefa;font-weight:650}
.appHeader #boardTitle:focus{background:rgba(255,255,255,.15);border-color:#e5a79c;box-shadow:0 0 0 3px #d1786833}
.appHeader .topbtn{background:rgba(255,255,255,.065);border:1px solid rgba(255,255,255,.15);color:#f3f5f4;font-weight:700}
.appHeader .topbtn:hover:not(:disabled){background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.32)}
.appHeader .topbtn:focus-visible{outline:2px solid #f2b0a3;outline-offset:2px}
.appHeader #presentBtn{background:linear-gradient(165deg,#d17868,#a74438)!important;border-color:#e6a197!important;box-shadow:0 4px 16px #581b193f;color:#fff!important}
.appHeader #presentBtn:hover:not(:disabled){background:linear-gradient(165deg,#de8979,#b55347)!important}
.appHeader #teacherSignInBtn{border-color:#d1786870}
.appHeader .headerNav,.appHeader .headerUtility{border-color:#ffffff1a}
.appHeader .moreMenu{background:#fffefa;color:#22313a;border:1px solid #dbe1dd;border-radius:13px;box-shadow:0 15px 45px #0c1b2660;overflow-x:hidden}
.appHeader .moreMenu button{color:#22313a}
.appHeader .moreMenu button:hover{background:#f4eeea;color:#873b31}
/* Dock is primarily a functional instrument tray; preserve individual icon art. */
.toolbar{background:rgba(255,254,250,.98);border-color:#d8dfde;scrollbar-color:#b6c5c5 transparent;box-shadow:4px 0 18px #1a334014}
.tool{color:#344c57;border-radius:10px}
.tool:hover{background:#f1f5f3;border-color:#dfebe8}
.tool.active,.tool[aria-pressed="true"]{background:#e2f1ef!important;border-color:#9acdc9!important;color:#13616c!important;box-shadow:inset 3px 0 #247987!important}
.tool:focus-visible{outline:2px solid #d17868;outline-offset:1px}
/* Side panels and floating controls: clear grouping, sharp focus, no obstruction. */
.options,.zoom,.boardFooter,.pages,.teacherPanel{border-color:#dce3df;background:rgba(255,254,250,.97);box-shadow:0 10px 32px #2136441a}
.options,.zoom{border-radius:12px}
.options button,.zoom button,.pageActions button{border-radius:8px}
.options button:hover,.zoom button:hover{border-color:#b7c8c6;background:#f1f6f3}
.zoom .pct{font-variant-numeric:tabular-nums;color:#2f434c;font-weight:750}
.boardFooter{color:#50616a}
.boardFooter .footerBrand small{color:#a54437;font-weight:700}
.footerStatus[data-state="saved"] .statusDot{background:#168568}
.pages{border-radius:16px}
.lessonPageHeader{background:rgba(255,254,250,.98)}
.lessonPageItem.active,.pageitem.active{border-color:#a3c7c4!important;background:#eef7f4!important;box-shadow:0 0 0 1px #d0e6e0 inset}
.lessonPageItem .pageTypeSelect{color:#1d6571}
.teacherPanel{border-radius:17px}
.teacherPanelHead{background:linear-gradient(180deg,#fffefa,#f7f8f5)}
.teacherPanelHead strong{color:#22313a}
.primaryAction,.deployPrimary,.monitorPrimary{border-radius:11px}
button:not(:disabled):focus-visible,a:focus-visible{outline:3px solid #d178687a;outline-offset:2px}
/* New, optional teacher tool-dock toggle at desktop sizes. */
#boardDockToggleBtn{width:39px;min-width:39px;padding:0;justify-content:center}
#boardDockToggleBtn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.boardDockHidden .toolbar{opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-105%)}
body.boardDockHidden .options{left:12px;max-width:calc(100% - 160px)}
body.boardDockHidden .boardFooter{left:12px}
body.boardDockHidden #boardDockToggleBtn{background:#355862;border-color:#c4a69e}
.toolbar{transition:opacity .2s ease,transform .2s ease,visibility .2s}
#boardDockToggleBtn[aria-pressed="true"]{box-shadow:inset 0 0 0 1px #e4a79d}
@media(max-width:1120px){#boardDockToggleBtn{display:none!important}}
@media(max-width:720px){
  .appHeader{height:52px!important}
  /* In v0.9.0, a later width:62px rule accidentally overrides the
     mobile horizontal instrument strip. Explicitly restore full width. */
  .toolbar{
    position:absolute!important;left:0!important;right:0!important;
    top:auto!important;bottom:0!important;width:100%!important;
    height:calc(62px + env(safe-area-inset-bottom))!important;
    display:flex!important;flex-direction:row!important;
    align-items:center;gap:5px;padding:6px 8px;
    padding-bottom:max(6px,env(safe-area-inset-bottom))!important;
    overflow-x:auto!important;overflow-y:hidden!important;
    box-shadow:0 -5px 18px #1a334017;background:#fffefa;
    border-right:0;border-top:1px solid #d8dfde;border-radius:0;
    z-index:15;scrollbar-width:thin;
  }
  .toolbar .tool{flex:0 0 45px;min-width:45px;min-height:44px;height:44px}
  body.presenting .toolbar{display:none!important}
  .boardFooter{background:#fffefa}
  .moreMenu #mobileLessonsMenuBtn{display:flex!important}
  .appHeader .moreMenu{max-height:calc(100dvh - 70px)}
}
@media(max-width:520px){.appHeader::before{background:linear-gradient(90deg,#d17868 0 30%,transparent 78%)}}
@media(prefers-reduced-motion:reduce){.toolbar{transition:none}}