/* SnapHook — blueprint on a backlit drafting table.
   Structure is drawn, not decorated: dashed containment instead of shadows,
   achromatic surfaces, and one rationed periwinkle annotation. */

:root {
  /* Colors */
  --color-void: #000000;
  --color-carbon: #1c1c1c;
  --color-graphite: #4d4d4d;
  --color-steel: #808080;
  --color-ash: #ababab;
  --color-paper: #ffffff;
  --color-periwinkle-annotation: #7089ba;

  /* Typography — families. No webfont is fetched: a privacy-first product
     should not phone a font CDN, so the documented substitute stacks are used
     and weight 1000 resolves to the heaviest face the system offers. */
  --font-raveo-variable: "Raveo Variable", "Inter Variable", Inter, Manrope, ui-sans-serif,
    system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-geist-mono: "Geist Mono", "JetBrains Mono", "IBM Plex Mono", ui-monospace,
    SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Typography — closed scale: 9 / 12 / 14 / 16 / 24 / 32 / 70 */
  --text-micro: 9px;
  --text-caption: 12px;
  --leading-caption: 1.2;
  --text-body-sm: 14px;
  --leading-body-sm: 1.6;
  --tracking-body-sm: -0.14px;
  --text-body: 16px;
  --leading-body: 1.6;
  --tracking-body: -0.16px;
  --text-subheading: 24px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.24px;
  --text-heading: 32px;
  --leading-heading: 1.2;
  --tracking-heading: -0.32px;
  --text-display: 70px;
  --leading-display: 1.1;
  --tracking-display: -0.04em;

  /* Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-w1000: 1000;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-34: 34px;
  --spacing-44: 44px;
  --spacing-50: 50px;
  --spacing-100: 100px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap: 80px;
  --card-padding: var(--spacing-24);
  --element-gap: 10px;

  /* Inline chips — method badges, state tags, inline code. They sit inside a
     line of running text, so their vertical padding has to be tighter than the
     4px floor of the spacing scale or they push the line height around. That is
     the one place this stylesheet needs a sub-scale value, so it is named once
     here instead of being retyped as 1px or 2px at each call site. */
  --padding-chip: 2px var(--spacing-8);

  /* Panels and controls. The pill radius is for pills; a 100px radius on an
     80px-tall textarea reads as a rendering fault, so form controls and panels
     each get one radius and use it everywhere. */
  --radius-controls: var(--radius-nav);
  --radius-panels: var(--radius-featuretiles);

  /* Radii */
  --radius-nav: 6px;
  --radius-tags: 100px;
  --radius-buttons: 100px;
  --radius-featuretiles: 20px;
  --radius-iconcontainers: 50px;

  /* Containment. style.md draws dashes in #000 on carbon; on the void canvas
     that renders nothing, so containment there steps up to graphite — still
     inside the achromatic palette. */
  --rule-on-void: 1px dashed var(--color-graphite);
  --rule-on-carbon: 1px dashed var(--color-void);
  --rule-hair: 1px dashed #2a2a2a;
}

/* ---------------------------------------------------------------- reset ---- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-void);
  color: var(--color-paper);
  font-family: var(--font-raveo-variable);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  font-weight: var(--font-weight-regular);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--color-paper);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

input {
  font: inherit;
  color: inherit;
}

svg {
  display: block;
}

/* Any author rule that sets `display` outbids the user-agent's
   `[hidden] { display: none }`, which silently breaks every `el.hidden = true`
   in the JS. Components here are laid out with flex and grid, so that collision
   is the default rather than the exception: state this once, globally, instead
   of remembering a `[hidden]` override per component. */
[hidden] {
  display: none !important;
}

:focus-visible {
  outline: 2px solid var(--color-periwinkle-annotation);
  outline-offset: 2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ----------------------------------------------------------- typography ---- */

.display {
  margin: 0;
  font-size: clamp(32px, 8.5vw, var(--text-display));
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  font-weight: var(--font-weight-w1000);
  color: var(--color-paper);
}

.heading {
  margin: 0;
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--font-weight-w1000);
}

.subheading {
  margin: 0;
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-medium);
}

.label {
  margin: 0;
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
}

.lede {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-steel);
  max-width: 62ch;
}

.small {
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  letter-spacing: var(--tracking-body-sm);
  color: var(--color-steel);
}

.caption {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--color-ash);
}

