/* ============================================================
   THE THUMB BAR AND ITS SHEETS (under 861px). DESIGN.md, "The thumb bar
   and its sheets"; the build plan is Thumb Bar v2 (2026-09-26).

   Loaded LAST in <head> by both bases (inside nb_active on base.html), after
   notebook-account-typography.css, so it wins every tie with a page sheet
   and with the late typography bridge.

   ISOLATION. Every rule is scoped by ID to the parts this sheet owns:
   #nb-tbar (the bar), #mobile-nav-drawer (More, the drawer re-presented under
   861px), #nv-rail-drawer and #nv-rail-backdrop (the chapter sheet, Stage 2),
   #nb-qgrid (the question Grid sheet), #nb-toast, and the phone top bar's
   #mobile-drawer-toggle and #account-btn. At (1,1,1) and above, with
   the last word in <head>, that beats the base.html leaks: styles.css's
   button, a, p, li, ul and input globals, theme-light.css's 860px drawer
   block (a translucent blurred panel, white rows, a gradient premium row),
   notebook-page.css's html #mobile-nav-drawer a and button (1,0,2) and
   notebook-typography.css's html #mobile-nav-drawer .mobile-nav-row (1,1,1).
   Controls get an explicit reset at rest and on :hover, :active and
   :focus-visible.

   WIDTHS. The only rules outside a max-width 860 query are the ones that
   take this sheet's own parts out of the desk (display: none) and the
   drawer's view wrappers (display: contents), so 861px and up paints exactly
   as before.

   SECTIONS
   0 layout values and the desk defaults   6 the chapter sheet (6b on the hub)
   1 the phone top bar                    7 the toast
   2 the bar                              8 reservations
   3 the orb geometry                     9 what the bar replaces, per set
   4 the sheet grammar                    10 forced colours and print
   5 More                                 11 isolation resets

   Tokens only (ZERO_RAW_COLOR_FILES), no --nb-ink-2 or --nb-ink-3 (The
   One-Ink Rule), durations only from --nb-dur-*.
   ============================================================ */

/* ---- 0. The desk never sees these parts ----------------------------- */
#nb-tbar,
#nb-toast,
#nb-scrim,
#mobile-drawer-toggle > .nb-menu-word,
#mobile-nav-drawer .nb-sheet-grab,
#mobile-nav-drawer .nb-sheet-head,
#mobile-nav-drawer .nb-more-back,
#mobile-nav-drawer .nb-more-dh,
#mobile-nav-drawer .nb-more-kick,
#mobile-nav-drawer .nb-more-note,
#mobile-nav-drawer .nb-more-row,
#mobile-nav-drawer .nb-more-theme,
#mobile-nav-drawer .nb-more-where,
#mobile-nav-drawer .nb-more-closed,
#mobile-nav-drawer .nb-more-upgrade,
#mobile-nav-drawer .nb-more-plan,
#mobile-nav-drawer .nb-more-chev,
#mobile-nav-drawer [data-nb-more-view="subjects"],
#nv-rail-drawer .nb-sheet-grab,
#nv-rail-drawer .nb-cs-crumbs,
#nv-rail-drawer .nb-cs-pills,
#nv-rail-drawer .nb-cs-find,
#nv-rail-drawer .nb-cs-empty,
#nv-rail-drawer .nb-cs-premline {
  display: none;
}
/* The hub's chapter sheet (Stage 4) sits beside the bar on a base.html page,
   which has no notebook-page.css to park it: it is not drawn at all until
   section 6 draws it under 861px on the bar. data-nb-cs-solo is only ever
   on the hub's sheet (nb_chapter_sheet.html, cs_solo), so every note keeps
   its drawer exactly as it was. */
#nv-rail-drawer[data-nb-cs-solo],
#nv-rail-backdrop[data-nb-cs-solo] {
  display: none;
}
/* The view wrappers are not boxes on the desk: their rows stay the drawer
   content's own flex items, in today's order, with today's gap. */
#mobile-nav-drawer [data-nb-more-view="boards"],
#mobile-nav-drawer [data-nb-more-view="root"] {
  display: contents;
}

/* ---- 0. Layout values under 861px ------------------------------------
   --nb-tb-layout is the one source of the breakpoint: nb-sheets.js and
   thumb-bar.js read it and never test a width themselves. Empty (unset)
   means a desk width, or a page without this sheet. --nb-tb-h is the bar's
   height (thumb-bar.js re-measures it when large text grows the bar);
   --nb-tb-rail is the rail's width in short landscape. A page without a bar
   leaves both unset, and every consumer reads them with a 0px fallback. */
@media (max-width: 860px) {
  :root {
    --nb-tb-layout: bottom;
  }
  html:has(> body > #nb-tbar) {
    --nb-tb-h: calc(56px + env(safe-area-inset-bottom, 0px));
  }
}
@media (min-width: 768px) and (max-width: 860px) {
  html:has(> body > #nb-tbar) {
    --nb-tb-h: calc(64px + env(safe-area-inset-bottom, 0px));
  }
}
@media (max-width: 860px) and (orientation: landscape) and (max-height: 500px) {
  :root {
    --nb-tb-layout: rail;
  }
  html:has(> body > #nb-tbar) {
    --nb-tb-h: 0px;
    --nb-tb-rail: calc(64px + env(safe-area-inset-left, 0px));
  }
}

/* ---- 1. The phone top bar --------------------------------------------
   The bar-less grammar: a signed-in student's avatar opens More, a guest
   has Log In (the login window) and the word Menu (More), in that order at
   the right edge (the approved demo's [Log in][Menu]; the menu button is
   after the account controls in the DOM's flex order, order: 1, and the
   account group's auto margin pushes both right). On a page with a bar,
   More is the bar's last tab and the menu button steps aside. The
   hamburger's three spans keep their nth-child indices: the word is a <b>
   after them, so no .mobile-drawer-toggle span rule reaches it. */
@media (max-width: 860px) {
  html .topbar > .account-wrap:has(> #account-btn) {
    display: flex;
    flex: 0 0 auto;
    gap: 4px;
    margin-left: auto;
  }
  html .topbar > .account-wrap:has(> #account-btn) > .nav-cta,
  html .topbar > .account-wrap:has(> #account-btn) > .nav-link,
  html .topbar > .account-wrap:has(> #account-btn) > #account-popup {
    display: none;
  }
  html .topbar #account-btn.account-btn {
    display: inline-flex;
  }
  html .topbar #account-btn.account-btn,
  html .topbar #account-btn.account-btn:hover,
  html .topbar #account-btn.account-btn:active,
  html .topbar #account-btn.account-btn:focus-visible {
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 10px;
    border: 0;
    border-radius: var(--nb-r-sm);
    background: none;
    box-shadow: none;
    color: var(--nb-blue);
    font: var(--nb-type-control);
    letter-spacing: normal;
    white-space: nowrap;
    transform: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  /* one light bar (owner, 2026-10-10): over theme-light.css's !important
     ink on base.html pages, as notebook-navchrome-skin.css does above 860px */
  html.theme-light .topbar #account-btn.account-btn {
    color: var(--nb-blue) !important;
  }
  html .topbar #account-btn.account-btn:focus-visible,
  html .topbar #account-btn.account-avatar-btn:focus-visible,
  html .topbar #mobile-drawer-toggle:focus-visible {
    outline: 2px solid var(--nb-blue);
    outline-offset: -2px;
  }
  html .topbar #account-btn.account-avatar-btn {
    width: 44px;
    height: 44px;
    margin: 0;
  }
  /* No Log In beside the login form itself. */
  html .topbar #account-btn.account-btn[data-nb-on-login] {
    display: none;
  }
  html .topbar #mobile-drawer-toggle.mobile-drawer-toggle,
  html .topbar #mobile-drawer-toggle.mobile-drawer-toggle:hover,
  html .topbar #mobile-drawer-toggle.mobile-drawer-toggle:active,
  html .topbar #mobile-drawer-toggle.mobile-drawer-toggle:focus-visible {
    order: 1;
    width: auto;
    min-width: 44px;
    height: 44px;
    margin: 0 -6px 0 -8px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--nb-r-sm);
    background: none;
    box-shadow: none;
    color: var(--nb-ink);
    transform: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html .topbar #mobile-drawer-toggle > span {
    display: none;
  }
  html .topbar #mobile-drawer-toggle > .nb-menu-word {
    display: inline;
    color: var(--nb-ink);
    font: var(--nb-type-control);
    letter-spacing: normal;
  }
  /* A signed-in student opens More from the avatar; a bar page from its
     More tab. */
  html:has(#account-btn.account-avatar-btn) .topbar #mobile-drawer-toggle.mobile-drawer-toggle,
  html:has(> body > #nb-tbar) .topbar #mobile-drawer-toggle.mobile-drawer-toggle {
    display: none;
  }
}
/* Under 360px a guest's bar holds the wordmark and Menu only: Log In is the
   second row of More, and the wordmark keeps its size. */
@media (max-width: 359px) {
  html:not(:has(> body > #nb-tbar)) .topbar #account-btn.account-btn {
    display: none;
  }
}
@media (max-width: 860px) and (hover: hover) {
  html .topbar #account-btn.account-btn:hover,
  html .topbar #mobile-drawer-toggle.mobile-drawer-toggle:hover {
    background: var(--nb-blue-wash);
  }
}

/* ---- 2. The bar -------------------------------------------------------
   56px plus the safe area (64px from 768px), grown by large text and then
   re-measured into --nb-tb-h. Its hairline is an inset shadow, not a
   border, so at normal text the bar is exactly the CSS default and
   thumb-bar.js writes nothing. The tab row is capped at 600px and centred.
   Labels are 12px 600 ink; the one lit tab is blue at 700; a tab that
   cannot act stays full ink and explains itself in the toast. Its colours
   are the site bar's, the dashboard's paper and hairline on every page
   (owner, 2026-10-10; notebook-navbar-skin.css), set on the bar so its
   cradle reads them too. */
