/* WiredIN legal pages.
   ─────────────────────────────────────────────────────────────────────────────
   These two documents are the app's most formal surface. A reviewer taps
   through to them from the paywall, and a user reaches them from Profile, so
   they are read immediately after the app itself — which is why the palette
   below is the app's palette and not a variation on it.

   THE PALETTE WAS STALE. Until this revision every colour here was tinted green
   (--gleam #7FE3A6 on a #060807 field), inherited from the forest identity the
   app DELETED on 28 July when it went monochrome. src/theme/colors.ts now reads
   "The identity. One ink, white." — ACCENT_SPEC.stroke #E8E8E8 on bg #050505.
   Landing on a green page one tap after a white-on-black paywall reads as a
   different product, and "looks like someone else built it" is the whole of the
   professionalism problem. The tokens below are the app's, exactly.

   MODE IS READ. Success is comprehension, so structure and measure outrank
   expression. Dark is chosen from the use scene rather than from habit: this is
   an app about not being on your phone at 1am, its Night Shield exists for
   exactly that hour, and the reader arrives from a dark app. Print is the one
   place that flips — see the print sheet at the bottom, which matters because
   legal documents get saved as PDF and filed. */

:root {
  /* Surfaces — the app's ladder. Hierarchy by luminance and a hairline. */
  --field:    #050505;
  --plate:    #0E0E0E;
  --plate-2:  #151515;
  --rule:     rgba(255, 255, 255, 0.10);
  --rule-strong: rgba(255, 255, 255, 0.18);

  /* One ink, white — src/theme/colors.ts ACCENT_SPEC. */
  --accent:   #E8E8E8;
  --text:     #F2F2F2;
  --sub:      #C2C2C2;   /* app textSub  */
  --faint:    #A3A3A3;   /* app textLight */

  /* The single semantic hue in the system. Reserved for the Extreme-mode
     safety notice in Terms §3, where the warning is the point and value alone
     cannot carry it. Used nowhere else, deliberately. */
  --warn:     #E5C07B;
  --warn-bed: rgba(229, 192, 123, 0.06);
  --warn-rule:rgba(229, 192, 123, 0.30);

  --measure:  68ch;   /* 65–75ch is the comfortable band for continuous prose */
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--field);
  color: var(--sub);
  font-family: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(255, 255, 255, 0.20); color: #FFF; }

/* One shared focus treatment. Every interactive thing on the page is a link,
   and a legal document is read by keyboard more than most pages are. */
a:focus-visible,
.toc a:focus-visible,
.anchor:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

/* The gutters are added ON TOP of the measure rather than eaten out of it.
   Setting max-width to --measure alone put the actual prose at 61.7ch, because
   56px of padding came out of the middle — measured, not assumed. */
.wrap {
  max-width: calc(var(--measure) + 56px);
  margin: 0 auto;
  padding: 0 28px 120px;
}

/* Skip link — the contents list is long, and a screen-reader user should be
   able to get past it to the document itself. */
.skip {
  position: absolute; left: -9999px;
  background: #E8E8E8; color: #0A0A0A;   /* literal pair: 16.16:1, measured */
  padding: 10px 16px; border-radius: 8px; font-weight: 600; text-decoration: none;
}
.skip:focus { left: 24px; top: 20px; z-index: 10; }
/* The generic `a:hover { color: #FFF }` further down would otherwise apply here
   too — white ink on the near-white skip plate, 1.2:1, on the one control a
   keyboard user meets first. Its ink is pinned to the plate it sits on. */
