/* =====================================================================================================
   VAULT MENUBAR — R289/§282 P8 · styles for pwa/vault-menubar.js
   Strict-CSP (style-src 'self'): everything static lives here; dynamic values arrive as custom
   properties written by setVar() in the JS (never inline style attributes).

   Container-driven responsiveness (ASL Law 2): the wrapper is its OWN container (`mbar`).
   Narrow-first: the single "Menu" button is the base state; ≥760px container inline-size swaps in the
   horizontal APG menubar. No viewport-height-100 unit anywhere — the sheet is 100dvh (Law 1).

   Tokens DEFER to the host vault palette (vault.css `.vlt` custom properties) and fall back to the
   same dark values when the component is mounted standalone — so a light-scheme host retints the
   menubar for free, and a bare probe page still renders correctly.

   Liquid glass (BRIEF non-negotiable 10): chrome surfaces only (this menubar + its panels), FALLBACK
   FIRST — solid panel base, blur+saturate added only under @supports, solid again under
   prefers-reduced-transparency, and nothing animated (static on mobile by construction).
   ===================================================================================================== */

/* TOKEN SHAPE — MEASURED 2026-08-18, and the reason this block is written the long way.
   `var(--ink, <triple>)` is NOT a safe deference here. chrome.css:20,22 defines --ink and --accent at
   :root as FINISHED COLORS (`#eef1f6`, `oklch(0.72 0.17 275)`) while vault.css:16-100 defines the same
   names on `.vlt` as bare HSL TRIPLES. Outside `.vlt` the var() therefore RESOLVES (the fallback never
   fires) and `hsl(<a finished color> / .9)` is invalid-at-computed-value-time — measured effect: the
   Help-search highlight computed `background-color: rgba(0,0,0,0)` with dark text, i.e. an invisible
   "highlight" that still satisfied a class-name assertion. Defaults are therefore SELF-CONTAINED
   triples; the vault palette is deferred to only INSIDE `.vlt`, where the triple shape is guaranteed
   (and where the light-scheme override then retints the menubar for free). */
.vlt-mbar-wrap {
  --mb-ink: 235 16% 95%;
  --mb-ink-dull: 235 11% 68%;
  --mb-ink-faint: 235 9% 50%;
  --mb-box: 235 14% 14.5%;
  --mb-overlay: 235 16% 13%;
  --mb-hover: 235 14% 18.5%;
  --mb-line: 235 12% 21%;
  --mb-frame: 235 12% 27%;
  --mb-accent: 268 88% 68%;
  --mb-accent-h: 268;
  --mb-err: 2 78% 63%;
  --mb-font: var(--font-body, 'Atkinson Hyperlegible', system-ui, sans-serif);
  --mb-fs: var(--fs-md, 13px);
  --mb-fs-sm: var(--fs-xs, 11px);
  --mb-tap: 30px;                    /* fine-pointer item height; coarse raises to 44 below */

  display: block;
  inline-size: 100%;
  font-family: var(--mb-font);
  color: hsl(var(--mb-ink));
  container: mbar / inline-size;
}
/* Inside the vault the palette IS triples — defer, so a light-scheme host retints the menubar for free. */
.vlt .vlt-mbar-wrap {
  --mb-ink: var(--ink); --mb-ink-dull: var(--ink-dull); --mb-ink-faint: var(--ink-faint);
  --mb-box: var(--box); --mb-overlay: var(--overlay); --mb-hover: var(--hover);
  --mb-line: var(--line); --mb-frame: var(--frame);
  --mb-accent: var(--accent); --mb-accent-h: var(--accent-h); --mb-err: var(--err);
}

@media (pointer: coarse) { .vlt-mbar-wrap { --mb-tap: 44px; } }   /* house rule: ≥44px coarse targets */

