/* Tags over one card (see card-disclosure.js). Without JavaScript every card shows. */
.ds-card-disclosure { --ds-card-turn: 8s; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-5); padding-block: var(--s-4); }
.ds-card-disclosure > h2 { margin: 0; flex: none; }
.ds-card-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); flex: 1 1 100%; min-width: 0; }
.ds-morph-card { box-sizing: border-box; display: grid; grid-template-columns: var(--s-5) minmax(0, 1fr); align-content: start; align-items: center; gap: var(--s-4); min-width: 0; }
.ds-card-icon { width: var(--s-5); height: var(--s-5); color: var(--fg-3); }
.ds-morph-card h3 { margin: 0; font-size: var(--fs-md); line-height: var(--lh-snug); }
.ds-morph-card .ds-card-sub { grid-column: 2; margin: calc(-1 * var(--s-3)) 0 0; color: var(--fg-3); font-size: var(--fs-sm); line-height: var(--lh-snug); }
.ds-morph-card p { grid-column: 1 / -1; margin: 0; color: var(--fg-2); font-size: var(--fs-sm); line-height: var(--lh-reading); max-width: 75ch; }

.ds-card-tabs { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--s-2); flex: 1 1 0; }
.ds-card-tab { position: relative; display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border: 1px solid var(--border-strong); background: none; color: var(--fg); font: inherit; font-size: var(--fs-xs); line-height: var(--lh-snug); cursor: pointer; transition: background-color var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out); }
.ds-card-tab:hover { border-color: var(--fg-3); }
.ds-card-tab .ds-card-icon { width: var(--s-4); height: var(--s-4); flex: none; color: currentColor; }
/* Selected: fill inversion, plus the progress line while the cards turn. */
.ds-card-tab[aria-selected="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.ds-card-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--accent); }
.ds-card-tab[aria-selected="true"] .ds-card-progress { animation: ds-card-turn var(--ds-card-turn) linear; }
.ds-card-disclosure.is-stopped .ds-card-progress { animation: none; }
.ds-card-disclosure:hover .ds-card-progress,
.ds-card-disclosure:focus-within .ds-card-progress { animation-play-state: paused; }
@keyframes ds-card-turn { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .ds-card-progress { animation: none !important; }
  .ds-card-tab, .ds-card-disclosure.is-tabbed .ds-morph-card > * { transition: none !important; }
}

/* All cards share one grid cell, so the block keeps the tallest card's height.
   Only the active card draws the frame; the contents cross over inside it:
   the old one leaves fast, then the new one rises in, body a beat after the title. */
.ds-card-disclosure.is-tabbed .ds-card-list { grid-template-columns: minmax(0, 1fr); }
.ds-card-disclosure.is-tabbed .ds-morph-card { grid-area: 1 / 1; border-color: transparent; background: none; pointer-events: none; }
.ds-card-disclosure.is-tabbed .ds-morph-card.is-active { border-color: var(--border-strong); pointer-events: auto; }
.ds-card-disclosure.is-tabbed .ds-morph-card > * { opacity: 0; transform: translateY(var(--s-2)); visibility: hidden; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s var(--dur-fast); }
.ds-card-disclosure.is-tabbed .ds-morph-card.is-active > * { opacity: 1; transform: none; visibility: visible; transition: opacity var(--dur-slow) var(--ease-out) var(--dur-fast), transform var(--dur-slow) var(--ease-out) var(--dur-fast), visibility 0s; }
.ds-card-disclosure.is-tabbed .ds-morph-card.is-active > p:not(.ds-card-sub) { transition-delay: calc(var(--dur-fast) * 2); }

@media (max-width: 700px) {
  .ds-card-list { grid-template-columns: 1fr; }
  .ds-card-tabs { flex-basis: 100%; justify-content: flex-start; }
}