/* ==========================================================================
   NITRATE — THE VAULT.  The archive as a physical object.
   Consumes tokens.css; defines no colour of its own.  Safety orange is
   reserved for one thing only — a drive John has declared failing, because
   that is the only thing on this shelf that would need a hand today.  The
   list of those drives (derive.FAILING_DRIVES) is empty as of 2026-08-10, so
   every is-failing rule below is currently unmatched.  They stay: the rules
   are the styling for a state the data can re-enter at any time, and orange
   must not drift onto anything else in the meantime.
   ========================================================================== */

/* The foyer gutters its blocks with --pad-x and owns their vertical rhythm, so
   take the gutter when there is one and claim no margin of our own — the host
   decides where this sits. Falls back to flush when mounted anywhere else. */
.vlt {
  display: block;
  padding: 0 var(--pad-x, 0px);
  margin: 0;

  /* SAFARICSS_20260905 — off-screen, the vault skips layout and paint (see landing.css) */
  content-visibility: auto; contain-intrinsic-size: auto 1px 1170px;
}

/* --- heading: a rule with the tally sitting on it ------------------------- */
.vlt-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 14px;
}
.vlt-h {
  font-family: var(--font-marquee, var(--font-display));
  font-size: clamp(17px, 2vw, 23px);
  letter-spacing: -.02em;
  flex: 0 0 auto;
}
.vlt-note {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: .04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.vlt-hr {
  flex: 1 1 auto;
  min-width: 20px;
  height: var(--hair);
  background: var(--rule);
}

/* --- the figures ----------------------------------------------------------
   Not cards.  Columns of type divided by the same hairline used everywhere
   else, so they read as a standfirst under a headline rather than as a row of
   tiles.  The lead figure is the widest because it carries the display number
   and the longest sentence.

   HOW MANY THERE ARE IS NOT FIXED.  The failing-drive figure only exists when a
   drive is actually flagged, so vault.js stamps is-1/is-2/is-3 and the track
   list follows.  A hardcoded three-column grid would hold an empty track open
   with a hairline down the middle of nothing. */
.vlt-figs {
  display: grid;
  grid-template-columns: 1.45fr 1fr 1fr;
  border-top: var(--hair) solid var(--rule);
  border-bottom: var(--hair) solid var(--rule);
}
/* Two figures.  Counter-intuitively the LEAD gets the narrower track: its ink
   is a fixed width (the display number, and a caption capped at 52ch), so any
   slack handed to it opens a gap that the divider then fences off — and a
   fenced gap is exactly what "a cell used to be here" looks like.  Give the
   slack to the last column instead, where it runs out to the page edge and
   reads as margin.  Measured at 1600px: the lead's trailing gap is 212px here
   against 254px in the three-up, so the rule sits, if anything, tighter than
   the layout this degrades from. */
.vlt-figs.is-2 { grid-template-columns: 1fr 1.55fr; }
.vlt-figs.is-1 { grid-template-columns: 1fr; }
.vlt-fig {
  padding: 16px 20px 17px;
  min-width: 0;
}
.vlt-fig + .vlt-fig { border-left: var(--hair) solid var(--rule); }
.vlt-fig-lead { padding-left: 0; }

.vlt-big {
  display: block;
  font-family: var(--font-marquee, var(--font-display));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: clamp(46px, 7.4vw, 88px);
  line-height: .92;
  letter-spacing: -.035em;
  color: var(--ink);
  margin-bottom: 8px;
}
.vlt-slash { color: var(--rule); margin: 0 .12em; font-weight: 400; }
.vlt-of    { color: var(--muted); }

.vlt-mid {
  display: block;
  font-family: var(--font-marquee, var(--font-display));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: 8px;
}
.vlt-fig.is-failing .vlt-mid { color: var(--accent); }

.vlt-cap {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 46ch;
}
.vlt-fig-lead .vlt-cap { font-size: 13px; max-width: 52ch; }

/* --- the shelf ------------------------------------------------------------ */
.vlt-scroll { overflow-x: auto; margin-top: 20px; }
.vlt-tbl {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.vlt-cap-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.vlt-tbl th,
.vlt-tbl td {
  padding: 7px 10px;
  border-bottom: var(--hair) solid var(--rule);
  vertical-align: middle;
  text-align: left;
}
/* tokens.css already right-aligns .num, but `.vlt-tbl td` outranks a lone
   class selector — restate it at matching specificity or every figure column
   silently ragged-lefts and stops comparing, which is the whole point of it */
.vlt-tbl th.num,
.vlt-tbl td.num,
.vlt-tbl th.vlt-c-tier,
.vlt-tbl td.vlt-c-tier { text-align: right; }
.vlt-tbl thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  padding-bottom: 6px;
}
.vlt-tbl th:first-child,
.vlt-tbl td:first-child { padding-left: 0; }
.vlt-tbl th:last-child,
.vlt-tbl td:last-child   { padding-right: 0; }

.vlt-tbl tbody td,
.vlt-tbl tbody th { font-size: 12.5px; color: var(--ink-2); }
.vlt-tbl tbody .num { color: var(--ink); }

/* Every column shrinks to its content except the bar, which takes all the
   slack: a wider bar is a better instrument, and it keeps the figure columns
   in one cluster on the right instead of drifting apart on a big screen. */
.vlt-c-name  { width: 1%; white-space: nowrap; }
.vlt-c-holds { width: 1%; color: var(--muted); white-space: nowrap; }
.vlt-c-tier  { width: 1%; white-space: nowrap; }
.vlt-c-share { width: auto; min-width: 190px; }
.vlt-tbl th.num,
.vlt-tbl td.num { width: 1%; white-space: nowrap; }

/* the drive name is the control — a real button, so Tab reaches it and
   Enter/Space work without a single line of ARIA */
.vlt-name {
  border: 0;
  padding: 0;
  background: none;
  font: inherit;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--ink);
  text-align: left;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
}
.vlt-name:hover { text-decoration-color: var(--accent); }
.vlt-tbl tbody tr:hover td,
.vlt-tbl tbody tr:hover th { background: var(--panel); }
@media (prefers-reduced-motion: no-preference) {
  .vlt-tbl tbody td,
  .vlt-tbl tbody th { transition: background-color .12s linear; }
}

