/* design-system.css (1/3) — primitives, buttons, hero, proof strip, pillars, tablist,
 * collapse, screenshot caption, status chips.
 * Companions: design-system-widgets.css (savings, org chart, topology, stepper),
 *             design-system-forms.css (pricing, form, product scope).
 *
 * Depends on the --dh-* tokens, which are GENERATED from Nerve's --nv-* by
 * scripts/export-brand.mjs (brand/tokens.css, imported by src/layouts/Base.astro).
 * Never hard-code a hex in these files.
 *
 * Rules every ds-* file follows:
 *  - dark-first, generous whitespace, one idea per section
 *  - tablist and collapse over stacked cards
 *  - gold is emphasis, never volume
 *  - state is never colour-only: every status has a text label and a shape
 *  - no inline styles (CSP): bar widths come from the quantised .ds-w-N classes
 *  - every interaction works without JS or degrades to readable stacked content
 *  - prefers-reduced-motion is honoured through the --dh-dur-* tokens
 */

/* ── primitives ──────────────────────────────────────────────────────── */
.ds-container { width: min(100% - 3rem, var(--dh-container)); margin-inline: auto; }
.ds-container--narrow { width: min(100% - 3rem, var(--dh-container-narrow)); margin-inline: auto; }
.ds-section { padding-block: var(--dh-section-y); }
.ds-section--tight { padding-block: var(--dh-space-16); }
.ds-section + .ds-section { border-top: 1px solid var(--dh-border-subtle); }
.ds-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ds-eyebrow {
  font: 600 var(--dh-text-xs)/1 var(--dh-font-sans);
  letter-spacing: var(--dh-tracking-eyebrow); text-transform: uppercase;
  color: var(--dh-gold); margin: 0 0 var(--dh-space-4);
}
.ds-h-display {
  font: 600 var(--dh-text-display)/var(--dh-leading-tight) var(--dh-font-sans);
  letter-spacing: var(--dh-tracking-display); color: var(--dh-text-hi); margin: 0;
  text-wrap: balance;
}
.ds-h-section {
  font: 600 var(--dh-text-2xl)/var(--dh-leading-tight) var(--dh-font-sans);
  letter-spacing: -0.025em; color: var(--dh-text-hi); margin: 0 0 var(--dh-space-4);
  text-wrap: balance;
}
.ds-h-card { font: 600 var(--dh-text-lg)/var(--dh-leading-snug) var(--dh-font-sans); color: var(--dh-text-hi); margin: 0 0 var(--dh-space-2); }
.ds-lede { font-size: var(--dh-text-lg); line-height: var(--dh-leading-snug); color: var(--dh-text-mid); max-width: var(--dh-measure); margin: var(--dh-space-6) 0 0; text-wrap: pretty; }
.ds-body { font-size: var(--dh-text-base); line-height: var(--dh-leading-body); color: var(--dh-text-mid); max-width: var(--dh-measure); margin: 0; }
.ds-mono { font-family: var(--dh-font-mono); }
.ds-section-head { margin-bottom: var(--dh-space-16); max-width: 46rem; }

/* focus: one ring everywhere */
.ds-btn:focus-visible, .ds-tabs__tab:focus-visible, .ds-collapse > summary:focus-visible,
.ds-org__group > summary:focus-visible, .ds-textlink:focus-visible,
.ds-field input:focus-visible, .ds-field select:focus-visible, .ds-field textarea:focus-visible,
.ds-choice input:focus-visible + span { outline: none; box-shadow: var(--dh-focus-ring); border-radius: var(--dh-r-sm); }

/* ── buttons / dual CTA (self-serve + demo on every page) ────────────── */
.ds-cta { display: flex; flex-wrap: wrap; gap: var(--dh-space-4); margin-top: var(--dh-space-8); align-items: center; }
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3rem;
  padding: 0 var(--dh-space-8); border-radius: var(--dh-r-pill);
  font: 500 var(--dh-text-sm)/1 var(--dh-font-sans); text-decoration: none; cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dh-dur-fast) var(--dh-ease), border-color var(--dh-dur-fast) var(--dh-ease), color var(--dh-dur-fast) var(--dh-ease);
}
.ds-btn--primary { background: var(--dh-gold); color: var(--dh-surface-0); }
.ds-btn--primary:hover { background: var(--dh-gold-400); }
.ds-btn--secondary { background: transparent; color: var(--dh-text-hi); border-color: var(--dh-border-strong); }
.ds-btn--secondary:hover { border-color: var(--dh-gold-soft); color: var(--dh-gold-soft); }
.ds-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.ds-textlink { color: var(--dh-gold-soft); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }

