/* Layout and recurring content patterns. All classes are ds- namespaced. */
.ds-shell { width: min(100% - var(--ds-space-6) * 2, var(--ds-width-content)); margin-inline: auto; padding-block: var(--ds-space-6) var(--ds-space-7); }
.ds-topbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-4); padding-block: var(--ds-space-4); border-bottom: var(--ds-hairline) solid var(--ds-border); }
.ds-brand { display: flex; align-items: center; gap: var(--ds-space-3); font-weight: var(--ds-weight-strong); }
.ds-brand-mark { width: 1.5rem; height: 1.5rem; color: var(--ds-accent); }
.ds-nav { display: flex; flex-wrap: wrap; gap: var(--ds-space-5); font-size: var(--ds-text-small); }
.ds-nav a { color: var(--ds-secondary); text-decoration: none; }
.ds-nav a[aria-current] { color: var(--ds-accent); text-decoration: underline; }
.ds-intro { padding-block: var(--ds-space-7) var(--ds-space-5); display: grid; gap: var(--ds-space-3); }
.ds-display { font-size: var(--ds-text-display); line-height: var(--ds-leading-tight); letter-spacing: var(--ds-tracking-title); }
.ds-section { margin-top: var(--ds-section-gap); }
.ds-section-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--ds-space-3); padding-bottom: var(--ds-space-3); margin-bottom: var(--ds-space-4); border-bottom: var(--ds-hairline) solid var(--ds-border-strong); }
.ds-command { display: flex; align-items: center; gap: var(--ds-space-3); padding: var(--ds-space-3) var(--ds-space-4); background: var(--ds-elevated); border: var(--ds-hairline) solid var(--ds-border-strong); border-radius: var(--ds-radius); }
.ds-command:focus-within { outline: var(--ds-focus-ring); outline-offset: 3px; }
.ds-command svg { width: 1.125rem; height: 1.125rem; flex: none; color: var(--ds-muted); }
.ds-command input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--ds-text); outline: none; }
.ds-command input:focus-visible { outline: none; }
.ds-technical-layout { display: grid; grid-template-columns: minmax(0,1fr) var(--ds-width-aside); gap: var(--ds-space-6); align-items: start; }
.ds-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--ds-space-5); }
.ds-spec { padding: var(--ds-space-5); background: var(--ds-surface); border: var(--ds-hairline) solid var(--ds-border); border-radius: var(--ds-radius); }
.ds-spec + .ds-spec { margin-top: var(--ds-space-4); }
.ds-endpoint { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-3); padding-bottom: var(--ds-space-4); border-bottom: var(--ds-hairline) solid var(--ds-border); }
.ds-endpoint code { font-size: var(--ds-text-body); font-weight: var(--ds-weight-strong); overflow-wrap: anywhere; }
.ds-method { font: var(--ds-weight-strong) var(--ds-text-label)/var(--ds-leading-body) var(--ds-font-mono); color: var(--ds-accent); background: var(--ds-accent-soft); padding: var(--ds-space-1) var(--ds-space-2); border-radius: var(--ds-radius-small); }
.ds-spec-content { display: grid; gap: var(--ds-space-4); margin-top: var(--ds-space-4); }
.ds-field { display: grid; gap: var(--ds-space-1); }
.ds-label { font-size: var(--ds-text-label); font-weight: var(--ds-weight-strong); color: var(--ds-secondary); }
.ds-metadata { display: grid; }
.ds-metadata-row { display: grid; grid-template-columns: minmax(6rem,1fr) minmax(0,1.4fr); gap: var(--ds-space-3); padding-block: var(--ds-space-2); border-bottom: var(--ds-hairline) solid var(--ds-border); font-size: var(--ds-text-small); }
.ds-metadata dt { color: var(--ds-secondary); }
.ds-metadata dd { margin: 0; overflow-wrap: anywhere; }
.ds-code { background: var(--ds-accent-soft); border-radius: var(--ds-radius-small); padding: var(--ds-space-4); overflow-x: auto; line-height: var(--ds-leading-code); tab-size: 2; }
.ds-code code { font-size: var(--ds-text-code); }
.ds-table-wrap { overflow-x: auto; }
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--ds-text-small); text-align: left; font-variant-numeric: tabular-nums; }
.ds-table caption { text-align: left; color: var(--ds-secondary); padding-bottom: var(--ds-space-3); }
.ds-table :where(th,td) { padding: var(--ds-space-3); border-bottom: var(--ds-hairline) solid var(--ds-border); vertical-align: top; }
.ds-table th { color: var(--ds-secondary); font-size: var(--ds-text-label); font-weight: var(--ds-weight-strong); background: var(--ds-surface); }
.ds-table tbody tr:hover { background: var(--ds-accent-soft); }
.ds-status { display: inline-flex; align-items: center; gap: var(--ds-space-2); color: var(--ds-secondary); font-size: var(--ds-text-label); font-weight: var(--ds-weight-medium); white-space: nowrap; }
.ds-status::before { content: ''; width: .375rem; height: .375rem; background: currentColor; border-radius: 50%; flex: none; }
.ds-status--success { color: var(--ds-success); }
.ds-status--warning { color: var(--ds-warning); }
.ds-status--danger { color: var(--ds-danger); }
.ds-status--info { color: var(--ds-info); }
.ds-callout { --note-color: var(--ds-info); --note-bg: var(--ds-info-soft); padding: var(--ds-space-4); color: var(--note-color); background: var(--note-bg); border-radius: var(--ds-radius-small); font-size: var(--ds-text-small); }
.ds-callout--warning { --note-color: var(--ds-warning); --note-bg: var(--ds-warning-soft); }
.ds-callout--danger { --note-color: var(--ds-danger); --note-bg: var(--ds-danger-soft); }
.ds-callout--success { --note-color: var(--ds-success); --note-bg: var(--ds-success-soft); }
.ds-callout strong { display: block; margin-bottom: var(--ds-space-1); }
.ds-tag { display: inline-block; padding: .125rem var(--ds-space-2); border: var(--ds-hairline) solid var(--ds-border); border-radius: var(--ds-radius-small); font-size: var(--ds-text-label); color: var(--ds-secondary); }
.ds-divider { border: 0; border-top: var(--ds-hairline) solid var(--ds-border); margin-block: var(--ds-space-5); }
.ds-list { padding-left: var(--ds-space-4); margin: 0; font-size: var(--ds-text-small); }
.ds-list li + li { margin-top: var(--ds-space-1); }
.ds-empty { padding: var(--ds-space-6) var(--ds-space-4); border-block: var(--ds-hairline) dashed var(--ds-border-strong); text-align: center; }
.ds-empty p { margin-top: var(--ds-space-2); color: var(--ds-secondary); font-size: var(--ds-text-small); }
.ds-kbd { display: inline-block; padding: .125rem .375rem; border: var(--ds-hairline) solid var(--ds-border); border-bottom-width: 2px; border-radius: var(--ds-radius-small); color: var(--ds-secondary); font-size: .6875rem; white-space: nowrap; }
.ds-flow { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-2); list-style: none; padding: 0; margin: 0; font-size: var(--ds-text-small); }
.ds-flow li { display: flex; align-items: center; gap: var(--ds-space-2); }
.ds-flow li + li::before { content: '→'; color: var(--ds-muted); }
.ds-button { display: inline-flex; align-items: center; justify-content: center; padding: var(--ds-space-2) var(--ds-space-3); border: var(--ds-hairline) solid var(--ds-border-strong); border-radius: var(--ds-radius-small); background: var(--ds-surface); color: var(--ds-text); font-size: var(--ds-text-small); text-decoration: none; cursor: pointer; transition: background var(--ds-duration) var(--ds-ease), border-color var(--ds-duration) var(--ds-ease); }
.ds-button:hover { background: var(--ds-accent-soft); border-color: var(--ds-accent); color: var(--ds-accent); }
.ds-button:active { background: var(--ds-border); }
.ds-button:disabled:hover { background: var(--ds-surface); border-color: var(--ds-border-strong); color: var(--ds-text); }
.ds-skip-link { position: absolute; top: -5rem; left: var(--ds-space-4); background: var(--ds-elevated); padding: var(--ds-space-2); z-index: 10; }
.ds-skip-link:focus { top: var(--ds-space-2); }
@media (max-width: 880px) { .ds-technical-layout { grid-template-columns: minmax(0,1fr); } }
@media (max-width: 560px) { .ds-shell { width: calc(100% - var(--ds-space-4) * 2); padding-top: var(--ds-space-3); } .ds-grid { grid-template-columns: minmax(0,1fr); } .ds-spec { padding: var(--ds-space-4); } .ds-command .ds-kbd { display: none; } .ds-intro { padding-top: var(--ds-space-6); } }