/* The vault page's own shapes. No colour literal: every value is a token from tokens.css. */
:root { color-scheme: dark; }

/* Modifiers, never redefinitions: base.css owns .page-title, .panel and .nav a, and the checker says so. */
.vtitle { text-transform: none; letter-spacing: var(--tracking-tight); }
.vpanel { margin: 0 0 var(--s9); }
.vpanel > p { margin: 0 0 var(--s8); }
.vnav-link { padding-inline: var(--s3); }
.vnav { margin-block: var(--s6) var(--s11); }

/* A panel's body needs padding of its own once the head bar owns the top edge. */
.vpad { padding: var(--s8); }
.vend { align-items: flex-end; }

.vault { max-width: 82rem; margin: 0 auto; }

.hide { display: none; }

.row { display: flex; gap: var(--s6); flex-wrap: wrap; align-items: center; margin-top: var(--s8); }

.entries { list-style: none; margin: 0; padding: 0; }
.entries li {
  display: flex;
  gap: var(--s6);
  align-items: baseline;
  padding: var(--s7) 0;
  border-bottom: 1px solid var(--line);
}
.entries li:last-child { border-bottom: 0; }
.entries .name { min-width: 9rem; color: var(--muted); }
.entries code { word-break: break-all; }

.secret {
  font-family: var(--font-data);
  font-size: var(--fs-title);
  letter-spacing: 0.06em;
  word-break: break-all;
  color: var(--ok-ink);
  background: var(--ok-bg);
  border: 1px solid var(--ok-line);
  border-radius: var(--r-inline);
  padding: var(--s8);
}

.err { color: var(--alert-ink); min-height: 1.2em; }

#out-text, #diag { width: 100%; }