/* claims.css — /boundary-test and /invariants.
 *
 * These two pages are long-form argument, not marketing panels, and the
 * pricing classes they first borrowed were the wrong shape for it:
 * .site-section carries a border and no vertical padding (each page
 * section supplies its own), .pr-hero-sub is a hero subtitle with no
 * bottom margin so consecutive paragraphs collided, and
 * .pr-launch-features is a numbered list on a fixed 2rem first column,
 * which a word like "handlers" overflows straight into the text.
 *
 * Everything below uses the site tokens, so both themes follow. */

/* ── Sections ─────────────────────────────────────────────────── */

.cl-section { padding: 4.5rem 0; }
.cl-section-tight { padding: 3rem 0; }

/* ── Prose ────────────────────────────────────────────────────── */

.cl-prose {
  font-size: 16px;
  line-height: 1.75;
  color: var(--muted);
  font-weight: 300;
  max-width: 62ch;
}

/* The rhythm .pr-hero-sub never had. */
.cl-prose + .cl-prose { margin-top: 1.25rem; }

.cl-prose strong { color: var(--fg); font-weight: 500; }

.cl-prose code {
  font-family: var(--mono);
  font-size: 0.88em;
  color: var(--fg);
  background: var(--paper-2);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

.cl-h2 { margin-bottom: 1.5rem; }

.cl-pre {
  margin: 1.75rem 0;
  padding: 1.25rem 1.5rem;
  background: var(--paper-2);
  border: 0.5px solid var(--border);
  border-radius: 4px;
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  color: var(--fg);
}

.cl-pre code { background: none; padding: 0; font-size: inherit; }

/* ── Invariants ───────────────────────────────────────────────── */

.cl-group { margin-top: 3.5rem; }
.cl-group:first-of-type { margin-top: 0; }

.cl-invariants { list-style: none; margin: 0; padding: 0; }

.cl-inv {
  padding: 1.5rem 0;
  border-top: 0.5px solid var(--border);
}

.cl-inv:last-child { border-bottom: 0.5px solid var(--border); }

/* The statement is the content. Everything else on the row is an
 * address for it, and is sized to say so. */
.cl-inv-statement {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--fg);
  font-weight: 400;
  max-width: 68ch;
  margin: 0 0 0.75rem;
}

.cl-inv-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.5;
}

.cl-inv-test { color: var(--accent-light); word-break: break-word; }

.cl-inv-file {
  color: var(--muted-2);
  word-break: break-all;
}

.cl-inv-pkg {
  color: var(--muted-2);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 10px;
}

@media (max-width: 720px) {
  .cl-section { padding: 3rem 0; }
  .cl-inv-proof { flex-direction: column; gap: 0.3rem; }
}

/* ── Diagram ──────────────────────────────────────────────────── */
/* HTML rather than inline SVG: it is the idiom the rest of this
 * codebase already uses for diagrams, it inherits the theme tokens
 * without a second palette, and it reflows on a narrow screen. */

.cl-flow { margin: 0 0 2.25rem; max-width: 820px; }

.cl-flow-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 0.75rem;
}

.cl-flow-node {
  padding: 1rem 1.1rem;
  border: 0.5px solid var(--border);
  border-radius: 4px;
  background: var(--paper-2);
}

.cl-flow-node-quiet { background: none; }

.cl-flow-label {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 0.6rem;
}

.cl-flow-node code {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--accent);
  word-break: break-word;
}

.cl-flow-node code.cl-flow-fn { color: var(--fg); margin-top: 0.35rem; }
.cl-flow-node-quiet code { color: var(--fg); }

.cl-flow-arrow {
  align-self: center;
  color: var(--muted-2);
  font-size: 16px;
}

.cl-flow-loop {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 0.5px dashed var(--border);
}

.cl-flow-loop-line {
  flex: 0 0 auto;
  width: 1.75rem;
  height: 0;
  border-top: 0.5px solid var(--accent);
}

.cl-flow-loop-text {
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--muted-2);
}

.cl-flow-loop-text strong {
  display: block;
  color: var(--accent);
  font-weight: 400;
}

@media (max-width: 820px) {
  .cl-flow-row { grid-template-columns: 1fr; }
  .cl-flow-arrow { transform: rotate(90deg); justify-self: center; }
}

/* ── Per-invariant worked example ─────────────────────────────── */
/* The statement says what cannot happen. This says what someone would
 * try and what the system does instead — the part that is legible
 * without access to the repository the file:line points into. */

.cl-inv-example {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0.65rem;
  margin: 0 0 0.9rem;
  max-width: 780px;
}

.cl-inv-step {
  padding: 0.7rem 0.85rem;
  border: 0.5px solid var(--border);
  border-radius: 3px;
  background: var(--paper-2);
}

.cl-inv-step-refused { border-left: 2px solid var(--accent); }

.cl-inv-step-label {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 0.35rem;
}

.cl-inv-step-text {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--fg);
}

.cl-inv-step-refused .cl-inv-step-text { color: var(--accent); }

.cl-inv-step-arrow {
  align-self: center;
  color: var(--muted-2);
  font-size: 14px;
}

@media (max-width: 720px) {
  .cl-inv-example { grid-template-columns: 1fr; }
  .cl-inv-step-arrow { transform: rotate(90deg); justify-self: center; }
}