/* Cache-buster 2026-09-09: the previous filenames for this file, site.js and
   legal.css were requested at the edge in the window between the HTML being
   deployed and the files themselves landing. Pages answered those requests with
   200 + the fallback HTML page, and the /assets/* rule in _headers stamped that
   answer immutable for a year, so the CDN kept serving an HTML page under a .css
   URL. Changing the bytes changes the content hash, so the markup now points at
   URLs that were never poisoned. See the /assets/ guard in functions/_middleware.js,
   which stops this from being possible again. */

/* Tokens this file uses that styles.css dropped in the 2026-09-18 redesign —
   without them `.warning` and `.legal__email` lost their border, the cards
   their radius, and "faint" text fell back to the inherited colour. Values as
   they were before the redesign. */
:root {
  --ink-faint: #6E6E6E;         /* 5.13:1 on white */
  --orange-border: rgba(255, 90, 31, 0.30);
  --radius: 12px;
}
/* ============================================================================
   SyzUp — legal subpages (/privacy/, /terms/, /delete-account/)
   Depends on styles.css for design tokens, nav, footer and buttons.
   ========================================================================= */

.legal {
  background: var(--bg);
  padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 96px);
}

.legal__inner {
  max-width: 760px;               /* narrower than --max: legal text is read, not scanned */
  margin: 0 auto;
  padding: 0 var(--pad-x);
}

/* ---------- headings ---------- */

.legal__h1 {
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 20px;
}

.legal__lead {
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.65;
  color: var(--ink-soft);
  padding-bottom: 28px;
  border-bottom: 1px solid var(--line);
}

.legal__section {
  margin-top: clamp(36px, 5vw, 52px);
  scroll-margin-top: 90px;
}


/* Shown when a locale has no translation of this document and is served the
   English text. Deliberately prominent: the visitor asked for their language and
   is about to read a binding agreement in another one. */
.legal__english-notice {
  margin-bottom: 28px;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-inline-start: 3px solid var(--orange);
  background: var(--bg-cream);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
}


.legal__h2 {
  font-size: clamp(20px, 2.6vw, 25px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 14px;
  padding-inline-start: 14px;
  border-inline-start: 3px solid var(--orange);
}

.legal p {
  color: var(--ink-soft);
  line-height: 1.7;
  margin-bottom: 14px;
}

.legal p:last-child { margin-bottom: 0; }

.legal a {
  color: var(--orange-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.legal a:hover,
.legal a:focus-visible { text-decoration-thickness: 2px; }

.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--bg-cream);
  border: 1px solid var(--line);
  padding: 1px 6px;
  color: var(--ink-soft);
}

/* ---------- app / developer identity block ---------- */

.legal__meta {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 10px 20px;
  background: var(--bg-cream);
  border: 1px solid var(--line);
  padding: 20px 22px;
}

.legal__meta dt {
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  align-self: center;
}

.legal__meta dd { color: var(--ink); }

/* ---------- lists ---------- */

.legal__steps,
.legal__list {
  margin: 0 0 14px;
  padding-inline-start: 22px;
  color: var(--ink-soft);
  line-height: 1.7;
}

.legal__steps li,
.legal__list li { margin-bottom: 10px; }

.legal__steps li::marker {
  font-weight: 700;
  color: var(--orange-deep);
}

.legal__list li::marker { color: var(--orange-deep); }

/* ---------- email callout ---------- */

.legal__email {
  background: var(--orange-bg);
  border: 1px solid var(--orange-border);
  padding: 18px 22px;
  margin-bottom: 8px;
  font-size: clamp(17px, 2.4vw, 21px);
  font-weight: 600;
  word-break: break-word;
}

.legal__email a { color: var(--ink); }

.legal__hint {
  font-size: 14px;
  color: var(--ink-faint);
  margin-bottom: 20px;
}

/* ---------- deleted-data definition list ---------- */

.legal__data {
  border-top: 1px solid var(--line);
}

.legal__data dt {
  font-weight: 600;
  color: var(--ink);
  padding-top: 16px;
}

.legal__data dd {
  color: var(--ink-soft);
  line-height: 1.65;
  padding: 4px 0 16px;
  border-bottom: 1px solid var(--line);
}

/* ---------- retention table ---------- */

.legal__table-wrap { overflow-x: auto; }

.legal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  text-align: start;
}

.legal__table th,
.legal__table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.6;
}

.legal__table thead th {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-muted);
  background: var(--bg-cream);
  border-bottom: 1px solid var(--line-strong);
  white-space: nowrap;
}

.legal__table tbody th {
  font-weight: 600;
  color: var(--ink);
  width: 26%;
}

.legal__table td { color: var(--ink-soft); }

