/* Shared styles for the standalone content pages (about, privacy, terms).
   Tokens mirror #home-view in index.html so these pages match the landing
   page without pulling in its whole stylesheet. */

:root{
  --bg:#ffffff;
  --bg-soft:#f3f3f9;
  --card:#ffffff;
  --ink:#1b1c1e;
  --ink-2:#495057;
  --ink-3:#878a99;
  --line:#e9ebec;
  --accent:#405189;
  --accent-2:#6559cc;
  --lav:#ecebfa;
  --lav-ink:#5145b0;
  --font-sans:'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display:'Poppins', 'IBM Plex Sans', system-ui, sans-serif;
  --r-card:18px;
  --wrap:760px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#1a1d21; --bg-soft:#212529; --card:#212529;
    --ink:#f2f3f5; --ink-2:#ced4da; --ink-3:#9ba1ad; --line:#2c2f38;
    --accent:#8a98c4; --accent-2:#9d93e6;
    --lav:#262a34; --lav-ink:#b9b2f0;
  }
}
:root[data-theme="dark"]{
  --bg:#1a1d21; --bg-soft:#212529; --card:#212529;
  --ink:#f2f3f5; --ink-2:#ced4da; --ink-3:#9ba1ad; --line:#2c2f38;
  --accent:#8a98c4; --accent-2:#9d93e6;
  --lav:#262a34; --lav-ink:#b9b2f0;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink-2);
  font-family:var(--font-sans); font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

/* ---------- header ---------- */
.top{
  border-bottom:1px solid var(--line); background:var(--bg);
  position:sticky; top:0; z-index:5;
}
.top .in{
  max-width:var(--wrap); margin:0 auto; padding:16px 20px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.logo{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-weight:600; font-size:18px;
  color:var(--ink); text-decoration:none;
}
.logo img{width:30px; height:30px; display:block}
.top nav{margin-left:auto; display:flex; gap:18px; flex-wrap:wrap}
.top nav a{color:var(--ink-2); text-decoration:none; font-size:14.5px}
.top nav a:hover{color:var(--accent-2)}

/* ---------- body ---------- */
main{max-width:var(--wrap); margin:0 auto; padding:44px 20px 72px}
h1{
  font-family:var(--font-display); font-size:clamp(28px,5vw,40px);
  line-height:1.15; letter-spacing:-.02em; color:var(--ink); margin:0 0 10px;
}
.lede{font-size:17.5px; color:var(--ink-2); margin:0 0 8px}
.updated{font-size:14px; color:var(--ink-3); margin:0 0 36px}
h2{
  font-family:var(--font-display); font-size:21px; line-height:1.3;
  color:var(--ink); margin:40px 0 12px; letter-spacing:-.01em;
}
h3{font-size:16.5px; color:var(--ink); margin:26px 0 8px}
p{margin:0 0 15px}
ul,ol{margin:0 0 15px; padding-left:22px}
li{margin:0 0 8px}
a{color:var(--accent-2)}
strong{color:var(--ink); font-weight:600}
hr{border:0; border-top:1px solid var(--line); margin:40px 0}
code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.9em;
  background:var(--bg-soft); padding:1px 5px; border-radius:5px;
}

table{width:100%; border-collapse:collapse; margin:0 0 18px; font-size:15px}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
th{color:var(--ink); font-weight:600; font-size:13.5px}

.note{
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--r-card); padding:18px 20px; margin:0 0 22px;
}
.note :last-child{margin-bottom:0}
.callout{
  background:var(--lav); border:0; border-radius:var(--r-card);
  padding:18px 20px; margin:0 0 22px; color:var(--lav-ink);
}
.callout strong{color:inherit}
.callout :last-child{margin-bottom:0}

.toc{
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--r-card); padding:18px 22px; margin:0 0 34px;
}
.toc p{font-weight:600; color:var(--ink); margin:0 0 8px; font-size:14px}
.toc ol{margin:0; padding-left:20px; font-size:15px}
.toc li{margin:0 0 5px}

.btn{
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
  background:var(--ink); color:var(--bg); font-weight:500; font-size:15.5px;
  padding:12px 20px; border-radius:11px;
}
.btn:hover{opacity:.92}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line); background:var(--bg-soft)}
footer .in{
  max-width:var(--wrap); margin:0 auto; padding:26px 20px;
  display:flex; gap:16px; flex-wrap:wrap; align-items:center;
  font-size:14px; color:var(--ink-3);
}
footer nav{margin-left:auto; display:flex; gap:16px; flex-wrap:wrap}
footer a{color:var(--ink-2); text-decoration:none}
footer a:hover{color:var(--accent-2)}

@media (max-width:560px){
  main{padding:32px 18px 56px}
  .top .in,footer .in{padding-inline:18px}
  footer nav{margin-left:0; width:100%}
  /* One scrolling row of links instead of wrapping, and not sticky, so the
     header does not cover a third of a phone screen. */
  .top{position:static}
  .top .in{padding-block:12px}
  .top nav{margin-left:0; width:100%; flex-wrap:nowrap; overflow-x:auto; gap:16px; scrollbar-width:none}
  .top nav a{white-space:nowrap}
}

/* Screen-reader-only text, e.g. announcing that a link opens a new tab. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}