.mono-label {
  font-family: var(--font-geist-mono);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-steel);
  margin: 0;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0;
  padding: var(--spacing-4) var(--spacing-12);
  border: 1px dashed var(--color-paper);
  border-radius: var(--radius-tags);
  font-family: var(--font-geist-mono);
  font-size: var(--text-micro);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-paper);
  line-height: 1.6;
}

.eyebrow .dot {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-tags);
  background: var(--color-periwinkle-annotation);
}

.accent {
  color: var(--color-periwinkle-annotation);
}

/* --------------------------------------------------------------- layout ---- */

.shell {
  width: 100%;
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-24);
}

.section {
  border-top: var(--rule-on-void);
  padding: var(--section-gap) 0;
}

.dashed {
  border: var(--rule-on-void);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

.stack-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24);
  text-align: center;
}

.stack-center .lede {
  text-align: center;
  max-width: 52ch;
}

.row {
  display: flex;
  align-items: center;
  gap: var(--spacing-10);
  flex-wrap: wrap;
}

.row-center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-12);
  flex-wrap: wrap;
  margin: 0;
}

/* -------------------------------------------------------------- buttons ---- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-10) var(--spacing-20);
  border: 1px solid var(--color-paper);
  border-radius: var(--radius-buttons);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-paper);
  background: transparent;
  text-decoration: none;
  transition: background-color 120ms linear, color 120ms linear;
}

.pill:hover {
  background: var(--color-paper);
  color: var(--color-void);
  text-decoration: none;
}

.pill.ghost {
  border-color: var(--color-graphite);
  color: var(--color-ash);
}

.pill.ghost:hover {
  border-color: var(--color-paper);
  background: transparent;
  color: var(--color-paper);
}

.pill:disabled {
  border-color: var(--color-graphite);
  color: var(--color-steel);
  cursor: progress;
  background: transparent;
}

.pill.small-pill {
  padding: var(--spacing-6) var(--spacing-16);
  font-size: var(--text-caption);
}

.textlink {
  font-size: var(--text-body-sm);
  color: var(--color-ash);
}

.textlink:hover {
  color: var(--color-paper);
}

/* ------------------------------------------------------------------ nav ---- */

.topnav {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-void);
  border-bottom: var(--rule-hair);
}

.topnav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  height: 64px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.01em;
  color: var(--color-paper);
}

.logo:hover {
  text-decoration: none;
}

.logo-mark {
  width: 22px;
  height: 22px;
  flex: none;
}

.navlinks {
  display: flex;
  align-items: center;
  gap: var(--spacing-24);
  list-style: none;
  margin: 0;
  padding: 0;
}

.navlinks a {
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-ash);
  border-radius: var(--radius-nav);
}

.navlinks a:hover,
.navlinks a[aria-current="page"] {
  color: var(--color-paper);
  text-decoration: none;
}

/* ----------------------------------------------------------------- hero ---- */

.hero {
  background: radial-gradient(circle at 50% 18%, var(--color-carbon) 0%, var(--color-void) 68%);
  border-bottom: var(--rule-on-void);
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-24);
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  padding: var(--spacing-100) 0;
}

.hero-inner .display {
  max-width: 14ch;
}

.hero-inner .lede {
  text-align: center;
  max-width: 54ch;
}

.hero-meta {
  display: flex;
  gap: var(--spacing-20);
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--font-geist-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-steel);
}

/* ------------------------------------------------------------ code block --- */

.code {
  margin: 0;
  padding: var(--card-padding);
  background: var(--color-carbon);
  border: var(--rule-on-carbon);
  border-radius: var(--radius-panels);
  font-family: var(--font-geist-mono);
  font-size: var(--text-caption);
  line-height: 1.6;
  color: var(--color-ash);
  overflow-x: auto;
  white-space: pre;
  text-align: left;
  width: 100%;
}

.code .cmd {
  color: var(--color-paper);
}

.code .cmt {
  color: var(--color-steel);
}

.code-frame {
  width: 100%;
  max-width: 760px;
}

.code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-10);
  margin-bottom: var(--spacing-10);
}

