/* nodal — component styles, copied from design-system/components/bundle.css. Keep the two in sync. */
:root {
  --nodal-gradient: linear-gradient(90deg, var(--nodal-indigo) 0%, var(--nodal-cyan) 100%);
  --nodal-gradient-steps: linear-gradient(90deg, var(--nodal-indigo) 0 33.33%, var(--nodal-blue) 33.33% 66.66%, var(--nodal-cyan) 66.66% 100%);
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
}

.nd-root { background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 26px; -webkit-font-smoothing: antialiased; }
.nd-root *, .nd-root *::before, .nd-root *::after { box-sizing: border-box; }

/* ---------- Focus ---------- */
.nd-root :focus-visible { outline: var(--border-focus) solid var(--focus); outline-offset: var(--border-focus); }

/* ---------- Button ---------- */
.nd-btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  height: 44px; padding: 0 var(--space-5);
  font-family: var(--font-mono); font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase;
  border: var(--border-hair) solid transparent; border-radius: var(--radius-none);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nd-btn .nd-arrow { transition: transform var(--dur-base) var(--ease-out); }
.nd-btn:hover .nd-arrow { transform: translateX(3px); }
.nd-btn--primary { background: var(--action); color: var(--on-action); }
.nd-btn--primary:hover { background: var(--action-hover); }
.nd-btn--secondary { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.nd-btn--secondary:hover { border-color: var(--ink); }
.nd-btn--ghost { background: transparent; color: var(--ink-muted); padding: 0 var(--space-3); }
.nd-btn--ghost:hover { color: var(--ink); }
.nd-btn--sm { height: 32px; padding: 0 var(--space-3); font-size: 12px; }
.nd-btn--lg { height: 52px; padding: 0 var(--space-6); }
.nd-btn:disabled, .nd-btn[aria-disabled="true"] { background: transparent; color: var(--ink-faint); border-color: var(--line); cursor: not-allowed; }

/* ---------- Eyebrow ---------- */
.nd-eyebrow { display: inline-flex; align-items: center; gap: var(--space-3); font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.nd-eyebrow__index { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; padding: 0 var(--space-1); border: var(--border-hair) solid var(--line-strong); color: var(--ink); font-variant-numeric: tabular-nums; }
.nd-eyebrow__node { width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--accent); }

/* ---------- Headline + Highlight ---------- */
.nd-display-xl, .nd-display-l, .nd-h1, .nd-h2 { font-family: var(--font-display); font-weight: 400; color: var(--ink); margin: 0; text-wrap: balance; }
.nd-display-xl { font-size: 72px; line-height: 76px; letter-spacing: -0.03em; }
.nd-display-l { font-size: 56px; line-height: 60px; letter-spacing: -0.025em; }
.nd-h1 { font-size: 44px; line-height: 50px; letter-spacing: -0.02em; }
.nd-h2 { font-size: 32px; line-height: 40px; letter-spacing: -0.015em; }
.nd-h3 { font-family: var(--font-display); font-size: 22px; line-height: 30px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.nd-lead { font-size: 20px; line-height: 32px; color: var(--ink-muted); max-width: 60ch; margin: 0; }
.nd-body-s { font-size: 14px; line-height: 22px; color: var(--ink-muted); margin: 0; }
.nd-highlight {
  background: var(--highlight); color: var(--on-highlight);
  padding: 0 0.18em; box-decoration-break: clone; -webkit-box-decoration-break: clone;
  background-image: var(--nodal-gradient); background-size: 100% 3px; background-repeat: no-repeat; background-position: 0 100%;
}
@media (max-width: 767px) {
  .nd-display-xl { font-size: 44px; line-height: 48px; }
  .nd-display-l { font-size: 36px; line-height: 40px; }
  .nd-h1 { font-size: 32px; line-height: 38px; }
  .nd-h2 { font-size: 26px; line-height: 32px; }
}

/* ---------- Card ---------- */
.nd-card { position: relative; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-6); background: var(--surface-raised); border: var(--border-hair) solid var(--line); border-radius: var(--radius-none); min-width: 0; transition: border-color var(--dur-base) var(--ease-out); }
.nd-card::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: var(--border-accent); background: var(--nodal-gradient); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-out); }
.nd-card:hover { border-color: var(--line-strong); }
.nd-card:hover::before, .nd-card--featured::before { transform: scaleX(1); }
.nd-card__index { font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: 0.08em; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.nd-card__list { list-style: none; margin: 0; padding: var(--space-4) 0 0; border-top: var(--border-hair) solid var(--line); display: grid; gap: var(--space-2); }
.nd-card__list li { display: flex; gap: var(--space-3); align-items: baseline; font-size: 14px; line-height: 22px; color: var(--ink); }
.nd-card__list li::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: var(--radius-full); background: var(--accent); transform: translateY(-2px); }

