/* ---------------------------------------------------------------
   The public terms page.
   Terms you have to sign in to read are terms nobody can weigh
   before agreeing to them, so this is a plain file under /welcome/
   — the one public folder — rather than a screen in the app. It says
   the same three sections as web/js/views/terms.js, in the same
   order and the same words; change one and change the other. These
   styles are its own, copied from privacy.html rather than shared,
   for the same reason as the landing page's: /css stays behind
   sign-in, and this page is read by somebody deciding whether to
   sign in at all. A file rather than a <style> block because the
   Content-Security-Policy allows no inline style (app/security.py).
   --------------------------------------------------------------- */
:root {
  --bg:        #f7f1e6;
  --card:      #fffdf8;
  --ink:       #2a2520;
  --muted:     #686052;
  --line:      #e7ddca;
  --brand:     #3f7d52;
  --brand-ink: #2f6840;
  --surface-2: #f3ecde;
  --herb-soft: #e6efe2;
  --clay:      #ae5727;
  /* The same colours as channels, for the handful of places that need one
     at an alpha, and the blends that used to be written inline. Both are
     here rather than `color-mix()` because this page is the one a crawler
     and a television both land on — see the head of css/rasoi-theme.css. */
  --bg-rgb:    247, 241, 230;
  --brand-rgb: 63, 125, 82;
  --serif: "Newsreader", Georgia, serif;
  --sans:  "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --shadow-sm: 0 1px 2px rgba(63,49,30,.05), 0 6px 18px rgba(63,49,30,.06);
}

/* The same palette after dark. This page is outside the auth gate and can't
   reach /css or ask the server anything, so it carries its own copy of the
   tokens, kept in step with web/css/theme-dark.css — which is the original,
   and where the reasoning for each value lives. The attribute is set by the
   inline script in <head> from the same localStorage key the app writes, so
   someone who chose dark inside Rasoi gets a dark page here too, and a
   first-time visitor gets whatever their device says. With JavaScript off
   the attribute is never set and this stays the light page it has always
   been. */
:root[data-theme="dark"] {
  --bg:        #15120f;
  --card:      #211d1a;
  --ink:       #edebe7;
  --muted:     #a39e96;
  --line:      #33302b;
  --brand:     #3b834e;
  --brand-ink: #95d7a2;
  --surface-2: #1b1815;
  --herb-soft: #1c3422;
  --clay:      #ce7443;
  --bg-rgb:    21, 18, 15;
  --brand-rgb: 59, 131, 78;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}
/* The washes behind the page: mid-lightness colours laid over paper, which
   need a little more of themselves to register over near-black. */
[data-theme="dark"] .glow {
  background:
    radial-gradient(58% 46% at 84% -6%, rgba(173, 86, 34, 0.22), transparent 62%),
    radial-gradient(50% 44% at 4% 2%,   rgba(51, 115, 68, 0.2), transparent 60%);
}
/* Google's own dark treatment for the sign-in button. Its light one is
   specified down to the hex and so is this, which is why these three don't
   come from the palette — and a white button would be the single brightest
   thing on the page by a distance. */
[data-theme="dark"] .gbtn { background: #131314; color: #e3e3e3; border-color: #8e918f; }


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--sans); color: var(--ink);
  background: var(--bg); line-height: 1.55; overflow-x: hidden;
}
a { color: inherit; }
.wrap { width: min(760px, 100% - 40px); margin-inline: auto; }
.glow {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 46% at 84% -6%, rgba(192,97,47,.17), transparent 62%),
    radial-gradient(50% 44% at 4% 2%,   rgba(63,125,82,.16), transparent 60%);
}
@media (max-width: 560px) { .wrap { width: min(760px, 100% - 32px); } }

/* ---------------- nav ---------------- */
header.nav {
  position: sticky; top: 0; z-index: 30;
  backdrop-filter: saturate(140%) blur(10px);
  background: rgba(var(--bg-rgb), 0.8);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; gap: 18px; height: 66px; }
.brand {
  font-family: var(--serif); font-size: 1.4rem; font-weight: 600;
  letter-spacing: -.015em; text-decoration: none;
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px;
}
.brand .pan {
  width: 32px; height: 32px; border-radius: 10px; background: var(--brand);
  color: #fff; display: grid; place-items: center;
  box-shadow: 0 3px 10px rgba(63,125,82,.35);
}
.pan svg { display: block; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 26px; }

