:root {
  --bg: #0D0F14;
  --panel: #171A22;
  --ink: #CCD0DA;
  --muted: #8890A3;
  --line: #2A2F3D;
  --accent: #8B87FF;
  --accent-soft: #211F3A;
  --pass: #34D399;
  --pass-soft: #123328;
  --fail: #F87171;
  --fail-soft: #3A1414;

  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
}

/* Tachyons (the theme's CSS framework) already normalizes box-sizing and
   element defaults site-wide, and the theme owns html/body/main directly —
   everything below is scoped under .integrity-demos so it only ever styles
   this page's own content, never the theme's header/nav/footer. */

.integrity-demos {
  max-width: 70rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
  font-family: var(--font-sans);
  color: var(--ink);
  line-height: 1.5;
}

.integrity-demos a { color: var(--accent); }
.integrity-demos input[type="checkbox"],
.integrity-demos input[type="radio"] { accent-color: var(--accent); }

/* ---- tabs ---- */

.tabs { margin: 1.75rem 0 0; }

/* Folder-tab look: inactive tabs are plain closed boxes resting on the
   baseline (full border on all sides, including the bottom -- the line
   stays visible under and around them). The active tab is solid accent
   purple with no bottom border of its own, pulled down 1px to overlap and
   erase its segment of that baseline, so it visually opens straight into
   the content below instead of sitting as a separate box on top of it. */
.tablist {
  display: flex;
  gap: 0.35rem;
  border-bottom: 1px solid var(--line);
}

.tab {
  appearance: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--muted);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
  padding: 0.65rem 1.15rem;
}
.tab:hover { color: var(--ink); background: var(--accent-soft); }
.tab[aria-selected="true"] {
  color: #fff;
  font-weight: 700;
  background: var(--accent);
  border-color: var(--accent);
  border-bottom: none;
  margin-bottom: -1px;
}
.tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.tabpanel {
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 1.75rem 1.5rem 1.5rem;
}

.eyebrow {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.72rem;
  color: var(--accent);
  font-weight: 600;
  margin: 0 0 0.6rem;
}

.intro h1 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  margin: 0 0 0.9rem;
  letter-spacing: -0.01em;
}

.lede, .intro ul {
  color: var(--muted);
  max-width: 42rem;
  font-size: 1rem;
}

.intro ul {
  margin: 0.75rem 0 0;
  padding-left: 1.25rem;
}
.intro li + li { margin-top: 0.5rem; }

.lede code, .intro li code { color: var(--ink); }

.expandable {
  margin: 1.25rem 0 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.1rem 1rem;
}
.expandable summary {
  cursor: pointer;
  padding: 0.75rem 0;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
}
.expandable summary::-webkit-details-marker { display: none; }
.expandable summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 0.5em;
  color: var(--accent);
  transition: transform 0.15s ease;
}
.expandable[open] summary::before { transform: rotate(90deg); }
.expandable summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.expandable__content {
  padding: 0 0 1rem;
  color: var(--muted);
}
.expandable__content > :first-child { margin-top: 0; }
.expandable__content > .http-block {
  max-width: 42rem;
}

.expandable--nested {
  margin: 1rem 0;
  max-width: 42rem;
}
.expandable--nested summary { font-weight: 500; font-size: 0.92rem; }

.integrity-demos code {
  font-family: var(--font-mono);
  background: var(--accent-soft);
  padding: 0.1em 0.35em;
  border-radius: 3px;
  font-size: 0.92em;
}
.integrity-demos pre code {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}
.integrity-demos pre[tabindex] {
  overflow-x: auto;
  overflow-y: hidden;
}

.panel__hint {
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 0;
}

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.5rem;
}

/* ---- form controls (used by the Verify panel) ---- */

.field { display: block; margin-bottom: 1rem; }
.field__label {
  display: block;
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
}
.verify-sync-status { font-style: italic; }
.verify-sync-status.is-diverged { color: var(--fail); font-style: normal; }
.integrity-demos textarea {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--ink);
  background: #12141B;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.7rem 0.8rem;
  resize: vertical;
}

/* ---- three-box layout ---- */

.panel--examples { margin: 2.25rem 0 1.25rem; }

.exchange {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 800px) {
  .exchange { grid-template-columns: 1fr; }
}

/* Request integrity: the long digest values live in the Request panel here
   (not the Response panel, like in Response integrity), so the column
   weighting is flipped to match. */
.exchange--request-wide { grid-template-columns: 1.2fr 0.8fr; }
@media (max-width: 800px) {
  .exchange--request-wide { grid-template-columns: 1fr; }
}

/* ---- origin content (editable, distinct from the wire boxes) ---- */

.origin-body {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--ink);
  background: #12141B;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.8rem 0.9rem;
  resize: vertical;
}
.origin-body:focus, .integrity-demos textarea:focus, .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.origin-body[readonly] {
  background: #1C1F29;
  color: var(--muted);
  resize: none;
  cursor: default;
}

