/* ═══════════════════════════════════════════════════════════════════════════
   HereMe — legal pages (hereme.me/legal, /legal/terms, /legal/privacy)

   Shared chrome, ported from Gloodoh's site/assets/legal.css (same company,
   same pattern: one stylesheet, section numbers and contents built by
   legal.js) and restyled to the HereMe brand (design/brand/brand-guide.md):
   the orange header with its big rounded corner, ink text on orange — never
   white, except the logo — Source Sans 3, and the light and dark themes.

   The site's CSP is default-src 'self' (public/_headers): no inline style, no
   inline script, nothing from another origin. Everything is in this file,
   legal.js and assets/.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────  FONTS  ──────────────────────────────
   Source Sans 3 (SIL OFL 1.1, fonts/OFL.txt), subset to Latin for the web and
   renamed "HereMe Sans Web", as the OFL asks of a modified copy. */
@font-face { font-family: "HereMe Sans Web"; font-weight: 400; font-display: swap; src: url(fonts/hereme-sans-web-regular.woff2) format("woff2"); }
@font-face { font-family: "HereMe Sans Web"; font-weight: 600; font-display: swap; src: url(fonts/hereme-sans-web-semibold.woff2) format("woff2"); }
@font-face { font-family: "HereMe Sans Web"; font-weight: 700; font-display: swap; src: url(fonts/hereme-sans-web-bold.woff2) format("woff2"); }
@font-face { font-family: "HereMe Sans Web"; font-weight: 900; font-display: swap; src: url(fonts/hereme-sans-web-black.woff2) format("woff2"); }

/* ─────────────────────────────  TOKENS  ─────────────────────────────
   The handoff's tokens, by their generated names (web/packages/ui/tokens.css,
   from design/handoff/tokens/tokens.json). Only the ones these pages use;
   test/legal.test.ts checks each value against the generated file. */
:root {
  --hm-color-brand-orange: #FBB03B;
  --hm-color-brand-orangeLight: #FFD28B;
  --hm-color-ink: #160D00;
  --hm-color-white: #FFFFFF;
  --hm-color-semantic-warningText: #A15C00;
  --hm-color-light-bg: #FFFFFF;
  --hm-color-light-surfaceAlt: #F5F1EB;
  --hm-color-light-text: #160D00;
  --hm-color-light-textMuted: #6B6258;
  --hm-color-light-border: #E6E6E6;
  --hm-color-light-header: #FBB03B;
  --hm-color-light-onHeader: #160D00;
  --hm-color-light-focus: #005EFF;
  --hm-color-light-moment: #160D00;
  --hm-color-light-onMoment: #F5F1EB;
  --hm-color-dark-bg: #120C05;
  --hm-color-dark-surface: #1E160B;
  --hm-color-dark-surfaceAlt: #2A2014;
  --hm-color-dark-text: #F5F1EB;
  --hm-color-dark-textMuted: #BFB5A8;
  --hm-color-dark-border: #3A2E1F;
  --hm-color-dark-primary: #FBB03B;
  --hm-color-dark-focus: #4D8BFF;
  --hm-radius-card: 20px;
  --hm-radius-header: 32px;
  --hm-radius-control: 12px;
  --hm-radius-pill: 9999px;

  /* Roles, light theme. */
  --bg: var(--hm-color-light-bg);
  --surface: var(--hm-color-light-surfaceAlt);
  --text: var(--hm-color-light-text);
  --muted: var(--hm-color-light-textMuted);
  --border: var(--hm-color-light-border);
  --header: var(--hm-color-light-header);
  --on-header: var(--hm-color-light-onHeader);
  --focus: var(--hm-color-light-focus);
  /* Orange is a fill, never text on white (1.85:1): links are ink with an
     orange underline; accents that must read as text use warningText. */
  --link: var(--hm-color-light-text);
  --accent-text: var(--hm-color-semantic-warningText);
  --note-bg: var(--hm-color-brand-orangeLight);
  --note-text: var(--hm-color-ink);
  --foot-bg: var(--hm-color-light-moment);
  --foot-text: var(--hm-color-light-onMoment);

  --font: "HereMe Sans Web", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px;
  --page: 1120px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--hm-color-dark-bg);
    --surface: var(--hm-color-dark-surface);
    --text: var(--hm-color-dark-text);
    --muted: var(--hm-color-dark-textMuted);
    --border: var(--hm-color-dark-border);
    --focus: var(--hm-color-dark-focus);
    --link: var(--hm-color-dark-text);
    --accent-text: var(--hm-color-dark-primary);
    --note-bg: var(--hm-color-dark-surfaceAlt);
    --note-text: var(--hm-color-dark-text);
    --foot-bg: var(--hm-color-dark-surface);
    --foot-text: var(--hm-color-dark-text);
  }
}