.vlt-tag {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  background: var(--accent);
  padding: 1px 5px 2px;
}
.vlt-tbl tbody tr.is-failing .vlt-name { color: var(--accent); }

/* --- the bar: one mark, one number ---------------------------------------
   Scaled to the largest drive so the column is a real comparison; the true
   share of the whole archive is printed beside it as an exact figure, because
   a bar normalised to the biggest shelf would otherwise imply USB3 is 100%
   of anything. */
.vlt-c-share { display: table-cell; }
.vlt-track {
  display: inline-block;
  vertical-align: middle;
  width: calc(100% - 58px);
  height: 9px;
  background: var(--panel-2);
}
.vlt-fill {
  display: block;
  height: 100%;
  background: var(--ink-2);
}
.vlt-tbl tbody tr.is-failing .vlt-fill { background: var(--accent); }
.vlt-pct {
  display: inline-block;
  vertical-align: middle;
  width: 50px;
  margin-left: 8px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
}

/* untiered / mixed / unknown never look like a number, because they are not */
.vlt-unk {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  color: var(--muted);
  font-style: normal;
}

/* --- totals --------------------------------------------------------------- */
.vlt-tbl tfoot th,
.vlt-tbl tfoot td {
  border-bottom: 0;
  border-top: var(--hair) solid var(--ink-2);
  padding-top: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink);
  white-space: nowrap;
}
.vlt-tbl tfoot th { letter-spacing: .04em; color: var(--muted); }

/* --- the caveat ----------------------------------------------------------- */
.vlt-foot {
  margin: 12px 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 96ch;
}