@media (max-width: 860px) {
  #nb-tbar.nb-tbar {
    --nb-chrome: var(--nb-m-paper);
    --nb-border: var(--nb-m-hairline);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1250;
    display: block;
    box-sizing: border-box;
    min-height: calc(56px + env(safe-area-inset-bottom, 0px));
    margin: 0;
    padding: 0 0 env(safe-area-inset-bottom, 0px);
    background: var(--nb-chrome);
    border: 0;
    box-shadow: inset 0 1px 0 var(--nb-border);
    color: var(--nb-ink);
    font-family: var(--nb-sans);
    transition: transform var(--nb-dur-2) var(--nb-ease), visibility 0s linear 0s;
  }
  #nb-tbar .nb-tbar-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    max-width: 600px;
    min-height: 56px;
    margin: 0 auto;
    padding: 0;
  }
  #nb-tbar .nb-tbar-tab,
  #nb-tbar .nb-tbar-tab:hover,
  #nb-tbar .nb-tbar-tab:active,
  #nb-tbar .nb-tbar-tab:focus-visible {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    min-height: 56px;
    margin: 0;
    padding: 5px 2px 3px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--nb-ink);
    font: 600 var(--nb-text-xs)/1.1 var(--nb-sans);
    letter-spacing: normal;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    touch-action: manipulation;
    transition: transform var(--nb-dur-1) var(--nb-ease);
  }
  #nb-tbar .nb-tbar-tab:active {
    transform: scale(0.97);
  }
  #nb-tbar .nb-tbar-tab:focus-visible {
    outline: 2px solid var(--nb-blue);
    outline-offset: -4px;
    border-radius: var(--nb-r-md);
  }
  #nb-tbar .nb-tbar-tab.is-lit,
  #nb-tbar .nb-tbar-tab[data-ui-current="page"],
  #nb-tbar .nb-tbar-tab[data-ui-expanded="true"] {
    color: var(--nb-blue);
  }
  #nb-tbar .nb-tbar-tab.is-lit .nb-tbar-label,
  #nb-tbar .nb-tbar-tab[data-ui-current="page"] .nb-tbar-label,
  #nb-tbar .nb-tbar-tab[data-ui-expanded="true"] .nb-tbar-label {
    font-weight: 700;
  }
  /* A sheet that is open lights its own tab; the view you are on goes back
     to ink meanwhile, so one tab is lit at a time. */
  html.nb-sheet-open #nb-tbar .nb-tbar-tab[data-ui-current="page"]:not([data-ui-expanded="true"]) {
    color: var(--nb-ink);
  }
  html.nb-sheet-open #nb-tbar .nb-tbar-tab[data-ui-current="page"]:not([data-ui-expanded="true"]) .nb-tbar-label {
    font-weight: 600;
  }
  #nb-tbar .nb-tbar-tab[data-ui-disabled="true"],
  #nb-tbar .nb-tbar-tab[data-ui-disabled="true"]:active {
    color: var(--nb-ink);
    cursor: default;
    transform: none;
  }
  #nb-tbar .nb-tbar-icon {
    flex: none;
    width: 22px;
    height: 22px;
  }
  #nb-tbar .nb-tbar-label {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
  }
  /* Large text (Stage 2): a label fits its tab. Each tab is a size
     container, and its words take the smaller of their own step and a fifth
     of the tab's width, so at 200% text "Chapters" stays whole on a 390px
     phone (and "Tutor" in the 64px rail) instead of being cut; a label of
     two words (Exit focus) wraps between them before it would be cut. At
     normal text nothing changes: a fifth of the narrowest tab (64px at 320)
     is over the 12px step. A container is its own stacking context, so the
     orb's tab is lifted over the reading line as the orb itself was. */
  #nb-tbar .nb-tbar-tab {
    container-type: inline-size;
  }
  #nb-tbar .nb-tbar-tab--orb {
    z-index: 2;
  }
  /* The orb's shadow falls on its word; the word sits above it, in the
     full ink (by night the shadow read it grey). */
  #nb-tbar .nb-tbar-tab--orb .nb-tbar-label {
    position: relative;
    z-index: 3;
  }
  #nb-tbar .nb-tbar-tab .nb-tbar-label {
    flex-wrap: wrap;
    justify-content: center;
    font-size: min(var(--nb-text-xs), 20cqi);
    white-space: normal;
  }
  #nb-tbar .nb-tbar-count {
    margin-left: 1px;
    font-variant-numeric: tabular-nums;
  }
  /* A tab into a chapter the reader cannot open (Stage 2: Previous or Next
     into a Premium chapter) wears its padlock on the glyph's shoulder, as
     the orb wears its own, so the word keeps the whole width of its tab
     (inline, "Previous" and the padlock needed 65px of a 60px tab at 320).
     Its containing block is the tab, so the label's clip never reaches it. */
  #nb-tbar .nb-tbar-lock {
    position: absolute;
    top: calc(50% - 20px);
    left: calc(50% + 5px);
    display: grid;
    place-items: center;
    line-height: 0;
    pointer-events: none;
  }
  #nb-tbar .nb-tbar-lock .nb-tbar-icon--lock {
    width: 10px;
    height: 10px;
  }
  #nb-tbar .nb-tbar-progress {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    right: 0;
    display: none;
    height: 2px;
    background: var(--nb-blue);
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
  }
  #nb-tbar.nb-tbar[data-nb-progress] .nb-tbar-progress {
    display: block;
  }
  #nb-tbar .nb-tbar-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  /* The keyboard never moves the reservation: the bar steps away by
     visibility and a transform, so the page does not reflow under the
     caret (one predicate, nb-sheets.js: html.nb-kbd-open). */
  html.nb-kbd-open #nb-tbar.nb-tbar {
    visibility: hidden;
    transform: translate3d(0, 100%, 0);
    transition: transform var(--nb-dur-2) var(--nb-ease), visibility 0s linear var(--nb-dur-2);
  }
}
@media (min-width: 768px) and (max-width: 860px) {
  #nb-tbar.nb-tbar {
    min-height: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  #nb-tbar .nb-tbar-row,
  #nb-tbar .nb-tbar-tab,
  #nb-tbar .nb-tbar-tab:hover,
  #nb-tbar .nb-tbar-tab:active,
  #nb-tbar .nb-tbar-tab:focus-visible {
    min-height: 64px;
  }
}
/* Short landscape: the same bar is a 64px rail on the left. */
@media (max-width: 860px) and (orientation: landscape) and (max-height: 500px) {
  #nb-tbar.nb-tbar {
    top: 0;
    right: auto;
    bottom: 0;
    width: var(--nb-tb-rail, 64px);
    min-height: 0;
    padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    box-shadow: inset -1px 0 0 var(--nb-border);
  }
  #nb-tbar .nb-tbar-row {
    grid-auto-flow: row;
    grid-auto-rows: minmax(0, 1fr);
    grid-auto-columns: auto;
    height: 100%;
    max-width: none;
    min-height: 0;
  }
  #nb-tbar .nb-tbar-tab,
  #nb-tbar .nb-tbar-tab:hover,
  #nb-tbar .nb-tbar-tab:active,
  #nb-tbar .nb-tbar-tab:focus-visible {
    min-height: 44px;
    padding-left: 0;
    padding-right: 0;
  }
  #nb-tbar .nb-tbar-progress {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 2px;
    height: auto;
    transform: scaleY(0);
    transform-origin: 50% 0;
  }
  html.nb-kbd-open #nb-tbar.nb-tbar {
    transform: translate3d(-100%, 0, 0);
  }
}
@media (max-width: 860px) and (hover: hover) {
  #nb-tbar .nb-tbar-tab:not([data-ui-disabled="true"]):hover {
    color: var(--nb-blue);
  }
}

/* ---- 3. The orb: the tutor tab's phone form (geometry only) -----------
   The cream disc rises 19px above the bar in a cradle cut from the bar's
   own chrome and hairline. Its colours are the tutor's and live in
   notebook-tutor.css (.nb-tutor-orb, tutor tokens only); here is only where
   it sits, how it settles while a sheet is open, and its blue focus ring. */