/* ── hero ────────────────────────────────────────────────────────────── */
.ds-hero { padding-block: calc(var(--dh-section-y) * 0.8) var(--dh-section-y); background: radial-gradient(ellipse 70% 50% at 50% 0%, var(--dh-gold-950), transparent 70%); }
.ds-hero__grid { display: grid; gap: var(--dh-space-16); align-items: center; }
.ds-hero__visual { min-width: 0; }
.ds-hero--center .ds-hero__copy { text-align: center; margin-inline: auto; }
.ds-hero--center .ds-lede { margin-inline: auto; }
.ds-hero--center .ds-cta { justify-content: center; }
@media (min-width: 64rem) { .ds-hero__grid--split { grid-template-columns: 5fr 6fr; } }

/* ── proof strip: 3 items, plain sentences ───────────────────────────── */
.ds-proof { display: grid; gap: var(--dh-space-8); margin: var(--dh-space-16) 0 0; list-style: none; border-top: 1px solid var(--dh-border-subtle); padding: var(--dh-space-8) 0 0; }
.ds-proof__item { margin: 0; }
.ds-proof__label { font: 600 var(--dh-text-xs)/1 var(--dh-font-sans); letter-spacing: var(--dh-tracking-eyebrow); text-transform: uppercase; color: var(--dh-text-mid); margin: 0 0 var(--dh-space-2); }
.ds-proof__text { font-size: var(--dh-text-base); line-height: var(--dh-leading-snug); color: var(--dh-text-hi); margin: 0; }
@media (min-width: 48rem) { .ds-proof { grid-template-columns: repeat(3, 1fr); gap: var(--dh-space-12); } }

/* ── pillar grid: hairline cells, not shadowed cards ─────────────────── */
.ds-pillars { display: grid; gap: 1px; background: var(--dh-border-subtle); border: 1px solid var(--dh-border-subtle); border-radius: var(--dh-r-lg); overflow: hidden; margin: 0; padding: 0; list-style: none; }
.ds-pillar { background: var(--dh-surface-0); padding: var(--dh-space-12) var(--dh-space-8); }
.ds-pillar__num { font: 500 var(--dh-text-xs)/1 var(--dh-font-mono); color: var(--dh-gold); letter-spacing: 0.08em; margin: 0 0 var(--dh-space-6); }
@media (min-width: 40rem) { .ds-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) {
  .ds-pillars--5 { grid-template-columns: repeat(6, 1fr); }
  .ds-pillars--5 .ds-pillar { grid-column: span 2; }
  .ds-pillars--5 .ds-pillar:nth-child(n+4) { grid-column: span 3; }
  .ds-pillars--3 { grid-template-columns: repeat(3, 1fr); }
}

/* ── tablist (product overview) ──────────────────────────────────────── */
.ds-tabs__list { display: flex; gap: var(--dh-space-2); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: var(--dh-space-2); border-bottom: 1px solid var(--dh-border-subtle); scrollbar-width: thin; }
.ds-tabs__tab {
  flex: none; scroll-snap-align: start; min-height: 2.75rem; padding: 0 var(--dh-space-6);
  background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--dh-text-mid); font: 500 var(--dh-text-sm)/1 var(--dh-font-sans); cursor: pointer;
  transition: color var(--dh-dur-fast) var(--dh-ease), border-color var(--dh-dur-fast) var(--dh-ease);
}
.ds-tabs__tab:hover { color: var(--dh-text-hi); }
.ds-tabs__tab[aria-selected="true"] { color: var(--dh-text-hi); border-bottom-color: var(--dh-gold); }
.ds-tabs__panel { padding-top: var(--dh-space-12); }
.ds-tabs__panel + .ds-tabs__panel { margin-top: var(--dh-space-16); }
.ds-tabs__panel-title { font: 600 var(--dh-text-xl)/var(--dh-leading-snug) var(--dh-font-sans); color: var(--dh-text-hi); margin: 0 0 var(--dh-space-4); }
.ds-tabs__panel-grid { display: grid; gap: var(--dh-space-12); align-items: center; }
@media (min-width: 64rem) { .ds-tabs__panel-grid { grid-template-columns: 4fr 7fr; } }
/* Without JS there is no tablist: panels stack, each under its own heading. */
.ds-tabs:not(.is-enhanced) .ds-tabs__list { display: none; }
.ds-tabs.is-enhanced .ds-tabs__panel + .ds-tabs__panel { margin-top: 0; }
.ds-tabs.is-enhanced .ds-tabs__panel[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .ds-tabs.is-enhanced .ds-tabs__panel:not([hidden]) { animation: ds-rise var(--dh-dur-base) var(--dh-ease); }
}
@keyframes ds-rise { from { opacity: 0; transform: translateY(var(--dh-reveal-travel)); } to { opacity: 1; transform: none; } }