/* ----------------------------------------------------------- step cards ---- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-24);
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
}

.step-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-iconcontainers);
  background: var(--color-carbon);
  border: var(--rule-on-carbon);
  margin-bottom: var(--spacing-4);
}

.step-index {
  font-family: var(--font-geist-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-steel);
}

/* -------------------------------------------------------- feature panels --- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--spacing-50);
  align-items: center;
  border: var(--rule-on-void);
  border-radius: var(--radius-panels);
  padding: var(--spacing-44);
}

.split + .split {
  margin-top: var(--spacing-24);
}

.split-copy {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  text-align: left;
}

.checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--element-gap);
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-10);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-paper);
}

.checklist svg {
  flex: none;
  margin-top: 4px;
}

.illustration {
  aspect-ratio: 1 / 1;
  width: 100%;
  background: var(--color-carbon);
  border: var(--rule-on-carbon);
  border-radius: var(--radius-panels);
  display: grid;
  place-items: center;
  padding: var(--spacing-28);
}

.illustration svg {
  width: 100%;
  height: auto;
  max-width: 320px;
}

/* --------------------------------------------------------- feature tiles --- */

.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-16);
}

.tile {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--card-padding);
  border: var(--rule-on-void);
  border-radius: var(--radius-panels);
}

.tile .mono-label {
  color: var(--color-periwinkle-annotation);
}

/* ------------------------------------------------------------------ faq ---- */

.faq {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: var(--rule-hair);
}

.faq details {
  border-bottom: var(--rule-hair);
  padding: var(--spacing-20) 0;
}

.faq summary {
  cursor: pointer;
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  font-family: var(--font-geist-mono);
  color: var(--color-steel);
  flex: none;
}

.faq details[open] summary::after {
  content: "\2013";
}

.faq p {
  margin: var(--spacing-12) 0 0;
  color: var(--color-steel);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  max-width: 78ch;
}

/* ------------------------------------------------------------- doc prose --- */

.prose {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  max-width: 78ch;
}

.prose h2 {
  margin: var(--spacing-28) 0 0;
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-medium);
}

.prose h3 {
  margin: var(--spacing-16) 0 0;
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
}

.prose p,
.prose li {
  margin: 0;
  color: var(--color-steel);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}

.prose strong {
  color: var(--color-paper);
  font-weight: var(--font-weight-medium);
}

.prose ul,
.prose ol {
  margin: 0;
  padding-left: var(--spacing-20);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
}

.prose a {
  color: var(--color-paper);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Inline code takes the control radius, not the pill: a 100px radius on a short
   run of text closes over the glyphs at either end. */
.prose code {
  font-family: var(--font-geist-mono);
  font-size: var(--text-caption);
  color: var(--color-paper);
  background: var(--color-carbon);
  border-radius: var(--radius-controls);
  padding: var(--padding-chip);
}

.toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-8) var(--spacing-16);
  list-style: none;
  margin: 0;
  padding: 0;
}

.toc a {
  font-family: var(--font-geist-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-steel);
}

.toc a:hover {
  color: var(--color-paper);
}

/* ---------------------------------------------------------------- table ---- */

.table-wrap {
  width: 100%;
  overflow-x: auto;
  border: var(--rule-on-void);
  border-radius: var(--radius-panels);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-sm);
}

th,
td {
  text-align: left;
  padding: var(--spacing-12) var(--spacing-16);
  border-bottom: var(--rule-hair);
  vertical-align: top;
}

th {
  font-family: var(--font-geist-mono);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-steel);
  white-space: nowrap;
}

td {
  color: var(--color-ash);
}

tbody tr:last-child td {
  border-bottom: none;
}

td code {
  font-family: var(--font-geist-mono);
  font-size: var(--text-caption);
  color: var(--color-paper);
}

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

.footer {
  border: none;
  border-top: var(--rule-on-void);
  margin-top: var(--section-gap);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  flex-wrap: wrap;
  padding: var(--spacing-34) 0;
}

.footer p {
  margin: 0;
  font-size: var(--text-caption);
  color: var(--color-steel);
}

.footer nav {
  display: flex;
  gap: var(--spacing-16);
  flex-wrap: wrap;
}

.footer nav a {
  font-size: var(--text-caption);
  color: var(--color-steel);
}

.footer nav a:hover {
  color: var(--color-paper);
}

.empty-state {
  padding: var(--spacing-100) var(--spacing-24);
  margin-top: var(--spacing-50);
  border-radius: var(--radius-panels);
}

/* ====================================================== app dashboard ===== */

body.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.appbar {
  flex: none;
  border-bottom: var(--rule-hair);
  padding: var(--spacing-12) var(--spacing-20);
  display: flex;
  align-items: center;
  gap: var(--spacing-16);
  flex-wrap: wrap;
}

