/* landing/legal-fold.css — styles for lib/legal-fold.js (the "Folded" Terms and Privacy layout, approved 5 Nov 2026,
   design: mockups/legal-pages-concept.html variant 3). Every rule but the first block sits under html.legal-folded, which the script adds
   after it has rebuilt the page. The one exception, the reading sizes just below, applies with or without JavaScript.
   Tokens are landing/dg-system.css's --dg-*; motion is BRAND.md §6 (house curve, 200ms, transform/opacity only). */

/* Reading sizes for the legal text, with or without the fold. dg-system.css sets 14px body / 12px tables, which
   never applied until its type scale was fixed on 5 Nov (a comment had swallowed it). Readers have had 16px since
   May, and 14px is too small for long legal reading on a phone, so these keep it. Same selectors as dg-system.css;
   this file loads after it, so it wins the tie. */
html[data-theme] body .legal-body p, html[data-theme] body .legal-body li { font-size: 16px; }
html[data-theme] body .legal-body h3 { font-size: 17px; }
html[data-theme] body .legal-table, html[data-theme] body .legal-table td, html[data-theme] body .legal-table th { font-size: 14.5px; }
html[data-theme] body .legal-table th { font-size: 10.5px; }

html.legal-folded .legal-toc { display: none; }
html.legal-folded body .legal-body { max-width: 820px; }

/* Search + Open all */
html.legal-folded .legal-body .lf-tools { display: flex; gap: 10px; align-items: center; margin: 8px 0 10px; }
html.legal-folded .legal-body .lf-search { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border-radius: 12px;
  background: var(--dg-bg-2); border: 1px solid var(--dg-rule); color: var(--dg-text-dim); cursor: text; }
html.legal-folded .legal-body .lf-search:focus-within { border-color: color-mix(in oklab, var(--dg-accent) 60%, var(--dg-rule));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--dg-accent) 16%, transparent); }
html.legal-folded .legal-body .lf-search svg { flex: none; }
/* 16px: iOS zooms the page into any smaller input. */
html.legal-folded .legal-body .lf-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--dg-text);
  font: 400 16px/1.3 Inter, system-ui, sans-serif; -webkit-appearance: none; appearance: none; }
html.legal-folded .legal-body .lf-search input::placeholder { color: var(--dg-text-dim); }
html.legal-folded .legal-body .lf-all { min-height: 48px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--dg-rule); background: transparent;
  color: var(--dg-text-2); font: 600 14px/1 Inter, system-ui, sans-serif; cursor: pointer; white-space: nowrap; }
html.legal-folded .legal-body .lf-count { min-height: 22px; margin: 0 2px 12px; font-size: 13px; line-height: 1.5; color: var(--dg-text-dim); }
html.legal-folded .legal-body .lf-empty { padding: 28px 4px; color: var(--dg-text-2); }

/* The list */
html.legal-folded .legal-body .lf-list { list-style: none; margin: 0 0 28px; padding: 0; border: 1px solid var(--dg-rule); border-radius: 18px;
  background: var(--dg-bg-2); overflow: hidden; }
html.legal-folded .legal-body .lf-row + .lf-row { border-top: 1px solid var(--dg-rule-soft); }
html.legal-folded .legal-body .lf-head { position: relative; padding: 18px 20px 18px 68px; min-height: 64px; cursor: pointer; }
html.legal-folded body .legal-body h2.lf-h { margin: 0; font: inherit; letter-spacing: 0; scroll-margin-top: calc(var(--lf-top, 0px) + 72px); }
html.legal-folded .legal-body .lf-row { scroll-margin-top: calc(var(--lf-top, 0px) + 72px); }
html.legal-folded .legal-body .lf-btn { position: static; display: block; width: 100%; padding: 0 30px 0 0; border: 0; background: none; text-align: left;
  color: var(--dg-text); font: 600 17px/1.35 Inter, system-ui, sans-serif; cursor: pointer; }
