/* calculator.css: /calculator and /es/calculator (floor B, the archive).
   Page CSS only; tokens come from site.css. Brand teal stays for links and focus, gold for decor. */

/* ---- Hero ---------------------------------------------------------------------------------------- */
body[data-floor="archive"] .calc-hero { padding-block-end: var(--s-6); }
body[data-floor="archive"] .calc-hero .page-head { padding-block-start: var(--s-5); }
body[data-floor="archive"] .calc-back {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: var(--t-subhead);
}
body[data-floor="archive"] .calc-back a {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: var(--target);
}
body[data-floor="archive"] .calc-badge { margin: 0 0 var(--s-3); }

/* "VHS tape rewound itself" (owner ask, 2026-09-22): one short tracking jitter that settles into the normal
   layout. It plays once (0.9 s, well under the 5 s auto-motion limit) and never under reduced motion or with the
   site's Motion toggle off. The scene's overflow: clip keeps the shift from causing sideways scroll. */
body[data-floor="archive"] .calc-scanlines {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: repeating-linear-gradient(to bottom,
    rgb(154 255 243 / 0.08) 0 1px, transparent 2px 4px);
}
@keyframes calc-vhs-jitter {
  0%   { transform: translateX(0);    filter: blur(0) saturate(1) contrast(1); }
  6%   { transform: translateX(-8px); filter: blur(1.5px) saturate(1.8) contrast(1.3); }
  12%  { transform: translateX(6px);  filter: blur(1px) saturate(1.6) contrast(1.2); }
  20%  { transform: translateX(-4px); filter: blur(0.6px) saturate(1.3); }
  30%  { transform: translateX(3px);  filter: blur(0.3px) saturate(1.1); }
  45%  { transform: translateX(-1px); filter: none; }
  100% { transform: translateX(0);    filter: none; }
}
@keyframes calc-vhs-scan {
  0%   { opacity: 0.55; }
  60%  { opacity: 0.16; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  html:not([data-motion="off"]) body[data-floor="archive"] .calc-vhs {
    animation: calc-vhs-jitter 0.9s cubic-bezier(0.2, 0.6, 0.25, 1) both;
  }
  html:not([data-motion="off"]) body[data-floor="archive"] .calc-scanlines {
    animation: calc-vhs-scan 0.9s ease-out both;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-floor="archive"] .calc-scanlines { display: none; }
}
html[data-motion="off"] body[data-floor="archive"] .calc-scanlines { display: none; }

/* ---- Why ----------------------------------------------------------------------------------------- */
/* Measure: at most about 75 characters per line on desktop (ch tracks each element's own font size). */
body[data-floor="archive"] .calc-body {
  max-width: min(var(--max-text), 56ch);
  color: var(--ink-2);
}
body[data-floor="archive"] .calc-cards { margin-block: var(--s-5) 0; }
@media (min-width: 48rem) {
  body[data-floor="archive"] .calc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
body[data-floor="archive"] .calc-cards h3 { margin-block-end: var(--s-2); }
body[data-floor="archive"] .calc-cards :is(p, si-p) { color: var(--ink-2); }
body[data-floor="archive"] .calc-note {
  max-width: min(var(--max-text), 62ch);
  margin-block: var(--s-4) 0;
}

/* ---- Registry sample: signature, units line, summary (the app's Function Reference order) ---------- */
body[data-floor="archive"] .calc-registry {
  display: grid;
  gap: var(--s-3);
  grid-template-columns: minmax(0, 1fr);
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 56rem) {
  body[data-floor="archive"] .calc-registry { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
body[data-floor="archive"] .calc-registry li {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  min-width: 0;
  margin: 0;
  padding: var(--s-3) var(--s-4);
  background: var(--noir-2);
  border: 1px solid var(--hairline);
  border-inline-start: 3px solid var(--deco-gold-line);
  border-radius: var(--radius-1);
}
body[data-floor="archive"] .calc-registry .tag { justify-self: start; }
body[data-floor="archive"] .calc-registry code {
  font-size: 0.95em;
  color: var(--ink-1);
  overflow-wrap: anywhere;
}
body[data-floor="archive"] .calc-registry__units {
  font-size: var(--t-subhead);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums lining-nums;
  overflow-wrap: anywhere;
}
body[data-floor="archive"] .calc-registry__summary {
  font-size: var(--t-subhead);
  color: var(--ink-3);
}