/* Route-level Stoppin polish.
   This layer complements stoppin-ui-polish.css with page-aware fixes for
   intentional dark editorial surfaces and mobile actions. */

/* Light mode must not make white utility borders disappear on light surfaces. */
html[data-theme="light"]
  .stoppin-app-shell:not(.stoppin-home-stage)
  main
  [class*="border-white/"] {
  border-color: rgb(17 21 26 / 0.14) !important;
}

html[data-theme="light"]
  .stoppin-app-shell:not(.stoppin-home-stage)
  main
  [class*="bg-surface"][class*="rounded-"] {
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.9),
    0 14px 38px rgb(35 48 61 / 0.055);
}

/* Editorial hero panels are intentionally nocturnal on every account theme. */
[data-stoppin-route="/social"] main > section:first-child,
[data-stoppin-route="/categories"] main > section:first-child,
[data-stoppin-route="/organizer"] main > section:first-child,
[data-stoppin-route="/help"] main > div > header:first-child,
[data-stoppin-route="/faq"] main > div > header:first-child,
[data-stoppin-route^="/organizer"] .stoppin-organizer-workspace-header,
.stoppin-form-shell__brand {
  color-scheme: dark;
  --background: #07090c;
  --foreground: #f8fbff;
  --surface: #0d1117;
  --surface-2: #151a22;
  --muted: #171d26;
  --muted-foreground: #b6c0cb;
  --accent: #1a2330;
  --accent-foreground: #f8fbff;
  --border: rgb(255 255 255 / 0.14);
  --color-background: #07090c;
  --color-foreground: #f8fbff;
  --color-surface: #0d1117;
  --color-surface-2: #151a22;
  --color-muted: #171d26;
  --color-muted-foreground: #b6c0cb;
  --color-accent: #1a2330;
  --color-accent-foreground: #f8fbff;
  --color-border: rgb(255 255 255 / 0.14);
  border-color: rgb(255 255 255 / 0.13) !important;
  color: #f8fbff;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.055),
    0 26px 70px rgb(0 0 0 / 0.22);
}

[data-stoppin-route="/social"] main > section:first-child .text-muted-foreground,
[data-stoppin-route="/categories"] main > section:first-child .text-muted-foreground,
[data-stoppin-route="/organizer"] main > section:first-child .text-muted-foreground,
[data-stoppin-route="/help"] main > div > header:first-child .text-muted-foreground,
[data-stoppin-route="/faq"] main > div > header:first-child .text-muted-foreground,
[data-stoppin-route^="/organizer"]
  .stoppin-organizer-workspace-header
  .text-muted-foreground,
.stoppin-form-shell__brand .text-muted-foreground {
  color: #b6c0cb !important;
}

.stoppin-form-shell__brand .stoppin-wordmark,
.stoppin-form-shell__brand [class*="wordmark"] {
  color: #fff !important;
}

/* Category tiles carry a deliberately dark photographic gradient inside the
   card. Keep their copy and expanded taxonomy controls on the same dark token
   contract instead of inheriting light-mode foregrounds. */
[data-stoppin-route="/categories"] section[aria-labelledby="category-grid-title"] article {
  color-scheme: dark;
  --background: #080a0d;
  --foreground: #f8fbff;
  --surface: #101318;
  --surface-2: #171b22;
  --muted: #191e27;
  --muted-foreground: #b5bec8;
  --accent: #1b2531;
  --accent-foreground: #f8fbff;
  --border: rgb(255 255 255 / 0.14);
  --color-background: #080a0d;
  --color-foreground: #f8fbff;
  --color-surface: #101318;
  --color-surface-2: #171b22;
  --color-muted: #191e27;
  --color-muted-foreground: #b5bec8;
  --color-accent: #1b2531;
  --color-accent-foreground: #f8fbff;
  --color-border: rgb(255 255 255 / 0.14);
  border-color: rgb(255 255 255 / 0.13) !important;
  color: #f8fbff;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.045),
    0 18px 46px rgb(0 0 0 / 0.16);
}

[data-stoppin-route="/categories"]
  section[aria-labelledby="category-grid-title"]
  article
  .text-muted-foreground {
  color: #b5bec8 !important;
}

/* The generic light-mode border repair above must not darken the intentionally
   white glass separators inside nocturnal editorial panels. */
html[data-theme="light"]
  [data-stoppin-route="/social"]
  main
  > section:first-child
  [class*="border-white/"],
html[data-theme="light"]
  [data-stoppin-route="/categories"]
  section[aria-labelledby="category-grid-title"]
  article
  [class*="border-white/"],
html[data-theme="light"]
  [data-stoppin-route="/help"]
  main
  > div
  > header:first-child
  [class*="border-white/"],
html[data-theme="light"]
  [data-stoppin-route="/faq"]
  main
  > div
  > header:first-child
  [class*="border-white/"],
html[data-theme="light"]
  [data-stoppin-route^="/organizer"]
  .stoppin-organizer-workspace-header
  [class*="border-white/"],
