/* Legal pages: same tokens as index.html (Graphite dark / Calm light). */
:root, :root[data-theme="dark"] {
    --bg: #111214; --bg-2: #0d0e10; --surface: #17181b; --surface-2: #1d1f23; --line: #25272c; --line-strong: #30333a;
    --text: #e7e8ea; --muted: #9a9da5; --faint: #888c95;
    --brand: #8083f5; --brand-solid: #5f62e6; --brand-solid-hover: #5558dd; --brand-soft: rgba(128,131,245,.14); --on-brand: #fff;
    --emerald: #46c283; --emerald-soft: rgba(70,194,131,.12); --amber: #e3a73f; --amber-soft: rgba(227,167,63,.13);
    --red: #f06464; --red-soft: rgba(240,100,100,.13); --sky: #5ca8f0; --sky-soft: rgba(92,168,240,.13); --violet: #a48cf4; --violet-soft: rgba(164,140,244,.13);
    --code-bg: #0d1117; --code-gutter: #3d444d; --code-text: #e6edf3; --code-key: #d2a8ff; --code-str: #a5d6ff; --code-com: #8b949e; --code-num: #ff7b72;
    --bar: #3a3d45; --glow: rgba(128,131,245,.16); --map-dot: #2a2d33;
    --s1: #1fb06f; --s2: #4a8fe8; --s3: #d95926; --s4: #8b7ae6; --s5: #c98500; --s6: #1f90ad; --s-other: #5f7191;
    --radius: 8px; --pill: 999px; --shadow: 0 1px 0 rgba(255,255,255,.03) inset;
    --font-ui: "Inter", system-ui, sans-serif; --font-display: "Inter", system-ui, sans-serif; --display-weight: 700; --display-track: -.025em;
    --font-mono: "Geist Mono", ui-monospace, Menlo, monospace;
    color-scheme: dark;
  }
  :root[data-theme="light"] {
    --bg: #f6f5f1; --bg-2: #efede7; --surface: #fffefb; --surface-2: #f4f2ec; --line: #e4e0d6; --line-strong: #d4cfc2;
    --text: #1d1c19; --muted: #625e55; --faint: #6f6a61;
    --brand: #1e5f4f; --brand-solid: #1e5f4f; --brand-solid-hover: #184d40; --brand-soft: #e2ece7; --on-brand: #fff;
    --emerald: #1d7a4b; --emerald-soft: #e3f0e7; --amber: #9b5f0c; --amber-soft: #f6ead6;
    --red: #ad3a30; --red-soft: #f7e3df; --sky: #2c6496; --sky-soft: #e3ecf4; --violet: #6a55b0; --violet-soft: #ebe7f5;
    --code-bg: #f7f6f2; --code-gutter: #b6b0a2; --code-text: #1d1c19; --code-key: #8250df; --code-str: #0a3069; --code-com: #5f6670; --code-num: #cf222e;
    --bar: #d9d4c8; --glow: rgba(30,95,79,.08); --map-dot: #dcd7cb;
    --s1: #13a86a; --s2: #2a78d6; --s3: #eb6834; --s4: #6f5fd8; --s5: #b07a00; --s6: #1b8aa6; --s-other: #9aa3ad;
    --radius: 4px; --pill: 3px; --shadow: 0 1px 2px rgba(29,28,25,.04);
    --font-ui: "IBM Plex Sans", system-ui, sans-serif; --font-display: "Newsreader", Georgia, serif; --display-weight: 500; --display-track: -.02em;
    color-scheme: light;
  }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
