/* reset.css */
/* Base reset + document defaults. Sorts first in ui.css. */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
/* --ds-header-h is written by initStickyHeader from the measured bar. The 0px
   default keeps this inert on pages with no sticky header. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--ds-header-h, 0px); }
body {
  background: var(--ds-bg); color: var(--ds-text);
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-base); font-weight: 400; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
:where(button, input, select, textarea) { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--ds-focus-ring); }


/* badge.css */
.ds-badge { display: inline-flex; align-items: center; gap: var(--ds-space-1); padding: 2px var(--ds-space-2);
  font-size: var(--ds-text-xs); font-weight: 500; border-radius: var(--ds-radius-pill);
  background: var(--ds-hover); color: var(--ds-text); }
.ds-badge--accent { background: var(--ds-accent-tint); color: var(--ds-accent-press); }
.ds-badge--success { background: color-mix(in srgb, var(--ds-success-fg) 15%, transparent); color: var(--ds-success-fg); }
.ds-badge--danger { background: color-mix(in srgb, var(--ds-danger) 15%, transparent); color: var(--ds-danger); }


/* button.css */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2);
  padding: var(--ds-space-3) var(--ds-space-4); border: 1px solid transparent;
  border-radius: var(--ds-radius-md); font-weight: 500; line-height: 1; cursor: pointer;
  background: transparent;
  transition: background var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease);
  text-decoration: none; white-space: nowrap;
}
/* Must stay below .ds-btn: equal specificity, so this wins by source order only. */
.ds-btn--sm { padding: var(--ds-space-2) var(--ds-space-4); font-size: var(--ds-text-sm); }
.ds-btn--accent { background: var(--ds-accent-solid); color: var(--ds-on-accent-solid); }
.ds-btn--accent:hover { background: var(--ds-accent-solid-press); }
.ds-btn--secondary { background: var(--ds-surface); color: var(--ds-text); border-color: var(--ds-border); }
.ds-btn--secondary:hover { background: var(--ds-hover); }
.ds-btn--ghost { background: transparent; color: var(--ds-text); }
.ds-btn--ghost:hover { background: var(--ds-hover); }
.ds-btn--danger { background: var(--ds-danger); color: var(--ds-on-danger); }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.ds-btn[data-loading] { color: transparent; position: relative; }
.ds-btn[data-loading]::after {
  content: ""; position: absolute; width: 1em; height: 1em; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent; animation: ds-spin .6s linear infinite;
  color: var(--ds-on-accent-solid);
}
@keyframes ds-spin { to { transform: rotate(360deg); } }
.ds-iconbtn { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0;
  background: transparent; border-radius: var(--ds-radius-md); color: var(--ds-text); cursor: pointer; }
.ds-iconbtn:hover { background: var(--ds-hover); }
.ds-link { color: var(--ds-accent); text-decoration: underline; text-underline-offset: 2px; }


/* card.css */
.ds-card { background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); padding: var(--ds-space-5); }
.ds-card--pop { box-shadow: var(--ds-shadow-pop); border-color: transparent; }
.ds-card__title { font-size: var(--ds-text-lg); font-weight: 500; margin-bottom: var(--ds-space-2); }


/* code.css */
.ds-code { position: relative; background: var(--ds-code-bg); color: var(--ds-code-fg);
  border-radius: var(--ds-radius-md); padding: var(--ds-space-4); overflow-x: auto; }
.ds-code pre, .ds-code code { font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); font-weight: 400; }
.ds-code__copy { position: absolute; top: var(--ds-space-2); right: var(--ds-space-2);
  background: var(--ds-code-fg); color: var(--ds-code-bg); border-color: transparent; }


/* footer.css */
/* Grouped footer shell. Structure only, no content opinion: the track list is
   auto-fit rather than a fixed set of columns, so a consumer with two groups
   and a consumer with five both work and neither site's shape is baked in.
   The base .ds-footer rule (border-top, padding, muted colour) is in layout.css. */
