.flow-heading {
  padding-block-end: clamp(.85rem, 2vw, 1.35rem);
  margin-block-end: clamp(1rem, 3vw, 2rem);
  border-block-end: 1px solid var(--border);
}

.flow-heading h1 { margin: 0; }
.flow-heading p { margin: .5rem 0 0; color: var(--muted); }
.flow-heading .page-heading { margin-block-end: .5rem; }
.flow-back { margin-block: 0 .6rem; }
.flow-back a {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  min-inline-size: 2.75rem;
  max-inline-size: 100%;
}

.flow-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.05rem;
  align-items: start;
}

.flow-form > * { min-inline-size: 0; }
.flow-form input[type="file"] { max-inline-size: 100%; }
.flow-form > :is(fieldset, .schedule-fields) { margin: 0; }

.flow-entry {
  max-inline-size: 60rem;
  margin-inline: auto;
}

.flow-entry-options,
.flow-inbox,
.flow-inquiry-workspace,
.flow-compose,
.flow-access,
.flow-roster {
  display: grid;
  gap: clamp(1.25rem, 4vw, 3rem);
  align-items: start;
}

.flow-entry-manager,
.flow-entry-participant,
.flow-step,
.flow-letter,
.flow-inbox-settings,
.flow-inquiry-edit,
.flow-inquiry-close,
.flow-compose-editor,
.flow-compose-audience,
.flow-access > *,
.flow-roster > * { min-inline-size: 0; }

.flow-entry-manager { max-inline-size: 32rem; }
.flow-entry-participant {
  border-block-start: 1px solid var(--border);
  padding: 1rem 0 0;
}

:is(.flow-entry-manager, .flow-entry-participant, .flow-inbox-settings, .flow-inquiry-close,
    .flow-access-circles, .flow-access-participants, .flow-roster-add) h2 {
  margin: 0 0 1rem;
}

.flow-methods { display: flex; flex-wrap: wrap; gap: .5rem; }
.flow-methods > button { text-align: start; }
.flow-step {
  max-inline-size: 36rem;
  margin-inline: auto;
  padding-block-start: 1.2rem;
  border-block-start: 3px solid var(--primary);
}

.flow-step > p:not(.error) { max-inline-size: 56ch; }
.flow-step > p:not(.flow-account, .error) { color: var(--muted); }
.flow-step > .flow-form + .flow-form {
  margin-block-start: 1.3rem;
  padding-block-start: 1.3rem;
  border-block-start: 1px solid var(--border);
}

.flow-account {
  margin-block: 1rem 1.3rem;
  padding: .65rem .9rem;
  background: var(--link-tint);
  color: var(--link);
  font-weight: 650;
}

.flow-code { max-inline-size: 13rem; }
.flow-code input {
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .22em;
}

.flow-letter { max-inline-size: 45rem; }
.flow-letter-body {
  padding: 1rem;
  border-inline-start: 3px solid var(--control-border);
  background: var(--paper);
}

.flow-inbox-list, .flow-inquiry-list, .flow-recipient-list {
  min-inline-size: 0;
  padding: 0;
  margin: 0;
  list-style: none;
  border-block-start: 2px solid var(--ink);
}

.flow-inbox-row, .flow-inquiry-row {
  padding-block: .75rem;
  border-block-end: 1px solid var(--border);
}

.flow-inbox-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: .35rem 1rem;
}

.flow-inbox-row :is(p, time) { margin: 0; }
.flow-inbox-row time { padding-block-start: .12rem; font-size: .875rem; }
.flow-inbox-kind { display: inline-block; color: var(--muted); font-size: .875rem; font-weight: 650; }
.flow-inbox-urgent { padding-inline: .35rem; color: var(--warning-ink); background: var(--warning-tint); }
.flow-inbox-subject a, .flow-inquiry-name {
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;
  min-inline-size: 2.75rem;
  max-inline-size: 100%;
  font-weight: 750;
}

.flow-inbox-settings {
  padding: 1rem;
  border-block-start: 2px solid var(--link);
  background: var(--paper);
}

.flow-inbox-settings > p { margin-block: .35rem .75rem; }
.flow-empty, .flow-success {
  padding: .8rem 1rem;
  margin: 0 0 1rem;
  border-inline-start: 3px solid var(--control-border);
  background: var(--paper);
  color: var(--ink);
}

.flow-success { background: var(--success-tint); color: var(--success-ink); border-inline-start-color: var(--success); }

.flow-inquiry-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: .25rem 1rem;
}

.flow-inquiry-row p { margin: 0; }
.flow-inquiry-row > .badge { grid-area: 1 / 2; margin-block-start: .7rem; }
.flow-inquiry-dates { color: var(--muted); font-size: .875rem; font-variant-numeric: tabular-nums; }
.flow-inquiry-dates time { white-space: nowrap; }
.flow-inquiry-edit { max-inline-size: 42rem; }
.flow-inquiry-close, .flow-roster-add {
  padding: clamp(.85rem, 3vw, 1.4rem);
  border-block-start: 2px solid var(--ink);
  background: var(--paper);
}

.flow-facts {
  display: grid;
  grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr);
  max-inline-size: 45rem;
  border-block-start: 2px solid var(--ink);
}

.flow-facts :is(dt, dd) {
  min-inline-size: 0;
  margin: 0;
  padding: .65rem .5rem;
  border-block-end: 1px solid var(--border);
}

.flow-facts dt { font-weight: 700; }
.flow-facts dd { text-align: match-parent; }
.flow-compose-editor label > bdi { display: inline; }
.flow-compose-audience { display: grid; gap: 1rem; }
.flow-compose-audience fieldset { background: var(--paper); }
.flow-compose > button { justify-self: start; }
.flow-recipient-list li { padding: .55rem .15rem; border-block-end: 1px solid var(--border); }
.flow-recipient-list + .flow-form { margin-block-start: 1.15rem; }
.flow-access-circles { border-block-start: 2px solid var(--ink); padding-block-start: .85rem; }
.flow-access-participants { border-block-start: 2px solid var(--link); padding-block-start: .85rem; }
.flow-access-invite { border-block-start: 1px solid var(--border); padding-block-start: 1rem; margin-block-start: 1.5rem; }
.flow-access-invite .flow-form { max-inline-size: 40rem; }
.flow-roster > .sharing-list, .flow-roster-preview > .sharing-list, .flow-letter > .sharing-list { border-block-start: 1px solid var(--border); }
.flow-roster-preview > form + .sharing-list { margin-block-start: 1rem; }
.flow-roster-preview > .sharing-list:empty { display: none; }

@media (min-width: 48rem) {
  .flow-entry-options:has(.flow-entry-participant) { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); }
  .flow-entry-participant { border-block-start: 0; border-inline-start: 1px solid var(--border); padding: 0; padding-inline-start: 1.5rem; }
  .flow-inbox:has(.flow-inbox-settings) { grid-template-columns: minmax(0, 1fr) minmax(15rem, .47fr); }
  .flow-inquiry-workspace:has(.flow-inquiry-close),
  .flow-roster:has(.flow-roster-add),
  .flow-compose { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
  .flow-compose > button { grid-column: 1 / -1; }
  .flow-access { grid-template-columns: minmax(13rem, .62fr) minmax(0, 1fr); }
  .flow-inquiry-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr) auto; align-items: center; }
  .flow-inquiry-row > .badge { grid-area: auto; margin: 0; }
}