.appbar .logo {
  flex: none;
}

.target {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  flex: 1 1 420px;
  min-width: 260px;
  padding: var(--spacing-4) var(--spacing-4) var(--spacing-4) var(--spacing-16);
  background: var(--color-carbon);
  border: var(--rule-on-carbon);
  border-radius: var(--radius-buttons);
}

.target input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  font-family: var(--font-geist-mono);
  font-size: var(--text-caption);
  letter-spacing: 0.02em;
  color: var(--color-paper);
  padding: var(--spacing-6) 0;
}

.target input:focus {
  outline: none;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  font-family: var(--font-geist-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-steel);
  white-space: nowrap;
}

.status .dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-tags);
  background: var(--color-steel);
  flex: none;
}

.status[data-state="live"] .dot {
  background: var(--color-periwinkle-annotation);
}

.status[data-state="live"] {
  color: var(--color-ash);
}

.status[data-state="retrying"] .dot {
  background: var(--color-paper);
  animation: pulse 1.2s ease-in-out infinite;
}

/* The remaining-window readout. It shares the status row but is not part of the
   status itself, so it takes the dimmer of the two greys and its own dashed
   separator rather than another dot. */
.expiry {
  padding-left: var(--spacing-8);
  border-left: 1px dashed var(--color-graphite);
  color: var(--color-steel);
  letter-spacing: 0.1em;
  cursor: help;
}

.status[data-state="gone"] .dot {
  background: transparent;
  border: 1px dashed var(--color-steel);
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.25;
  }
  50% {
    opacity: 1;
  }
}

.workspace {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
}

.pane {
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.pane-list {
  border-right: var(--rule-hair);
}

.pane-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-10);
  padding: var(--spacing-12) var(--spacing-16);
  border-bottom: var(--rule-hair);
}

/* The filter sits on its own rule below the head rather than inside it: the head
   is a space-between row, and a growing input in there would push the count and
   the Clear button around as the placeholder is replaced by typing. */
.pane-search {
  flex: none;
  position: relative;
  display: flex;
  align-items: center;
  padding: var(--spacing-8) var(--spacing-16);
  border-bottom: var(--rule-hair);
}

.searchglass {
  position: absolute;
  left: var(--spacing-24);
  width: 13px;
  height: 13px;
  color: var(--color-steel);
  pointer-events: none;
}

.pane-search input {
  width: 100%;
  /* Left padding clears the glass, right padding clears the clear button. */
  padding: var(--spacing-6) var(--spacing-28);
  background: var(--color-void);
  border: var(--rule-on-void);
  border-radius: var(--radius-controls);
  font-family: var(--font-geist-mono);
  font-size: var(--text-caption);
  color: var(--color-paper);
}

.pane-search input::placeholder {
  color: var(--color-steel);
}

/* WebKit draws its own cancel button on type="search"; ours is keyboard
   reachable and consistently placed, so suppress the duplicate. */
.pane-search input::-webkit-search-cancel-button {
  appearance: none;
  -webkit-appearance: none;
}

.searchclear {
  position: absolute;
  right: var(--spacing-20);
  display: flex;
  align-items: center;
  color: var(--color-steel);
}

.searchclear:hover {
  color: var(--color-paper);
}

.searchclear svg {
  width: 12px;
  height: 12px;
}

.matchcount {
  color: var(--color-periwinkle-annotation);
}

.nomatch {
  padding: var(--spacing-20) var(--spacing-16);
  font-size: var(--text-caption);
  line-height: 1.7;
  color: var(--color-steel);
}

.nomatch-q {
  font-family: var(--font-geist-mono);
  color: var(--color-paper);
}

.pane-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

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

.reqlist li {
  border-bottom: var(--rule-hair);
}

.reqitem {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--spacing-4) var(--spacing-12);
  padding: var(--spacing-12) var(--spacing-16);
  text-align: left;
  background: transparent;
  /* A 2px left rule marks selection. Kept as a border rather than an inset
     shadow so the sheet stays entirely shadow-free. */
  border-left: 2px solid transparent;
  transition: background-color 100ms linear;
}

.reqitem:hover {
  background: var(--color-carbon);
}

.reqitem[aria-current="true"] {
  background: var(--color-carbon);
  border-left-color: var(--color-periwinkle-annotation);
}

