/* The legal pages: privacy, terms, accessibility, in both languages.
   -------------------------------------------------------------------------
   Loaded AFTER assets/site.css, not instead of it. The header, the footer, the
   colour tokens, dark mode, the theme button and the mobile menu all come from
   there, so these pages carry the same chrome as the rest of the site and
   cannot drift away from it — this file used to own its own smaller copy of
   all of that, and it did drift.

   What is left here is only what a page of prose needs and a landing page does
   not: a narrower column, reading-sized type, and the three blocks these pages
   use.

   Everything below is scoped to `main`. The narrow column especially: `.wrap`
   is what centres the header and the footer too, so narrowing it unscoped
   would pull those in to 720px on the legal pages alone and give away the
   whole point of sharing the chrome.
   ------------------------------------------------------------------------- */

main{
  /* Clear the fixed header. site.css sets --head-h and the scroll-padding that
     matches it; this is the same number applied as layout rather than scroll. */
  padding:calc(var(--head-h) + clamp(28px,5vw,48px)) 0 clamp(48px,8vw,88px);
}

main .wrap{max-width:720px}

main{line-height:1.75}

main h1{
  font-family:'Rubik',sans-serif;
  font-size:clamp(1.8rem,4.4vw,2.6rem);font-weight:900;line-height:1.2;
  margin-bottom:10px;
}
main h2{
  font-family:'Rubik',sans-serif;
  font-size:clamp(1.15rem,2.2vw,1.4rem);font-weight:800;line-height:1.35;
  margin:clamp(28px,4vw,40px) 0 10px;
}
main p,main li{color:var(--ink-soft)}
main p{margin-bottom:14px}
main strong{color:var(--ink);font-weight:600}
main ul,main ol{margin:0 0 16px;padding-inline-start:22px;display:grid;gap:7px}
main li::marker{color:var(--accent)}
main a{color:var(--accent-down);text-underline-offset:3px}
main a:hover{color:var(--accent)}
:root[data-theme="dark"] main a{color:var(--accent)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) main a{color:var(--accent)}
}

/* The date line under the title, and the "this is a translation" line under
   the contact box — same treatment, both are quiet metadata about the page
   rather than part of it. */
main .updated{color:var(--ink-soft);font-size:.9rem;margin-bottom:clamp(26px,4vw,38px)}
main .contact + .updated{margin:clamp(20px,3vw,28px) 0 0}

/* The one-line summary at the top. */
main .lead{
  font-size:1.05rem;color:var(--ink);
  background:var(--bg-soft);border:1px solid var(--line);border-radius:14px;
  padding:18px 20px;margin-bottom:clamp(26px,4vw,36px);
}

/* Who to write to. Boxed because on a page of continuous prose the one thing a
   reader arrives looking for should be findable without reading. */
main .contact{
  border:2px solid var(--ink);border-radius:16px;background:var(--surface);
  padding:20px 22px;margin-top:clamp(28px,4vw,40px);
}
main .contact p:last-child{margin-bottom:0}

/* The cookie tables. One row per thing stored on the reader's device, which
   is more columns than a phone has room for, so the table scrolls inside its
   own box rather than pushing the page sideways. `caption-side:top` keeps the
   "which category is this" line attached to the table it labels. */
main .table-scroll{
  overflow-x:auto;
  margin:0 0 18px;
  border:1px solid var(--line);border-radius:14px;
  background:var(--surface);
  -webkit-overflow-scrolling:touch;
}
main table{
  border-collapse:collapse;width:100%;
  font-size:.9rem;line-height:1.55;
  min-width:520px;
}
main caption{
  caption-side:top;text-align:start;
  padding:12px 14px 0;font-size:.85rem;color:var(--ink-soft);
}
main th,main td{
  text-align:start;vertical-align:top;
  padding:11px 14px;border-bottom:1px solid var(--line);
  color:var(--ink-soft);
}
main thead th{
  font-family:'Rubik',sans-serif;font-weight:800;font-size:.82rem;
  color:var(--ink);background:var(--bg-soft);
  white-space:nowrap;
}
main tbody tr:last-child th,main tbody tr:last-child td{border-bottom:0}
main tbody th{font-weight:600;color:var(--ink)}
/* Cookie names are Latin identifiers inside Hebrew prose; without isolation
   the bidi algorithm drags the punctuation to the wrong end. */
main td code,main th code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.85em;direction:ltr;unicode-bidi:isolate;
  background:var(--bg-soft);border-radius:5px;padding:1px 5px;
  overflow-wrap:anywhere;
}

/* Any value that must be filled in before a page is legally usable. All six
   pages are clear of these now; the rule stays so the next draft is obvious on
   sight rather than only to whoever greps for it. */
main .todo{
  background:#FFF3BF;color:#6B4E00;font-weight:600;
  padding:1px 7px;border-radius:6px;
  box-decoration-break:clone;-webkit-box-decoration-break:clone;
}
:root[data-theme="dark"] main .todo{background:#4A3A12;color:#FFE9A3}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) main .todo{background:#4A3A12;color:#FFE9A3}
}