/* --- narrow ----------------------------------------------------------------
   Folded 780 → 760, the house mobile tier (MOBILE_SPEC §1).  780 was a
   twenty-pixel band of its own invention with nothing above it until 1080; the
   figures stack at 760 now, like every other block's do. */
@media (max-width: 760px) {
  /* .vlt-figs.is-2 above is a two-class selector and would outrank a bare
     .vlt-figs here, stranding two columns on a phone.  Match its specificity
     so the stack always wins. */
  .vlt-figs,
  .vlt-figs.is-1,
  .vlt-figs.is-2,
  .vlt-figs.is-3 { grid-template-columns: 1fr; }
  .vlt-fig  { padding-left: 0; padding-right: 0; }
  .vlt-fig + .vlt-fig {
    border-left: 0;
    border-top: var(--hair) solid var(--rule);
  }
  .vlt-head { flex-wrap: wrap; gap: 6px 12px; }
  .vlt-h { flex: 0 0 auto; }
  .vlt-hr { flex: 1 1 30px; }
  /* the tally was ellipsised down to "15 drives · 24,061 files · 26.0 T…";
     it is three figures, it can have the second line */
  .vlt-note { flex: 1 1 100%; order: 1; white-space: normal; overflow: visible; }
  .vlt-cap { font-size: 12.5px; }
  .vlt-fig-lead .vlt-cap { font-size: 13px; }
  .vlt-foot { font-size: 12.5px; }
}

/* --- the shelf on a phone -------------------------------------------------
   THE TABLE DOES NOT SURVIVE HERE AND IT SHOULD NOT PRETEND TO.  Seven columns
   with a 660px floor inside a 354px box meant you dragged the shelf sideways
   through a window two columns wide, with no edge, no shadow and no scrollbar
   to say so: measured at 390 the drive name and its tier could never be on
   screen together, and TiB / titles / one copy were off the right edge with
   nothing on the page hinting they existed.  Four of the seven figures were,
   in effect, not published on a phone.

   So each drive becomes one record of three lines — identity, bar, figures —
   and the horizontal scroll goes away entirely.  Nothing is dropped: all seven
   fields are on screen at once, and the bars, now running the full measure
   instead of 190px, compare BETTER than they did in the table.  The column
   headers are gone, so every figure carries its own unit; the cells hold bare
   numbers ("4.11", "402") and would be unreadable naked.

   The three unlabelled figure cells are addressed by position because vault.js
   gives all three the same class (`num`).  nth-of-type counts <td> only, and
   the row's first child is a <th>, so 3/4/5 are TiB / titles / one copy.

   Folded 620 → 760 with the block above it (MOBILE_SPEC §1).  It stays second
   so it keeps the last word, and the seven-column table now gives way to the
   stacked record across the whole mobile tier rather than only under 620 —
   which is right: at 700px the table was still four characters a column. */
