/* ─────────────────────────────────────────────────────────────
   APC — one stylesheet for every public page.

   Served from this same host as /apc.css. No CDN, no web font, no
   analytics, no remote image: a service that promises it does not hand
   your address to third parties must not make your browser call one just
   to read the promise. Every page here loads this file and nothing else.

   Sections:
     tokens · base · masthead · headings · draft note · panels ·
     diagram (homepage) · definition rows · steps (homepage) ·
     link row · document pages (tables, contents, prose) · footer
   ───────────────────────────────────────────────────────────── */

:root {
  --bg:        #fbfaf8;
  --panel:     #ffffff;
  --panel-2:   #f4f2ee;
  --ink:       #1b1a17;
  --ink-soft:  #4d4a44;
  --ink-faint: #77736b;
  --line:      #ddd8cf;
  --line-soft: #eae6de;
  --accent:    #7a4a12;
  --accent-bg: #f6ecdd;
  --warn-line: #b98b2e;
  --warn-bg:   #fdf6e6;
  --warn-ink:  #6b4c07;
  --radius: 12px;
  --measure: 40rem;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #131311;
    --panel:     #1b1b18;
    --panel-2:   #212120;
    --ink:       #ecece6;
    --ink-soft:  #bdb9b0;
    --ink-faint: #8f8b82;
    --line:      #34332f;
    --line-soft: #282723;
    --accent:    #e3ac66;
    --accent-bg: #2a2117;
    --warn-line: #7a6027;
    --warn-bg:   #241f12;
    --warn-ink:  #e0c78a;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2.2rem 1.25rem 4rem;
}
@media (min-width: 40rem) { .wrap { padding: 3.4rem 2rem 5rem; } }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
code, .mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;
  font-size: 0.88em;
}
code {
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  padding: 0.08em 0.34em;
  overflow-wrap: anywhere;
}

/* ── masthead ─────────────────────────────────────────────── */
.top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1rem;
  margin-bottom: 2.2rem;
}
.brand { display: flex; align-items: baseline; gap: 0.6rem; }
.brand .mark {
  font-weight: 700;
  letter-spacing: 0.16em;
  font-size: 1.05rem;
}
.brand .full { color: var(--ink-faint); font-size: 0.92rem; }
/* On the document pages the wordmark is the way home. */
.brand a { color: inherit; text-decoration: none; }
.brand a:hover .mark { color: var(--accent); }
.lang { font-size: 0.9rem; color: var(--ink-faint); }
.lang .here { color: var(--ink); font-weight: 600; }
.lang span[aria-hidden] { padding: 0 0.3rem; opacity: 0.5; }

h1 {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -0.018em;
  margin: 0 0 0.9rem;
  font-weight: 660;
}
.lede { font-size: 1.1rem; color: var(--ink-soft); margin: 0 0 2rem; }

h2 {
  font-size: 1.16rem;
  letter-spacing: 0.005em;
  margin: 2.9rem 0 0.85rem;
  font-weight: 660;
}
h3 { font-size: 1rem; margin: 1.6rem 0 0.4rem; font-weight: 640; }
p { margin: 0 0 1.05rem; }
ul { padding-left: 1.15rem; margin: 0 0 1.05rem; }
li { margin-bottom: 0.5rem; }
li::marker { color: var(--ink-faint); }
.muted { color: var(--ink-faint); }

/* ── editorial note, owner removes it ─────────────────────── */
.draft-note {
  border: 1px dashed var(--warn-line);
  background: var(--warn-bg);
  color: var(--warn-ink);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  font-size: 0.9rem;
  line-height: 1.55;
  margin-bottom: 2.2rem;
}
.draft-note b { letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.78rem; }
.draft-note p { margin: 0.35rem 0 0; }

/* ── panels ───────────────────────────────────────────────── */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.15rem 1.3rem;
  margin: 1.4rem 0;
}
.panel > :last-child { margin-bottom: 0; }
.panel h3 { margin-top: 0; }

.facts { border-left: 3px solid var(--accent); }

/* ── diagram ──────────────────────────────────────────────── */
figure { margin: 1.8rem 0; }
.diagram { width: 100%; height: auto; display: block; color: var(--ink); }
.diagram .box { fill: var(--panel); stroke: var(--line); stroke-width: 1.5; }
.diagram .box-accent { fill: var(--accent-bg); stroke: var(--accent); stroke-width: 1.5; }
.diagram .t { fill: var(--ink); font-size: 15px; font-weight: 600; }
.diagram .t-sub { fill: var(--ink-faint); font-size: 12.5px; font-weight: 400; }
.diagram .t-edge { fill: var(--ink-faint); font-size: 12px; }
.diagram .flow { stroke: var(--ink-faint); stroke-width: 1.5; fill: none; }
.diagram .flow-dash { stroke-dasharray: 5 4; }
.diagram .head { fill: var(--ink-faint); }
figcaption { font-size: 0.9rem; color: var(--ink-faint); margin-top: 0.6rem; }

/* ── definition rows ──────────────────────────────────────── */
.rows { border-top: 1px solid var(--line-soft); margin: 1.2rem 0; }
.row {
  display: grid;
  gap: 0.15rem 1.4rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 34rem) { .row { grid-template-columns: 11rem 1fr; } }
.row dt { font-weight: 620; }
.row dd { margin: 0; color: var(--ink-soft); }

/* ── steps ────────────────────────────────────────────────── */
ol.steps { counter-reset: s; list-style: none; padding: 0; margin: 1.2rem 0; }
ol.steps > li {
  counter-increment: s;
  position: relative;
  padding-left: 2.4rem;
  margin-bottom: 1.05rem;
}
ol.steps > li::before {
  content: counter(s);
  position: absolute;
  left: 0; top: 0.1rem;
  width: 1.65rem; height: 1.65rem;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--accent-bg);
  color: var(--accent);
  border: 1px solid var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ── links row ────────────────────────────────────────────── */