.ds-footer__cols {
  display: grid; align-items: start; gap: var(--ds-space-6);
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
/* The identity block width is a per-consumer design decision: consumers who want
   a wider block can add grid-column: span or a custom grid-template-columns. */
.ds-footer__id { max-width: 26ch; }
.ds-footer__id img { display: block; height: var(--ds-brand-foot-h, 32px); width: auto; }
/* The kit resets every margin, so without this the lede sits flush on the mark. */
.ds-footer__id p { margin-top: var(--ds-space-4); font-size: var(--ds-text-sm); color: var(--ds-text-muted); }

/* Sized as the mono eyebrow the family already uses for a small label, rather
   than inventing a second vocabulary for the same job. */
.ds-footer__label {
  font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ds-text-muted); margin-bottom: var(--ds-space-4);
}
.ds-footer__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: var(--ds-space-3);
  font-size: var(--ds-text-sm);
}
/* Deliberately not .ds-link, which underlines in accent. Right for a link in
   prose, wrong for a wall of navigation. */
.ds-footer__link { color: var(--ds-text-muted); text-decoration: none; }
.ds-footer__link:hover { color: var(--ds-text); }

.ds-footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--ds-space-3) var(--ds-space-5);
  margin-top: var(--ds-space-8); padding-top: var(--ds-space-5);
  border-top: 1px solid var(--ds-border);
  font-size: var(--ds-text-sm); color: var(--ds-text-muted);
}


/* form.css */
.ds-field { display: grid; gap: var(--ds-space-2); }
.ds-label { font-size: var(--ds-text-sm); font-weight: 500; }
.ds-help { font-size: var(--ds-text-sm); color: var(--ds-text-muted); }
.ds-field[data-invalid] .ds-help { color: var(--ds-danger); }
.ds-input, .ds-textarea, .ds-select {
  width: 100%; padding: var(--ds-space-3) var(--ds-space-4); background: var(--ds-surface);
  color: var(--ds-text); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md);
  transition: border-color var(--ds-dur) var(--ds-ease);
}
.ds-select {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%238A8891' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--ds-space-4) center;
  padding-right: var(--ds-space-8);
}
.ds-input:focus-visible, .ds-textarea:focus-visible, .ds-select:focus-visible { border-color: var(--ds-accent); }
.ds-field[data-invalid] :is(.ds-input, .ds-textarea, .ds-select) { border-color: var(--ds-danger); }
.ds-textarea { min-height: 6rem; resize: vertical; }
.ds-check { display: inline-flex; align-items: center; gap: var(--ds-space-2); cursor: pointer; }
.ds-check input { accent-color: var(--ds-accent); width: 1.1em; height: 1.1em; }
.ds-toggle { display: inline-block; vertical-align: middle; flex: none; position: relative; width: 42px; height: 24px; }
.ds-toggle input { position: absolute; opacity: 0; }
.ds-toggle span { position: absolute; inset: 0; background: var(--ds-border); border-radius: var(--ds-radius-pill); transition: background var(--ds-dur) var(--ds-ease); }
.ds-toggle span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; background: var(--ds-surface); border-radius: 50%; transition: transform var(--ds-dur) var(--ds-ease); }
.ds-toggle input:checked + span { background: var(--ds-accent); }
.ds-toggle input:checked + span::after { transform: translateX(18px); }


/* header.css */
/* Full-bleed sticky chrome. The consumer nests a .ds-container inside this, and
   a .ds-nav inside that: three elements, one job each.
   Do NOT collapse the container onto this element or onto .ds-nav. .ds-nav's
   padding would zero the container's padding-inline and the bar's contents end
   up 24px left of every section's. */
.ds-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--ds-bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ds-dur) var(--ds-ease);
}

/* Translucency is enhancement, never the base: without backdrop-filter a
   transparent bar is unreadable, so only browsers that can blur get the alpha. */
