/* specials_ordering_html - the Specials Ordering shell's own CSS. Rules that
   name the root itself stay BARE,
   as the guide requires: wrapping .so-page in :where() would drop it below the
   scoped reset, and [data-theme="dark"] sits on <html>, an ancestor of the
   root, so a scope in front of it could never match.

   The .so-page rule carries width and padding and none of the eight
   .px-screen-root declarations.

   The eight custom properties stay on .so-page rather than :root, because
   every leaf reads them (var(--accent), var(--so-success), var(--so-danger-bg),
   var(--px-loading-accent)) and .so-page is their one common ancestor. */

/* The form root: display: block and nothing else, on purpose. .so-page carries
   .px-screen-root's height: 100% and overflow-y: auto, and it sits directly in
   main's content mount, so without this one the screen itself becomes the
   scroll port and main's modal scroll lock -
   which names the content mount, not this screen - stops biting, leaving the
   page scrolling behind every px_confirm and px_alert. In a block box of auto
   height the percentage height resolves to auto and an auto-height box never
   scrolls. The name is declared nowhere
   else in either repo, so it ties with nothing. .nms-screen-root and
   .om-screen-root are the same wrapper on the two preceding shells. */
.so-screen-root {
  display: block;
}

.so-page {
  --accent: #d97706;
  --accent-hover: #b45309;
  --accent-subtle: rgba(217, 119, 6, 0.12);
  --so-success: #16a34a;
  --so-success-bg: rgba(22, 163, 74, 0.12);
  --so-danger: #dc2626;
  --so-danger-bg: rgba(220, 38, 38, 0.12);
  --px-loading-accent: #d97706;

  width: 100%;
  padding: 24px;
}

[data-theme="dark"] .so-page {
  --accent: #f59e0b;
  --accent-hover: #d97706;
  --accent-subtle: rgba(245, 158, 11, 0.25);
  --so-success: #4ade80;
  --so-success-bg: rgba(74, 222, 128, 0.15);
  --so-danger: #f87171;
  --so-danger-bg: rgba(248, 113, 113, 0.15);
}

:where(.so-page) .so-section {
  margin-top: 16px;
}

/* NO so-section-hidden RULE. The endorse and history mounts ship visible so
   their dropzones are reachable on the designer canvas; setActiveSection
   writes style.display on all three sections from bootstrap, before any data
   arrives, and that inline declaration is the only hide this screen needs. */

@media (max-width: 700px) {
  .so-page {
    padding: 16px;
  }
}

@media (max-width: 500px) {
  .so-page {
    padding: 12px;
  }
}