/*
 * Shared styling for the hosted legal pages (privacy, terms, subprocessors,
 * delete-account). The landing page and 404 use site.css, which carries the
 * same tokens over a wider layout.
 *
 * Palette and font stack match the server-rendered pages
 * (server/src/routes/checkout-done.ts, mcp/oauth/signin-page.ts) so the whole
 * Hirdfit web surface reads as one product. The card there is a centred
 * min(92vw, 380px) confirmation box; a legal document needs a wide, top-aligned
 * column instead, so only the tokens carry over, not the layout.
 *
 * Deliberately zero external requests — no webfonts, no CDN. These pages
 * enumerate every recipient of user data; a font fetch here would silently add
 * one they would then have to disclose. (The app itself stopped doing exactly
 * that when google_fonts was dropped for a bundled Inter.)
 */

:root {
  color-scheme: dark;
  --bg: #16181d;
  --surface: #1e2129;
  --border: #2c3040;
  --text: #e6e8ee;
  --muted: #9aa1b2;
  --accent: #7c9cff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 40px 20px 96px;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.65;
}

main {
  width: min(100%, 720px);
  margin: 0 auto;
}

a { color: var(--accent); }

.home {
  display: inline-block;
  margin-bottom: 28px;
  color: var(--muted);
  font-size: 0.85rem;
  text-decoration: none;
}
.home:hover { color: var(--text); }

h1 {
  font-size: 1.6rem;
  line-height: 1.25;
  margin: 0 0 6px;
}

.updated {
  color: var(--muted);
  font-size: 0.85rem;
  margin: 0 0 28px;
}

h2 {
  font-size: 1.1rem;
  margin: 40px 0 10px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

h3 {
  font-size: 0.98rem;
  margin: 24px 0 8px;
}

p, ul, ol { margin: 0 0 14px; }
ul, ol { padding-left: 22px; }
li { margin-bottom: 6px; }

strong { color: #fff; }

/* Controller identity block and other call-outs. */
.box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 0 0 28px;
}
.box p:last-child { margin-bottom: 0; }
.box .label {
  color: var(--muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
}

/* Recipient / retention tables. Wide content scrolls inside its own
   container so the page body never scrolls horizontally on a phone. */
.table-wrap {
  overflow-x: auto;
  margin: 0 0 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  font-size: 0.88rem;
}

th, td {
  text-align: left;
  vertical-align: top;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}

th {
  background: var(--surface);
  font-weight: 600;
  white-space: nowrap;
}

tr:last-child td { border-bottom: none; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.87em;
  color: var(--muted);
}

footer {
  margin-top: 48px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 0.85rem;
}

/* Store reviewers and auditors print these. */
@media print {
  :root { color-scheme: light; }
  body { background: #fff; color: #000; padding: 0; font-size: 11pt; }
  a { color: #000; }
  .home { display: none; }
  .box, .table-wrap, th, td { border-color: #999; }
  .box, th { background: #f2f2f2; }
  strong { color: #000; }
  code { color: #333; }
  h2 { break-after: avoid; }
  .table-wrap { overflow-x: visible; }
  table { min-width: 0; }
}