/* 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 <html> (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; }
  /* The venue's name is the Datos fiscales name since batch W (W-D5), up to 80 characters: it never paints past its box,
     which is at most the expanded sidebar's column (the width the wide expanded layout gives it); the full name rides
     the title attribute, and dir="auto" keeps a right-to-left name's start in view (shell.js leadView and drawerHead).
     The venue yields entirely before the title: the title's share of any shrink is its basis over (the factor times the
     venue's basis), so the factor must dwarf the title's basis for that share to round to zero (1000 left 0.03 to 0.22
     px, which Chromium turns into an ellipsis on the title; 1000000 measured 0.0000 px). The title keeps its own
     ellipsis for a title longer than the bar. OPUS-batchW-r1 B1, OPUS-batchW-r2 N1. */
  .bo-venue { flex: 0 1000000 auto; min-width: 0; max-width: calc(var(--size-sidebar) - var(--space-4) - var(--space-3)); overflow: hidden;
    text-overflow: ellipsis; 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); }
  /* The head's row on wide expanded is the title then the "Collapse menu" toggle (Michel TG 11919, 2026-09-30): the
     title's box shrank beside the toggle but its text painted past the box and the toggle covered it ("Manager"
     showed at 1440 px). The title clamps to one line with an ellipsis inside its own box and the toggle keeps its
     width, the way .bo-venue yields in the top bar; the rail draws the toggle alone and is unchanged. */
  .bo-nav-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-size-300);
    font-weight: 700; }
  .bo-toggle { flex: 0 0 auto; }
  .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; }
  }
}