/* The new shell (switch newui; loaded with tokens.css only while it is on). page::shell draws it; SHELL-CONTRACT.md says what
 * pages may rely on. Figma: student rail + header S1 6:2, tutor sidebar T1 13:2 (184px here, owner), manager sidebar MGR-1 126:1358,
 * phone headers 102:1137 / 120:1084 / 121:919, tab bar 5:124.
 * Fonts: brand A's Newsreader and Hanken Grotesk are self-hosted under fonts/ (OFL, latin, variable weight, from
 * @fontsource-variable 5.2.8). The paper stays white (tokens.css --ac-paper-*). */
@font-face{font-family:"Newsreader";src:url(fonts/newsreader.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url(fonts/hanken-grotesk.woff2) format("woff2");font-weight:100 900;font-display:swap}
html[data-theme] .ws{font-family:var(--ac-font-ui)}
html[data-theme] .ws :is(h1,h2,h3,.home-score,.next-up h2){font-family:var(--ac-font-heading)}
:focus-visible{outline:2px solid var(--ac-accent-solid);outline-offset:2px}
.sh{--sh-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6 -6'/%3E%3C/svg%3E")}

/* The frame: the side is fixed at the left edge (--sh-w wide), the page column beside it. */
.sh{--sh-w:0px}
.ws.sh{max-width:none;margin:0;padding:0 0 0 var(--sh-w);min-height:100vh;background:linear-gradient(90deg,var(--ac-bg-surface) calc(var(--sh-w) - 1px),var(--ac-border-default) 0 var(--sh-w),var(--ac-bg-canvas) 0)}
.sh-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px;max-width:1440px;padding:28px 32px 20px}
.sh-body{max-width:1440px;padding:0 32px 32px}
.sh-student :is(.sh-head,.sh-body){padding-inline:36px}
@media (min-width:1200px){.sh-student :is(.sh-head,.sh-body){max-width:1092px;margin-inline:auto}}  /* laptop: the iPad layout (1020 + gutters), centred */
.sh .icon{flex:none}
.sh-side{position:fixed;z-index:1000;top:0;bottom:0;left:0;width:var(--sh-w);display:flex;flex-direction:column;overflow:hidden auto;background:var(--ac-bg-surface);border-right:1px solid var(--ac-border-default)}
.sh-switch.js button,.sh-side .admin-branch-switch.js button{display:none}  /* shell.mjs sends the form on change */
.sh-switch{margin:0}

/* Shared pieces: the centre badge, the bell, counts, the theme control, the account menu. */
.ws .sh-brand{display:flex;align-items:center;gap:10px;flex:1;min-width:0;min-height:44px;border-radius:var(--ac-radius-control);color:var(--ac-text-default);text-decoration:none}
.sh-badge{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:var(--ac-radius-control);background:var(--ac-accent-solid);color:var(--ac-text-on-accent);font:700 13px/1 var(--ac-font-heading);object-fit:contain}
img.sh-badge{background:none}
.sh-brand-text{display:flex;flex-direction:column;min-width:0;line-height:1.2}
.sh-brand-name{font:600 16px/1.2 var(--ac-font-heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sh-brand-role{font-size:12px;color:var(--ac-text-muted);overflow-wrap:anywhere}  /* wraps: the centre's name is never cut (QA T-02) */
.ws .sh-bell{position:relative;flex:none;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:44px;min-height:44px;border-radius:var(--ac-radius-control);color:var(--ac-text-default);text-decoration:none}
.sh-bell .sh-ico{position:relative;display:inline-flex;align-items:center;gap:4px}
.sh-count{min-width:18px;padding:1px 6px;border-radius:var(--ac-radius-pill);background:var(--ac-accent-solid);color:var(--ac-text-on-accent);font:700 11px/1.3 var(--ac-font-num);text-align:center}
.sh-side .sh-bell .icon{width:18px;height:18px}
.sh-head .sh-bell{width:44px;border:1px solid var(--ac-border-default);border-radius:var(--ac-radius-pill);background:var(--ac-bg-surface)}
.sh-head .sh-count{position:absolute;left:11px;top:-9px}
.ws .sh-bell:hover{background:var(--ac-bg-raised)}
.sh-theme-form{display:contents}
.sh-theme{display:inline-flex;gap:2px;margin:0;padding:3px;border-radius:var(--ac-radius-pill);background:var(--ac-bg-raised)}
.ws .sh-theme button{display:inline-flex;align-items:center;gap:6px;min-height:29px;padding:0 12px;border:0;border-radius:var(--ac-radius-pill);background:transparent;color:var(--ac-text-muted);font-size:13px;font-weight:600}
.sh-student .sh-theme button{min-height:38px}
.sh-theme .icon{width:16px;height:16px}
.ws .sh-theme button[aria-pressed="true"]{background:var(--ac-bg-surface);color:var(--ac-text-default);font-weight:700}
.sh-acct{position:relative}
.sh-acct>summary{list-style:none;cursor:pointer}
.sh-acct>summary::-webkit-details-marker{display:none}
.sh-head .sh-acct>summary{display:grid;place-items:center;width:44px;height:44px;border-radius:var(--ac-radius-control);color:var(--ac-text-default)}
.sh-acct-menu{position:absolute;z-index:1001;right:0;top:calc(100% + 6px);display:flex;flex-direction:column;gap:2px;min-width:240px;padding:8px;border:1px solid var(--ac-border-default);border-radius:var(--ac-radius-panel);background:var(--ac-bg-surface);box-shadow:0 12px 32px #0002}
.sh-side .sh-acct-menu{top:auto;bottom:calc(100% + 4px);left:0;right:auto;min-width:0;width:240px}
.ws.sh .sh-side:has(.sh-acct[open]){overflow:visible}  /* the open menu may reach past the sidebar (Figma X-1 267:41) */
.sh-acct-name{margin:4px 12px 6px;font-size:13px;color:var(--ac-text-muted)}
.ws .sh-acct-menu>a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 12px;border-radius:var(--ac-radius-control);color:var(--ac-text-default);text-decoration:none}
.ws .sh-acct-menu>a:hover{background:var(--ac-bg-raised)}
.sh-acct-theme{padding:6px 8px}
.sh-acct-sub{margin:-4px 12px 6px;font-size:13px;color:var(--ac-text-muted)}
.sh-acct-group{margin:10px 12px 2px;font-size:12px;font-weight:600;color:var(--ac-text-muted)}
.sh-acct-label{flex:1}
/* Switch to (Figma X-1 267:41): each way with a line under it; the current one tinted and ticked. */
.ws .sh-acct-menu>a.sh-acct-way{min-height:52px;padding:6px 12px}
.sh-acct-waysub{display:block;font-size:12px;font-weight:400;color:var(--ac-text-muted)}
.ws .sh-acct-menu>a.sh-acct-way[aria-current]{background:var(--ac-accent-subtle);color:var(--ac-accent-text);font-weight:600}
.sh-acct-way>.icon:last-child{width:18px;height:18px}
.sh-parent .sh-acct-menu{width:min(320px,calc(100vw - 32px));max-height:calc(100vh - 90px);overflow-y:auto}
@media (min-width:700px){.sh-student .sh-acct-theme{display:none}}  /* the header has it (Figma S1 6:2) */
@media (max-width:699px){.sh-head-theme{display:none}}
:is(.sh-tutor,.sh-manager,.sh-parent) .sh-head-theme{display:none}  /* in the account menu: tutor T1, manager IPD-M/MGR and parent headers carry no theme switch */

/* The header: the page's only h1 and its line, the page's buttons, then study room / theme / bell; a manager's tabs under. */
.sh-head-text{flex:1 1 260px;min-width:0}
.ws.sh .sh-title{margin:0;font:600 28px/1.2 var(--ac-font-heading);color:var(--ac-text-default)}
.ws.sh-student .sh-title{font-size:30px}
.sh-sub{margin:2px 0 0;font-size:14px;color:var(--ac-text-muted)}
.sh-student .sh-sub{font-size:15px}
.sh-head-end{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.ws .sh-room{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border:1px solid var(--ac-border-default);border-radius:var(--ac-radius-pill);background:var(--ac-bg-surface);color:var(--ac-accent-text);font-size:14px;font-weight:600;text-decoration:none}
.sh-room .icon{width:18px;height:18px}
.sh-room-n{color:var(--ac-text-muted);font-size:13px;font-weight:400}
@media (pointer:coarse){.ws .sh-theme button{min-height:38px}}  /* 44px with the track: touch targets */
/* Touch: the controls keep their Figma size, and an invisible ::before (::after is the rail's tooltip) makes the tap area at least 44 x 44, centred on the control
   (owner 2026-10-29; crawl: theme switch 38, parent segments incl. the child picker and the calendar's Calendar/List/Day/Week/Month 36,
   worksheet filters 38, sidebar rows 36-42, progress cells 18-26). Nothing is painted and nothing moves. */
@media (pointer:coarse){
  .ws :is(.sh-theme button, .pp-seg a, .tu-seg, .tu-seg2), .ws.sh .sh-side :is(.sh-nav a, .sh-jump, .sh-acct > summary, .sh-fold, .sh-fold-top, .sh-bell),
  .ws .pg-cells > a.pg-cell { position: relative; }
  .ws :is(.sh-theme button, .pp-seg a, .tu-seg, .tu-seg2)::before, .ws.sh .sh-side :is(.sh-nav a, .sh-jump, .sh-acct > summary, .sh-fold, .sh-fold-top, .sh-bell)::before,
  .ws .pg-cells > a.pg-cell::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
  /* Progress cells sit 3px apart, so their areas overlap: the area goes behind the cells (inside the row, isolated so it stays above the
     card), and a tap on a cell's own square always opens that cell; the gaps and the edges of the row open the nearest. */
  .ws .pg-cells { isolation: isolate; }
  /* The rest of the crawl: text links ("All 6 ->" 22, "See the marks" 21, "Full calendar" 26), Send (40 wide), "Back" on app/email.php (36 wide), the worksheet's tabs (38),
     and checkboxes through the label that toggles them ("Acadence may read this" 22, the notification kinds 12). */
  .ws :is(.st-all, a.tp2-link, .tdy-link, nav.tabs button), html[data-theme] :is(.cm-sheet-head > .cm-send, .cm-auth .cm-actions a, .cm-tick, #push-kinds label) { position: relative; }
  .ws :is(.st-all, a.tp2-link, .tdy-link, nav.tabs button)::before, html[data-theme] :is(.cm-sheet-head > .cm-send, .cm-auth .cm-actions a, .cm-tick, #push-kinds label)::before {
    content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
  /* The menu list scrolls, so it clipped the first and last rows' areas: 2px more room inside it, given back by the margin (nothing moves). */
  :is(.sh-tutor, .sh-manager) .sh-side .sh-nav { padding-block: 2px; margin-block: -2px; }
  .ws .pg-cells > a.pg-cell::before { z-index: -1; }
}
/* Tabs are pills, the current one tinted (Figma IPD-M 381:1956, 382:1276). */
.sh-tabs{flex-basis:100%;display:flex;gap:4px;margin-top:8px;overflow-x:auto;scrollbar-width:none}
.ws .sh-tabs a{flex:none;display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:var(--ac-radius-pill);color:var(--ac-text-muted);font-size:15px;font-weight:500;text-decoration:none;white-space:nowrap}
.ws .sh-tabs a:hover{color:var(--ac-text-default);background:var(--ac-bg-raised)}
.ws .sh-tabs a[aria-current]{color:var(--ac-accent-text);background:var(--ac-accent-subtle);font-weight:600}
@media (pointer:coarse){.ws .sh-tabs a{min-height:44px}}
.sh-switch-head,.sh-head>.admin-branch-switch{display:none}
@media (max-width:699px){.sh-head>.admin-branch-switch{display:block}}

/* Switchers. The select carries the value; the chevron sits on top of it and lets taps through. */
.sh-switch label{position:relative;display:flex;align-items:center;gap:6px;margin:0}
.ws .sh-switch select,.ws .sh-side .admin-branch-switch select{flex:1;min-width:0;min-height:0;margin:0;padding:0 22px 0 0;border:0;background:transparent;color:var(--ac-text-default);font-size:14px;font-weight:600;-webkit-appearance:none;appearance:none;text-overflow:ellipsis;cursor:pointer}
.sh-switch label>.icon{position:absolute;right:12px;width:14px;height:14px;color:var(--ac-text-muted);pointer-events:none}
.sh-switch-name{font-size:13px;color:var(--ac-text-muted)}
.sh-switch-side label,.sh-side .admin-branch-switch label{height:40px;padding:0 12px;border:1px solid var(--ac-border-strong);border-radius:var(--ac-radius-control);background:var(--ac-bg-surface)}
.sh-side .admin-branch-switch{display:block;margin:0}
.sh-side .admin-branch-switch label{position:relative;display:flex;align-items:center;gap:6px;font-size:0;color:var(--ac-text-muted)}  /* the word "Branch" stays for screen readers; the select says "All branches" */
.sh-side .admin-branch-switch label::after{content:"";position:absolute;right:12px;width:14px;height:14px;background:var(--ac-text-muted);pointer-events:none;-webkit-mask:var(--sh-chevron) center/contain no-repeat;mask:var(--sh-chevron) center/contain no-repeat}
.sh-switch-child .sh-switch-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.sh-switch-child label{min-height:44px;gap:8px;padding:0 8px}
.ws .sh-switch-child select{font-size:17px;padding-right:20px}
.ws .sh-switch-child select:disabled{opacity:1;cursor:default;padding-right:0}
.sh-switch-child label>.icon{right:0}
.sh-avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--ac-radius-pill);background:var(--ac-accent-subtle);color:var(--ac-accent-text);font-size:14px;font-weight:700}

/* Tutor and manager: the sidebar (Figma 232px, 184px here by the owner's word), a 64px rail by choice or from 700 to
   1200px, so on iPads (its button opens it over the page), a tab bar and a drawer behind "More" on phones. */
:is(.sh-tutor,.sh-manager) .sh-side{gap:4px;padding:20px 8px;container-type:inline-size}
@media (min-width:700px){:is(.sh-tutor,.sh-manager){--sh-w:64px}}
@media (min-width:900px){html:not(.sh-side-mini) .sh-tutor{--sh-w:184px}}  /* tutors: labelled on iPads too (Figma IPD-T1 317:4) */
@media (min-width:1200px){html:not(.sh-side-mini) .sh-manager{--sh-w:184px}}
html.sh-side-peek :is(.sh-tutor,.sh-manager) .sh-side{width:184px;box-shadow:0 0 0 100vmax #0005}
.sh-brand-row{display:flex;align-items:center;gap:0;padding:0 0 12px}
.sh-brand-row .sh-brand{gap:8px}
.sh-brand-row .sh-bell{min-width:32px}
.ws.sh .sh-side :focus-visible{outline:2px solid var(--ac-accent-solid);outline-offset:-2px;box-shadow:none}  /* inside the edge: the menu scrolls, so outside would be clipped */
.sh-brand-row .sh-count{position:absolute;left:10px;top:-8px}
.ws .sh-jump{display:flex;align-items:center;gap:6px;width:100%;min-height:36px;margin:0 0 8px;padding:0 8px;white-space:nowrap;border:0;border-radius:var(--ac-radius-control);background:var(--ac-bg-raised);color:var(--ac-text-muted);font-size:13px;text-align:left}
.sh-jump .icon{width:16px;height:16px}
.sh-jump .sh-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
/* .ws: teacher.css's `.ws kbd` (the marking pages' key hints: a box and 0 5px padding) has the same weight and loads later (Telegram 206). */
.ws .sh-jump kbd{flex:none;padding:0;border:0;background:none;color:inherit;font:600 11px var(--ac-font-num)}

/* Search or jump (Ctrl K; Figma T10 19:1493): a panel near the top, the field, then rows; the row Enter opens is tinted. */
.ws dialog.sh-jump-panel{max-width:none;position:fixed;inset:120px auto auto 50%;transform:translateX(-50%);width:min(620px,calc(100vw - 32px));max-height:calc(100vh - 160px);margin:0;padding:8px;border:1px solid var(--ac-border-default);border-radius:16px;background:var(--ac-bg-surface);color:var(--ac-text-default);box-shadow:0 12px 32px rgb(0 0 0 / .18);font-family:var(--ac-font-ui)}
.sh-jump-panel[open]{display:flex;flex-direction:column}
.ws dialog.sh-jump-panel::backdrop{background:rgb(0 0 0 / .25)}
.sh-jump-field{display:flex;align-items:center;gap:10px;min-height:48px;margin:0;padding:0 10px}
.sh-jump-field .icon{width:20px;height:20px;color:var(--ac-text-muted)}
dialog.sh-jump-panel input{box-shadow:none;border-radius:0;flex:1;min-width:0;min-height:40px;margin:0;padding:0;border:0;background:none;color:var(--ac-text-default);font-size:17px;outline:0}
.ws.sh .sh-side dialog.sh-jump-panel input:is(:focus,:focus-visible){outline:0;box-shadow:none;border:0}
dialog.sh-jump-panel kbd{box-shadow:none;padding:0;border:0;background:none;color:var(--ac-text-muted);font:600 11px var(--ac-font-num)}
.sh-jump-field:focus-within{box-shadow:inset 0 -2px 0 var(--ac-accent-solid)}
.sh-jump-panel ul{margin:4px 0 0;padding:0;list-style:none;overflow-y:auto}
.sh-jump-panel li a{display:flex;align-items:center;gap:12px;min-height:44px;padding:6px 10px;border-radius:var(--ac-radius-control);color:var(--ac-text-default);font-size:15px;font-weight:600;text-decoration:none}
.sh-jump-panel li a .icon{flex:none;width:18px;height:18px;color:var(--ac-text-muted)}
.sh-jump-panel li a>span{display:flex;flex-direction:column}
.sh-jump-sub{font-size:12px;font-weight:400;color:var(--ac-text-muted)}
.sh-jump-panel li.on a,.sh-jump-panel li a:hover{background:var(--ac-accent-subtle);color:var(--ac-accent-text)}
.sh-jump-none{margin:8px 10px 12px;font-size:14px;color:var(--ac-text-muted)}

/* The branch panel (shell.mjs): beside the sidebar on iPads and laptops (Figma IPD-M2 378:122), a sheet on phones (IPM-2 311:279). */
.admin-branch-switch label{position:relative}
.ws .sh-branch-open{position:absolute;inset:0;width:100%;min-height:0;margin:0;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer}
.sh-branch-open:focus-visible{outline:2px solid var(--ac-accent-solid);outline-offset:2px}
.sh-branch-panel{position:fixed;inset:64px auto auto 196px;width:min(340px,calc(100vw - 32px));margin:0;padding:18px 20px;border:1px solid var(--ac-border-default);border-radius:16px;background:var(--ac-bg-surface);color:var(--ac-text-default);box-shadow:0 12px 32px rgb(0 0 0 / .18);font-family:var(--ac-font-ui)}
.sh-branch-panel li button:focus-visible{outline:2px solid var(--ac-accent-solid);outline-offset:-2px;border-radius:8px}
.sh-branch-panel::backdrop{background:rgb(0 0 0 / .25)}
.sh-branch-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sh-branch-panel h2{margin:0;font:600 20px/1.2 var(--ac-font-heading)}
.sh-branch-done{min-height:44px;padding:0 4px;border:0;background:none;color:var(--ac-accent-text);font-size:15px;font-weight:700;cursor:pointer}
.sh-branch-panel p{margin:4px 0 10px;font-size:13px;line-height:1.45;color:var(--ac-text-muted)}
.sh-branch-panel .sh-branch-note{margin:10px 0 0;font-size:12px}
.sh-branch-panel ul{margin:0;padding:0;list-style:none}
.sh-branch-panel li+li{border-top:1px solid var(--ac-border-default)}
.sh-branch-panel li button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:44px;padding:0 4px;border:0;background:none;color:var(--ac-text-default);font-size:15px;text-align:left;cursor:pointer}
.sh-branch-panel li button[aria-pressed="true"]{font-weight:600}
.sh-branch-panel li button[aria-pressed="true"]::after{content:"\2713";color:var(--ac-accent-text);font-size:18px}
@media (max-width:699px){
  .sh-branch-panel{inset:auto 0 0 0;width:100%;max-width:none;padding:22px 16px calc(24px + env(safe-area-inset-bottom));border-radius:20px 20px 0 0}
  .sh-branch-panel ul{border:1px solid var(--ac-border-default);border-radius:var(--ac-radius-control)}
  .sh-branch-panel li button{padding:0 16px}
}
:is(.sh-tutor,.sh-manager) .sh-nav{display:flex;flex-direction:column;gap:4px;flex:0 1 auto;min-height:0;overflow-y:auto}
.sh-switch-open{display:none}
.ws.sh:is(.sh-tutor,.sh-manager) .sh-side :is(.sh-nav a,.sh-foot>a,.sh-acct>summary,.sh-fold:not([hidden])){position:relative;display:flex;align-items:center;gap:10px;min-height:40px;padding:0 10px;white-space:nowrap;border:0;border-radius:var(--ac-radius-control);background:transparent;color:var(--ac-text-default);font-size:15px;font-weight:600;text-decoration:none}
.ws.sh-manager .sh-side :is(.sh-nav a,.sh-foot>a,.sh-acct>summary){font-weight:400}
.sh-side .sh-ico{display:inline-flex}
.ws.sh:is(.sh-tutor,.sh-manager) .sh-side :is(.sh-nav a,.sh-foot>a,.sh-acct>summary,.sh-fold):hover{background:var(--ac-bg-raised)}
.ws.sh:is(.sh-tutor,.sh-manager) .sh-side .sh-nav a[aria-current]{background:var(--ac-accent-subtle);color:var(--ac-accent-text);font-weight:700}
.sh-foot{display:flex;flex-direction:column;gap:4px;margin-top:auto;padding-top:12px}
.ws.sh .sh-side .sh-back{min-height:44px;border:1px solid var(--ac-border-default)}
.ws.sh .sh-side .sh-fold:not([hidden]){color:var(--ac-text-muted);font-size:14px}
/* The rail: icons only, each named in a tip on hover or focus; the switchers wait for the full sidebar. */
@container (max-width:100px){
  .sh-brand-row{flex-direction:column;padding:0 0 8px}
  .ws.sh .sh-side :is(.sh-brand,.sh-nav a,.sh-foot>a,.sh-acct>summary,.sh-fold:not([hidden]),.sh-jump,.sh-bell){justify-content:center;padding:0;min-height:44px;min-width:44px}
  .ws.sh .sh-side .sh-switch-open:not([hidden]){position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;border:1px solid var(--ac-border-strong);border-radius:var(--ac-radius-control);background:var(--ac-bg-surface);color:var(--ac-text-default)}
  .sh-side .sh-nav{overflow:visible}
  .sh-side :is(.sh-label,.sh-brand-text,.sh-switch,.admin-branch-switch,kbd){display:none}
  .sh-side .sh-count{position:absolute;left:10px;top:-8px}
  .sh-fold .icon{transform:rotate(180deg)}
  .sh-side .sh-acct-menu{left:calc(100% + 8px);right:auto;bottom:0;min-width:240px}
  .sh-side [data-tip]:is(:hover,:focus-visible)::after{content:attr(data-tip);position:absolute;z-index:1;left:calc(100% + 10px);top:50%;transform:translateY(-50%);padding:4px 10px;border-radius:6px;background:var(--ac-text-default);color:var(--ac-bg-surface);font-size:13px;font-weight:600;white-space:nowrap;pointer-events:none}
}
/* LIVE 1028 (owner: "too squeezy"): on a short window the rail's menu shrank and its icons slid under Account / Back /
   Collapse (the rail does not scroll, so its tips can show). There the menu scrolls on its own, as the full sidebar's does. */
@media (max-height:860px){@container (max-width:100px){.sh-side .sh-nav{overflow:hidden auto;scrollbar-width:thin}
  .sh-side .sh-nav [data-tip]:is(:hover,:focus-visible)::after{content:none}}}  /* clipped there: shell.mjs shows the name outside (.sh-tipfloat) */
.sh-tipfloat{position:fixed;z-index:1001;padding:4px 10px;border-radius:6px;font-family:var(--ac-font-ui);background:var(--ac-text-default);color:var(--ac-bg-surface);font-size:13px;font-weight:600;white-space:nowrap;pointer-events:none;transform:translateY(-50%)}
/* The rail's tips and menus reach past its edge. */
@media (min-width:700px) and (max-width:1199px){html:not(.sh-side-peek) :is(.sh-tutor,.sh-manager) .sh-side{overflow:visible}}
html.sh-side-mini :is(.sh-tutor,.sh-manager) .sh-side{overflow:visible}
@media (min-width:700px){.sh:is(.sh-tutor,.sh-manager) .sh-head .sh-bell{display:none}}  /* in the sidebar */
/* --sh-tabbar-h: what the phone tab bar covers at the bottom (with the safe area), 0 where there is none: pin your bottom bars above it. */
.ws.sh{--sh-tabbar-h:0px}
.sh-tabbar,.sh-acct-close{display:none}
@media (max-width:699px){
  :is(.sh-tutor,.sh-manager) .sh-side{z-index:1002;width:min(288px,85vw);visibility:hidden;transform:translateX(-100%);transition:transform .2s,visibility .2s}
  html.sh-side-peek :is(.sh-tutor,.sh-manager) .sh-side{width:min(288px,85vw);visibility:visible;transform:none}
  .ws.sh:is(.sh-tutor,.sh-manager) .sh-side :is(.sh-jump kbd,.sh-brand-row .sh-bell,.sh-switch-open:not([hidden]),.sh-fold:not([hidden])){display:none}  /* no keyboard hint, one bell, no fold */
  .ws.sh:is(.sh-tutor,.sh-manager){--sh-tabbar-h:calc(73px + env(safe-area-inset-bottom))}
  .sh-tabbar{position:fixed;z-index:1000;left:0;right:0;bottom:0;display:flex;gap:4px;padding:6px 8px calc(10px + env(safe-area-inset-bottom));background:var(--ac-bg-surface);border-top:1px solid var(--ac-border-default)}
  .ws.sh .sh-tabbar :is(a,button){flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:0;min-height:56px;padding:0;border:0;background:none;color:var(--ac-text-muted);font-size:12px;font-weight:600;text-decoration:none}
  .sh-tabbar .sh-ico{position:relative;display:inline-flex;padding:4px 16px;border-radius:var(--ac-radius-pill)}
  .sh-tabbar .icon{width:22px;height:22px}
  .ws.sh .sh-tabbar a[aria-current]{color:var(--ac-accent-text);font-weight:700}
  .sh-tabbar a[aria-current] .sh-ico{background:var(--ac-accent-subtle)}
  .ws.sh:is(.sh-tutor,.sh-manager){padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  :is(.sh-tutor,.sh-manager) .sh-head-end>:not(.sh-bell),:is(.sh-tutor,.sh-manager) .sh-tabs{display:none}  /* the page repeats vital actions in its body */
}

/* Student: the rail (88px) from 900px wide, a tab bar along the bottom below that (Figma 5:257, 5:124). */
.sh-student .sh-nav a{display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--ac-text-muted);font-size:12px;font-weight:600;text-decoration:none}
.sh-student .sh-nav .sh-ico{display:inline-flex;padding:6px 16px;border-radius:var(--ac-radius-pill)}
.sh-student .sh-nav .icon{width:22px;height:22px}
.ws.sh-student .sh-nav a[aria-current]{color:var(--ac-accent-text);font-weight:700}
.sh-student .sh-nav a[aria-current] .sh-ico{background:var(--ac-accent-subtle)}
@media (min-width:900px){
  .sh-student{--sh-w:88px}
  .sh-student .sh-side{align-items:center;gap:12px;padding:20px 0}
  .sh-student .sh-brand{flex:none}
  .sh-student .sh-badge{width:48px;height:48px;font-size:16px}
  .sh-student .sh-brand-text{display:none}
  .sh-switch-rail label{flex-direction:column;gap:2px;width:72px;padding:6px 4px;border:1px solid var(--ac-border-strong);border-radius:var(--ac-radius-control);background:var(--ac-bg-raised)}
  .sh-switch-rail .sh-switch-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .ws .sh-switch-rail select{width:62px;padding:0;font-size:11px;line-height:14px;text-align:center;text-align-last:center}
  .sh-switch-rail label>.icon{position:static;width:12px;height:12px}
  .sh-student .sh-nav{display:flex;flex-direction:column;gap:12px;margin-top:16px}
  .sh-student .sh-nav a{justify-content:center;width:72px;height:60px}
  .sh-student .sh-foot{margin-top:auto}
  .sh-student .sh-foot .sh-bell{gap:4px;color:var(--ac-text-muted);font-size:12px}
  .sh-student .sh-foot .sh-ico{width:54px;height:34px;justify-content:center;color:var(--ac-text-default)}
  .sh-student .sh-foot .icon{width:22px;height:22px}
  .sh-student .sh-foot .sh-count{position:absolute;left:32px;top:0}
}
@media (max-width:899px){
  .sh-student .sh-side{top:auto;right:0;width:auto;flex-direction:row;padding:6px 8px calc(10px + env(safe-area-inset-bottom));border-right:0;border-top:1px solid var(--ac-border-default)}
  .sh-student .sh-side>:not(.sh-nav){display:none}
  .sh-student .sh-nav{display:flex;flex:1;gap:4px}
  .sh-student .sh-nav a{flex:1;justify-content:center;gap:2px;min-height:56px}
  .sh-student .sh-nav .sh-ico{padding:4px 16px}
  .ws.sh-student{padding-bottom:calc(84px + env(safe-area-inset-bottom));--sh-tabbar-h:calc(73px + env(safe-area-inset-bottom))}
  .sh-switch-head{display:block}
  .sh-switch-head label{min-height:44px;padding:0 12px;border:1px solid var(--ac-border-strong);border-radius:var(--ac-radius-pill);background:var(--ac-bg-surface)}
  .ws .sh-switch-head select{flex:none;max-width:40vw}
  .sh-switch-head .sh-switch-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
}
/* Phones, every role (Figma IPT-1 306:8, IPM-1 311:4, PAR-2 167:573): the switcher pill, the bell and "..." on one row, the
   title and its line under them; "..." opens a drawer from the right (PAR-MENU 243:939). */
@media (max-width:699px){
  .sh-head{gap:8px 4px;padding:12px 16px 16px}
  .sh-head>.sh-switch,.sh-head>.admin-branch-switch{order:0}
  .sh-head-end{order:1;margin-left:auto;flex-wrap:nowrap;gap:4px}
  .sh-head-text{order:2;flex:1 1 100%;padding-top:8px}
  .ws.sh .sh-title{font-size:30px}
  .ws.sh .sh-sub{font-size:15px}
  .ws.sh .sh-room{display:none}
  .sh-head .sh-bell{border:0;background:none}
  .sh-head .sh-switch label,.sh-head .admin-branch-switch label{min-height:36px;padding:0 12px;border:0;border-radius:var(--ac-radius-pill);background:var(--ac-accent-subtle);color:var(--ac-accent-text)}
  .ws .sh-head .sh-switch:not(.sh-switch-child) select,.ws .sh-head .admin-branch-switch select{max-width:52vw;color:var(--ac-accent-text);font-size:15px}
  .sh-head .admin-branch-switch{position:relative;margin:0}
  .sh-head .admin-branch-switch label{position:relative;display:flex;align-items:center;font-size:0}
  .ws .sh-head .admin-branch-switch select{min-height:0;margin:0;padding:0 22px 0 0;border:0;background:transparent;font-weight:600;-webkit-appearance:none;appearance:none}
  .sh-head .admin-branch-switch label::after{content:"";position:absolute;right:12px;width:14px;height:14px;background:currentColor;-webkit-mask:var(--sh-chevron) center/contain no-repeat;mask:var(--sh-chevron) center/contain no-repeat;pointer-events:none}
  .sh-head .admin-branch-switch.js button{display:none}
  .sh-switch-child label{background:none;padding:0 8px}
  .sh-head .sh-switch label>.icon{color:currentColor}
  .sh-body,.sh-student .sh-body{padding:0 16px 24px}
  .sh-student .sh-head{padding-inline:16px}  /* the title lines up with the cards (S-43, IPS frames x=16) */
  :is(.sh-student,.sh-parent) .sh-acct-menu{position:fixed;top:0;right:0;bottom:0;width:min(318px,85vw);max-height:none;padding:16px 12px calc(16px + env(safe-area-inset-bottom));border-width:0 0 0 1px;border-radius:0;overflow-y:auto;box-shadow:0 0 0 100vmax #0005}
  :is(.sh-student,.sh-parent) .sh-acct-close{position:absolute;top:8px;right:8px;display:grid;place-items:center;width:44px;height:44px;border:0;background:none;color:var(--ac-text-default)}
  :is(.sh-student,.sh-parent) .sh-acct-name{margin:6px 52px 6px 12px;font:600 20px/1.3 var(--ac-font-ui);color:var(--ac-text-default)}
}
/* Pieces page teams build with inside .sh-body (SHELL-CONTRACT section 3): Figma's button, card, two columns, pills. */
.ws .sh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border:1px solid var(--ac-border-strong);border-radius:8px;background:var(--ac-bg-surface);color:var(--ac-text-default);font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer}
.ws .sh-btn:hover{background:var(--ac-bg-raised)}
.ws .sh-btn.primary{border-color:var(--ac-accent-solid);background:var(--ac-accent-solid);color:var(--ac-text-on-accent)}
.ws .sh-btn.primary:hover{background:var(--ac-accent-hover)}
@media (pointer:coarse){.ws .sh-btn{min-height:44px}}
.sh-card{padding:20px;border:1px solid var(--ac-border-default);border-radius:12px;background:var(--ac-bg-surface)}
.sh-grid-2{display:grid;gap:20px;align-items:start}
@media (min-width:1100px){.sh-grid-2{grid-template-columns:minmax(0,1fr) 320px}}
.sh-pill{display:inline-flex;align-items:center;min-height:28px;padding:0 10px;border-radius:var(--ac-radius-pill);background:var(--ac-accent-subtle);color:var(--ac-accent-text);font-size:13px;font-weight:600;white-space:nowrap}
.sh-pill[data-tone=ok]{background:var(--ac-status-ok-bg);color:var(--ac-status-ok)}
.sh-pill[data-tone=warn]{background:var(--ac-status-warn-bg);color:var(--ac-status-warn)}
.sh-pill[data-tone=danger]{background:var(--ac-status-danger-bg);color:var(--ac-status-danger)}
.sh-pill[data-tone=info]{background:var(--ac-status-info-bg);color:var(--ac-status-info)}
.sh-pill[data-tone=muted]{background:var(--ac-bg-raised);color:var(--ac-text-muted)}
.sh-muted{color:var(--ac-text-muted)}
/* Classes (myclasses.php; owner 2026-10-29, Telegram 215): one rounded tile per class, as in Microsoft Teams. */
.ws .sh-class-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin:0;padding:0;list-style:none}
.ws .sh-class-tile{display:flex;flex-direction:column;align-items:flex-start;gap:6px;height:100%;min-height:168px;border-radius:var(--ac-radius-panel);color:var(--ac-text-default);text-decoration:none}
.ws .sh-class-tile:hover{border-color:var(--ac-accent-solid);background:var(--ac-bg-raised)}
.ws .sh-class-badge{display:grid;place-items:center;width:56px;height:56px;margin:0 0 6px;border-radius:12px;background:var(--ac-accent-solid);color:var(--ac-text-on-accent);font:600 20px var(--ac-font-heading)}
.ws .sh-class-name{font-size:16px;font-weight:600;line-height:1.3;overflow-wrap:anywhere}
.ws .sh-class-sub{color:var(--ac-text-muted);font-size:13px}
.ws .sh-class-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:6px}
@media (max-width:699px){.ws .sh-class-tiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}.ws .sh-class-tile{min-height:140px;padding:16px}}
.sh-tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}  /* stat tiles: as many across as fit, one per row on a phone */
/* Parents: the child switcher is in the header now. */
.sh-parent .parent-page .child-switch{display:none}
@media print{.sh-side,.sh-head-end,.sh-menu,.sh-switch{display:none}.ws.sh{padding:0}}

