/* =====================================================================================================
   security.css: Floor 2, The Vault (/trust/security/ and /es/confianza/seguridad/). Page-only rules; every selector is
   scoped under body[data-floor="vault"]. Tokens come from /assets/site.css. Gold (--deco-*) is decoration
   only: borders, rules and dial rings, never text colour. No new text colours, no 100vw, no infinite motion.
   ===================================================================================================== */

/* ---- Page head: the glance pairs beside the vault door ---- */
body[data-floor="vault"] .vault-head .page-head { padding-block-start: 0; }
body[data-floor="vault"] .vault-glance__title {
  margin: 0;
  font-size: var(--t-title3);
  letter-spacing: 0.08em;
}
body[data-floor="vault"] .vault-glance { max-width: 34rem; }
body[data-floor="vault"] .vault-glance .pair > dd { white-space: nowrap; }
/* The discrete Auto-Lock list wraps between figures (each .fig stays whole), so its row splits 2 : 3 instead of
   letting an "auto" value column starve the label. */
body[data-floor="vault"] .vault-glance .vault-glance__pair--list { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
body[data-floor="vault"] .vault-glance .pair > dd.vault-glance__list { white-space: normal; text-align: end; }
body[data-floor="vault"] .vault-glance__group { white-space: nowrap; }
body[data-floor="vault"] .vault-glance__stamp { max-width: 34rem; margin: 0; }
body[data-floor="vault"] .vault-head .scene__art img { max-width: 22rem; }
@media (max-width: 55.99rem) {
  body[data-floor="vault"] .vault-head .scene__art img { max-width: 13rem; }
}

/* ---- "On this floor" directory: brass floor-button list (plain links, ordered) ---- */
body[data-floor="vault"] .vault-index {
  margin-block-start: var(--s-7);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--deco-gold-line);
}
body[data-floor="vault"] .vault-index__title {
  margin: 0 0 var(--s-3);
  font-size: var(--t-title3);
  letter-spacing: 0.08em;
}
body[data-floor="vault"] .vault-index__list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
  gap: var(--s-2) var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: vault-floor;
}
body[data-floor="vault"] .vault-index__list > li { counter-increment: vault-floor; min-width: 0; display: flex; }
body[data-floor="vault"] .vault-index__list > li > a { flex: 1 1 auto; min-width: 0; }
body[data-floor="vault"] .vault-index__list a {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--target);
  padding: 0.35rem 0.75rem 0.35rem 0.35rem;
  color: var(--ink-1);
  text-decoration: none;
  line-height: 1.3;
  text-align: start;
  border: 1px solid var(--deco-gold-line);
  border-radius: var(--radius-2);
  background: linear-gradient(180deg, rgb(134 171 167 / 0.08), transparent);
}
@media (min-width: 48rem) {
  body[data-floor="vault"] .vault-index__list { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
}
body[data-floor="vault"] .vault-index__list a::before {   /* brass button with the room number (decor) */
  content: counter(vault-floor);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-family: var(--font-ui);
  font-size: var(--t-footnote);
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink-1);
  background: radial-gradient(circle at 35% 30%, #111B1D, #05080A 70%);
  border: 1.5px solid var(--deco-gold-hi);
}
@media (max-width: 47.99rem) {
  body[data-floor="vault"] .vault-index__list a { font-size: var(--t-subhead); }
  body[data-floor="vault"] .vault-index__list a::before { width: 1.75rem; height: 1.75rem; }
}
body[data-floor="vault"] .vault-index__list a:hover { border-color: var(--brand-accent); text-decoration: underline; }

/* ---- Rooms (sections) ---- */
body[data-floor="vault"] .vault-room { scroll-margin-block-start: var(--s-6); }
body[data-floor="vault"] .vault-room__head { max-width: 48rem; margin-block-end: var(--s-6); }
body[data-floor="vault"] .vault-room__head .lede { margin-block-start: var(--s-3); }
body[data-floor="vault"] .vault-room__foot { max-width: 55ch; margin-block-start: var(--s-5); color: var(--ink-2); }
body[data-floor="vault"] .vault-room__path { margin-block-start: var(--s-2); font-size: var(--t-subhead); color: var(--ink-2); }
body[data-floor="vault"] .vault-split { align-items: start; }
body[data-floor="vault"] .vault-split + .card-row,
body[data-floor="vault"] .vault-ledger + .vault-split { margin-block-start: var(--s-6); }
body[data-floor="vault"] .vault-split h3 { margin-block-end: 0; }
body[data-floor="vault"] .vault-split ul { margin: 0; }
body[data-floor="vault"] .vault-split ul > li + li { margin-block-start: var(--s-1); }

/* Card rows: four short cards wrap two by two on tablets, one column on phones (equal heights from site.css). */
@media (min-width: 48rem) and (max-width: 71.99rem) {
  body[data-floor="vault"] .vault-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 72rem) {
  body[data-floor="vault"] .vault-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body[data-floor="vault"] .vault-cards--wide { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
body[data-floor="vault"] .vault-cards h3,
body[data-floor="vault"] .vault-keys h3 { font-size: var(--t-title3); }
body[data-floor="vault"] .vault-keys { align-items: stretch; }
body[data-floor="vault"] .card :is(p, si-p) { overflow-wrap: break-word; }

/* ---- Auto-Lock dial: each choice is a brass stop; the default says so in words (colour is not the cue) ---- */
body[data-floor="vault"] .vault-dial {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
body[data-floor="vault"] .vault-dial__stop {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: var(--target);
  padding: 0.3rem 0.85rem;
  font-weight: 600;
  color: var(--ink-1);
  border: 1px solid var(--deco-gold-line);
  border-radius: 999px;
  background: var(--noir-2);
  white-space: nowrap;
}
body[data-floor="vault"] .vault-dial__stop--default {
  border: 2px solid var(--deco-gold-hi);
  box-shadow: inset 0 0 0 3px var(--noir-2), inset 0 0 0 4px var(--deco-gold-faint);
}
body[data-floor="vault"] .vault-dial__note { font-weight: 500; color: var(--ink-2); }

/* ---- Example ledger (figure vault) and the honest note ---- */
body[data-floor="vault"] .vault-example { margin: 0; }
body[data-floor="vault"] .vault-example figcaption { margin-block-end: var(--s-3); color: var(--ink-2); }
body[data-floor="vault"] .vault-example .pair > dd { letter-spacing: 0.12em; }
body[data-floor="vault"] .vault-note {
  position: relative;
  padding: var(--s-3) var(--s-4) var(--s-3) calc(var(--s-4) + 4px);
  background: var(--noir-2);
  border: 1px solid var(--mark-2);
  border-radius: var(--radius-1);
}
body[data-floor="vault"] .vault-note::before {               /* gold bar (decor; the label carries the meaning) */
  content: "";
  position: absolute;
  inset-block: -1px;
  inset-inline-start: -1px;
  width: 5px;
  background: var(--deco-gold);
  border-radius: var(--radius-1) 0 0 var(--radius-1);
}
body[data-floor="vault"] .vault-note__label {
  margin: 0 0 var(--s-2);
  font-weight: 700;
  color: var(--ink-1);
}
body[data-floor="vault"] .vault-note > :is(p, si-p):last-child { margin-block-end: 0; color: var(--ink-2); }

/* ---- Numbered steps (72-hour key recovery) ---- */
body[data-floor="vault"] .vault-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: vault-step;
}
body[data-floor="vault"] .vault-steps > li {
  position: relative;
  min-height: 2.5rem;
  padding-inline-start: 3.25rem;
  counter-increment: vault-step;
}
body[data-floor="vault"] .vault-steps > li + li { margin-block-start: var(--s-3); }
body[data-floor="vault"] .vault-steps > li::before {
  content: counter(vault-step);
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: -0.1rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  font-weight: 700;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink-1);
  background: radial-gradient(circle at 35% 30%, #111B1D, #05080A 70%);
  border: 1.5px solid var(--deco-gold-hi);
}

/* ---- What our server keeps: a ledger of label / description rows on one grid ---- */
body[data-floor="vault"] .vault-ledger {
  margin: 0;
  padding: 0;
  border-block-start: 1px solid var(--deco-gold-line);
}
body[data-floor="vault"] .vault-ledger__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-1) var(--s-5);
  padding-block: var(--s-3);
  border-block-end: 1px solid var(--hairline);
}
@media (min-width: 48rem) {
  body[data-floor="vault"] .vault-ledger__row { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); }
}
body[data-floor="vault"] .vault-ledger__row > dt { margin: 0; font-weight: 650; color: var(--ink-1); }
body[data-floor="vault"] .vault-ledger__row > dd { margin: 0; max-inline-size: 52ch; color: var(--ink-2); }

