/* The help, privacy, terms and delete pages, and the 404: a 760 px reading column under the site's own header and
   over its footer. The tokens, the type, the buttons and both of those are site.css, which every one of these pages
   links first. */
.doc { width: min(100% - 2 * var(--gutter), 760px); margin-inline: auto; padding-top: clamp(24px, 4vw, 48px); }
.doc a { text-underline-offset: 3px; }
.doc .lead { margin-top: 16px; }
.updated { margin-top: 12px; }

/* where the page goes: a row of pills */
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.toc a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 16px; border-radius: 999px; background: var(--stage); color: var(--ink); font: 600 .9375rem/1 var(--f-text); text-decoration: none; white-space: nowrap;
  transition: transform var(--spring-dur) var(--spring), background-color .12s var(--fade-in); touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.toc a:active, .toc a.is-down { transform: scale(.94); background: var(--stage-2); transition-duration: var(--spring-press-dur), .06s; transition-timing-function: var(--spring-press), var(--fade-in); }
@media (hover: hover) and (pointer: fine) { .toc a:hover { background: var(--stage-2); } }

/* a document card is a card set: the grey of the card against the page, no shadow */
.card { background: var(--stage); border-radius: var(--r-l); padding: clamp(20px, 2.4vw, 28px); margin-top: 14px; }
.card:first-of-type { margin-top: 32px; }
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card h2 { font: 500 clamp(1.25rem, 1.2rem + .2vw, 1.375rem)/1.2 var(--f-display); letter-spacing: -0.01em; margin: 0 0 8px; scroll-margin-top: calc(var(--head-h) + 20px); }
.card h3 { font: 600 1.0625rem/1.4 var(--f-text); margin: 20px 0 0; }
.card p, .card li { color: var(--ink-2); }
.card p { margin: 8px 0 14px; }
.card strong { color: var(--ink); }
.card ol, .card ul { margin: 8px 0 14px; padding-left: 22px; }
.card li { margin: 6px 0; }
.card li::marker { color: var(--ink-3); }
.card .btn { margin: 4px 0 14px; max-width: 100%; }

/* numbered steps, as the app's permission screens number theirs: an ink pin (site.css, .pin) flush with the card's text */
.card .steps { list-style: none; padding-left: 0; margin: 12px 0 16px; counter-reset: step; }
.steps li { counter-increment: step; position: relative; min-height: 1.75rem; padding: 1px 0 1px 2.5rem; margin: 10px 0; color: var(--ink); font-weight: 500; }
.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--bg); font: 600 .9375rem/1 var(--f-text); }
.steps li small { display: block; font-weight: 400; font-size: .9375rem; line-height: 1.4; color: var(--ink-2); }

.note { background: var(--butter); color: var(--butter-ink); border-radius: var(--r-m); padding: 14px 18px; margin: 12px 0 16px; }
.note strong { color: inherit; }

/* ---------- Guides and comparisons (scripts/pages.mjs writes them from content/) ----------
   Where the page sits, the short answer an assistant can quote, a table that compares, the card that gets the app. */
