/* Privacy, Terms, Data Consent and the Changelog: reading pages in the dashboard's look, as wide as the dashboard. */
:root { --bg: #0b0b0c; --pane: #0e0e10; --ink: #ededef; --ink-2: #a1a1a8; --ink-3: #8a8a90; --rule: rgba(255, 255, 255, .08); --acc: #cfedfc;
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 400 15px/1.65 var(--sans); -webkit-font-smoothing: antialiased; display: flex; flex-direction: column; min-height: 100dvh; }
a { color: var(--acc); text-underline-offset: 3px; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }
header { display: flex; align-items: center; gap: 16px; height: 64px; padding: 0 20px; border-bottom: 1px solid var(--rule); background: var(--bg); position: relative; z-index: 1; }
header > a { display: flex; }
.mark { display: block; width: 40px; height: 40px; }
header nav { margin-left: auto; display: flex; gap: 4px; }
header nav a { height: 32px; padding: 0 12px; border-radius: 8px; display: inline-flex; align-items: center; color: var(--ink-2); text-decoration: none; font-size: 14px;
  transition: background-color .2s ease, color .2s ease; }
header nav a[aria-current] { color: var(--ink); background: rgba(255, 255, 255, .06); }
@media (hover: hover) and (pointer: fine) { header nav a:not([aria-current]):hover { color: var(--ink); } }
main { position: relative; z-index: 1; flex: 1 0 auto; width: 100%; max-width: 1360px; margin: 0 auto; padding: 32px 40px 96px; }
.eyebrow { margin: 0 0 8px; color: var(--ink-3); font-size: 13px; }
h1 { margin: 0 0 12px; font: 500 clamp(26px, 3vw, 32px)/1.2 "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -0.01em; }
.lede { margin: 0 0 32px; font-size: 16px; color: var(--ink-2); }
h2 { margin: 36px 0 8px; padding-top: 24px; border-top: 1px solid var(--rule); font-size: 17px; font-weight: 500; line-height: 1.35; }
h3 { margin: 20px 0 6px; font-size: 15px; font-weight: 500; }
p, li { color: var(--ink-2); }
p { margin: 0 0 12px; }
ul { margin: 0 0 12px; padding-left: 20px; }
li { margin: 6px 0; }
li b { color: var(--ink); font-weight: 500; }
code { font: 500 13.5px/1.4 "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; padding: 2px 6px; border-radius: 8px; background: rgba(255, 255, 255, .06); color: var(--ink); }
.foot { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 16px; width: 100%; max-width: 1360px; margin: 0 auto; padding: 0 40px 28px; font-size: 13px; color: var(--ink-3); }   /* the homepage footer, exactly (owner, 2026-11-06) */
@media (max-width: 560px) { .foot { flex-direction: column; align-items: center; gap: 2px; padding: 0 16px 20px; } header { height: 60px; padding: 0 16px; } .mark { width: 36px; height: 36px; } main { padding: 16px 16px 72px; } }

.flinks { display: inline-flex; gap: 16px; } .flinks a { color: inherit; text-decoration: none; } @media (hover: hover) { .flinks a:hover { color: #ededef; } }

/* the mascot beside the footer line, like every other page (owner, 2026-11-01) */
.ftag { display: inline-flex; align-items: center; gap: 8px; } .fmascot { width: 20px; height: 20px; flex: none; }

/* Filling the page (owner, 2026-11-01): on wide screens the text flows into two columns, as wide as the dashboard,
   so lines stay a readable length; the changelog's sections sit three across. Phones keep one column. */
.lede { max-width: 72ch; }
@media (min-width: 1080px) {
  main { columns: 2; column-gap: 72px; }
  main > .eyebrow, main > h1, main > .lede, main > .day { column-span: all; }
  main h2 { break-after: avoid; } main h3 { break-after: avoid; }
  /* the first heading after the intro starts flush, like the top of the second column (a column break drops margins),
     so both columns line up */
  main > .lede + h2, main > .lede + .day, main > h1 + h2 { margin-top: 0; }
  main p, main li, main ul { break-inside: avoid; }
  .day { columns: 3; column-gap: 48px; }
  .day > h2 { column-span: all; }
  .day h3 { margin-top: 0; padding-top: 20px; }
}
@media (min-width: 760px) and (max-width: 1079px) { .day { columns: 2; column-gap: 40px; } .day > h2 { column-span: all; } .day h3 { break-after: avoid; } .day ul { break-inside: avoid; } }

/* the top of every reading page (owner, 2026-11-01): Home and Dashboard on the right, and every policy page one
   click away in a row under the bar */
.hsp { flex: 1; }
.hbtn { display: inline-flex; align-items: center; line-height: 1; height: 32px; padding: 0 12px; margin-left: 8px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .1); background: #141417; font-weight: 500;
  color: var(--ink); text-decoration: none; font-size: 13.5px; transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
/* Dashboard is white with black text, not the blue accent (owner, 2026-11-02) */
.hbtn.solid { background: var(--ink); border-color: var(--ink); color: #0b0b0c; }
@media (hover: hover) and (pointer: fine) { .hbtn:not(.solid):hover { background: #1b1b1f; border-color: rgba(255, 255, 255, .18); } .hbtn.solid:hover { background: #d4d4d8; border-color: #d4d4d8; } }
.docs { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: 100%; max-width: 1360px; margin: 0 auto; padding: 16px 40px 0; }
.docs a { height: 30px; padding: 0 12px; border-radius: 8px; display: inline-flex; align-items: center; color: var(--ink-2); text-decoration: none; font-size: 13.5px; transition: background-color .2s ease, color .2s ease; }
.docs a[aria-current] { color: var(--ink); background: rgba(255, 255, 255, .06); }
@media (hover: hover) and (pointer: fine) { .docs a:not([aria-current]):hover { color: var(--ink); } }
@media (max-width: 560px) { .hbtn { padding: 0 16px; } .docs { padding: 12px 16px 0; } }

/* the Cookie Policy's "Change your choice" button */
.ckbtn { height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .1); background: #141417; color: var(--ink); font: inherit; font-size: 14px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .ckbtn:hover { background: #1b1b1f; border-color: rgba(255, 255, 255, .18); } }


/* code samples (the API docs, 2026-11-13) */
main pre { margin: 12px 0 18px; padding: 14px 16px; overflow-x: auto; border-radius: 12px; border: 1px solid rgba(255, 255, 255, .07); background: #0f0f11; }
main pre code { padding: 0; border-radius: 0; background: none; font-size: 12.5px; line-height: 1.65; white-space: pre; color: #d4d4d8; }
main h3 code { font-size: 14px; }