/* ---- coarse pointers: winning the 44px floor against the estate's blanket rule ---------------------
   MEASURED 2026-08-18 (probe C5, not assumed): with `--mb-tap: 44px` set and `min-block-size:
   max(var(--mb-tap), 44px)` written on the item, the sheet's rows still computed to 36px. Cause:
   mobile.css:50-62 carries an UNLAYERED blanket rule
     `button:not(.deck-dot):not(.tool--caret):not(.rec-dot):not(.sph-dot):not(.live-caret), … {
        min-block-size: var(--ytx-tap); }`
   at specificity (0,5,1); `.vlt-mbsheet__i` is (0,1,0) and loses. Estate-wide `--ytx-tap` is 36px
   (R269: "44 is the ceiling, not the target").
   mobile.css:33-37 documents the sanctioned hook — "a declaration ON the element always beats an
   inherited one, from any layer and at any specificity … the documented hook a component uses to
   retune its own target from its OWN stylesheet without editing this file." Precedent in this lane:
   vault-dock.css:287-292 (P5) does exactly this; ycombine.css:637 is the estate precedent.
   TENSION RECORDED (selection-records-p8.md #8): this brief makes >=44px binding while
   mobile.css:47 says the ceiling is "never assigned to a control". The brief wins for this component
   only, and the revert is one declaration — delete the `--ytx-tap` line and every menubar control
   falls back to the estate's 36px floor with no other change. -------------------------------------- */
@media (pointer: coarse) {
  .vlt-mbar__item, .vlt-mbar-compact, .vlt-mb__i, .vlt-mbsheet__x, .vlt-mbshort__x {
    --ytx-tap: var(--ytx-tap-ceil, 44px);
  }
}

/* The integrator's MOUNT POINT (WIRING-p8.md §4). `.vlt` is a flex column with `block-size:100%;
   overflow:hidden` (vault.css:112-115) and `.vlt-body { flex:1 1 auto; min-block-size:0 }` absorbs the
   remainder, so a menubar row must declare `flex:0 0 auto` or it fights the sensitive height clamp.
   Shipping the rule HERE means the integrator adds a bare <div class="vlt-mbhost"> and no CSS. */
.vlt-mbhost { flex: 0 0 auto; min-inline-size: 0; }
.vlt .vlt-mbhost {   /* the tint only where the triples are guaranteed — see the TOKEN SHAPE note above */
  background: hsl(var(--sidebar) / .55);
  border-block-end: 1px solid hsl(var(--line));
}

/* ---------------- the compact "Menu" button (base = narrow) ---------------- */
/* R289 WAVE-2 FINDING-1 (height budget, MEASURED 2026-08-18): at 320x568 the whole vault is the
   library.css floor and its chrome is 198px of a 230px box, so every px this bar spends comes straight
   out of the file list. The narrow mode itself is CORRECT (probe: `.vlt-mbar` display:none, compact
   shown, container query on `.vlt-mbar-wrap` matching its own children) - the residual height is one
   real control, not phantom reserved space. So only the genuine fat goes: the fine-pointer floor drops
   34px -> 30px (exactly `.vlt-mbar__item`'s own desktop height, and still above the host's 27px
   `.vlt-tool`) and the margin 2px -> 1px. MEASURED: `.vlt-mbhost` 39px -> 33px fine, 49px -> 47px
   coarse. The coarse floor is untouched: `--mb-tap` is 44px there, so `max()` still yields 44 and the
   >=44px house rule holds. Revert = restore the two literals; nothing else depends on them. */
.vlt-mbar-compact {
  display: inline-flex; align-items: center; gap: 7px;
  min-block-size: max(var(--mb-tap), 30px);
  padding-inline: 12px; margin: 1px 2px;
  border: 1px solid hsl(var(--mb-line)); border-radius: 9px;
  background: hsl(var(--mb-box)); color: hsl(var(--mb-ink));
  font: inherit; font-size: var(--mb-fs); cursor: pointer;
}
.vlt-mbar-compact:hover { background: hsl(var(--mb-hover)); }
.vlt-mbar-compact:focus-visible { outline: 2px solid hsl(var(--mb-accent)); outline-offset: 2px; }

