/* TimeLapse web, Liquid Glass: legal pages sheet (unit U6).
   privacy.html, terms.html, delete-account.html, architecture.html. Loaded after tl-tokens.css.
   Typographic restyle only: the text of these pages is frozen (spec 4.7, 5.6.4). No webfont (C1),
   no blur (5.2.2). The pages have no wrapper element, so body itself is the card. */

html{ background:var(--tl-bg); }
body{ max-width:800px; margin:32px auto; padding:44px 48px 36px; border-radius:32px;
  background-color:var(--tl-glass-fallback); border:1px solid var(--tl-glass-border); box-shadow:var(--hi-inset), var(--sh-panel);
  font:400 15px/1.65 var(--font-ui); color:var(--tl-ink); }
/* body::before / body::after: the two fixed glows of tl-tokens.css (5.2.4), z-index -1, behind the card */

h1{ font:900 clamp(28px,5vw,40px)/1.1 var(--font-display); letter-spacing:-.025em; margin:0 0 8px; }
h2{ font:700 21px/1.3 var(--font-display); margin:32px 0 10px; padding:0; border:0; }
.muted{ color:var(--tl-muted); font-size:14px; }                                 /* 4.94 on .94 */
a{ color:var(--tl-secondary); font-weight:600; text-underline-offset:3px; }      /* 6.57 */
ol li{ margin:8px 0; }                                                            /* delete-account steps, as live */

/* Tables keep display:table (critic K11: display:block drops the table semantics in WebKit/VoiceOver).
   Cell text wraps only between words and after a hyphen, never inside a word: K11's overflow-wrap:anywhere let
   auto table layout shrink a column below its longest word ("DynamoD|B", "passwordle|ss", "resend.c|om").
   The phone rule below makes the widest table (privacy, 3 columns) fit at 360 instead. */
table{ width:100%; border-collapse:separate; border-spacing:0; margin:14px 0;
  border:1px solid var(--tl-line); border-radius:16px; }
th, td{ padding:10px 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--tl-line); overflow-wrap:normal; word-break:normal; }
tr:last-child td{ border-bottom:0; }
th{ background:var(--tl-chip-bg); font:700 11.5px var(--font-ui); text-transform:uppercase; letter-spacing:.08em; color:var(--tl-muted-on-tint); }
/* keep the header tint inside the rounded table edge (radius 16 minus the 1px border) */
tr:first-child > :first-child{ border-top-left-radius:15px; }
tr:first-child > :last-child{ border-top-right-radius:15px; }

code{ font:700 .88em var(--font-mono); background:var(--tl-chip-bg); padding:1px 6px; border-radius:6px; }

/* delete-account options (legal sheet only; .card means something else on other pages) */
.card{ margin:16px 0; padding:20px 22px; border-radius:22px; background:var(--tl-field); background-image:none; border:1px solid var(--tl-line); box-shadow:none; }
.card h2{ margin-top:0; }

/* architecture data-flow box and step pills */
.flow{ margin:16px 0; padding:18px 20px; border-radius:22px; background-image:linear-gradient(var(--tl-primary-tint),var(--tl-primary-tint)); border:1px solid rgba(55,118,90,.3); }
.flow b{ color:var(--tl-ink); }
.pill{ display:inline-block; padding:3px 10px; border-radius:999px; background:var(--tl-chip-bg); font:700 12px var(--font-ui); color:var(--tl-ink); }

footer{ margin-top:40px; padding-top:16px; border-top:1px solid var(--tl-line); color:var(--tl-muted); font-size:13.5px; }
/* Touch: the footer links (Home/Privacy/Terms) are standalone navigation, not running text, so they get a
   44x44 target (inline-block keeps them on the text line, so innerText is unchanged). */
@media (pointer:coarse){ footer a{ display:inline-block; min-width:44px; min-height:44px; line-height:44px; text-align:center; } }

@media (max-width:600px){ body{ margin:12px; padding:28px 20px 24px; border-radius:24px; } }
@media (max-width:600px){ th, td{ padding:10px 9px; } }
/* Phones: with whole words the privacy table needs about 340px at 15px, the card leaves 294 at 360. The table
   bleeds 12px into the card padding (8px inset from the card edge, so its 16px radius stays concentric with the
   card's 24px), and cell text steps down to 14px with 7px side padding: about 310 of 318px at 360. */
@media (max-width:480px){
  table{ width:calc(100% + 24px); margin-left:-12px; margin-right:-12px; }
  th, td{ padding:9px 7px; }
  td{ font-size:14px; }
}

/* Windows High Contrast / forced colors: the system draws the edges, decoration is dropped (5.2.3) */
@media (forced-colors: active){
  body, .card, .flow, .pill, table{ border:1px solid CanvasText; box-shadow:none; background-image:none; }
  body::before, body::after{ display:none; }
}