/* ============================================================================
   Niko — the legal editions.

   These pages are GENERATED, by `make legal` in nikoapp_backend, and copied
   into src/legal/ as passthrough files. The generator's job is the words; this
   file's job is how they look, which is why the styling lives here and not
   there.

   They used to carry their own <style> block, and it never rendered: the site's
   CSP is `style-src 'self'` with no unsafe-inline, so every one of these pages
   was served to the public as unstyled Times New Roman on white. The block also
   described the OLD brand - purple #7c5cff, and Inter pulled as a webfont the
   rest of this site refuses to load. Both problems go away by serving real CSS
   from this origin and taking the tokens from site.css rather than restating
   them.

   EVERYTHING IS SCOPED UNDER .legal, which build.py puts on <body>. Two reasons:
   the generator's class names (.nav, .brand, .facts, .foot) collide with the
   marketing site's, and site.css resets things a document needs - p{margin:0},
   and list markers stripped from ul/ol. A legal notice is prose; it needs its
   paragraphs spaced and its lists numbered, and that has to be given back
   deliberately rather than inherited.
   ========================================================================= */

.legal{background:var(--bg);color:var(--text)}

/* Prose defaults, undoing the marketing reset for document content. */
.legal p{margin:0 0 16px}
.legal main ul,.legal main ol{margin:0 0 18px;padding-inline-start:24px;list-style:revert}
.legal main li{margin-bottom:8px;line-height:1.68}
.legal main li::marker{color:var(--muted-2)}
.legal a{color:var(--accent);text-decoration:none}
.legal a:hover{color:var(--accent-hi);text-decoration:underline}
.legal code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:var(--surface-2);border:1px solid var(--hairline);
  border-radius:6px;padding:2px 6px;
}
.legal strong,.legal b{color:var(--text);font-weight:650}

/* The marketing sheet sizes a bare <section> as a full page band and h1/h2 as
   display type. In a document they are structure, not billboards. */
.legal section{padding:0}
.legal h1{font-size:clamp(1.9rem,3.6vw,2.6rem);margin:0 0 16px;letter-spacing:-.02em}
.legal h2{font-size:1.35rem;margin:40px 0 14px;letter-spacing:-.015em;scroll-margin-top:96px}
.legal h3{font-size:1.05rem;margin:26px 0 10px}

/* ------------------------------------------------------------------ chrome */
.legal header{
  position:sticky;top:0;z-index:50;border-bottom:1px solid var(--hairline);
  background:rgba(9,11,19,.86);backdrop-filter:blur(14px);
}
.legal .nav{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  min-height:72px;max-width:var(--maxw);margin:0 auto;padding:0 40px;
}
.legal .brand{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:800;font-size:1.15rem;letter-spacing:-.02em;color:var(--text);
}
.legal .brand:hover{color:var(--text);text-decoration:none}
.legal .brand .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);display:block;flex:none}
.legal .nav-right{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;font-size:.92rem}
.legal .nav-right a{color:var(--muted)}
.legal .nav-right a:hover{color:var(--accent)}
.legal .nav-right a[aria-current="page"]{color:var(--accent);font-weight:600}
.legal .back{color:var(--muted);font-size:.92rem}
.legal .back:hover{color:var(--accent)}

.legal .skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.legal .skip:focus{
  width:auto;height:auto;overflow:visible;clip:auto;
  inset-inline-start:16px;top:16px;z-index:99;background:var(--surface);color:var(--text);
  padding:10px 16px;border-radius:var(--r-button);border:1px solid var(--border-strong);
}

/* ------------------------------------------------------------ page layout */
/* Contents beside the document on a wide screen, above it on a narrow one. */
.legal .shell{
  display:grid;grid-template-columns:260px minmax(0,1fr);gap:56px;
  max-width:var(--maxw);margin:0 auto;padding:48px 40px 96px;align-items:start;
}
/* A page without the contents sidebar - the region index, and the bare
   edition-chooser fallbacks - centres its own main. Inside .shell the grid has
   already placed it, so it takes the measure and nothing else. */
.legal main{max-width:920px;margin:0 auto;padding:48px 40px 96px}
.legal .shell main{max-width:74ch;margin:0;padding:0}

.legal .toc{position:sticky;top:104px;font-size:.9rem}
.legal .toc h2{font-size:.75rem;text-transform:uppercase;letter-spacing:.14em;color:var(--muted-2);margin:0 0 14px}
.legal .toc ol{list-style:none;padding:0;margin:0;display:grid;gap:2px;counter-reset:toc}
.legal .toc li{margin:0;counter-increment:toc}
.legal .toc a{
  display:block;color:var(--muted);padding:6px 10px;border-radius:8px;line-height:1.4;
  border-inline-start:2px solid transparent;
}
.legal .toc a::before{content:counter(toc) ". ";color:var(--muted-2)}
.legal .toc a:hover{background:var(--surface);color:var(--text);text-decoration:none;border-inline-start-color:var(--accent)}

/* --------------------------------------------------------- document front */
.legal .eyebrow{
  color:var(--accent);font-size:.75rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;margin:0 0 12px;
}
.legal .lede{color:var(--muted);font-size:1.08rem;margin:0 0 28px;max-width:60ch}

/* Version, effective date, governing law: facts about the document itself. */
.legal .facts{
  display:flex;flex-wrap:wrap;gap:10px;margin:0 0 24px;padding:0;
}
.legal .fact{
  display:inline-flex;flex-direction:column;gap:2px;
  background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--r-tile);padding:10px 14px;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted-2);
}
.legal .fact b{
  font-size:.92rem;font-weight:650;color:var(--text);
  text-transform:none;letter-spacing:normal;
}