/* Stack the table into cards on narrow screens — no horizontal scrolling. */
@media (max-width: 640px) {
  .legal__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .legal__table,
  .legal__table tbody,
  .legal__table tr,
  .legal__table th,
  .legal__table td { display: block; width: auto; }

  .legal__table tr {
    border: 1px solid var(--line);
    margin-bottom: 14px;
    padding: 4px 0;
  }

  .legal__table th,
  .legal__table td { border-bottom: 0; padding: 10px 16px; }

  .legal__table tbody th {
    background: var(--bg-cream);
    margin-bottom: 4px;
  }

  .legal__table td::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-faint);
    margin-bottom: 3px;
  }
}

/* ---------- related documents ---------- */

.legal__doclinks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  font-weight: 600;
}

/* ---------- footer meta ---------- */

.legal__updated {
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-faint);
}

/* ---------- unresolved placeholder guard ---------- */
/* Never ships: build.js refuses to emit pages containing @@TODO_ markers.
   This is a last-resort visual tripwire for local preview builds. */
.legal__todo {
  background: #FFF3CD;
  border: 1px dashed #B8860B;
  color: #6B4E00;
  padding: 2px 8px;
  font-weight: 700;
}

/* Non-Latin scripts — see the matching block in styles.css for the reasoning. */
[lang="ko"] .legal { word-break: keep-all; }
[lang="ar"] .legal * { letter-spacing: normal; }
[lang="ar"] .legal p,
[lang="ar"] .legal__lead { line-height: 1.9; }

/* NOT keep-all: ja and zh have no inter-word spaces, so a paragraph would
   have no legal break point at all. Long legal documents make this fatal —
   a single unbroken block scrolls the whole page sideways. */
[lang="ja"] .legal,
[lang="zh-Hans"] .legal {
  word-break: normal;
  line-break: strict;
  overflow-wrap: break-word;
}

/* Devanagari marks collide at the body line-height used for long copy. */
[lang="hi"] .legal p,
[lang="hi"] .legal__lead,
[lang="hi"] .legal li { line-height: 1.9; }

/* Table headers are uppercase with tracking in Latin; that applies to none of
   these scripts. */
[lang="ar"] .legal__table thead th,
[lang="ar"] .legal__meta dt,
[lang="ja"] .legal__table thead th,
[lang="ja"] .legal__meta dt,
[lang="zh-Hans"] .legal__table thead th,
[lang="zh-Hans"] .legal__meta dt,
[lang="hi"] .legal__table thead th,
[lang="hi"] .legal__meta dt {
  text-transform: none;
}

/* ----------------------------------------------------------------------------
   Imported legal documents (privacy, terms)
   These come from the old single-file build and rely on their own markup:
   numbered h2, .card, .warning and tables. Mapped onto the site's tokens here
   rather than editing 18 documents.
   ------------------------------------------------------------------------- */

.legal__docdate {
  font-size: 14px;
  color: var(--ink-faint);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}

.legal section { margin-top: clamp(32px, 4.5vw, 46px); }

.legal section h2 {
  font-size: clamp(19px, 2.4vw, 23px);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.legal section h2 .num {
  color: var(--orange-deep);
  margin-inline-end: 8px;
}

.legal section h3 {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
  margin: 22px 0 8px;
}

.legal ul,
.legal ol {
  margin: 0 0 14px;
  padding-inline-start: 22px;
  color: var(--ink-soft);
  line-height: 1.7;
}

.legal li { margin-bottom: 8px; }
.legal li::marker { color: var(--orange-deep); }

.legal .card {
  background: var(--bg-cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 16px 0;
}

.legal .card > p:last-child { margin-bottom: 0; }

.legal .card-title,
.legal .warning-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--orange-deep);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 8px;
}

.legal .warning {
  background: var(--orange-bg);
  border: 1px solid var(--orange-border);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 16px 0;
}

.legal .warning > p:last-child { margin-bottom: 0; }

.legal table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
  font-size: 14.5px;
  text-align: start;
}

.legal th {
  text-align: start;
  padding: 11px 14px;
  background: var(--bg-cream);
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid var(--line-strong);
}

.legal td {
  padding: 11px 14px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

/* Critical disclaimers (.danger) — the health and liability blocks in the
   Terms. These carry the most legal weight on the page, so they get a
   stronger treatment than .warning rather than sharing it.
   Note: the source documents styled .danger-title with var(--red), which was
   never defined there, so the heading rendered unstyled. Fixed here. */

.legal .danger {
  background: #FCEDEB;
  border: 1px solid #E5A79C;
  border-inline-start: 3px solid #C0392B;
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 18px 0;
}

.legal .danger > p:last-child { margin-bottom: 0; }

.legal .danger-title {
  font-size: 12.5px;
  font-weight: 700;
  color: #A5281B;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 8px;
}

.legal .danger p { color: #6B241B; }

/* Translation notice shown on every non-authoritative language version. */
.legal .conv-note {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-faint);
  background: var(--bg-cream);
  border-inline-start: 3px solid var(--line-strong);
  border-radius: 0;
  padding: 12px 16px;
  margin-bottom: 22px;
}

/* Cross-links between the two documents. */
.legal a.xdoc { font-weight: 600; }