/* App styles on top of the vendored shibumi.css tokens (public/vendor/).
   Edit freely; this file is yours. Tokens: --paper --ink --muted --line
   --accent, type scale --text-xs..--text-2xl, --font-sans/serif/mono. */

/* The vendored shibumi.css sets a kozo paper background for the sites; apps
   stay flat, and this override also stops the browser fetching the image. */
body {
  background-image: none;
}

.scaffold {
  max-width: 40.625rem;
  margin: 0 auto;
  padding: clamp(3rem, 9vh, 6.5rem) 1.5rem 4rem;
}

.masthead {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0 0 3.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
}

.masthead-mark {
  color: var(--accent);
  font-size: var(--text-md);
}

.scaffold h1 {
  margin: 0 0 0.75rem;
  font-size: clamp(2.6rem, 7vw, 3.8rem);
  font-weight: 450;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.lede {
  margin: 0 0 3rem;
  max-width: 34rem;
  color: var(--muted);
  font-size: var(--text-lg);
  line-height: 1.55;
}

.demo {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3.25rem;
}

.demo button {
  font: 500 var(--text-md) var(--font-sans);
  padding: 0.5rem 1.3rem;
  border: 1px solid var(--ink);
  border-radius: 0.35rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}

.demo button:hover,
.demo button:focus-visible {
  border-color: var(--accent);
  color: var(--accent);
}

.demo output {
  min-width: 2ch;
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
}

.demo-hint {
  color: var(--muted);
  font-size: var(--text-sm);
}

.endpoints {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

main .endpoints a:not(.btn):not(.button) {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 0.9rem 0.25rem;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  text-decoration-color: transparent;
  transition: background 160ms ease;
}

main .endpoints a:not(.btn):not(.button):hover,
main .endpoints a:not(.btn):not(.button):focus-visible {
  background: var(--faint);
}

main .endpoints code {
  font-size: var(--text-sm);
}
/* Inline code as rounded chips on the faint layer. */
.scaffold code {
  padding: 0.12em 0.42em;
  border-radius: 0.35rem;
  background: var(--faint);
  font-family: var(--font-mono);
  font-size: 0.85em;
}


main .endpoints a:hover code {
  color: var(--accent);
}

.endpoints span {
  color: var(--muted);
  font-size: var(--text-sm);
  text-align: right;
}

.colophon {
  margin-top: 3.5rem;
}

.colophon p {
  margin: 0 0 0.5rem;
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: 1.7;
}

.colophon code {
  color: var(--ink);
}

.colophon-links {
  font-size: var(--text-sm);
}