/* voltradar.app (voltradar/voltradar#265), from the approved mockups (research/site/mockups/src/site.css,
   branch 173-play-listing of voltradar/voltradar). Tokens are the kit's (research/design/kit/kit.css,
   palette Ρόδι, decisions/app.md 7δ): the 4 type sizes, 2 weights, the 4/8 spacing, tile radius 14,
   the M3 roles, shadow-1. Owner's choices of 2026-10-19 (infra#108): line height 24 only for long
   text, links underlined, screenshots without a phone frame.
   Fonts: the system's (7δ, 2026-10-05), so the site ships and fetches no font at all.
   Light and dark follow the device; there is no switch. */

:root {
  color-scheme: light dark;
  --vr-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --vr-t1: 22px; --vr-t1-lh: 28px;
  --vr-t2: 17px; --vr-t2-lh: 22px;
  --vr-t3: 15px; --vr-t3-lh: 20px; --vr-t3-lh-long: 24px;
  --vr-t4: 12px; --vr-t4-lh: 16px;
  --vr-s1: 4px; --vr-s2: 8px; --vr-s3: 12px; --vr-s4: 16px; --vr-s5: 24px; --vr-s6: 32px;
  --vr-r-tile: 14px;

  --primary: #7E1450;
  --surface: #FFFFFF; --surface-container: #F0EBEA;
  --on-surface: #1E1A1B; --on-surface-variant: #554A4E; --muted: #685C61;
  --outline-variant: #D8CCCF;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .10), 0 4px 14px rgba(0, 0, 0, .10);
}
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #DC8AB2;
    --surface: #141012; --surface-container: #1F191B;
    --on-surface: #EDE4E7; --on-surface-variant: #C6B8BD; --muted: #AE9FA5;
    --outline-variant: #3E3438;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 14px rgba(0, 0, 0, .30);
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Ι8: one opaque surface for every page */
body { margin: 0; background: var(--surface); color: var(--on-surface);
  font: 400 var(--vr-t3)/var(--vr-t3-lh) var(--vr-font); font-variant-numeric: tabular-nums; }
a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
img { max-width: 100%; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--vr-s4); }
.wrap--text { max-width: 680px; }
@media (min-width: 900px) { .wrap { padding: 0 var(--vr-s6); } }

/* ---------- header ---------- */
.site-head { display: flex; align-items: center; gap: var(--vr-s3); min-height: 64px; }
.brand { display: flex; align-items: center; gap: var(--vr-s2); text-decoration: none; color: var(--primary);
  font-size: var(--vr-t2); line-height: var(--vr-t2-lh); font-weight: 600; margin-right: auto; min-height: 48px; }
.brand img { width: 32px; height: 32px; border-radius: 22%; display: block; }
/* language switch = .vr-seg of the kit (iOS form); the 30 px pill sits in a 48 px tap row */
.vr-seg-hit { display: flex; align-items: center; min-height: 48px; }
.vr-seg { display: flex; padding: 2px; border-radius: 10px; background: var(--surface-container); }
.vr-seg a { display: flex; align-items: center; justify-content: center; min-width: 76px; height: 30px; padding: 0 var(--vr-s3);
  border-radius: 8px; font-size: var(--vr-t4); line-height: var(--vr-t4-lh); font-weight: 600; color: var(--on-surface-variant); text-decoration: none; }
.vr-seg a.is-on { background: var(--surface); color: var(--on-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

/* ---------- home ---------- */
.hero { padding-block: var(--vr-s5) var(--vr-s6); display: grid; gap: var(--vr-s5); }
.hero > * { min-width: 0; }
.hero h1 { margin: 0; font-size: var(--vr-t1); line-height: var(--vr-t1-lh); font-weight: 600; max-width: 26ch; }
.hero p { margin: var(--vr-s2) 0 0; color: var(--on-surface-variant); max-width: 44ch; }
.hero .stores { display: flex; flex-wrap: wrap; gap: var(--vr-s2) var(--vr-s4); margin-top: var(--vr-s5); color: var(--on-surface); }
.stores b { font-weight: 600; }
.stores span { color: var(--on-surface-variant); }
.shots { display: flex; gap: var(--vr-s3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--vr-s4);
  margin: 0 calc(-1 * var(--vr-s4)); padding: var(--vr-s1) var(--vr-s4) var(--vr-s4); scrollbar-width: none; }
.shots::-webkit-scrollbar { display: none; }
.shots:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.shots figure { margin: 0; flex: none; width: 200px; scroll-snap-align: start; }
.shots img { display: block; width: 100%; height: auto; border-radius: var(--vr-r-tile); box-shadow: var(--shadow-1); }
.shots figcaption { margin-top: var(--vr-s2); font-size: var(--vr-t4); line-height: var(--vr-t4-lh); color: var(--on-surface-variant); }
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--vr-s6); padding-block: var(--vr-s6); }
  .shots { margin: 0; padding: var(--vr-s1) 0 var(--vr-s4); overflow: visible; }
  .shots figure { width: 216px; }
}

