/* ============================================================================
   Brute Info — css/pages/legal.css
   Shared layout for the four legal documents:
     terms.html · privacy.html · refund.html · cookies.html

   Everything here is scoped under .legal-doc / .legal-* so no shared component
   is restyled globally. Colours, radii, spacing and motion come from
   css/tokens.css exclusively — there is not a single literal colour below.
   ========================================================================== */

/* --------------------------------------------------------------------------
 * 1. TITLE BAND
 * -------------------------------------------------------------------------- */
.legal-head {
  background: var(--surface);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
/* The mesh sits BETWEEN the band's own background and its content. A negative
   z-index would push it behind that background — .legal-head is only
   position:relative, so it opens no stacking context of its own and the wash
   would never be seen. Content is lifted one layer instead. */
.legal-head::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--grad-mesh);
  opacity: 0.34;
  pointer-events: none;
  z-index: 0;
}
.legal-head .page-head-inner { position: relative; z-index: 1; }

.legal-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.legal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  padding-top: var(--space-2);
}
.legal-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-md);
  color: var(--text-muted);
}
.legal-meta-item > svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  color: var(--text-muted);
}
.legal-meta-item strong {
  color: var(--text);
  font-weight: var(--fw-semibold);
}

/* --------------------------------------------------------------------------
 * 2. THE SPLIT: sticky rail + document column
 * -------------------------------------------------------------------------- */
.legal-split {
  grid-template-columns: 17rem minmax(0, 1fr);
  gap: var(--space-10);
  align-items: start;
}

.legal-rail { gap: var(--space-3); }

.legal-toc-toggle { display: none; }

.legal-toc-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}
/* --text-subtle is below 4.5:1 on --surface in both themes, so every piece of
   real text in the rail uses --text-muted. */
.legal-toc-head .section-nav-title { color: var(--text-muted); }
.legal-toc-progress {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.legal-toc-panel { display: block; }

.legal-toc-list {
  counter-reset: legal-toc;
  max-height: none;
}
.legal-toc-list .section-nav-link {
  align-items: flex-start;
  line-height: 1.35;
  padding-block: 0.45rem;
}
.legal-toc-num {
  flex: 0 0 1.6rem;
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
  padding-top: 0.1em;
}
.section-nav-link.is-active .legal-toc-num { color: var(--primary); }

.legal-rail-aside {
  margin-top: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.legal-rail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* --------------------------------------------------------------------------
 * 3. THE DOCUMENT COLUMN
 * -------------------------------------------------------------------------- */
.legal-doc {
  gap: var(--space-10);
  max-width: 74ch;
}

.legal-lede {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-muted);
  max-width: 68ch;
}

.legal-section { scroll-margin-top: calc(var(--header-h) + var(--space-8)); }

.legal-h2 {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  font-size: var(--fs-2xl);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-4);
}
.legal-num {
  flex: 0 0 auto;
  font-size: var(--fs-lg);
  font-weight: var(--fw-extrabold);
  font-variant-numeric: tabular-nums;
  color: var(--primary);
  letter-spacing: var(--tracking-normal);
}
.legal-h2-text { min-width: 0; }

/* Copy-link affordance — visible on hover, on keyboard focus, and always on
   touch devices where there is no hover. */
.legal-copy {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard);
  align-self: center;
}
.legal-copy > svg { width: 1rem; height: 1rem; }
.legal-section:hover .legal-copy,
.legal-copy:focus-visible,
.legal-copy.is-done { opacity: 1; transform: none; }
.legal-copy:hover {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--primary);
}
.legal-copy:active {
  background: var(--surface-3);
  border-color: var(--border-strong);
}
.legal-copy:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}
.legal-copy.is-done { color: var(--success); }
@media (hover: none) {
  .legal-copy { opacity: 1; transform: none; }
}

.legal-h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text);
  letter-spacing: var(--tracking-tight);
}