/* Marks a student or parent sees (owner, 2026-10-26): calm "to fix" colours; tutors' screens keep red. */
:is(#marked-paper,#parent-pages) .rv-mark[data-tone="zero"]{--tone:var(--ac-mark-fix)}
:is(#marked-paper,#parent-pages) .rv-mark[data-tone="partial"]{--tone:var(--ac-mark-half)}
:is(#marked-paper,#parent-pages) .rv-mark[data-tone="full"]{--tone:var(--ac-mark-tick)}

/* Student screens (phase D2, PLAN 3). */
/* Writing (S2): one slim bar docked to the top edge, Done first, saved state and Hand in at the end. The paper keeps the rest. */
html[data-theme] .ws-toolbar{top:0;left:0;right:0;width:auto;margin:0;justify-content:flex-start;padding:4px max(8px,env(safe-area-inset-right)) 4px max(8px,env(safe-area-inset-left));padding-top:max(4px,env(safe-area-inset-top));border-width:0 0 1px;border-radius:0;box-shadow:none;background:var(--ac-bg-surface)}
html[data-theme] .ws-toolbar #exit-workspace{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;font-weight:600}
html[data-theme] .ws-toolbar #save-chip{margin-left:auto}
html[data-theme] .ws-toolbar #submit{padding:6px 18px}
/* Work (S6): filter chips. */
.ws-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.ws .ws-chips a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--ac-border-default);border-radius:var(--ac-radius-pill);color:var(--ac-text-default);text-decoration:none}
.ws .ws-chips a[aria-current]{background:var(--ac-accent-subtle);border-color:var(--ac-accent-solid);color:var(--ac-accent-text);font-weight:600}
.ws-count{font-variant-numeric:tabular-nums;color:var(--ac-text-muted)}
/* Today (S1): streak kept small; nothing due said calmly. */
.streak-chip{margin:0 0 12px}
.ws .streak-chip a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--ac-radius-pill);background:var(--ac-bg-raised);color:var(--ac-text-muted);font-size:14px;text-decoration:none}
.next-up.clear h2{margin:0 0 4px}
/* Marked paper (S4): notes first, total behind "Show". */
/* Practice home (S5): start a set first; topics two across on wide screens. */
@media (min-width:900px){
  html[data-theme] #practice:has(.practice-topic){display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-items:start}
  html[data-theme] #practice:has(.practice-topic)>:not(.practice-topic){grid-column:1/-1}
}
/* Me (S7). */
.me-class{padding:12px 0;border-top:1px solid var(--ac-border-default)}
.me-class h3{margin:0 0 4px}
.me-class .ring{margin-right:6px}
.me-stats{font-size:15px}
.me-powered{text-align:center;margin-top:24px}

