/* ============================================================================
   legal-doc.css — the legal-document PROSE styling, factored out of theme.css so
   ANY oomny theme can render a legal page in its own brand.

   WHY this is its own file: the per-app branded legal pages (oomny.eu/<app>/privacy)
   are generated on the umbrella from ONE shared source, but wrapped in the APP's own
   layout + theme.css (so the page wears the app's chrome, not oomny-blue). The
   .legal-* rules used to live only in the umbrella theme.css, so an app theme had no
   document styling; factoring them here lets the app-legal render load
   [app theme.css → chrome] + [this → legal prose] + [shared tokens.css → structure].

   THEME-AGNOSTIC by construction: every selector consumes only colour vars an oomny
   theme is guaranteed to define (--ink/--soft/--bg-2/--surface/--line/--accent/
   --accent-text) plus the structural tokens.css vars (--mono/--radius/--dur-1/
   --ease-out). The two vars the umbrella theme has but an app theme may NOT
   (--soft-2, --line-soft) are read with a var(name, fallback) so they resolve to a
   derived colour on a theme that lacks them — the umbrella, which defines both, is
   unaffected. This file is umbrella-only (like legal-doc.js); per-app product sites
   never ship or reference it.
   ============================================================================ */
.legal-doc{max-width:46rem;margin-inline:auto;
  padding:clamp(2.2rem,6vw,3.6rem) clamp(1.15rem,5vw,2rem) clamp(3.5rem,8vw,5.5rem)}

/* ---- document header: eyebrow, title, lede, dated meta ---- */
.legal-head{padding-bottom:clamp(1.4rem,4vw,2rem);margin-bottom:clamp(1.6rem,4vw,2.4rem);
  border-bottom:1px solid var(--line)}
.legal-eyebrow{font-family:var(--mono);font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-text);margin:0 0 .9rem}
.legal-head h1{font-size:clamp(2.05rem,6.5vw,2.95rem);line-height:1.05;letter-spacing:-.024em;
  font-weight:680;color:var(--ink);margin:0}
.legal-lede{margin:.95rem 0 0;max-width:38ch;font-size:clamp(1.05rem,2.6vw,1.2rem);
  line-height:1.5;color:var(--soft)}
.legal-meta{display:flex;flex-wrap:wrap;gap:.3rem 2rem;margin:clamp(1.2rem,3vw,1.6rem) 0 0}
.legal-meta div{display:flex;flex-direction:column;gap:.1rem}
.legal-meta dt{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--soft-2,color-mix(in srgb,var(--soft) 70%,var(--bg-2)))}
.legal-meta dd{margin:0;font-size:.95rem;font-weight:600;color:var(--ink)}

/* ---- body shell: phone = single column (ToC stacks above prose) ---- */
.legal-body{display:block}

/* ---- table of contents: phone = collapsible <details>, big tap targets ---- */
.legal-toc{margin:0 0 clamp(1.8rem,5vw,2.4rem);border:1px solid var(--line);
  border-radius:var(--radius);background:var(--bg-2);overflow:hidden}
.legal-toc>summary{cursor:pointer;list-style:none;padding:.95rem 1.15rem;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--soft-2,color-mix(in srgb,var(--soft) 70%,var(--bg-2)));display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  min-height:44px}
.legal-toc>summary::-webkit-details-marker{display:none}
.legal-toc>summary::after{content:"";width:.6rem;height:.6rem;flex:none;
  border-right:2px solid var(--accent-text);border-bottom:2px solid var(--accent-text);
  transform:rotate(45deg);transition:transform var(--dur-1) var(--ease-out)}
