/* Legal pages — privacy, terms, health disclaimer.
   A reading surface, not a landing page: one column, generous measure, no
   decoration competing with the text. Tokens come from variables.css so these
   pages cannot drift from the brand.

   Fonts are the system stack on purpose. index.html pulls Fraunces and Plus
   Jakarta from Google's servers, which sends the visitor's IP to Google before
   they have agreed to anything — and a privacy policy is the one page on the
   site where doing that would be self-refuting. See 67 §3.4.6. */

* { box-sizing: border-box; }

body.legal {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.legal__bar {
  background: var(--primary-900);
  padding: 18px 0;
}
.legal__bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* The bar carries dose-logo-light.png, the white lockup — already pure white,
   so the `brightness(0) invert(1)` that used to flatten the colour artwork here
   is redundant and has been removed. The reason it existed still holds: the
   colour lockup is unreadable on this dark bar (60_BRAND_LOCKUP.md §1 measures
   it at 1.63:1). Fix that by keeping the light asset, not by reinstating a
   filter. */
.legal__bar img { height: 26px; width: auto; display: block; }
.legal__bar a { color: rgba(255, 255, 255, .78); text-decoration: none; font-size: 14px; font-weight: 600; }
.legal__bar a:hover { color: #fff; }

.wrap { width: 100%; max-width: 760px; margin: 0 auto; padding: 0 22px; }

.legal__head { padding: 52px 0 8px; }
.legal__head h1 { font-size: clamp(30px, 5vw, 40px); line-height: 1.15; margin: 0 0 10px; letter-spacing: -.02em; }
.legal__meta { color: var(--text-secondary); font-size: 14px; margin: 0; }

/* The draft banner. Deliberately loud: these documents have not been reviewed
   by a lawyer, and a reader must know that before the first clause, not after
   the last one. Remove it only when that stops being true. */
.legal__draft {
  margin: 26px 0 8px;
  padding: 16px 18px;
  border: 1px solid var(--warning);
  border-left-width: 4px;
  border-radius: 10px;
  background: var(--warning-light);
  font-size: 15px;
}
.legal__draft strong { display: block; margin-bottom: 4px; }

.legal__toc {
  margin: 30px 0 10px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.legal__toc h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-secondary); margin: 0 0 10px; }
.legal__toc ol { margin: 0; padding-left: 20px; }
.legal__toc li { margin: 4px 0; }
.legal__toc a { color: var(--primary); }

main.legal__body { padding: 8px 0 64px; }
.legal__body h2 {
  font-size: 22px;
  margin: 40px 0 12px;
  padding-top: 8px;
  letter-spacing: -.01em;
  scroll-margin-top: 20px;
}
.legal__body h3 { font-size: 17px; margin: 26px 0 8px; }
.legal__body p { margin: 0 0 14px; }
.legal__body ul { margin: 0 0 14px; padding-left: 22px; }
.legal__body li { margin: 6px 0; }
.legal__body a { color: var(--primary); }
.legal__body strong { font-weight: 700; }

table.legal__table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 20px;
  font-size: 15px;
  display: block;
  overflow-x: auto;
}
.legal__table th, .legal__table td {
  border: 1px solid var(--border);
  padding: 9px 12px;
  text-align: left;
  vertical-align: top;
}
.legal__table th { background: var(--bg-alt); font-weight: 700; }

/* Where a value is unknown until Magda's company is registered. Visible on
   purpose — an invented company name in a legal document is a false statement,
   so the gap is shown rather than filled. */
.legal__todo {
  background: var(--serotonin-bg);
  border-bottom: 2px solid var(--serotonin);
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 600;
}

.legal__note {
  margin: 20px 0;
  padding: 14px 18px;
  border-left: 3px solid var(--primary-300);
  background: var(--primary-50);
  border-radius: 0 10px 10px 0;
  font-size: 15px;
}

.legal__foot {
  border-top: 1px solid var(--border);
  padding: 26px 0 44px;
  color: var(--text-secondary);
  font-size: 14px;
}
.legal__foot a { color: var(--primary); }
.legal__foot nav { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 10px; }

@media (prefers-color-scheme: dark) {
  body.legal { background: #10201F; color: #ECEFEE; }
  .legal__toc, .legal__table th { background: #16302E; border-color: #24413F; }
  .legal__table th, .legal__table td { border-color: #24413F; }
  .legal__meta, .legal__foot { color: #9BB0AD; }
  .legal__note { background: #14322F; border-left-color: var(--primary-400); }
  .legal__draft { background: #33280E; }
  .legal__body a, .legal__toc a, .legal__foot a { color: var(--primary-300); }
  .legal__foot { border-top-color: #24413F; }
}