/* ---------------- dark mode, in the nav ----------------
   Rasoi starts light and there is one press to say otherwise, on the pages a
   stranger reads as well as inside the app. These pages are outside the gate —
   they cannot ask the server anything — but they are on the same origin, so
   they write the same `rasoi.theme` mirror the app reads, and somebody who
   turns the pitch dark finds the app dark when they sign in.

   Both drawings ship and CSS shows one. /js/theme-boot.js paints the attribute
   before the first frame and wires the button at DOMContentLoaded, so an icon
   chosen in script would visibly correct itself on every load for anyone who
   reads dark. Every rule names both classes: `.theme-btn svg` would be a class
   plus an element, which out-specifies a bare `.theme-ico-sun` and puts the
   moon and the sun on screen together. */
.theme-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card); color: var(--muted); cursor: pointer;
  transition: color .18s ease, border-color .18s ease;
}
.theme-btn:hover { color: var(--ink); border-color: var(--brand); }
.theme-btn .theme-ico { display: none; width: 18px; height: 18px; }
.theme-btn .theme-ico-moon { display: block; }
[data-theme="dark"] .theme-btn .theme-ico-moon { display: none; }
[data-theme="dark"] .theme-btn .theme-ico-sun { display: block; }

.gbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  background: #fff; color: #3c4043; border: 1px solid #dadce0; border-radius: 11px;
  padding: 9px 16px; min-height: 44px; font-family: var(--sans); font-size: .9rem; font-weight: 600;
  text-decoration: none; box-shadow: 0 1px 2px rgba(60,64,67,.1);
  transition: box-shadow .18s ease, transform .18s ease; white-space: nowrap;
}
.gbtn:hover { box-shadow: 0 6px 20px rgba(60,64,67,.18); transform: translateY(-2px); }
.gbtn svg { flex: none; }

/* ---------------- page ---------------- */
main { padding: 46px 0 20px; }
@media (max-width: 720px) { main { padding: 30px 0 10px; } }
/* 44px, like every other control. It was 22 — the height of the words —
   and it is the only way back on a page someone reached from a footer. */
.back {
  display: inline-flex; align-items: center; gap: 7px; text-decoration: none;
  min-height: 44px; padding-inline: 10px; margin-inline: -10px;
  color: var(--muted); font-size: .9rem; font-weight: 500;
  transition: color .18s ease, gap .18s ease;
}
.back:hover { color: var(--ink); gap: 11px; }
h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(2.2rem, 5vw, 3rem);
  line-height: 1.05; letter-spacing: -.03em; margin: 16px 0 0; text-wrap: balance;
}
.sub { font-size: 1.08rem; color: var(--muted); margin: 12px 0 0; }
h2 {
  font-family: var(--serif); font-weight: 600; font-size: clamp(1.5rem, 3vw, 1.9rem);
  line-height: 1.15; letter-spacing: -.022em; margin: 0;
}
.kicker { font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--clay); }

.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow-sm); padding: 8px 24px; margin-top: 26px;
}
@media (max-width: 560px) { .panel { padding: 4px 18px; } }
.promise { display: flex; gap: 14px; align-items: flex-start; padding: 20px 0; }
.promise + .promise { border-top: 1px solid var(--line); }
.promise .ico {
  width: 30px; height: 30px; border-radius: 10px; flex: none; margin-top: 1px;
  background: var(--herb-soft); color: var(--brand-ink); display: grid; place-items: center;
}
.promise h3, .leaves h3 { margin: 0 0 4px; font-size: 1.02rem; font-weight: 700; }
.promise p, .leaves p { margin: 0; color: var(--muted); font-size: .95rem; }

section.block { margin-top: 52px; }
.lead { color: var(--muted); margin: 10px 0 0; }
.leaves { display: grid; gap: 18px; }
.leaf { display: flex; gap: 14px; align-items: flex-start; padding: 20px 0; }
.leaf + .leaf { border-top: 1px solid var(--line); }
.leaf .ico {
  width: 30px; height: 30px; border-radius: 10px; flex: none; margin-top: 1px;
  background: var(--surface-2); color: var(--brand-ink); display: grid; place-items: center;
  font-size: .95rem;
}

/* ---------------- disclosures ---------------- */
/* The full record, one tap under the summary. Every heading inside is in the
   document whether or not it is open — `<details>` hides with the box, so a
   crawler, a consent screen and tests/test_legal.py all still read it. */