/* Tutor screens (phase D3, brand B density): tighter cards, tables and headings than the student pages. */
.ws.sh-tutor .card{padding:16px;margin-bottom:16px}
.ws.sh-tutor :is(th,td){padding:8px 10px}
.ws.sh-tutor h1{font-size:26px;margin:8px 0 16px}
.ws.sh-tutor h2{font-size:18px;margin:0 0 8px}
.ws.sh-tutor .assignment-row{padding:12px 0}
.ws.sh-tutor .section-heading{margin-bottom:8px}
/* Today (T1): three counts, one action each. */
.needs-you-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:0 0 12px}
.ws .needs-you-grid .stat-card{display:flex;flex-direction:column;gap:6px;padding:14px 16px}
.ws .needs-you-grid .stat-card>strong{margin:0;font-variant-numeric:tabular-nums}
.ws .needs-you-grid .button-link{align-self:flex-start;margin-top:auto}
/* Marking queue (T2) and Release (T5). */
.queue-group h2 .ws-count{font-size:15px;font-weight:600}
.release-plan{margin:0 0 8px;padding-left:20px;color:var(--ac-text-muted);font-size:14px}
.release-plan:empty{display:none}
/* Review (T3): keys printed on the buttons. */
.ws .rv-decide kbd{margin-left:4px;padding:0 5px;border:1px solid var(--ac-border-default);border-radius:4px;font:12px var(--ac-font-num);color:var(--ac-text-muted)}