.skip:hover, .skip:focus { color: #0A0A0A; }

/* ── Masthead ─────────────────────────────────────────────────────────────── */
header.masthead {
  padding: 76px 0 36px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 40px;
}

/* A BREADCRUMB, and now it looks like one. This was tracked-caps at 12px with a
   dot — a logo lockup sitting above an oversized title, which is the stock hero
   eyebrow and, worse, hid the fact that it is the only way back to the support
   page. Sentence case, a chevron, link underline on hover: it reads as
   navigation, which is what it has always been. */
.brand {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.005em;
  color: var(--faint); text-decoration: none; margin-bottom: 26px;
  /* A standalone link, so it gets a real tap target rather than a 20px one. */
  padding: 6px 0; min-height: 34px;
}
.brand::before {
  content: '';
  width: 0.42em; height: 0.42em;
  border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  margin-right: 2px;
}
.brand:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

h1 {
  font-size: clamp(33px, 6.4vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.032em;
  margin: 0 0 16px;
  font-weight: 700;
  color: var(--text);
  text-wrap: balance;
}

/* The support index carries the mark INSIDE its headline rather than as a
   tracked-caps label stacked above it. A non-linking brand word over an
   oversized title is the stock AI hero eyebrow, and on that page the word was
   not even a link home — it was the page you were already on. On the two
   documents .brand stays, because there it is a real breadcrumb back to the
   index, which is the form that earns its place. */
h1 .dot-inline {
  display: inline-block; vertical-align: middle;
  width: 0.28em; height: 0.28em; border-radius: 50%;
  background: var(--accent);
  margin-right: 0.42em; margin-top: -0.12em;
}

.meta { color: var(--faint); font-size: 15px; margin: 0; letter-spacing: 0.01em; }
.meta strong { color: var(--sub); font-weight: 600; }

/* ── Lede: the plain-language summary above the legal text ────────────────── */
/* Was a plate with a 2px accent border-left. That bar is the stock "callout"
   gesture and it was doing no work here — the summary is already the first
   thing on the page, so position states its role. It sits on its own ground
   with a hairline above and below to seal it off, at body size: 17.5 against a
   17px body was a distinction nobody could see, and it put an extra rung on a
   ladder that only has room for five. */
.lede {
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule);
  padding: 26px 0 24px;
  margin: 0 0 52px;
  color: var(--sub);
  line-height: 1.62;
}
.lede p { margin: 0 0 14px; }
.lede p:last-child { margin-bottom: 0; }
.lede strong { color: var(--text); font-weight: 600; }

/* ── Contents ─────────────────────────────────────────────────────────────── */
/* A privacy policy is not read front to back. People arrive looking for one
   thing — "what do you do with my location" — and reviewers jump to whichever
   section the permission prompt made them think about. Thirteen and eighteen
   sections with no index made that a scroll hunt. */
.toc { margin: 0 0 52px; }
.toc h2 {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--faint); margin: 0 0 14px; padding: 0;
}
.toc ol {
  list-style: none; margin: 0; padding: 0;
  columns: 2; column-gap: 32px;
  counter-reset: toc;
}
.toc li {
  margin: 0; padding: 0; break-inside: avoid;
  counter-increment: toc;
}
.toc li::before { content: none; }
.toc a {
  display: flex; gap: 10px; align-items: baseline;
  padding: 7px 0; min-height: 34px;
  color: var(--sub); text-decoration: none;
  font-size: 15px; line-height: 1.4;
  border-bottom: 1px solid transparent;
}
.toc a::before {
  content: counter(toc) ".";
  color: var(--faint); font-variant-numeric: tabular-nums;
  min-width: 1.9em; flex-shrink: 0;
}
.toc a:hover { color: var(--text); }
.toc a:hover::before { color: var(--text); }

/* ── Sections ─────────────────────────────────────────────────────────────── */
section {
  margin-bottom: 48px;
  /* Deep links land here from support replies ("see §8"), so the heading must
     clear the top edge rather than sitting flush against it. */
  scroll-margin-top: 32px;
}

/* Arriving at a section by link should say so. It fades rather than persists —
   the point is to catch the eye on arrival, not to leave the page marked up. */
section:target > h2 { color: #FFF; }
section:target > h2 .num { color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  section:target { animation: land 1.6s ease-out; }
  @keyframes land {
    from { background: rgba(255, 255, 255, 0.055); }
    to   { background: transparent; }
  }
}

h2 {
  font-size: 22px; line-height: 1.28; letter-spacing: -0.018em; font-weight: 700;
  margin: 0 0 16px;
  color: var(--text);
  /* More space above a heading than below it — the heading belongs to what
     follows, and section margin supplies the rest. */
  padding-top: 6px;
  text-wrap: balance;
}
/* The ordinal is real structure: these documents are cited by number in support
   replies and by reviewers, and Terms §13 names which sections survive
   termination. It stays, and it stays tabular so the column edge is true. */
h2 .num {
  display: inline-block; min-width: 2.1em;
  color: var(--faint); font-variant-numeric: tabular-nums; font-weight: 700;
}

/* A quiet § that appears on hover, so any section can be linked and cited. */
.anchor {
  margin-left: 10px; color: var(--faint); text-decoration: none;
  opacity: 0; transition: opacity 120ms ease-out;
  font-weight: 400;
}
h2:hover .anchor, .anchor:focus-visible { opacity: 1; }
.anchor:hover { color: var(--text); }

/* Above the body, not below it. h3 was 16.5 against a 17px body — a subheading
   SMALLER than the text it introduces, which is the hierarchy inverted. */
h3 { font-size: 18px; font-weight: 700; margin: 30px 0 8px; color: var(--text); letter-spacing: -0.008em; }

p { margin: 0 0 15px; }
p.tight { margin-bottom: 8px; }
strong { color: var(--text); font-weight: 600; }
em { font-style: italic; color: var(--text); }

ul { margin: 0 0 18px; padding-left: 0; list-style: none; }
li { position: relative; padding-left: 22px; margin-bottom: 11px; }
li::before {
  content: ''; position: absolute; left: 3px; top: 0.74em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--faint);
}
li strong { color: var(--text); }