.reqitem .path {
  font-family: var(--font-geist-mono);
  font-size: var(--text-caption);
  color: var(--color-paper);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* The only place the annotation colour is used as a fill: a filter match is the
   one thing on the row the eye should land on first. */
.reqitem mark {
  padding: 0 var(--spacing-4);
  border-radius: var(--radius-controls);
  background: var(--color-periwinkle-annotation);
  color: var(--color-void);
}

/* Says which field a hit came from when it came from one the row does not show.
   Without it a body-only match looks like a bug: the row is listed, and nothing
   visible on it contains what was typed. Borrows `.tag`'s chip vocabulary; only
   the grid placement is local. Scoped to `.reqitem` to outrank `.tag`, which is
   declared later in the sheet and would otherwise win on its own margin. */
.reqitem .matchwhere {
  grid-column: 2;
  justify-self: start;
  margin-left: 0;
}

.reqitem .meta {
  grid-column: 2;
  font-family: var(--font-geist-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-steel);
}

/* Method is conveyed by border weight and dash pattern, not hue: the palette is
   deliberately achromatic apart from the periwinkle annotation. */
.badge {
  display: inline-block;
  align-self: start;
  min-width: 52px;
  text-align: center;
  padding: var(--padding-chip);
  border: 1px dashed var(--color-steel);
  border-radius: var(--radius-tags);
  font-family: var(--font-geist-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.06em;
  color: var(--color-ash);
}

.badge[data-method="POST"],
.badge[data-method="PUT"],
.badge[data-method="PATCH"] {
  border-style: solid;
  border-color: var(--color-paper);
  color: var(--color-paper);
}

.badge[data-method="DELETE"] {
  border-style: solid;
  border-color: var(--color-graphite);
  color: var(--color-ash);
}

.detail {
  padding: var(--spacing-24);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

.detail-head {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.detail-head .path-line {
  font-family: var(--font-geist-mono);
  font-size: var(--text-body-sm);
  color: var(--color-paper);
  word-break: break-all;
}

.kv {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr;
  gap: 0;
  border: var(--rule-on-void);
  border-radius: var(--radius-panels);
  overflow: hidden;
}

.kv dt,
.kv dd {
  margin: 0;
  padding: var(--spacing-8) var(--spacing-16);
  border-bottom: var(--rule-hair);
  font-family: var(--font-geist-mono);
  font-size: var(--text-caption);
  min-width: 0;
}

.kv dt {
  color: var(--color-steel);
  text-transform: none;
  word-break: break-all;
}

.kv dd {
  color: var(--color-paper);
  word-break: break-all;
  white-space: pre-wrap;
}

.kv dt:last-of-type,
.kv dd:last-of-type {
  border-bottom: none;
}

.block {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-10);
}

.block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-10);
  flex-wrap: wrap;
}

.body-view {
  margin: 0;
  padding: var(--spacing-16);
  background: var(--color-carbon);
  border: var(--rule-on-carbon);
  border-radius: var(--radius-panels);
  font-family: var(--font-geist-mono);
  font-size: var(--text-caption);
  line-height: 1.6;
  color: var(--color-ash);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 52vh;
  overflow: auto;
}

.warn {
  font-family: var(--font-geist-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-paper);
  border: 1px dashed var(--color-paper);
  border-radius: var(--radius-tags);
  padding: var(--padding-chip);
}

.placeholder {
  height: 100%;
  display: grid;
  place-items: center;
  padding: var(--spacing-44);
  text-align: center;
}

.placeholder .inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-16);
  max-width: 44ch;
}

.placeholder svg {
  opacity: 0.9;
}

.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: var(--spacing-24);
  background: rgba(0, 0, 0, 0.92);
}

/* One shell for every dialog: same border, same radius, same padding, same
   internal rhythm. Anything that differs between dialogs is width and alignment,
   so those are the only things a modifier is allowed to touch. */
.overlay-card {
  max-width: 460px;
  width: 100%;
  padding: var(--spacing-28);
  border: var(--rule-on-void);
  border-radius: var(--radius-panels);
  background: var(--color-carbon);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  max-height: calc(100vh - var(--spacing-50));
  overflow-y: auto;
}

.overlay-card.centered {
  align-items: center;
  text-align: center;
}

/* A dialog's own title row, so the close affordance is always in the same place. */
.overlay-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--spacing-16);
}

.overlay-head .subheading {
  margin: 0;
}

/* A square target for a single glyph: the pill radius would make it a circle
   that no longer matches the panel it closes. */
