/* The public format spec page. Inherits the take explorer's palette from takes.css. */
.format-page { padding-top: 112px; }
.format-page h1 { font-size: clamp(28px, 3vw, 44px); margin: 8px 0 0; }
.format-page h1 code, .format-page h2 code { font-family: ui-monospace, monospace; font-size: .85em; }
.format-page h2 { font-size: 20px; font-weight: 550; letter-spacing: -.02em; margin: 0 0 14px; }
.format-page p { max-width: 74ch; margin: 0 0 14px; }
.format-badges { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 22px 0 18px; }
.format-badge { border: 1px solid var(--take-line); border-radius: 30px; padding: 4px 12px; font-size: 11px; color: var(--take-muted); }
.format-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.format-actions .take-cut-button { padding: 10px 16px; font-size: 12px !important; text-decoration: none; }
.format-section { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--take-line); }

/* The spec is long and its reader arrives hunting one section, so the left margin below
   the hero carries an index rather than nothing. The hero above keeps its full width. */
.format-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 72px; align-items: start; }
.format-columns { min-width: 0; }
.format-columns > .format-section:first-child { margin-top: 48px; }
.format-rail { position: sticky; top: 112px; margin-top: 76px; border-left: 1px solid var(--take-line); padding-left: 20px; }
.format-rail-nav { display: grid; }
.format-rail-nav a { color: var(--take-muted); text-decoration: none; font-size: 12.5px; padding: 6px 0; }
.format-rail-nav a:hover, .format-rail-nav a.is-current { color: var(--take-accent); }
.format-rail-meta { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--take-line); display: grid; gap: 7px; }
.format-rail-meta span { font-size: 11px; color: #6f7477; }
/* Anchors from the rail must clear the fixed navigation. */
.format-columns > .format-section { scroll-margin-top: 96px; }
/* A global rule centres h2 sitewide, which reads as a mistake above left-aligned body
   copy and is plainly wrong once the heading sits in its own narrow column. */
.format-page .story-claim h2 { text-align: left; }

@media (max-width: 1100px) {
    .format-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .format-rail { position: static; margin-top: 40px; border-left: 0; padding-left: 0; }
    .format-rail-nav { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}
.format-list { max-width: 74ch; margin: 0 0 14px; padding-left: 20px; display: grid; gap: 8px; }
.format-list li { color: var(--take-muted); }
.format-list strong, .format-terms dt { color: var(--take-text); }
.format-aside { color: var(--take-muted); border-left: 2px solid var(--take-accent); padding-left: 16px; }
.format-code { background: var(--take-panel); border: 1px solid var(--take-line); border-radius: 12px; padding: 18px 20px; overflow-x: auto; margin: 0 0 16px; }
.format-code code { font-family: ui-monospace, monospace; font-size: 12px; line-height: 1.7; color: var(--take-text); white-space: pre; }
.format-terms { display: grid; grid-template-columns: max-content 1fr; gap: 8px 24px; max-width: 80ch; margin: 0; }
.format-terms dt { font-weight: 550; }
.format-terms dd { margin: 0; color: var(--take-muted); }
.format-page code { font-family: ui-monospace, monospace; font-size: .92em; }
@media (max-width: 640px) {
    .format-terms { grid-template-columns: 1fr; gap: 2px 0; }
    .format-terms dd { margin-bottom: 10px; }
}