/* Shared styles for the QIZU legal pages.
   Colour, type and shape are taken from the app's own design system
   (lib/core/theme.dart and SPEC §9) so the pages read as part of QIZU. Kept in
   one file, linked from both pages, so they cannot drift apart.

   Nunito is self-hosted rather than loaded from Google's CDN: 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:'Nunito';
  src:url('fonts/Nunito-SemiBold.ttf') format('truetype');
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Nunito';
  src:url('fonts/Nunito-Bold.ttf') format('truetype');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Nunito';
  src:url('fonts/Nunito-ExtraBold.ttf') format('truetype');
  font-weight:800; font-style:normal; font-display:swap;
}

:root{
  /* QizuPalette, verbatim */
  --teal:#00796B;
  --teal-container:#B8F2EA;
  --on-teal-container:#00332D;
  --mint-container:#CFF7E8;
  --surface:#FFFFFF;
  --surface-low:#F6FAF9;
  --surface-container:#EFF5F4;
  --ink:#0F2321;
  --ink-variant:#4E625E;
  --outline:#7A928D;
  --outline-variant:#D6E2DF;
  /* SPEC §9 shape */
  --r-chip:8px;
  --r-tile:16px;
  --r-sheet:28px;
}

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

body{
  background:var(--surface-low);
  color:var(--ink);
  /* The app ships Nunito at 600/700/800 only, and sets body text to w600. */
  font-family:'Nunito',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-weight:600;
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%;height:auto}
a{color:var(--teal)}
a:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:var(--r-chip)}

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

/* ---------- header ---------- */
.top{display:flex;align-items:center;gap:14px;padding-block:clamp(20px,3vw,32px)}
/* Mark + wordmark are one link back to the site root. */
.top .home{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit}
.top img{width:48px;height:48px;border-radius:var(--r-tile)}
.top .name{font-weight:800;font-size:1.25rem;letter-spacing:.01em}
.top .toplink{
  margin-left:auto;color:var(--teal);text-decoration:none;font-weight:700;
  font-size:.875rem;letter-spacing:.02em;
  border:1.5px solid var(--outline-variant);background:var(--surface);
  /* stadium buttons, per SPEC §9 */
  border-radius:999px;padding:.6em 1.25em;white-space:nowrap;
}
.top .toplink:hover{border-color:var(--teal);background:var(--teal-container)}

/* ---------- page head ---------- */
.pagehead{padding-block:clamp(10px,2vw,20px) clamp(20px,3vw,28px)}
.kicker{
  display:inline-block;
  font-weight:700;font-size:.6875rem;letter-spacing:.5px;text-transform:uppercase;
  color:var(--on-teal-container);background:var(--teal-container);
  padding:.45em 1em;border-radius:var(--r-chip);
}
.pagehead h1{
  margin-top:.6em;
  font-size:clamp(1.9rem,4.6vw,2.5rem);font-weight:800;line-height:1.15;
}
.pagehead .updated{margin-top:.7em;color:var(--ink-variant);font-size:.875rem}
.pagehead .intro{margin-top:.85em;color:var(--ink-variant);max-width:60ch}

/* ---------- content ----------
   Elevation ~0 everywhere (SPEC §9): outlines, never shadows. */
.card{
  background:var(--surface);
  border:1.5px solid var(--outline-variant);
  border-radius:var(--r-tile);
  padding:clamp(20px,3.5vw,34px);
  margin-bottom:clamp(14px,2vw,20px);
}
.card h2{
  font-size:1rem;font-weight:700;line-height:1.3;
  margin-top:2.2em;color:var(--ink);
}
.card > h2:first-child{margin-top:0}
.card p{color:var(--ink-variant);margin-top:.75em;max-width:66ch}
.card ul,.card ol{color:var(--ink-variant);margin-top:.75em;padding-left:1.4em;max-width:66ch}
.card li{margin-top:.5em}
.card li::marker{color:var(--teal)}
.card strong{color:var(--ink);font-weight:800}

/* Callout — mint container, flat. */
.note{
  background:var(--mint-container);
  border:1.5px solid var(--outline-variant);
  border-radius:var(--r-tile);
  padding:clamp(16px,2.4vw,22px);margin-top:1.3em;
}
.note p{margin-top:0;color:var(--on-teal-container)}
.note p + p{margin-top:.6em}
.note a{color:var(--on-teal-container)}

code{
  background:var(--surface-container);color:var(--ink);
  padding:.15em .55em;border-radius:var(--r-chip);
  font-size:.9em;font-weight:700;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* ---------- footer ---------- */
footer{
  border-top:1.5px solid var(--outline-variant);
  padding-block:clamp(24px,3.5vw,36px);
  margin-top:clamp(28px,4vw,48px);
}
footer .frow{display:flex;flex-wrap:wrap;align-items:center;gap:14px clamp(18px,3vw,30px)}
footer img{width:28px;height:28px;border-radius:var(--r-chip)}
footer a{color:var(--ink-variant);text-decoration:none;font-size:.875rem;display:inline-block;padding-block:.5em}
footer a:hover{color:var(--teal);text-decoration:underline}
footer .copy{margin-left:auto;color:var(--ink-variant);font-size:.875rem}

@media (max-width:560px){
  footer .copy{margin-left:0;width:100%}
}