.origin-controls {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

/* ---- HTTP wire blocks (signature element) ---- */

.http-block {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.7;
  background: #10131C;
  color: #DCE1F0;
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  word-break: break-all;
  margin-bottom: 1rem;
}

.http-block--request { color: #8791AC; }
.http-block--request .tok-method { color: #8791AC; font-weight: 600; }

.startline { font-weight: 500; margin-bottom: 0.15rem; }
.tok-method { color: #7FF0C4; font-weight: 600; }
.tok-target { color: #fff; }
.tok-version { color: #6E7791; }

.headerline { color: #DCE1F0; }
.headerline .wire__pending { color: #7B85A3; font-style: italic; }

/* optional header lines: collapsed out of the block entirely when inactive,
   rather than reserving blank space — toggling Range / Want-* / Content-Range
   / Content-Encoding is allowed to reflow the block below it */
.line--reserved { display: none; }
.line--reserved.is-active { display: block; }
.headerline.is-hidden { display: none; }

.wire__key {
  color: #A9A6FF;
  font-weight: 600;
}
.wire__value {
  color: #7FF0C4;
  transition: background-color 0.5s ease;
  border-radius: 3px;
}
.wire__flash { background-color: rgba(127, 240, 196, 0.28); }
.wire__punct { color: #5B6478; }

.http-block__divider {
  border-top: 1px dashed #232838;
  margin: 0.7rem 0 0.6rem;
}
.content-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7B85A3;
  margin-bottom: 0.3rem;
}
.content-body {
  color: #FBBF24;
  white-space: pre-wrap;
  min-height: 1.7em;
}

.range-toggle, .algo-toggle, .content-type-toggle, .encoding-toggle, .want-toggle {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0.7rem 0.9rem 0.85rem;
  margin: 0 0 1rem;
}
.range-toggle legend, .algo-toggle legend, .content-type-toggle legend, .encoding-toggle legend, .want-toggle legend {
  font-size: 0.8rem;
  color: var(--muted);
  padding: 0 0.3em;
}
.range-toggle label, .algo-toggle label, .content-type-toggle label, .encoding-toggle label, .want-toggle label {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  margin-right: 1.2rem;
}
.want-toggle__send { display: flex; margin-bottom: 0.5rem; }
.want-toggle__algos { display: flex; flex-wrap: nowrap; }
.want-toggle__algos label { margin-right: 1rem; }
.want-toggle__algos label:last-child { margin-right: 0; }
.want-toggle input[type="number"] {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.15rem 0.3rem;
  width: 3rem;
}

.panel__hint--tight { margin: 0 0 0.8rem; font-size: 0.82rem; }

/* ---- Want-Digest negotiation panel ---- */

.panel--negotiate { margin: 0 0 1.75rem; }
.is-section-hidden { display: none; }

.negotiate-grid { margin-top: 1.25rem; }

.negotiate-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 0.5rem;
}

.negotiate-explain {
  margin: 0.7rem 0 0;
  font-size: 0.86rem;
  color: var(--ink);
}

.http-block--response.is-rejected .startline { color: var(--fail); }
.range-spec-label input[type="text"] {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.15rem 0.4rem;
  width: 4.5rem;
}


.btn {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.88rem;
  color: #fff;
  background: var(--accent);
  border: none;
  border-radius: 6px;
  padding: 0.6rem 1rem;
  cursor: pointer;
}
.btn:hover { filter: brightness(1.08); }
.btn--ghost {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.legend-note {
  margin: 1.5rem 0 0;
  font-size: 0.78rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.3em;
}
.chip { width: 0.7em; height: 0.7em; border-radius: 2px; display: inline-block; }
.chip--key { background: #A9A6FF; }
.chip--value { background: #7FF0C4; }

.raw-message-input {
  min-height: 12rem;
  background: #10131C;
  color: #DCE1F0;
  border-color: #10131C;
}

.range-error {
  margin: 0.5rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--fail);
}
.range-error:empty { display: none; }

.self-test {
  margin: 0.9rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--muted);
}
.self-test.ok::before { content: '✓ '; color: var(--pass); }
.self-test.bad::before { content: '✗ '; color: var(--fail); }

/* ---- verify panel ---- */

.panel--verify { margin-bottom: 2rem; }
.panel__hint {
  color: var(--muted);
  font-size: 0.88rem;
  margin-top: 0;
}
.verify-actions {
  display: flex;
  gap: 0.75rem;
  margin: 0.25rem 0 1.1rem;
  flex-wrap: wrap;
}

.verify-result {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  border-radius: 8px;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  color: var(--muted);
}
.verify-result.pass {
  background: var(--pass-soft);
  border-color: var(--pass);
  color: #6EE7B7;
}
.verify-result.fail {
  background: var(--fail-soft);
  border-color: var(--fail);
  color: #FCA5A5;
}
.verify-heading { margin: 0; }
.verify-list {
  list-style: none;
  margin: 0.7rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.verify-line {
  display: flex;
  align-items: baseline;
  gap: 0.55em;
}
.verify-icon {
  flex: 0 0 auto;
  font-weight: 700;
  width: 1.1em;
}
.verify-line--pass .verify-icon { color: var(--pass); }
.verify-line--fail .verify-icon { color: var(--fail); }
.verify-line--skip .verify-icon { color: var(--muted); }
.verify-line__text { color: var(--ink); }
.verify-line__text strong { font-weight: 600; }

/* ---- footer ---- */

.page-footer {
  border-top: 1px solid var(--line);
  padding-top: 1.25rem;
  font-size: 0.82rem;
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .wire__key, .wire__value { transition: none; }
}