/* The step card: the one card a connection flow walks a person through, one
   step at a time. The card owns its frame (mark, eyebrow, title, lead, the tabs
   that switch flows, back and the step's action); each step's own fields and
   their look belong to the component whose step it is. Until a view is
   connected it shows only its card. */
[data-connected="false"] > :not(.tp-flow):not(.tp-notices) { display: none !important; }

.tp-flow {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  display: grid;
  place-items: safe center;
  block-size: 100%;
  min-block-size: 0;
  padding: var(--tp-space-6) var(--tp-gutter);
  overflow: auto;
}

.tp-flow-card {
  inline-size: min(28rem, 100%);
  gap: var(--tp-space-6);
  padding: clamp(var(--tp-space-5), 4vi, var(--tp-space-8));
  border-radius: var(--tp-radius-lg);
}

.tp-flow-head { display: grid; justify-items: center; gap: var(--tp-space-2); text-align: center; }

.tp-flow-mark { block-size: var(--tp-space-16); inline-size: auto; margin-block-end: var(--tp-space-2); object-fit: contain; }

.tp-flow-head > h1 { font-size: var(--tp-text-heading); font-weight: var(--tp-weight-strong); letter-spacing: var(--tp-tracking-tight); line-height: var(--tp-leading-tight); }

.tp-flow-head > .tp-muted { max-inline-size: 34ch; text-wrap: pretty; }

[data-flow-part="modes"]:empty { display: none; }

/* Tabs that switch flows fill the card's width. */
.tp-flow-modes { display: flex; inline-size: 100%; }

.tp-flow-modes > .tp-tab { flex: 1 1 0; justify-content: center; }

/* A step: its fields, one under another. */
[data-flow-part="steps"],
[data-flow-step] { display: grid; gap: var(--tp-space-4); }

/* What is wrong with a field, under it. */
.tp-flow-hint { font-size: var(--tp-text-caption); color: var(--tp-ink-muted); }

.tp-flow-hint:empty { display: none; }

.tp-field:has([aria-invalid="true"]) > .tp-flow-hint { color: var(--tp-danger); }

.tp-flow-actions { display: flex; gap: var(--tp-space-2); }

.tp-flow-action { flex: 1 1 auto; }