/* =====================================================================================================
   VAULT STATUS ROWS — R289/§282 P6 (J8) · stylesheet for vault-status.js
   Two single-line 12px rows pinned to the bottom of the Vault. HARD sizing contract: the component is
   exactly var(--vlt-foot-h, 44px) tall and can never wrap or grow (grid rows + overflow discipline).
   Loads AFTER vault.css (see WIRING-p6.md) and is deliberately UNLAYERED, so its two host offsets
   (.vlt-bulk / .vlt-toast, both defined inside vault.css @layer blocks or with lower specificity)
   win by cascade without touching vault.css — additive-only law respected.
   Tokens are vault.css's own HSL triplets (--line/--frame/--box/--ink/--ink-dull/--hover/--accent),
   so light/dark flip for free. 12px is the CONTRACT's fixed size (BRIEF non-negotiable 8), used
   literally rather than via --fs-sm (a viewport-fluid clamp that may exceed 12px).
   ===================================================================================================== */

.vlt-status {
  flex: 0 0 auto;                              /* last in-flow child of the .vlt flex column */
  display: grid;
  grid-template-rows: 1fr 1fr;
  block-size: var(--vlt-foot-h, 44px);
  min-block-size: var(--vlt-foot-h, 44px);     /* the flex column can never crush it */
  max-block-size: var(--vlt-foot-h, 44px);     /* …and nothing can grow it (≤1 line per row, hard) */
  padding-inline: 10px;
  border-block-start: 1px solid hsl(var(--line));
  background: hsl(var(--box) / .55);
  color: hsl(var(--ink-dull));
  overflow: hidden;
  container: vltstatus / inline-size;          /* component-scoped container queries (ASL Law 2) */
}

/* the footer announces itself to the host chrome: overlays anchored to .vlt's bottom edge shift up by
   the footer height. :has() is a host baseline (vault.js header: "CSS renders it (incl. :has())"). */
.vlt:has(> .vlt-status) { --vlt-foot-h: 44px; }
.vlt:has(> .vlt-status) .vlt-bulk  { inset-block-end: calc(14px + var(--vlt-foot-h)); }
.vlt:has(> .vlt-status) .vlt-toast { inset-block-end: calc(20px + var(--vlt-foot-h)); }