a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--rule-strong);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 120ms ease-out;
}
a:hover { color: #FFF; text-decoration-color: var(--accent); }

/* ── Data table — the heart of the privacy page ───────────────────────────── */
.table-scroll {
  overflow-x: auto;
  margin: 0 0 22px;
  border-radius: 12px;
  border: 1px solid var(--rule);
  /* Fade the right edge while there is more table to the right, so the scroll
     is discoverable instead of something you have to guess at. */
  background:
    linear-gradient(to right, var(--field) 30%, transparent) left / 40px 100% no-repeat local,
    linear-gradient(to left,  var(--field) 30%, transparent) right / 40px 100% no-repeat local,
    linear-gradient(to right, rgba(255,255,255,0.09), transparent) left / 14px 100% no-repeat scroll,
    linear-gradient(to left,  rgba(255,255,255,0.09), transparent) right / 14px 100% no-repeat scroll;
}
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 460px; }
caption { caption-side: top; text-align: left; padding: 0 0 10px; color: var(--faint); font-size: 15px; }
thead th {
  background: var(--plate-2); text-align: left; padding: 12px 16px;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); font-weight: 700;
  border-bottom: 1px solid var(--rule);
}
tbody td { padding: 14px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; line-height: 1.55; }
tbody tr:last-child td { border-bottom: none; }
tbody td:first-child { color: var(--text); font-weight: 600; white-space: nowrap; }

/* ── Document list on the support index ──────────────────────────────────── */
/* The two links a reviewer is actually looking for when they open the Support
   URL. They read as destinations rather than as list items, so they drop the
   bullet and take the heading register. */
.docs { margin: 0; }
.docs li { padding-left: 0; margin-bottom: 26px; }
.docs li::before { content: none; }
.docs li:last-child { margin-bottom: 0; }
/* Shares h3's register, because that is honestly what it is: a subheading that
   happens to be the link. 19px put it one pixel under the 20px section heading
   on mobile, which read as a mistake rather than a step. */
.docs > li > a {
  display: inline-block;
  font-size: 18px; font-weight: 700; letter-spacing: -0.008em;
  color: var(--text);
  padding: 2px 0; margin-bottom: 2px;
  text-decoration-color: var(--rule-strong);
}
.docs > li > a:hover { text-decoration-color: var(--accent); }
.docs > li > p { margin: 0; }

/* ── Callout — the Extreme-mode safety notice ─────────────────────────────── */
/* The one place a hue is doing semantic work. Everything else on these pages
   is neutral, which is what lets this register at all. */
.callout {
  background: var(--warn-bed);
  border: 1px solid var(--warn-rule);
  border-radius: 12px; padding: 22px 24px; margin: 0 0 22px;
}
.callout h3 { margin-top: 0; color: var(--warn); }
.callout p:last-child { margin-bottom: 0; }
.callout li::before { background: var(--warn); opacity: 0.8; }

/* Device-local badge — the claim this product is actually built on. */
.on-device {
  display: inline-block;
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid var(--rule);
  color: var(--text);
  /* 11px is the floor for functional text, and this badge is content — it is
     the load-bearing claim in the whole table. It was 10.5. */
  font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 5px; white-space: nowrap;
}

footer {
  border-top: 1px solid var(--rule); padding-top: 30px; margin-top: 64px;
  color: var(--faint); font-size: 15px;
}
footer p { color: var(--faint); margin: 0; }
footer a { color: var(--sub); }

/* ── Narrow ───────────────────────────────────────────────────────────────── */
@media (max-width: 700px) {
  .toc ol { columns: 1; }
}

