/* The comparison family — /vs/vercel, /vs/cloudflare and their siblings — all
   share this one sheet. It is the homepage's own vocabulary, lifted out of the
   <style> block in public/index.html: same two surfaces, same measures, same
   hairlines, same second voice in italic. A comparison page that looked like a
   different site would read as an advertisement rather than as part of the
   ledger.

   It sits at public/vs/vs.css and not at public/css/: that directory is a
   symlink to app/static/css, shared by every app cell, and a sheet only these
   eight pages use has no business shipping from the dashboard. cell.js stamps
   the ?v= cache buster onto this path by name (ASSET_STAMP).

   Colour comes from /css/tokens.css. Every var() carries the light value as
   its fallback so the page still paints if that sheet does not arrive, and www
   is light-only by design: nothing stamps data-theme and tokens.css has no
   prefers-color-scheme rule. */

:root {
  color-scheme: light;
  --bg: var(--tissue-bg, #ffffff);
  --panel: var(--tissue-panel, #f4f4f1);
  --ink: var(--tissue-ink, #222222);
  --ink2: var(--tissue-ink-2, #55625b);
  --ink3: var(--tissue-ink-3, #8a8a85);
  --line: var(--tissue-line, #e6e6e1);
  --line2: var(--tissue-line-2, #cfcfc9);
  --accent: var(--tissue-accent, #00875f);
  --on-accent: var(--tissue-on-accent, #ffffff);
  --mono: var(--tissue-font-mono, "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  --plate-face: var(--tissue-font-plate, "IM Fell English", Georgia, "Times New Roman", serif);
}

* { box-sizing: border-box }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.68;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 62rem; margin: 0 auto; padding-inline: 1.25rem }
.col { max-width: 42em }

a { color: inherit }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px }

.skip { position: absolute; left: -9999px; top: 0; background: var(--accent); color: var(--on-accent); padding: .5rem .9rem; z-index: 10 }
.skip:focus { left: 0 }

/* IBM Plex Mono ligates -- into an em dash, which turns a command line into
   something that will not run when it is copied. */
code, pre { font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0 }
code { font-family: var(--mono); background: var(--panel); padding: .05rem .35rem }
/* An inline code chip is a lighter square on the page's ground. On the panelled
   surfaces — the summary, the closing block, our column of the table — it has to
   go the other way, or it vanishes into the panel it is sitting on. */
.tldr code, .ender code, td.us code { background: var(--bg) }

tissue-header, tissue-footer { display: block; --tissue-hdr-max: 62rem }
tissue-header { padding-top: 1.75rem }
tissue-footer { margin-top: 3rem }

/* ── the head of the page ─────────────────────────────────────────────────── */

.crumb { margin: 2.4rem 0 0; font-size: .85rem; color: var(--ink3) }
.crumb a { color: var(--ink2); text-decoration: none }
.crumb a:hover { text-decoration: underline }

h1 {
  font-size: clamp(1.6rem, 1.1rem + 2.2vw, 2.2rem);
  line-height: 1.2; font-weight: 600; letter-spacing: -.02em;
  margin: .9rem 0 0; max-width: 16em; text-wrap: balance;
}
.deck { color: var(--ink2); margin: 1.1rem 0 0; max-width: 42em; font-size: 1.02em }

/* The answer, before the evidence. A reader who wanted one sentence has it
   here and can close the tab; everything below is the working. */
.tldr { background: var(--panel); padding: 1.15rem 1.35rem; margin: 1.8rem 0 0; max-width: 46em }
.tldr p { margin: 0 }
.tldr p + p { margin-top: .8rem }

/* ── sections ─────────────────────────────────────────────────────────────── */

section { padding-block: 3rem }
section + section { border-top: 1px solid var(--line) }

h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 .35rem; text-wrap: balance }
h3 { font-size: 1rem; font-weight: 600; margin: 2rem 0 0 }
.sub { color: var(--ink2); font-style: italic; margin: 0 0 1.5rem; max-width: 42em }
p { margin: 1.15rem 0; max-width: 42em }
em, i { font-style: italic }

/* ── what each one is ─────────────────────────────────────────────────────── */

dl { margin: 1.5rem 0 0; max-width: 44em }
dt { font-weight: 600; margin-top: 1.4rem }
dt:first-child { margin-top: 0 }
dd { margin: .35rem 0 0; color: var(--ink2) }

/* ── the table ────────────────────────────────────────────────────────────── */

.scroller { overflow-x: auto; margin-top: 1.5rem; border-top: 1px solid var(--line2) }
table { border-collapse: collapse; width: 100%; min-width: 46rem; font-size: .82rem }
th, td { text-align: left; vertical-align: top; padding: .72rem .8rem; border-bottom: 1px solid var(--line) }
thead th { font-weight: 400; font-style: italic; color: var(--ink2); border-bottom: 1px solid var(--line2); white-space: nowrap }
thead th.us { color: var(--ink); font-style: normal; font-weight: 600; background: var(--panel) }
tbody th { font-weight: 400; color: var(--ink); white-space: nowrap; padding-left: 0 }
td { color: var(--ink2) }
td.us { background: var(--panel); color: var(--ink) }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 1px solid var(--line2) }

/* Every figure on this page came off the other company's own pages on one
   day, and both of us will have moved by the time you read it. */
.checked { font-size: .85rem; color: var(--ink3); font-style: italic; margin: .9rem 0 0; max-width: 48em }
.checked a { color: var(--accent) }

/* ── the transcript ───────────────────────────────────────────────────────── */

pre { background: var(--panel); padding: .9rem 1.15rem; margin: 1.4rem 0 0; font-size: .85rem; line-height: 1.9; overflow-x: auto; max-width: 44em; white-space: pre }
pre .p { color: var(--ink3) }
pre .dim { color: var(--ink2) }
pre .live { color: var(--accent); font-weight: 600 }

/* ── the close ────────────────────────────────────────────────────────────── */

.ender { background: var(--panel); padding: 1.6rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; max-width: 46em }
.ender p { margin: 0 }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.25rem }
.btn { background: var(--accent); color: var(--on-accent); text-decoration: none; font-weight: 600; padding: .55rem 1.2rem; display: inline-block }
.btn:hover { background: #00714f }
.cta .aside { color: var(--ink2); font-style: italic; font-size: .92em }

/* The row of sibling comparisons, at the foot of every page in the family. */
.vs { display: flex; flex-wrap: wrap; gap: .1rem 1.4rem; margin-top: 1.4rem; font-size: .9rem }
.vs a { color: var(--ink2); border-left: 1px solid var(--line); padding: .15rem .95rem; text-decoration: none }
.vs a:hover { color: var(--ink); text-decoration: underline }

/* The index: one line per comparison, the way a contents page reads. It is a
   <dl> rather than a stack of divs so that the Markdown twin gets a real
   labelled list — `- **[Tissue vs Vercel](/vs/vercel)** — the gloss` — instead
   of a run of paragraphs. */
dl.index { margin: 1.8rem 0 0; border-top: 1px solid var(--line2); max-width: 46em }
dl.index dt { margin: 0; font-weight: 400 }
dl.index dt a { display: block; padding: .95rem .2rem .1rem; text-decoration: none; font-weight: 600 }
dl.index dt a:hover { text-decoration: underline }
dl.index dd { margin: 0; padding: 0 .2rem .95rem; border-bottom: 1px solid var(--line); color: var(--ink2); font-style: italic; font-size: .92rem }

@media (max-width: 34rem) {
  h1 { margin-top: .7rem }
  section { padding-block: 2.4rem }
  .tldr, .ender { padding: 1.1rem }
}