/*
 * THE ASK-BACK. One question at a time with its verbs under it — or, inside a
 * `ClarifyWizardDialog`, the same bar mounted in the dialog's footer.
 *
 * A borderless block, not a card: the question rides whatever surface the run is
 * on, and a second edge around it would read as a separate thing to answer.
 *
 * Both placements wear the SAME `actions` class, because a consumer restyling
 * the wizard's verbs means both. `flex-grow` rather than `flex` is what lets one
 * rule serve them: in the footer's ROW the bar spreads Cancel and the forward
 * verbs to the two edges, and in the wizard's own auto-height COLUMN there is no
 * free space to grow into, so it changes nothing.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-clarify-wizard {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lotics-space-16);
    min-width: 0;
  }

  .lotics-clarify-wizard__step {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lotics-space-12);
    min-width: 0;
  }

  /* Tighter than the block's own rhythm: the position belongs TO the question. */
  .lotics-clarify-wizard__header {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--lotics-space-4);
    min-width: 0;
  }

  /* No horizontal inset: the choice rows above BLEED their wash, so the bar
     already shares their left edge without compensating for it. */
  .lotics-clarify-wizard__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex-grow: 1;
    gap: var(--lotics-space-8);
    min-width: 0;
  }

  .lotics-clarify-wizard__nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--lotics-space-8);
  }
}