/* Not in force yet, and details still unfilled. Amber rather than red: it is a
   state to notice, not a failure, and it must not be quiet. */
.legal .draft{
  background:rgba(232,163,61,.10);border:1px solid rgba(232,163,61,.38);
  border-inline-start-width:3px;border-radius:var(--r-tile);
  padding:14px 18px;margin:0 0 20px;color:var(--text);font-size:.94rem;line-height:1.6;
}
.legal .draft b{display:block;color:var(--attention);margin-bottom:4px}

.legal .region{
  background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--r-tile);padding:14px 18px;margin:0 0 32px;
  color:var(--muted);font-size:.92rem;line-height:1.6;
}
.legal .only{margin-top:6px;color:var(--muted-2);font-size:.88rem}

/* Links to the other editions. The generator styles these itself, but that
   block is stripped on the way in -- the policy would have thrown it away --
   so the spacing has to come from here. With one other edition they read as a
   sentence; at four they ran together into "European Economic AreaUnited
   Kingdom". */
.legal .region .others{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}
.legal .region .others a{
  background:var(--surface-2);border:1px solid var(--hairline);
  border-radius:999px;padding:5px 12px;font-size:.86rem;
  color:var(--text);text-decoration:none;
}
.legal .region .others a:hover{border-color:var(--accent-stroke);color:var(--accent-hi)}

/* --------------------------------------------------------- document body */
/* The summary at the top, and anything else worth lifting off the page. */
.legal .callout{
  background:var(--accent-soft);border:1px solid var(--accent-stroke);
  border-radius:var(--r-card);padding:20px 22px;margin:0 0 24px;
}
.legal .callout p:last-child{margin-bottom:0}

.legal .safety,.legal .note{
  background:var(--surface);border:1px solid var(--hairline);
  border-radius:var(--r-tile);padding:14px 18px;margin:24px 0;
  color:var(--muted);font-size:.9rem;line-height:1.6;
}

/* Numbered clauses that can be cited by number. */
.legal ol.clauses{list-style:none;padding:0;margin:0 0 20px;counter-reset:clause}
.legal ol.clauses>li{
  counter-increment:clause;position:relative;padding-inline-start:38px;margin-bottom:14px;
}
.legal ol.clauses>li::before{
  content:counter(clause);position:absolute;inset-inline-start:0;top:1px;
  min-width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:1px solid var(--hairline);border-radius:8px;
  color:var(--muted);font-size:.78rem;font-weight:700;font-variant-numeric:tabular-nums;
}

/* Tables carry the substance in these documents - what is collected, who gets
   it, why. They scroll rather than squash, because a lawful basis cut in half
   is not a lawful basis. */
.legal table{
  width:100%;border-collapse:collapse;margin:0 0 24px;font-size:.92rem;
  display:block;overflow-x:auto;
}
.legal thead th{
  text-align:start;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted-2);font-weight:700;padding:0 14px 10px;white-space:nowrap;
}
.legal tbody tr{border-top:1px solid var(--hairline)}
.legal tbody td{padding:14px;vertical-align:top;color:var(--muted);line-height:1.6;min-width:180px}
.legal tbody td:first-child{color:var(--text)}
.legal tbody td strong{display:inline-block;margin-bottom:2px}

/* A detail the company has not filled in yet. It has to be conspicuous: these
   are the difference between a draft and a notice somebody can rely on. */
.legal mark.todo{
  background:rgba(232,163,61,.16);color:var(--attention);
  border:1px dashed rgba(232,163,61,.55);border-radius:5px;
  padding:1px 6px;font-style:italic;
}

/* -------------------------------------------------------- the region index */
.legal .region-block{margin:0 0 36px}
.legal .region-block h2{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:0}
.legal .badge{
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);
  border:1px solid var(--accent-stroke);border-radius:var(--r-pill);padding:4px 10px;
}
.legal .law{color:var(--muted-2);font-size:.9rem;margin:0 0 16px}
.legal .docs{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.legal .doc{
  display:grid;gap:6px;background:var(--surface);
  border:1px solid var(--hairline);border-radius:var(--r-card);
  padding:20px;transition:.18s ease;
}
.legal .doc:hover{border-color:var(--accent-stroke);transform:translateY(-1px);text-decoration:none}
.legal .doc b{font-size:1.02rem;color:var(--text)}
.legal .doc span{color:var(--muted);font-size:.9rem;line-height:1.55}

/* ------------------------------------------------------------------ footer */
.legal footer{border-top:1px solid var(--hairline);margin-top:64px}
.legal .foot{
  max-width:var(--maxw);margin:0 auto;padding:28px 40px;
  color:var(--muted-2);font-size:.86rem;line-height:1.6;
}

@media (max-width:1000px){
  .legal .shell{grid-template-columns:1fr;gap:32px;padding:32px 28px 72px}
  .legal .toc{position:static;background:var(--surface);border:1px solid var(--hairline);
    border-radius:var(--r-card);padding:18px 20px}
  .legal .nav{padding:0 28px}
  .legal .foot{padding:24px 28px}
  .legal main{padding:32px 28px 72px}
  .legal .shell main{padding:0}
}
@media (max-width:640px){
  .legal .shell{padding:24px 20px 56px}
  .legal .nav{padding:0 20px;min-height:64px}
  .legal .facts{gap:8px}
  .legal .fact{padding:8px 12px}
  .legal main{padding:24px 20px 56px}
  .legal .shell main{padding:0}
}