/* ─────────────────────────────  BASE  ───────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--s6); }
body {
  margin: 0; background: var(--bg); color: var(--text); font-family: var(--font);
  font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
img { max-width: 100%; }
a { color: var(--link); text-decoration-color: var(--hm-color-brand-orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.wrap { width: min(var(--page), 100% - 2 * var(--s4)); margin-inline: auto; }
@media (min-width: 720px) { .wrap { width: min(var(--page), 100% - 2 * var(--s8)); } }
.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: var(--s4); top: var(--s4); z-index: 10; background: var(--hm-color-white); color: var(--hm-color-ink); padding: var(--s2) var(--s4); border-radius: var(--hm-radius-control); }

/* ───────────────  HEADER — the orange header, big rounded corner  ─────────── */
.doc-head {
  background: var(--header); color: var(--on-header);
  border-bottom-right-radius: var(--hm-radius-header);
  padding: var(--s4) 0 var(--s8);
}
.doc-head a { color: var(--on-header); text-decoration-color: var(--on-header); }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
/* The wordmark: "Here" and the white tag. White on orange is the logo's
   exception (brand guide §2); nothing else on orange is white. */
.wordmark { display: inline-flex; align-items: center; gap: 6px; height: 40px; text-decoration: none; }
.wordmark__here { color: var(--hm-color-white); font-weight: 900; font-size: 30px; line-height: 1; letter-spacing: -0.01em; }
.wordmark img { height: 100%; width: auto; }
.topbar__back { font-weight: 600; font-size: 15px; padding: 10px 0; }
.eyebrow { display: block; margin-top: var(--s8); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.doc-head h1 { margin: var(--s2) 0 0; font-weight: 900; font-size: clamp(32px, 7vw, 48px); line-height: 1.1; letter-spacing: -0.015em; max-width: 22ch; }
.lede { margin: var(--s4) 0 0; font-size: 18px; line-height: 1.55; max-width: 62ch; }
.doc-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); margin: var(--s6) 0 0; padding: 0; list-style: none; font-size: 15px; }
.doc-meta b { font-weight: 700; }