/* Comfortable reading measure — the whole point of a legal page. */
.legal-prose { max-width: 68ch; }
.legal-prose > * + * { margin-top: var(--space-4); }
.legal-prose p { line-height: var(--lh-relaxed); }
.legal-prose ul,
.legal-prose ol { display: grid; gap: var(--space-3); padding-left: var(--space-6); }
.legal-prose li { line-height: var(--lh-relaxed); }
.legal-prose li::marker { color: var(--text-muted); }
.legal-prose ol.legal-ol-alpha { list-style: lower-alpha; }
.legal-prose dl { display: grid; gap: var(--space-4); }
.legal-prose dt { font-weight: var(--fw-bold); color: var(--text); }
.legal-prose dd { margin: var(--space-1) 0 0; }

/* A defined term, e.g. "Platform" in the terms definitions list. */
.legal-term {
  font-weight: var(--fw-bold);
  color: var(--text);
}

/* Key-facts strip under the lede. Every document carries exactly four facts,
   so the column count is fixed rather than auto-fit — auto-fit left a 3 + 1
   orphan row at the widths where the document column is widest. */
.legal-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  padding: 0;
  margin: 0;
  list-style: none;
}
@media (min-width: 1200px) {
  .legal-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 460px) {
  .legal-facts { grid-template-columns: minmax(0, 1fr); }
}
.legal-fact {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.legal-fact dt {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}
.legal-fact dd {
  margin: 0;
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--text);
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
 * 4. ENTITY IDENTITY BLOCK (repeated at the foot of all four documents)
 * -------------------------------------------------------------------------- */
.legal-entity { display: grid; gap: var(--space-5); }
.legal-entity-name {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  color: var(--text);
}
.legal-entity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-5);
  margin: 0;
}
.legal-entity-grid > div { display: flex; flex-direction: column; gap: var(--space-1); }
.legal-entity-grid dt {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}
.legal-entity-grid dd {
  margin: 0;
  font-size: var(--fs-md);
  color: var(--text);
  line-height: 1.55;
}
.legal-entity-grid address { font-style: normal; }
.legal-id-pending {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
 * 5. COOKIE / STORAGE TABLE + PREFERENCES PANEL (cookies.html)
 * -------------------------------------------------------------------------- */
/* The reference tables carry five columns of prose inside a 68ch reading
   measure. Left at the default table metrics their intrinsic width exceeds the
   document column at every desktop size, so the wrapper scrolled sideways with
   no affordance and the last column was always clipped. Tightening the gutters
   and letting the header labels wrap brings them inside the column instead. */
.legal-doc .table-wrap { max-width: none; }
.legal-doc .table { table-layout: auto; }
.legal-doc .table th,
.legal-doc .table td { padding-inline: var(--space-3); vertical-align: top; }
.legal-doc .table thead th { white-space: normal; }
.legal-doc .table caption { padding-inline: var(--space-3); }

.legal-key {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  white-space: nowrap;
  color: var(--primary-soft-text);
}
.legal-table-note {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.55;
}

/* Below 720px the shared .table-collapse pattern turns every row into a card.
   It assumes a <td> per cell and a right-aligned value; these documents use a
   <th scope="row"> key and long prose values, so the value stacks under its
   label and the row header becomes the card title. */
@media (max-width: 720px) {
  .legal-doc .table-collapse tbody tr {
    padding: var(--space-3) var(--space-4);
  }
  .legal-doc .table-collapse tbody tr > th[scope="row"] {
    display: block;
    padding: 0 0 var(--space-2);
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
  }
  /* A grid or flex container turns every inline run inside the cell — the
     prose, each <code>, even the full stop after it — into its own track, so
     the sentence arrives shredded one fragment per line. These cells hold
     running prose, so the value has to stay in normal inline flow with only
     the label lifted onto its own line. */
  .legal-doc .table-collapse td {
    display: block;
    text-align: left;
    padding-inline: 0;
  }
  .legal-doc .table-collapse td::before {
    display: block;
    margin-bottom: var(--space-1);
    text-align: left;
    /* --text-subtle is 3.7:1 on the light-theme card. Labels are real text. */
    color: var(--text-muted);
  }
  /* .table-collapse becomes display:block here, which leaves the <caption> as
     the only table-formatted box left in the table — it then shrink-wraps to
     its longest word and reads one word per line. Make it a plain block. */
  .legal-doc .table-collapse caption {
    display: block;
    width: 100%;
    padding-inline: 0;
    padding-bottom: var(--space-3);
  }
}

.legal-prefs { display: grid; gap: 0; }
.legal-pref-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
  padding-block: var(--space-4);
}
.legal-pref-row + .legal-pref-row { border-top: 1px solid var(--border-subtle); }
.legal-pref-copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.legal-pref-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text);
}
.legal-pref-hint {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 54ch;
}
.legal-pref-control { flex: 0 0 auto; padding-top: 0.15rem; }
.legal-pref-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
 * 6. RESPONSIVE — the rail collapses into a disclosure
 * -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .legal-split {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
  }
  /* Below 900px the shared .split-rail turns into a horizontal chip scroller.
     These documents keep a vertical disclosure card instead, so the row
     direction and the scroller's padding have to be undone explicitly. */
  .legal-rail {
    position: static;
    flex-direction: column;
    max-height: none;
    overflow: visible;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: var(--space-2);
    gap: var(--space-2);
  }
  .legal-toc-head { display: none; }
  .legal-toc-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    text-align: left;
  }
  .legal-toc-toggle:hover { background: var(--surface-2); }
  .legal-toc-toggle:focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: -2px;
  }
  .legal-toc-toggle > svg:first-child {
    width: 1.1rem;
    height: 1.1rem;
    color: var(--primary);
    flex: 0 0 auto;
  }
  .legal-toc-caret {
    margin-left: auto;
    width: 1.1rem;
    height: 1.1rem;
    color: var(--text-subtle);
    transition: transform var(--dur-fast) var(--ease-standard);
  }
  .legal-toc-toggle[aria-expanded="true"] .legal-toc-caret { transform: rotate(180deg); }
  .legal-toc-panel { display: none; padding: 0 var(--space-1) var(--space-2); }
  .legal-toc.is-open .legal-toc-panel { display: block; }
  .legal-toc-list .section-nav-link { border-left: 0; }
  .legal-rail-aside { margin-top: 0; padding: 0 var(--space-3) var(--space-2); }
  .legal-doc { max-width: 100%; }
}

