/*
 * The Fern Basket — the chrome every page shares.
 *
 * Tokens, fonts, the top bar and theme toggle, the logo mark with its rings,
 * the watermarks, the page title and the footer. index.html, PrivacyPolicy/
 * and delete-account/ all link this file FIRST, before anything of their own,
 * so that the three pages look like one site. A change to any of these
 * things is made here, once, never in a page. tools/check-chrome.mjs fails
 * if a page's top bar, watermarks, logo mark or footer markup drifts from
 * the others.
 *
 * Colours: --bg/--surface/--primary/--accent/--text/--rule/--on-accent/
 * --checked match the app's src/theme/tokens.ts (bg, surface, primary,
 * accent, text, surfaceBorder, onPrimary, checkedText). --muted/--line/--hair
 * are this design's own. Small text uses --accent, never --primary: in dark
 * mode --primary is only 3.65:1 on the background, --accent is 8.97:1.
 */
:root {
  --bg:#F6F1E8; --surface:#FFFDF9; --primary:#17513B; --accent:#17513B; --on-accent:#F3F8F2;
  --text:#17251E; --muted:#5A6B62; --checked:#797369;
  --rule:#EAE1CF; --line:rgba(23,81,59,.18); --hair:rgba(23,37,30,.12);
  --logo-filter:none;
  --shadow:0 18px 40px -28px rgba(23,37,30,.4);
  --shadow-paper:0 2px 0 rgba(23,37,30,.05), 0 32px 56px -30px rgba(23,37,30,.5);
  /* One typeface, the app's: Plus Jakarta Sans in the four weights it loads
     (500/600/700/800). Headings are 800 with the app's negative tracking. */
  --font-body:'Plus Jakarta Sans', Helvetica, Arial, sans-serif;
  --page-x:clamp(16px,3.4vw,44px);   /* the side gutter every page uses */
}
html[data-theme="dark"] {
  --bg:#0E1713; --surface:#17211C; --primary:#2E7D5B; --accent:#6FC79B; --on-accent:#0E1713;
  --text:#EAF0EC; --muted:#9DB0A6; --checked:#918B80;
  --rule:#26332B; --line:rgba(111,199,155,.26); --hair:rgba(234,240,236,.14);
  --logo-filter:brightness(0) invert(1) sepia(1) saturate(4) hue-rotate(95deg) brightness(1.1);
  --shadow:0 18px 40px -28px rgba(0,0,0,.6);
  --shadow-paper:0 2px 0 rgba(0,0,0,.3), 0 32px 56px -30px rgba(0,0,0,.9);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --bg:#0E1713; --surface:#17211C; --primary:#2E7D5B; --accent:#6FC79B; --on-accent:#0E1713;
    --text:#EAF0EC; --muted:#9DB0A6; --checked:#918B80;
    --rule:#26332B; --line:rgba(111,199,155,.26); --hair:rgba(234,240,236,.14);
    --logo-filter:brightness(0) invert(1) sepia(1) saturate(4) hue-rotate(95deg) brightness(1.1);
    --shadow:0 18px 40px -28px rgba(0,0,0,.6);
    --shadow-paper:0 2px 0 rgba(0,0,0,.3), 0 32px 56px -30px rgba(0,0,0,.9);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; }
/* The page colour is on html only: it paints the canvas, under the fixed
   watermark layer. A background on body would paint over that layer. */
