/* Only activate flex-gap fallbacks after a real layout probe, not @supports(gap). */
@supports not (height: 100dvh) {
  .screen { min-height: calc(100vh - var(--top-height)); }
  .centered-state { min-height: calc(100vh - var(--top-height) - 60px); }
  .field .draft-editor { max-height: 45vh; }
}
@supports not (overflow: clip) { .app-shell { overflow-x: hidden; } }
.shot-actions { align-items: flex-end; }
.legacy-no-flex-gap .topbar > * + *:not(.topbar-action):not(.text-topbar-action) { margin-left: 10px; }
.legacy-no-flex-gap .sync-line > * + * { margin-left: 5px; }
.legacy-no-flex-gap .section-heading > * + * { margin-left: 12px; }
.legacy-no-flex-gap .list-row > * + * { margin-left: 11px; }
.legacy-no-flex-gap .title-with-status { margin-right: -6px; margin-bottom: -6px; }
.legacy-no-flex-gap .title-with-status > * { margin-right: 6px; margin-bottom: 6px; }
.legacy-no-flex-gap .notice-row > * + * { margin-left: 10px; }
.legacy-no-flex-gap .tool-row > * + * { margin-left: 8px; }
.legacy-no-flex-gap .detail-title-line > * + * { margin-left: 12px; }
.legacy-no-flex-gap .choice-wrap { margin-right: -8px; margin-bottom: -8px; }
.legacy-no-flex-gap .choice-wrap > * { margin-right: 8px; margin-bottom: 8px; }
.legacy-no-flex-gap .check-line > * + * { margin-left: 9px; }
.legacy-no-flex-gap .primary-button > * + * { margin-left: 8px; }
.legacy-no-flex-gap .secondary-button > * + * { margin-left: 8px; }
.legacy-no-flex-gap .text-button > * + * { margin-left: 8px; }
.legacy-no-flex-gap .danger-button > * + * { margin-left: 8px; }
.legacy-no-flex-gap .button-row { margin-right: -9px; margin-bottom: -9px; }
.legacy-no-flex-gap .button-row > * { margin-right: 9px; margin-bottom: 9px; }
.legacy-no-flex-gap .heading-with-action > * + * { margin-left: 12px; }
.legacy-no-flex-gap .state-row > * + * { margin-left: 11px; }
.legacy-no-flex-gap .card-heading > * + * { margin-left: 12px; }
.legacy-no-flex-gap .product-title > * + * { margin-left: 12px; }
.legacy-no-flex-gap .profile-identity > * + * { margin-left: 13px; }
.legacy-no-flex-gap .file-picker > * + * { margin-left: 9px; }
.legacy-no-flex-gap .selected-file > * + * { margin-left: 11px; }
.legacy-no-flex-gap .empty-state > * + * { margin-left: 10px; }
.legacy-no-flex-gap .sync-warning > * + * { margin-left: 12px; }
.legacy-no-flex-gap .inline-state > * + * { margin-left: 12px; }
.legacy-no-flex-gap .stepper > * + * { margin-left: 10px; }
.legacy-no-flex-gap .stepper li > * + * { margin-left: 6px; }
.legacy-no-flex-gap .shot-actions > * + * { margin-left: 16px; }
.legacy-no-flex-gap .detail-topbar > * + *:not(.topbar-action):not(.text-topbar-action) { margin-left: 4px; }
@media (max-width: 365px) {
  .legacy-no-flex-gap .stepper > * + * { margin-left: 5px; }
  .legacy-no-flex-gap .stepper li > * + * { margin-left: 4px; }
}

/* Button labels can be text nodes, so put the fallback spacing on the icon. */
.legacy-no-flex-gap .primary-button > * + *,
.legacy-no-flex-gap .secondary-button > * + *,
.legacy-no-flex-gap .text-button > * + *,
.legacy-no-flex-gap .danger-button > * + *,
.legacy-no-flex-gap .file-picker > * + * { margin-left: 0; }
.legacy-no-flex-gap .primary-button > svg,
.legacy-no-flex-gap .secondary-button > svg,
.legacy-no-flex-gap .text-button > svg,
.legacy-no-flex-gap .danger-button > svg { margin-right: 8px; }
.legacy-no-flex-gap .file-picker > svg { margin-right: 9px; }