/* Shared outer rails for all tool pages. Load after each tool's own CSS.
   Widths refer to visible cards, not wrappers with additional padding.
   Screen-only: preserve tool-specific print layouts (e.g. StitchFit). */
@media screen {
  body.gz-tool-page {
    --tool-shell-width: 1100px;
    --tool-shell-gutter: 16px;
  }

  .gz-tool-page .gz-header {
    padding-inline: var(--tool-shell-gutter);
  }
  .gz-tool-page .gz-header-inner {
    max-width: var(--tool-shell-width);
  }

  .gz-tool-page :is(.gz-hero, .gz-section, .al-hero-wrap, .sa-hero-wrap,
    .gz-tl-hero, .cv-hero-wrap, .px-hero-wrap, .pf-hero-wrap, .sx-hero-wrap,
    .sa-samples-section) {
    padding-inline: var(--tool-shell-gutter);
  }
  .gz-tool-page :is(.gz-hero-inner, .gz-section-inner:not(.gz-guide-inner),
    .al-hero-card, .sa-hero-card, .gz-tl-hero-card, .cv-hero-card,
    .px-hero-card, .pf-hero-card, .sx-hero-card) {
    max-width: var(--tool-shell-width);
    margin-inline: auto;
  }

  /* Standalone editors include their own outer wrapper. */
  .gz-tool-page :is(.cv-wrap, .tg-wrap, .tg-hero-wrap, .fx-page, .sf-main) {
    width: calc(100% - 2 * var(--tool-shell-gutter));
    max-width: var(--tool-shell-width);
    padding-inline: 0;
    margin-inline: auto;
  }
  .gz-tool-page .gz-summary-card {
    width: calc(100% - 2 * var(--tool-shell-gutter));
    max-width: var(--tool-shell-width);
  }

  /* Canvas's generic text-input rule was stretching the small zoom field. */
  .gz-tool-page .cv-card .cv-tb-zoom-val {
    width: 46px;
    min-width: 46px;
    flex: 0 0 46px;
  }
  .gz-tool-page .cv-topbar-center {
    min-width: 0;
    flex-wrap: wrap;
  }
  .gz-tool-page .cv-stage-area {
    width: 100%;
    max-width: 100%;
  }

  /* Keep Optimize's help bubble in its settings row, even when hidden. */
  .gz-tool-page.gz-tool-optimize .gz-settings-exif {
    position: relative;
  }
  .gz-tool-page.gz-tool-optimize .gz-help-wrap {
    position: static;
  }
  .gz-tool-page.gz-tool-optimize .gz-help-tooltip {
    left: 0;
    top: 100%;
    min-width: 0;
    width: min(320px, 100%);
    max-width: 100%;
  }
}