/* ---------------- the horizontal menubar (≥760px container) ---------------- */
.vlt-mbar { display: none; }
@container mbar (min-width: 760px) {
  .vlt-mbar { display: flex; align-items: stretch; gap: 2px; padding: 2px 4px; }
  .vlt-mbar-compact { display: none; }
}
.vlt-mbar__item {
  border: 0; border-radius: 8px; background: transparent; color: hsl(var(--mb-ink));
  font: inherit; font-size: var(--mb-fs); cursor: pointer;
  padding-inline: 11px; min-block-size: max(var(--mb-tap), 30px);
}
.vlt-mbar__item:hover { background: hsl(var(--mb-hover)); }
.vlt-mbar__item[aria-expanded="true"] { background: hsl(var(--mb-accent) / .92); color: hsl(var(--mb-accent-h) 30% 12%); }
.vlt-mbar__item:focus-visible { outline: 2px solid hsl(var(--mb-accent)); outline-offset: -2px; }

/* ---------------- dropdown panels ---------------- */
.vlt-mbpanel {
  position: fixed;
  inset: auto;                                    /* cancel the popover UA inset:0 */
  left: var(--mb-x, 0px); top: var(--mb-y, 0px);
  margin: 0; border: 1px solid hsl(var(--mb-line)); border-radius: 12px;
  min-inline-size: 232px; max-inline-size: 340px;
  max-block-size: var(--mb-maxh, 60dvh);          /* landscape-phone: fits, scrolls inside (Law 4) */
  overflow-y: auto; overflow-x: hidden;
  padding: 6px;
  background: hsl(var(--mb-overlay));             /* SOLID fallback first */
  color: hsl(var(--mb-ink));
  box-shadow: 0 18px 44px hsl(235 40% 3% / .5);
  z-index: 60;                                    /* only load-bearing in the no-popover fallback */
  font-size: var(--mb-fs);
}
.vlt-mbpanel:not(.is-open):not(:popover-open) { display: none; }
/* glass: additive, chrome-only, static */
@supports (backdrop-filter: blur(1px)) {
  .vlt-mbpanel { background: hsl(var(--mb-overlay) / .82); backdrop-filter: blur(14px) saturate(1.35); }
}
@media (prefers-reduced-transparency: reduce) {
  .vlt-mbpanel { background: hsl(var(--mb-overlay)); backdrop-filter: none; }
}
.vlt-mbpanel.is-preview { pointer-events: auto; }

/* ---------------- menu items ---------------- */
.vlt-mb__i {
  display: flex; align-items: center; gap: 9px;
  inline-size: 100%; min-block-size: var(--mb-tap);
  padding-inline: 9px; border: 0; border-radius: 8px;
  background: transparent; color: hsl(var(--mb-ink));
  font: inherit; font-size: var(--mb-fs); text-align: start; cursor: pointer;
}
.vlt-mb__i:hover, .vlt-mb__i:focus-visible, .vlt-mb__i.is-hl {
  background: hsl(var(--mb-accent) / .9); color: hsl(var(--mb-accent-h) 30% 12%); outline: none;
}
.vlt-mb__i:hover .vlt-mb__kbd, .vlt-mb__i:focus-visible .vlt-mb__kbd, .vlt-mb__i.is-hl .vlt-mb__kbd,
.vlt-mb__i:hover .vlt-mb__path, .vlt-mb__i:focus-visible .vlt-mb__path, .vlt-mb__i.is-hl .vlt-mb__path {
  color: hsl(var(--mb-accent-h) 30% 20%);
}
.vlt-mb__i--danger { color: hsl(var(--mb-err)); }
.vlt-mb__i--danger:hover, .vlt-mb__i--danger:focus-visible, .vlt-mb__i--danger.is-hl {
  background: hsl(var(--mb-err) / .92); color: hsl(0 0% 100%);
}
.vlt-mb__i[aria-disabled="true"] { opacity: .42; cursor: default; }
.vlt-mb__i[aria-disabled="true"]:hover { background: transparent; color: hsl(var(--mb-ink)); }
.vlt-mb__i--danger[aria-disabled="true"]:hover { color: hsl(var(--mb-err)); }