/* Parent screens (phase D4, PLAN 5): Needs you first, the week in one sentence, ladder words, share a notice. */
.parent-page .needs-you{border:2px solid var(--ac-accent-solid);border-radius:var(--ac-radius-panel);padding:16px 20px;margin:0 0 24px}
.parent-page .needs-you > h2{margin-top:0}
.parent-page .needs-you .card{box-shadow:none;margin-bottom:12px}
.parent-page .parent-week-line{font-size:21px;line-height:1.5;margin:0}
.parent-page .parent-week-line .overdue{color:var(--ac-status-warn)}
.parent-page .pg-levels{color:var(--ac-text-muted)}
.parent-page .share-wa{display:inline-flex;align-items:center;min-height:44px;font-size:16px}
/* Narrow screens: a hidden table label (.sr-only, absolute) escaped its scroll box and widened the page; class rows wrap their badges. */
.ws .table-scroll{position:relative}
.ws .assignment-row{flex-wrap:wrap}

/* Centre admin pages under the new look (admin_shell_open newui): the shell is the menu, so admin.css's two-column grid (224px menu + page) must not squeeze the page. */
.ws-admin.sh-admin{display:block}

/* Above the title: a page's back link ("‹ Parent", page::head opts back) or focus mode's Exit; under the line: its chip slot. */
.ws .sh-backlink,.ws .sh-exit{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin:0 0 2px -4px;padding:0 4px;color:var(--ac-accent-text);font-size:15px;font-weight:600;text-decoration:none}
.sh-backlink .icon{width:18px;height:18px}
.sh-head-text>.sh-backlink,.sh-head-text>.sh-exit{display:flex;width:max-content}
.sh-exit{gap:8px}
.sh-exit .icon{width:20px;height:20px}
.sh-chip-slot{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
/* page::head 'banner' (e.g. the relief tutor's "Covering for ...", Figma IPD-T46 372:4366): full width above the title; on phones under the pill row. */
.sh-banner{flex-basis:100%;order:-1;min-width:0}
@media (max-width:699px){.sh-banner{order:2}}
/* Focus mode (page::focus): no side menu, rail or tab bar on any screen; the page uses the whole width. */
.ws.sh.sh-focus{--sh-w:0px;--sh-tabbar-h:0px;padding-bottom:0}
.ws.sh.sh-focus .sh-head :is(.sh-bell,.sh-acct){display:none}  /* focus mode (e.g. T-27 meeting mode with a parent watching): no bell, no account menu */
/* A marking session (AI_marking review.mjs puts html.sh-focus while it is open; it draws its own Exit): the session alone. */
html.sh-focus .sh-side,html.sh-focus .sh-head,html.sh-focus .sh-tabbar{display:none}
html.sh-focus .ws.sh{--sh-w:0px;--sh-tabbar-h:0px;padding:0;background:var(--ac-bg-canvas)}
html.sh-focus .sh-body{padding:0;max-width:none}
/* iPad tutors (Figma IPD-T1 317:4): collapse icon beside the brand; Notifications (count at the end) above Account in the foot. */
.ws.sh .sh-fold-top,.ws.sh.sh-tutor .sh-side .sh-foot>.sh-bell-foot.sh-bell{display:none}  /* beats the sidebar's link rule: one bell outside iPad */
@media (min-width:900px) and (max-width:1199px){
  html:not(.sh-side-mini) .ws.sh.sh-tutor .sh-fold-top:not([hidden]){display:grid;place-items:center;width:40px;height:40px;margin-left:auto;padding:0;border:0;border-radius:var(--ac-radius-control);background:none;color:var(--ac-text-muted)}
  html:not(.sh-side-mini) .ws.sh.sh-tutor .sh-brand-row>.sh-bell,html:not(.sh-side-mini) .ws.sh.sh-tutor .sh-foot>.sh-fold{display:none}
  html:not(.sh-side-mini) .ws.sh.sh-tutor .sh-side .sh-foot>.sh-bell-foot.sh-bell{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;width:auto;height:auto;min-height:44px;padding:0 10px;border:0;border-radius:var(--ac-radius-control);background:none;color:var(--ac-text-default);font-size:15px;font-weight:600;text-decoration:none}
  .ws.sh .sh-bell-foot .sh-ico{display:contents}
  .ws.sh .sh-bell-foot .icon{width:20px;height:20px}
  .ws.sh .sh-side .sh-bell-foot .sh-count{order:2;margin-left:auto;position:static}
  .ws.sh .sh-bell-foot .sh-label{display:inline}
}
/* "Whose page?" (Figma PAR-7 247:1281): the branch panel's look, under the parent header; rows with the child's initials. */
@media (min-width:700px){.sh-child-panel{inset:72px auto auto max(16px,calc(50% - 308px))}}  /* under the centred parent header */
.sh-child-panel ul{border:0}
.sh-child-panel li button{justify-content:flex-start;gap:12px;min-height:56px;padding:6px 10px;border-radius:var(--ac-radius-control)}
.sh-child-panel li button[aria-pressed="true"]{background:var(--ac-accent-subtle)}
.sh-child-panel li button[aria-pressed="true"]::after{content:none}
.sh-child-panel .sh-avatar{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:var(--ac-accent-subtle);color:var(--ac-accent-text);font-size:13px;font-weight:700}
.sh-child-text{display:flex;flex-direction:column;font-weight:600}
.sh-child-text small{font-size:12px;font-weight:400;color:var(--ac-text-muted)}
.sh-child-panel li+li{border-top:0}
.sh-child-panel .sh-child-group{margin:10px 10px 2px;font-size:13px;color:var(--ac-text-muted)}
.sh-child-panel li.sh-branch-note{margin:10px 10px 0}
/* Add to Home Screen sheet (push.mjs; Figma G6.3 62:520): bottom sheet, three numbered steps, "Got it". */
.ws dialog.push-homescreen{position:fixed;inset:auto 0 0 0;width:100%;max-width:520px;margin:0 auto;padding:22px 20px calc(20px + env(safe-area-inset-bottom));border:1px solid var(--ac-border-default);border-radius:20px 20px 0 0;background:var(--ac-bg-surface);color:var(--ac-text-default)}
.ws dialog.push-homescreen::backdrop{background:rgb(0 0 0 / .35)}
.push-homescreen h2{margin:0 0 12px;font:600 21px/1.25 var(--ac-font-heading)}
.push-homescreen ol{margin:0 0 16px;padding:0;list-style:none;display:grid;gap:12px}
.push-homescreen li{display:flex;align-items:center;gap:12px;font-size:15px}
.push-hs-n{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:var(--ac-accent-subtle);color:var(--ac-accent-text);font-weight:700;font-size:13px}
.push-homescreen .icon{flex:none;width:20px;height:20px}
.ws .push-homescreen .push-hs-ok{width:100%;min-height:48px;border:0;border-radius:var(--ac-radius-control);background:var(--ac-accent-solid);color:var(--ac-text-on-accent);font-weight:700}
/* Parents on iPads and laptops: the phone's column, centred (COVERAGE P rows "centred"; QA-R6 P-04). */
@media (min-width:700px){.sh-parent :is(.sh-head,.sh-body){max-width:680px;margin-inline:auto}}
/* Parents on iPad/laptop as on the phone (QA P-06/P-11/P-15/P-20/P-24): the child pill, bell and "..." on one row, then back + title under it. */
@media (min-width:700px){.sh-parent .sh-head>.sh-switch{order:0}.sh-parent .sh-head-end{order:1;margin-left:auto}.sh-parent .sh-head-text{order:2;flex:1 1 100%}}
/* Managers' More page on phones (Figma IPM-13 313:1275): over the page, under the tab bar; card lists with chevrons. */
.ws .sh-more-page{position:fixed;z-index:999;inset:0 0 calc(72px + env(safe-area-inset-bottom)) 0;width:auto;height:auto;max-width:none;max-height:none;margin:0;padding:24px 16px;border:0;border-radius:0;overflow-y:auto;background:var(--ac-bg-canvas);color:var(--ac-text-default)}
.ws .sh-more-page h2{margin:0;font:600 30px/1.2 var(--ac-font-heading)}
.ws .sh-more-page .sh-sub{margin:4px 0 16px}
.sh-more-group{margin:16px 0 6px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ac-text-muted)}
.sh-more-list{display:flex;flex-direction:column;border:1px solid var(--ac-border-default);border-radius:var(--ac-radius-control);background:var(--ac-bg-surface)}
.ws .sh-more-list a{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 16px;color:var(--ac-text-default);font-size:16px;text-decoration:none}
.sh-more-list a+a{border-top:1px solid var(--ac-border-default)}
.sh-more-list a>span{flex:1}
.sh-more-list a .icon{width:20px;height:20px;color:var(--ac-accent-text)}
.sh-more-list a .icon:last-child{width:16px;height:16px;color:var(--ac-text-muted)}
.sh-more-theme{margin-top:16px}
.ws.sh .sh-tabbar .sh-more.on{color:var(--ac-accent-text);font-weight:700}
/* More open: it is the lit tab, not the page underneath (QA M-03). */
.ws.sh .sh-tabbar .sh-more.on .sh-ico{background:var(--ac-accent-subtle)}
.ws.sh .sh-tabbar:has(.sh-more.on) a[aria-current]{color:var(--ac-text-muted);font-weight:600}
.sh-tabbar:has(.sh-more.on) a[aria-current] .sh-ico{background:none}
@media (min-width:700px){.ws .sh-more-page{display:none}}
/* "Marking N" (Figma T-NAV): a pill at the end of the sidebar item; on the icon in the rail and the phone tab bar. */
.sh-nav a,.sh-tabbar a{position:relative}
.sh-nav .sh-nav-count{margin-left:auto}
.sh-tabbar .sh-nav-count{position:absolute;left:calc(50% + 6px);top:2px}
/* QA T-02 (IPD-T1 317:4): no keyboard hint on touch; the labelled tutor sidebar shows the Marking count as plain grey text
   and the Notifications count red, as drawn. */