@media (max-width: 640px) {
  .legal-pref-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }
  .legal-h2 { font-size: var(--fs-xl); }
}

/* --------------------------------------------------------------------------
 * 7. PRINT — a legal document has to survive being printed and filed
 * -------------------------------------------------------------------------- */
@media print {
  .legal-rail,
  .legal-copy,
  .legal-print-hide,
  .legal-pref-control,
  .legal-pref-foot { display: none !important; }

  .legal-head {
    padding-block: 0 var(--space-4);
    border-bottom: 1px solid var(--border-strong);
    background: none;
  }
  .legal-head::before { display: none; }

  .legal-split { display: block; }
  .legal-doc { max-width: none; gap: var(--space-6); }
  .legal-prose { max-width: none; }

  .legal-section {
    break-inside: avoid;
    page-break-inside: avoid;
    padding-block: var(--space-2);
  }
  .legal-h2 {
    break-after: avoid;
    page-break-after: avoid;
    font-size: 13pt;
  }
  .legal-num { color: inherit; }

  .legal-facts,
  .legal-entity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .legal-fact,
  .legal-entity { border: 1px solid var(--border-strong); }

  /* Print the target of every in-document reference so a paper copy is usable */
  .legal-prose a[href^="http"]::after,
  .legal-prose a[href^="mailto"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    word-break: break-all;
  }

  .legal-print-foot {
    margin-top: var(--space-6);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-strong);
    font-size: 9pt;
    color: var(--text-muted);
  }
}

/* --------------------------------------------------------------------------
 * 8. MOTION
 * -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .legal-copy,
  .legal-toc-caret { transition: none; }
}
:root[data-motion="reduced"] .legal-copy,
:root[data-motion="reduced"] .legal-toc-caret { transition: none; }