/* =========================================================
   02-BASE-SAFE — helpers from DS v2 02-base.css that don't
   collide with Bootstrap 3. Global resets (a, button, body,
   .row) are intentionally OMITTED so legacy pages keep working.
   When Bootstrap is removed, swap this for 02-base.css.
   ========================================================= */

/* Layout primitives used by DS v2 partials */
.shell  { width: min(var(--container), 100% - 40px); margin: 0 auto; }
.spacer { flex: 1; }
.muted  { color: var(--text-3); }
.tnum   { font-variant-numeric: tabular-nums; }
.mono   { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .hide-sm { display: none; } }

/* DS v2 card primitive (no Bootstrap 3 conflict — BS3 has no bare .card) */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--pad-card);
}
.card-title {
  font-size: 12px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 14px;
}

.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 0 0 18px;
}
.section-head h2 { font-size: 22px; font-weight: 800; margin: 0; }
.section-head .link { color: var(--brand-700); font-size: 14px; font-weight: 600; }

.crumb {
  display: inline-flex; gap: 8px; align-items: center;
  font-size: 13px; color: var(--text-3); margin: 24px 0 6px;
}
.crumb a { color: var(--text-2); cursor: pointer; }
.crumb a:hover { color: var(--brand-700); }
.crumb .sep { color: var(--text-3); }

/* Skip-link for keyboard a11y */
.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 8px; top: 8px;
  background: var(--surface); padding: 8px 12px; border-radius: var(--r-sm);
  z-index: 9999; box-shadow: var(--shadow-md);
}

/* Entrance animations used across DS v2 components */
@keyframes kz-appear { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.appear   { animation: kz-appear .35s var(--ease-out) both; }
.appear-2 { animation: kz-appear .35s var(--ease-out) both .06s; }
.appear-3 { animation: kz-appear .35s var(--ease-out) both .12s; }

/* Focus ring just for kz- elements (don't apply globally — would change Bootstrap focus look) */
.kz-btn:focus-visible,
.kz-input:focus-visible,
.kz-textarea:focus-visible,
.kz-select:focus-visible,
[class^="kz-"]:focus-visible,
[class*=" kz-"]:focus-visible {
  outline: 0;
  box-shadow: var(--ring);
  border-radius: var(--r-sm);
}