.vlt-mb__ic, .vlt-mb__chk {
  inline-size: 16px; display: inline-flex; justify-content: center; flex: 0 0 auto;
  opacity: .85; font-size: 14px;
}
.vlt-mb__ic svg, .vlt-mb__chk svg, .vlt-mb__cv svg { inline-size: 1em; block-size: 1em; }
.vlt-mb__lbl { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vlt-mb__kbd { margin-inline-start: auto; flex: 0 0 auto; font-size: var(--mb-fs-sm); color: hsl(var(--mb-ink-faint)); }
.vlt-mb__cv { margin-inline-start: auto; flex: 0 0 auto; display: inline-flex; font-size: 13px; opacity: .7; }
.vlt-mb__sep { block-size: 1px; margin: 5px 6px; background: hsl(var(--mb-line)); border: 0; }

/* ---------------- Help search ---------------- */
.vlt-mb__searchwrap { padding: 2px 2px 4px; }
.vlt-mb__search {
  inline-size: 100%; min-block-size: max(30px, calc(var(--mb-tap) - 8px));
  padding-inline: 10px; border: 1px solid hsl(var(--mb-line)); border-radius: 8px;
  background: hsl(var(--mb-box)); color: hsl(var(--mb-ink));
  font: inherit; font-size: var(--mb-fs);
}
.vlt-mb__search:focus-visible { outline: 2px solid hsl(var(--mb-accent)); outline-offset: 1px; }
.vlt-mb__search::placeholder { color: hsl(var(--mb-ink-faint)); }
.vlt-mb__results { display: flex; flex-direction: column; margin-block-start: 4px; }
.vlt-mb__results:empty { display: none; }
.vlt-mb__path { margin-inline-start: auto; flex: 0 0 auto; font-size: var(--mb-fs-sm); color: hsl(var(--mb-ink-faint)); }

/* =====================================================================================================
   NARROW SHEET — full-height <dialog>, the same menu tree as accordions (convlist sheet precedent)
   ===================================================================================================== */
.vlt-mbsheet {
  position: fixed; inset-block: 0; inset-inline: auto 0;
  margin: 0; padding: 0; border: 0; border-inline-start: 1px solid hsl(var(--mb-line));
  inline-size: min(480px, 100%);
  /* MEASURED 2026-08-18: Chromium's UA sheet carries `dialog:modal { max-width: calc(100% - 6px - 2em) }`
     (and the same for max-height). At 390x844 with a 13px font that clamped this sheet to 358px and
     pushed it 12px past the viewport's inline end — a visible misfit on the primary phone profile that
     every class/height assertion still called green. Both UA clamps must be beaten explicitly. */
  max-inline-size: 100%;
  block-size: 100dvh; max-block-size: 100dvh;     /* Law 1: dvh only, never the static vh unit */
  background: hsl(var(--mb-overlay)); color: hsl(var(--mb-ink));
  font-family: var(--mb-font); font-size: var(--mb-fs);
  display: flex; flex-direction: column;
  padding-block-start: env(safe-area-inset-top, 0px);
  padding-block-end: env(safe-area-inset-bottom, 0px);
  padding-inline-end: env(safe-area-inset-right, 0px);
}
.vlt-mbsheet:not([open]) { display: none; }
.vlt-mbsheet::backdrop { background: hsl(235 40% 4% / .55); }
@supports (backdrop-filter: blur(1px)) {
  .vlt-mbsheet { background: hsl(var(--mb-overlay) / .92); backdrop-filter: blur(16px) saturate(1.3); }
}
@media (prefers-reduced-transparency: reduce) {
  .vlt-mbsheet { background: hsl(var(--mb-overlay)); backdrop-filter: none; }
  .vlt-mbsheet::backdrop { background: hsl(235 40% 4% / .72); }
}
@media (prefers-reduced-motion: no-preference) {
  .vlt-mbsheet[open] { animation: vlt-mbsheet-in .16s ease-out; }
  @keyframes vlt-mbsheet-in { from { transform: translateX(12px); opacity: .4; } to { transform: none; opacity: 1; } }
}

.vlt-mbsheet__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: 14px 6px; min-block-size: max(var(--mb-tap), 44px);
  border-block-end: 1px solid hsl(var(--mb-line)); flex: 0 0 auto;
}
.vlt-mbsheet__t { font-size: 15px; font-weight: 700; }
.vlt-mbsheet__x {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: max(var(--mb-tap), 40px); block-size: max(var(--mb-tap), 40px);
  border: 0; border-radius: 9px; background: transparent; color: hsl(var(--mb-ink-dull));
  font-size: 15px; cursor: pointer;
}
.vlt-mbsheet__x:hover { background: hsl(var(--mb-hover)); color: hsl(var(--mb-ink)); }
.vlt-mbsheet__x:focus-visible { outline: 2px solid hsl(var(--mb-accent)); outline-offset: -2px; }
.vlt-mbsheet__x svg { inline-size: 1em; block-size: 1em; }