/* The whole row is the button's tap area. */
html.legal-folded .legal-body .lf-btn::after { content: ""; position: absolute; inset: 0; }
html.legal-folded .legal-body .lf-btn:focus-visible { outline: none; }
html.legal-folded .legal-body .lf-btn:focus-visible::after { outline: 2px solid var(--dg-accent); outline-offset: -3px; border-radius: 4px; }
html.legal-folded .legal-body .lf-n { position: absolute; left: 20px; top: 16px; font: 600 20px/1.2 'Fraunces', Georgia, serif; color: var(--dg-text-dim);
  font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum", "tnum"; }
html.legal-folded .legal-body .lf-btn svg { position: absolute; right: 20px; top: 21px; color: var(--dg-text-dim); transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1); }
html.legal-folded .legal-body .lf-s { position: relative; margin: 4px 30px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--dg-text-dim);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
html.legal-folded .legal-body .lf-s a { position: relative; z-index: 1; }
html.legal-folded .legal-body .lf-wl { display: block; margin-bottom: 2px; font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--dg-danger); }
html.legal-folded .legal-body .lf-row.open .lf-n { color: var(--dg-accent); }
html.legal-folded .legal-body .lf-row.open .lf-btn svg { transform: rotate(90deg); color: var(--dg-accent); }
html.legal-folded .legal-body .lf-row.open .lf-s { display: block; color: var(--dg-text-2); }
html.legal-folded .legal-body .lf-body { padding: 0 20px 22px 68px; animation: lf-in 200ms cubic-bezier(0.16, 1, 0.3, 1) backwards; }
html.legal-folded .legal-body .lf-body[hidden] { display: none; }
html.legal-folded .legal-body .lf-body > :first-child { margin-top: 0; }
@keyframes lf-in { from { opacity: 0; } }
html.legal-folded .legal-body mark.lf-mark { background: color-mix(in oklab, var(--dg-accent) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }

/* Controls: no text selection, no long-press menu, no double-tap zoom wait. Section text stays selectable. */
html.legal-folded .legal-body .lf-btn, html.legal-folded .legal-body .lf-all, html.legal-folded .legal-body .lf-head { -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
html.legal-folded .legal-body .lf-head:active { background: color-mix(in oklab, var(--dg-text) 4%, transparent); }
html.legal-folded .legal-body .lf-all:active { transform: scale(.97); }
html.legal-folded .legal-body .lf-all { transition: transform 150ms cubic-bezier(0.16, 1, 0.3, 1); }

@media (hover: hover) and (pointer: fine) {
  html.legal-folded .legal-body .lf-head:hover { background: color-mix(in oklab, var(--dg-text) 3%, transparent); }
  html.legal-folded .legal-body .lf-head:hover .lf-btn svg { color: var(--dg-text); }
  html.legal-folded .legal-body .lf-all:hover { color: var(--dg-text); border-color: color-mix(in oklab, var(--dg-text) 25%, var(--dg-rule)); }
}

/* Phones, upright or sideways (a Pro Max on its side is 956px wide, so the second clause catches it). */
@media (max-width: 899px), (hover: none) and (pointer: coarse) and (max-height: 500px) {
  /* The bar's background runs to both screen edges through a border-image outset, which paints outside the box
     without making it wider. (A negative margin did that once: -18px into the page's 16px margin stuck out 2px,
     and the whole page scrolled sideways on a phone.) */
  html.legal-folded .legal-body .lf-tools { position: sticky; top: var(--lf-top, 0px); z-index: 5; margin: 0 0 6px; padding: 8px 0;
    border-image: linear-gradient(color-mix(in oklab, var(--dg-bg) 92%, transparent), color-mix(in oklab, var(--dg-bg) 92%, transparent)) fill 0 / 0 / 0 100vw;
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
  html.legal-folded .legal-body .lf-all { padding: 0 12px; }
  html.legal-folded .legal-body .lf-list { border-radius: 16px; }
  html.legal-folded .legal-body .lf-head { padding: 16px 16px 16px 54px; }
  html.legal-folded .legal-body .lf-n { left: 16px; font-size: 18px; }
  html.legal-folded .legal-body .lf-btn { font-size: 16px; }
  html.legal-folded .legal-body .lf-btn svg { right: 16px; top: 19px; }
  html.legal-folded .legal-body .lf-body { padding: 0 16px 20px; }
  /* Tables become one card per row, each cell under its column name, so nothing hides off the right edge. */
  html.legal-folded .legal-body .lf-body table, html.legal-folded .legal-body .lf-body tbody, html.legal-folded .legal-body .lf-body tr, html.legal-folded .legal-body .lf-body td { display: block; width: auto; }
  html.legal-folded .legal-body .lf-body thead, html.legal-folded .legal-body .lf-body tr:has(th) { display: none; }
  html.legal-folded .legal-body .lf-body table { border: 0 !important; background: none !important; }
  html.legal-folded .legal-body .lf-body tr { border: 1px solid var(--dg-rule-soft); border-radius: 12px; margin: 0 0 10px; padding: 4px 0; background: var(--dg-bg); }
  html.legal-folded .legal-body .lf-body td { border: 0 !important; padding: 7px 14px !important; }
  html.legal-folded .legal-body .lf-body td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 10px; font-weight: 800;
    letter-spacing: .1em; text-transform: uppercase; color: var(--dg-text-dim); }
}

@media (prefers-reduced-motion: reduce) {
  html.legal-folded .legal-body .lf-body { animation: none; }
  html.legal-folded .legal-body .lf-btn svg, html.legal-folded .legal-body .lf-all { transition: none; }
}

@media print {
  html.legal-folded .legal-body .lf-tools, html.legal-folded .legal-body .lf-count, html.legal-folded .legal-body .lf-btn svg { display: none; }
  html.legal-folded .legal-body .lf-body { display: block !important; }
  html.legal-folded .legal-body .lf-list { border: 0; }
  html.legal-folded .legal-body .lf-s { display: block; }
}