.icon-button {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  background: none;
  border: var(--rule-on-void);
  border-radius: var(--radius-controls);
  color: var(--color-ash);
  font-family: var(--font-geist-mono);
  font-size: var(--text-caption);
  line-height: 1;
  cursor: pointer;
}

.icon-button:hover {
  color: var(--color-paper);
  border-color: var(--color-paper);
}

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--spacing-24);
  transform: translateX(-50%);
  z-index: 60;
  padding: var(--spacing-8) var(--spacing-20);
  border: 1px dashed var(--color-paper);
  border-radius: var(--radius-tags);
  background: var(--color-void);
  font-family: var(--font-geist-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-paper);
}

/* ------------------------------------------------------- empty workspace ---- */

/* Shown instead of the two-pane inspector while the session has no captures, so
   the first thing a new user sees is the exact command to run. */
.onboard {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  place-items: center;
  padding: var(--spacing-34) var(--spacing-24);
}

.onboard-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-16);
  text-align: center;
  max-width: 720px;
  width: 100%;
}

.onboard .subheading {
  margin: 0;
}

.lede-small {
  margin: 0;
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-steel);
  max-width: 58ch;
}

.sample {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  margin-top: var(--spacing-8);
}

/* The command wraps rather than scrolling: a half-visible curl line is worse
   than a tall one, and it is the whole point of this panel. */
.onboard .code {
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-paper);
}

/* ------------------------------------------------------ response editor ---- */

/* The response editor lives in the shared dialog shell above. It used to expand
   inline at the top of the page, which pushed the list and the detail pane down
   by half a screen every time it opened — a layout shift that cost you your place
   in whatever you were reading. A dialog changes nothing behind it. */
.respbar-grid {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--spacing-12) var(--spacing-16);
  align-items: start;
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  min-width: 0;
}

.field-wide {
  grid-column: 1 / -1;
}

.field input,
.field textarea {
  width: 100%;
  padding: var(--spacing-8) var(--spacing-12);
  background: var(--color-void);
  border: var(--rule-on-void);
  border-radius: var(--radius-controls);
  font-family: var(--font-geist-mono);
  font-size: var(--text-caption);
  color: var(--color-paper);
  resize: vertical;
}

.field textarea {
  min-height: 96px;
  line-height: 1.6;
}

.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
  border-style: solid;
  border-color: var(--color-periwinkle-annotation);
}

.respbar-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-10);
  flex-wrap: wrap;
  padding-top: var(--spacing-16);
  border-top: var(--rule-on-carbon);
}

.respbar-presets {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  flex-wrap: wrap;
}

/* A count of one word, so it reads as a state marker rather than a badge. */
.tag {
  margin-left: var(--spacing-8);
  padding: var(--padding-chip);
  border: 1px dashed var(--color-periwinkle-annotation);
  border-radius: var(--radius-tags);
  font-family: var(--font-geist-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-periwinkle-annotation);
}

/* ----------------------------------------------------------- responsive ---- */

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
    gap: var(--spacing-28);
    padding: var(--spacing-28);
  }

  .illustration {
    max-width: 380px;
  }

  .tiles {
    grid-template-columns: repeat(2, 1fr);
  }

  .workspace {
    grid-template-columns: 1fr;
    /* Raised from minmax(160px, 38%) when the filter row joined the head. Head
       plus filter is 108px of chrome against a 63px row, so the old track showed
       one and a half rows on a phone — and a list you cannot see two entries of is
       not worth filtering. This concedes real estate the detail pane would rather
       have; the list is the navigation, so it wins the tie. */
    grid-template-rows: minmax(240px, 46%) 1fr;
  }

  .pane-list {
    border-right: none;
    border-bottom: var(--rule-hair);
  }

  .kv {
    grid-template-columns: 1fr;
  }

  .kv dt {
    padding-bottom: 0;
    border-bottom: none;
  }

}

@media (max-width: 860px) {
  .steps {
    grid-template-columns: 1fr;
    gap: var(--spacing-28);
  }

  .navlinks {
    display: none;
  }

  .section {
    padding: var(--spacing-50) 0;
  }

  .hero-inner {
    padding: var(--spacing-50) 0;
  }
}

@media (max-width: 620px) {
  .tiles {
    grid-template-columns: 1fr;
  }

  .shell {
    padding: 0 var(--spacing-16);
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}