/* STOCK_STEP1_FLAT_V19 — loaded only by step-1-intro.html.
   Presentation only. Upload/drop zones, progress steps, inputs and actions remain intact. */

/* Keep the canvas and content on the same visual surface. */
html:not([data-theme="dark"]) body:not(.dark-mode):not([data-theme="dark"]) {
  background-color: #fff !important;
}
html:not([data-theme="dark"]) body:not(.dark-mode):not([data-theme="dark"]) main,
html:not([data-theme="dark"]) body:not(.dark-mode):not([data-theme="dark"]) :is(
  .wizard-shell, .wizard-layout, .wizard-main, .wizard-content,
  .wizard-sidebar, .step-shell, .step-layout, .step-content,
  .step-main, .step-sidebar, .intro-layout, .intro-main,
  .intro-sidebar, .publish-layout, .publish-main
) {
  background-color: #fff !important;
  background-image: none !important;
}

/* Flat presentation for ONLY structural content wrappers on this page.
   Never flatten the upload targets, input fields, selected images or buttons. */
main :is(
  .card-surface, .form-card, .wizard-card, .wizard-form-card,
  .wizard-panel, .wizard-step-card, .wizard-preview-card,
  .wizard-aside-card, .step-card, .step-panel, .step-form-card,
  .step-preview-card, .step-info-card, .intro-card,
  .content-card, .section-card, .preview-card, .preview-panel,
  .tips-card, .tips-panel, .help-card, .help-panel,
  .notice-card, .publish-card, .aside-card,
  .form-panel, .summary-panel, .form-section,
  [class*="wizard-card"], [class*="wizard-panel"],
  [class*="step-card"], [class*="step-panel"],
  [class*="preview-card"], [class*="tips-card"]
) {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  backdrop-filter: none !important;
}

/* The primary high-level groups should not look like separate floating islands. */
main > :is(section, article, aside),
main > div > :is(section, article, aside),
main :is(.wizard-layout, .wizard-grid, .step-layout, .step-grid,
         .intro-grid, .publish-grid) > :is(section, article, aside) {
  background: transparent !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* Remove repeated card framing while retaining comfortable content padding. */
main :is(.wizard-card, .wizard-panel, .step-card, .step-panel,
         .form-card, .preview-card, .tips-card, .wizard-form-card,
         .wizard-preview-card, .step-form-card, .step-preview-card) {
  padding-inline: clamp(0px, 1.2vw, 12px) !important;
}

/* When sibling logical panels occur, use a gentle divider rather than a box. */
main :is(.wizard-card, .step-card, .wizard-panel, .step-panel,
         .form-card, .content-card) +
     :is(.wizard-card, .step-card, .wizard-panel, .step-panel,
         .form-card, .content-card) {
  border-top: 1px solid #ebedf0 !important;
  padding-top: clamp(18px, 2.5vw, 26px) !important;
}

/* A fieldset may group fields semantically without needing a visible outer box. */
main fieldset:not([class*="upload"]):not([class*="photo"]):not([class*="image"]) {
  border: 0 !important;
  box-shadow: none !important;
}

/* Neutralize old hover elevation from general-purpose card themes. */
main :is(.card-surface, .wizard-card, .step-card, .form-card,
         .preview-card, .tips-card):hover {
  box-shadow: none !important;
  transform: none !important;
}

/* Upload drop zones, image slots, inputs and buttons have no V19 overrides. */

@media (max-width: 780px) {
  main :is(.wizard-card, .wizard-panel, .step-card, .step-panel,
           .form-card, .preview-card, .tips-card,
           .wizard-form-card, .step-form-card) {
    padding-inline: 0 !important;
  }
  main :is(.wizard-layout, .wizard-grid, .step-layout,
           .step-grid, .intro-grid, .publish-grid) {
    row-gap: 20px;
  }
}

/* Honor dark mode instead of forcing a light canvas onto a dark theme. */
html[data-theme="dark"] main :is(
  .card-surface, .form-card, .wizard-card, .wizard-panel,
  .step-card, .step-panel, .preview-card, .tips-card
),
body.dark-mode main :is(
  .card-surface, .form-card, .wizard-card, .wizard-panel,
  .step-card, .step-panel, .preview-card, .tips-card
) {
  box-shadow: none !important;
  background: transparent !important;
  border-color: transparent !important;
}