/* KDB RACECONTROL GLOBAL CANVAS V1
   Loaded after page-specific styles on every marshal route. */
html:has(body.kdb-marshal-page) {
  background: #020c14;
}

body.kdb-design-system-v1.kdb-marshal-page {
  background-color: #020c14 !important;
  background-image:
    linear-gradient(90deg, rgba(2, 12, 20, .97) 0%, rgba(2, 12, 20, .91) 40%, rgba(2, 12, 20, .93) 100%),
    linear-gradient(135deg, transparent 0 57%, rgba(53, 200, 245, .12) 57.4% 60%, transparent 60.4% 66%, rgba(223, 245, 250, .09) 66.4% 68.2%, transparent 68.6%),
    url("/static/core/images/kdb-v5-1/hero-season-clean-v2.5737ef0f46ce.webp") !important;
  background-position: center top, center top, center top !important;
  background-size: cover, 100% 100%, cover !important;
  background-attachment: fixed, fixed, fixed !important;
  background-repeat: no-repeat !important;
}

body.kdb-design-system-v1.kdb-marshal-page::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: -1 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, rgba(2,12,20,.54), rgba(2,12,20,.70) 42%, rgba(2,12,20,.98)), repeating-linear-gradient(124deg, transparent 0 210px, rgba(53,200,245,.035) 210px 214px, transparent 214px 350px) !important;
}