.legal-toc[open]>summary::after{transform:rotate(-135deg)}
.legal-toc nav{padding:.3rem .55rem .7rem}
.legal-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.legal-toc li{margin:0}
.legal-toc a{display:flex;gap:.7rem;align-items:baseline;padding:.6rem .6rem;min-height:44px;
  align-items:center;border-radius:10px;text-decoration:none;color:var(--soft);
  font-size:.95rem;line-height:1.35;transition:background var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.legal-toc a::before{counter-increment:toc;content:counter(toc);flex:none;
  font-family:var(--mono);font-size:11px;font-weight:600;color:var(--soft-2,color-mix(in srgb,var(--soft) 70%,var(--bg-2)));
  min-width:1.4em;text-align:right}
.legal-toc a:hover,.legal-toc a:focus-visible{background:var(--surface);color:var(--ink)}
.legal-toc a[aria-current="true"]{color:var(--accent-text);background:var(--surface)}
.legal-toc a[aria-current="true"]::before{color:var(--accent-text)}

/* ---- prose: numbered, anchored sections ---- */
.legal-prose{min-width:0}
.legal-prose>section{scroll-margin-top:5.5rem;padding-top:clamp(1.4rem,4vw,2rem)}
.legal-prose>section:first-child{padding-top:0}
.legal-prose>section+section{border-top:1px solid var(--line-soft,color-mix(in srgb,var(--line) 60%,transparent));margin-top:clamp(1.4rem,4vw,2rem)}
.legal-prose h2{display:flex;gap:.7rem;align-items:baseline;
  font-size:clamp(1.32rem,3.4vw,1.6rem);line-height:1.2;letter-spacing:-.014em;font-weight:660;
  color:var(--ink);margin:0 0 .9rem;scroll-margin-top:5.5rem}
.legal-num{flex:none;font-family:var(--mono);font-size:.72em;font-weight:600;color:var(--accent-text);
  background:color-mix(in srgb,var(--accent) 12%,transparent);
  border-radius:8px;padding:.18em .55em;line-height:1.2;align-self:flex-start;position:relative;top:.12em}
.legal-prose h3{font-size:clamp(1.05rem,2.6vw,1.18rem);line-height:1.3;font-weight:640;
  color:var(--ink);margin:1.6rem 0 .5rem;letter-spacing:-.008em}
.legal-prose p,.legal-prose li{color:var(--soft);font-size:clamp(1rem,2.5vw,1.06rem);
  line-height:1.7}
.legal-prose p{margin:0 0 1rem;max-width:64ch}
.legal-prose p strong,.legal-prose li strong{color:var(--ink);font-weight:650}
.legal-prose ul,.legal-prose ol{margin:0 0 1.15rem;padding-left:1.3rem;max-width:64ch}
.legal-prose li{margin:0 0 .55rem;padding-left:.2rem}
.legal-prose ul li::marker{color:var(--accent-text)}
.legal-prose a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--accent-text) 40%,transparent);
  transition:text-decoration-color var(--dur-1) var(--ease-out)}
.legal-prose a:hover{text-decoration-color:var(--accent-text)}

/* a scoped "this applies to some apps" callout — the device that keeps a superset
   policy honest (a clause true only for sync apps / AI apps gets visually marked). */
.legal-scope{margin:0 0 1.15rem;padding:.95rem 1.1rem;border-radius:var(--radius);
  background:var(--bg-2);border:1px solid var(--line);
  border-left:3px solid var(--accent-text)}
.legal-scope p{margin:0;font-size:.98rem;color:var(--soft)}
.legal-scope p:not(:last-child){margin-bottom:.5rem}
.legal-scope strong{color:var(--ink)}
.legal-scope .legal-scope-tag{display:inline-flex;align-items:center;gap:.4rem;
  font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-text);margin-bottom:.45rem}

/* the company colofon block (legal-identity partial) inside a legal doc */
.legal-prose .legal-id{margin:.4rem 0 1.3rem}

/* the cross-doc footer nav at the bottom of each page */
.legal-foot{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;align-items:center;
  margin-top:clamp(2.4rem,6vw,3.4rem);padding-top:clamp(1.4rem,4vw,1.8rem);
  border-top:1px solid var(--line);font-size:.95rem}
.legal-foot a{color:var(--soft);text-decoration:none;font-weight:550;
  transition:color var(--dur-1) var(--ease-out)}
.legal-foot a:hover{color:var(--accent-text)}
.legal-foot .legal-foot-home{color:var(--accent-text);font-weight:600}

