/* The editor pattern of the back office (batch BO, chunk bo2; BO-2.0-DESIGN 4.1 to 4.4, 5.1 to 5.4, 7; BO-D20, BO-D21;
   BATCH-BO-PLAN 5.4, P25). Wholly inside @layer app, tokens only (1 px lines and the scroll margin's 8 px are the
   design's own figures, 2.5 and 5.3). Loaded by Management only; the service classes of base.css and their floors
   are untouched.
   - The Management floor tier (design 5.1, web/tests/floors.mjs MANAGE_FLOORS): bo-row, bo-btn, bo-input, bo-check,
     bo-chip and bo-link at --touch-pointer (36 px) and at --touch-pointerTouch (44 px) under a coarse pointer, each
     with touch-action: manipulation (no double-tap zoom, no tap delay). bo-icon lives in shell.css (bo1).
   - Tables (design 5.3): 14 px text, cells padded 8 by 12 px, a 1 px --panel line between rows, the --panel hover
     fill, the header sticky at var(--bo-sticky-top) (the shell writes the property, design 2.5; the default below is
     the top bar plus the meter, 51 px), the first column sticky, numbers right-aligned in tabular digits.
     The default wrapper is no scroll container (overflow-x: clip, and no overflow-y at all; FABLE-batchBO-r1 Major 1),
     so the window stays the one scroller of the page and the header sticks at var(--bo-sticky-top) under the sticky
     layers while the window scrolls (bo2 measured that clip sticks; overflow-x: auto made the wrapper a scroll
     container in both axes, CSS Overflow 3, which put the header 51 px down inside it and killed the scroll meter on
     a long carta, bo4 item 2). A table wider than its pane clips instead of scrolling sideways: a wide-table mode is
     a recorded residual. .is-bounded is the opt-in scroller of its own in both axes (as tall as the pane, the header
     at 0), which Personal's permission matrix keeps.
   - A table-of-contents heading row inside a tbody clears the sticky header row when the TOC jumps to it
     (--bo-thead-h, 36 px, 44 px under a coarse pointer; design 2.5 "Sticky layers").
   - The selection mark (design 4.2): a 3 px --accent bar on the left edge and the --panel fill, never the --focus
     outline, so a selected row and a focused row never look alike.
   - The panel beside the list (440 px, sticky, its own scroll), the sheet under the top bar, the save bar (56 px,
     sticky at the bottom of the pane or the sheet, --surface with a 1 px --border line on top), the bulk bar above
     it, the details blocks, the dialogs in #bo-layer, and the reduced-motion block.
   Stacking inside the content (design 2.1): sticky cells 1, the sticky header 2 (its sticky corner 3), the bulk bar
   and the save bar 4, the sheet 5, all under shell.css's layers (#bo-status 30, #bo-nav 35 to 50, #bo-top 40); the
   dialog's backdrop 57, above the drawer (50) and the shell's menus (55), under its tooltips (60), design 2.1's order.
   UNVERIFIED on real devices (plan R6): the save bar above an on-screen keyboard. */
