/* The legal pages (/terms, /privacy, /dpa) - same colours as the rest of Postybuddy. */
:root[data-theme="dark"] {
  --bg: #10131c; --surface: #171b28; --ink: #eef1fb; --muted: #9aa2bd; --safelight: #7d93ec; --border: #2a2f42;
  --ph-bg: rgba(232, 176, 61, 0.16); --ph-ink: #f0c56b;
}
:root[data-theme="light"] {
  --bg: #f4f6fb; --surface: #ffffff; --ink: #1a1f2b; --muted: #5b6275; --safelight: #3d5ac9; --border: #e2e6f0;
  --ph-bg: rgba(232, 176, 61, 0.22); --ph-ink: #7a5208;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px; line-height: 1.6;
}
a { color: var(--safelight); }
.top {
  max-width: 820px; margin: 0 auto; padding: 18px 20px 0;
  display: flex; align-items: center; justify-content: space-between;
}
.brand { font-weight: 700; font-size: 18px; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
/* The app icon at the top of the Terms, Privacy and DPA pages, the same image
   as the website, the browser tab and the stores (TikTok's app review checks
   for it). Added here so legal.js doesn't need to change. */
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand::before {
  content: ""; flex: none; width: 40px; height: 40px;
  background: url("/icon-192.png") center / contain no-repeat;
}
.tabs {
  max-width: 820px; margin: 18px auto 0; padding: 0 20px;
  display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--border);
}
.tabs a {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12.5px;
  color: var(--muted); text-decoration: none; padding: 9px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tabs a:hover { color: var(--ink); }
.tabs a.active { color: var(--ink); border-bottom-color: var(--safelight); font-weight: 500; }
/* Pinned while scrolling, like the website's top bar: the bar with the icon,
   and right under it the Terms / Privacy / DPA tabs. The box-shadow + clip-path
   pair paints their background across the full screen width without making
   the page wider. scroll-padding: a link to #legal-notice (or any section)
   lands below the pinned part, not under it. */
html { scroll-padding-top: 116px; }
.top {
  position: sticky; top: 0; z-index: 51;
  height: 64px; padding: 0 20px;
  background: var(--bg); box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax);
}
.tabs {
  position: sticky; top: 64px; z-index: 50; margin-top: 6px;
  background: var(--bg); box-shadow: 0 0 0 100vmax var(--bg); clip-path: inset(0 -100vmax);
}
/* Phones: slimmer, and the tabs stay on one row (swipe sideways if they
   don't all fit) so the pinned part stays small. */
@media (max-width: 560px) {
  html { scroll-padding-top: 112px; }
  .top { height: 56px; }
  .brand { font-size: 17px; gap: 8px; }
  .brand::before { width: 32px; height: 32px; }
  .tabs { top: 56px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 2px; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { padding: 8px 10px; white-space: nowrap; flex: none; }
}
.doc { max-width: 820px; margin: 0 auto; padding: 8px 20px 40px; }
.doc h1 { font-size: 30px; line-height: 1.2; margin: 28px 0 6px; letter-spacing: -0.01em; }
.doc .updated { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 12.5px; color: var(--muted); margin: 0 0 28px; }
.doc h2 { font-size: 21px; line-height: 1.3; margin: 40px 0 10px; scroll-margin-top: 16px; }
.doc p, .doc li { max-width: 72ch; }
.doc ul, .doc ol { padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc li > ul { margin-top: 6px; }
.doc strong { font-weight: 600; }
.doc table {
  width: 100%; border-collapse: collapse; margin: 14px 0 18px; font-size: 14.5px; line-height: 1.5;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  display: block; overflow-x: auto;
}
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--border); min-width: 120px; }
.doc tr:last-child td { border-bottom: none; }
.doc th {
  font-family: 'IBM Plex Mono', ui-monospace, monospace; font-size: 11.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
}
.doc td:first-child { font-weight: 500; }
.ph { background: var(--ph-bg); color: var(--ph-ink); border-radius: 3px; padding: 0 3px; }
.foot {
  max-width: 820px; margin: 0 auto; padding: 22px 20px 40px; border-top: 1px solid var(--border);
  font-size: 13.5px; color: var(--muted);
}
.foot p { margin: 4px 0; }
.theme-switch {
  position: relative; width: 52px; height: 28px; flex: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; cursor: pointer; padding: 0;
}
.theme-switch-icon { position: absolute; top: 50%; transform: translateY(-50%); font-size: 12px; line-height: 1; }
.theme-switch-icon.sun { left: 7px; color: var(--safelight); }
.theme-switch-icon.moon { right: 7px; color: var(--ink); }
.theme-switch-knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--safelight); box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform 0.2s ease;
}
:root[data-theme="light"] .theme-switch-knob { transform: translateX(24px); background: #4a4640; }
:root[data-theme="light"] .theme-switch-icon.sun { opacity: 0.35; }
:root[data-theme="dark"] .theme-switch-icon.moon { opacity: 0.35; }
@media (max-width: 560px) {
  .doc h1 { font-size: 25px; }
  .doc table { font-size: 13.5px; }
  .doc th, .doc td { min-width: 104px; padding: 9px 10px; }
}
@media print {
  .top, .tabs, .foot { display: none; }
  body { background: #fff; color: #000; }
}