details.disclosure { margin-top: 26px; }
details.disclosure > summary {
  display: flex; align-items: center; gap: 16px; cursor: pointer;
  list-style: none; padding: 20px 24px;
  background: var(--card); border: 1px solid var(--line); border-radius: 20px;
  box-shadow: var(--shadow-sm);
}
details.disclosure > summary::-webkit-details-marker { display: none; }
details.disclosure > summary:hover { border-color: var(--brand); }
details.disclosure > summary:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 3px;
}
details.disclosure > summary h2 { font-size: clamp(1.25rem, 2.4vw, 1.55rem); margin-top: 4px; }
details.disclosure .chev {
  margin-left: auto; flex: none; color: var(--muted);
  display: grid; place-items: center; transition: transform .18s ease;
}
details.disclosure[open] .chev { transform: rotate(180deg); }
details.disclosure[open] > summary { border-radius: 20px 20px 0 0; border-bottom-color: transparent; }
details.disclosure > .lead { margin: 0; padding: 0 24px; }
details.disclosure[open] > .lead,
details.disclosure[open] > .panel {
  background: var(--card); border-inline: 1px solid var(--line);
}
details.disclosure[open] > .lead { padding-top: 4px; }
details.disclosure[open] > .panel {
  margin-top: 0; border-radius: 0 0 20px 20px;
  border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm);
}
@media (max-width: 560px) {
  details.disclosure > summary { padding: 16px 18px; gap: 12px; }
  details.disclosure > .lead { padding-inline: 18px; }
}

/* ---------------- contact ---------------- */
.reach {
  margin-top: 52px; background: var(--herb-soft);
  border: 1px solid rgba(var(--brand-rgb), 0.22);
  border-radius: 20px; padding: 28px 26px;
}
.reach h2 { font-size: clamp(1.35rem, 2.6vw, 1.7rem); }
.reach p { color: var(--muted); margin: 8px 0 0; }
.reach .mail {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 18px;
  background: var(--brand); color: #fff; border-radius: 12px;
  padding: 12px 20px; font-size: 1rem; font-weight: 600; text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.reach .mail:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(63,125,82,.3); }

footer {
  border-top: 1px solid var(--line); margin-top: 56px; padding: 24px 0 36px;
  color: var(--muted); font-size: .86rem;
}
.foot-in { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; }
.foot-in .brand { font-size: 1.12rem; }
.foot-in .right { margin-left: auto; display: flex; flex-wrap: wrap; gap: 2px 12px; }
/* 44px, the same as the landing page's footer and for the same reason —
   these were 21px tall. Padding buys the height; the negative inline margin
   keeps the row reading as it did. */
.foot-in a.flink {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 10px; margin-inline: -10px;
  text-decoration: none;
}
.foot-in a.flink:hover { color: var(--ink); text-decoration: underline; }
/* A middot between items. Five short labels all set at the same weight read as
   one run, and the row says where each one starts but not where the last one
   ended.

   **The two sides of the dot are built out of different pieces, and they have
   to be added up rather than assumed.** Each link carries `padding: 0 10px`
   with `margin-inline: -10px` — negative on *both* sides — to buy a 44px touch
   target without moving the words. So:

     left  = this rule's 12px margin
     right = 10px (own right padding) − 10px (own right margin)
             + 12px (the row's column gap)
             − 10px (next item's left margin) + 10px (its left padding)  = 12px

   which is why the column gap above is 12px and not the 2px it was. Read the
   right-hand side as "the gap, and everything else cancels". At 2px the dot sat
   12px after one word and 2px before the next, which reads as `Privacy ·Terms`
   — correct in the box model and wrong on the page. Change one number here and
   the other one moves.

   `inline-block` stops the hover underline from running through it, and it is
   never on the last item, so no wrapped row ends in a dangling dot. */
.foot-in .foot-links > *:not(:last-child)::after,
.foot-in .right > *:not(:last-child)::after {
  content: "·";
  display: inline-block;
  margin-left: 12px;
  text-decoration: none;
  opacity: .55;
}
/* The page you're standing on, in the row above: text rather than an anchor,
   so five public pages don't each carry a self-link. Same box as .flink so the
   row's rhythm and its 44px targets are unchanged — opacity rather than a
   fainter token because this file carries its own palette twice and a fifth
   colour would be a fifth thing to keep in step. */
.foot-in .fhere {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 10px; margin-inline: -10px;
  opacity: .62;
}
@media (max-width: 560px) { .foot-in .right { margin-left: 0; } }
.foot-love {
  margin: 18px 0 0; font-family: var(--serif); font-style: italic;
  font-size: .95rem; color: var(--muted);
  display: flex; align-items: flex-start; gap: 7px;
}
/* the heart sits on the first line, not adrift between two when it wraps */
.foot-love .heart { color: var(--clay); flex: none; margin-top: .32em; }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 8px; }
