/* /open-source: compact hero, repository map, "check it yourself" stepper, public grid, figures table, get involved.
   Tokens and the type scale come from system.css; nothing here sets h1/h2/h3 or table cell sizes. */
.osp-sec .sec-head { margin-bottom: clamp(1.25rem, 2vw, 1.75rem); gap: .6rem; }
.osp-sec .sec-head .lede { max-width: 70ch; }
.osp-sec > .wrap { min-width: 0; }

.osp-dg:not(.dg) ol { display: grid; gap: .5rem; padding-left: 1.25rem; list-style: decimal; color: var(--text-dim); font-size: var(--text-body-size); }

/* stepper: the tabs are the shared .stabs / .stab component (system.css); this file only lays out the panel under them */
.osp-steps { display: grid; gap: clamp(1rem, 2vw, 1.5rem); min-width: 0; }
.osp-rail { display: none; }
.osp-steps.is-js .osp-rail { display: grid; }
.osp-view { display: grid; min-width: 0; }
.osp-pane { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(1rem, 2vw, 1.75rem); align-items: start; min-width: 0; padding: clamp(1rem, 2vw, 1.5rem); border: 1px solid var(--border); border-radius: var(--r-panel); background: var(--surface-1); }
.osp-pane[hidden] { display: none; }
.osp-pane:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.osp-steps:not(.is-js) .osp-pane { margin-bottom: 1rem; }
.osp-txt { display: grid; gap: .6rem; align-content: start; min-width: 0; }
.osp-txt p { color: var(--text-dim); font-size: var(--text-body-size); line-height: var(--text-body-lh); }
.osp-txt a { color: var(--text); }
.osp-exp { display: block; padding: .65rem .9rem; border: 1px solid var(--border); border-left: 2px solid var(--valid); border-radius: var(--r-control); }
.osp-exp > span { display: inline-block; margin-right: .6rem; font-size: var(--text-small-size); letter-spacing: .1em; text-transform: uppercase; color: var(--valid); }
.osp-exp code { white-space: normal; overflow-wrap: anywhere; font-size: var(--text-code-size); }
.osp-pane > .code { align-self: start; background: var(--bg); box-shadow: none; min-width: 0; }
.osp-pane > .code pre { min-height: 5.5rem; font-size: var(--text-code-size); line-height: 1.65; overflow-x: auto; white-space: pre; }
@media (max-width: 63.99rem) { .osp-pane { grid-template-columns: minmax(0, 1fr); } }

/* public grid: eight cards, four across */
/* eight cards: three columns on desktop (3+3+2), two on tablet, one on phones: the shared .caps breakpoints apply */
.osp-sec .quiet-row { justify-content: flex-start; margin-top: 1.25rem; }
@media (max-width: 39.99rem) { .osp-caps { grid-template-columns: 1fr; } }

/* figures: a compact card table. Figure | source | command (a code chip with its own copy button) | result. Under 56rem every row is a card. */
.osp-figcard { overflow: hidden; }
.osp-fig { table-layout: fixed; }
.osp-fig th, .osp-fig td { vertical-align: middle; padding: .45rem .9rem; border-bottom: 1px solid var(--border); }
.osp-fig thead th { font-size: var(--text-small-size); padding-block: .6rem; }
.osp-fig tbody th { font-weight: 500; text-align: left; color: var(--text); text-transform: none; letter-spacing: 0; font-size: var(--text-body-size); background: none; }
.osp-fig tbody tr:nth-child(even) { background: rgba(255, 255, 255, .022); }
.osp-fig tbody tr:last-child > * { border-bottom: 0; }
.osp-fig col.c-fig { width: 21%; } .osp-fig col.c-src { width: 22%; } .osp-fig col.c-cmd { width: 38%; } .osp-fig col.c-res { width: 19%; }
.osp-fig code { white-space: normal; overflow-wrap: anywhere; font-size: var(--text-code-size); }
.osp-cmd { display: flex; align-items: center; gap: .5rem; min-width: 0; padding: .15rem .15rem .15rem .65rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg); }
.osp-cmd code { flex: 1 1 auto; min-width: 0; padding: 0; border: 0; background: none; color: var(--text); }
.osp-cmd .btn { flex: none; }
@media (max-width: 63.99rem) { .osp-fig col.c-fig { width: 22%; } .osp-fig col.c-src { width: 24%; } .osp-fig col.c-cmd { width: 38%; } .osp-fig col.c-res { width: 16%; } }
@media (max-width: 55.99rem) {
  .osp-fig, .osp-fig tbody, .osp-fig tr, .osp-fig th, .osp-fig td { display: block; width: auto; }
  .osp-fig colgroup, .osp-fig thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .osp-fig tbody tr { display: grid; gap: .5rem; padding: .85rem 1rem; border-bottom: 1px solid var(--border); }
  .osp-fig tbody tr:last-child { border-bottom: 0; }
  .osp-fig th, .osp-fig td { padding: 0; border: 0; }
  .osp-fig tbody th { font-size: var(--text-body-size); }
  .osp-fig td[data-l]::before { content: attr(data-l); display: block; margin-bottom: .15rem; font-size: var(--text-small-size); letter-spacing: .08em; text-transform: uppercase; color: var(--text-faint); }
  .osp-fig td[data-l="Command"]::before { margin-bottom: .3rem; }
  .osp-cmd { border-radius: var(--r-control); }
}

/* get involved */
.osp-inv > div { display: grid; gap: .5rem; align-content: start; }
.osp-inv .link-arrow { margin-top: .25rem; }
.osp-follow { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: clamp(1.25rem, 2vw, 1.75rem); }
.osp-follow p { color: var(--text-faint); font-size: var(--text-body-size); }
.osp-follow .c-social { margin-top: 0; }