/* ============================================================
   card-deck.css - the first-run and release-note card deck
   ============================================================

   A component, so it loads AFTER design-tokens.css and after the surface's
   own palette file, per convention 8's stated load order. Every value here
   is a token. A raw hex would look right in light mode and break in dark,
   because dark theming works entirely by re-pointing tokens under
   [data-theme="dark"] and a literal cannot be re-pointed.

   It styles only what is INSIDE the shared dialog. The overlay, the card,
   the header and the footer come from dialog.css, which is what makes this
   deck look like every other dialog in the product rather than like a
   second modal system wearing its clothes. */

.card-deck__lead {
  margin: 0 0 var(--space-md);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--ink-500);
}

.card-deck__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.card-deck__card {
  border: 1px solid var(--parch-200);
  border-radius: var(--r-8);
  padding: var(--space-sm) var(--space-md);
  background: var(--parch-50);
}

.card-deck__title {
  margin: 0 0 4px;
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--ink-900);
}

.card-deck__body {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--ink-700);
}

/* The line that stands in for a control somebody may not press: today, the
   connect choices for a member who is not an admin. Quieter than the body and
   clearly separate from it, because it answers a different question from the
   paragraph above it. */
.card-deck__needs {
  margin: 8px 0 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--ink-500);
}

/* The connect actions a step hosts. A row that wraps rather than a column,
   because there are two of them today and a stacked pair of buttons reads as
   a decision heavier than "which of these do you use".

   The buttons themselves are `.btn-secondary-soft`, the app's existing
   outline button, rather than anything defined here: it already carries the
   proportions, the focus ring and `text-decoration: none` for an anchor, and
   a second button style inside a dialog is how a component starts looking
   like a different product. */
.card-deck__choices {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* The last screen has one control and `.dialog-footer` is `space-between`, so
   without this the finishing button sits on the LEFT while Next sat on the
   right on every screen before it: the primary action jumps across the dialog
   at the moment somebody is about to press it. Scoped to the only-child case,
   so the two-control screens keep the house layout (secondary left, primary
   right) that `_confirm_modal.html` uses. */
.card-deck .dialog-footer > form:only-child { margin-left: auto; }

.card-deck__link {
  display: inline-block;
  margin-top: 8px;
  font-size: var(--text-xs);
  color: var(--ink-900);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* The card's one link is a control on its own line, so it takes the same
   44px floor on a coarse pointer as the dialog buttons below it. inline-flex
   grows the tap box and leaves the label where it was; desktop is untouched. */
@media (pointer: coarse) {
  .card-deck__link { display: inline-flex; align-items: center; min-height: 44px; }
}

.card-deck__link:hover { color: var(--primary-700); }

.card-deck__link:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: var(--r-4);
}

.card-deck__more {
  margin: var(--space-md) 0 0;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--ink-500);
}

/* The changelog page reuses the deck's card styles so an entry reads the same
   in the dialog and on the page. What it adds is page-level layout, which the
   dialog gets from dialog.css and a full page does not get from anywhere. */
.card-deck-log {
  max-width: 44rem;
  margin: 0 auto;
  padding: var(--space-lg) 0;
}

.card-deck-log h1 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--text-xl);
  color: var(--ink-900);
  margin: 0 0 8px;
}

.card-deck-log__entry { margin-top: var(--space-lg); }

.card-deck-log__entry h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: var(--text-lg);
  color: var(--ink-900);
  margin: 0 0 4px;
}