/* rosenbound.com on the Open Stacks design system.
   Every colour, radius, duration, face and size resolves to a custom property declared in
   tokens.css; this file declares none of its own. Class names carry the os- prefix; the
   five patterns the system lacked as React components are rendered here as CSS + a small
   behaviour module in site.js: Instrument, Range, Tabs, Accordion, Track. */

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
body {
  margin: 0; background: var(--bg); color: var(--text); font: var(--type-body);
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
}
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; } ul { list-style: none; }
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); text-decoration: underline; }
code, kbd, pre { font: var(--type-code); }
strong { font-weight: 600; }
img, svg, canvas { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
/* Text for assistive technology only: kept in the accessibility tree, removed from layout. */
.os-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---------- type roles ---------- */
.os-meta   { font: var(--type-meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--text-muted); }
.os-callnum{ font: var(--type-meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--brass-text); }
.os-num    { font-variant-numeric: tabular-nums lining-nums; }
.os-h2     { font: var(--type-page-title); letter-spacing: var(--track-display); color: var(--text); text-wrap: balance; }
.os-h3     { font: var(--type-panel-title); letter-spacing: var(--track-display); color: var(--text); }
.os-lede   { max-width: var(--measure-prose); color: var(--text-muted); text-wrap: pretty; }
.os-small  { font: var(--type-body-sm); }
.os-prose  { max-width: var(--measure-prose); color: var(--text-muted); }
.os-prose p + p { margin-top: 14px; }

/* ---------- layout ---------- */
.os-wrap { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 768px) { .os-wrap { padding-inline: var(--gutter-md); } }
.os-section { padding-block: var(--space-13); border-top: var(--hairline); }
@media (min-width: 768px) { .os-section { padding-block: var(--space-14); } }
.os-section__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.os-section__idx { font: var(--type-meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--brass-text); }
.os-section .os-lede { margin-top: 12px; }
.os-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- card (system card: surface, hairline, brass rule under the head) ---------- */
.os-card { background: var(--surface); border: var(--hairline); border-radius: var(--r-md); box-shadow: var(--shadow-card); }
.os-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border-bottom: var(--rule);
}
.os-card__body { padding: 16px 18px; }
@media (hover: hover) {
  .os-card--hover:hover { border-color: var(--border-strong); box-shadow: var(--shadow-lift); transform: translateY(-1px); }
  .os-card--hover { transition: border-color var(--dur-hover) var(--ease-out), box-shadow var(--dur-hover) var(--ease-out), transform var(--dur-hover) var(--ease-out); }
}

/* ---------- controls (system Button, Chip, Badge, NavPill as CSS) ---------- */
.os-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--hit-min); padding: 8px 16px; border-radius: var(--r-md);
  border: var(--control-line); background: var(--surface-raised); color: var(--text);
  font: var(--type-control); cursor: pointer; white-space: nowrap; text-decoration: none;
  transition: border-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out), background-color var(--dur-hover) var(--ease-out);
}
.os-btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.os-btn--accent { padding: 8px 18px; background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.os-btn--accent:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); }
.os-btn--fired { background: var(--ok-soft); border-color: var(--ok-soft); color: var(--ok-text); }
.os-btn[disabled] { opacity: .5; cursor: not-allowed; }

.os-chip { border: none; background: none; padding: 6px 0; cursor: pointer; font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; }
.os-chip__body {
  display: inline-flex; align-items: center; gap: 6px; height: var(--chip-h); padding: 0 12px;
  border-radius: var(--r-sm); border: 1px solid transparent; background: var(--chip-bg); color: var(--chip-text);
  font: var(--type-control);
  transition: background-color var(--dur-tint) linear, color var(--dur-tint) linear, border-color var(--dur-tint) linear;
}
.os-chip:hover .os-chip__body { border-color: var(--border-strong); }
.os-chip[aria-pressed="true"] .os-chip__body { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); font-weight: 600; }

.os-badge {
  display: inline-flex; align-items: center; border-radius: var(--r-sm); padding: 2px 7px;
  font: var(--type-badge); letter-spacing: var(--track-meta); text-transform: uppercase;
  background: var(--chip-bg); color: var(--chip-text); white-space: nowrap;
}
.os-badge--ok    { background: var(--ok-soft);    color: var(--ok-text); }
.os-badge--warn  { background: var(--warn-soft);  color: var(--warn-text); }
.os-badge--brass { background: var(--brass-soft); color: var(--brass-text); }

