/* Shared styling for the legal + goodbye pages (/privacy, /terms, /bye).
 *
 * Deliberately plain. These pages exist to be READ — by a person looking for one answer, and by a
 * Google OAuth reviewer checking that what we disclose matches what we do. Every design choice
 * here serves legibility over impression: one column at a comfortable measure, real headings a
 * reviewer can skim, tables where the honest answer is a table.
 *
 * Loads the same tokens as app.css so it cannot drift from the product's palette.
 */

:root {
  --bg: #0A0A0B;
  --surface: #141416;
  --surface-alt: #1C1C1F;
  --hairline: #2A2C2E;
  --ink: #F4F5F2;
  --ink-2: #9EA09C;
  --ink-3: #8E918B;
  --volt: #CFF53F;
  --display: "SF Compressed Display", "SF Compact Display", -apple-system, "Roboto Condensed",
             "Archivo Narrow", "Segoe UI", system-ui, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--ink);
  font-family: var(--text);
  -webkit-font-smoothing: antialiased;
}

.legal {
  /* ~70 characters at this size — the measure prose is actually readable at. */
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 96px;
}

.legal-nav {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 48px;
  font-family: var(--display);
  font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.legal-nav a { color: var(--ink-2); text-decoration: none; }
.legal-nav a:hover { color: var(--ink); }
.legal-nav .mark { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.legal-nav svg { width: 18px; height: 18px; }

h1 {
  font-family: var(--display);
  font-size: clamp(1.9rem, 5vw, 2.6rem);
  line-height: 1.05; letter-spacing: -0.01em;
  margin: 0 0 12px;
  text-transform: uppercase;
}
.updated { color: var(--ink-3); font-size: 0.86rem; margin: 0 0 40px; }

h2 {
  font-family: var(--display);
  font-size: 1.12rem; letter-spacing: 0.04em; text-transform: uppercase;
  margin: 44px 0 12px; padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
h3 { font-size: 0.98rem; margin: 26px 0 8px; color: var(--ink); }

p, li { color: var(--ink-2); line-height: 1.62; font-size: 0.95rem; }
p { margin: 0 0 14px; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 7px; }
strong { color: var(--ink); font-weight: 600; }
a { color: var(--volt); text-decoration: none; border-bottom: 1px solid rgba(207, 245, 63, 0.35); }
a:hover { border-bottom-color: var(--volt); }

code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.85em;
  background: var(--surface-alt);
  padding: 1px 5px; border-radius: 3px;
  color: var(--ink);
  /* Long field masks and endpoints must wrap rather than force the page sideways. */
  overflow-wrap: anywhere;
}

/* Tables carry the collection disclosures. They scroll INSIDE their own box so the page body
   never scrolls horizontally on a phone. */
.table-wrap { overflow-x: auto; margin: 0 0 20px; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 0.88rem; }
th {
  text-align: left; padding: 9px 12px;
  background: var(--surface-alt); color: var(--ink);
  font-family: var(--display); font-size: 0.76rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: 1px solid var(--hairline);
}
td { padding: 9px 12px; border-bottom: 1px solid var(--hairline); color: var(--ink-2); vertical-align: top; }

/* The one thing on these pages that should stop the eye: the verbatim Limited Use statement and
   the notice-at-collection. A reviewer should find them without reading the whole page. */
.callout {
  background: var(--surface);
  border-left: 2px solid var(--volt);
  padding: 16px 18px;
  margin: 0 0 22px;
}
.callout p:last-child { margin-bottom: 0; }
.callout--quiet { border-left-color: var(--hairline); }

.legal-foot {
  margin-top: 64px; padding-top: 20px;
  border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  font-size: 0.8rem; color: var(--ink-3);
}
.legal-foot a { color: var(--ink-3); border-bottom: none; }
.legal-foot a:hover { color: var(--ink); }

/* --- /bye ---------------------------------------------------------------- */
.bye { max-width: 560px; text-align: left; }
.reasons { display: flex; flex-direction: column; gap: 10px; margin: 26px 0 22px; }
.reason {
  display: block; width: 100%; text-align: left;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--hairline); border-radius: 6px;
  padding: 14px 16px; font: inherit; font-size: 0.93rem;
  cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.reason:hover { border-color: var(--ink-3); background: var(--surface-alt); }
.reason:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.reason[aria-pressed="true"] { border-color: var(--volt); background: var(--surface-alt); }
.bye-thanks { color: var(--volt); font-size: 0.95rem; margin-top: 18px; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}