/*
 * Global dark mode — Planet CI on a dark chrome.
 *
 * Loads on top of themes/planet.css. Remaps page/surface/text tokens only;
 * --planet-primary / --planet-secondary stay put so accent widget skins keep
 * their true blue and yellow. Accent skins set their own text colors
 * explicitly so they don't follow the flipped chrome text.
 */

:root {
  /* Native form controls (input text, carets, select dropdowns, checkboxes,
     date pickers, scrollbars) follow the dark scheme instead of defaulting
     to light-scheme black text on the dark input fills. */
  color-scheme: dark;

  --planet-neutral: #0A0A0A;
  --planet-tint: #3A3A3A;
  --planet-input-fill: #1E1E1E;

  --color-bg: #0A0A0A;
  --color-surface: #1A1A1A;
  --color-border: #3A3A3A;
  --color-text: #F5F5F5;
  --color-text-muted: rgba(245, 245, 245, 0.55);
  --color-primary-contrast: #F5F5F5;
  /* Planet's danger red (#b42318) turns muddy on dark — lift it; same for
     the amber warning tone. Success accents (locale-tab dots, live status
     dot, saved-check) follow the yellow accent language instead of Planet's
     blue. */
  --color-danger: #FF6B5E;
  --color-warning: #FFB020;
  --color-success: var(--planet-secondary);

  /* Cards a step lighter than the page so they read as tiles; border uses
     a visible light mix (Planet's default is 6% black, which vanishes here). */
  --planet-card: #1A1A1A;
  --shadow-card: 0 1px 0 color-mix(in srgb, #000 40%, transparent);

  /* Concave 4-point sparkles for the night sky (bright / dim / CI yellow). */
  --star-bright: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 C13.2 7.6, 16.4 10.8, 24 12 C16.4 13.2, 13.2 16.4, 12 24 C10.8 16.4, 7.6 13.2, 0 12 C7.6 10.8, 10.8 7.6, 12 0 Z' fill='%23FFFFFF'/%3E%3C/svg%3E");
  --star-dim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 C13.2 7.6, 16.4 10.8, 24 12 C16.4 13.2, 13.2 16.4, 12 24 C10.8 16.4, 7.6 13.2, 0 12 C7.6 10.8, 10.8 7.6, 12 0 Z' fill='%23FFFFFF' fill-opacity='.5'/%3E%3C/svg%3E");
  --star-yellow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 C13.2 7.6, 16.4 10.8, 24 12 C16.4 13.2, 13.2 16.4, 12 24 C10.8 16.4, 7.6 13.2, 0 12 C7.6 10.8, 10.8 7.6, 12 0 Z' fill='%23D4FF00'/%3E%3C/svg%3E");
}

/* Rubber-band rules (WebKit + Chromium, verified expected behavior): only a
   solid background-color ever floods the overscroll gap — root background
   IMAGES are never painted there, and absolutely positioned boxes beyond the
   document edges are pulled along with the content. The one thing that stays
   glued to the viewport while the page is pulled is a position: fixed layer,
   so the entire sky (gradients + stars) lives on body::after below. html
   keeps the matching solid color as the flood fallback. */
html {
  background-color: #080824;
}

body {
  min-height: 100vh;
  background: transparent;
}

/* The night sky: a viewport-sized fixed backdrop (a 300vh oversized layer
   got clipped by the compositor — plain inset: 0 works). Star sparkles as
   no-repeat SVG layers on top, sky gradients underneath; the base gradient
   is opaque to the corners, so the backdrop fully covers the bounce gap.
   z-index: -1 keeps it behind all content without touching the stacking
   order of body's children — lifting those onto their own z-indexes had
   trapped fixed overlays (the flash stack) inside main, under the header. */
body::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
  inset: 0;
  background-repeat: no-repeat;
  background-image:
    var(--star-bright), var(--star-dim), var(--star-bright), var(--star-dim),
    var(--star-yellow), var(--star-bright), var(--star-dim), var(--star-bright),
    var(--star-bright), var(--star-dim), var(--star-yellow), var(--star-bright),
    var(--star-dim), var(--star-bright), var(--star-bright), var(--star-dim),
    var(--star-yellow), var(--star-bright), var(--star-dim), var(--star-bright),
    var(--star-dim), var(--star-bright), var(--star-bright), var(--star-yellow),
    var(--star-dim), var(--star-bright), var(--star-dim), var(--star-bright),
    var(--star-bright), var(--star-yellow), var(--star-bright), var(--star-bright),
    var(--star-yellow),
    radial-gradient(ellipse 115% 90% at 12% 115%,
      color-mix(in srgb, var(--planet-primary) 80%, #000000) 0%,
      color-mix(in srgb, var(--planet-primary) 42%, transparent) 34%,
      transparent 60%),
    radial-gradient(ellipse 65% 40% at 20% 105%,
      color-mix(in srgb, var(--planet-secondary) 22%, transparent) 0%,
      transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% -8%,
      color-mix(in srgb, var(--planet-primary) 45%, transparent) 0%,
      transparent 55%),
    radial-gradient(ellipse 130% 100% at 50% 35%,
      #12123a 0%,
      #080824 40%,
      #020218 72%);
  background-position:
    4vw 6vh, 11vw 14vh, 19vw 4vh, 27vw 18vh,
    34vw 9vh, 42vw 22vh, 51vw 7vh, 67vw 3vh,
    74vw 12vh, 82vw 8vh, 89vw 20vh, 95vw 5vh,
    7vw 32vh, 15vw 41vh, 36vw 36vh, 48vw 30vh,
    56vw 44vh, 65vw 33vh, 78vw 39vh, 91vw 27vh,
    3vw 55vh, 13vw 62vh, 44vw 67vh, 53vw 54vh,
    62vw 71vh, 76vw 59vh, 88vw 64vh, 97vw 48vh,
    21vw 85vh, 38vw 80vh, 84vw 77vh, 16vw 95vh,
    32vw 12vh,
    0 0, 0 0, 0 0, 0 0;
  background-size:
    12px 12px, 8px 8px, 9px 9px, 7px 7px,
    12px 12px, 8px 8px, 10px 10px, 10px 10px,
    14px 14px, 8px 8px, 9px 9px, 8px 8px,
    8px 8px, 9px 9px, 13px 13px, 8px 8px,
    10px 10px, 8px 8px, 7px 7px, 9px 9px,
    7px 7px, 8px 8px, 9px 9px, 11px 11px,
    7px 7px, 8px 8px, 8px 8px, 9px 9px,
    9px 9px, 8px 8px, 12px 12px, 8px 8px,
    9px 9px,
    100% 100%, 100% 100%, 100% 100%, 100% 100%;
}

/* Remap --planet-white as a surface fill for chrome panels — not for
   skinned widgets (those own fill + --widget-* contrast tokens). */
.widget-tray,
.form,
.popover-panel,
.login-card,
.confirm-dialog {
  --planet-white: var(--planet-card);
}

.confirm-dialog {
  color: var(--color-text);
}

/* --- Text fields --------------------------------------------------------------
   Planet's filled inputs set only the fill (--planet-input-fill, #1E1E1E
   here) and rely on the UA for the text — which is black in light scheme.
   Explicit light text + muted placeholders for every filled field. */
.form__field input,
.form__field textarea,
.form__field select,
.audience-fields__filter,
.gains__composer textarea,
.form-input,
trix-editor {
  color: var(--color-text);
}

/* Planet's filled fields are borderless — on dark panels the fill (#1E1E1E
   on #1A1A1A) barely reads as a field, so the resting state gets a light
   hairline. (Checkboxes excluded: they stay native.) */
.form__field input[type="text"],
.form__field input[type="number"],
.form__field input[type="datetime-local"],
.form__field textarea,
.form__field select,
.ai-panel textarea,
.audience-fields__filter,
.gains__composer textarea,
.form-input,
trix-editor {
  border: 1px solid var(--color-border);
}

/* Trix toolbar: dark pills with light icons. The SVG sprites are near-black,
   so invert them; active format stays CI yellow with black icons. */
trix-toolbar .trix-button-group {
  background: var(--planet-input-fill);
  border-color: var(--color-border);
}

trix-toolbar .trix-button {
  color: var(--color-text);
}

trix-toolbar .trix-button:not(:first-child) {
  border-left-color: var(--color-border);
}

trix-toolbar .trix-button:not(:disabled):hover {
  background: var(--planet-tint);
}

trix-toolbar .trix-button.trix-active:not(:disabled):hover {
  background: var(--planet-secondary);
}

trix-toolbar .trix-button--icon::before {
  filter: invert(1);
}

trix-toolbar .trix-button--icon.trix-active::before {
  filter: none;
}

trix-toolbar .trix-dialog {
  background: var(--planet-card);
  border-color: var(--color-border);
  color: var(--color-text);
}

trix-toolbar .trix-input--dialog {
  color: var(--color-text);
  background: var(--planet-input-fill);
  border: 1px solid var(--color-border);
}

trix-toolbar .trix-input--dialog:focus {
  box-shadow: inset 0 -2px 0 var(--planet-secondary);
}

trix-toolbar .trix-button--dialog {
  color: var(--planet-secondary);
  border-color: var(--color-border);
}

/* Code blocks: ActionText hardcodes #eee — light fill + light text. */
trix-editor pre,
.trix-content pre,
pre {
  background: var(--planet-tint);
  background-color: var(--planet-tint);
  color: var(--color-text);
}

input::placeholder,
textarea::placeholder {
  color: var(--color-text-muted);
}

/* --- Chips ---------------------------------------------------------------------
   Restyled onto the dark language instead of staying white light-mode chips:
   dark fills + light type, hairline outlines, CI yellow for accent states.
   Only the two channel fills keep their CI colors. NOTE: these rules follow
   planet.css in the cascade, so every variant that must differ from the
   base chip is restated here. */
.badge {
  color: var(--color-text);
  background: var(--planet-input-fill);
  border-color: var(--color-border);
}

/* Channels: news keeps the acid fill, events the blue fill (like buttons);
   unknown future channels become a light outline. */
.badge--channel {
  color: var(--color-text);
  border-color: var(--color-text);
  background: transparent;
}

.badge--channel-news {
  color: #0A0A0A;
  border-color: var(--planet-secondary);
  background: var(--planet-secondary);
}

.badge--channel-events {
  color: #FFFFFF;
  border-color: var(--planet-primary);
  background: var(--planet-primary);
}

/* Status: yellow outline = live, light outline = scheduled, muted grey
   fill = expired, inverted (light) fill = manually hidden. */
.badge--published {
  color: var(--planet-secondary);
  border-color: var(--planet-secondary);
  background: transparent;
}

.badge--scheduled {
  color: var(--color-text);
  border-color: var(--color-text);
  background: transparent;
}

.badge--expired {
  color: var(--color-text-muted);
  border-color: transparent;
  background: var(--planet-input-fill);
}

.badge--hidden {
  color: var(--color-bg);
  border-color: var(--color-text);
  background: var(--color-text);
}

/* Audience / languages: quiet grey vs. yellow-tint accent chips. */
.badge--audience-all {
  color: var(--color-text-muted);
  border-color: var(--color-border);
  background: transparent;
}

.badge--audience-limited,
.badge--lang-done {
  color: var(--planet-secondary);
  border-color: color-mix(in srgb, var(--planet-secondary) 30%, transparent);
  background: color-mix(in srgb, var(--planet-secondary) 10%, transparent);
}

.badge--lang-missing {
  color: rgba(245, 245, 245, 0.4);
  border-color: var(--color-border);
  background: transparent;
}

/* Default (unskinned) fallback — same rim language as dark light_dark skin. */
.widget-card:not([class*="widget-card--skin-"]) {
  --widget-border: color-mix(in srgb, #FFFFFF 14%, transparent);
  --widget-border-hover: var(--planet-secondary);
  background: var(--planet-card);
  border-color: var(--widget-border);
}

/* Tools stay on light frost (set in application.css) — don't darken them
   here or they vanish on dark skins / dark chrome. Resize handle too. */
.widget-card__resize {
  background: rgba(255, 255, 255, 0.82);
  color: #0A0A0A;
}

.widget-card__resize:hover {
  background: #FFFFFF;
}

/* --- Header / nav -----------------------------------------------------------
   Planet pins several chrome pieces to --planet-black / transparent. Those
   stay black on a dark page — remap them onto the dark tokens here. Accent
   widgets keep their own literals, so --planet-black itself is left alone. */

/* Scoped to the hamburger breakpoint: the is-open class survives a resize
   to desktop, and there the bar must stay transparent on the night sky. */
@media (max-width: 1023.98px) {
  .site-header__nav.is-open,
  .site-header:has(.site-header__nav.is-open) {
    background: var(--color-bg);
  }
}

.site-header__brand {
  color: #FFFFFF;
}

.site-header__brand:hover {
  color: var(--planet-secondary);
  opacity: 1;
}

.site-header__link,
.site-header__menu-toggle,
.theme-toggle {
  color: var(--color-text);
}

/* Blue hover reads poorly on the dark chrome — white/light links flip to
   the CI yellow instead. */
.site-header__link:hover,
.admin-nav__link:hover,
.pagination__link:hover,
.gains__action:hover {
  color: var(--planet-secondary);
}

/* Same for active/marker accents that are Planet blue on light chrome.
   Blue FILLS (primary buttons, active tool pills) and accents on light
   surfaces (widget tools frost, trix toolbar, white chips) stay blue. */
.admin-nav__link.is-active,
.locale-tabs__tab.is-active,
.w-tabs__tab.is-active {
  color: var(--planet-secondary);
  border-bottom-color: var(--planet-secondary);
}

.card-list__master-star,
.popover-toggle:hover,
.audience-fields__members-toggle:hover {
  color: var(--planet-secondary);
}


@media (max-width: 1023.98px) {
  .site-header__nav .site-header__link.is-active {
    color: var(--planet-secondary);
  }
}

.dashboard-canvas__resize:hover {
  background: var(--planet-secondary);
}

.gains__reaction:hover {
  border-color: var(--planet-secondary);
}

.gains__reaction--active {
  border-color: var(--planet-secondary);
  background: color-mix(in srgb, var(--planet-secondary) 10%, transparent);
}

/* Focus accents: the blue field underline flips to yellow on dark fills.
   (The theme-fixed yellow/blue skins re-pin blue further down.) */
.form__field input:focus:not([type="checkbox"]),
.form__field textarea:focus,
.form__field select:focus,
.ai-panel textarea:focus,
.gains__composer textarea:focus,
.audience-fields__filter:focus,
trix-editor:focus {
  box-shadow: inset 0 -2px 0 var(--planet-secondary);
}

.site-header__identity strong {
  color: var(--color-text);
}

.site-header__identity span {
  color: var(--color-text-muted);
}

.locale-switcher select {
  color: var(--color-text);
  border-bottom-color: var(--color-text);
  background: transparent;
}

.locale-switcher select:focus {
  border-bottom-color: var(--planet-secondary);
}

.locale-switcher select option {
  background: var(--color-surface);
  color: var(--color-text);
}

/* Sign-out (and every other ghost pill): Planet forces black border/text. */
.btn--ghost {
  color: var(--color-text);
  border-color: var(--color-text);
}

.btn--ghost:hover {
  background: var(--color-text);
  color: var(--color-bg);
  text-decoration: none;
}

/* On the brighter dark-mode danger red, white text washes out — ink on it. */
.btn--ghost.btn--danger:hover {
  color: #0A0A0A;
}

/* Sync actions: the blue accent outline flips to CI yellow. */
.btn--ghost.btn--sync {
  color: var(--planet-secondary);
  border-color: currentColor;
}

.btn--ghost.btn--sync:hover {
  background: var(--planet-secondary);
  color: #0A0A0A;
}

/* Checked checkboxes follow the yellow accent language. */
input[type="checkbox"] {
  accent-color: var(--planet-secondary);
}

/* Primary buttons: CI yellow with ink text on the dark chrome (the
   theme-fixed yellow/blue widget skins re-pin their own primaries with
   higher-specificity rules and are unaffected). */
.btn--primary {
  background: var(--planet-secondary);
  border-color: var(--planet-secondary);
  color: #0A0A0A;
}

.btn--primary:hover {
  background: #F5F5F5;
  color: #0A0A0A;
}

/* White label on blue must stay literal white (not the remapped card token). */
.avatar:not(.avatar--photo) {
  color: #FFFFFF;
}

.avatar--photo {
  background-color: var(--planet-tint);
}

/* Yellow / blue widgets are theme-fixed — undo dark chrome for their
   controls so they match light mode pixel-for-pixel. */
.widget-card--skin-yellow_blue,
.widget-card--skin-blue_yellow {
  /* Their fields are pinned white — native control parts stay light-scheme. */
  color-scheme: light;
  --planet-tint: #FFFFFF;
  --planet-input-fill: #FFFFFF;
  --planet-neutral: #F5F5F5;
  --planet-white: #ffffff;
  --color-surface: #ffffff;
  --color-border: #FFFFFF;
  --color-primary: var(--widget-accent);
  --color-primary-contrast: #ffffff;
  /* Their danger accents sit on white surfaces — keep the light-mode red. */
  --color-danger: #b42318;
}

.widget-card--skin-blue_yellow {
  --color-text: #FFFFFF;
  --color-text-muted: rgba(255, 255, 255, 0.55);
}

.widget-card--skin-yellow_blue {
  --color-text: #000000;
  --color-text-muted: rgba(0, 0, 0, 0.5);
}

.widget-card--skin-yellow_blue .btn,
.widget-card--skin-blue_yellow .btn,
.widget-card--skin-blue_yellow .btn--primary,
.widget-card--skin-yellow_blue .btn--ghost,
.widget-card--skin-blue_yellow .btn--ghost,
.widget-card--skin-yellow_blue input,
.widget-card--skin-blue_yellow input,
.widget-card--skin-yellow_blue select,
.widget-card--skin-blue_yellow select,
.widget-card--skin-yellow_blue textarea,
.widget-card--skin-blue_yellow textarea,
.widget-card--skin-yellow_blue .form-input,
.widget-card--skin-blue_yellow .form-input {
  color: #000000;
  background: #FFFFFF;
  border-color: #FFFFFF;
}

.widget-card--skin-yellow_blue .btn--primary {
  color: #FFFFFF;
  background: var(--planet-primary);
  border-color: var(--planet-primary);
}

.widget-card--skin-yellow_blue .btn:hover,
.widget-card--skin-blue_yellow .btn:hover,
.widget-card--skin-blue_yellow .btn--primary:hover,
.widget-card--skin-yellow_blue .btn--ghost:hover,
.widget-card--skin-blue_yellow .btn--ghost:hover {
  background: #F5F5F5;
  border-color: #F5F5F5;
  color: #000000;
  text-decoration: none;
}

.widget-card--skin-yellow_blue .btn--primary:hover {
  background: #000000;
  border-color: #000000;
  color: #FFFFFF;
  text-decoration: none;
}

.widget-card--skin-yellow_blue .text-muted,
.widget-card--skin-blue_yellow .text-muted {
  color: var(--color-text-muted);
}

/* Dark chrome's light placeholders would vanish on their white fields. */
.widget-card--skin-yellow_blue input::placeholder,
.widget-card--skin-yellow_blue textarea::placeholder,
.widget-card--skin-blue_yellow input::placeholder,
.widget-card--skin-blue_yellow textarea::placeholder {
  color: rgba(0, 0, 0, 0.5);
}

/* …and their focus underline keeps the light-mode blue on white fields. */
.widget-card--skin-yellow_blue input:focus,
.widget-card--skin-yellow_blue textarea:focus,
.widget-card--skin-yellow_blue select:focus,
.widget-card--skin-blue_yellow input:focus,
.widget-card--skin-blue_yellow textarea:focus,
.widget-card--skin-blue_yellow select:focus {
  box-shadow: inset 0 -2px 0 var(--planet-primary);
}

.widget-card--skin-yellow_blue .gains__reaction,
.widget-card--skin-blue_yellow .gains__reaction {
  background: #FFFFFF;
  border-color: transparent;
  color: #000000;
}

.widget-card--skin-yellow_blue .gains__reaction span,
.widget-card--skin-blue_yellow .gains__reaction span {
  color: inherit;
}

.widget-card--skin-yellow_blue .gains__reaction:hover,
.widget-card--skin-blue_yellow .gains__reaction:hover {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.25);
}

.widget-card--skin-yellow_blue .gains__reaction--active,
.widget-card--skin-blue_yellow .gains__reaction--active {
  background: #FFFFFF;
  border-color: #000000;
  color: #000000;
}

/* Birthday "today" pill: dark type on CI yellow (light mode keeps white-on-blue
   on yellow cards; blue accent skins already force --planet-black in planet.css). */
.widget-card--skin-yellow_blue .w-list__time--highlight,
.widget-card--skin-yellow_blue .w-list__time--highlight span {
  color: var(--planet-black);
  background: var(--planet-secondary);
}