.vlt-mbsheet__search { flex: 0 0 auto; margin: 8px 10px 0; inline-size: auto; }
.vlt-mbsheet > .vlt-mb__results { flex: 0 0 auto; margin: 4px 10px 0; max-block-size: 32dvh; overflow-y: auto; }
.vlt-mbsheet__body { flex: 1 1 auto; overflow-y: auto; padding: 6px 10px 14px; overscroll-behavior: contain; }

.vlt-mbsheet__menu { border-block-end: 1px solid hsl(var(--mb-line)); }
.vlt-mbsheet__sum {
  display: flex; align-items: center; gap: 9px; list-style: none; cursor: pointer;
  min-block-size: max(var(--mb-tap), 44px); padding-inline: 4px;
  font-size: 14px; font-weight: 700; color: hsl(var(--mb-ink));
}
.vlt-mbsheet__sum::-webkit-details-marker { display: none; }
.vlt-mbsheet__sum:focus-visible { outline: 2px solid hsl(var(--mb-accent)); outline-offset: -2px; border-radius: 8px; }
.vlt-mbsheet__cv { display: inline-flex; font-size: 13px; opacity: .7; }
@media (prefers-reduced-motion: no-preference) { .vlt-mbsheet__cv { transition: transform .12s ease-out; } }
.vlt-mbsheet__menu[open] > .vlt-mbsheet__sum .vlt-mbsheet__cv,
.vlt-mbsheet__submenu[open] > .vlt-mbsheet__sum .vlt-mbsheet__cv { transform: rotate(90deg); }
.vlt-mbsheet__submenu { margin-inline-start: 12px; }
.vlt-mbsheet__sum--sub { font-weight: 400; min-block-size: var(--mb-tap); }
.vlt-mbsheet__i { min-block-size: max(var(--mb-tap), 44px); }
.vlt-mbsheet__menu .vlt-mb__sep { margin: 4px 10px; }

/* =====================================================================================================
   SHORTCUTS dialog
   ===================================================================================================== */
.vlt-mbshort {
  border: 1px solid hsl(var(--mb-line)); border-radius: 14px; padding: 0;
  inline-size: min(420px, calc(100% - 24px)); max-inline-size: calc(100% - 24px); max-block-size: 84dvh; overflow: auto;
  background: hsl(var(--mb-overlay)); color: hsl(var(--mb-ink));
  font-family: var(--mb-font); font-size: var(--mb-fs);
}
.vlt-mbshort::backdrop { background: hsl(235 40% 4% / .5); }
.vlt-mbshort__head {
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: 14px 6px; min-block-size: 44px; border-block-end: 1px solid hsl(var(--mb-line));
}
.vlt-mbshort__t { font-weight: 700; font-size: 14px; }
.vlt-mbshort__x {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: max(var(--mb-tap), 36px); block-size: max(var(--mb-tap), 36px);
  border: 0; border-radius: 9px; background: transparent; color: hsl(var(--mb-ink-dull)); cursor: pointer; font-size: 14px;
}
.vlt-mbshort__x:hover { background: hsl(var(--mb-hover)); color: hsl(var(--mb-ink)); }
.vlt-mbshort__x svg { inline-size: 1em; block-size: 1em; }
.vlt-mbshort__rows { padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 2px; }
.vlt-mbshort__row { display: flex; align-items: baseline; gap: 12px; min-block-size: 26px; }
.vlt-mbshort__k { flex: 0 0 auto; min-inline-size: 108px; color: hsl(var(--mb-ink)); }
.vlt-mbshort__v { color: hsl(var(--mb-ink-dull)); font-size: var(--mb-fs-sm); }