/* the texts of the home page (research/site/home.*.md), under the hero */
.about { display: grid; gap: var(--vr-s5); padding-bottom: var(--vr-s6); }
.about h2 { margin: 0 0 var(--vr-s2); font-size: var(--vr-t2); line-height: var(--vr-t2-lh); font-weight: 600; }
.about p { margin: 0 0 var(--vr-s2); }
.about ul { margin: 0 0 var(--vr-s2); padding-left: 20px; }
.about li { margin: 0 0 var(--vr-s1); }
.about li::marker { color: var(--muted); }
@media (min-width: 900px) { .about { grid-template-columns: 1fr 1fr; gap: var(--vr-s5) var(--vr-s6); } }

/* links block = .vr-grouplabel + .vr-group + .vr-cell of the kit (settings cells) */
.vr-grouplabel { margin: 0 var(--vr-s4) 6px; font-size: var(--vr-t4); line-height: var(--vr-t4-lh); font-weight: 400; color: var(--on-surface-variant); }
.vr-group { border-radius: var(--vr-r-tile); background: var(--surface-container); overflow: hidden; }
.vr-cell { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vr-s1) var(--vr-s3); min-height: 52px;
  padding: var(--vr-s3) var(--vr-s4); position: relative; color: var(--on-surface); text-decoration: none; }
.vr-cell + .vr-cell::before { content: ""; position: absolute; top: 0; left: var(--vr-s4); right: 0; height: .5px; background: var(--outline-variant); }
.vr-cell__t { flex: 1; }
.vr-cell__v { color: var(--on-surface-variant); overflow-wrap: anywhere; }
.vr-cell svg { width: 16px; height: 16px; color: var(--muted); flex: none; }
.info { display: grid; gap: var(--vr-s5); padding-bottom: var(--vr-s6); }
@media (min-width: 900px) { .info { grid-template-columns: 1fr 1fr; gap: var(--vr-s6); } }

/* ---------- text pages ---------- */
.doc { padding-block: var(--vr-s3) var(--vr-s6); }
.back { display: inline-flex; align-items: center; gap: var(--vr-s1); min-height: 48px; color: var(--primary); font-weight: 600; text-decoration: none; }
.back svg { width: 20px; height: 20px; }
.doc h1 { margin: var(--vr-s2) 0 var(--vr-s1); font-size: var(--vr-t1); line-height: var(--vr-t1-lh); font-weight: 600; }
.doc .updated { margin: 0 0 var(--vr-s5); font-size: var(--vr-t4); line-height: var(--vr-t4-lh); color: var(--on-surface-variant); }
.doc h2 { margin: var(--vr-s6) 0 var(--vr-s2); font-size: var(--vr-t2); line-height: var(--vr-t2-lh); font-weight: 600; }
.doc h3 { margin: var(--vr-s5) 0 var(--vr-s2); font-size: var(--vr-t3); line-height: var(--vr-t3-lh); font-weight: 600; }
.doc p, .doc li { line-height: var(--vr-t3-lh-long); }
.doc p { margin: 0 0 var(--vr-s3); }
.doc ul, .doc ol { margin: 0 0 var(--vr-s3); padding-left: 20px; }
.doc li { margin: 0 0 var(--vr-s2); }
.doc li::marker { color: var(--muted); }
.doc b { font-weight: 600; }
.doc a { overflow-wrap: anywhere; }
/* «In short» = a group in a page (kit: groups use surface-container) */
.short { background: var(--surface-container); border-radius: var(--vr-r-tile); padding: var(--vr-s4) var(--vr-s4) var(--vr-s2); margin: var(--vr-s5) 0; }
.short h2 { margin-top: 0; }

/* ---------- not found ---------- */
.notfound { padding-block: var(--vr-s6); }
.notfound h1, .notfound h2 { margin: 0 0 var(--vr-s2); font-size: var(--vr-t1); line-height: var(--vr-t1-lh); font-weight: 600; }
.notfound p { margin: 0 0 var(--vr-s5); }

/* ---------- footer ---------- */
.site-foot { border-top: .5px solid var(--outline-variant); padding-block: var(--vr-s5) var(--vr-s6); font-size: var(--vr-t4); line-height: var(--vr-t4-lh); color: var(--on-surface-variant); }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 0 var(--vr-s4); margin-bottom: var(--vr-s2); }
.site-foot nav a { display: inline-flex; align-items: center; min-height: 48px; font-size: var(--vr-t3); line-height: var(--vr-t3-lh); color: var(--on-surface); }
.site-foot nav a[aria-current="page"] { color: var(--primary); font-weight: 600; }
.site-foot p { margin: 0 0 var(--vr-s1); }