/* developers.jarsave.com: the dark code panels and the attribute rows (Stripe's API reference: an uppercase label
   over each panel, syntax colours, a copy button; each attribute a mono name, its type, a Required tag, a line of
   description, a hairline under it; nested attributes behind "Show child attributes"). Tokens in developers.css. */
.panel { background: var(--code-bg); border: 1px solid var(--code-line); border-radius: 10px; overflow: hidden; }
.panel .label { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 14px; border-bottom: 1px solid var(--code-line); color: var(--code-label); font: 600 0.7rem/1.4 var(--font-body); letter-spacing: 0.07em; text-transform: uppercase; }
.panel pre { margin: 0; padding: 14px; overflow-x: auto; color: var(--code-text); font: 0.8rem/1.65 var(--font-mono); tab-size: 2; }
.panel pre code { background: none; padding: 0; font: inherit; }
.panel .copy { font: 600 0.7rem var(--font-body); letter-spacing: 0.04em; color: var(--code-label); background: none; border: 1px solid var(--code-line); border-radius: 5px; padding: 3px 8px; cursor: pointer; }
.panel .copy:hover { color: var(--code-text); }
.panel .note { padding: 12px 14px; color: var(--code-text); font-size: 0.85rem; line-height: 1.55; }
.panel .note + .note { border-top: 1px solid var(--code-line); }
.panel .note code { background: rgba(230, 232, 242, 0.1); color: var(--code-text); }
.k { color: var(--c-key); }
.s { color: var(--c-str); }
.n { color: var(--c-num); }
.l { color: var(--c-lit); }
.c { color: var(--code-label); }

.attrs { display: grid; }
.attr { padding: 14px 0; border-bottom: 1px solid var(--line); display: grid; gap: 4px; }
.an { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.an code { background: none; padding: 0; font-weight: 700; color: var(--head); font-size: 0.88rem; }
.an .t { font-size: 0.8rem; color: var(--muted); }
.an .req { font-size: 0.75rem; font-weight: 600; color: var(--req); }
.attr p { font-size: 0.92rem; }
.attr details { margin-top: 6px; }
.attr summary { display: inline-block; cursor: pointer; list-style: none; font-size: 0.82rem; font-weight: 600; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; }
.attr summary::-webkit-details-marker { display: none; }
.attr summary::before { content: "+ "; }
.attr details[open] summary::before { content: "\2212 "; }
.attr details .attrs { margin: 8px 0 0 4px; padding-left: 14px; border-left: 1px solid var(--line); }

.codes { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.codes th, .codes td { text-align: left; vertical-align: top; padding: 8px 0; border-bottom: 1px solid var(--line); }
.codes th { font-weight: 600; color: var(--muted); font-size: 0.78rem; }
.codes td:first-child { width: 7.5rem; font: 600 0.85rem var(--font-mono); color: var(--head); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { font-size: 0.82rem; padding: 3px 10px; border-radius: 999px; background: var(--inline); color: var(--muted); white-space: nowrap; }