@media (max-width: 860px) {
  #nb-tbar .nb-tbar-tab--orb::before {
    content: "";
    display: block;
    flex: none;
    width: 22px;
    height: 22px;
  }
  #nb-tbar .nb-tbar-tab--orb:active {
    transform: none;
  }
  #nb-tbar .nb-tbar-cradle {
    position: absolute;
    top: -22px;
    left: 50%;
    width: 62px;
    height: 62px;
    margin-left: -31px;
    border: 1px solid var(--nb-border);
    border-radius: 50%;
    background: var(--nb-chrome);
    clip-path: inset(0 0 calc(100% - 23px) 0);
    transition: opacity var(--nb-dur-2) var(--nb-ease);
  }
  #nb-tbar .nb-tutor-orb {
    position: absolute;
    z-index: 2;
    top: -18px;
    left: 50%;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-left: -26px;
    border-radius: 50%;
    box-shadow: var(--nb-shadow-1), var(--nb-shadow-2);
    transition: transform var(--nb-dur-2) var(--nb-ease), translate var(--nb-dur-1) var(--nb-ease), scale var(--nb-dur-1) var(--nb-ease), box-shadow var(--nb-dur-2) var(--nb-ease);
  }
  #nb-tbar .nb-tutor-orb .nb-tbar-icon--nib {
    width: 24px;
    height: 24px;
  }
  #nb-tbar .nb-tutor-orb-lock {
    position: absolute;
    right: -3px;
    bottom: -3px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
  }
  #nb-tbar .nb-tutor-orb-lock .nb-tbar-icon--lock {
    width: 12px;
    height: 12px;
  }
  #nb-tbar .nb-tutor-orb-wait {
    position: absolute;
    top: 0;
    right: 0;
    display: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
  }
  #nb-tbar .nb-tutor-orb.is-wait .nb-tutor-orb-wait {
    display: block;
  }
  #nb-tbar .nb-tbar-tab--orb:active .nb-tutor-orb {
    translate: 0 1px;
    scale: 0.94;
    box-shadow: var(--nb-shadow-1);
  }
  #nb-tbar .nb-tbar-tab--orb:focus-visible {
    outline: none;
  }
  #nb-tbar .nb-tbar-tab--orb:focus-visible .nb-tutor-orb {
    outline: 2px solid var(--nb-blue);
    outline-offset: 3px;
  }
  /* While a sheet is open the orb settles into the bar, so it never covers
     a sheet's foot; settled, its focus ring is drawn on the tab cell. */
  html.nb-sheet-open #nb-tbar .nb-tutor-orb {
    transform: translateY(8px) scale(0.58);
  }
  html.nb-sheet-open #nb-tbar .nb-tbar-cradle {
    opacity: 0;
    pointer-events: none;
  }
  html.nb-sheet-open #nb-tbar .nb-tbar-tab--orb:focus-visible {
    outline: 2px solid var(--nb-blue);
    outline-offset: -4px;
    border-radius: var(--nb-r-md);
  }
  html.nb-sheet-open #nb-tbar .nb-tbar-tab--orb:focus-visible .nb-tutor-orb {
    outline: none;
  }
}
@media (max-width: 860px) and (orientation: landscape) and (max-height: 500px) {
  #nb-tbar .nb-tbar-tab--orb::before,
  #nb-tbar .nb-tbar-cradle {
    display: none;
  }
  #nb-tbar .nb-tutor-orb {
    position: relative;
    top: auto;
    left: auto;
    flex: none;
    width: 40px;
    height: 40px;
    margin: 0;
  }
  #nb-tbar .nb-tutor-orb .nb-tbar-icon--nib {
    width: 20px;
    height: 20px;
  }
  #nb-tbar .nb-tutor-orb-lock {
    right: -5px;
    bottom: -3px;
    width: 18px;
    height: 18px;
  }
  #nb-tbar .nb-tutor-orb-lock .nb-tbar-icon--lock {
    width: 10px;
    height: 10px;
  }
  html.nb-sheet-open #nb-tbar .nb-tutor-orb {
    transform: none;
  }
}
@media (max-width: 860px) and (orientation: landscape) and (max-height: 319px) {
  #nb-tbar .nb-tutor-orb {
    width: 32px;
    height: 32px;
  }
  #nb-tbar .nb-tutor-orb .nb-tbar-icon--nib {
    width: 18px;
    height: 18px;
  }
}
/* Focus mode (a note, Stage 2): the tutor steps away with the top bar, and
   Exit focus takes its place after Next. Out of focus mode Exit focus is not
   drawn, so the bar keeps its own count of tabs. */
@media (max-width: 860px) {
  #nb-tbar .nb-tbar-tab[data-nb-key="exit"] {
    display: none;
  }
  html.note-focus-mode #nb-tbar .nb-tbar-tab[data-nb-key="exit"] {
    display: flex;
  }
  html.note-focus-mode #nb-tbar .nb-tbar-tab--orb {
    display: none;
  }
}

/* ---- 4. The sheet grammar ---------------------------------------------
   A sheet is paper lifted onto the page: --nb-paper-raised, a 12px top
   radius, the third shadow, a grabber and a head of 48px (its name and a
   44px Close). It rises from the bar's top edge; nb-sheets.js drives its
   transform (the medium and large detents, the drag that follows the
   finger 1:1) and every inline duration goes through dur(), which is 0
   under reduced motion. The scrim under it is paper at 32%, never ink, and
   it takes no touch scrolling. */
@media (max-width: 860px) {
  #mobile-nav-drawer .nb-sheet-grab,
  #nb-qgrid .nb-sheet-grab {
    display: grid;
    flex: none;
    place-items: center;
    height: 20px;
    cursor: grab;
    touch-action: none;
  }
  #mobile-nav-drawer .nb-sheet-grab::before,
  #nb-qgrid .nb-sheet-grab::before {
    content: "";
    width: 36px;
    height: 5px;
    border-radius: var(--nb-r-pill);
    background: var(--nb-border-strong);
  }
  #mobile-nav-drawer .nb-sheet-head,
  #nb-qgrid .nb-sheet-head {
    display: flex;
    flex: none;
    align-items: center;
    gap: 4px;
    min-height: 48px;
    padding: 0 4px 0 16px;
    touch-action: none;
  }
  html #mobile-nav-drawer .nb-sheet-title,
  html #nb-qgrid .nb-sheet-title {
    margin: 0;
    padding: 0;
    color: var(--nb-ink);
    font: 700 var(--nb-text-md)/1.2 var(--nb-sans);
    letter-spacing: normal;
    text-transform: none;
  }
  html #mobile-nav-drawer .nb-sheet-x,
  html #nb-qgrid .nb-sheet-x {
    display: inline-flex;
  }
  html #mobile-nav-drawer .nb-sheet-x,
  html #mobile-nav-drawer .nb-sheet-x:hover,
  html #mobile-nav-drawer .nb-sheet-x:active,
  html #mobile-nav-drawer .nb-sheet-x:focus-visible,
  html #nb-qgrid .nb-sheet-x,
  html #nb-qgrid .nb-sheet-x:hover,
  html #nb-qgrid .nb-sheet-x:active,
  html #nb-qgrid .nb-sheet-x:focus-visible {
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: var(--nb-r-pill);
    background: none;
    box-shadow: none;
    color: var(--nb-ink);
    transform: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html #mobile-nav-drawer .nb-sheet-x:focus-visible,
  html #nb-qgrid .nb-sheet-x:focus-visible {
    outline: 2px solid var(--nb-blue);
    outline-offset: -2px;
  }
}
@media (max-width: 860px) and (hover: hover) {
  html #mobile-nav-drawer .nb-sheet-x:hover,
  html #nb-qgrid .nb-sheet-x:hover {
    background: var(--nb-blue-wash);
  }
}
/* The shared scrim, for a native sheet without its own (the Grid): under
   the bar, over the page and the top bar. More uses its own backdrop. */
@media (max-width: 860px) {
  #nb-scrim {
    position: fixed;
    inset: 0;
    z-index: 1150;
    display: block;
    background: color-mix(in srgb, var(--nb-paper) 32%, transparent);
    opacity: 0;
    cursor: pointer;
    touch-action: none;
    transition: opacity var(--nb-dur-2) linear;
  }
  #nb-scrim[hidden] {
    display: none;
  }
  #nb-scrim.is-in {
    opacity: 1;
  }
}

/* ---- 5. More ------------------------------------------------------------
   The one drawer, re-presented: a bottom sheet on the bar in portrait (the
   medium detent at 40% of the screen, large under the top bar), a sheet
   from the right in short landscape (from the rail's side on a bar page),
   and the 861 to 1023px drawer untouched above. Its views are Root
   (Theme, Where you are, the rows, Your account), Subjects (the board's
   subjects) and Programmes and boards; nb-sheets.js sets
   data-nb-more-at. Every word is ink; the lit row is the one blue. */