/* Standalone text link that must meet the 44px target floor without looking like a button. */
.os-link--target { display: inline-flex; align-items: center; min-height: var(--hit-min); }
.os-pill {
  position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: var(--hit-min); min-width: var(--hit-min); padding: 0 12px;
  border-radius: var(--r-sm); font: var(--type-control); color: var(--text-muted); white-space: nowrap;
  transition: color var(--dur-tint) linear;
}
.os-pill:hover { color: var(--text); text-decoration: none; }
.os-pill[aria-current] { color: var(--text); }
.os-pill[aria-current]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: var(--accent); }

/* ---------- ledger stat strip: the rules are 1px grid gaps over --border ---------- */
.os-ledger { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border); border: var(--hairline); border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 768px) { .os-ledger { grid-template-columns: repeat(var(--os-ledger-cols, 4), minmax(0, 1fr)); } }
.os-ledger__cell { background: var(--surface); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; min-height: var(--hit-min); }
.os-ledger__value { font: var(--type-stat); font-variant-numeric: tabular-nums; color: var(--text); overflow-wrap: anywhere; }
.os-ledger__label { font: var(--type-badge); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--text-muted); }

/* =====================================================================================
   PATTERN 1 · Instrument
   A framed stage for a live canvas. Caption row on top (call number left, state right)
   with the brass rule under it; the stage holds a <canvas> and a mandatory fallback slot.
   site.js sets data-mode="live" or "fallback"; without JS the fallback is what renders,
   so the frame is never empty.
   ===================================================================================== */
.os-instrument { background: var(--surface); border: var(--hairline); border-radius: var(--r-md); box-shadow: var(--shadow-card); overflow: hidden; }
.os-instrument__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px;
  border-bottom: var(--rule); font: var(--type-meta); letter-spacing: var(--track-meta); text-transform: uppercase;
}
.os-instrument__callnum { color: var(--brass-text); flex: none; }
.os-instrument__state { color: var(--text-muted); text-align: right; }
.os-instrument__stage { position: relative; aspect-ratio: var(--os-stage-ratio, 16 / 10); background: var(--surface); }
.os-instrument__stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.os-instrument__fallback { position: absolute; inset: 0; overflow: auto; padding: 14px; color: var(--text-muted); font: var(--type-body-sm); }
.os-instrument__fallback svg { display: block; width: 100%; height: 100%; }
.os-instrument__fallback table { border-collapse: collapse; width: 100%; font: var(--type-code); font-variant-numeric: tabular-nums; }
.os-instrument__fallback th, .os-instrument__fallback td { text-align: left; padding: 6px 8px; border-bottom: var(--hairline); }
.os-instrument__fallback th { font: var(--type-meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--text-muted); }
.os-instrument:not([data-mode="live"]) .os-instrument__stage > canvas { display: none; }
.os-instrument[data-mode="live"] .os-instrument__fallback { display: none; }
.os-instrument__body { padding: 14px 14px 16px; border-top: var(--hairline); }
.os-instrument__caption { margin-top: 10px; font: var(--type-body-sm); color: var(--text-muted); }

/* =====================================================================================
   PATTERN 2 · Range
   A labelled slider with a tabular mono readout. Track --border, filled portion --accent
   (site.js writes --os-fill as a percentage), thumb --surface-raised with a
   --border-strong edge. The input itself is 44px tall so the hit height meets the floor;
   the visible track stays 2px.
   ===================================================================================== */
