/* ===================================================================
   tsskflow.com — the legal pages' sheet

   Shared by privacy.html and terms.html; index.html keeps its own
   styles inline. The same look as the home page (DESIGN.md): a
   near-black ground, white type, hairlines instead of fills, wide
   margins. Nothing on the page is under 14px.
   =================================================================== */
:root {
  color-scheme: dark;
  --canvas: #0a0a0a;
  --surface: #101010;
  --ink: #f5f5f5;
  --neutral: #9a9a9a;
  --rule: #222222;
  --rule-strong: #2e2e2e;
  --accent: #9bb8ff;
  --sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--canvas); }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 16px/26px var(--sans); -webkit-font-smoothing: antialiased; }
.skip { position: absolute; left: 16px; top: -200px; z-index: 2; padding: 12px 16px; border-radius: 8px; background: var(--ink); color: var(--canvas); text-decoration: none; }
.skip:focus { top: 12px; }
.shell { max-width: 720px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
@media (min-width: 720px) { .shell { padding-left: 40px; padding-right: 40px; } }

/* The bar: a hairline under it, like the home page's. */
body > div.shell { max-width: none; border-bottom: 1px solid var(--rule); }
.masthead { display: flex; flex-wrap: wrap; align-items: center; gap: 0 24px; max-width: 640px; margin: 0 auto; min-height: 64px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; font-weight: 600; letter-spacing: -0.01em; color: inherit; text-decoration: none; }
.wordmark::before { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
.updated { margin-left: auto; display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--rule-strong); font-size: 14px; line-height: 20px; color: var(--neutral); }
@media (max-width: 480px) {
  .masthead { flex-direction: column; align-items: flex-start; padding: 12px 0 16px; gap: 8px; }
  .updated { margin-left: 0; }
}

main { padding: 72px 0 56px; }
@media (min-width: 720px) { main { padding: 96px 0 72px; } }
h1 { margin: 0 0 24px; font-size: 36px; line-height: 44px; font-weight: 600; letter-spacing: -0.02em; }
h2 { margin: 48px 0 12px; padding-top: 24px; border-top: 1px solid var(--rule); font-size: 20px; line-height: 28px; font-weight: 600; letter-spacing: -0.005em; }
p, li { margin: 0 0 16px; color: var(--neutral); font-size: 16px; line-height: 26px; }
p strong, li strong { color: var(--ink); font-weight: 500; }
ul { margin: 0 0 16px; padding-left: 20px; }
li { margin-bottom: 8px; }
.lede { font-size: 20px; line-height: 30px; color: var(--ink); }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rule-strong); }
a:hover { text-decoration-color: var(--accent); }
.note { margin: 24px 0; padding: 16px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule); font-size: 14px; line-height: 22px; }
footer { padding: 24px 0 56px; font-size: 14px; line-height: 22px; color: var(--neutral); border-top: 1px solid var(--rule); }
footer nav { display: flex; flex-wrap: wrap; gap: 0 20px; }
footer a { display: inline-flex; align-items: center; min-height: 40px; color: inherit; text-decoration: none; }
footer a:hover { color: var(--ink); }