/* ---- Comparison card ---- */
body[data-floor="vault"] .vault-compare { padding: clamp(0.75rem, 0.5rem + 1vw, 1.5rem); }
body[data-floor="vault"] .vault-compare .compare { margin-block-end: var(--s-3); }
body[data-floor="vault"] .vault-compare .compare caption { padding-inline: 0.75rem; }
body[data-floor="vault"] .vault-compare .compare thead th:not(:first-child) { width: 36%; }
body[data-floor="vault"] .vault-compare .compare td { overflow-wrap: break-word; }
body[data-floor="vault"] .vault-compare > .fine-print { margin: 0; padding-inline: 0.75rem; }
body[data-floor="vault"] .vault-src {
  display: block;
  margin-block-start: var(--s-2);
  font-size: var(--t-footnote);
  line-height: 1.5;
  color: var(--ink-3);
}
body[data-floor="vault"] .vault-src a { overflow-wrap: anywhere; }
@media (pointer: coarse), (max-width: 47.99rem) {
  body[data-floor="vault"] .vault-src a {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: var(--target);
  }
  body[data-floor="vault"] .vault-compare td > a { display: inline-block; padding: 0.7rem 0.5rem; margin: -0.7rem -0.5rem; }
}
/* On narrow phones the two answers stack (same row order, labels from data-label), instead of two
   cramped columns. */
@media (max-width: 29.98rem) {
  body[data-floor="vault"] .vault-compare .compare tr { grid-template-columns: minmax(0, 1fr); }
  body[data-floor="vault"] .vault-compare .compare td { padding-block: 0.5rem; }
  body[data-floor="vault"] .vault-compare .compare td + td { border-block-start: 1px dashed var(--hairline); }
}

/* ---- Increase contrast / forced colours: solid borders, no decorative bars ---- */
@media (prefers-contrast: more) {
  body[data-floor="vault"] .vault-index__list a,
  body[data-floor="vault"] .vault-dial__stop { border-color: var(--mark-2); background: transparent; }
  body[data-floor="vault"] .vault-note::before { background: var(--mark-2); }
}
@media (forced-colors: active) {
  body[data-floor="vault"] .vault-index__list a,
  body[data-floor="vault"] .vault-dial__stop,
  body[data-floor="vault"] .vault-note { border: 1px solid CanvasText; }
  body[data-floor="vault"] .vault-note::before { display: none; }
}
@media print {
  body[data-floor="vault"] .vault-index { display: none; }
}