/* Shared styles for the SYVT legal pages (privacy, data deletion).

   Colour and shape come from the app itself — the launcher plate's violet
   gradient, the cream panels, and the mint/coral pair that means "right" and
   "wrong" all over the game (lib/ui/marks.dart, Brand and Ink). Kept in one
   file, linked from both pages, so they cannot drift apart.

   Manrope is self-hosted, the same file the game already ships: these are
   the privacy pages, and pulling a font from a third party to render them
   would hand that third party the reader's IP address. */

@font-face{
  font-family:'Manrope';
  src:url('manrope.woff2') format('woff2');
  font-weight:200 800; font-style:normal; font-display:swap;
}

:root{
  /* The plate, verbatim from Brand in ../SYVT/lib/ui/marks.dart */
  --violet:#6E42EE;       /* plate core, gradient stop 0   */
  --violet-mid:#2A1B84;   /* plate mid,  gradient stop .55 */
  --violet-deep:#08102C;  /* plate rim,  gradient stop 1   */
  --mint:#2DD4BF;
  --coral:#FB7185;
  --ink:#1E2646;
  --cream:#FFF7E6;
  /* derived, for prose and lines */
  --ink-soft:#5B628A;
  --surface:#FFFFFF;
  --ground:#F5F2FC;
  --line:#E4DEF5;
  /* the app's shapes: pill controls, generously rounded panels */
  --r-chip:10px;
  --r-card:20px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--ground);
  color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-weight:500;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}


a{color:var(--violet-mid)}
a:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:var(--r-chip)}

.wrap{max-width:820px;margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}

/* ---------- the violet band ----------
   The launcher plate, full bleed: one centred radial of the three brand stops,
   so the page opens on the same picture as the icon that links to it. The
   plate has no highlight, no second fill and no stroke, and its stops
   interpolate in sRGB - naming a colour space here would shift the mid violet
   and stop being the same picture. */
.hero{
  background:radial-gradient(68% 68% at 50% 50%,
                             var(--violet) 0%,var(--violet-mid) 55%,var(--violet-deep) 100%);
  background-color:var(--violet-deep);   /* what it clamps to, past the rim */
  color:var(--cream);
  padding-bottom:clamp(56px,9vw,96px);
}
.hero a{color:inherit}
.hero a:focus-visible{outline-color:var(--cream)}

.top{display:flex;align-items:center;gap:14px;padding-block:clamp(18px,3vw,30px)}
/* The wordmark alone is the link back to the game. The mark never stands
   beside the name, because the name already contains the funnel. */
.top .home{display:flex;align-items:center;text-decoration:none;color:inherit}

/* The wordmark: S, the funnel as the Y, VT — the app's own lockup. Tracking is
   0.22em and is never anything else. The size is set by a floor rather than by
   taste: the wordmark's minimum is a 24px cap height, and Manrope's caps are
   .72em, so 24 / .72 = 33.3px is the smallest legal size and 34px gives 24.5px.
   Under it the card closes up inside the Y and the letter stops reading as a
   funnel. line-height:1 keeps the 34px lockup from taking the body's leading. */
.name{
  display:inline-flex;align-items:baseline;line-height:1;
  /* max(), not 2.125rem alone: rem follows the reader's root size, so at a
     15px root the cap falls to 22.95px and the floor stops being one. */
  font-weight:800;font-size:max(34px,2.125rem);letter-spacing:.22em;
}
/* Manrope's capitals are exactly .72em tall, so that is the funnel's ink
   height and it stands on the baseline like a letter; its width is 96/88 of
   that, the drawn shape being 96 by 88 units and filling its box exactly. The
   SVG carries a viewBox and no intrinsic size, so the width is stated rather
   than left to the engine.

   The two margins are measured, not BRAND.md's .092em/.312em: those come from
   the Flutter render, where the placeholder gets a trailing letter-space that
   CSS never adds after an atomic inline. Solved here until each side of the Y
   matches the ink gap inside VT, which is what the app's own renders show. See
   the longer note in syvt.css. */
.name .y{height:.72em;width:calc(.72em * 96 / 88);margin-left:-.058em;margin-right:.1953em}
.name .tail{margin-right:-.22em}

.toplink{
  margin-left:auto;text-decoration:none;font-weight:700;
  font-size:.875rem;letter-spacing:.02em;
  border:1.5px solid rgba(255,247,230,.34);
  background:rgba(255,255,255,.10);
  border-radius:999px;padding:.6em 1.25em;white-space:nowrap;
}
.toplink:hover{background:rgba(255,255,255,.20);border-color:rgba(255,247,230,.6)}

/* ---------- page head, inside the band ---------- */
.pagehead{padding-block:clamp(10px,2vw,18px) 0}
.kicker{
  display:inline-block;
  font-weight:800;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--violet-deep);background:var(--cream);
  padding:.45em 1em;border-radius:var(--r-chip);
}
.pagehead h1{
  margin-top:.5em;
  font-size:clamp(1.9rem,5vw,2.6rem);font-weight:800;line-height:1.12;
  letter-spacing:-.02em;
}
.pagehead .updated{margin-top:.7em;color:rgba(255,247,230,.72);font-size:.875rem}
.pagehead .intro{margin-top:.8em;color:rgba(255,247,230,.86);max-width:58ch}

/* ---------- content ----------
   The cards ride up over the band, the way the game's panels sit on their
   scene. */
main{margin-top:calc(-1 * clamp(30px,5vw,56px));padding-bottom:8px}

.card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:0 10px 30px -12px rgba(42,27,132,.22);   /* #2A1B84, the plate mid */
  padding:clamp(22px,3.6vw,36px);
  margin-bottom:clamp(14px,2vw,20px);
}
.card h2{
  font-size:1.0625rem;font-weight:800;line-height:1.3;
  margin-top:2.2em;color:var(--ink);letter-spacing:-.005em;
}
.card > h2:first-child{margin-top:0}
.card p{color:var(--ink-soft);margin-top:.75em;max-width:66ch}
.card ul,.card ol{color:var(--ink-soft);margin-top:.75em;padding-left:1.4em;max-width:66ch}
.card li{margin-top:.5em}
.card li::marker{color:var(--violet)}
.card strong{color:var(--ink);font-weight:800}

/* Callout — the app's cream panel, flat, with a verdict-coloured edge. */
.note{
  background:var(--cream);
  border:1px solid #F2E4C4;
  border-left:4px solid var(--mint);
  border-radius:var(--r-chip);
  padding:clamp(16px,2.4vw,22px);margin-top:1.3em;
}
.note.warn{border-left-color:var(--coral)}
.note p{margin-top:0;color:#6B5A32}
.note p + p{margin-top:.6em}
.note strong{color:#4A3C1B}
.note a{color:var(--violet-mid)}

code{
  background:var(--ground);color:var(--ink);
  padding:.15em .55em;border-radius:8px;
  font-size:.9em;font-weight:700;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  white-space:nowrap;
}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding-block:clamp(22px,3.5vw,34px);
  margin-top:clamp(20px,3vw,36px);
}
footer .frow{display:flex;flex-wrap:wrap;align-items:center;gap:12px clamp(18px,3vw,30px)}
footer a{color:var(--ink-soft);text-decoration:none;font-size:.875rem;display:inline-block;padding-block:.5em}
footer a:hover{color:var(--violet-mid);text-decoration:underline}
footer .copy{margin-left:auto;color:var(--ink-soft);font-size:.875rem}

@media (max-width:560px){
  .top{flex-wrap:wrap}
  .toplink{margin-left:0;order:3;width:100%;text-align:center}
  footer .copy{margin-left:0;width:100%}
}