/* ═══════════════════════════════════════════════════════════════════════
   atdesk.io — the document pages: /status, /terms, /privacy, /refunds,
   /welcome and /404.

   DIRECTION: the same design system as index.html, at document scale. The
   sales page is Night Watch — dark ground, copper accent, tight display
   type, mono for the small print. These pages used to be a plain
   stylesheet beside it, and clicking "Privacy" felt like leaving the
   product. Now the nav, the mark, the type scale, the panels and the
   footer are the ones from a.css, and only the reading measure differs.

   ⚠ DARK ONLY, AND THE TOKENS ARE COPIED FROM a.css DELIBERATELY. This
   started light-by-default with a prefers-color-scheme dark override,
   which meant that on a system in LIGHT mode the sales page was #12141a
   and /terms was #fbfafc — a reader clicking "Terms" fell out of the brand
   into a white page. If a.css's palette changes, change these with it.

   ⚠ NO JAVASCRIPT, AND THE TABLE OF CONTENTS IS WHY THAT IS WORTH SAYING.
   /privacy and /terms are 22 sections each; the contents list is generated
   into the HTML by bin/build-site.mjs and is sticky by CSS alone. The CSP
   names style-src 'self' and script-src 'self', so this is a file rather
   than inline — and these pages load no script at all.

   CONTRAST (all against --bg #12141a):
     body text   --ink  #e6e8ee   15.1:1
     muted text  --dim  #8b93a7    6.6:1
     links       --accent #c8815a  6.4:1
     button label #12141a on --accent  6.4:1
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* verbatim from a.css, which took them verbatim from web-src/app.css */
  --bg: #12141a;
  --panel: #181b23;
  --line: #262a35;
  --ink: #e6e8ee;
  --dim: #8b93a7;
  --accent: #c8815a;
  --ok: #4ea172;
  --warn: #c9a227;
  --sunk: #0f1116;

  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --pad: clamp(1.1rem, 4.5vw, 2.5rem);
  --measure: 36rem;
  --bay: 68rem;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  /* ⚠ Not overflow-x:hidden. Hiding sideways overflow hides the bug that
     causes it; the wide things here (tables, long tokens) are contained
     individually so there is nothing to hide. */
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.bay { max-width: var(--bay); margin-inline: auto; padding-inline: var(--pad); }

/* ── the bar, identical in behaviour to the sales page's ──────────────── */
.nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(18, 20, 26, .92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; gap: .9rem; padding-block: .85rem; }
.mark {
  display: inline-flex; align-items: center; gap: .55rem;
  font: 600 1rem/1 var(--sans); letter-spacing: -.02em;
  color: var(--ink); text-decoration: none;
}
.mark i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: block;
  box-shadow: 0 0 0 3px rgba(78, 161, 114, .14);
}
.grow { flex: 1; }
.nav-links { display: flex; gap: 1.05rem; }
.nav-links a {
  color: var(--dim); text-decoration: none;
  font-size: .88rem; letter-spacing: -.005em;
  padding-block: .2rem;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current] { color: var(--ink); box-shadow: inset 0 -1px 0 var(--accent); }

/* ⚠ The links wrap to their own row on a narrow phone rather than shrinking
   the mark or scrolling sideways. Measured at 320px: two rows, no overflow. */
@media (max-width: 34rem) {
  .nav-in { flex-wrap: wrap; row-gap: .5rem; }
  .nav-links { order: 3; width: 100%; gap: .9rem; }
  .nav-links a { font-size: .82rem; }
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .5rem .9rem; border-radius: 8px; border: 0;
  background: var(--accent); color: #12141a;
  font: 600 .86rem/1 var(--sans); letter-spacing: -.01em;
  text-decoration: none; white-space: nowrap;
  transition: filter .16s var(--ease), transform .16s var(--ease);
}
.btn:hover { filter: brightness(1.07); }
.btn:active { transform: translateY(1px); }

/* ── the page ─────────────────────────────────────────────────────────── */
main { display: block; padding-block: clamp(2.2rem, 6vw, 4rem) clamp(3.5rem, 9vw, 6rem); }

/* ⚠ THE DOM ORDER IS title → contents → document, AND IT IS THAT WAY FOR THE
   PHONE. The contents list used to come first in the markup so it could be the
   left column on a desktop; on a 390px screen that meant landing on a page
   whose first words were "ON THIS PAGE" — a list of sections before any sign of
   which document you had opened. The title now always comes first, and the grid
   moves the contents into the margin on a wide screen instead. */
.doc-grid {
  display: grid; gap: 2.25rem;
  grid-template-columns: minmax(0, var(--measure));
  justify-content: center;
}
.doc-grid > .doc-head { margin-bottom: 0; }

/* The contents list becomes a sticky margin column only when there is room for
   it beside a full-measure document — never at the cost of the text. */