body { position: relative; z-index: 0; background: var(--bg); color: var(--text); font-family: var(--font-ui); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { color: var(--brand); text-underline-offset: 3px; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
header { border-bottom: 1px solid var(--line); }
header .wrap { display: flex; align-items: center; gap: 20px; height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -.01em; color: var(--text); text-decoration: none; }
.logo svg { width: 28px; height: 28px; }
.hdr-r { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 14.5px; }
.hdr-r a { color: var(--muted); text-decoration: none; }
.hdr-r a:hover { color: var(--text); }
.icon-btn { width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer; }
.icon-btn svg { width: 16px; height: 16px; }
.icon-btn .sun { display: none; } :root[data-theme="light"] .icon-btn .sun { display: block; } :root[data-theme="light"] .icon-btn .moon { display: none; }
main { padding-block: 56px 32px; }
.doc { max-width: 720px; }
.doc .lbl { font-size: 13px; color: var(--muted); }
.doc h1 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-track); font-size: clamp(32px, 5vw, 44px); line-height: 1.1; margin: 8px 0 12px; text-wrap: balance; }
.doc .meta { color: var(--muted); font-size: 14px; margin-bottom: 28px; }
.doc .summary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 36px; }
.doc .summary ul { margin-top: 6px; }
.layout { display: grid; grid-template-columns: minmax(0, 720px) 240px; gap: 72px; justify-content: space-between; align-items: start; }
.doc h2 { display: flex; align-items: baseline; gap: 12px; font-size: 19px; font-weight: 600; margin: 40px 0 12px; padding-top: 28px; border-top: 1px solid var(--line); letter-spacing: -.01em; scroll-margin-top: 24px; }
.doc .summary + h2 { border-top: 0; padding-top: 0; }
.doc h2 .n { font-family: var(--font-mono); font-size: 13px; font-weight: 400; color: var(--faint); min-width: 22px; }
.doc h2 ~ p, .doc h2 ~ ul, .doc h2 ~ .tbl { margin-left: 34px; }
.doc .summary li::marker { color: var(--brand); }
.toc { position: sticky; top: 32px; font-size: 13.5px; padding-left: 18px; border-left: 1px solid var(--line); }
.toc ol { list-style: none; display: grid; gap: 7px; margin-top: 10px; }
.toc a { color: var(--muted); text-decoration: none; display: flex; gap: 10px; }
.toc a:hover { color: var(--text); }
.toc a span { font-family: var(--font-mono); font-size: 12px; color: var(--faint); min-width: 16px; padding-top: 1px; }
@media (max-width: 960px) { .layout { grid-template-columns: minmax(0, 1fr); } .toc { display: none; } }
@media (max-width: 560px) { .doc h2 ~ p, .doc h2 ~ ul, .doc h2 ~ .tbl { margin-left: 0; } }
.doc p, .doc li { color: var(--text); }
.doc p + p, .doc ul + p, .doc .tbl + p { margin-top: 12px; }
.doc ul { padding-left: 20px; display: grid; gap: 6px; margin-top: 10px; }
.doc table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14.5px; }
.doc th, .doc td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { color: var(--muted); font-weight: 500; }
.tbl { overflow-x: auto; }
footer { margin-top: 72px; border-top: 1px solid var(--line); background: var(--bg-2); }
footer .wrap { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 32px 24px 40px; font-size: 13.5px; color: var(--muted); }
footer .links { display: flex; gap: 22px; flex-wrap: wrap; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover, footer a[aria-current] { color: var(--text); }
@media (max-width: 560px) { .hdr-r .home { display: none; } }
/* background: the AWS bill by service, falling after Citadel AI is connected; fixed to the bottom of the window */
.bill { position: fixed; left: 0; right: 0; bottom: 0; height: 52vh; z-index: -1; pointer-events: none; opacity: .3;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%); mask-image: linear-gradient(180deg, transparent 0%, #000 45%); }
:root[data-theme="light"] .bill { opacity: .28; }
.bill svg { width: 100%; height: 100%; display: block; }
.bill rect { stroke: var(--bg); stroke-width: 1; vector-effect: non-scaling-stroke; }
.bill .grid { stroke: var(--text); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .1; }
.bill .ghost { fill: none; stroke: var(--text); stroke-width: 2; stroke-dasharray: 6 6; vector-effect: non-scaling-stroke; opacity: 1; }
.bill .cut { stroke: var(--text); stroke-width: 1; stroke-dasharray: 2 5; vector-effect: non-scaling-stroke; opacity: .7; }
.bill span { position: absolute; font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; }
.bill .cut-l { top: 36%; font-size: 14px; font-weight: 600; transform: translateX(10px); }
header, footer { position: relative; }
@media (max-width: 760px) {
  /* phones: the text spans the full width, so the chart stays low, faint and unlabeled */
  .bill { height: 30vh; opacity: .16; }
  :root[data-theme="light"] .bill { opacity: .15; }
  .bill span { display: none; }
  /* the data table becomes one card per row */
  .doc table, .doc tbody, .doc tr, .doc td { display: block; width: 100%; }
  .doc tr:first-child { display: none; }
  .doc tr { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .doc td { border: 0; padding: 2px 0; }
  .doc td:first-child { font-weight: 600; }
  .doc td:nth-child(2)::before { content: "Why: "; color: var(--muted); }
  .doc td:nth-child(3)::before { content: "Legal basis: "; color: var(--muted); }
  .doc td:nth-child(3) { font-size: 14px; }
}
header { background: color-mix(in srgb, var(--bg) 85%, transparent); }