@media (max-width: 760px) {
  .vlt-scroll { overflow-x: visible; margin-top: 18px; }
  .vlt-tbl { display: block; min-width: 0; }
  .vlt-tbl > caption { display: block; }

  /* the header row is the labelling this layout replaces with per-cell units */
  .vlt-tbl thead { display: none; }
  .vlt-tbl tbody, .vlt-tbl tfoot { display: block; }

  .vlt-tbl tbody tr,
  .vlt-tbl tfoot tr {
    position: relative;                 /* the containing block for the target */
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    grid-template-areas:
      "name  name name tier"
      "share share share share"
      "holds tib  ttl  sole";
    column-gap: 10px;
    row-gap: 4px;
    align-items: baseline;
    padding: 9px 0 10px;
    border-bottom: var(--hair) solid var(--rule);
  }
  .vlt-tbl tbody th,
  .vlt-tbl tbody td,
  .vlt-tbl tfoot th,
  .vlt-tbl tfoot td {
    display: block;
    border-bottom: 0;
    /* the base rules rule off every tfoot CELL; in a stacked row that draws a
       hairline through the middle of the totals.  The row carries it instead */
    border-top: 0;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .vlt-tbl .vlt-c-name       { grid-area: name; width: auto; overflow: visible; }
  .vlt-tbl .vlt-c-holds      { grid-area: holds; width: auto; }
  .vlt-tbl .vlt-c-share      { grid-area: share; width: auto; min-width: 0; }
  .vlt-tbl td:nth-of-type(3) { grid-area: tib;  width: auto; }
  .vlt-tbl td:nth-of-type(4) { grid-area: ttl;  width: auto; }
  .vlt-tbl td:nth-of-type(5) { grid-area: sole; width: auto; }
  .vlt-tbl .vlt-c-tier       { grid-area: tier; width: auto; text-align: right; }

  /* line 1 — the drive is the control.  Rather than inflate the name into a
     44px slab and pay 15 × 24px of air for it, the button reaches out over its
     whole record: the target becomes the three lines that describe the drive,
     which is the object being pressed anyway.  e.target for a click on the
     pseudo-element is the button itself, so vault.js's closest('.vlt-name')
     delegation is untouched. */
  .vlt-name {
    display: block;
    width: 100%;
    font-size: 14px;
    letter-spacing: .04em;
  }
  .vlt-name::after {
    content: '';
    position: absolute;
    inset: 0;
  }
  .vlt-tbl tbody .vlt-c-name { display: flex; align-items: baseline; gap: 0; }
  .vlt-tag { margin-left: 8px; flex: 0 0 auto; }
  .vlt-name:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; }
  .vlt-name:focus-visible { outline: none; }
  .vlt-c-tier::before {
    content: 'tier ';
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 11px;
  }
  /* "tier untiered" is not a sentence — the word stands on its own */
  .vlt-c-tier:has(.vlt-unk)::before { content: none; }

  /* line 2 — the bar, at the full measure of the page */
  .vlt-track { width: calc(100% - 58px); height: 10px; }

  /* line 3 — every figure says what it is */
  .vlt-tbl tbody td:nth-of-type(3),
  .vlt-tbl tbody td:nth-of-type(4),
  .vlt-tbl tbody td:nth-of-type(5),
  .vlt-tbl tfoot td:nth-of-type(3),
  .vlt-tbl tfoot td:nth-of-type(4),
  .vlt-tbl tfoot td:nth-of-type(5) {
    text-align: right;
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--ink);
  }
  .vlt-tbl td:nth-of-type(3)::after,
  .vlt-tbl td:nth-of-type(4)::after,
  .vlt-tbl td:nth-of-type(5)::after {
    color: var(--muted);
    font-size: 11px;
    letter-spacing: .04em;
  }
  .vlt-tbl td:nth-of-type(3)::after { content: ' TiB'; }
  .vlt-tbl td:nth-of-type(4)::after { content: ' titles'; }
  .vlt-tbl td:nth-of-type(5)::after { content: ' sole'; }
  .vlt-c-holds { font-size: 11.5px; font-family: var(--font-mono); letter-spacing: .04em; }
  .vlt-unk { font-size: 11px; }

  /* the totals line: the empty cells would otherwise hold three tracks open */
  .vlt-tbl tfoot tr {
    border-bottom: 0;
    border-top: var(--hair) solid var(--ink-2);
    padding-top: 10px;
    grid-template-areas: "name name tib tib" "ttl ttl sole sole";
  }
  .vlt-tbl tfoot .vlt-c-holds,
  .vlt-tbl tfoot .vlt-c-share,
  .vlt-tbl tfoot .vlt-c-tier { display: none; }
  .vlt-tbl tfoot .vlt-c-name { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
  .vlt-tbl tfoot td:nth-of-type(4) { text-align: left; }

  /* hover is not a state a finger can hold; the row already reads as one */
  .vlt-tbl tbody tr:hover td,
  .vlt-tbl tbody tr:hover th { background: transparent; }
}