/* ---------- row 1: path ---------- */
.vlt-status__path {
  display: flex; align-items: center; gap: 2px;
  min-inline-size: 0; inline-size: 100%;
  white-space: nowrap;
  /* R4: deliberately NOT a clipping box. An `overflow:hidden` here also clips HIT-TESTING, which killed
     the coarse-pointer band that hangs below each segment (measured: the 44px band tested as 2px in
     Chromium / 22px in WebKit). Clipping happens one level up on `.vlt-status`, which bounds both axes at
     the component's hard 44px box, so nothing can spill onto the page. fit() therefore measures overflow
     from the last visible child's edge, not from scrollWidth (see vault-status.js pathOverflows()). */
  overflow: visible;
  font-size: 12px; line-height: 1;
}
.vlt-status__seg {
  appearance: none; border: 0; margin: 0; background: none;
  font: inherit; font-size: 12px; line-height: 1;
  color: hsl(var(--ink-dull));
  padding: 2px 4px; border-radius: 5px;
  cursor: pointer; white-space: nowrap; text-align: start;
  flex: 0 0 auto;
  align-self: stretch;                         /* fill the 22px path row: the coarse ::after below adds
                                                  exactly 22px more, so the hit band is a REAL 44px and
                                                  does not depend on the font's 16px line box (R2 fix) */
  max-inline-size: 40cqi;                      /* one absurd name can't evict every other segment */
  /* R6: the button must NOT clip. Its own `overflow:hidden` (the obvious place to hang text-overflow)
     also clips its ::after — measured: the 44px coarse band tested as 21px because the pseudo was cut at
     the button's own box. The truncation therefore lives on the inner label; the button only positions. */
  overflow: visible;
  display: flex; align-items: center;
  position: relative;                          /* hosts the coarse-pointer hit extension below */
}
.vlt-status__lbl {
  min-inline-size: 0; flex: 0 1 auto;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vlt-status__seg:hover { color: hsl(var(--ink)); background: hsl(var(--hover) / .7); }
.vlt-status__seg:focus-visible { outline: 2px solid hsl(var(--accent)); outline-offset: -1px; }
/* the leaf (selected item) reads strongest and is the ONE segment allowed to CSS-squeeze — the JS fit
   hides middle segments first, so the leaf survives longest and ellipsizes last. */
.vlt-status__seg[aria-current="location"] {
  color: hsl(var(--ink)); font-weight: 600;
  flex: 0 1 auto; max-inline-size: none;
  /* R3: the floor is what MAKES the middle-ellipsis fire. With a 3ch floor a long filename simply
     CSS-squeezed itself to "f…" while every ancestor folder stayed fully spelled out — the overflow
     that drives fit() never appeared. A readable floor (~20 characters, capped at 55% of the
     component so it can never itself overflow a 320px phone) forces fit() to hide middle segments
     FIRST; once only "… › leaf" is left the leaf may shrink below it and ellipsize normally. */
  min-inline-size: min(20ch, 55cqi);
}
/* once the fit loop has hidden every ancestor there is nothing left to hide — release the floor so the
   leaf ellipsizes instead of overflowing the row. */
.vlt-status__path[data-fit="max"] .vlt-status__seg[aria-current="location"] { min-inline-size: 3ch; }
.vlt-status__sep, .vlt-status__ell {
  flex: 0 0 auto; display: inline-flex; align-items: center;
  color: hsl(var(--ink-dull) / .7); font-size: 10px; line-height: 1;
}
.vlt-status__ell { font-size: 12px; padding-inline: 1px; }
/* [hidden] must beat the flex display above (the fit() mechanism depends on it) */
.vlt-status [hidden] { display: none !important; }

/* ---------- row 2: stats ---------- */
.vlt-status__stats {
  margin: 0; align-self: center;
  min-inline-size: 0; inline-size: 100%;
  font-size: 12px; line-height: 1.2;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;   /* block container → real ellipsis */
  color: hsl(var(--ink-dull));
}

/* ---------- pointer / preference adaptations ---------- */
/* ≥44px coarse targets (ASL Law 5) without growing the 22px visual row: extend each segment's hit area
   DOWNWARD over the stats row (which holds zero interactive targets), never upward into the file list.
   22px row + 22px extension = 44px effective target height. */
@media (pointer: coarse) {
  /* R5 — the estate's blanket coarse tap floor (mobile.css:50-60: EVERY <button> gets
     `min-block-size: var(--ytx-tap)` = 36px) would inflate the 22px path row to 36px and CLIP the stats
     row straight out of the hard 44px box — measured on this component at 390x844 with hasTouch before
     this rule existed. mobile.css documents its own exemption idiom in that same block ("the exemptions
     are genuine indicators that get generous slop instead"), which is exactly what these segments are: a
     12px path line whose reach comes from the band below, not from box height. Cancelled HERE, with a
     specificity that clears mobile.css's (0,5,1) — mobile.css itself is a shared file and stays untouched. */
  .vlt-status .vlt-status__path .vlt-status__seg[data-cmd="status-seg"]:not([hidden]):not(:disabled) {
    min-block-size: 0;
  }
  .vlt-status__seg::after {
    content: "";
    position: absolute;
    inset-block-start: 0; inset-block-end: -22px;   /* 22px button + 22px = the component's full 44px */
    inset-inline: -1px;                             /* the 2px flex gap is split, so bands never overlap */
  }
}

/* solid chrome under reduced transparency (BRIEF non-negotiable 10; media queries are inherently
   feature-safe — an unknown query simply never matches, no @supports needed) */
@media (prefers-reduced-transparency: reduce) {
  .vlt-status { background: hsl(var(--box)); }
}
/* no animation/transition exists in this component — nothing to gate behind prefers-reduced-motion. */

/* ---------- narrow: tighten, never wrap (ASL Law 2 — component queries a container, not the viewport)
   R1 fix: an element can NEVER match a query against a container it establishes ITSELF. The old block
   put `.vlt-status { padding-inline }` inside `@container vltstatus`, where `.vlt-status` resolves to
   its nearest ANCESTOR container (`vlt`) — the declaration was dead. The root now queries the host's
   `vlt` container; the descendants keep querying `vltstatus`, which is correct for them. */
@container vlt (max-width: 480px) {
  .vlt-status { padding-inline: 6px; }
}
@container vltstatus (max-width: 480px) {
  .vlt-status__seg { max-inline-size: 34cqi; padding-inline: 3px; }
}