/* ---------- Badge ---------- */
.nd-badge { display: inline-flex; align-items: center; gap: var(--space-2); height: 24px; padding: 0 var(--space-2); font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; border-radius: var(--radius-none); border: var(--border-hair) solid var(--line); color: var(--ink-muted); background: var(--surface-raised); }
.nd-badge::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }
.nd-badge--accent { color: var(--accent); background: var(--accent-soft); border-color: transparent; }
.nd-badge--success { color: var(--success); background: var(--success-soft); border-color: transparent; }
.nd-badge--warning { color: var(--warning); background: var(--warning-soft); border-color: transparent; }
.nd-badge--danger { color: var(--danger); background: var(--danger-soft); border-color: transparent; }

/* ---------- Field ---------- */
.nd-field { display: grid; gap: var(--space-2); min-width: 0; }
.nd-field__label { font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.nd-input { width: 100%; height: 44px; padding: 0 var(--space-4); font: inherit; font-size: 15px; color: var(--ink); background: var(--surface-raised); border: var(--border-hair) solid var(--line-strong); border-radius: var(--radius-none); transition: border-color var(--dur-fast) var(--ease-out); }
.nd-input::placeholder { color: var(--ink-muted); }
.nd-input:hover { border-color: var(--ink-muted); }
.nd-input:focus-visible { outline: var(--border-focus) solid var(--focus); outline-offset: 0; border-color: var(--focus); }
.nd-field__help { font-size: 13px; line-height: 20px; color: var(--ink-muted); }
.nd-field--error .nd-input { border-color: var(--danger); }
.nd-field--error .nd-field__help { color: var(--danger); }

/* ---------- Nav ---------- */
.nd-nav { display: flex; align-items: center; gap: var(--space-6); height: var(--nav-height); padding: 0 var(--space-6); background: var(--surface); border-bottom: var(--border-hair) solid var(--line); }
.nd-nav__logo { display: block; height: 22px; width: auto; }
.nd-nav__links { display: flex; gap: var(--space-5); margin-right: auto; }
.nd-nav__link { font-family: var(--font-mono); font-size: 13px; line-height: 16px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); text-decoration: none; }
.nd-nav__link:hover, .nd-nav__link[aria-current="page"] { color: var(--ink); }
.nd-nav__actions { display: flex; gap: var(--space-2); }

/* ---------- Tabs (numbered, vertical) ---------- */
.nd-tabs { display: grid; border: var(--border-hair) solid var(--line); background: var(--surface-raised); }
.nd-tab { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); font-family: var(--font-mono); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); background: transparent; border: 0; border-bottom: var(--border-hair) solid var(--line); text-align: left; cursor: pointer; }
.nd-tab:last-child { border-bottom: 0; }
.nd-tab__index { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 22px; border: var(--border-hair) solid var(--line-strong); font-variant-numeric: tabular-nums; }
.nd-tab:hover { color: var(--ink); }
.nd-tab[aria-selected="true"] { color: var(--ink); background: var(--accent-soft); }
.nd-tab[aria-selected="true"] .nd-tab__index { background: var(--action); border-color: var(--action); color: var(--on-action); }

/* ---------- Code block ---------- */
.nd-code { background: var(--surface-sunken); border: var(--border-hair) solid var(--line); min-width: 0; }
.nd-code__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-4); border-bottom: var(--border-hair) solid var(--line); font-family: var(--font-mono); font-size: 11px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); }
.nd-code pre { margin: 0; padding: var(--space-4); overflow-x: auto; font-family: var(--font-mono); font-size: 14px; line-height: 22px; color: var(--ink); }
.nd-code .tk-k { color: var(--accent); }
.nd-code .tk-s { color: var(--success); }
.nd-code .tk-c { color: var(--ink-muted); }
.nd-code .tk-n { color: var(--warning); }

/* ---------- Spec table ---------- */
.nd-spec { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-variant-numeric: tabular-nums; background: var(--surface-raised); border: var(--border-hair) solid var(--line); }
.nd-spec th { text-align: left; font-size: 11px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-sunken); padding: var(--space-2) var(--space-4); border-bottom: var(--border-hair) solid var(--line); }
.nd-spec td { padding: var(--space-3) var(--space-4); border-bottom: var(--border-hair) solid var(--line); color: var(--ink); }
.nd-spec tr:last-child td { border-bottom: 0; }
.nd-spec td.num, .nd-spec th.num { text-align: right; }
.nd-spec .unit { color: var(--ink-muted); }

/* ---------- Portal (the dotted "o") ---------- */
.nd-portal { display: inline-block; aspect-ratio: 88 / 86; max-width: 100%; }
.nd-portal img { display: block; width: 100%; height: auto; }

@media (prefers-reduced-motion: reduce) {
  .nd-root *, .nd-root *::before { transition: none !important; animation: none !important; }
}