@layer app {
  :root {
    --bo-sticky-top: calc(var(--size-topbar) + var(--size-meter));
    --bo-thead-h: var(--touch-pointer);
    --bo-select-w: calc(var(--touch-pointer) + 2 * var(--space-3));
  }

  /* ---- the Management floor tier ---------------------------------------------------------------------------------- */
  .bo-row, .bo-btn, .bo-input, .bo-check, .bo-chip, .bo-link { min-height: var(--touch-pointer); touch-action: manipulation; }
  @media (pointer: coarse) {
    :root { --bo-thead-h: var(--touch-pointerTouch); --bo-select-w: calc(var(--touch-pointerTouch) + 2 * var(--space-3)); }
    .bo-row, .bo-btn, .bo-input, .bo-check, .bo-chip, .bo-link { min-height: var(--touch-pointerTouch); }
    .bo-table tr.bo-row { height: var(--touch-pointerTouch); }
  }

  /* .bo-btn and .bo-link carry the same values as web/platform/shell.css (bo1) declares for them, so the order of the two
     stylesheets never decides how a button or a link looks. */
  .bo-btn { 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-btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700; }
  .bo-btn-quiet { background: transparent; border-color: transparent; text-decoration: underline; }
  .bo-btn:disabled { opacity: 0.55; cursor: not-allowed; }
  .bo-input { padding: 0 var(--space-3); border-radius: var(--radius-s); border: 1px solid var(--border); background: var(--surface);
    color: var(--text); font: inherit; font-size: var(--font-size-200); }
  .bo-input[aria-invalid="true"] { border-color: var(--accent); border-width: 2px; }
  .bo-check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-200); cursor: pointer; }
  .bo-check input { width: var(--space-4); height: var(--space-4); margin: 0; accent-color: var(--accent); }
  .bo-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0 var(--space-3); border-radius: var(--pill-radius);
    border: 1px solid var(--border); background: var(--surface); color: var(--text); font: inherit; font-size: var(--font-size-200); cursor: pointer; }
  .bo-chip.is-on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
  .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:hover { text-decoration: underline; }
  .bo-btn:focus-visible, .bo-input:focus-visible, .bo-chip:focus-visible, .bo-link:focus-visible, .bo-row:focus-visible,
  .bo-check input:focus-visible, .bo-summary:focus-visible, .bo-table [data-toc]:focus-visible {
    outline: 3px solid var(--focus); outline-offset: 2px; }
  .bo-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .bo-field { display: flex; flex-direction: column; gap: var(--space-1); margin: var(--space-2) 0; font-size: var(--font-size-200); }

  /* ---- the list: search chips, empty states, loading ---------------------------------------------------------------- */
  .bo-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-2) 0; }
  .bo-empty { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-3); }
  .bo-empty-text { margin: 0; color: var(--text); font-size: var(--font-size-300); }
  .bo-loading { margin: 0; padding: var(--space-3); color: var(--text-muted); font-size: var(--font-size-200); }

  /* ---- tables (design 5.3) ------------------------------------------------------------------------------------------ */
  .bo-table-wrap { max-width: 100%; overflow-x: clip; }
  .bo-table-wrap.is-bounded { overflow: auto; max-height: calc(100vh - var(--bo-sticky-top) - var(--size-savebar)); }
  .bo-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--font-size-200);
    line-height: var(--font-lineHeight-normal); }
  .bo-table th, .bo-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--panel); text-align: left;
    vertical-align: middle; background: var(--bg); }
  .bo-table .num { text-align: right; font-variant-numeric: tabular-nums; }
  .bo-table thead th { position: sticky; top: var(--bo-sticky-top); z-index: 2; height: var(--bo-thead-h); padding-top: 0; padding-bottom: 0;
    background: var(--surface); color: var(--text-muted); font-size: var(--font-size-100); font-weight: 700; white-space: nowrap; }
  .bo-table-wrap.is-bounded thead th { top: 0; }
  .bo-table tr.bo-row { height: var(--touch-pointer); }
  .bo-table tr.bo-row:hover > td { background: var(--panel); }
  .bo-table tr.bo-row.is-current > td { background: var(--panel); }
  .bo-table tr.bo-row.is-current > :first-child { box-shadow: inset var(--size-meter) 0 0 var(--accent); }
  .bo-table .bo-col-name { position: sticky; left: 0; z-index: 1; padding-top: 0; padding-bottom: 0; font-weight: 600; }
  .bo-table.has-select .bo-col-name { left: var(--bo-select-w); }
  .bo-table .bo-col-select { position: sticky; left: 0; z-index: 1; width: var(--bo-select-w); }
  .bo-table thead .bo-col-name, .bo-table thead .bo-col-select { z-index: 3; }
  .bo-sort { width: 100%; justify-content: flex-start; padding: 0; border: 0; background: transparent; color: inherit; font-size: inherit;
    font-weight: inherit; }
  th.num .bo-sort { justify-content: flex-end; }
  .bo-table .bo-group th { background: var(--surface); color: var(--text); font-size: var(--font-size-300); font-weight: 700; }
  .bo-table .bo-group .num { margin-left: var(--space-2); color: var(--text-muted); font-size: var(--font-size-200); }
  /* A jump to a category heading row lands under the sticky layers and the sticky header row (design 2.5). */
  tbody [data-toc] { scroll-margin-top: calc(var(--bo-sticky-top) + var(--bo-thead-h) + 8px); }
  .bo-table-wrap.is-bounded tbody [data-toc] { scroll-margin-top: calc(var(--bo-thead-h) + 8px); }

  /* ---- cards (design 4.1 and 7: under 880 px) ----------------------------------------------------------------------- */
  .bo-cards { display: flex; flex-direction: column; gap: var(--space-2); }
  .bo-card-group { margin: var(--space-3) 0 0; font-size: var(--font-size-300); font-weight: 700;
    scroll-margin-top: calc(var(--bo-sticky-top) + 16px); }
  .bo-card-group .num { color: var(--text-muted); font-size: var(--font-size-200); }
  .bo-card-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
  .bo-card { display: flex; align-items: stretch; gap: var(--space-2); border-bottom: 1px solid var(--panel); }
  .bo-card-select { padding: 0 var(--space-2); }
  .bo-card-link { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: var(--space-2) var(--space-3);
    color: var(--text); text-decoration: none; font-size: var(--font-size-200); }
  .bo-card-link:hover { background: var(--panel); }
  .bo-card.is-current .bo-card-link { background: var(--panel); box-shadow: inset var(--size-meter) 0 0 var(--accent); }
  .bo-card-title { font-weight: 700; overflow-wrap: anywhere; }
  .bo-card-line { color: var(--text-muted); font-variant-numeric: tabular-nums; }

  /* ---- list and panel side by side (design 4.1: from a 880 px pane) ------------------------------------------------- */
  .bo-split { display: grid; grid-template-columns: minmax(0, 1fr) var(--size-panel); gap: var(--space-4); align-items: start; }
  .bo-panel { position: sticky; top: var(--bo-sticky-top); width: var(--size-panel); max-width: 100%;
    max-height: calc(100vh - var(--bo-sticky-top) - var(--size-savebar)); overflow-y: auto; overscroll-behavior: contain;
    border-left: 1px solid var(--border); background: var(--surface); }
  .bo-panel-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-4); background: var(--surface); border-bottom: 1px solid var(--panel); }
  .bo-panel-title { flex: 1; margin: 0; font-size: var(--font-size-500); font-weight: 700; }
  .bo-panel-body { padding: var(--space-2) var(--space-4) var(--space-5); }
  .bo-close { padding: 0; min-width: var(--touch-pointer); background: transparent; }

  /* ---- the sheet (design 4.1 and 7): full screen under the top bar and the sticky layers, the meter's scroller ------- */
  .bo-sheet { position: fixed; top: var(--bo-sticky-top); right: 0; bottom: 0; left: var(--bo-pane-left, 0px); z-index: 5;
    display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; background: var(--bg); }
  .bo-sheet-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2) var(--space-4); background: var(--surface); border-bottom: 1px solid var(--border); }
  .bo-sheet-title { margin: 0; font-size: var(--font-size-400); font-weight: 700; overflow-wrap: anywhere; }
  .bo-sheet-body { flex: 1; padding: var(--space-3) var(--space-4) var(--space-5); }
  .bo-sheet-foot { position: sticky; bottom: 0; z-index: 4; }

  /* ---- the save bar (design 4.4): never drawn clean; the pane keeps its 56 px, so the first edit shifts nothing ----- */
  .bo-editor { padding-bottom: var(--size-savebar); }
  .bo-savebar { position: sticky; bottom: 0; z-index: 4; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: var(--space-2) var(--space-4); min-height: var(--size-savebar); padding: var(--space-2) var(--space-4);
    background: var(--surface); border-top: 1px solid var(--border); font-size: var(--font-size-200); }
  .bo-editor > .bo-savebar { margin-top: calc(-1 * var(--size-savebar)); }
  .bo-savebar-text { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); min-width: 0; }
  .bo-savebar-text p { margin: 0; }
  .bo-savebar-lead { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 700; }
  .bo-savebar-count, .bo-savebar-where { font-weight: 400; }
  .bo-savebar-revision { font-variant-numeric: tabular-nums; }
  .bo-savebar-note, .bo-savebar-reason { color: var(--text-muted); }
  .bo-savebar-failures { margin: 0; padding-left: var(--space-4); }
  .bo-savebar-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
  .bo-issues { padding: var(--space-2) var(--space-4); background: var(--surface); border-top: 1px solid var(--panel); }
  .bo-issues-title { margin: 0 0 var(--space-1); font-weight: 700; font-size: var(--font-size-200); }
  .bo-issue-list { margin: 0; padding-left: var(--space-4); font-size: var(--font-size-200); }

  /* ---- the bulk bar (design 5.4): above the save bar, only while rows are ticked ------------------------------------ */
  .bo-bulk { position: sticky; bottom: var(--size-savebar); z-index: 4; display: flex; flex-wrap: wrap; align-items: center;
    gap: var(--space-2); padding: var(--space-2) var(--space-4); background: var(--panel); border-top: 1px solid var(--border);
    font-size: var(--font-size-200); }
  .bo-bulk-count { font-weight: 700; font-variant-numeric: tabular-nums; }
  .bo-bulk-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-left: auto; }
  .bo-bulk-reason { color: var(--text-muted); }

  /* ---- detail blocks (design 4.3): the open state is page state, the attribute only follows it ---------------------- */
  .bo-details { border-top: 1px solid var(--panel); }
  .bo-summary { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch-pointer); list-style: none;
    cursor: pointer; font-weight: 700; font-size: var(--font-size-300); }
  .bo-summary::-webkit-details-marker { display: none; }
  .bo-details[open] > .bo-summary .glyph { transform: rotate(90deg); }
  .bo-details-body { padding: 0 0 var(--space-3); }

  /* ---- the dialogs (design 4.4, 4.5, 4.7): in #bo-layer, over everything the page shows ----------------------------- */
  .bo-dialog-backdrop { position: fixed; inset: 0; z-index: 57; display: grid; place-items: center; padding: var(--space-4);
    background: color-mix(in srgb, var(--bg) 72%, transparent); }
  /* The width binds against the viewport, not the grid track: the backdrop's track grows to the dialog's content, so
     max-width: 100% measured 440 px inside a 390 px phone and cut "Confirmar" off (BO-BROWSER-PASS section 4 item 4). */
  .bo-dialog { width: var(--size-panel); max-width: min(var(--size-panel), calc(100vw - 2 * var(--space-4)));
    max-height: calc(100vh - 2 * var(--space-4)); overflow-y: auto;
    padding: var(--space-5); border-radius: var(--radius-l); border: 1px solid var(--border); background: var(--surface); color: var(--text); }
  .bo-dialog-title { margin: 0 0 var(--space-2); font-size: var(--font-size-400); font-weight: 700; }
  .bo-dialog-body { margin: 0 0 var(--space-3); color: var(--text-muted); font-size: var(--font-size-200); }
  .bo-dialog-error { margin: var(--space-2) 0 0; font-weight: 700; font-size: var(--font-size-200); }
  .bo-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); }

  /* ---- motion: only when the device has no reduced-motion preference ------------------------------------------------- */
  @media (prefers-reduced-motion: no-preference) {
    .bo-sheet { animation: bo-sheet-in var(--duration-sheetIn) var(--easing-standard); }
    .bo-dialog { animation: bo-fade-in var(--duration-insert) var(--easing-standard); }
    .bo-btn, .bo-chip, .bo-card-link { transition: background-color var(--duration-tap) var(--easing-standard); }
    .bo-summary .glyph { transition: transform var(--duration-tap) var(--easing-standard); }
  }
  @media (prefers-reduced-motion: reduce) {
    .bo-sheet, .bo-dialog, .bo-btn, .bo-chip, .bo-card-link, .bo-summary .glyph { animation: none; transition: none; }
  }
  @keyframes bo-sheet-in { from { transform: translateY(var(--space-5)); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes bo-fade-in { from { opacity: 0; } to { opacity: 1; } }
}