/* ---- desktop: promote the ToC to a sticky sidebar beside the prose ---- */
@media (min-width:1000px){
  .legal-doc{max-width:64rem}
  .legal-body{display:grid;grid-template-columns:15rem minmax(0,1fr);
    gap:clamp(2rem,4vw,3.5rem);align-items:start}
  .legal-toc{position:sticky;top:5.2rem;margin:0;background:none;border:0;border-radius:0;
    max-height:calc(100vh - 7rem);overflow-y:auto}
  /* The ToC heading on desktop is the <summary> text itself (it carries the localized "On this page"
     label), shown as a static caption — NOT a hardcoded CSS content string, so it follows the
     document's language (the legal doc is now localized). The details is force-open below, so the
     summary is no longer an interactive disclosure here: drop its marker + tap affordance. */
  .legal-toc>summary{cursor:default;min-height:0;padding:0 .6rem .7rem;
    font-size:10.5px;color:var(--soft-2,color-mix(in srgb,var(--soft) 70%,var(--bg-2)))}
  .legal-toc>summary::after{display:none}      /* no chevron — always open on desktop */
  .legal-toc[open],.legal-toc:not([open]){}    /* details state ignored at this width */
  .legal-toc nav{padding:0}
  .legal-toc a{min-height:0;padding:.42rem .6rem;font-size:.9rem}
  .legal-toc a::before{min-width:1.5em}
}

/* a phone-collapsed <details> ToC must still SHOW on desktop even if authored
   without [open] — force it open past the breakpoint regardless of state. */
@media (min-width:1000px){.legal-toc:not([open])>nav{display:block}}

@media (prefers-reduced-motion:reduce){
  .legal-toc>summary::after,.legal-toc a{transition:none}
}

/* ---- legal language bar: per-app branded legal localizes to the app's languages
   (owner decision 2026-06-29), mirroring the support hub. The active language is a
   non-link chip; the others link to their localized legal page.

   ONE ROW, at any width, without a magic breakpoint. Three parts:
   (a) the "Language" lead takes a flex row of its OWN (flex-basis:100% in a wrapping flex
       container = a line break without extra markup), returning the ~70px it used to steal
       from the chip row — enough for aida's eight endonyms to sit on one line at the 64rem
       document width (~820px of chips in a 907px box);
   (b) the chip metrics below keep that budget — widening one (padding/flag/font) spends it;
   (c) narrower than that, legal-doc.js measures the row and sets .ll-compact, which swaps the
       endonym for the bare code (Nederlands → NL, ~60px a chip). CSS cannot ask "would this
       wrap", so the swap is measured rather than guessed at a hardcoded width — a ninth
       language or a longer endonym is handled with no CSS change.
   Without JS the endonyms simply wrap, which is the old behaviour: enhancement, not a
   dependency. ---- */
.legal-langs{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;
  max-width:46rem;margin:0 auto clamp(1.4rem,4vw,2rem);justify-content:flex-start}
.legal-langs .ll-lead{flex:0 0 100%;margin:0 0 .1rem;
  font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.13em;
  text-transform:uppercase;color:var(--soft-2,color-mix(in srgb,var(--soft) 70%,var(--bg-2)))}
.legal-langs a,.legal-langs span.ll-cur{display:inline-flex;align-items:center;gap:.32rem;
  padding:.3rem .5rem;border:1px solid var(--line);border-radius:var(--radius);
  text-decoration:none;color:var(--soft);font-size:.9rem;background:var(--surface);
  transition:border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.legal-langs a:hover,.legal-langs a:focus-visible{border-color:var(--accent-text);color:var(--ink)}
.legal-langs span.ll-cur{background:color-mix(in srgb,var(--accent-text) 12%,var(--surface));
  border-color:var(--accent-text);color:var(--ink);font-weight:650}
.legal-langs .ll-flag{width:16px;height:11px;border-radius:2px;overflow:hidden;flex:0 0 auto;
  box-shadow:0 0 0 1px rgba(0,0,0,.08) inset}
.legal-langs .ll-flag svg{display:block;width:100%;height:100%}
/* the two label forms — endonym by default, bare code once legal-doc.js flags the row as tight.
   The code wears the mono face (like .ll-lead) so it reads as a deliberate abbreviation, not a
   truncated word. */
.legal-langs .ll-code{display:none;font-family:var(--mono);font-size:.8rem;letter-spacing:.06em}
.legal-langs.ll-compact .ll-name{display:none}
.legal-langs.ll-compact .ll-code{display:inline}
@media (min-width:1000px){.legal-langs{max-width:64rem}}