/* Shared flow-page layout. Copied per flow directory (not shared via a single
   CSS file) so each flow's static folder is independently reviewable/portable —
   mirrors how a Rails "flow" would still share layout via a common
   layout/ViewComponent even though this mockup duplicates the file. */

/* No Exit/Cancel action in .listing-toolbar (see components/components.css):
   a sale is a draft that autosaves per tab as the user edits, not a
   single-shot form with unsaved changes to abandon. There's nothing to
   "cancel" -- the sidebar's Sales nav item is the way back, same as
   navigating away from any other saved record. Product and Publisher edit
   (also multi-tab, autosaved drafts) follow the same convention. Contrast
   with order-refund/payouts' explicit "<- Cancel": those are single-shot,
   destructive actions where abandoning mid-flow is a meaningful choice. */

.flow-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--space-6);
  align-items: start;
}
.flow-main { min-width: 0; }
/* .flow-side, .wizard-checklist*, .tips-panel* now live in components.css --
   shared across wizard flows (this dir) and settings consoles (product/
   publisher edit), not duplicated per flow.css. */

.flow-step-title { font-size: var(--font-size-heading-md); margin: 0 0 var(--space-2); }
.flow-step-hint { color: var(--color-text-secondary); margin: 0; max-width: 60ch; }

.flow-actions {
  display: flex;
  justify-content: space-between;
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
}
.flow-actions--end { justify-content: flex-end; padding-top: var(--space-5); border-top: none; }

/* .field*, .radio, .summary-list, .tier-table, .rich-text* now live in
   components.css -- shared across all flows, not duplicated per flow.css. */

/* Review step: one block per prior tab, title + Edit link over a .summary-list. */
.review-block__title { font-size: var(--font-size-body); margin: 0; }
.review-block__edit { font-size: var(--font-size-caption); }

@media (max-width: 860px) {
  .flow-layout { grid-template-columns: minmax(0, 1fr); }
}