@media (pointer:coarse){.ws.sh .sh-jump kbd{display:none}}
@media (min-width:900px){html:not(.sh-side-mini) .ws.sh.sh-tutor .sh-side .sh-nav .sh-nav-count{min-width:0;padding:0;background:none;color:var(--ac-text-muted);font-size:13px;font-weight:600}
  html:not(.sh-side-mini) .ws.sh.sh-tutor .sh-side .sh-bell-foot .sh-count{background:var(--ac-status-danger);color:#fff}}
/* X-01 (Figma X-3 268:405): the staff "Planned update" line above the header, and the "new version" toast (shell.mjs). */
.ws.sh .sh-planned{max-width:1376px;margin:16px 32px 0;padding:10px 16px;border:1px solid var(--ac-status-info,#3b6ea5);border-radius:var(--ac-radius-control);background:var(--ac-status-info-bg);color:var(--ac-text-default);font-size:14px}
@media (max-width:699px){.ws.sh .sh-planned{margin:12px 16px 0}}
.sh-newversion{position:fixed;z-index:1400;left:16px;right:16px;bottom:calc(16px + var(--sh-tabbar-h,0px));width:fit-content;margin:0 auto;display:flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:8px 8px 8px 16px;border:1px solid var(--ac-border-default);border-radius:var(--ac-radius-pill);background:var(--ac-bg-surface);color:var(--ac-text-default);box-shadow:0 8px 24px #0002;font-size:15px}
.sh-newversion .icon{width:18px;height:18px;color:var(--ac-accent-text)}
.ws .sh-newversion button{min-height:44px;padding:0 12px;border:0;background:none;color:var(--ac-accent-text);font:inherit;font-weight:700;cursor:pointer}
/* Taps feel instant (owner, iPad): a pressed look on every link, button and row, no grey tap flash or double-tap zoom wait;
   the loading bar and working buttons come from tapfeel.mjs. Only under the new look (html[data-theme]). */
html[data-theme] :is(a,button,summary,select,label,input[type=submit],input[type=button],[role=button],[role=tab]){-webkit-tap-highlight-color:transparent}
/* Not inside the writing workspace: its touch-action:none (ui.css) is what stops Safari zooming the page while writing, and
   WebKit lets a scrolling box in between reset it, so nothing in there may ask for zoom (lms-ui-workspace.mjs). */
html[data-theme] :is(a,button,summary,select,label,input[type=submit],input[type=button],[role=button],[role=tab]):not(.workspace *){touch-action:manipulation}
html[data-theme] :is(a,button,summary,input[type=submit],input[type=button],[role=button],[role=tab]):not(:disabled):active{filter:brightness(.9);transform:scale(.98);transition:transform .06s,filter .06s}
html[data-bs-theme=dark][data-theme] :is(a,button,summary,input[type=submit],input[type=button],[role=button],[role=tab]):not(:disabled):active{filter:brightness(1.25)}
.sh-loadbar{position:fixed;z-index:3000;top:0;left:0;height:3px;width:0;background:var(--ac-accent-solid);pointer-events:none;opacity:0}
.sh-loadbar.on{opacity:1;animation:sh-load 8s cubic-bezier(.1,.7,.2,1) forwards}
@keyframes sh-load{0%{width:0}10%{width:35%}100%{width:92%}}
.sh-working{position:relative;cursor:progress}
.sh-working::after{content:"";display:inline-block;width:14px;height:14px;margin-left:8px;vertical-align:-2px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:sh-spin .7s linear infinite}
@keyframes sh-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  html[data-theme] :is(a,button,summary,input[type=submit],input[type=button],[role=button],[role=tab]):not(:disabled):active{transform:none;transition:none}
  .sh-loadbar.on{animation:none;width:100%}
  .sh-working::after{animation:none;border-right-color:currentColor;opacity:.6}
}
/* Skeleton screens (Figma SK-0 467:15494, SK-1..4; tapfeel.mjs): only the page column; the sidebar, rail and tab bar stay.
   Blocks bg/raised on bg/canvas, cards bg/surface; the paper stays white with paper rules. One shared pulse, static with
   reduced motion. */
.sh-loading>.sh-head,.sh-loading>.sh-planned,.sh-loading>.sh-body>:not(.sh-skel,.sh-skel-status){display:none!important}
.sh-skel{display:flex;flex-direction:column;gap:16px;padding-top:32px}
@keyframes sh-pulse{50%{opacity:.55}}
.sh-skel .sk{display:block;flex:none;max-width:100%;border-radius:6px;background:var(--ac-bg-raised);animation:sh-pulse 1.6s ease-in-out infinite}  /* blocks pulse; cards and the paper stay */
.sh-skel-status{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sh-skel .sk-head{display:flex;flex-direction:column;gap:12px}
.sh-skel .sk-chips{display:flex;gap:8px}
.sh-skel .sk-chips .sk{border-radius:16px}
.sh-skel .sk-card{display:flex;flex-direction:column;gap:12px;padding:16px;border:1px solid var(--ac-border-default);border-radius:12px;background:var(--ac-bg-surface)}
.sh-skel .sk-rows{gap:0;padding:0 16px}
.sh-skel .sk-row{display:flex;align-items:center;gap:12px;min-height:57px}
.sh-skel .sk-row+.sk-row{border-top:1px solid var(--ac-border-default)}
.sh-skel .sk-dot{width:32px;height:32px;border-radius:50%}
.sh-skel .sk-lines{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0}
.sh-skel .sk-row>.sk:last-child{border-radius:12px}
.sh-skel .sk-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sh-skel .sk-two{display:grid;grid-template-columns:3fr 2fr;gap:16px}
.sh-skel .sk-line{display:flex;justify-content:space-between;gap:16px}
.sh-skel .sk-detail{display:grid;grid-template-columns:63fr 37fr;gap:16px;align-items:start}
.sh-skel .sk-col{display:flex;flex-direction:column;gap:16px}
.sh-skel-paper{align-items:center;padding-top:24px}
.sh-skel .sk-paper{display:flex;flex-direction:column;gap:8px;width:min(640px,100%);aspect-ratio:1/1.414;padding:48px;background:#fff;box-shadow:0 2px 12px #0002}
.sh-skel .sk-paper .sk{background:#d6e4f0}
.sh-skel .sk-paper .sk-gap{display:block;height:96px}
@media (max-width:1199px){.sh-skel .sk-tiles{grid-template-columns:repeat(3,1fr)}.sh-skel .sk-tiles>:nth-child(4){display:none}}
@media (max-width:699px){
  .sh-skel{padding-top:16px}
  .sh-skel .sk-tiles{grid-template-columns:1fr 1fr}.sh-skel .sk-tiles>:nth-child(4){display:flex}
  .sh-skel :is(.sk-two,.sk-detail){grid-template-columns:1fr}
  .sh-skel .sk-two>:nth-child(2){display:none}
  .sh-skel .sk-paper{padding:24px}
}
@media (prefers-reduced-motion:reduce){.sh-skel .sk{animation:none}}
/* page::head 'beside' (a link or form at the end of the back link's row; S-42, S-46) and 'kicker' (a chip above the title; S-49). */
.sh-backrow{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.sh-backrow-end{display:flex;align-items:center;gap:8px}
.ws .sh-sidelink,.ws .sh-backrow-end :is(button,a){display:inline-flex;align-items:center;min-height:44px;padding:0 4px;border:0;background:none;color:var(--ac-accent-text);font:600 15px var(--ac-font-ui);text-decoration:none;cursor:pointer}
.sh-backrow-end form{margin:0}
.sh-kicker{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 6px}
/* On the notifications page its bell is the lit item (student rail "Alerts", tutor foot "Notifications"; S-46). */
.ws.sh .sh-side .sh-bell[aria-current]{color:var(--ac-accent-text);font-weight:700}
.ws.sh-student .sh-side .sh-bell[aria-current] .sh-ico,.ws.sh .sh-side .sh-bell-foot[aria-current]{background:var(--ac-accent-subtle);border-radius:var(--ac-radius-pill)}
/* page::head 'inline' (study room, PH3 291:13119): on phones the title shares the row with the class pill and the bell. */
@media (max-width:699px){
  .sh-head.sh-head-inline .sh-head-text{order:0;flex:1 1 0;min-width:0;padding:0 0 0 6px}
  .ws.sh .sh-head-inline .sh-title{overflow:hidden;font-size:22px;white-space:nowrap;text-overflow:ellipsis}
  .sh-head-inline :is(.sh-sub,.sh-backlink){display:none}
  .sh-head-inline .sh-head-end{order:1}
}
/* A11Y: visually hidden but focusable (the upload pickers' file inputs, S-08); the visible label shows the focus ring. */
.sh-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);border:0;opacity:0}
html[data-theme] .upload-pick:focus-within{outline:2px solid var(--ac-accent-solid);outline-offset:2px}
/* Moodle Boost (theme/boost/scss/moodle/core.scss:115-128) paints a clicked classless link: pale background, dark text and a
   pale/dark shadow above and below (the owner's "white box" behind a pressed menu item). Under the new look a link keeps its
   own colours on focus; keyboard focus shows our ring instead. */
html[data-theme] :is(.aalink,a:not([class]),.arrow_link,.activityinstance>a):is(:focus,.focus){background-color:transparent;color:inherit;box-shadow:none}
html[data-theme] :is(.aalink,a:not([class]),.arrow_link,.activityinstance>a):focus-visible{outline:2px solid var(--ac-accent-solid);outline-offset:2px}