/* ─────────────────────────────  LAYOUT  ─────────────────────────── */
.doc-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s8); padding: var(--s8) 0 var(--s12); }
@media (min-width: 960px) {
  .doc-layout { grid-template-columns: 240px minmax(0, 1fr); gap: var(--s12); align-items: start; }
  .toc { position: sticky; top: var(--s6); max-height: calc(100vh - 2 * var(--s6)); overflow-y: auto; }
}
.toc { background: var(--surface); border-radius: var(--hm-radius-card); padding: var(--s4) var(--s4) var(--s2); }
.toc h2 { margin: 0 0 var(--s2); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a { display: flex; gap: var(--s2); padding: 7px var(--s2); border-radius: 8px; font-size: 15px; line-height: 1.35; text-decoration: none; color: var(--text); }
.toc a::before { content: counter(toc) "."; flex: none; min-width: 1.6em; color: var(--muted); font-variant-numeric: tabular-nums; }
.toc a:hover { background: var(--bg); }
.toc a.active { background: var(--note-bg); color: var(--note-text); font-weight: 600; }
.toc a.active::before { color: var(--note-text); }
.toc:not(:has(li)) { display: none; }

/* ─────────────────────────────  PROSE  ──────────────────────────── */
.prose { min-width: 0; }
.prose > section > :not(.table-frame):not(.charter) { max-width: 72ch; }
.prose > section { padding-top: var(--s6); }
.prose > section + section { border-top: 1px solid var(--border); margin-top: var(--s8); }
.prose h2 { margin: 0 0 var(--s4); font-weight: 900; font-size: clamp(24px, 4.2vw, 30px); line-height: 1.2; display: flex; gap: var(--s3); align-items: baseline; }
.prose h2 .n { flex: none; font-size: 16px; font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.prose h3 { margin: var(--s6) 0 var(--s2); font-weight: 700; font-size: 20px; line-height: 1.3; }
.prose h4 { margin: var(--s4) 0 var(--s2); font-weight: 700; font-size: 17px; }
.prose p { margin: 0 0 var(--s4); }
.prose ul, .prose ol { margin: 0 0 var(--s4); padding-left: var(--s6); }
.prose li { margin-bottom: var(--s2); }
.prose li::marker { color: var(--accent-text); }
.prose strong { font-weight: 700; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; background: var(--surface); border-radius: 6px; padding: 1px 6px; }
.prose blockquote { margin: 0 0 var(--s4); padding: var(--s4) var(--s6); border-left: 4px solid var(--hm-color-brand-orange); background: var(--surface); border-radius: 0 var(--hm-radius-control) var(--hm-radius-control) 0; }
.prose blockquote p:last-child { margin-bottom: 0; }
.muted { color: var(--muted); }

/* A point that must not be missed: a limit, a deadline, a right. */
.note { background: var(--note-bg); color: var(--note-text); border-radius: var(--hm-radius-card); padding: var(--s4) var(--s6); margin: var(--s6) 0; }
.note a { color: var(--note-text); text-decoration-color: currentColor; }
.note p:last-child, .note ul:last-child { margin-bottom: 0; }
.note-tag { display: block; margin-bottom: var(--s1); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }

/* The charter: four promises, each backed by a mechanism. */
.charter { list-style: none; padding: 0 !important; display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.charter li { margin: 0; background: var(--surface); border-radius: var(--hm-radius-card); padding: var(--s4); }
.charter li::marker { content: none; }
.charter strong { display: block; font-size: 18px; margin-bottom: var(--s1); }

/* ─────────────────────────────  TABLES  ─────────────────────────────
   Wide tables scroll sideways inside their frame. On a phone, legal.js labels
   each cell and a .stack table becomes one card per row; without the script
   the table still scrolls, so nothing is ever hidden. */
.table-frame { overflow-x: auto; margin: var(--s4) 0 var(--s6); border: 1px solid var(--border); border-radius: var(--hm-radius-control); }
.prose table { border-collapse: collapse; width: 100%; min-width: 600px; font-size: 15px; line-height: 1.5; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: var(--s3) var(--s4); border-bottom: 1px solid var(--border); }
.prose th { background: var(--surface); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.prose tbody tr:last-child td { border-bottom: none; }
.prose td:first-child { font-weight: 600; }
@media (max-width: 719px) {
  .table-frame:has(table.stack[data-labelled]) { overflow: visible; border: none; }
  .prose table.stack[data-labelled] { min-width: 0; }
  .prose table.stack[data-labelled] thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .prose table.stack[data-labelled] tr { display: block; border: 1px solid var(--border); border-radius: var(--hm-radius-control); margin-bottom: var(--s3); padding: var(--s2) 0; }
  .prose table.stack[data-labelled] td { display: block; border: none; padding: var(--s1) var(--s4); }
  .prose table.stack[data-labelled] td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  .prose table.stack[data-labelled] td:first-child { font-size: 17px; }
  .prose table.stack[data-labelled] td:first-child::before { display: none; }
}

/* ─────────────────────────────  INDEX CARDS  ──────────────────────── */
.cards { display: grid; gap: var(--s4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: var(--s4) 0 var(--s8); padding: 0; list-style: none; }
.card { display: flex; flex-direction: column; gap: var(--s2); height: 100%; padding: var(--s6); border-radius: var(--hm-radius-card); background: var(--surface); color: var(--text); text-decoration: none; border: 2px solid transparent; }
a.card:hover { border-color: var(--hm-color-brand-orange); }
.card .k { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-text); }
.card h3 { margin: 0; font-size: 22px; font-weight: 700; }
.card p { margin: 0; color: var(--muted); font-size: 16px; }
.card .who { margin-top: auto; padding-top: var(--s2); font-size: 14px; font-weight: 600; color: var(--muted); }
.card--soon { border: 2px dashed var(--border); background: transparent; }

/* ─────────────────────────────  FOOTER  ──────────────────────────── */
.site-foot { background: var(--foot-bg); color: var(--foot-text); padding: var(--s8) 0; font-size: 15px; }
.site-foot a { color: var(--foot-text); text-decoration-color: var(--hm-color-brand-orange); }
.foot-grid { display: flex; flex-wrap: wrap; gap: var(--s6) var(--s12); justify-content: space-between; }
.foot-col h2 { margin: 0 0 var(--s2); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.foot-col ul { margin: 0; padding: 0; list-style: none; }
.foot-col li { margin: 0 0 var(--s2); }
.foot-legal { margin: var(--s8) 0 0; padding-top: var(--s4); border-top: 1px solid currentColor; opacity: 0.85; }

/* ─────────────────────────────  PRINT  ───────────────────────────── */
@media print {
  .skip, .topbar__back, .toc, .site-foot .foot-grid { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .doc-head { background: none; color: #000; padding: 0 0 12pt; border-bottom: 2pt solid #000; border-radius: 0; }
  .doc-head a, .doc-head .wordmark__here { color: #000; }
  .doc-layout { display: block; padding-top: 12pt; }
  .prose { max-width: none; }
  .prose a::after { content: " (" attr(href) ")"; font-size: 0.85em; }
  .prose a[href^="#"]::after { content: ""; }
  .table-frame { overflow: visible; border: none; }
  .prose table { min-width: 0; }
  .prose th, .prose td { border: 0.5pt solid #000; }
  .note, .charter li, .prose blockquote { background: none; border: 1pt solid #000; }
  .prose > section { break-inside: auto; }
  .prose h2, .prose h3 { break-after: avoid; }
  .site-foot { background: none; color: #000; padding: 12pt 0 0; }
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* The index page: cards, not prose. */
.prose-index { padding: var(--s8) 0 var(--s12); }
.prose-index .cards { margin-top: 0; }