@media (max-width: 600px) {
  body { font-size: 16.5px; line-height: 1.62; }
  /* Keep the subheading step visible once the body shrinks. */
  h3, .docs > li > a { font-size: 17.5px; }
  header.masthead { padding: 44px 0 30px; margin-bottom: 32px; }
  /* 20px gutters on a 375pt screen leave a ~31-character measure, which is a
     lot of eye returns over a document this long. 16 buys back two characters
     a line without crowding the edge. */
  .wrap { padding: 0 16px 80px; }
  .lede { font-size: 17px; margin-bottom: 40px; }
  section { margin-bottom: 40px; }
  h2 { font-size: 20px; }
  /* The ordinal stops being a hanging column at this width — it costs 2em of a
     30-character line and buys nothing once the heading wraps anyway. */
  h2 .num { min-width: 0; margin-right: 0.5em; }

  /* The table stops being a table. At 375px the grid needed 491px and scrolled
     inside its own box, which meant the most important content on the privacy
     page was half-hidden behind a gesture nobody was told about. Each row
     becomes a small record with its column name in front of each value —
     td::before carries the header text from data-label. */
  .table-scroll { border: none; border-radius: 0; background: none; overflow: visible; }
  table, thead, tbody, tr, td { display: block; width: 100%; }
  table { min-width: 0; font-size: 16px; }
  thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  tbody tr {
    border: 1px solid var(--rule); border-radius: 12px;
    padding: 4px 16px 12px; margin-bottom: 12px;
    background: var(--plate);
  }
  tbody td { border: none; padding: 10px 0 0; }
  tbody td:first-child {
    white-space: normal; font-size: 17px;
    padding-top: 14px;
  }
  tbody td[data-label]:not(:first-child)::before {
    content: attr(data-label);
    display: block;
    font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--faint); font-weight: 700; margin-bottom: 3px;
  }
  tbody tr:last-child td { border-bottom: none; }
}

/* ── Print ────────────────────────────────────────────────────────────────── */
/* Legal documents get saved as PDF, filed, and attached to disputes. Printed
   from the screen palette this was either a solid black page or — once the
   browser dropped the background — pale grey text on white. Neither is a
   document you would want produced as evidence of what you told your users. */
@media print {
  :root {
    --field: #FFF; --plate: #FFF; --plate-2: #FFF;
    --rule: #D4D4D4; --rule-strong: #A3A3A3;
    --text: #000; --sub: #1A1A1A; --faint: #4A4A4A; --accent: #000;
    --warn: #6B4E00; --warn-bed: #FFF; --warn-rule: #6B4E00;
  }
  html, body { background: #FFF !important; color: #1A1A1A; font-size: 11pt; line-height: 1.5; }
  .wrap { max-width: none; padding: 0; }
  .skip, .toc, .anchor, .brand .dot { display: none; }

  header.masthead { padding: 0 0 16pt; margin-bottom: 20pt; border-bottom: 1pt solid #A3A3A3; }
  .brand { color: #000; margin-bottom: 12pt; }
  h1 { font-size: 22pt; }

  /* Keep a heading with the text it introduces, and never split a short
     section across a page break. */
  h1, h2, h3 { break-after: avoid; page-break-after: avoid; }
  section { break-inside: auto; margin-bottom: 16pt; }
  .lede, .callout, tr, li { break-inside: avoid; page-break-inside: avoid; }
  section:target { animation: none; background: none; }

  .lede { border-top: 1pt solid #A3A3A3; border-bottom: 1pt solid #D4D4D4; }
  .callout { border: 1pt solid #6B4E00; background: #FFF; }
  .on-device { border: 1pt solid #A3A3A3; background: #FFF; color: #000; }

  /* A printed table is a real table again — no scroll, no stacking. */
  .table-scroll { overflow: visible; border: 1pt solid #D4D4D4; background: none; }
  table { min-width: 0; font-size: 10pt; }
  thead th { background: #F2F2F2; color: #000; }
  thead { display: table-header-group; }   /* repeat headers across pages */
  tbody td { border-bottom: 1pt solid #E5E5E5; }
  tbody td::before { content: none; }

  li::before { background: #4A4A4A; }

  a { color: #000; text-decoration: underline; }
  /* A printed page cannot be clicked, so the destination has to be on it —
     but only for real destinations, not for same-page section links. */
  a[href^="http"]::after,
  a[href^="mailto"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt; color: #4A4A4A; word-break: break-all;
  }
  footer { border-top: 1pt solid #A3A3A3; margin-top: 24pt; }
}