html[data-theme="light"] .stoppin-form-shell__brand [class*="border-white/"] {
  border-color: rgb(255 255 255 / 0.16) !important;
}

/* Event and venue photography must always fade to black/dark neutral, never
   to the account light background. Information cards below remain theme-aware. */
[data-stoppin-route^="/event/"] main > div > div:first-child,
[data-stoppin-route^="/venue/"] main > div > div:first-child {
  --background: #050607;
  --color-background: #050607;
  background-color: #0d1117 !important;
}

/* Improve hierarchy of light-theme content cards without turning the whole
   product into a collection of heavy boxes. */
html[data-theme="light"] [data-stoppin-route="/profile"] main section,
html[data-theme="light"] [data-stoppin-route="/agenda"] main > div,
html[data-theme="light"] [data-stoppin-route="/social"] aside > div,
html[data-theme="light"] [data-stoppin-route="/notifications"] main li,
html[data-theme="light"] [data-stoppin-route="/help"] main article,
html[data-theme="light"] [data-stoppin-route="/faq"] details,
html[data-theme="light"] [data-stoppin-route^="/venue/"] main section,
html[data-theme="light"] [data-stoppin-route^="/organizer"] main article {
  border-color: rgb(17 21 26 / 0.13) !important;
}

/* Buttons and pills placed on explicit dark editorial surfaces stay legible
   even when they use inherited border/background utility tokens. */
[data-stoppin-route="/social"] main > section:first-child :is(button, a),
[data-stoppin-route="/categories"] main > section:first-child :is(button, a),
[data-stoppin-route="/help"] main > div > header:first-child :is(button, a),
[data-stoppin-route="/faq"] main > div > header:first-child :is(button, a),
[data-stoppin-route^="/organizer"] .stoppin-organizer-workspace-header :is(button, a),
.stoppin-form-shell__brand :is(button, a) {
  text-shadow: none;
}

/* Bottom actions: the global dock occupies roughly five rem including its
   safe-area offset. Reserve a real gap above it on smaller iPhones. */
@media (max-width: 767px) {
  .stoppin-app-shell
    main
    [class*="fixed"][class*="bottom-"][class*="left-3"][class*="right-3"],
  .stoppin-app-shell main [class*="fixed"][class*="bottom-"][class*="inset-x-3"] {
    bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  [data-stoppin-route="/categories"] main .sticky[class*="bottom-20"] {
    bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  body .glass.fixed.bottom-20.left-3.right-3,
  body [role="status"].fixed {
    bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px)) !important;
  }

  [data-stoppin-route="/categories"] main .sticky[class*="bottom-20"],
  [data-stoppin-route^="/event/"] main [class*="fixed"][class*="inset-x-3"],
  [data-stoppin-route="/settings"]
    main
    [class*="fixed"][class*="left-3"][class*="right-3"],
  body .glass.fixed.bottom-20.left-3.right-3 {
    box-shadow:
      0 18px 46px rgb(0 0 0 / 0.3),
      0 0 0 1px rgb(255 255 255 / 0.035);
  }

  /* Keep primary mobile calls-to-action reachable without squeezing labels. */
  [data-stoppin-route="/categories"] main .sticky[class*="bottom-20"] button,
  [data-stoppin-route^="/event/"] main [class*="fixed"][class*="inset-x-3"] a {
    min-height: 44px;
  }
}

/* Tablet/desktop content rhythm: avoid very wide paragraphs and abrupt visual
   jumps between hero panels and utility sections. */
@media (min-width: 768px) {
  [data-stoppin-route="/profile"] main,
  [data-stoppin-route="/settings"] main,
  [data-stoppin-route="/agenda"] main,
  [data-stoppin-route="/social"] main,
  [data-stoppin-route="/categories"] main,
  [data-stoppin-route="/help"] main,
  [data-stoppin-route="/faq"] main {
    scroll-margin-top: 5rem;
  }

  [data-stoppin-route="/social"] main > section:first-child,
  [data-stoppin-route="/categories"] main > section:first-child,
  [data-stoppin-route="/organizer"] main > section:first-child,
  [data-stoppin-route="/help"] main > div > header:first-child,
  [data-stoppin-route="/faq"] main > div > header:first-child,
  [data-stoppin-route^="/organizer"] .stoppin-organizer-workspace-header {
    background:
      radial-gradient(circle at 86% 10%, rgb(255 121 0 / 0.11), transparent 31%),
      linear-gradient(145deg, rgb(12 14 18 / 0.98), rgb(6 8 11 / 0.98)) !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  [data-stoppin-route="/social"] main > section:first-child,
  [data-stoppin-route="/categories"] main > section:first-child,
  [data-stoppin-route="/organizer"] main > section:first-child,
  [data-stoppin-route="/help"] main > div > header:first-child,
  [data-stoppin-route="/faq"] main > div > header:first-child,
  [data-stoppin-route^="/organizer"] .stoppin-organizer-workspace-header,
  .stoppin-form-shell__brand {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}