.crumbs { margin: 0 0 16px; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .9375rem; color: var(--ink-dim); }
.crumbs li + li::before { content: "/"; margin-right: 8px; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); }
.answer { background: var(--sky); color: var(--sky-ink); border-radius: var(--r-l); padding: clamp(20px, 2.4vw, 28px); margin-top: 28px; }
.answer h2 { font: 600 .8125rem/1 var(--f-text); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 10px; }
.answer p { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: inherit; }
.answer p + p { margin-top: 10px; }
.answer strong { color: inherit; }
.answer + .card { margin-top: 14px; }
.cmp-wrap { overflow-x: auto; margin: 12px 0 16px; -webkit-overflow-scrolling: touch; }
.cmp { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .9375rem; line-height: 1.4; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.cmp thead th { color: var(--ink); font-weight: 600; }
.cmp tbody th { color: var(--ink); font-weight: 500; width: 30%; }
.cmp tr:last-child th, .cmp tr:last-child td { border-bottom: 0; }
.sources { font-size: .9375rem; }
.sources li { overflow-wrap: anywhere; }
.get { text-align: center; }
.get h2 { margin-bottom: 4px; }
.get .btn { margin: 12px auto 8px; }
.get p.t-fine { margin: 0; color: var(--ink-dim); }
.related { list-style: none; padding-left: 0 !important; }
.related li { margin: 0; }
.related a { display: flex; flex-direction: column; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 600; }
.related li:last-child a { border-bottom: 0; }
.related a span { font-weight: 400; color: var(--ink-2); font-size: .9375rem; }

/* a phone: the one button a card holds (on the delete page) is as wide as its card, and its words may take two lines */
@media (max-width: 520px) { .card .btn { display: flex; white-space: normal; text-align: center; line-height: 1.2; padding-block: 12px; } }

/* ---------- The 404 ----------
   Mika at 96 px, standing on the page, with room over its head for what it says (js/pix.js). Before the bubble's
   script runs, and without it, the floor shadow is drawn here, as the script draws it (js/orb.js: 1.08 of its
   width, .16 of its height, dense at the centre and gone at the edge; on the dark page its own pink pooled under
   it). The script's own takes over from the same picture. */
.nf { text-align: center; padding-bottom: clamp(24px, 6vw, 72px); }
.nf-mika { position: relative; width: 96px; height: 96px; margin: clamp(64px, 9vw, 96px) auto 32px; }
.nf-mika vk-orb { --orb-size: 96px; display: block; }
.nf-mika::before {
  content: ""; position: absolute; left: 50%; top: 100%; width: 108%; height: 16%; margin: calc(1.5px - 8%) 0 0 -54%; border-radius: 50%;
  background: #0f1012; opacity: .17;
  -webkit-mask-image: radial-gradient(closest-side, #000, rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, 0)); mask-image: radial-gradient(closest-side, #000, rgba(0, 0, 0, .45) 55%, rgba(0, 0, 0, 0));
}
.nf-mika:has(vk-orb:defined)::before { content: none; }
@media (prefers-color-scheme: dark) { .nf-mika::before { background: #ff3d8b; opacity: .3; } }
.nf-actions { margin-top: 24px; display: grid; justify-items: center; gap: 12px; }

/* ---------- Forced colours ----------
   As site.css: the pills, the cards, the note and the steps' pins get an edge the system can draw (a pill that has
   the focus keeps its ring), and the 404's floor shadow, part of the bubble's picture, keeps its own colour. */
@media (forced-colors: active) {
  .toc a:not(:focus-visible), .card, .note, .steps li::before { outline: 1px solid transparent; outline-offset: -1px; }
  .nf-mika::before { forced-color-adjust: none; }
}

/* ---------- Print ---------- */
@media print {
  :root { color-scheme: light; --bg: #fff; --ink: #000; --ink-2: #000; --ink-3: #000; --ink-dim: #000; --stage: transparent; --line: #ccc; }
  body { font-size: 11pt; background: #fff; color: #000; }
  .skip, .menu-btn, .nav, .foot-group, .toc, canvas { display: none !important; }
  .site-head { position: static; height: auto; padding-block: 12pt; }
  .site-head::after { display: none; }
  .site-foot { margin-top: 18pt; padding-block: 12pt 0; }
  .doc { width: auto; max-width: none; padding-top: 0; }
  .head-inner, .site-foot .wrap { max-width: none; padding-inline: 0; }   /* one left edge: the paper's margin */
  .card { background: none; border: 1px solid #ccc; break-inside: avoid; }
  .note { background: none; border: 1px solid #ccc; color: #000; }
  .steps li::before { background: none; color: #000; border: 1px solid #000; }
  .doc a[href^="http"]::after, .foot-legal a[href^="http"]::after { content: " (" attr(href) ")"; }
}