/* ═══════════════════════════════════════════════════════════════════════════
   Kettle — Slate & Signal
   The app's design tokens (lib/theme/lucia_theme.dart, lucia_glass.dart,
   lucia_backdrop.dart) ported for the web. Shared by the legal pages so they
   cannot drift apart; index.html carries its own copy inline because it also
   needs the phone-mock chrome.

   A cool slate ramp carries all structure; one signal blue is the only brand
   hue, reserved for actions, focus and emphasis.
   ═══════════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Slate — the neutral ramp */
  --slate50:#F6F7F9;--slate100:#EBEEF2;--slate200:#DFE4EA;--slate300:#CFD6DF;
  --slate400:#98A3B0;--slate500:#6E7987;--slate600:#4E5866;--slate700:#3A4351;
  --slate800:#232C3A;--slate900:#141A22;--slate950:#0C0F14;

  /* Signal — the only brand hue, one ramp */
  --blue900:#0E3A73;--blue800:#15509B;--blue700:#1A5CAD;--blue600:#2C74D6;
  --blue500:#3B82D9;--blue400:#5A9BF0;--blue300:#8FBAF5;

  /* Semantic, dark mode */
  --bg:#0C0F14;--surface:#141922;--surface-v:#1F2630;
  --fg:#EDF1F6;--muted:#8C97A5;--dim:#6E7987;
  --primary:#5A9BF0;--primary-2:#2C74D6;--secondary:#45AEBF;
  --outline:#2E3745;--outline-v:#232B36;
  --success:#28B189;--warning:#E5A426;--danger:#F06A5D;

  /* Glass — fills tuned so the composite over the backdrop still clears
     text contrast at the worst case the backdrop can produce */
  --glass-panel:rgba(20,25,34,.56);
  --glass-chrome:rgba(20,25,34,.68);
  --glass-subtle:rgba(255,255,255,.06);
  --glass-border:rgba(255,255,255,.10);
  --glass-sheen:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.01));
  --glass-shadow:0 8px 22px rgba(0,0,0,.34);

  /* Radius — LuciaRadius */
  --r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:20px;--r-xxl:24px;--r-pill:999px;

  /* Brand gradient — one hue at two steps. A two-hue sweep is the single
     loudest "generated" signal in a UI, so this stays tonal. */
  --brand:linear-gradient(135deg,var(--blue700),var(--blue500));
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

/* The full-bleed mesh gradient every glass surface is frosting — the same five
   lobes LuciaBackdrop paints, plus its vignette and scrim. Attached to the
   viewport so the wash stays put while content scrolls over it. */
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--fg);line-height:1.6;-webkit-font-smoothing:antialiased;
  overflow-x:clip;
  background-color:var(--slate950);
  background-image:
    linear-gradient(rgba(12,15,20,.42),rgba(12,15,20,.42)),
    radial-gradient(125% 100% at 50% 50%,transparent 38%,rgba(12,15,20,.42) 100%),
    radial-gradient(46% 42% at 18% 8%,rgba(26,92,173,.60),transparent 70%),
    radial-gradient(40% 36% at 90% 26%,rgba(14,140,158,.42),transparent 70%),
    radial-gradient(44% 40% at 6% 58%,rgba(21,80,155,.50),transparent 70%),
    radial-gradient(50% 44% at 86% 80%,rgba(35,44,58,.86),transparent 70%),
    radial-gradient(38% 34% at 42% 98%,rgba(59,130,217,.34),transparent 70%);
  background-attachment:fixed;
  background-repeat:no-repeat;
  background-size:cover;
}

a{color:inherit;text-decoration:none}
button{font:inherit;border:none;cursor:pointer;background:none;color:inherit}
svg{display:block}
::selection{background:rgba(90,155,240,.28)}

.container{max-width:1180px;margin:0 auto;padding:0 1.25rem}
.prose-wrap{max-width:48rem;margin:0 auto}

/* ── Nav (chrome tier — content scrolls under, so a heavier blur) ─────────── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;padding:.875rem 0;
  background:transparent;border-bottom:1px solid transparent;
  transition:background .3s,border-color .3s;
}
nav.scrolled{
  background:var(--glass-chrome);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);backdrop-filter:blur(24px) saturate(1.4);
  border-bottom-color:var(--glass-border);
}
.nav-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.logo{display:flex;align-items:center;gap:.625rem;font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.mark{width:1.875rem;height:1.875rem;display:flex;align-items:center;justify-content:center}
.mark img{width:100%;height:100%;object-fit:contain}
.dot{color:var(--primary)}
.back{font-size:.8125rem;font-weight:600;color:var(--muted);transition:color .2s}
.back:hover{color:var(--fg)}

/* ── Page header ──────────────────────────────────────────────────────────── */
main{padding:7rem 0 4rem}
.page-header{margin-bottom:2rem}
.eyebrow{
  display:inline-flex;align-items:center;gap:.5rem;padding:.375rem .8125rem;
  background:var(--glass-subtle);border:1px solid var(--glass-border);border-radius:var(--r-pill);
  font-size:.625rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1.25rem;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
}
h1{font-size:clamp(2rem,5vw,3rem);font-weight:800;line-height:1.06;letter-spacing:-.035em;margin-bottom:.625rem}
.updated{font-size:.8125rem;color:var(--muted)}

/* ── Prose, on a sheet of glass ───────────────────────────────────────────── */
.prose{
  color:var(--muted);font-size:.9375rem;line-height:1.75;
  background:var(--glass-panel);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  border:1px solid var(--glass-border);border-radius:var(--r-xxl);
  box-shadow:var(--glass-shadow);
  padding:1.75rem;position:relative;
}
.prose::before{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:var(--glass-sheen);pointer-events:none;
}
.prose>*{position:relative}
.prose p{margin-bottom:1rem}
.prose h2{
  font-size:1.0625rem;font-weight:700;color:var(--fg);letter-spacing:-.02em;
  margin-top:2.25rem;margin-bottom:.75rem;padding-top:2.25rem;
  border-top:1px solid var(--glass-border);
}
.prose h2:first-of-type{border-top:none;padding-top:0;margin-top:1.25rem}
.prose h3{font-size:.9375rem;font-weight:700;color:var(--fg);letter-spacing:-.01em;margin-top:1.5rem;margin-bottom:.5rem}
.prose ul{list-style:none;padding:0;margin-bottom:1rem}
.prose ul li{padding-left:1.25rem;position:relative;margin-bottom:.375rem}
.prose ul li::before{content:"";position:absolute;left:0;top:.66em;width:.375rem;height:.375rem;background:var(--primary);border-radius:50%}
.prose strong{color:var(--fg);font-weight:600}
.prose a{color:var(--primary);text-decoration:underline;text-underline-offset:2px;transition:color .2s}
.prose a:hover{color:var(--blue300)}

/* ── Footer ───────────────────────────────────────────────────────────────── */
footer{padding:2.25rem 0;border-top:1px solid var(--outline-v);color:var(--muted);font-size:.8125rem}
.foot{display:flex;flex-direction:column;gap:1rem;align-items:center;text-align:center}
.flinks{display:flex;gap:1.5rem}
footer a{transition:color .2s}
footer a:hover{color:var(--fg)}
.flinks a[aria-current="page"]{color:var(--fg);font-weight:600}

@media (min-width:768px){.foot{flex-direction:row;justify-content:space-between;text-align:left}}
@media (max-width:600px){main{padding:6rem 0 3rem}.prose{padding:1.25rem}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}nav,.back,.prose a,footer a{transition:none}}