/* The app shell (js/shell.js): the left bar on every page. 248 px, a 68 px icon rail, or (under 900 px) a drawer. */
:root{--shw:248px}
html.rail{--shw:68px}
html.is-full{--shw:0px}
@media (max-width:899px){:root,html.rail{--shw:0px}}

.shell{position:fixed;left:0;top:0;bottom:0;width:248px;z-index:45;background:var(--surface);border-right:1px solid var(--line);
  padding-left:env(safe-area-inset-left,0px);display:none;color:var(--ink);font-family:var(--f-ui)}
body[data-view="app"] .shell{display:block}
html.is-full .shell,html.is-full .appbar{display:none!important}
.sh-in{height:100%;display:flex;flex-direction:column;gap:4px;padding:12px 10px calc(10px + env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
@media (min-width:900px){
  body[data-view="app"]{padding-left:var(--shw)}
  html.rail .shell{width:68px}
  .sh-burger,.sh-x{display:none!important}
  /* Classroom, Games and Board have their own top bars: the page header shows only in Scribe (its pages menu) */
  body[data-view="app"]:not([data-mode="scribe"]) .appbar{display:none}
  body[data-mode="scribe"] .appbar .brand .mark,body[data-mode="scribe"] .appbar .brand-name{display:none}
  .toasts{left:calc(50% + var(--shw) / 2)}
}
.sh-top{display:flex;align-items:center;gap:8px;min-height:44px;padding:0 2px 6px}
.sh-brand{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.sh-brand .brand-name{font-size:1.35rem}
.sh-rail{width:40px;height:40px;border-radius:10px;border:0;background:none;color:var(--muted);display:grid;place-items:center;cursor:pointer;flex:none}
.sh-rail:hover{background:var(--surface-2);color:var(--ink)}

/* the class switcher: big, the class's colour and name */
.sh-cls{display:block;width:100%;margin:2px 0 8px}
.sh-cls-btn{width:100%;min-height:64px;justify-content:flex-start;gap:10px;padding:8px 10px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line);text-align:left}
.sh-cls-btn:hover{border-color:color-mix(in srgb,var(--ink) 25%,var(--line))}
.sh-cls-btn>.ic{flex:none;color:var(--muted)}
.sh-dot{flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:hsl(var(--h) 68% 46%);color:#fff;font:800 1rem/1 var(--f-fun);letter-spacing:.02em;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.16)}
.sh-cls-t{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.2}
.sh-cls-t small{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.sh-cls-t .ui-sel-val{font:800 1.05rem/1.25 var(--f-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-cls-list{width:100%;max-height:min(70vh,480px);z-index:80}
.sh-cls-list [role=option]{gap:10px;min-height:48px;font-weight:600}
.sh-cls-list [role=option]::before{content:"";width:12px;height:12px;border-radius:50%;flex:none;background:hsl(var(--h,210) 68% 46%)}
.sh-cls-list .sh-cls-new{color:var(--brand);font-weight:700}
.sh-cls-list .sh-cls-new::before{display:none}

/* the items */
.sh-nav{display:flex;flex-direction:column;gap:2px}
.sh-item{--c:var(--brand);position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 12px;border:0;border-radius:12px;background:none;
  color:var(--ink);font:700 .95rem var(--f-ui);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.sh-item:hover{background:var(--surface-2)}
.sh-item:focus-visible,.sh-rail:focus-visible,.sh-cls-btn:focus-visible{outline:3px solid var(--c,var(--brand));outline-offset:1px}
.sh-item[hidden]{display:none}
.sh-ic{display:grid;place-items:center;width:24px;height:24px;flex:none;color:var(--c)}
.sh-l{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-item[data-mode="scribe"]{--c:var(--scribe)}
.sh-item[data-mode="classroom"]{--c:var(--classroom)}
.sh-item[data-mode="games"]{--c:var(--games)}
.sh-item[data-mode="board"]{--c:var(--wbm)}
.sh-item[aria-current="page"]{background:color-mix(in srgb,var(--c) 14%,transparent)}
.sh-item[aria-current="page"]::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:3px;background:var(--c)}
.sh-item.sh-off{cursor:default;color:var(--muted)}
.sh-item.sh-off:hover{background:none}
.sh-item.sh-off .sh-ic{color:var(--muted)}
.sh-item .pbadge{flex:none}
.sh-lab{margin:12px 12px 2px;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.sh-grow{flex:1;min-height:8px}
.sh-foot{display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--line);padding-top:8px}
.sh-foot .sync{align-self:flex-start;margin:2px 8px 4px}
.sh-me{position:relative;display:flex;align-items:center;gap:4px;margin-top:4px}
.sh-who{flex:1;min-width:0;width:auto;height:auto;min-height:52px;display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:4px 6px;border-radius:12px;text-align:left;color:var(--ink)}
.sh-who:hover{background:var(--surface-2)}
.sh-who-t{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.sh-who-t b,.sh-who-t small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sh-who-t small{font-size:.72rem;color:var(--muted)}
.sh-sm{width:44px;height:44px;flex:none}
.sh-me .pmenu{top:auto;bottom:calc(100% + 8px);left:0;right:auto}

/* the 68 px rail: icons only, tooltips on hover and on a long press */
@media (min-width:900px){
  html.rail .sh-in{padding:12px 8px;overflow:visible}
  html.rail .sh-top{flex-direction:column;padding:0}
  html.rail .sh-brand .brand-name,html.rail .sh-l,html.rail .sh-lab,html.rail .sh-cls-t,html.rail .sh-cls-btn>.ic,html.rail .sh-who-t,html.rail .sh-item .pbadge,html.rail .sh-out,html.rail .sh-foot .sync{display:none}
  html.rail .sh-lab+.sh-nav{border-top:1px solid var(--line);padding-top:6px;margin-top:6px}
  html.rail .sh-item{justify-content:center;padding:0}
  html.rail .sh-cls-btn{min-height:52px;padding:0;justify-content:center;background:none;border:0}
  html.rail .sh-dot{width:44px;height:44px;border-radius:50%;font-size:.95rem}
  html.rail .sh-cls-list{left:calc(100% + 10px);top:0;min-width:260px;width:auto}
  html.rail .sh-me{flex-direction:column}
  html.rail .sh-who{justify-content:center;padding:4px 0}
  html.rail .sh-me .pmenu{left:calc(100% + 10px);bottom:0}
  html.rail #shell [data-tip]{position:relative}
  html.rail #shell [data-tip]:hover::after,html.rail #shell [data-tip]:focus-visible::after,html.rail #shell [data-tip].tip-on::after{content:attr(data-tip);position:absolute;left:calc(100% + 12px);top:50%;transform:translateY(-50%);z-index:90;
    background:var(--ink);color:var(--surface);font:700 .85rem/1.2 var(--f-ui);padding:7px 10px;border-radius:8px;white-space:nowrap;pointer-events:none;box-shadow:var(--sh-2)}
}

/* under 900 px: a drawer from the left, opened with ☰ in the page header */
.sh-burger{display:inline-grid;color:var(--ink)}
.sh-dim{display:none}
@media (max-width:899px){
  .shell{width:min(300px,86vw);transform:translateX(-102%);visibility:hidden;transition:transform .22s ease,visibility 0s linear .22s;box-shadow:none;z-index:70}
  html.sh-open .shell{transform:none;visibility:visible;transition:transform .22s ease;box-shadow:var(--sh-3)}
  html.sh-open .sh-dim{display:block;position:fixed;inset:0;z-index:69;background:rgba(8,12,18,.45)}
  .sh-x{display:inline-grid;width:44px;height:44px}
  .sh-rail{display:none}
}
@media (prefers-reduced-motion:reduce){.shell{transition:none!important}}

/* the page header (Scribe on a computer; every page under 900 px): ☰, Scribe's pages menu, the title "Classroom · Kids 1" */
.appbar .brand-sub.sh-title{display:block;font-weight:700;color:var(--muted);max-width:52vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appbar-in{max-width:none}
:root{--nav-h:0px}
.sh-help{display:flex;flex-direction:column;gap:10px;padding-left:20px;margin:6px 0 16px;line-height:1.5}
/* pages that size themselves by the screen width are now 248 px narrower: the Games team cards keep their pencil on top and wrap their colours */
.gt-edit{z-index:2}
.gt-cols{flex-wrap:wrap;row-gap:3px}
/* the Board's top bar sized by the board's own width (it sits beside the left bar), so it stays one row and never jumps mid-drag */
#stage{container-type:inline-size}
@container (max-width:1720px){ .wb-tb{padding:0 10px;font-size:.92rem} .wb-mode{padding:0 9px} #wbSelBar .wb-tl,#wbFullB .wb-tl{display:none} }
@container (max-width:1100px){ #wbFullB .wb-tl,#wbScoreB .wb-tl,#wbBoardsB .wb-tl,#wbSelBar .wb-tl{display:none} .wb-mode{padding:0 7px;font-size:.9rem} .wb-lsel{max-width:20vw} }
@container (max-width:760px){ .wb-top{flex-wrap:nowrap;overflow-x:auto} .wb-top > *{flex:none} }