@supports (backdrop-filter: blur(1px)) {
  .ds-header {
    background: color-mix(in srgb, var(--ds-bg) 72%, transparent);
    -webkit-backdrop-filter: blur(12px) saturate(1.6);
    backdrop-filter: blur(12px) saturate(1.6);
  }
}

/* macOS Reduce Transparency governs exactly this effect. */
@media (prefers-reduced-transparency: reduce) {
  .ds-header {
    background: var(--ds-bg);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* No rule at rest, so the bar is invisible furniture at the top of the page and
   only asserts itself in motion. initStickyHeader toggles the class. */
.ds-header.is-scrolled { border-bottom-color: var(--ds-border); }


/* hero.css */
.ds-hero { padding: var(--ds-space-8) 0; text-align: center; }
.ds-hero__lede { color: var(--ds-text-muted); max-width: 46ch; margin: var(--ds-space-4) auto 0; }
.ds-hero__actions { display: flex; gap: var(--ds-space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--ds-space-5); }


/* layout.css */
.ds-container { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--ds-space-5); }
.ds-grid { display: grid; gap: var(--ds-space-5); }
.ds-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ds-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .ds-grid--2, .ds-grid--3 { grid-template-columns: 1fr; } }
/* padding-block, not `padding: X 0`. This element sits inside .ds-container, and
   the shorthand's implicit 0 would overwrite the container's padding-inline,
   putting the bar's contents 24px left of every section's. */
.ds-nav { display: flex; align-items: center; gap: var(--ds-space-5); padding-block: var(--ds-space-2); }
/* No height here. Height belongs on the asset, from a per-brand token: a fixed
   anchor height does not grow for a taller mark, it just lets it overflow. */
.ds-nav__brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.ds-nav__brand img { display: block; height: var(--ds-brand-nav-h, 26px); width: auto; }
.ds-nav__spacer { flex: 1; }
.ds-nav__links { display: flex; gap: var(--ds-space-5); font-size: var(--ds-text-sm); }
@media (max-width: 720px) { .ds-nav__links { display: none; } .ds-nav__links.is-open { display: flex; position: absolute; inset: 100% 0 auto; flex-direction: column; background: var(--ds-surface); padding: var(--ds-space-5); } }
/* A nav shows its links or its toggle, never both, so this reveals at exactly the
   breakpoint above that hides them. Promoted from two consumers that declared it
   identically. flex-shrink comes with it: the toggle is the only shrinkable child
   in this row, and without it the toggle absorbs the whole deficit at narrow
   widths and drops to about 22px, under the 24px tap-target minimum.

   The centring is load-bearing. This selector and .ds-iconbtn have equal
   specificity, and button.css sorts before layout.css, so this display wins and
   turns that inline-grid box into a flex one. .ds-iconbtn centres with
   place-items, and justify-items does nothing on a flex container, so without
   these two lines the glyph falls to flex-start in its 40px square. Both
   consuming sites ship that bug today. Declared here rather than in the media
   query because they are inert while the element is display: none. */