@media (max-width: 860px) {
  html #mobile-nav-drawer.mobile-nav-drawer {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: block;
    opacity: 1;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transition: none;
    pointer-events: none;
  }
  html #mobile-nav-drawer.mobile-nav-drawer[hidden] {
    display: none;
  }
  html #mobile-nav-drawer.mobile-nav-drawer.is-open {
    pointer-events: auto;
  }
  html #mobile-nav-drawer .mobile-nav-drawer__backdrop {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--nb-paper) 32%, transparent);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    opacity: 0;
    cursor: pointer;
    touch-action: none;
    transition: opacity var(--nb-dur-2) linear;
  }
  html #mobile-nav-drawer.is-open .mobile-nav-drawer__backdrop {
    opacity: 1;
  }
  html #mobile-nav-drawer .mobile-nav-drawer__panel {
    position: absolute;
    top: auto;
    right: 0;
    bottom: var(--nb-tb-h, 0px);
    left: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-width: 0;
    height: calc(100vh - var(--nb-tb-h, 0px) - var(--nb-chrome-h, 64px) - 4px - env(safe-area-inset-top, 0px));
    height: calc(100dvh - var(--nb-tb-h, 0px) - var(--nb-chrome-h, 64px) - 4px - env(safe-area-inset-top, 0px));
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--nb-paper-raised);
    border: 0;
    border-top: 1px solid var(--nb-border);
    border-radius: var(--nb-r-lg) var(--nb-r-lg) 0 0;
    box-shadow: var(--nb-shadow-3);
    color: var(--nb-ink);
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(0, 110%, 0);
    transition: none;
    overscroll-behavior: contain;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html #mobile-nav-drawer .mobile-nav-drawer__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0;
    box-sizing: border-box;
    width: auto;
    max-width: none;
    min-width: 0;
    height: auto;
    min-height: 0;
    /* The panel sits on the bar, whose --nb-tb-h already holds the safe
       area; without a bar it sits on the screen's foot and needs it. */
    padding: 0 16px calc(16px + var(--nb-sheet-pad, 0px) + max(0px, env(safe-area-inset-bottom, 0px) - var(--nb-tb-h, 0px)));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto;
  }
  html #mobile-nav-drawer [data-nb-more-view] {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  html #mobile-nav-drawer:not([data-nb-more-at="boards"]) [data-nb-more-view="boards"],
  html #mobile-nav-drawer:not([data-nb-more-at="subjects"]) [data-nb-more-view="subjects"],
  html #mobile-nav-drawer[data-nb-more-at="boards"] [data-nb-more-view="root"],
  html #mobile-nav-drawer[data-nb-more-at="subjects"] [data-nb-more-view="root"],
  html #mobile-nav-drawer .mobile-nav-divider {
    display: none;
  }
  html #mobile-nav-drawer [data-nb-more-view].is-in {
    animation: nb-more-in var(--nb-dur-2) var(--nb-ease) both;
  }
  html #mobile-nav-drawer [data-nb-more-view].is-back {
    animation: nb-more-back var(--nb-dur-2) var(--nb-ease) both;
  }

  /* Theme: Light, Dark and Auto, one radiogroup. */
  html #mobile-nav-drawer .nb-more-theme {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 0;
    margin: 4px 0 16px;
    padding: 2px;
    background: var(--nb-paper-sunken);
    border: 1px solid var(--nb-control-border);
    border-radius: var(--nb-r-md);
  }
  html #mobile-nav-drawer .nb-more-theme-opt {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 44px;
    margin: 0;
    padding: 0 6px;
    border-radius: var(--nb-r-sm);
    color: var(--nb-ink);
    font: var(--nb-type-control);
    white-space: nowrap;
    cursor: pointer;
  }
  html #mobile-nav-drawer .nb-more-theme-opt > svg {
    flex: none;
  }
  html #mobile-nav-drawer .nb-more-theme-in,
  html #mobile-nav-drawer .nb-more-theme-in:focus {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--nb-r-sm);
    background: none;
    box-shadow: none;
    opacity: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
  }
  html #mobile-nav-drawer .nb-more-theme-opt:has(> .nb-more-theme-in:checked) {
    background: var(--nb-blue);
    color: var(--nb-on-blue);
  }
  html #mobile-nav-drawer .nb-more-theme-opt:has(> .nb-more-theme-in:focus-visible) {
    outline: 2px solid var(--nb-blue);
    outline-offset: 2px;
  }

  /* Kickers, headings and notes. */
  html #mobile-nav-drawer .nb-more-kick {
    display: block;
    margin: 20px 0 4px;
    padding: 0;
    color: var(--nb-ink);
    font: 600 var(--nb-text-xs)/1.6 var(--nb-sans);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  html #mobile-nav-drawer .nb-more-dh {
    display: block;
    margin: 4px 0;
    padding: 0;
    color: var(--nb-ink);
    font: 700 var(--nb-text-lg)/1.3 var(--nb-sans);
    letter-spacing: normal;
  }
  html #mobile-nav-drawer .nb-more-note,
  html #mobile-nav-drawer .nb-more-closed {
    display: block;
    margin: 12px 0 0;
    padding: 0;
    color: var(--nb-ink);
    font: 400 var(--nb-text-base)/1.5 var(--nb-sans);
  }
  html #mobile-nav-drawer .nb-more-closed {
    margin: 4px 0 8px;
  }

  /* Where you are: the course's own rungs, one tap each. */
  html #mobile-nav-drawer .nb-more-where {
    display: block;
    margin: 0 0 8px;
  }
  html #mobile-nav-drawer .nb-more-where > .nb-more-kick {
    margin-top: 0;
  }
  html #mobile-nav-drawer .nb-more-where-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 0 -11px;
  }
  html #mobile-nav-drawer .nb-more-where-row > a {
    display: inline-flex;
  }
  html #mobile-nav-drawer .nb-more-where-row > a,
  html #mobile-nav-drawer .nb-more-where-row > a:hover,
  html #mobile-nav-drawer .nb-more-where-row > a:active,
  html #mobile-nav-drawer .nb-more-where-row > a:focus-visible {
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 11px;
    border: 0;
    border-radius: var(--nb-r-sm);
    background: none;
    color: var(--nb-blue);
    font: var(--nb-type-control);
    text-decoration: none;
  }
  html #mobile-nav-drawer .nb-more-sep {
    color: var(--nb-ink);
    font: var(--nb-type-control);
  }

  /* Rows: the drawer's own rows and More's new ones share one shape. */
  html #mobile-nav-drawer .mobile-nav-row,
  html #mobile-nav-drawer .nb-more-row {
    display: flex;
  }
  html #mobile-nav-drawer .mobile-nav-row,
  html #mobile-nav-drawer .mobile-nav-row:hover,
  html #mobile-nav-drawer .mobile-nav-row:active,
  html #mobile-nav-drawer .mobile-nav-row:focus-visible,
  html #mobile-nav-drawer .nb-more-row,
  html #mobile-nav-drawer .nb-more-row:hover,
  html #mobile-nav-drawer .nb-more-row:active,
  html #mobile-nav-drawer .nb-more-row:focus-visible {
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 0 4px;
    border: 0;
    border-bottom: 1px solid var(--nb-border);
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--nb-ink);
    font: var(--nb-type-control);
    letter-spacing: normal;
    text-align: left;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
    transform: none;
    transition: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  html #mobile-nav-drawer .mobile-nav-row:focus-visible,
  html #mobile-nav-drawer .nb-more-row:focus-visible {
    outline: 2px solid var(--nb-blue);
    outline-offset: -2px;
  }
  html #mobile-nav-drawer .nb-more-row[hidden] {
    display: none;
  }
  /* The first row after a kicker or a heading closes the list above it. */
  html #mobile-nav-drawer .nb-more-kick + .mobile-nav-row,
  html #mobile-nav-drawer .nb-more-kick + .nb-more-row,
  html #mobile-nav-drawer .nb-more-dh + .nb-more-row,
  html #mobile-nav-drawer .nb-more-dash,
  html #mobile-nav-drawer .nb-more-row--subjects {
    border-top: 1px solid var(--nb-border);
  }
  html #mobile-nav-drawer .nb-more-dash:not([data-ui-current="page"]) + .nb-more-row--subjects {
    border-top-color: transparent;
  }
  html #mobile-nav-drawer .nb-more-row--other {
    margin-top: 16px;
    border-top: 1px solid var(--nb-border);
  }
  html #mobile-nav-drawer .nb-more-grow {
    flex: 1 1 auto;
    min-width: 0;
  }
  html #mobile-nav-drawer .nb-more-chev {
    display: block;
    flex: none;
    width: 18px;
    height: 18px;
    margin-left: auto;
    color: currentColor;
  }
  html #mobile-nav-drawer .nb-more-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* Where you are, in a list: the one lit blue, filled. */
  html #mobile-nav-drawer .mobile-nav-row.is-active,
  html #mobile-nav-drawer .mobile-nav-row.is-active:hover,
  html #mobile-nav-drawer .mobile-nav-row.is-active:active,
  html #mobile-nav-drawer .mobile-nav-row.is-active:focus-visible,
  html #mobile-nav-drawer .nb-more-row.is-active,
  html #mobile-nav-drawer .nb-more-row.is-active:hover,
  html #mobile-nav-drawer .nb-more-row.is-active:active,
  html #mobile-nav-drawer .nb-more-row.is-active:focus-visible {
    padding: 0 12px;
    border-color: transparent;
    border-radius: var(--nb-r-md);
    background: var(--nb-blue);
    color: var(--nb-on-blue);
    font-weight: 700;
  }
  html #mobile-nav-drawer .nb-more-row.is-active:focus-visible,
  html #mobile-nav-drawer .mobile-nav-row.is-active:focus-visible {
    outline-offset: 2px;
  }
  /* Coming soon: not a control, in full ink. */
  html #mobile-nav-drawer .nb-more-row--soon,
  html #mobile-nav-drawer .nb-more-row--soon:hover {
    cursor: default;
  }
  html #mobile-nav-drawer .nb-more-soon {
    flex: none;
    margin-left: auto;
    color: var(--nb-ink);
    font: 600 var(--nb-text-sm)/1.2 var(--nb-sans);
  }

  /* Back, in a drill. */
  html #mobile-nav-drawer .nb-more-back {
    display: inline-flex;
  }
  html #mobile-nav-drawer .nb-more-back,
  html #mobile-nav-drawer .nb-more-back:hover,
  html #mobile-nav-drawer .nb-more-back:active,
  html #mobile-nav-drawer .nb-more-back:focus-visible {
    align-self: flex-start;
    align-items: center;
    gap: 4px;
    width: auto;
    min-height: 44px;
    margin: 0 0 0 -8px;
    padding: 0 10px 0 4px;
    border: 0;
    border-radius: var(--nb-r-sm);
    background: none;
    box-shadow: none;
    color: var(--nb-blue);
    font: var(--nb-type-control);
    transform: none;
  }
  html #mobile-nav-drawer .nb-more-back:focus-visible {
    outline: 2px solid var(--nb-blue);
    outline-offset: -2px;
  }

  /* Your account: the identity row, its plan, billing, Sign Out. */
  html #mobile-nav-drawer .mobile-nav-row--identity,
  html #mobile-nav-drawer .mobile-nav-row--identity:hover,
  html #mobile-nav-drawer .mobile-nav-row--identity:active,
  html #mobile-nav-drawer .mobile-nav-row--identity:focus-visible {
    gap: 12px;
    min-height: 64px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  html #mobile-nav-drawer .mobile-nav-identity {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
  }
  html #mobile-nav-drawer .mobile-nav-identity-name {
    overflow: hidden;
    color: var(--nb-ink);
    font: var(--nb-type-control);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html #mobile-nav-drawer .mobile-nav-identity-email,
  html #mobile-nav-drawer .nb-more-plan {
    display: block;
    overflow: hidden;
    color: var(--nb-ink);
    font: 500 var(--nb-text-sm)/1.3 var(--nb-sans);
    opacity: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  html #mobile-nav-drawer .nb-more-plan {
    font-weight: 600;
  }
  html #mobile-nav-drawer .mobile-nav-logout-form {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  html #mobile-nav-drawer .mobile-nav-row--signout > span {
    flex: 1 1 auto;
  }
  html #mobile-nav-drawer .mobile-nav-signout-icon {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--nb-ink);
    opacity: 1;
  }
  /* After a free account's Upgrade button, Sign Out opens a new list. */
  html #mobile-nav-drawer .nb-more-upgrade + .mobile-nav-logout-form > .mobile-nav-row--signout {
    border-top: 1px solid var(--nb-border);
  }

  /* The wide buttons: a guest's Get Premium and Log In, a free account's
     Upgrade to Premium, and Sign Up while registration is open. */
  html #mobile-nav-drawer .mobile-nav-row--premium,
  html #mobile-nav-drawer .mobile-nav-row--premium:hover,
  html #mobile-nav-drawer .mobile-nav-row--premium:active,
  html #mobile-nav-drawer .mobile-nav-row--premium:focus-visible,
  html #mobile-nav-drawer button.mobile-nav-row--account,
  html #mobile-nav-drawer button.mobile-nav-row--account:hover,
  html #mobile-nav-drawer button.mobile-nav-row--account:active,
  html #mobile-nav-drawer button.mobile-nav-row--account:focus-visible,
  html #mobile-nav-drawer .nb-more-upgrade,
  html #mobile-nav-drawer .nb-more-upgrade:hover,
  html #mobile-nav-drawer .nb-more-upgrade:active,
  html #mobile-nav-drawer .nb-more-upgrade:focus-visible {
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    margin: 8px 0 0;
    padding: 0 16px;
    border: 1px solid var(--nb-blue);
    border-radius: var(--nb-r-sm);
    background: none;
    box-shadow: none;
    color: var(--nb-blue);
    font: var(--nb-type-control);
    text-align: center;
    text-decoration: none;
    transform: none;
  }
  html #mobile-nav-drawer .mobile-nav-row--premium,
  html #mobile-nav-drawer .mobile-nav-row--premium:hover,
  html #mobile-nav-drawer .mobile-nav-row--premium:active,
  html #mobile-nav-drawer .mobile-nav-row--premium:focus-visible {
    margin-top: 0;
    background: var(--nb-blue);
    color: var(--nb-on-blue);
  }
  html #mobile-nav-drawer .nb-more-upgrade,
  html #mobile-nav-drawer .nb-more-upgrade:hover,
  html #mobile-nav-drawer .nb-more-upgrade:active,
  html #mobile-nav-drawer .nb-more-upgrade:focus-visible {
    margin: 12px 0 4px;
  }
  html #mobile-nav-drawer .mobile-nav-row--premium:focus-visible,
  html #mobile-nav-drawer button.mobile-nav-row--account:focus-visible,
  html #mobile-nav-drawer .nb-more-upgrade:focus-visible {
    outline: 2px solid var(--nb-blue);
    outline-offset: 2px;
  }
  html #mobile-nav-drawer .mobile-nav-row--premium,
  html #mobile-nav-drawer button.mobile-nav-row--account,
  html #mobile-nav-drawer .nb-more-upgrade {
    display: flex;
  }
  html #mobile-nav-drawer .nb-more-row--signup,
  html #mobile-nav-drawer .nb-more-row--signup:hover,
  html #mobile-nav-drawer .nb-more-row--signup:active,
  html #mobile-nav-drawer .nb-more-row--signup:focus-visible {
    justify-content: center;
    min-height: 44px;
    margin: 4px 0 8px;
    border-bottom: 0;
    color: var(--nb-blue);
  }
}
@media (max-width: 860px) and (hover: hover) {
  html #mobile-nav-drawer .mobile-nav-row:not(.is-active):not(.mobile-nav-row--premium):hover,
  html #mobile-nav-drawer a.nb-more-row:not(.is-active):hover,
  html #mobile-nav-drawer button.nb-more-row:hover,
  html #mobile-nav-drawer .nb-more-back:hover,
  html #mobile-nav-drawer .nb-more-where-row > a:hover,
  html #mobile-nav-drawer .nb-more-upgrade:hover {
    background: var(--nb-blue-wash);
  }
  html #mobile-nav-drawer .mobile-nav-row--premium:hover {
    background: var(--nb-blue-strong);
    border-color: var(--nb-blue-strong);
  }
}
/* Rows the desk keeps and More does not show: the flip theme row (More has
   the radiogroup), a free account's top Upgrade (More has it under Your
   account) and, on /dashboard/, the Dashboard row (hidden, never omitted). */