@media (min-width: 78rem) {
  .doc-grid.has-toc {
    grid-template-columns: 13.5rem minmax(0, var(--measure));
    column-gap: 4rem; row-gap: 2.25rem;
  }
  .doc-grid.has-toc > .doc-head { grid-column: 2; grid-row: 1; }
  .doc-grid.has-toc > .doc { grid-column: 2; grid-row: 2; }
  /* ⚠ `align-self: start` is load-bearing, not tidiness. A grid item spanning
     two rows is stretched to their full height by default, and a sticky box
     that is already as tall as its container has nothing to scroll within — it
     simply never sticks. */
  .doc-grid.has-toc > .toc {
    grid-column: 1; grid-row: 1 / span 2; align-self: start;
    position: sticky; top: 5.2rem;
    max-height: calc(100vh - 7rem); overflow-y: auto;
  }
}

.eyebrow {
  font-family: var(--mono); font-size: .78rem; line-height: 1.5;
  letter-spacing: -.01em; color: var(--dim);
  margin: 0 0 .9rem;
}
.doc-head { margin-bottom: 2.4rem; }
.doc-head h1 {
  margin: 0; font-weight: 600; letter-spacing: -.028em; line-height: 1.06;
  font-size: clamp(2rem, 5.6vw, 2.9rem); text-wrap: balance;
}
.doc-sub {
  margin: 1rem 0 0; color: var(--dim);
  font-size: clamp(1rem, 2.4vw, 1.12rem); line-height: 1.55; text-wrap: pretty;
}

/* ── contents ─────────────────────────────────────────────────────────── */
.toc {
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 1rem 1.1rem;
}
.toc-h {
  margin: 0 0 .6rem; font-family: var(--mono); font-size: .72rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--dim);
}
.toc ol { margin: 0; padding: 0; list-style: none; }
.toc li { margin: 0; }
.toc a {
  display: block; padding: .28rem 0;
  color: var(--dim); text-decoration: none;
  font-size: .87rem; line-height: 1.38;
}
.toc a:hover { color: var(--ink); }

/* ── the document ─────────────────────────────────────────────────────── */
.doc { min-width: 0; }
.doc > :first-child { margin-top: 0; }

.doc p, .doc li { text-wrap: pretty; overflow-wrap: break-word; }
.doc p { margin: 0 0 1.1rem; }

.doc h2 {
  margin: 3rem 0 1rem;
  font-weight: 600; letter-spacing: -.024em; line-height: 1.15;
  font-size: clamp(1.3rem, 3.2vw, 1.65rem); text-wrap: balance;
  scroll-margin-top: 5.5rem;
}
/* A hairline above every section, so 22 of them read as a sequence rather
   than as one unbroken wall. Not on the first, which follows the lede. */
.doc h2::before {
  content: ""; display: block;
  height: 1px; background: var(--line);
  margin-bottom: 1.6rem;
}
/* ⚠ NOT WHERE THE DOCUMENT ALREADY DREW ONE. The drafts separate their preamble
   from section 1 with a markdown `---`, which renders as an <hr> — so the first
   section of every document had TWO hairlines a few pixels apart with a gap
   between them, which reads as a rendering fault rather than as a divider. */
.doc > h2:first-child::before,
.doc hr + h2::before { display: none; }

.doc h3 {
  margin: 2rem 0 .55rem; font-size: 1.06rem; font-weight: 600;
  letter-spacing: -.014em; line-height: 1.3; scroll-margin-top: 5.5rem;
}
.doc h4 {
  margin: 1.6rem 0 .4rem; font-size: .8rem; font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; color: var(--dim);
}

.doc ul, .doc ol { margin: 0 0 1.2rem; padding-left: 1.35rem; }
.doc li { margin-bottom: .5rem; }
.doc li::marker { color: var(--dim); }
.doc ol > li::marker { font-variant-numeric: tabular-nums; }

