/* ==========================================================================
   Pertimm — privacy.html (loaded after legal.css, which holds the shared
   policy layout). Signature: "At a glance" — what the site knows about you,
   and a retention ruler whose spectral bars show how long each item is kept.
   ========================================================================== */

.glance { border-bottom: 1px solid var(--line); }
.glance .section-head__title { max-width: 16ch; }

/* Four cards: contact, newsletter, logs, cookies */
.glance__grid { align-items: stretch; }
.glance-card { gap: .75rem; }
/* rows line up across cards (glyph · eyebrow · title · text · facts) */
@supports (grid-template-rows: subgrid) {
  .glance-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: .75rem; align-content: start; }
  .glance-card .glance-card__facts { margin-top: 0 !important; align-self: start; }
}
.glance-card__glyph { width: 2.5rem; height: 2.5rem; color: var(--fg-2); margin-bottom: .25rem; }
.glance-card .card__title { font-size: var(--step-2); }
.glance-card__facts { margin-top: auto !important; padding-top: .9rem; border-top: 1px solid var(--line); display: grid; gap: .55rem; }
.glance-card__facts div { display: grid; gap: .1rem; }
.glance-card__facts dt { font-size: var(--step--2); color: var(--fg-3); letter-spacing: .01em; }
.glance-card__facts dd { margin: 0; color: var(--fg); font-size: var(--step--1); line-height: 1.45; }

.glance-card--zero { background: radial-gradient(120% 90% at 100% 0%, rgb(10 20 51 / .9), transparent 65%), var(--surface); }
.glance-card__zero {
  font-size: 3.5rem; font-weight: 250; font-stretch: 118%; line-height: .8; letter-spacing: -.05em;
  width: fit-content; margin: 0;
  background: var(--text-spectrum); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 22px rgb(166 140 255 / .25));
}

/* Retention ruler ------------------------------------------------------- */
.ruler { margin-top: var(--space-2xl); padding-top: var(--space-l); border-top: 1px solid var(--line-2); }
.ruler__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; margin-bottom: var(--space-m); }
.ruler__title { font-size: var(--step-3); letter-spacing: var(--track-h3); line-height: 1.05; }
.ruler__note { color: var(--fg-3); font-size: var(--step--1); max-width: 40ch; }

.ruler { --label: minmax(9rem, 15rem); --value: minmax(10rem, 15rem); }
.ruler__axis, .ruler__row { display: grid; grid-template-columns: var(--label) minmax(0, 1fr) var(--value); column-gap: clamp(1rem, .5rem + 2vw, 2.5rem); align-items: center; }
.ruler__axis { font-size: var(--step--2); color: var(--fg-3); padding-bottom: .6rem; }
.ruler__ticks { grid-column: 2; position: relative; height: 1.2em; }
.ruler__ticks span { position: absolute; top: 0; translate: -50% 0; white-space: nowrap; }
.ruler__ticks span:first-child { translate: 0 0; }
.ruler__ticks span:last-child { translate: -100% 0; }
.ruler__rows { list-style: none; padding: 0; border-top: 1px solid var(--line); }
.ruler__row { padding-block: 1.05rem; border-bottom: 1px solid var(--line); }
.ruler__label { color: var(--fg); font-weight: 540; line-height: 1.3; }
.ruler__label small { display: block; font-weight: 400; color: var(--fg-3); font-size: var(--step--2); margin-top: .15rem; }
.ruler__value { color: var(--fg-2); font-size: var(--step--1); line-height: 1.4; }

.ruler__track {
  position: relative; height: 1.75rem;
  /* year ticks at 0 · 1 · 2 · 3 years */
  background:
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px) 0 50% / calc((100% - 1px) / 3) 9px repeat-x,
    linear-gradient(var(--line), var(--line)) 0 50% / 100% 1px no-repeat;
}
.ruler__bar {
  position: absolute; left: 0; top: 50%; height: 2px; width: max(6px, calc(var(--to, 1) * 100%)); translate: 0 -50%;
  background: var(--spectrum); border-radius: 2px; box-shadow: 0 0 14px rgb(166 140 255 / .55);
  transform-origin: left center;
  transition: transform 1.6s var(--ease-out); transition-delay: calc(var(--i, 0) * 140ms + 120ms);
}
.ruler__bar::after {               /* the light's head */
  content: ""; position: absolute; right: -4px; top: 50%; width: 9px; height: 10px; translate: 0 -50%;
  clip-path: var(--hex); background: #f0edf7; box-shadow: 0 0 12px #fff;
}
.ruler__row--open .ruler__bar { width: 100%; -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); }
.ruler__row--open .ruler__bar::after { display: none; }
.ruler__row--open .ruler__track::after {   /* open-ended: continues beyond the scale */
  content: ""; position: absolute; right: -2px; top: 50%; width: 7px; height: 7px; translate: 0 -50%;
  border-top: 1.5px solid var(--fg-3); border-right: 1.5px solid var(--fg-3); rotate: 45deg;
}

/* grow on first view (JS only; content never depends on it) */
.js:not(.no-reveal) .ruler:not(.was-inview) .ruler__bar { transform: scaleX(0); }
@media (prefers-reduced-motion: reduce) { .js .ruler .ruler__bar { transform: none; transition: none; } }

@media (max-width: 899px) {
  .ruler__axis { grid-template-columns: minmax(0, 1fr); }
  .ruler__ticks { grid-column: 1; }
  .ruler__row { grid-template-columns: minmax(0, 1fr) auto; row-gap: .7rem; }
  .ruler__label { grid-column: 1; }
  .ruler__value { grid-column: 2; text-align: right; max-width: 12rem; }
  .ruler__track { grid-column: 1 / -1; grid-row: 2; height: 1.1rem; }
}

/* Short-list of what is NOT collected (inside the prose) */
.not-list { list-style: none; padding: 0 !important; display: grid; gap: 0; border-top: 1px solid var(--line); }
.not-list li { display: flex; gap: .8rem; align-items: baseline; padding: .7rem 0; border-bottom: 1px solid var(--line); margin: 0 !important; }
.not-list svg { width: .8rem; height: .8rem; flex: none; color: var(--accent); translate: 0 .08em; }