.linkrow { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.5rem 0 0; }
.linkrow a {
  display: inline-block;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.94rem;
}
.linkrow a:hover { border-color: var(--accent); color: var(--accent); }
.linkrow a.primary {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 620;
}
/* A link that has nowhere to point until the repository is opened. Rendered as a
   disabled pill rather than an anchor so the draft never ships a broken href. */
.pill-off {
  display: inline-block;
  padding: 0.5rem 0.95rem;
  border: 1px dashed var(--line);
  border-radius: 999px;
  color: var(--ink-faint);
  font-size: 0.94rem;
}

.fill {
  background: var(--warn-bg);
  border: 1px dashed var(--warn-line);
  color: var(--warn-ink);
  border-radius: 5px;
  padding: 0.05em 0.35em;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85em;
}

/* ── connection pages ─────────────────────────────────────────
   The pages APC serves itself rather than out of this docroot: the
   claim link, the outcomes of a sign-in, and the list of connected
   assistants with the button that lets one of them write. They load
   this same file from this same host, so there is one design here and
   not a second one. Everything they need past the homepage's
   vocabulary is a form — plus a badge for the assistant that let
   itself in, which is the one row an owner has to look at twice. */

.panel.agent > h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  overflow-wrap: anywhere;
}
.panel h4 { font-size: 0.96rem; margin: 1.5rem 0 0.4rem; font-weight: 640; }

.badge {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--warn-ink);
  background: var(--warn-bg);
  border: 1px solid var(--warn-line);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  white-space: nowrap;
}

form.act { margin: 1.3rem 0 0; }
form.act label {
  display: block;
  font-weight: 620;
  font-size: 0.94rem;
  margin-bottom: 0.3rem;
}
form.act input[type="text"] {
  display: block;
  width: 100%;
  max-width: 22rem;
  font: inherit;
  font-size: 0.96rem;
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
}
form.act input[type="text"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
form.act p.muted { font-size: 0.9rem; margin: 0.45rem 0 1.1rem; }

/* The one control on these pages. Shaped like the pill links of the homepage's
   link row, because it does the same job and a second button style would be a
   second design. */
.btn {
  display: inline-block;
  font: inherit;
  font-weight: 620;
  font-size: 0.96rem;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  cursor: pointer;
  background: var(--accent-bg);
  border: 1px solid var(--accent);
  color: var(--accent);
}
.btn:hover { background: var(--accent); color: var(--bg); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

footer {
  margin-top: 3.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-faint);
}
footer p { margin: 0 0 0.7rem; }
footer a { color: var(--ink-soft); }

/* ── Russian pages: longer words, so a slightly smaller h1 and a wider
      label column. Same design, two measurements — not a second theme. ── */
html[lang="ru"] h1 {
  font-size: clamp(1.7rem, 1.15rem + 2.3vw, 2.4rem);
  line-height: 1.2;
  letter-spacing: -0.014em;
}
@media (min-width: 34rem) {
  html[lang="ru"] .row { grid-template-columns: 12rem 1fr; }
}

/* ── document pages (privacy, terms) ──────────────────────────
   Long legal prose generated from the Markdown sources by
   _build/build.py. Everything above is shared with the homepage;
   only what follows is specific to these pages. */

/* A wider measure than the homepage: these pages carry tables. */
.wrap.doc { --measure: 46rem; }

.doc h2 {
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
}
.doc h2:first-of-type { border-top: 0; padding-top: 0; }
.doc h1 + .rows { margin-top: 1.6rem; }

/* Anchors: give the heading room when a #fragment scrolls to it. */
.doc h2, .doc h3 { scroll-margin-top: 1.2rem; }

/* Table of contents. */
.toc { margin: 2rem 0 2.6rem; }
.toc h2 {
  font-size: 0.8rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.7rem;
  padding-top: 0;
  border-top: 0;
  font-weight: 700;
}
.toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 1;
  font-size: 0.94rem;
}
@media (min-width: 40rem) { .toc ol { columns: 2; column-gap: 2rem; } }
.toc li { margin: 0 0 0.34rem; break-inside: avoid; }
.toc a { color: var(--ink-soft); text-decoration: none; }
.toc a:hover { color: var(--accent); text-decoration: underline; }

/* Tables. They must scroll inside themselves, never widen the page. */
.tablewrap {
  overflow-x: auto;
  margin: 1.3rem 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  -webkit-overflow-scrolling: touch;
}
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  font-size: 0.94rem;
}
thead th {
  text-align: left;
  font-weight: 660;
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
th, td {
  padding: 0.62rem 0.9rem;
  vertical-align: top;
  border-bottom: 1px solid var(--line-soft);
}
tbody tr:last-child td { border-bottom: 0; }
td:first-child { color: var(--ink); }
td { color: var(--ink-soft); }
td strong, th strong { color: var(--ink); }

hr {
  border: 0;
  border-top: 1px solid var(--line-soft);
  margin: 2.4rem 0;
}

/* The Markdown sources put their own `---` above most sections, and `.doc h2`
   draws a rule of its own. Where both land the second one is dropped, so a
   section break is one line on every page whichever way the source spells it. */
hr + h2 { border-top: 0; padding-top: 0; margin-top: 0; }

.doc ol { padding-left: 1.35rem; margin: 0 0 1.05rem; }
.doc ol li { margin-bottom: 0.5rem; }
.doc .draft-note p:first-child { margin-top: 0; }