[data-ds-nav-toggle] { display: none; flex-shrink: 0; align-items: center; justify-content: center; }
@media (max-width: 720px) { [data-ds-nav-toggle] { display: inline-flex; } }
.ds-footer { border-top: 1px solid var(--ds-border); padding: var(--ds-space-8) 0; color: var(--ds-text-muted); }
.ds-shell { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.ds-shell__side { border-right: 1px solid var(--ds-border); padding: var(--ds-space-5); }
.ds-shell__main { padding: var(--ds-space-6); }
@media (max-width: 720px) { .ds-shell { grid-template-columns: 1fr; } .ds-shell__side { display: none; } }


/* misc.css */
.ds-stat { display: grid; gap: var(--ds-space-1); }
.ds-stat__value { font-family: var(--ds-font-display); font-size: var(--ds-text-2xl); font-weight: 400; line-height: 1; }
.ds-stat__label { font-size: var(--ds-text-sm); color: var(--ds-text-muted); }
.ds-empty { display: grid; gap: var(--ds-space-3); place-items: center; text-align: center; padding: var(--ds-space-10) var(--ds-space-5); color: var(--ds-text-muted); }
.ds-empty__title { font-size: var(--ds-text-lg); color: var(--ds-text); }


/* overlay.css */
dialog.ds-modal { border: 0; border-radius: var(--ds-radius-lg); padding: var(--ds-space-6); max-width: 480px; width: calc(100% - var(--ds-space-8)); background: var(--ds-surface); color: var(--ds-text); box-shadow: var(--ds-shadow-pop); }
dialog.ds-modal::backdrop { background: var(--ds-scrim); }
.ds-modal > * + * { margin-top: var(--ds-space-4); }
.ds-menu { position: relative; display: inline-block; }
.ds-menu__list { position: absolute; top: calc(100% + var(--ds-space-1)); left: 0; min-width: 180px; background: var(--ds-surface); border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); box-shadow: var(--ds-shadow-pop); padding: var(--ds-space-2); display: none; z-index: 20; }
.ds-menu.is-open .ds-menu__list { display: block; }
.ds-menu__item { display: block; width: 100%; text-align: left; padding: var(--ds-space-3) var(--ds-space-4); border: 0; background: transparent; border-radius: var(--ds-radius-sm); cursor: pointer; color: var(--ds-text); }
.ds-menu__item:hover { background: var(--ds-hover); }
.ds-tabs__list { display: flex; gap: var(--ds-space-2); border-bottom: 1px solid var(--ds-border); }
.ds-tab { padding: var(--ds-space-3) var(--ds-space-4); border: 0; background: transparent; cursor: pointer; color: var(--ds-text-muted); border-bottom: 2px solid transparent; }
.ds-tab[aria-selected="true"] { color: var(--ds-text); border-bottom-color: var(--ds-accent); }
.ds-tabs [data-ds-panel] { padding-top: var(--ds-space-4); }
.ds-toast-region { position: fixed; bottom: var(--ds-space-5); right: var(--ds-space-5); display: grid; gap: var(--ds-space-2); z-index: 50; }
.ds-toast { background: var(--ds-ink); color: var(--ds-on-ink); padding: var(--ds-space-3) var(--ds-space-4); border-radius: var(--ds-radius-md); box-shadow: var(--ds-shadow-pop); }


/* section.css */
.ds-section { padding-block: var(--ds-space-8); }
.ds-section__title { margin-bottom: var(--ds-space-5); }
/* Adjacent-sibling so the first section draws no rule under the hero and the
   last draws none above the footer, which already has its own border-top. */
.ds-section + .ds-section { border-top: 1px solid var(--ds-border); }


/* table.css */
.ds-table { width: 100%; border-collapse: collapse; }
.ds-table th, .ds-table td { text-align: left; padding: var(--ds-space-3) var(--ds-space-4); border-bottom: 1px solid var(--ds-border); }
.ds-table th { font-size: var(--ds-text-sm); color: var(--ds-text-muted); font-weight: 500; }
.ds-table tbody tr:hover { background: var(--ds-hover); }


/* type.css */
.ds-display { font-family: var(--ds-font-display); font-size: var(--ds-text-display); font-weight: 400; line-height: 1.02; letter-spacing: -0.02em; }
.ds-h1 { font-family: var(--ds-font-display); font-size: var(--ds-text-3xl); font-weight: 400; line-height: 1.05; }
.ds-h2 { font-family: var(--ds-font-display); font-size: var(--ds-text-2xl); font-weight: 400; line-height: 1.1; }
.ds-prose { max-width: 68ch; }
.ds-prose p { margin-bottom: var(--ds-space-4); }
.ds-quote { font-family: var(--ds-font-serif-text); font-size: var(--ds-text-xl); font-weight: 400; font-style: italic; border-left: 2px solid var(--ds-accent); padding-left: var(--ds-space-4); }