.os-range { display: grid; gap: 4px; }
.os-range__row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.os-range__label { font: var(--type-meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--text-muted); }
.os-range__value { font: var(--type-stat); font-variant-numeric: tabular-nums; color: var(--text); }
.os-range__input {
  --os-fill: 0%;
  -webkit-appearance: none; appearance: none; width: 100%; height: var(--hit-min); margin: 0;
  background: transparent; cursor: pointer; border-radius: var(--r-sm);
}
.os-range__input::-webkit-slider-runnable-track {
  height: 2px; border-radius: 1px;
  background: linear-gradient(90deg, var(--accent) var(--os-fill), var(--border) var(--os-fill));
}
.os-range__input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -8px; border-radius: 50%;
  background: var(--surface-raised); border: 1px solid var(--border-strong); box-shadow: var(--shadow-card);
}
.os-range__input::-moz-range-track { height: 2px; border-radius: 1px; background: var(--border); }
.os-range__input::-moz-range-progress { height: 2px; border-radius: 1px; background: var(--accent); }
.os-range__input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--surface-raised); border: 1px solid var(--border-strong); }
.os-range__ticks { display: flex; justify-content: space-between; font: var(--type-meta); letter-spacing: var(--track-meta); color: var(--text-muted); }

/* =====================================================================================
   PATTERN 3 · Tabs
   role="tablist" with roving focus and arrow keys (site.js). The active tab is the nav-pill
   treatment: a 2px --accent underline at a 6px offset. Never a filled tab. Horizontal by
   default; aria-orientation="vertical" turns the list into a rail.
   ===================================================================================== */
.os-tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: var(--hairline); }
.os-tabs__tab {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  min-height: var(--hit-min); padding: 0 12px; border: none; background: none; border-radius: var(--r-sm);
  color: var(--text-muted); font: var(--type-control); cursor: pointer; white-space: nowrap; text-align: left;
  transition: color var(--dur-tint) linear;
}
.os-tabs__tab:hover { color: var(--text); }
.os-tabs__tab[aria-selected="true"] { color: var(--text); }
.os-tabs__tab[aria-selected="true"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 6px; height: 2px; background: var(--accent); }
.os-tabs__num { font: var(--type-meta); letter-spacing: var(--track-meta); color: var(--brass-text); min-width: 22px; }
.os-tabs[aria-orientation="vertical"] { flex-direction: column; flex-wrap: nowrap; border-bottom: none; border-right: var(--hairline); padding-right: 8px; }
.os-tabs[aria-orientation="vertical"] .os-tabs__tab { width: 100%; }
.os-tabpanel { padding-top: 22px; }
.os-tabpanel:focus-visible { outline-offset: 4px; }
.os-tabs-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; }
@media (min-width: 900px) {
  .os-tabs-layout { grid-template-columns: 240px minmax(0, 1fr); }
  .os-tabs-layout .os-tabpanel { padding-top: 0; }
}
@media (max-width: 899.98px) {
  .os-tabs[aria-orientation="vertical"] { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; border-right: none; border-bottom: var(--hairline); padding-right: 0; scrollbar-width: none; }
  .os-tabs[aria-orientation="vertical"]::-webkit-scrollbar { display: none; }
  .os-tabs[aria-orientation="vertical"] .os-tabs__tab { width: auto; flex: none; }
}

/* =====================================================================================
   PATTERN 4 · Accordion
   Built on <details>/<summary>. The disclosure marker is the system's CSS triangle and
   rotates 90 degrees when open. Enter and Space are native to <summary>.
   ===================================================================================== */
.os-accordion { border-top: var(--hairline); }
.os-accordion__item { border-bottom: var(--hairline); }
.os-accordion__summary {
  list-style: none; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 12px 2px;
  cursor: pointer; font: var(--type-subhead); color: var(--text); border-radius: var(--r-sm);
}
.os-accordion__summary::-webkit-details-marker { display: none; }
.os-accordion__summary::before {
  content: ""; flex: none; width: 0; height: 0;
  border-left: 6px solid var(--text-muted); border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform var(--dur-tint) linear;
}
.os-accordion__item[open] > .os-accordion__summary::before { transform: rotate(90deg); }
.os-accordion__summary .os-badge { margin-left: auto; }
.os-accordion__body { padding: 0 2px 22px 20px; max-width: var(--measure-prose); color: var(--text-muted); }
.os-accordion__body p + p, .os-accordion__body p + ul { margin-top: 14px; }
.os-accordion--inline { border-top: none; }
.os-accordion--inline .os-accordion__item { border-bottom: none; }
.os-accordion--inline .os-accordion__summary { display: inline-flex; min-height: var(--hit-min); padding: 8px 2px; font: var(--type-control); color: var(--accent); }
.os-accordion--inline .os-accordion__summary::before { border-left-color: currentColor; }
.os-accordion--inline .os-accordion__body { padding: 8px 2px 0 20px; }

