/*
 * THE ASK-BACK. One question at a time with its verbs under it, or with them in a
 * `ClarifyWizardDialog`'s footer. Borderless: a second edge would read as a separate thing to
 * answer. Both placements share the `actions` class; `flex-grow` spreads the verbs in the footer
 * row and changes nothing in the column.
 */
@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: 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;
  }

  /* The choice rows bleed their wash, so the bar already shares their edge. */
  .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);
  }
}