/* ── collapse (native details; name= gives exclusive accordion) ──────── */
.ds-collapse-group { border-top: 1px solid var(--dh-border-subtle); }
.ds-collapse { border-bottom: 1px solid var(--dh-border-subtle); }
.ds-collapse > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--dh-space-6); padding: var(--dh-space-6) 0; min-height: 3.5rem; color: var(--dh-text-hi); font: 500 var(--dh-text-base)/var(--dh-leading-snug) var(--dh-font-sans); }
.ds-collapse > summary::-webkit-details-marker { display: none; }
.ds-collapse > summary::after { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-right: 1.5px solid var(--dh-text-mid); border-bottom: 1.5px solid var(--dh-text-mid); transform: rotate(45deg); transition: transform var(--dh-dur-fast) var(--dh-ease); }
.ds-collapse[open] > summary::after { transform: rotate(-135deg); }
.ds-collapse__body { padding: 0 0 var(--dh-space-8); }

/* ── screenshot with outcome caption ─────────────────────────────────── */
.ds-shot { margin: 0; }
.ds-shot__frame { border: 1px solid var(--dh-border-strong); border-radius: var(--dh-r-lg); overflow: hidden; background: var(--dh-surface-1); box-shadow: 0 24px 64px -24px rgb(0 0 0 / 0.6); }
.ds-shot__frame img { display: block; width: 100%; height: auto; }
.ds-shot__caption { margin-top: var(--dh-space-6); max-width: var(--dh-measure); }
.ds-shot__outcome { color: var(--dh-text-hi); font: 500 var(--dh-text-base)/var(--dh-leading-snug) var(--dh-font-sans); margin: 0; }
.ds-shot__detail { color: var(--dh-text-mid); font-size: var(--dh-text-sm); line-height: var(--dh-leading-body); margin: var(--dh-space-2) 0 0; }
.ds-shot__tag { display: inline-block; margin-top: var(--dh-space-3); font: 500 var(--dh-text-xs)/1 var(--dh-font-mono); color: var(--dh-text-mid); }

/* ── status chips: text + shape, never colour-only ───────────────────── */
.ds-chip { display: inline-flex; align-items: center; gap: var(--dh-space-2); padding: 0.25rem 0.625rem; border-radius: var(--dh-r-pill); border: 1px solid var(--dh-border-strong); font: 500 var(--dh-text-xs)/1.2 var(--dh-font-sans); color: var(--dh-text-hi); white-space: nowrap; }
.ds-chip::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; flex: none; }
.ds-chip--measured::before { background: var(--dh-gold); }
.ds-chip--estimated { border-style: dashed; }
.ds-chip--estimated::before { background: transparent; border: 1.5px solid var(--dh-gold-soft); }
.ds-chip--unmeasured { color: var(--dh-text-mid); }
.ds-chip--unmeasured::before { background: transparent; border: 1.5px dotted var(--dh-text-mid); }
.ds-chip--stale { color: var(--dh-status-warning); border-color: var(--dh-status-warning); }
.ds-chip--stale::before { border-radius: 1px; background: var(--dh-status-warning); }
.ds-chip--allowed::before { background: var(--dh-status-success); }
.ds-chip--held { color: var(--dh-gold-soft); border-color: var(--dh-gold-deep); }
.ds-chip--denied { color: var(--dh-status-error); border-color: var(--dh-status-error); }
.ds-chip--denied::before { border-radius: 1px; transform: rotate(45deg); background: var(--dh-status-error); }
.ds-chip--recorded::before { border-radius: 1px; background: var(--dh-text-mid); }