/* =====================================================================================
   PATTERN 5 · Track
   A horizontal strip of cards, one per vertical, each with the brass rule and a `when`
   badge. Touch and trackpad scroll the strip with scroll-snap; the dots are nav pills that
   jump to a panel. Wide viewports without a reduced-motion preference pin the strip and
   let page scroll drive it (site.js). Below 768px, and whenever reduced motion is on,
   the strip is a plain vertical stack and the dots are gone.
   ===================================================================================== */
.os-track { position: relative; }
.os-track__pin { display: flex; flex-direction: column; }
/* The wrap is a flex item; without min-width:0 its automatic minimum is the strip's intrinsic
   width (four panels side by side), which would push the section wider than the viewport. */
.os-track__pin > .os-wrap { min-width: 0; width: 100%; }
.os-track__strip {
  display: flex; gap: var(--grid-gap); margin-top: 32px; padding-block: 4px 8px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
}
.os-track__strip::-webkit-scrollbar { display: none; }
/* Trailing spacer so the last panel can start-align: the strip must be able to scroll to
   the last panel's left edge, which needs (container width − one panel − one gap) of slack
   after it. Without this, the final dots share one scroll position. */
.os-track__strip::after { content: ""; flex: 0 0 calc(100% - var(--os-panel-w) - var(--grid-gap)); }
.os-track__strip { --os-panel-w: clamp(280px, 32vw, 420px); }
.os-track__panel { flex: 0 0 var(--os-panel-w); scroll-snap-align: start; display: flex; flex-direction: column; }
.os-track__panel .os-card__body { display: flex; flex-direction: column; flex: 1; padding: 16px 16px 18px; }
.os-track__panel h3 { font: var(--type-card-title); color: var(--text); margin: 4px 0 8px; }
.os-track__panel p { font: var(--type-body-sm); color: var(--text-muted); }
.os-track__panel .os-track__go { margin-top: auto; padding-top: 16px; }
.os-track__dots { display: flex; gap: 2px; margin-top: 16px; flex-wrap: wrap; }
.os-track__dot { border: none; background: none; cursor: pointer; }
@media (min-width: 1024px) and (prefers-reduced-motion: no-preference) {
  .os-track--pinned { min-height: 220vh; }
  .os-track--pinned .os-track__pin { position: sticky; top: 0; min-height: 100vh; justify-content: center; }
  .os-track--pinned .os-track__strip { scroll-snap-type: none; }
}
@media (max-width: 767.98px), (prefers-reduced-motion: reduce) {
  .os-track__strip { flex-direction: column; overflow: visible; scroll-snap-type: none; }
  .os-track__strip::after { display: none; }
  .os-track__panel { flex-basis: auto; }
  .os-track__dots { display: none; }
}

/* =====================================================================================
   Homepage layout. Composition only — every treatment above is reused; nothing below
   introduces a colour, radius, face or duration of its own.
   ===================================================================================== */
/* header: sticky, wordmark row + pill row (pills scroll horizontally under 1100px) */
.os-header { position: sticky; top: 0; z-index: 40; background: var(--bg); border-bottom: var(--hairline); }
.os-nav { position: relative; display: flex; align-items: center; gap: 12px; min-height: 60px; flex-wrap: wrap; }
.os-wordmark { display: inline-flex; align-items: center; gap: 10px; font: var(--type-wordmark); letter-spacing: var(--track-display); color: var(--text); min-height: var(--hit-min); }
.os-wordmark:hover { text-decoration: none; color: var(--text); }
.os-wordmark svg { color: var(--brass); flex: none; }
.os-nav__pills { margin-left: auto; position: relative; }
.os-nav__pills ul { display: flex; gap: 2px; }
.os-nav__actions { display: flex; gap: 8px; align-items: center; }
.os-nav__progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--accent); }
@media (max-width: 1099.98px) {
  .os-nav { padding-top: 8px; }
  .os-nav__actions { margin-left: auto; }
  .os-nav__actions .os-btn:not(.os-btn--accent) { display: none; }
  .os-nav__pills { order: 9; flex-basis: 100%; margin-left: 0; width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); }
  .os-nav__pills::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 32px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--bg)); }
  .os-nav__pills ul { flex-wrap: nowrap; overflow-x: auto; padding: 0 40px 4px var(--gutter); scrollbar-width: none; }
  .os-nav__pills ul::-webkit-scrollbar { display: none; }
}
@media (max-width: 767.98px) { .os-nav__actions .os-btn--accent { padding-inline: 12px; } }