html { background:var(--bg); }
html, body { margin:0; padding:0; }
body { color:var(--text); font-family:var(--font-body); font-weight:500; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
a { color:var(--accent); text-decoration:none; }
a:hover { color:var(--accent); }
:focus-visible { outline:2px solid var(--primary); outline-offset:3px; border-radius:6px; }

@keyframes fb-in   { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes fb-sway { 0%,100% { transform:rotate(-1.6deg) translateY(-3px); } 50% { transform:rotate(1.6deg) translateY(3px); } }
@keyframes fb-ring { 0% { transform:scale(.8); opacity:0; } 20% { opacity:.6; } 100% { transform:scale(1.45); opacity:0; } }

.skip-link { position:absolute; left:-9999px; }
.skip-link:focus {
  left:16px; top:16px; z-index:10; background:var(--surface); color:var(--text);
  display:inline-flex; align-items:center; min-height:44px;
  padding:12px 16px; border:1px solid var(--hair); border-radius:10px;
}

/* ---- Watermarks: the logo mark, large and faint, behind every page.
   One fixed layer the size of the viewport, so the marks sit in the same
   places on every page and at every scroll position, and are never cut off
   by a section edge. z-index -1 puts it above the page background and below
   all content; nothing else may paint its own background over it (a surface
   band is the one deliberate exception). Opacity stays under .07 so nothing
   on top loses contrast; the blur keeps them reading as texture. ----------- */
.watermarks { position:fixed; inset:0; overflow:hidden; pointer-events:none; z-index:-1; }
.watermarks img { position:absolute; max-width:none; filter:var(--logo-filter) blur(.6px); }
.watermarks .wm-a { left:-20%; bottom:-28%; width:92vh; opacity:.055; transform:rotate(-14deg); }
.watermarks .wm-b { right:-10%; top:-24%;  width:60vh; opacity:.05;  transform:rotate(26deg); }
.watermarks .wm-c { left:38%;  top:-18%;   width:34vh; opacity:.04;  transform:rotate(-32deg); }
.watermarks .wm-d { right:-6%; bottom:6%;  width:40vh; opacity:.045; transform:rotate(12deg); }
.watermarks .wm-e { left:6%;   top:34%;    width:22vh; opacity:.04;  transform:rotate(38deg); }

/* ---- Top bar ------------------------------------------------------------ */
.topbar {
  position:relative; z-index:2; display:flex; align-items:baseline;
  justify-content:space-between; gap:16px;
  padding-bottom:clamp(8px,1.4vh,14px); border-bottom:1px solid var(--hair);
  font-size:clamp(10px,.95vw,13px); font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.topbar .region { position:relative; color:var(--muted); }
.topbar .region:hover { color:var(--accent); }
/* The site's few links and the theme toggle, on the right */
.topnav { display:flex; align-items:baseline; gap:24px; flex:none; }
.topnav a { position:relative; color:var(--muted); }
.topnav a:hover { color:var(--accent); }
.topnav a::before { content:""; position:absolute; left:-8px; right:-8px; top:50%; transform:translateY(-50%); height:48px; }
.theme-toggle {
  position:relative; font:inherit; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
  background:none; border:none; padding:0; cursor:pointer;
  border-bottom:1px solid var(--line);
}
.theme-toggle:hover { color:var(--accent); }
/* Both labels are small by design; the hit area is widened to 48px with an
   overlay rather than padding, so the targets comply without the bar growing. */
.theme-toggle::before, .topbar .region::before {
  content:""; position:absolute; left:-8px; right:-8px; top:50%;
  transform:translateY(-50%); height:48px;
}
@media (max-width: 560px) {
  .topbar { gap:10px; }
  .topbar .region { min-width:0; }
  .topnav { gap:16px; }
}

/* ---- The logo mark with its rings, above every page's title ------------- */
.mark { position:relative; width:clamp(64px,7vw,96px); aspect-ratio:1; display:grid; place-items:center; flex:0 0 auto; }
.mark .ring { position:absolute; inset:-6%; border-radius:50%; border:1px solid var(--line); animation:fb-ring 5s ease-out infinite; }
.mark .ring:nth-child(2) { animation-delay:1.7s; }
.mark .ring:nth-child(3) { animation-delay:3.4s; }
.mark img { position:relative; width:100%; height:100%; object-fit:contain; filter:var(--logo-filter); animation:fb-sway 8s ease-in-out infinite; }

/* ---- Headings, the same on every page ----------------------------------- */
h1 { margin:clamp(16px,2vh,24px) 0 0; font:800 40px/48px var(--font-body); letter-spacing:-.02em; text-wrap:balance; animation:fb-in .7s ease-out both; }
h2 { margin:0 0 24px; font:800 clamp(26px,3.2vw,40px)/1.15 var(--font-body); letter-spacing:-.02em; }
h3 { margin:0 0 8px; font-weight:800; letter-spacing:-.01em; font-size:clamp(17px,1.5vw,21px); line-height:1.3; }
@media (min-width: 768px) { h1 { font-size:56px; line-height:64px; } }

/* ---- A plain page (privacy, delete account): the same gutter, top bar and
   watermarks as the homepage's hero, then the text. ----------------------- */
.page {
  position:relative; color:var(--text);
  padding:clamp(12px,2.4vh,30px) var(--page-x) 0;
}
.page-head { display:flex; flex-direction:column; align-items:flex-start; padding-top:clamp(20px,3vh,32px); }
.page-head .overline { margin:clamp(16px,2vh,24px) 0 0; }
.page-head .overline + h1 { margin-top:8px; }
.page-head .page-meta { margin:8px 0 0; font-size:14px; line-height:20px; color:var(--muted); animation:fb-in .7s ease-out .08s both; }

/* ---- Footer ------------------------------------------------------------- */
.footer {
  position:relative; z-index:1; display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:10px;
  padding:24px var(--page-x); border-top:1px solid var(--hair);
  font-size:clamp(10px,.95vw,13px); font-weight:600; letter-spacing:.04em; color:var(--muted);
}
.footer-inner {
  width:100%; max-width:1000px; margin:0 auto;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
}
.footer-links { display:flex; flex-wrap:wrap; gap:8px; margin:0 -8px; }
.footer-links a {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:48px; min-height:48px; padding:0 8px; /* 8px gap = inactive buffer */
}
@media (max-width: 560px) {
  .footer { justify-content:flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}