.doc a { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.doc a:hover { text-decoration-thickness: 2px; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc em { color: var(--ink); }

.doc hr { border: 0; border-top: 1px solid var(--line); margin: 2.6rem 0; }

code {
  font-family: var(--mono); font-size: .86em;
  background: var(--sunk); border: 1px solid var(--line);
  padding: .08em .38em; border-radius: 4px;
  overflow-wrap: anywhere;
}

/* ── the note card ────────────────────────────────────────────────────────
   ⚠ THIS REPLACED A `⚠`-PREFIXED BLOCKQUOTE, AND THAT IS THE POINT OF IT.
   A warning glyph followed by bold text in a dim grey aside reads as an
   annotation somebody forgot to delete — which is what Glen saw, and on
   /privacy it was literally true: an engineering note about sweepPending()
   was published on the live policy. The glyph is now an internal marker
   only (bin/build-site.mjs refuses to publish one), and a genuine reader
   note gets a designed card instead. */
.doc blockquote {
  margin: 1.8rem 0; padding: 1rem 1.15rem;
  background: var(--panel);
  border: 1px solid var(--line); border-left: 2px solid var(--accent);
  border-radius: 10px;
  color: var(--dim);
}
.doc blockquote > :last-child { margin-bottom: 0; }
.doc blockquote p { font-size: .95rem; line-height: 1.6; }

/* ── tables ───────────────────────────────────────────────────────────────
   ⚠ The page must never scroll sideways on a phone, so the table scrolls
   inside its own frame instead. On a wide screen it is allowed to exceed
   the reading measure, because a retention table at 36rem wraps every cell
   to three lines. */
.tw {
  margin: 1.6rem 0; overflow-x: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  -webkit-overflow-scrolling: touch;
}
/* ⚠ IT BLEEDS RIGHT ONLY. Centring the wider table on the reading column looked
   better in isolation and put its left edge underneath the sticky contents
   list, which then scrolled over the top of it. The right margin is empty in
   both layouts, so that is the side that is free. */
@media (min-width: 62rem) {
  .doc .tw { width: 42rem; margin-right: calc(var(--measure) - 42rem); }
}
table { border-collapse: collapse; width: 100%; min-width: 24rem; font-size: .93rem; line-height: 1.55; }
th, td { padding: .68rem .85rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
thead th {
  background: var(--sunk); color: var(--dim);
  font-weight: 600; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
}
tbody tr:last-child > * { border-bottom: 0; }
tbody td:first-child { color: var(--ink); }

/* ── /welcome ─────────────────────────────────────────────────────────── */
.code {
  display: block;
  font-family: var(--mono); font-size: 1.2rem; letter-spacing: .06em;
  padding: .95rem 1.05rem; border-radius: 10px;
  background: var(--sunk); border: 1px dashed var(--line);
  color: var(--ink);
  overflow-wrap: anywhere;
}
/* The one-line install command. It is long, it must be copied WHOLE, and a line
   that wraps mid-flag is the thing a buyer mis-pastes — so it scrolls in its own
   frame rather than wrapping.
   ⚠ AND THAT IS WHY THERE IS A COPY BUTTON. Rendering the finished page showed
   the command ending mid-URL at the frame edge on a 390px phone, with nothing
   to say it continued and no practical way to select the rest of it. The single
   most important action on the page was the one a buyer could not complete.
   The fade on the right edge is the second half of that: it says "there is
   more" for anyone who does not press the button. */
.cmdrow { display: flex; align-items: stretch; gap: .5rem; margin: .8rem 0 1.2rem; }
.cmd {
  display: block; flex: 1; min-width: 0;
  font-family: var(--mono); font-size: .84rem; line-height: 1.5;
  padding: .85rem 1rem; border-radius: 10px;
  background: var(--sunk); border: 1px solid var(--line);
  color: var(--ink);
  overflow-x: auto; white-space: pre;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to right, #000 calc(100% - 1.6rem), transparent);
}
.copy {
  flex: none; align-self: stretch;
  padding: 0 .85rem; border-radius: 10px;
  border: 1px solid var(--line); background: var(--panel); color: var(--dim);
  font: 600 .8rem/1 var(--sans); letter-spacing: -.01em; cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.copy:hover { color: var(--ink); border-color: var(--dim); }
.copy[data-done] { color: var(--ok); border-color: var(--ok); }
.said { min-height: 1.2rem; margin: -.6rem 0 1rem; font-size: .84rem; color: var(--ok); }
.err { color: var(--warn); }

/* ── footer, the sales page's ─────────────────────────────────────────── */
.foot { border-top: 1px solid var(--line); padding-block: 2.6rem 3.2rem; }
.foot .mark { margin-bottom: .9rem; }
.fl { display: flex; flex-wrap: wrap; gap: .35rem 1.15rem; margin-bottom: 1.3rem; }
.fl a { color: var(--dim); text-decoration: none; font-size: .88rem; }
.fl a:hover { color: var(--ink); text-decoration: underline; }
.foot p {
  margin: 0 0 .8rem; max-width: 54rem;
  font-family: var(--mono); font-size: .74rem; line-height: 1.75; color: var(--dim);
}
.foot p a { color: var(--dim); }

/* ── print ────────────────────────────────────────────────────────────────
   These are the pages people print or save as PDF before they sign up, and
   a 22-section policy rendered in reversed-out white on near-black wastes a
   cartridge and reads badly. */
@media print {
  .nav, .toc, .btn { display: none !important; }
  html, body { background: #fff; color: #111; font-size: 11pt; }
  .doc-grid { display: block; }
  .doc a { color: #111; }
  .doc h2, .doc h3, .doc-head h1 { color: #000; }
  .doc blockquote { background: #f4f4f5; border-color: #ccc; border-left-color: #888; color: #333; }
  .tw { background: #fff; border-color: #bbb; }
  .doc .tw { width: auto; margin-left: 0; }
  thead th { background: #f0f0f1; color: #333; }
  th, td { border-bottom-color: #ddd; }
  code, .code, .cmd { background: #f4f4f5; border-color: #ccc; color: #111; }
  .foot { border-top-color: #ccc; }
  .foot p { color: #444; }
}