body.kdb-design-system-v1.kdb-marshal-page :is(
  main,
  .kdb-premium-ui,
  .kdb-command-shell__identity,
  .kdb-command-bar,
  .kdb-pro-control,
  .race-control-shell,
  .kdb-v7,
  .kdb-fee,
  .civ-app,
  .kdb-stage-points,
  .kdb-start-list,
  .kdb-civilian-main .civ-app,
  .kdb-center-stage__shell,
  .kdb-fees__shell,
  .kdb-civilian-shell,
  .kdb-premium-ui .ui-shell,
  .bracket-shell
) {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body.kdb-design-system-v1.kdb-marshal-page :is(main, .kdb-page-shell, .kdb-premium-ui, .kdb-civilian-main) {
  background-color: transparent !important;
}

/* One canvas contract for the compact ui-* RaceControl pages.  These pages
   previously retained an older max-width on .kdb-premium-ui, which left a
   visible empty gutter even though their outer <main> was already full width. */
body.kdb-design-system-v1.kdb-marshal-page .kdb-premium-ui {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Shared watermark rule.  Every hero owns one quiet label in the same place:
   vertically centred, right-aligned, behind the content and clipped by hero.
   Page-specific words are retained below; the placement never changes. */
body.kdb-design-system-v1.kdb-marshal-page .kdb-premium-ui .ui-hero {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

body.kdb-design-system-v1.kdb-marshal-page .kdb-premium-ui .ui-hero::after {
  position: absolute !important;
  top: 50% !important;
  right: clamp(16px, 4vw, 64px) !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  color: rgba(83, 191, 224, .075) !important;
  font: italic 900 clamp(76px, 11vw, 176px)/.8 var(--kdb-ds-display, KDBDisplay, Oswald, sans-serif) !important;
  letter-spacing: -.065em !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  transform: translateY(-50%) skewX(-8deg) !important;
}

body.kdb-design-system-v1.kdb-marshal-page .kdb-premium-ui .ui-watermark {
  display: none !important;
}

body.kdb-design-system-v1.kdb-marshal-page .kdb-qualification-hero::after {
  content: "QUALIFYING" !important;
}

body.kdb-design-system-v1.kdb-marshal-page .kdb-stage-protocol-page .ui-hero::after {
  content: "PROTOCOL" !important;
}

/* The points route used an older, more specific pseudo-element rule.  Match
   that scope so the shared geometry above wins without relying on a cascade
   accident or leaving a second watermark behind. */
body.kdb-design-system-v1.kdb-marshal-page .kdb-stage-points-page .kdb-premium-ui .ui-hero::after {
  content: "POINTS" !important;
  top: 50% !important;
  right: clamp(16px, 4vw, 64px) !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  color: rgba(83, 191, 224, .075) !important;
  font: italic 900 clamp(76px, 11vw, 176px)/.8 var(--kdb-ds-display, KDBDisplay, Oswald, sans-serif) !important;
  letter-spacing: -.065em !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  transform: translateY(-50%) skewX(-8deg) !important;
}

body.kdb-design-system-v1.kdb-marshal-page .kdb-premium-ui .ui-hero > :not(.ui-watermark) {
  position: relative;
  z-index: 1;
}

/* The remaining functional tabs use their own hero markup.  They consume the
   same placement rule, so a watermark never drifts to a hero edge or overlaps
   the control surface merely because the tab predates ui-hero. */
body.kdb-design-system-v1.kdb-marshal-page :is(
  .kdb-center-stage__panel,
  .kdb-fees__intro,
  .kdb-civilian-hero,
  .kdb-start-list__hero,
  .kdb-pro-control__hero
) {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

body.kdb-design-system-v1.kdb-marshal-page .kdb-center-stage-page .kdb-center-stage__watermark,
body.kdb-design-system-v1.kdb-marshal-page .kdb-fees-page .kdb-fees__watermark,
body.kdb-design-system-v1.kdb-marshal-page :is(.kdb-civilian-hero, .kdb-start-list__hero, .kdb-pro-control__hero)::after {
  position: absolute !important;
  top: 50% !important;
  right: clamp(16px, 4vw, 64px) !important;
  bottom: auto !important;
  left: auto !important;
  z-index: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  color: rgba(83, 191, 224, .075) !important;
  font: italic 900 clamp(76px, 11vw, 176px)/.8 var(--kdb-ds-display, KDBDisplay, Oswald, sans-serif) !important;
  letter-spacing: -.065em !important;
  white-space: nowrap !important;
  pointer-events: none !important;
  transform: translateY(-50%) skewX(-8deg) !important;
}

body.kdb-design-system-v1.kdb-marshal-page .kdb-civilian-hero::after { content: "CIVIL" !important; }
body.kdb-design-system-v1.kdb-marshal-page .kdb-start-list__hero::after { content: "START LIST" !important; }
body.kdb-design-system-v1.kdb-marshal-page .kdb-pro-control__hero::after { content: "TOP 32" !important; }
body.kdb-design-system-v1.kdb-marshal-page .kdb-pro-control__hero::before { content: none !important; display: none !important; }

/* The historic organizer layer hid this one pseudo-element entirely.  Restore
   it as the same restrained, centred mark used by the other tabs. */
body.kdb-design-system-v1.kdb-marshal-page .kdb-pro-control__hero::after {
  display: block !important;
  top: 50% !important;
  right: clamp(16px, 4vw, 64px) !important;
  bottom: auto !important;
  left: auto !important;
  background: none !important;
  box-shadow: none !important;
  transform: translateY(-50%) skewX(-8deg) !important;
}

/* Qualification is flat markup (not a nested copy block), so the generic
   grid placed its title in a separate right-hand cell.  Keep all four lines
   together as a readable left-aligned hero composition. */
body.kdb-design-system-v1.kdb-marshal-page .kdb-premium-ui .ui-hero.kdb-qualification-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 9px !important;
  padding: 28px clamp(20px, 4vw, 64px) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--kdb-ui-line) !important;
  box-shadow: none !important;
  background: transparent !important;
}

body.kdb-design-system-v1.kdb-marshal-page .kdb-pro-control__hero {
  border: 0 !important;
  border-bottom: 1px solid var(--kdb-ui-line) !important;
  box-shadow: none !important;
  background: transparent !important;
}

body.kdb-design-system-v1.kdb-marshal-page .kdb-premium-ui .kdb-qualification-hero .ui-eyebrow,
body.kdb-design-system-v1.kdb-marshal-page .kdb-premium-ui .kdb-qualification-hero .ui-title,
body.kdb-design-system-v1.kdb-marshal-page .kdb-premium-ui .kdb-qualification-hero .ui-subtitle {
  width: auto !important;
  max-width: min(760px, 76%) !important;
  margin: 0 !important;
}

body.kdb-design-system-v1.kdb-marshal-page .kdb-premium-ui .kdb-qualification-hero .ui-eyebrow,
body.kdb-design-system-v1.kdb-marshal-page .kdb-premium-ui .kdb-qualification-hero .ui-subtitle {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
}

body.kdb-design-system-v1.kdb-marshal-page .kdb-premium-ui .kdb-qualification-hero .ui-title {
  color: var(--kdb-ui-text) !important;
  font-size: clamp(42px, 4.8vw, 70px) !important;
  line-height: .92 !important;
}

body.kdb-design-system-v1.kdb-marshal-page :is(
  .kdb-civilian-hero,
  .kdb-start-list__hero,
  .kdb-pro-control__hero
) > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 820px) {
  body.kdb-design-system-v1.kdb-marshal-page {
    background-position: 58% top, center top, 58% top !important;
    background-size: auto 100%, 100% 100%, auto 100% !important;
    background-attachment: scroll, scroll, scroll !important;
  }
  body.kdb-design-system-v1.kdb-marshal-page::before { position: absolute !important; min-height: 100% !important; }
  body.kdb-design-system-v1.kdb-marshal-page .kdb-premium-ui .ui-hero::after {
    right: -8px !important;
    font-size: clamp(58px, 19vw, 92px) !important;
    color: rgba(83, 191, 224, .065) !important;
  }
  body.kdb-design-system-v1.kdb-marshal-page .kdb-stage-points-page .kdb-premium-ui .ui-hero::after {
    right: -8px !important;
    font-size: clamp(58px, 19vw, 92px) !important;
    color: rgba(83, 191, 224, .065) !important;
  }
  body.kdb-design-system-v1.kdb-marshal-page .kdb-center-stage-page .kdb-center-stage__watermark,
  body.kdb-design-system-v1.kdb-marshal-page .kdb-fees-page .kdb-fees__watermark,
  body.kdb-design-system-v1.kdb-marshal-page :is(.kdb-civilian-hero, .kdb-start-list__hero, .kdb-pro-control__hero)::after {
    right: -8px !important;
    font-size: clamp(58px, 19vw, 92px) !important;
    color: rgba(83, 191, 224, .065) !important;
  }
  body.kdb-design-system-v1.kdb-marshal-page .kdb-premium-ui .ui-hero.kdb-qualification-hero {
    min-height: 0 !important;
    padding: 23px 18px !important;
  }
  body.kdb-design-system-v1.kdb-marshal-page .kdb-premium-ui .kdb-qualification-hero .ui-eyebrow,
  body.kdb-design-system-v1.kdb-marshal-page .kdb-premium-ui .kdb-qualification-hero .ui-title,
  body.kdb-design-system-v1.kdb-marshal-page .kdb-premium-ui .kdb-qualification-hero .ui-subtitle {
    max-width: 100% !important;
  }
}