/* hero */
.os-hero { border-top: none; padding-block: 40px 56px; }
@media (min-width: 768px) { .os-hero { padding-block: 56px 64px; } }
.os-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; }
@media (min-width: 1024px) { .os-hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; } }
.os-h1 { font: 600 clamp(32px, 4vw, 46px)/1.12 var(--font-display); letter-spacing: var(--track-display); color: var(--text); text-wrap: balance; max-width: 20ch; margin: 12px 0 18px; }
.os-hero .os-lede { font-size: 17px; }
.os-hero .os-row { margin-top: 24px; }
.os-readouts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font: var(--type-code); color: var(--text-muted); }
.os-readouts div { display: flex; gap: 6px; }
.os-readouts dd { color: var(--text); font-weight: 500; }
.os-readouts .is-hold { color: var(--ok-text); }
.os-readouts .is-flip { color: var(--warn-text); }
#surface { cursor: grab; } #surface:active { cursor: grabbing; }
.os-instrument .os-row { margin-top: 12px; }

/* numbers */
.os-numbers .os-ledger { margin-top: 16px; }

/* quote and callout */
.os-quote { border-left: 3px solid var(--brass); padding-left: 20px; margin-top: 28px; max-width: var(--measure-prose); }
.os-quote p { font: 500 clamp(20px, 2.2vw, 26px)/1.35 var(--font-display); letter-spacing: var(--track-display); color: var(--text); }
.os-quote .os-attrib { margin-top: 14px; font: var(--type-meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--text-muted); }
.os-note { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 32px; padding: 18px 20px; border-left: 3px solid var(--brass); background: var(--surface); border-radius: 0 var(--r-md) var(--r-md) 0; }
@media (min-width: 900px) { .os-note { grid-template-columns: minmax(0, 1fr) auto; gap: 20px; } }
.os-note p { max-width: var(--measure-prose); color: var(--text-muted); }
.os-section .os-accordion--inline { margin-top: 12px; }
.os-section .os-accordion { margin-top: 24px; }
.os-cta { margin-top: 24px; }

/* platform */
.os-platform .os-tabs-layout { margin-top: 32px; padding: 8px; }
.os-platform .os-tabpanel h3 { font: var(--type-panel-title); letter-spacing: var(--track-display); color: var(--text); margin: 10px 0 12px; }
.os-platform .os-tabpanel p { color: var(--text-muted); max-width: var(--measure-prose); }
.os-platform .os-tabpanel { padding: 20px 22px 24px; }
@media (min-width: 900px) { .os-platform .os-tabpanel { padding: 20px 30px 28px; } }

