/* dev.spooky.mov (owner's request 2026-10-18): the api docs and the terms, static pages in the site's look. Same tokens
   and type as src/app/styles.css (keep them in step); light only, like the site's default ("longlegs"). No dividers,
   lowercase, Courier Prime for everything. */
@font-face { font-family: 'Courier Prime'; font-weight: 400; font-display: swap; src: url('/fonts/courier-prime-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Courier Prime'; font-weight: 700; font-display: swap; src: url('/fonts/courier-prime-latin-700-normal.woff2') format('woff2'); }

:root { --paper: #fff; --ink: #111; --grey: #767676; color-scheme: light; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font-family: 'Courier Prime', 'Courier New', monospace; font-size: 15px; line-height: 1.6; -webkit-text-size-adjust: 100%; }
a { color: var(--ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (hover: hover) { a:hover { text-decoration-style: dotted; } }
a:focus-visible { outline: 1px dotted var(--ink); outline-offset: 3px; }

/* the bar: "spooky.mov api" on the left, "get spooked ↗" on the right (owner 2026-10-18; the pages are in the left
   column); pinned to the top like the site's own bar */
:root { --bar-h: 52px; }
.bar { position: sticky; top: 0; z-index: 2; height: var(--bar-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 16px; background: var(--paper); border-bottom: 1px solid var(--grey); }
.mark { font-weight: 700; text-decoration: none; }
/* the site's button (src/app/styles.css .box) and its external-link convention (ExternalLink.jsx, owner 2026-10-18):
   "get spooked ↗" on the right of the bar goes to spooky.mov in a new tab */
.box { box-sizing: border-box; height: 40px; display: inline-flex; align-items: center; padding: 0 14px; font-size: 14px; color: var(--ink); background: var(--paper); border: 1px solid var(--ink); border-radius: 1px; white-space: nowrap; text-decoration: none; -webkit-tap-highlight-color: transparent; }
@media (hover: hover) { .box:hover { background: var(--ink); color: var(--paper); } }
.ext-arrow { display: inline-block; margin-left: 6px; font-size: 0.85em; line-height: 1; transform: rotate(-45deg); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

main { padding: 32px 16px 64px; }

/* every page: /recent's two columns (src/app/styles.css .recent-cols, owner 2026-10-18): on the left, anchored, the
   pages — "get started", one row per endpoint (its method in grey, like a watch's stars), then "terms" — on the right,
   the page */
/* left-justified (owner 2026-10-18: no centring margins): the columns start at the bar's 16px gutter; the page is at
   most 60rem (tables and examples), running text 52rem */
main.cols { max-width: none; margin: 0; display: grid; grid-template-columns: minmax(200px, 240px) minmax(0, 1fr); gap: 48px; align-items: start; }
.side { position: sticky; top: calc(var(--bar-h) + 32px); min-width: 0; }
.side-list { list-style: none; margin: 0; padding: 0; font-size: 14px; line-height: 1.35; }
.side-list li { margin: 0 -6px; padding: 0; }
.side-list li.end { margin-top: 16px; } /* "terms", after the endpoints: space, no divider */
.side-list a { display: flex; justify-content: space-between; gap: 10px; padding: 4px 6px; text-decoration: none; }
.side-list .m { flex: none; color: var(--grey); white-space: nowrap; }
.side-list li.on .t { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (hover: hover) { .side-list li:not(.on) a:hover .t { text-decoration: underline dotted; text-underline-offset: 3px; } }
.page { min-width: 0; max-width: 60rem; } /* tables and examples fill this, never the whole screen (owner 2026-10-18) */
.page > p, .page > ul, .page > ol { max-width: 52rem; }
.lede { margin: -4px 0 16px; }
.page h3 { margin: 22px 0 8px; font-size: 15px; }
.status { margin: 0 0 6px; font-size: 14px; color: var(--grey); }
.page > h1:first-child { margin-top: 0; }
.endpoint { margin: 0 0 20px; font-size: 15px; }
.endpoint .verb { font-weight: 700; margin-right: 8px; }
@media (max-width: 720px) {
  main.cols { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .side { position: static; }
}
h1 { margin: 0 0 12px; font-size: 22px; line-height: 1.3; }
h2 { margin: 40px 0 10px; font-size: 18px; line-height: 1.35; }
p, ul, ol { margin: 0 0 12px; }
ul, ol { padding-left: 22px; }
li { margin: 4px 0; }
.quiet { color: var(--grey); }
code { font: inherit; font-weight: 700; overflow-wrap: anywhere; }
pre { margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--ink); border-radius: 2px; overflow-x: auto; font: inherit; font-size: 14px; line-height: 1.5; }
pre code { font-weight: 400; overflow-wrap: normal; }
/* every example copies with one click (owner 2026-10-18; dev.js adds the button) */
.ex { position: relative; }
.ex pre { padding-right: 84px; }
.copy { position: absolute; top: 8px; right: 8px; font: inherit; font-size: 13px; color: var(--ink); background: var(--paper); border: 1px solid var(--ink); border-radius: 1px; padding: 2px 10px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* a phone's example scrolls sideways: the button gets its own strip above the text instead of covering the first line */
@media (max-width: 560px) { .ex pre { padding-top: 40px; padding-right: 16px; } }
@media (hover: hover) { .copy:hover { background: var(--ink); color: var(--paper); } }
.copy:focus-visible { outline: 1px dotted var(--ink); outline-offset: 2px; }

/* two-column lists of fields and errors: space, no rules */
.fields { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14px; }
/* one line under the heading row and between rows (owner 2026-10-18: "single visible row dividers … not column
   dividers"); the only rules on these pages */
.fields th { text-align: left; font-weight: 700; padding: 0 20px 8px 0; vertical-align: bottom; border-bottom: 1px solid var(--ink); }
.fields td { padding: 8px 20px 8px 0; vertical-align: top; border-bottom: 1px solid var(--grey); }
.fields td:first-child { white-space: nowrap; }
.fields td code { overflow-wrap: normal; white-space: nowrap; } /* a field or error name never breaks */
@media (max-width: 560px) {
  .fields, .fields tbody, .fields tr, .fields td { display: block; }
  .fields thead { display: none; }
  .fields tr { margin: 0 0 10px; }
  .fields td { padding: 0; border: 0; }
  .fields tr { padding: 0 0 10px; border-bottom: 1px solid var(--grey); }
}