/* Batch BO (bo1; BO-2.0-DESIGN 2.1 to 2.6 and 5.1; BO-D4, BO-D6 to BO-D9, BO-D12, BO-D20, BO-D40, BO-D41): the back-office shell. Wholly inside @layer app, every colour and size from /tokens/tokens.css (the size tokens of batch BO: --size-topbar 48, --size-meter 3, --size-sidebar 240, --size-rail 64), no raw px font size and no status selector (tools/build_tokens.py --lint): the status pills name the locked classes in markup and take their colours from the locked layer. The focus ring of base.css (3 px --focus, offset 2 px) is left as it is and repeated here for the bo-* controls it does not name. The state is drawn from four attributes the wiring writes on (navmachine.js navAttrs root): data-bo-width (wide, medium, compact), data-bo-nav (docked, hidden, peeking, visible), data-bo-rail (yes, no) and data-bo-look (expanded, rail, drawer, off). --bo-pane-left is the content pane's left edge (240 px with the expanded wide sidebar, the 64 px lane with the rail and on medium, 0 on compact); --bo-sticky-top is written by the scroll loop through CSSOM (51 px until it runs). */ @layer app { :root { --bo-pane-left: var(--size-sidebar); --bo-sticky-top: calc(var(--size-topbar) + var(--size-meter)); --bo-drawer-w: min(320px, 85vw); } :root[data-bo-width="wide"][data-bo-rail="yes"], :root[data-bo-width="medium"] { --bo-pane-left: var(--size-rail); } :root[data-bo-width="compact"] { --bo-pane-left: 0px; } /* The Management floor tier (BO-D20, plan P25): 36 px, 44 px under a coarse pointer, no tap delay. */ .bo-link, .bo-icon, .bo-btn { min-height: var(--touch-pointer); touch-action: manipulation; } .bo-icon { min-width: var(--touch-pointer); } @media (pointer: coarse) { .bo-link, .bo-icon, .bo-btn { min-height: var(--touch-pointerTouch); } .bo-icon { min-width: var(--touch-pointerTouch); } .bo-toc-box { max-height: calc(var(--touch-pointerTouch) * 8); } } .bo-btn, .bo-icon { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-3); border-radius: var(--radius-m); border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: var(--font-size-200); cursor: pointer; } .bo-icon { padding: 0; } .bo-link { display: flex; align-items: center; gap: var(--space-2); color: var(--text); text-decoration: none; font-size: var(--font-size-200); } .bo-link:focus-visible, .bo-btn:focus-visible, .bo-icon:focus-visible, .bo-dot:focus-visible, .bo-title:focus-visible, .skip:focus-visible, .bo-option:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .navicon { flex: none; width: 20px; height: 20px; } /* The skip link (BO-D44): off screen until it takes the focus. */ .skip { position: absolute; left: var(--space-2); top: var(--space-2); z-index: 70; padding: var(--space-2) var(--space-3); border-radius: var(--radius-m); background: var(--surface); color: var(--text); font-weight: 700; transform: translateY(-300%); } .skip:focus { transform: none; } /* The top bar (design 2.4): 48 px, sticky, never hides. */ #bo-top { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--space-3); min-height: var(--size-topbar); height: var(--size-topbar); padding: 0 var(--space-3) 0 var(--space-4); background: var(--surface); border-bottom: 1px solid var(--border); } .bo-top-lead { display: flex; align-items: center; gap: var(--space-3); flex: 1; min-width: 0; } .bo-top-search, .bo-top-chips { display: flex; align-items: center; gap: var(--space-2); flex: none; } .bo-venue { flex: none; font-size: var(--font-size-300); font-weight: 700; white-space: nowrap; } :root[data-bo-look="expanded"][data-bo-width="wide"] .bo-top-lead .bo-venue { width: calc(var(--size-sidebar) - var(--space-4) - var(--space-3)); } .bo-title { margin: 0; min-width: 0; font-size: var(--font-size-400); line-height: var(--font-lineHeight-tight); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* The compact title disclosure (design 2.4): the h1 may be narrower than the button's content, and the h1 clipped the chevron at 390 px (BO-BROWSER-PASS section 4 item 15). The button shrinks with the h1, the label is the part that ellipsises, and the chevron keeps its own 20 px (.navicon above is flex: none). */ .bo-title-btn { border: 0; background: transparent; padding: 0 var(--space-1); font-size: var(--font-size-400); font-weight: 700; display: flex; min-width: 0; max-width: 100%; } .bo-title-btn > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .bo-menu-btn { position: relative; } .bo-count { position: absolute; top: 0; right: 0; min-width: 16px; padding: 0 var(--space-1); border-radius: var(--pill-radius); background: var(--accent); color: var(--accent-ink); font-size: var(--font-size-100); font-weight: 700; line-height: var(--font-lineHeight-tight); } .bo-chip-info { white-space: nowrap; } .bo-account-btn { background: var(--panel); font-weight: 600; } :root[data-bo-width="compact"] .bo-top-chips .chip-sync { padding: 0 var(--space-2); } /* The search (design 6): a 400 px field on wide; an icon button that opens a row in #bo-status elsewhere. */ .bo-search { position: relative; display: flex; align-items: center; gap: var(--space-2); width: 400px; max-width: 32vw; min-height: var(--touch-pointer); padding: 0 var(--space-2); border-radius: var(--radius-m); border: 1px solid var(--border); background: var(--bg); } .bo-search-glyph { width: 16px; height: 16px; color: var(--text-muted); } .bo-search .bo-search-input, .bo-search-row .bo-search-input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: var(--font-size-200); } .bo-kbd { flex: none; padding: 0 var(--space-1); border-radius: var(--radius-s); border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); font-family: inherit; font-size: var(--font-size-100); font-weight: 600; } .bo-search-row { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch-service); padding: 0 var(--space-4); background: var(--surface); border-bottom: 1px solid var(--border); } .bo-results-slot { position: fixed; z-index: 55; top: calc(var(--size-topbar) + var(--size-meter)); right: var(--space-4); width: min(440px, calc(100vw - 32px)); } :root[data-bo-width="medium"] .bo-results-slot, :root[data-bo-width="compact"] .bo-results-slot { top: var(--bo-sticky-top); left: 0; right: 0; width: auto; } .bo-results { max-height: 60vh; overflow-y: auto; padding: var(--space-1); border-radius: var(--radius-m); border: 1px solid var(--border); background: var(--surface); } .bo-results-status:empty { margin: 0; } .bo-results-group { margin: 0; padding: 0; list-style: none; } .bo-results-head { margin: var(--space-2) var(--space-2) var(--space-1); color: var(--text-muted); font-size: var(--font-size-100); font-weight: 700; } .bo-option { display: flex; flex-direction: column; justify-content: center; min-height: var(--touch-pointer); padding: 0 var(--space-2); border-left: 3px solid transparent; border-radius: var(--radius-s); cursor: pointer; } .bo-option[aria-selected="true"] { border-left-color: var(--accent); background: var(--panel); } .bo-option-name { font-weight: 600; font-size: var(--font-size-200); } .bo-option-context { color: var(--text-muted); font-size: var(--font-size-100); } .bo-results-status { margin: var(--space-1) var(--space-2); color: var(--text-muted); font-size: var(--font-size-100); } /* The meter band (design 2.5, BO-D40): 3 px of --bg under the top bar from the content pane's left edge; the fill is --accent drawn by transform, over the top bar's 1 px --border line (the track). */ #bo-meter { position: fixed; top: var(--size-topbar); left: var(--bo-pane-left); right: 0; z-index: 40; height: var(--size-meter); background: var(--bg); transition: left var(--duration-insert) var(--easing-standard); } .bo-meter-fill { height: 100%; background: var(--accent); transform-origin: left center; transform: scaleX(0); } #bo-meter[data-fits="yes"] .bo-meter-fill { visibility: hidden; } /* The sidebar (design 2.2, 2.3): fixed under the top bar, its own scroll, --surface with a 1 px --border edge. */ #bo-nav { position: fixed; top: var(--size-topbar); bottom: 0; left: 0; z-index: 35; width: var(--size-sidebar); overflow-x: hidden; overflow-y: auto; background: var(--surface); border-right: 1px solid var(--border); transition: width var(--duration-insert) var(--easing-standard), transform var(--duration-insert) var(--easing-standard); } :root[data-bo-look="rail"] #bo-nav { width: var(--size-rail); } :root[data-bo-look="drawer"] #bo-nav, :root[data-bo-look="off"] #bo-nav { width: var(--bo-drawer-w); z-index: 50; } :root[data-bo-look="off"] #bo-nav { transform: translateX(-100%); } :root[data-bo-width="medium"][data-bo-nav="visible"] #bo-nav { z-index: 45; } :root[data-bo-look="drawer"] body { overflow: hidden; } .bo-nav-head { display: flex; align-items: center; gap: var(--space-2); min-height: var(--size-topbar); padding: 0 var(--space-2) 0 var(--space-4); } .bo-nav-title { flex: 1; min-width: 0; font-size: var(--font-size-300); font-weight: 700; } .bo-toggle .navicon { transition: transform var(--duration-insert) var(--easing-standard); } .bo-nav-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: var(--space-1) var(--space-2) var(--space-2); list-style: none; } .bo-group-link { position: relative; padding: 0 var(--space-2) 0 var(--space-3); border-left: 3px solid transparent; border-radius: var(--radius-m); font-weight: 600; transition: opacity var(--duration-insert) var(--easing-standard), transform var(--duration-insert) var(--easing-standard); } .bo-group-link[aria-current="page"] { border-left-color: var(--accent); background: var(--panel); font-weight: 700; } .bo-group-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bo-pills { display: flex; gap: var(--space-1); } .bo-pill { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-2); border-radius: var(--pill-radius); font-size: var(--font-size-100); font-weight: 700; line-height: var(--font-lineHeight-normal); } .bo-pill .glyph { width: 12px; height: 12px; } .bo-rail-count, .bo-rail-dot { display: none; position: absolute; top: 2px; right: 2px; } .bo-rail-count { min-width: 16px; padding: 0 var(--space-1); border-radius: var(--pill-radius); font-size: var(--font-size-100); font-weight: 700; line-height: var(--font-lineHeight-tight); text-align: center; } .bo-rail-dot { width: 8px; height: 8px; border-radius: 50%; } /* The rail (design 2.2): 44 px squares with the label visually hidden, the counts at the top right corner. */ :root[data-bo-look="rail"] .bo-nav-head { justify-content: center; padding: 0; } :root[data-bo-look="rail"] .bo-nav-list { align-items: center; padding: var(--space-1) 0 var(--space-2); } :root[data-bo-look="rail"] .bo-group { display: flex; flex-direction: column; align-items: center; } :root[data-bo-look="rail"] .bo-group-link { justify-content: center; width: var(--touch-pointerTouch); min-height: var(--touch-pointerTouch); padding: 0; border-left-width: 3px; } :root[data-bo-look="rail"] .bo-group-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } :root[data-bo-look="rail"] .bo-pills { display: none; } :root[data-bo-look="rail"] .bo-rail-count, :root[data-bo-look="rail"] .bo-rail-dot { display: block; } /* hidden: the icons leave the lane, the lane keeps its track and dots; the links stay in the Tab order (BO-D34) */ :root[data-bo-look="rail"][data-bo-nav="hidden"] .bo-group-link, :root[data-bo-look="rail"][data-bo-nav="hidden"] .bo-nav-head { opacity: 0; transform: translateX(-100%); } /* The table of contents (design 2.5, BO-D41): the list, at most 8 rows in its own box, beside its track. */ .bo-toc { position: relative; padding: 2px 0 var(--space-2) var(--space-5); } .bo-toc-title { display: flex; align-items: center; min-height: 24px; color: var(--text-muted); font-size: var(--font-size-100); font-weight: 700; } .bo-toc-box { max-height: calc(var(--touch-pointer) * 8); overflow-y: auto; } .bo-toc-inner { position: relative; padding-left: var(--space-3); } .bo-toc-track { position: absolute; left: 4px; top: 0; bottom: 0; width: 2px; background: var(--border); } .bo-toc-fill { position: absolute; left: -0.5px; top: 0; width: 3px; height: 100%; background: var(--accent); transform-origin: center top; transform: scaleY(var(--bo-toc-fill, 0)); } .bo-toc-list { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; } .bo-toc-entry { width: 100%; padding: 0 var(--space-2); border: 0; border-left: 3px solid transparent; background: transparent; font: inherit; font-size: var(--font-size-200); font-weight: 400; text-align: left; cursor: pointer; } .bo-toc-entry.is-current { border-left-color: var(--accent); font-weight: 700; } /* the rail's dots (design 2.5): 24 px targets (WCAG 2.5.8), shape-coded, the current one by size and a --text ring */ .bo-toc-rail { display: flex; flex-direction: column; align-items: center; padding: var(--space-1) 0; } .bo-toc-rail .bo-toc-track { left: calc(50% - 1px); } .bo-dots { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0; padding: 0; list-style: none; } .bo-dot { display: grid; place-items: center; min-width: 24px; min-height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; touch-action: manipulation; } .bo-dot::before { content: ""; display: block; width: 8px; height: 8px; border-radius: 50%; box-sizing: border-box; background: var(--surface); border: 2px solid var(--border); } .bo-dot.is-passed::before { background: var(--accent); border-color: var(--accent); } .bo-dot.is-current::before { width: 12px; height: 12px; background: var(--accent); border: 0; box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); } .bo-toc-rail[data-toc-mode="index"] .bo-toc-track { position: relative; left: auto; display: block; height: 288px; margin: var(--space-1) auto 0; } .bo-index-mark { position: absolute; left: calc(50% - 6px); width: 12px; height: 12px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); top: calc(var(--space-7) + var(--bo-toc-fill, 0) * 276px); } /* The medium visible sidebar lies over the content without a scrim; the compact drawer's strip is opaque (BO-D9). */ .bo-strip { position: fixed; top: var(--size-topbar); bottom: 0; left: var(--bo-drawer-w); right: 0; z-index: 45; background: var(--panel); } .bo-drawer-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); } .bo-drawer-line { flex-basis: 100%; margin: 0; color: var(--text-muted); font-size: var(--font-size-200); } /* The status slot (design 2.1, FABLE-r1 M6c): sticky under the top bar and the meter, over the content pane only. */ #bo-status { position: sticky; top: calc(var(--size-topbar) + var(--size-meter)); z-index: 30; margin-left: var(--bo-pane-left); background: var(--bg); transition: margin-left var(--duration-insert) var(--easing-standard); } /* The content pane: the sidebar's width or the lane on its left, the headings under the sticky layers (design 2.5). */ #bo-main { display: block; margin-left: var(--bo-pane-left); padding: var(--space-4) var(--space-5) var(--space-6); min-width: 0; transition: margin-left var(--duration-insert) var(--easing-standard); } :root[data-bo-width="compact"] #bo-main { padding: var(--space-3) var(--space-3) var(--space-6); } [data-toc] { scroll-margin-top: calc(var(--bo-sticky-top) + 16px); } /* The layer: menus, the search results, the tooltip. */ .bo-menu { position: fixed; z-index: 55; top: calc(var(--size-topbar) + var(--space-1)); display: flex; flex-direction: column; gap: 2px; min-width: 220px; max-height: 70vh; overflow-y: auto; padding: var(--space-1); border-radius: var(--radius-m); border: 1px solid var(--border); background: var(--surface); } .bo-menu-account { right: var(--space-2); } .bo-menu-title { left: var(--space-2); } .bo-menu-index { left: calc(var(--size-rail) + var(--space-1)); } .bo-menu-item { justify-content: flex-start; border-color: transparent; border-left: 3px solid transparent; text-align: left; } .bo-menu-item[aria-checked="true"], .bo-menu-item[aria-current="location"] { border-left-color: var(--accent); font-weight: 700; } .bo-menu-who { margin: var(--space-1) var(--space-2); font-weight: 700; } .bo-menu-head { margin: var(--space-2) var(--space-2) 0; color: var(--text-muted); font-size: var(--font-size-100); font-weight: 700; } .bo-tip { position: fixed; z-index: 60; left: var(--bo-tip-x, 0px); top: var(--bo-tip-y, 0px); max-width: 280px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-s); border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: var(--font-size-200); } /* Reduced motion (design 2.3, BO-D11): every state change is instant; the machine still runs. */ @media (prefers-reduced-motion: reduce) { #bo-nav, :root[data-bo-look="rail"] #bo-nav, :root[data-bo-look="drawer"] #bo-nav, #bo-meter, .bo-meter-fill, .bo-group-link, .bo-toggle .navicon, #bo-main, #bo-status, .bo-toc-fill { transition: none; } } }