/* methodology */
.os-method { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 32px; align-items: start; }
@media (min-width: 1024px) { .os-method { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.os-method .os-instrument__stage { --os-stage-ratio: 4 / 3; }
.os-plabel {
  position: absolute; transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap;
  padding: 2px 6px; border-radius: var(--r-sm); background: var(--surface); color: var(--text-muted);
  font: var(--type-badge); letter-spacing: var(--track-meta); text-transform: uppercase;
  transition: background-color var(--dur-tint) linear, color var(--dur-tint) linear;
}
.os-plabel.is-on { background: var(--accent-soft); color: var(--accent-ink); }
.os-method-detail .os-card__body h3 { font: var(--type-card-title); color: var(--text); margin: 6px 0 8px; }
.os-method-detail .os-card__body p { color: var(--text-muted); }
.os-method-detail [data-method] + [data-method] { margin-top: 18px; padding-top: 18px; border-top: var(--hairline); }
.os-method-detail [data-method][hidden] + [data-method] { border-top: none; padding-top: 0; margin-top: 0; }

/* benchmarks */
.os-bench { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 32px; }
@media (min-width: 640px) { .os-bench { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .os-bench { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.os-bench__val { display: block; font: var(--type-stat); font-variant-numeric: tabular-nums; color: var(--text); margin-bottom: 8px; overflow-wrap: anywhere; }
.os-bench .os-card__body { padding: 14px 16px 16px; color: var(--text-muted); font: var(--type-body-sm); }

/* ledger demo */
.os-ledger-demo .os-instrument__body { border-top: none; }
.os-ledger-demo .os-h3 { margin: 8px 0 10px; }
.os-ledger-demo__wrap { margin-top: 20px; border: var(--hairline); border-radius: var(--r-md); overflow-x: auto; background: var(--surface-raised); }
.os-ledger-demo table { width: 100%; border-collapse: collapse; font: var(--type-code); min-width: 640px; }
.os-ledger-demo th { text-align: left; font: var(--type-meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--text-muted); padding: 10px 14px; border-bottom: var(--hairline); background: var(--surface-raised); }
.os-ledger-demo td { padding: 8px 14px; border-top: var(--hairline); vertical-align: middle; transition: background-color var(--dur-tint) linear; }
.os-ledger-demo tr.is-broken td { background: var(--warn-soft); }
.os-ledger-demo__seq { font: var(--type-meta); letter-spacing: var(--track-meta); color: var(--brass-text); }
.os-ledger-demo__ev { font-weight: 500; color: var(--text); white-space: nowrap; }
.os-ledger-demo__pay { color: var(--text-muted); overflow-wrap: anywhere; }
.os-ledger-demo__pay em { font-style: normal; color: var(--warn-text); font-weight: 500; }
.os-ledger-demo__hash { white-space: nowrap; color: var(--text-muted); }
.os-ledger-demo__hash.is-ok { color: var(--ok-text); }
.os-ledger-demo__hash.is-bad { color: var(--warn-text); }
.os-ledger-demo__act { text-align: right; }
.os-ledger-demo__act:empty { display: none; }
.os-ledger-demo table:not([data-live]) .os-ledger-demo__act { display: none; }
.os-btn--small { padding: 8px 12px; }
.os-ledger-demo__diff { margin: 12px 0 0; padding: 12px 14px; border-left: 3px solid var(--warn-text); background: var(--warn-soft); color: var(--warn-text); font: var(--type-code); white-space: pre-wrap; overflow-wrap: anywhere; }

/* sdk */
.os-h2--mono { font: 500 clamp(24px, 3vw, 32px)/1.15 var(--font-mono); letter-spacing: 0; }
.os-install { display: inline-flex; align-items: center; gap: 12px; background: var(--surface); border: var(--hairline); border-radius: var(--r-md); padding: 6px 6px 6px 14px; font: 500 15px/1 var(--font-mono); margin-top: 20px; max-width: 100%; }
.os-install code { font: inherit; }
.os-section .os-badges { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.os-sdk .os-tabs { margin-top: 28px; }
.os-sdk .os-tabpanel ul, .os-sdk .os-tabpanel ol { display: flex; flex-direction: column; gap: 14px; max-width: var(--measure-foot); color: var(--text-muted); }
.os-sdk .os-tabpanel ol { list-style: decimal; padding-left: 22px; }
.os-sdk .os-tabpanel pre { margin: 8px 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface); border: var(--hairline); color: var(--accent-ink); font: var(--type-code); white-space: pre-wrap; overflow-x: auto; }
.os-footnote { margin-top: 26px; }

/* design partners */
.os-partners { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 32px; }
@media (min-width: 768px) { .os-partners { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.os-list li { position: relative; padding-left: 18px; color: var(--text-muted); font: var(--type-body-sm); }
.os-list li + li { margin-top: 10px; }
.os-list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 6px; height: 6px; border-radius: 1px; background: var(--brass); }

/* footer */
.os-footer { border-top: var(--hairline); padding-block: 44px 52px; background: var(--surface); }
.os-footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 640px) { .os-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .os-footer__grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); } }
.os-footer h2 { font: var(--type-meta); letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.os-footer p { max-width: var(--measure-foot); color: var(--text-muted); }
.os-footer p + p { margin-top: 12px; }
.os-footer__links a { display: inline-flex; align-items: center; min-height: var(--hit-min); font: var(--type-body-sm); }
.os-footer__legal { margin-top: 32px; padding-top: 18px; border-top: var(--hairline); font: var(--type-code); color: var(--text-muted); }

/* ---------- motion floor ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; }
}