/* Shared styles for the OH HAI legal pages (/privacy, /terms — issue #111). Long-form article
   layout on the same design tokens as styles.css so the pages match the marketing brand. Ported
   verbatim from site/legal.css (keep the two in step). Loaded via an absolute /legal.css path. */

*{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100% }
body{ margin:0 }

/* ---------- design tokens (kept in sync with site/index.html) ----------
   Dark is the :root DEFAULT (not gated on data-theme): with JavaScript off the head script never sets
   data-theme, and a dark-system visitor must still get the dark tokens. Light is the override — set by
   the script, or by the system @media block below when no choice is stored. */
:root, [data-theme]{
  --bg:#09090C; --bg2:#0C0C10; --card:rgba(255,255,255,0.04); --card-border:rgba(255,255,255,0.09);
  --text:#F4F4F6; --text2:rgba(255,255,255,0.60); --text3:rgba(255,255,255,0.40);
  --code:#050506; --code-text:#B9F2D0;
  --hair:rgba(255,255,255,0.08); --auto-filter:none;
  --amber:#E8B84B;
  --grad-text:linear-gradient(120deg,#FB3E4B,#C9407F,#9B46BD,#4F51BB);
}
[data-theme="light"]{
  --bg:#F6F5F2; --bg2:#FFFFFF; --card:#FFFFFF; --card-border:rgba(0,0,0,0.08);
  --text:#16161A; --text2:rgba(20,20,26,0.62); --text3:rgba(20,20,26,0.45);
  --code:#14141A; --code-text:#7BE3AB;
  --hair:rgba(0,0,0,0.07); --auto-filter:invert(1);
  --amber:#9A6B00;
}
/* No-JS fallback: with no data-theme set by the head script, follow the system (same values). */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#F6F5F2; --bg2:#FFFFFF; --card:#FFFFFF; --card-border:rgba(0,0,0,0.08);
    --text:#16161A; --text2:rgba(20,20,26,0.62); --text3:rgba(20,20,26,0.45);
    --code:#14141A; --code-text:#7BE3AB;
    --hair:rgba(0,0,0,0.07); --auto-filter:invert(1);
    --amber:#9A6B00;
  }
}

body{
  background:var(--bg); color:var(--text);
  font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{ color:inherit }
img{ display:block }
:focus-visible{ outline:2px solid #9B46BD; outline-offset:3px; border-radius:6px }
.mono{ font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace }
[data-theme="dark"] .logo-light{ display:none }
[data-theme="light"] .logo-dark{ display:none }
/* no-JS: pick the logo from the system scheme when nothing set data-theme */
@media (prefers-color-scheme: dark){ :root:not([data-theme]) .logo-light{ display:none } }
@media (prefers-color-scheme: light){ :root:not([data-theme]) .logo-dark{ display:none } }

/* ---------- layout ---------- */
.wrap{ max-width:760px; margin:0 auto; padding-left:clamp(20px,5vw,40px); padding-right:clamp(20px,5vw,40px) }

.legal-top{ padding:26px 0 0 }
.legal-top img{ height:20px }

.legal-article{ padding:14px 0 8px }
.legal-article h1{ font-size:clamp(30px,5vw,40px); line-height:1.1; margin:18px 0 6px; letter-spacing:-0.01em }
.legal-article h2{ font-size:20px; margin:34px 0 8px }
.legal-article p{ margin:14px 0; font-size:15.5px; line-height:1.65; color:var(--text2) }
.legal-article strong{ color:var(--text); font-weight:700 }
.legal-article a{ color:inherit; text-decoration:underline; text-underline-offset:2px }
.legal-article ol{ margin:14px 0; padding-left:22px }
.legal-article ul{ margin:14px 0; padding-left:22px }
.legal-article li{ margin:12px 0; font-size:15.5px; line-height:1.65; color:var(--text2) }
.legal-article code{
  font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:0.86em; background:var(--code); color:var(--code-text);
  padding:1px 6px; border-radius:5px;
}
.legal-effective{ font-size:14px; color:var(--text3) }

.legal-back{ margin:32px 0 8px; font-size:14px; color:var(--text3); text-decoration:none }
.legal-back:hover{ color:var(--text) }

/* ---------- footer (mirrors site/index.html) ---------- */
.foot{ border-top:1px solid var(--hair); margin-top:48px }
.foot .wrap{ padding-top:clamp(44px,5vw,64px); padding-bottom:40px; display:flex; flex-wrap:wrap; gap:40px }
.foot .about{ flex:1 1 260px; min-width:min(100%,240px) }
.foot .about p{ margin:14px 0; font-size:13.5px; line-height:1.55; color:var(--text2); max-width:280px }
.foot .about img{ height:20px }
.foot .by{ display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--text3) }
.foot .by img{ height:15px; filter:var(--auto-filter) }
/* Superscript ™ beside each footer wordmark — keep in step with index.html, which
   carries the full rationale. In short: `flex-start` pins the glyph's line box to
   the top of the logo box and the margin-top drops it onto the wordmark's cap
   line (31.1% into the 20px OH HAI mark, 28.4% into the 15px Autonomy mark,
   because both SVGs lead with a logomark taller than the letters). The wrappers
   are block-level `flex`, not `inline-flex`, so the `img{display:block}` reset
   keeps its no-line-box layout and nothing below the lockup shifts. */
.foot .lockup{ display:flex; align-items:flex-start }
.foot .by a{ display:flex; align-items:flex-start }
.foot .tm{ line-height:1; color:var(--text) }
.foot .tm-oh-hai{ font-size:7px; margin:5.45px 0 0 2px }
.foot .tm-autonomy{ font-size:5px; margin:3.5px 0 0 1px }
.foot .colset{ flex:0 1 auto; display:flex; flex-wrap:wrap; gap:44px }
.foot .col{ display:flex; flex-direction:column; gap:10px }
.foot .col .h{ font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--text3); margin-bottom:2px }
.foot .col a{ font-size:13.5px; color:var(--text2); text-decoration:none }
.foot .col a:hover{ color:var(--text) }
/* Named `.legal-bar` here (index.html calls the same footer bottom-bar `.foot .legal`) to avoid
   colliding with this page's `.legal-*` article classes; keep the visual rules in step with index.html. */
.foot .legal-bar{ border-top:1px solid var(--hair) }
.foot .legal-bar .wrap{ padding-top:20px; padding-bottom:20px; display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; align-items:center; font-size:12.5px; color:var(--text3) }