/* developers.jarsave.com (owner, 2026-10-29: "professional jarsave page", reference Stripe's API reference,
   docs.stripe.com/api, read 2026-10-29). Its primitives: a fixed left menu (plain topics, then grouped resources
   with their endpoints, the open one as a tinted pill), a thin top bar of text links, one long page cut by full-width
   hairlines, each section two columns (prose left, a sticky dark code panel right). No hero, cards, pictures or
   footer. In JarSave's own tokens: Nunito headings (web/fonts), indigo and lime, the system faces for text and code.
   Layout here; code panels and attribute rows in panels.css. */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("fonts/nunito-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  color-scheme: light dark;
  --bg: #FFFFFF;
  --side: #FAFAFC;
  --text: #414A4D;
  --muted: #676E71;
  --head: #23275E;
  --link: #3A3F8F;
  --line: rgba(65, 74, 77, 0.14);
  --pill: #ECEDF8;
  --pill-ink: #3A3F8F;
  --post: #617B28;
  --get: #3A3F8F;
  --del: #B42318;
  --req: #8A6416;
  --inline: #F2F3F7;
  --code-bg: #1E2150;
  --code-line: rgba(230, 232, 242, 0.12);
  --code-text: #E6E8F2;
  --code-label: #9AA0D6;
  --c-key: #AEB2F0;
  --c-str: #BBE753;
  --c-num: #FFC86B;
  --c-lit: #F49AC1;
  --font-display: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  --side-w: 248px;
  --top-h: 56px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14162E; --side: #14162E; --text: #DADCE8; --muted: #A3A7C2; --head: #FFFFFF; --link: #AEB2F0;
    --line: rgba(218, 220, 232, 0.12); --pill: #262A52; --pill-ink: #DADCE8; --post: #BBE753; --get: #AEB2F0;
    --del: #FF9C8F; --req: #E8B84A; --inline: #20234A; --code-bg: #1C1F3D;
  }
}

html, body { overflow-x: clip; }
html { scroll-padding-top: calc(var(--top-h) + 16px); }
body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.6 var(--font-body); -webkit-text-size-adjust: 100%; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
p a, li a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } /* links inside text: not by colour alone */
.side a, .top a, .side li a { text-decoration: none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { color: var(--head); text-wrap: balance; overflow-wrap: anywhere; margin: 0; }
h1 { font: 900 1.75rem/1.2 var(--font-display); }
h2 { font: 800 1.5rem/1.25 var(--font-display); }
h3 { font: 600 1rem/1.4 var(--font-body); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
p { margin: 0; }
code { font: 0.86em var(--font-mono); background: var(--inline); padding: 1px 5px; border-radius: 4px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* The left menu */
.side { position: fixed; inset: 0 auto 0 0; width: var(--side-w); box-sizing: border-box; overflow-y: auto; background: var(--side); border-right: 1px solid var(--line); padding: 16px 12px 32px; z-index: 10; }
.side .brand { display: flex; align-items: center; gap: 8px; padding: 4px 8px 16px; border-radius: 0; background: none; color: var(--head); font: 900 1.05rem var(--font-display); letter-spacing: 0.02em; }
.side .brand img { width: 28px; height: 28px; }
.side .brand span.api { font: 700 0.95rem var(--font-display); color: var(--link); letter-spacing: 0; }
.side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.side a { display: block; padding: 5px 10px; border-radius: 6px; color: var(--muted); font-size: 0.9rem; line-height: 1.35; }
.side a:hover { color: var(--head); text-decoration: none; background: var(--pill); }
.side .brand:hover { background: none; }
.side a[aria-current="true"] { background: var(--pill); color: var(--pill-ink); font-weight: 600; }
.side .group { margin: 18px 0 4px; padding: 0 10px; font-size: 0.78rem; font-weight: 600; color: var(--head); }
.side ul.kids { margin: 1px 0 4px 10px; }
.side ul.kids a { font-size: 0.86rem; }
.side .res.shut ul.kids { display: none; }

/* The top bar */
.top { position: sticky; top: env(safe-area-inset-top, 0px); margin-left: var(--side-w); height: var(--top-h); box-sizing: border-box; display: flex; align-items: center; justify-content: flex-end; gap: 24px; padding: 0 32px; background: var(--bg); border-bottom: 1px solid var(--line); z-index: 5; }
.top a { font-weight: 600; font-size: 0.9rem; white-space: nowrap; }
.top .ver { font: 600 0.85rem var(--font-mono); color: var(--muted); white-space: nowrap; }
.menu { display: none; margin-right: auto; font: 600 0.9rem var(--font-body); color: var(--head); background: none; border: 1px solid var(--line); border-radius: 6px; padding: 6px 12px; cursor: pointer; }

/* The page: one section after another, prose left, code right */
main { margin-left: var(--side-w); }
.sec { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 500px); gap: 56px; padding: 48px 56px 56px; border-bottom: 1px solid var(--line); }
.sec > .prose { display: grid; gap: 16px; align-content: start; }
.sec > .code { position: sticky; top: calc(var(--top-h) + 24px); align-self: start; display: grid; gap: 16px; }
.title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.title .tag { font: 400 1.1rem var(--font-body); color: var(--muted); }
.ep { font: 600 0.88rem var(--font-mono); color: var(--muted); }
.ep .m { margin-right: 6px; }
.m.post { color: var(--post); }
.m.get { color: var(--get); }
.m.del { color: var(--del); }
.prose ol, .prose ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }

@media (max-width: 1180px) {
  .sec { grid-template-columns: minmax(0, 680px); gap: 28px; padding: 40px 40px 48px; }
  .sec > .code { position: static; }
}
@media (max-width: 860px) {
  .side { transform: translateX(-100%); transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1); padding-top: calc(16px + env(safe-area-inset-top, 0px)); }
  .side.open { transform: none; box-shadow: 0 0 0 100vmax rgba(10, 12, 30, 0.35); }
  .top, main { margin-left: 0; }
  .top { padding: 0 16px; gap: 16px; }
  .top .hide-sm { display: none; }
  .menu { display: inline-block; }
  .sec { padding: 32px 16px 40px; }
}
@media (prefers-reduced-motion: reduce) { .side { transition: none; } }