@media (max-width: 860px) {
  html #mobile-nav-drawer .mobile-nav-row.mobile-nav-row--theme,
  html #mobile-nav-drawer .mobile-nav-row.nb-more-desk-only,
  html #mobile-nav-drawer .mobile-nav-row.nb-more-dash[data-ui-current="page"] {
    display: none;
  }
}
/* A touch shows its press, never a sticky hover. */
@media (max-width: 860px) and (hover: none) {
  html body #mobile-nav-drawer .mobile-nav-row:not(.is-active):not(.mobile-nav-row--premium):active,
  html body #mobile-nav-drawer a.nb-more-row:not(.is-active):active,
  html body #mobile-nav-drawer button.nb-more-row:active,
  html body #mobile-nav-drawer .nb-more-upgrade:active {
    background: var(--nb-blue-wash);
  }
}
/* 768 to 860: the sheet is capped at 640px and centred. */
@media (min-width: 768px) and (max-width: 860px) {
  html #mobile-nav-drawer .mobile-nav-drawer__panel {
    right: max(0px, calc(50% - 320px));
    left: max(0px, calc(50% - 320px));
  }
}
/* Short landscape: More comes in from the right, where Menu and the account
   button are (both at the top bar's right edge); on a page with a rail,
   from the rail's side. No detents. */
