/* Dialog content must wrap even when ordinary toolbar commands stay on one line.
   Keep this sheet after commands.css and narrative.css. */
:root :is(dialog, [role="dialog"], [role="alertdialog"]),
:root :is(dialog, [role="dialog"], [role="alertdialog"]) * {
  box-sizing: border-box;
}
:root :is(dialog, [role="dialog"], [role="alertdialog"]) {
  overflow-wrap: anywhere;
  word-break: normal;
}
:root dialog { overflow: auto; }
:root :is(dialog, [role="dialog"], [role="alertdialog"])
  :is(form, section, article, div, label, details, ul, li, h1, h2, h3, h4, p, span, input, select, textarea) {
  min-width: 0;
  max-width: 100%;
}
:root :is(dialog, [role="dialog"], [role="alertdialog"]) button:not(.flow-stage),
:root :is(dialog, [role="dialog"], [role="alertdialog"])
  button:not(.flow-stage) :is(.command-caption, .command-full, .command-short) {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}
:root :is(dialog, [role="dialog"], [role="alertdialog"])
  button > .command-caption {
  overflow: visible;
  text-overflow: clip;
}
:root dialog :is(.narrative-head, .quality-dialog-head, .account-head, .flow-header) > :not(button) {
  flex: 1 1 0;
  min-width: 0;
}
:root dialog :is(.narrative-head, .flow-header) { flex-wrap: nowrap; }
:root dialog :is(.flow-item-head, .flow-inline, .flow-navigation, .quality-step-nav) { flex-wrap: wrap; }
:root dialog .flow-item-head > h4 { flex: 1 1 180px; }
:root dialog .quality-badge { white-space: normal; }
.dossier-action-name { font-weight: 600; }
.dossier-action-dialog .account-head h2 { margin: 0; }
#dossierActionStatus:empty, #horizonActionNotice:empty { display: none; }

/* Zero minimum tracks let descriptions and form controls shrink with the window. */
:root dialog :is(.profile-fields, .flow-fields, .guided-apply-preview) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
:root dialog :is(.flow-profile-grid, .flow-offers, .flow-metrics, .beta-offers) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
:root .date-calendar .calendar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
:root .date-calendar .calendar-days { grid-template-columns: repeat(7, minmax(0, 1fr)); }
#betaSignupDialog {
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
}
@media (max-width: 900px) {
  :root dialog .flow-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  :root dialog :is(.flow-fields, .guided-apply-preview, .beta-offers) {
    grid-template-columns: minmax(0, 1fr);
  }
  :root dialog .narrative-metrics > span { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  :root dialog :is(.profile-fields, .flow-profile-grid, .flow-offers, .flow-metrics) {
    grid-template-columns: minmax(0, 1fr);
  }
}