@media (max-width: 860px) and (orientation: landscape) and (max-height: 500px) {
  html #mobile-nav-drawer .mobile-nav-drawer__panel {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: min(360px, calc(100vw - 48px));
    height: auto;
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) 0 0;
    border-top: 0;
    border-left: 1px solid var(--nb-border);
    border-radius: var(--nb-r-lg) 0 0 var(--nb-r-lg);
    transform: translate3d(120%, 0, 0);
  }
  html #mobile-nav-drawer .nb-sheet-grab {
    display: none;
  }
  html:has(> body > #nb-tbar) #mobile-nav-drawer .mobile-nav-drawer__panel {
    right: auto;
    left: var(--nb-tb-rail, 0px);
    padding-right: 0;
    border-left: 0;
    border-right: 1px solid var(--nb-border);
    border-radius: 0 var(--nb-r-lg) var(--nb-r-lg) 0;
    transform: translate3d(-120%, 0, 0);
  }
}
@keyframes nb-more-in {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes nb-more-back {
  from { opacity: 0; transform: translateX(-24px); }
  to { opacity: 1; transform: none; }
}

/* ---- 6. The chapter sheet ----------------------------------------------
   #nv-rail-drawer (nb_chapter_sheet.html) on a page WITH the bar: the phone
   drawer re-presented as a bottom sheet on the bar (a side sheet from the
   rail in short landscape), at its medium detent 30% down the screen (large
   under 700px tall; nb-sheets.js), capped at 640px and centred from 768px.
   A grabber; a head of the course's own rungs, one tap each, and Close;
   the resource pills, the page you are on the one blue fill; Find; then the
   chapters as one list, one chapter open at a time with its head held at
   the top while its topics scroll, the topic being read filled blue. Every
   word is the ink; the scrim is the page's paper at 32%, under the bar. A
   page without the bar keeps today's left drawer (notebook-page.css section
   9), and its new parts are not drawn (section 0 above). */
@media (max-width: 860px) {
  html:has(> body > #nb-tbar) #nv-rail-backdrop.nb-rail-backdrop {
    z-index: 1150;
    background: color-mix(in srgb, var(--nb-paper) 32%, transparent);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    touch-action: none;
    transition: opacity var(--nb-dur-2) linear;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer.nb-rail-drawer {
    top: auto;
    right: 0;
    bottom: var(--nb-tb-h, 0px);
    left: 0;
    z-index: 1210;
    box-sizing: border-box;
    width: auto;
    min-width: 0;
    max-width: none;
    height: calc(100vh - var(--nb-tb-h, 0px) - var(--nb-chrome-h, 64px) - 4px - env(safe-area-inset-top, 0px));
    height: calc(100dvh - var(--nb-tb-h, 0px) - var(--nb-chrome-h, 64px) - 4px - env(safe-area-inset-top, 0px));
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--nb-paper-raised);
    border: 0;
    border-top: 1px solid var(--nb-border);
    border-radius: var(--nb-r-lg) var(--nb-r-lg) 0 0;
    box-shadow: var(--nb-shadow-3);
    color: var(--nb-ink);
    overscroll-behavior: contain;
    visibility: hidden;
    transform: translate3d(0, 110%, 0);
    transition: transform var(--nb-dur-2) var(--nb-ease), visibility 0s linear var(--nb-dur-2);
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer.nb-rail-drawer.is-open {
    visibility: visible;
    transform: translate3d(0, 0, 0);
    transition: transform var(--nb-dur-2) var(--nb-ease), visibility 0s;
  }
  /* The keyboard (review TB2-PH-01): while it is up the bar steps away and
     the sheet stands on the keyboard's top, as the tutor's does and as the
     demo's every sheet does, so Find's hits scroll into the room above it
     instead of under the keys. nb-sheets.js writes --nb-kb and --nb-vvh on
     the open sheet only (never :root); focusing Find has already lifted the
     sheet to its large detent, so no detent offset rides on top. */
  html.nb-kbd-open:has(> body > #nb-tbar) #nv-rail-drawer.nb-rail-drawer.is-open {
    bottom: var(--nb-kb, 0px);
    height: calc(var(--nb-vvh, 100dvh) - var(--nb-chrome-h, 64px) - 4px - env(safe-area-inset-top, 0px));
  }
  /* While the keyboard is up the grabber, the head and the pills step aside
     (in every layout; the side sheet has no grabber), and while Find is at
     work the Premium line keeps its PREMIUM rule and folds its sentence, the
     locked rows keeping their padlocks (review S4-PH-01). At 320 x 568 a
     260px keyboard leaves the sheet 240px: under the grabber, the head, the
     pills and Find a note's list had 67px, the hub's 119px, and the Premium
     line filled it, so for a reader without Premium no hit showed until the
     list was scrolled. Esc, Back and the scrim still close the sheet, and
     the keyboard going down brings every part back. */
  html.nb-kbd-open:has(> body > #nb-tbar) #nv-rail-drawer .nb-sheet-grab,
  html.nb-kbd-open:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-drawer-head,
  html.nb-kbd-open:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-pills,
  html.nb-kbd-open:has(> body > #nb-tbar) #nv-rail-drawer.is-finding .nb-cs-premline-copy {
    display: none;
  }

  /* The grabber: a tap moves between the detents, a drag follows the finger. */
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-sheet-grab {
    display: grid;
    flex: none;
    place-items: center;
    height: 20px;
    cursor: grab;
    touch-action: none;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-sheet-grab::before {
    content: "";
    width: 36px;
    height: 5px;
    border-radius: var(--nb-r-pill);
    background: var(--nb-border-strong);
  }

  /* The head: the crumbs, then Close. The drawer's own eyebrow and title
     step aside; the crumbs name the same course and take you to each rung. */
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-drawer-head {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    min-height: 48px;
    margin: 0;
    padding: 0 4px 0 16px;
    border: 0;
    touch-action: none;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-drawer-head > .nb-rail-head {
    display: none;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-crumbs {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-width: 0;
    margin: 0 0 0 -11px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    white-space: nowrap;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-crumbs::-webkit-scrollbar {
    display: none;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-crumbs > a,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-crumbs > a:hover,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-crumbs > a:active,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-crumbs > a:focus-visible {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 11px;
    border: 0;
    border-radius: var(--nb-r-sm);
    background: none;
    color: var(--nb-ink);
    font: var(--nb-type-label);
    letter-spacing: normal;
    text-decoration: none;
    text-transform: none;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-crumbs > a:focus-visible {
    outline: 2px solid var(--nb-blue);
    outline-offset: -2px;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-sep {
    flex: none;
    color: var(--nb-ink);
    font: var(--nb-type-label);
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-drawer-close,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-drawer-close:hover,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-drawer-close:active,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-drawer-close:focus-visible {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    margin: 0 0 0 auto;
    padding: 0;
    border: 0;
    border-radius: var(--nb-r-pill);
    background: none;
    box-shadow: none;
    color: var(--nb-ink);
    transform: none;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-drawer-close > svg {
    width: 20px;
    height: 20px;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-drawer-close:focus-visible {
    outline: 2px solid var(--nb-blue);
    outline-offset: -2px;
  }

  /* The resource pills: this topic as notes, summaries, flashcards and the
     rest, one row that scrolls sideways; the one you are on is a filled span. */
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-pills {
    display: flex;
    flex: none;
    gap: 6px;
    margin: 0;
    padding: 0 16px 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-pills::-webkit-scrollbar {
    display: none;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-pill,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-pill:hover,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-pill:active,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-pill:focus-visible {
    display: inline-flex;
    flex: none;
    align-items: center;
    box-sizing: border-box;
    min-height: 44px;
    margin: 0;
    padding: 0 16px;
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-r-pill);
    background: var(--nb-paper-raised);
    box-shadow: none;
    color: var(--nb-ink);
    font: var(--nb-type-control);
    text-decoration: none;
    white-space: nowrap;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-pill.is-current {
    background: var(--nb-blue);
    border-color: var(--nb-blue);
    color: var(--nb-on-blue);
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-pill:focus-visible {
    outline: 2px solid var(--nb-blue);
    outline-offset: 2px;
  }

  /* Find: the field in the ink, its placeholder the ink too (never a grey). */
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-find {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    margin: 0 16px 8px;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-find-ic {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 18px;
    height: 18px;
    color: var(--nb-ink);
    pointer-events: none;
    transform: translateY(-50%);
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-find-in,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-find-in:hover,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-find-in:focus {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 12px 0 40px;
    border: 1px solid var(--nb-control-border);
    border-radius: var(--nb-r-md);
    background: var(--nb-paper);
    box-shadow: none;
    color: var(--nb-ink);
    font: 400 var(--nb-text-md)/1.2 var(--nb-sans);
    -webkit-appearance: none;
    appearance: none;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-find-in::placeholder {
    color: var(--nb-ink);
    opacity: 1;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-find-in:focus-visible {
    border-color: var(--nb-blue);
    outline: 2px solid var(--nb-blue);
    outline-offset: 1px;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-find-in::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
  }

  /* The list: the sheet's body scrolls, and at the medium detent its foot
     (the coordinator's --nb-sheet-pad) is below the screen, so it can
     still be scrolled into view. */
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-drawer-scroll {
    flex: 1 1 auto;
    min-height: 0;
    margin: 0;
    padding: 0 8px calc(16px + var(--nb-sheet-pad, 0px) + max(0px, env(safe-area-inset-bottom, 0px) - var(--nb-tb-h, 0px)));
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--nb-border);
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-empty:not(:empty) {
    display: block;
    margin: 16px 12px;
    color: var(--nb-ink);
    font: 400 var(--nb-text-base)/1.5 var(--nb-sans);
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer #nb-rail-drawer-nav-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* Study this topic and the foot card step aside: the pills carry the
     rungs, and the Premium line at the divider carries the way in. */
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-siblings,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-cta {
    display: none;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer [hidden] {
    display: none;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters {
    margin: 0;
    padding: 0;
    border: 0;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .sidebar-tree {
    gap: 0;
  }

  /* A chapter: one full-width row, its number, its name and a chevron. The
     open chapter's head stays at the top of the list while its topics
     scroll under it. */
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .cn-chapter-head,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .cn-chapter-head:hover,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .cn-chapter-head:active,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .cn-chapter-head:focus-visible {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    margin: 0;
    padding: 8px 8px 8px 8px;
    border: 0;
    border-bottom: 1px solid var(--nb-border);
    border-radius: 0;
    background: var(--nb-paper-raised);
    box-shadow: none;
    color: var(--nb-ink);
    text-align: left;
    transform: none;
    transition: none;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .cn-chapter-head.open {
    position: sticky;
    top: 0;
    z-index: 2;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .cn-chapter-head:focus-visible {
    outline: 2px solid var(--nb-blue);
    outline-offset: -2px;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .cn-chip--num,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .cn-chapter-num {
    flex: none;
    min-width: 24px;
    color: var(--nb-ink);
    text-align: left;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .cn-chapter-title {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--nb-ink);
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .cn-chevron {
    margin-left: auto;
    color: var(--nb-ink);
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .cn-chapter-head .cn-lock {
    margin-left: 0;
    color: var(--nb-ink);
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .cn-timeline,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .cn-timeline--nested {
    gap: 0;
    margin: 4px 0 8px;
    padding: 0;
    border: 0;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .cn-subgroup-head,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .cn-subgroup-head:hover {
    min-height: 44px;
    margin: 8px 0 4px;
    padding: 8px 12px;
    border: 0;
    border-radius: var(--nb-r-sm);
    background: var(--nb-paper-sunken);
    color: var(--nb-ink);
  }

  /* A topic: a 48px row, its number and its name; the topic being read is
     the one blue fill. */
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .sidebar-link,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .sidebar-link:hover,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .sidebar-link:active,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .sidebar-link:focus-visible {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    min-height: 48px;
    margin: 0;
    padding: 6px 12px;
    border: 0;
    border-radius: var(--nb-r-md);
    background: none;
    box-shadow: none;
    color: var(--nb-ink);
    font: 400 var(--nb-text-base)/1.35 var(--nb-sans);
    text-decoration: none;
    transition: none;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .cn-lesson-num {
    flex: none;
    min-width: 34px;
    color: var(--nb-ink);
    font: 600 var(--nb-text-sm)/1.3 var(--nb-sans);
    font-variant-numeric: tabular-nums;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .sidebar-link.is-active,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .sidebar-link.is-active:hover,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .sidebar-link.is-active:active,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .sidebar-link.is-active:focus-visible {
    background: var(--nb-blue);
    color: var(--nb-on-blue);
    font-weight: 600;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .sidebar-link.is-active .cn-lesson-num,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .sidebar-link.is-active .cn-lock {
    color: var(--nb-on-blue);
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .sidebar-link:focus-visible {
    outline: 2px solid var(--nb-blue);
    outline-offset: -2px;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .sidebar-link.is-active:focus-visible {
    outline-offset: 2px;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .sidebar-link.is-paid .cn-lock {
    color: var(--nb-ink);
  }

  /* The PREMIUM line: the rule, then one sentence and the way in. Only
     while it is not [hidden]: Find hides it when no locked chapter is in the
     list, and this rule ties the [hidden] one above at (2,1,2) and comes
     later, so without the :not() a miss still said "The chapters below are
     part of Premium" over an empty list (review CR-04). */
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-premline:not([hidden]) {
    display: block;
    margin: 16px 8px 4px;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    color: var(--nb-ink);
    font: 600 var(--nb-text-xs)/1.2 var(--nb-sans);
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--nb-border);
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-premline-copy {
    margin: 8px 0 4px;
    color: var(--nb-ink);
    font: 400 var(--nb-text-base)/1.5 var(--nb-sans);
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-premline-go,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-premline-go:hover,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-premline-go:active,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-premline-go:focus-visible {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--nb-blue);
    font: var(--nb-type-control);
    text-decoration: none;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-premline-go:focus-visible {
    outline: 2px solid var(--nb-blue);
    outline-offset: 2px;
  }

  /* Find at work: every chapter with a hit open, the rest out of the list. */
  html:has(> body > #nb-tbar) #nv-rail-drawer.is-finding .cn-children.collapsed {
    display: block;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer.is-finding .cn-chapter-head[data-ui-expanded="true"] .cn-chevron {
    transform: rotate(90deg);
  }
}
@media (max-width: 860px) and (hover: hover) {
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-chapters .sidebar-link:not(.is-active):hover,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-crumbs > a:hover,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-rail-drawer-close:hover,
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-pill:not(.is-current):hover {
    background: var(--nb-blue-wash);
  }
}
/* 768 to 860: capped at 640px and centred, as More is. */
@media (min-width: 768px) and (max-width: 860px) {
  html:has(> body > #nb-tbar) #nv-rail-drawer.nb-rail-drawer {
    right: max(0px, calc(50% - 320px));
    left: max(0px, calc(50% - 320px));
  }
}
/* Short landscape: a side sheet from the rail's side, no detents. */
@media (max-width: 860px) and (orientation: landscape) and (max-height: 500px) {
  html:has(> body > #nb-tbar) #nv-rail-drawer.nb-rail-drawer {
    top: 0;
    right: auto;
    bottom: 0;
    left: var(--nb-tb-rail, 0px);
    width: min(360px, calc(100vw - var(--nb-tb-rail, 0px) - 48px));
    height: auto;
    padding: env(safe-area-inset-top, 0px) 0 0;
    border-top: 0;
    border-right: 1px solid var(--nb-border);
    border-radius: 0 var(--nb-r-lg) var(--nb-r-lg) 0;
    transform: translate3d(-120%, 0, 0);
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer.nb-rail-drawer.is-open {
    transform: translate3d(0, 0, 0);
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-sheet-grab {
    display: none;
  }
  /* The keyboard in short landscape (review TB2-PH-01): the side sheet
     stands on the keyboard's top at the visual viewport's height, and the
     head and the pills step aside while it is up (the rule for every layout
     above, since Stage 4). At 750 x 342 a 190px keyboard leaves 152px,
     exactly the head, the pills and Find: the list needs that room. Esc,
     Back and the scrim still close the sheet. */
  html.nb-kbd-open:has(> body > #nb-tbar) #nv-rail-drawer.nb-rail-drawer.is-open {
    top: auto;
    bottom: var(--nb-kb, 0px);
    height: var(--nb-vvh, 100dvh);
  }
}

/* ---- 6b. The chapter sheet on a page without notebook-page.css (the hub) --
   Stage 4. The subject hub is a base.html page: it loads no notebook-page.css,
   which on a note gives the drawer its box and the tree its bones, and it
   does load chapter-navigator.css, noteviewer.css and noteviewer-left-rail.css,
   whose bare .cn-* and .sidebar-* rules (candy chips, a timeline thread and
   its dots, 12px rows) would reach the tree. So, for the hub's sheet only
   (data-nb-cs-solo), this block gives what notebook-page.css gives a note's
   drawer, with its values, and answers the legacy rules property by
   property. At (1,1,0) and up it beats every legacy class rule, and it
   stays under the phone rules above at (2,1,2) and up, which draw the
   sheet on the bar exactly as they draw a note's. */
@media (max-width: 860px) {
  html:has(> body > #nb-tbar) #nv-rail-backdrop[data-nb-cs-solo] {
    position: fixed;
    inset: 0;
    display: block;
    opacity: 0;
    pointer-events: none;
  }
  html:has(> body > #nb-tbar) #nv-rail-backdrop[data-nb-cs-solo].is-open {
    opacity: 1;
    pointer-events: auto;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer[data-nb-cs-solo] {
    position: fixed;
    display: flex;
    flex-direction: column;
  }
  #nv-rail-drawer[data-nb-cs-solo] .nb-rail-drawer-close {
    cursor: pointer;
  }
  #nv-rail-drawer[data-nb-cs-solo] .nb-rail-drawer-scroll {
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  #nv-rail-drawer[data-nb-cs-solo] .nb-rail-chapters .sidebar-tree {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
  }
  #nv-rail-drawer[data-nb-cs-solo] .cn-children.collapsed {
    display: none;
  }
  #nv-rail-drawer[data-nb-cs-solo] .nb-rail-chapters .sidebar-toggle {
    display: flex;
    align-items: center;
    gap: var(--nb-s2);
    width: 100%;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    cursor: pointer;
  }
  /* The candy chip stays retired; the number chip is quiet tabular ink. */
  #nv-rail-drawer[data-nb-cs-solo] .nb-rail-chapters .cn-chip {
    display: none;
  }
  #nv-rail-drawer[data-nb-cs-solo] .nb-rail-chapters .cn-chip--num {
    display: inline-block;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    font: var(--nb-type-label);
    font-variant-numeric: tabular-nums;
    letter-spacing: normal;
  }
  #nv-rail-drawer[data-nb-cs-solo] .nb-rail-chapters .cn-chapter-num {
    margin: 0;
    font: var(--nb-type-label);
    font-variant-numeric: tabular-nums;
    letter-spacing: normal;
    white-space: normal;
  }
  /* A chapter's name wraps as a note's does: chapter-navigator.css balances
     it and breaks long words. */
  #nv-rail-drawer[data-nb-cs-solo] .nb-rail-chapters .cn-chapter-title {
    margin: 0;
    font: var(--nb-type-control);
    letter-spacing: normal;
    text-transform: none;
    text-wrap: wrap;
    overflow-wrap: normal;
  }
  #nv-rail-drawer[data-nb-cs-solo] .nb-rail-chapters .cn-chevron {
    display: inline-flex;
    flex-shrink: 0;
    width: auto;
    height: auto;
    margin: 0;
    transition: transform var(--nb-dur-1) var(--nb-ease);
  }
  #nv-rail-drawer[data-nb-cs-solo] .nb-rail-chapters .cn-chevron svg {
    width: 14px;
    height: 14px;
  }
  #nv-rail-drawer[data-nb-cs-solo] .nb-rail-chapters .sidebar-toggle.open .cn-chevron {
    transform: rotate(90deg);
  }
  #nv-rail-drawer[data-nb-cs-solo] .nb-rail-chapters .cn-chapter-head .cn-lock {
    display: inline-block;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
  }
  #nv-rail-drawer[data-nb-cs-solo] .nb-rail-chapters .cn-badge,
  #nv-rail-drawer[data-nb-cs-solo] .nb-rail-chapters .cn-badge-icon,
  #nv-rail-drawer[data-nb-cs-solo] .nb-rail-chapters .cn-node {
    display: none;
  }
  #nv-rail-drawer[data-nb-cs-solo] .nb-rail-chapters .cn-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* The lessons: a column, with no legacy thread or dot beside it. */
  #nv-rail-drawer[data-nb-cs-solo] .nb-rail-chapters .cn-timeline {
    position: static;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }
  #nv-rail-drawer[data-nb-cs-solo] .nb-rail-chapters .cn-timeline::before {
    content: none;
  }
  #nv-rail-drawer[data-nb-cs-solo] .nb-rail-chapters .cn-lesson-row,
  #nv-rail-drawer[data-nb-cs-solo] .nb-rail-chapters .cn-subgroup {
    position: static;
    margin: 0;
    padding: 0;
  }
  #nv-rail-drawer[data-nb-cs-solo] .nb-rail-chapters .cn-subgroup-title {
    flex: 1 1 auto;
    min-width: auto;
    font: var(--nb-type-control);
    font-weight: 700;
    color: var(--nb-ink);
  }
  #nv-rail-drawer[data-nb-cs-solo] .nb-rail-chapters .cn-lesson-num {
    width: auto;
  }
  #nv-rail-drawer[data-nb-cs-solo] .nb-rail-chapters .cn-lesson-title {
    flex: 1 1 auto;
  }
  #nv-rail-drawer[data-nb-cs-solo] .nb-rail-chapters .sidebar-link.is-paid .cn-lock {
    display: inline-block;
    flex-shrink: 0;
    align-self: center;
    width: 12px;
    height: 12px;
    margin: 0 0 0 auto;
  }
  #nv-rail-drawer[data-nb-cs-solo] .nb-rail-chapters .sidebar-toggle:focus-visible {
    outline: 2px solid var(--nb-blue);
    outline-offset: 2px;
  }
}
/* Reduced motion on a base.html page: styles.css gives every element a
   0.01ms transition with !important (its duration only, so every property
   of every element transitions). The sheet's visibility 0s became a
   transition, and so did each row's inherited visibility, so on open the
   rows were still hidden when the script handed them focus, and focus
   stayed on the tab. Under reduced motion nothing in the sheet transitions:
   it opens, closes and turns its chevrons at once, as a note's sheet does. */
@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  html:has(> body > #nb-tbar) #nv-rail-drawer[data-nb-cs-solo],
  html:has(> body > #nb-tbar) #nv-rail-drawer[data-nb-cs-solo].is-open,
  html:has(> body > #nb-tbar) #nv-rail-drawer[data-nb-cs-solo] *,
  html:has(> body > #nb-tbar) #nv-rail-drawer[data-nb-cs-solo] *::before,
  html:has(> body > #nb-tbar) #nv-rail-drawer[data-nb-cs-solo] *::after {
    transition-property: none;
  }
}

/* ---- 7. The toast -------------------------------------------------------
   One node, #nb-toast (nb-sheets.js makes it: role=status, data-nb-live,
   textContent only), 2800ms, above the bar and clear of the orb. The
   desk's slip: --nb-m-toast with its ink. */
@media (max-width: 860px) {
  #nb-toast {
    position: fixed;
    z-index: 1300;
    left: 50%;
    /* On the bar (whose height holds the safe area), else on the foot. */
    bottom: max(calc(var(--nb-tb-h, 0px) + 12px), calc(12px + env(safe-area-inset-bottom, 0px)));
    display: block;
    box-sizing: border-box;
    width: max-content;
    max-width: min(420px, calc(100vw - 32px));
    margin: 0;
    padding: 12px 16px;
    background: var(--nb-m-toast);
    border: 1px solid var(--nb-m-toast-edge);
    border-radius: var(--nb-r-md);
    box-shadow: var(--nb-shadow-2);
    color: var(--nb-m-toast-ink);
    font: 500 var(--nb-text-base)/1.4 var(--nb-sans);
    text-align: left;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 8px);
    transition: opacity var(--nb-dur-2) linear, transform var(--nb-dur-2) var(--nb-ease);
  }
  #nb-toast.is-in {
    opacity: 1;
    transform: translate(-50%, 0);
  }
  html:has(#nb-tbar .nb-tutor-orb) #nb-toast {
    bottom: calc(var(--nb-tb-h, 0px) + 30px);
  }
}
@media (max-width: 860px) and (orientation: landscape) and (max-height: 500px) {
  #nb-toast,
  html:has(#nb-tbar .nb-tutor-orb) #nb-toast {
    left: calc(50% + var(--nb-tb-rail, 0px) / 2);
    bottom: 16px;
    max-width: min(420px, calc(100vw - var(--nb-tb-rail, 0px) - 32px));
  }
}

/* ---- 8. Reservations -------------------------------------------------------
   A bar page keeps its foot and its focus clear of the bar; the rail's page
   keeps its left edge clear of the rail. The reservation never moves with
   the keyboard. Screen only: a print does not draw the bar (section 10),
   so it keeps no room for it (review G3-1). */
@media screen and (max-width: 860px) {
  html:has(> body > #nb-tbar) {
    scroll-padding-bottom: calc(var(--nb-tb-h, 0px) + 8px);
  }
  html:has(> body > #nb-tbar) > body {
    padding-bottom: var(--nb-tb-h, 0px);
  }
  html:has(> body > #nb-tbar .nb-tutor-orb) {
    scroll-padding-bottom: calc(var(--nb-tb-h, 0px) + 32px);
  }
  /* The page behind an open sheet does not scroll (iOS also needs the
     scrim's touchmove refused, which nb-sheets.js does). */
  html.nb-sheet-open > body {
    overflow: hidden;
    overscroll-behavior: none;
  }
}
@media screen and (max-width: 860px) and (orientation: landscape) and (max-height: 500px) {
  html:has(> body > #nb-tbar),
  html:has(> body > #nb-tbar .nb-tutor-orb) {
    scroll-padding-bottom: 8px;
  }
  html:has(> body > #nb-tbar) > body {
    padding-bottom: 0;
    padding-left: var(--nb-tb-rail, 0px);
  }
}

/* ---- 9. What the bar replaces, keyed on the bar and its set -----------------
   Hidden, not deleted (deletion is Stage 6, after the owner's phone
   sign-off), so a rollback is one include. A page without a bar keeps every
   control it has today.
   PRINT (review G3-1). An A4 print from a desktop window is about 718px
   wide, so a plain max-width query matches it, and the bar (never printed,
   section 10) took the page's own controls with it. What the practice
   pages' bars replace is screen only, so a practice page prints as it did
   before its bar. Notes and summaries keep their Stage 2 block in every
   medium, so they print as Stage 2 printed them (screen only, their print
   ran to twelve pages with the first one blank). */
@media screen and (max-width: 860px) {
  /* Every bar: More is its last tab, and Chapters its first. */
  html:has(> body > #nb-tbar) .topbar #mobile-drawer-toggle.mobile-drawer-toggle,
  html:has(> body > #nb-tbar) #nv-rail-trigger {
    display: none;
  }
  /* Topic questions: Previous, "n of N", Next and the Grid sheet. */
  html:has(> body > #nb-tbar[data-nb-tbar-set="questions"]) .qg-pager,
  html:has(> body > #nb-tbar[data-nb-tbar-set="questions"]) .qg-jump-sheet {
    display: none;
  }
  /* Flashcards: the card tabs proxy the hidden buttons, kept in the DOM. */
  html:has(> body > #nb-tbar[data-nb-tbar-set="flashcards"]) .nb-fc-controls {
    display: none;
  }
}
@media (max-width: 860px) {
  /* Notes and summaries: Chapters and More (the rule above, in every
     medium here), the bar's own progress line and Exit focus. */
  html:has(> body > #nb-tbar[data-nb-tbar-set="notes"]) .topbar #mobile-drawer-toggle.mobile-drawer-toggle,
  html:has(> body > #nb-tbar[data-nb-tbar-set="notes"]) #nv-rail-trigger,
  html:has(> body > #nb-tbar[data-nb-tbar-set="notes"]) .nt-top-progress,
  html:has(> body > #nb-tbar[data-nb-tbar-set="notes"]) #note-focus-exit,
  html:has(> body > #nb-tbar[data-nb-tbar-set="notes"]) #nb-tutor-tab {
    display: none;
  }
  /* The dashboard: the shared bar replaces the desk's own bottom bar and
     its tabs row. */
  html:has(> body > #nb-tbar[data-nb-tbar-set="dashboard"]) .nb-dm-bbar,
  html:has(> body > #nb-tbar[data-nb-tbar-set="dashboard"]) .nb-dm-tabsrow {
    display: none;
  }
}

/* The study breadcrumb on a phone (owner question 11): one line of the
   parents only, which scrolls sideways if it must. The title names the
   topic and the chapter sheet names the chapter, so Home, the chapter and
   the topic step out of the line; each rung left is a 44px target. */
@media (max-width: 767px) {
  html:has(> body > #nb-tbar) .nb-notes-header .nb-breadcrumb {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  html:has(> body > #nb-tbar) .nb-notes-header .nb-breadcrumb::-webkit-scrollbar {
    display: none;
  }
  html:has(> body > #nb-tbar) .nb-notes-header .nb-breadcrumb ol {
    flex-wrap: nowrap;
    width: max-content;
    /* centred when it fits, from the start edge when it scrolls (owner 2026-09-30) */
    margin-inline: auto;
  }
  html:has(> body > #nb-tbar) .nb-notes-header .nb-breadcrumb li {
    white-space: nowrap;
  }
  html:has(> body > #nb-tbar) .nb-notes-header .nb-breadcrumb li:first-child,
  html:has(> body > #nb-tbar) .nb-notes-header .nb-breadcrumb li:not(:has(> a)) {
    display: none;
  }
  /* The separator moves in front of each rung after the first one shown
     (a :has() cannot sit inside another, so the last rung shown cannot be
     found to take its trailing dot off). */
  html:has(> body > #nb-tbar) .nb-notes-header .nb-breadcrumb li::after {
    content: none;
  }
  html:has(> body > #nb-tbar) .nb-notes-header .nb-breadcrumb li:not(:first-child):has(> a) + li:has(> a)::before {
    content: "\00B7";
    margin-inline-end: 4px;
    color: var(--nb-ink);
  }
  html:has(> body > #nb-tbar) .nb-notes-header .nb-breadcrumb a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* ---- 10. Forced colours and print ------------------------------------------ */
@media (forced-colors: active) {
  #nb-tbar .nb-tbar-tab.is-lit,
  #nb-tbar .nb-tbar-tab[data-ui-current="page"],
  #nb-tbar .nb-tbar-tab[data-ui-expanded="true"] {
    color: Highlight;
  }
  #mobile-nav-drawer .nb-more-theme-opt:has(> .nb-more-theme-in:checked) {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
  html:has(> body > #nb-tbar) #nv-rail-drawer .nb-cs-pill.is-current,
  html:has(> body > #nb-tbar) #nv-rail-drawer .sidebar-link.is-active {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
}
/* (1,1,0) for the bar: section 2's #nb-tbar.nb-tbar display: block under
   860px also matches an A4 print from a desktop window (about 718px wide),
   and at (1,0,0) this rule lost to it and the bar printed over the foot of
   every page (review G3-1). Equal weight, later in the sheet, wins. */
@media print {
  #nb-tbar.nb-tbar,
  #nb-toast {
    display: none;
  }
}

/* ---- 11. Isolation resets ---------------------------------------------------
   Lists and paragraphs inside the bar and the sheets take nothing from the
   styles.css element globals (li's margin and --text, ul's indent, p's
   --text). */
@media (max-width: 860px) {
  #nb-tbar ul,
  #nb-tbar li,
  #mobile-nav-drawer .mobile-nav-drawer__content ul,
  #mobile-nav-drawer .mobile-nav-drawer__content li,
  #nb-qgrid ul,
  #nb-qgrid li {
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--nb-ink);
  }
  #nb-tbar p,
  #nb-qgrid p {
    margin: 0;
    color: var(--nb-ink);
  }
}