/* ════════════════════════════════════════════════════════════════
   PROCGENESIS — generator page skin (2026)
   Loaded AFTER each generator's own stylesheet. Recolors the 2017
   pages to the "deep space nova" shell style — colors, fonts, and
   surfaces only. No layout, sizing, or positioning rules: generator
   functionality and geometry are untouched. Remove the single
   <link> tag in a generator page to restore its old look.
   ════════════════════════════════════════════════════════════════ */

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* ── deep-space base; nova_bg.js paints the generative nebula above it ── */
html {
  background: #04060d;
  background-image:
    radial-gradient(1100px 700px at 12% -8%, rgba(122, 100, 224, 0.10), transparent 60%),
    radial-gradient(1400px 900px at 50% 115%, rgba(122, 100, 224, 0.07), transparent 60%);
  background-attachment: fixed;
}

body {
  background-color: transparent;
  color: #d4dae6;
  /* note: body font deliberately NOT changed — several generators position
     controls with absolute offsets tuned to the original font metrics */
}

/* no sideways scrollbars from the 2017-era 101vw banner trick.
   html ONLY: setting body too makes body's overflow apply to its own
   (often 0×0) box instead of propagating, clipping the whole page —
   that's what blanked the Height Map Viewer. */
html { overflow-x: hidden; }

/* dark scrollbars where scrolling is genuinely needed */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #070b16; }
::-webkit-scrollbar-thumb { background: #1c2540; border-radius: 5px; border: 2px solid #070b16; }
::-webkit-scrollbar-thumb:hover { background: #2a3a66; }

/* ── banner + navbar ── */
#Banner { background: none; }

#Navbar {
  background: rgba(4, 6, 13, 0.92);
  border-bottom: 1px solid rgba(212, 218, 230, 0.14);
}
#Navbar li a {
  color: #99a2b6;
  font-family: "IBM Plex Mono", Consolas, monospace;
  font-size: 0.8em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.25s, background-color 0.25s;
}
#Navbar li a:hover {
  background-color: rgba(79, 218, 213, 0.10);
  border-bottom: 1px solid #4fdad5;
  color: #eef1f7;
}

/* ── buttons (all generator variants) ── */
.dispButtons, .displayButtons, .genButton, .controlButtons, .resetButtons,
div.control button, #diagramButtons button, #genCustom, #plus, #minus, #submit_button {
  background-color: #0d1426;
  color: #d4dae6;
  border: 1px solid rgba(212, 218, 230, 0.22);
  font-family: "IBM Plex Mono", Consolas, monospace;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
.dispButtons:hover, .displayButtons:hover, .genButton:hover, .resetButtons:hover,
div.control button:hover, #diagramButtons button:hover, #genCustom:hover,
#plus:hover, #minus:hover, #submit_button:hover {
  background-color: rgba(79, 218, 213, 0.16);
  border-color: rgba(79, 218, 213, 0.5);
  color: #eef1f7;
}

/* collapsible section headers (WorldGen) — !important beats one inline style */
.folderHeadings {
  background-color: #221d44 !important;
  color: #c8b5ff;
  border: 1px solid rgba(167, 139, 250, 0.35);
  font-family: "IBM Plex Mono", Consolas, monospace;
  letter-spacing: 0.06em;
}

/* ── tooltips (geometry untouched — colors only) ── */
.tooltiptext, .tooltiptext2, .tooltiptext3, .tooltiptext4, .tooltiptext5 {
  background-color: #0c1222;
  border: 1px solid rgba(167, 139, 250, 0.30);
  color: #c9d1e3;
}

/* ── surfaces ── */
#MainContainer {
  background: rgba(7, 11, 22, 0.55);
  border-left-color: rgba(212, 218, 230, 0.12);
  border-right-color: rgba(212, 218, 230, 0.12);
}
#generator_title {
  background: rgba(4, 6, 13, 0.72);
  border-bottom-color: rgba(212, 218, 230, 0.14);
}
.controlset { background-color: rgba(4, 6, 13, 0.85); }

#wait_message { color: #8ff3ec; }
.links, a.links { color: #4fdad5; }

/* ── range sliders ── */
/* native (unstyled) sliders, e.g. Height Map Viewer */
input[type=range] { accent-color: #4fdad5; }
/* keep Reset buttons on the row baseline (SymbolGen) — scoped to just the
   button class; aligning all inputs globally reflowed HMV's dense rows */
.resetButtons { vertical-align: middle; }
/* SymbolGen slider rows: Firefox gives range inputs a different intrinsic
   box than Chrome, so baseline alignment left the sliders floating above
   their number boxes. Scoped to these six controls only (see warning above). */
#curveChance, #circleChance, #minAngle,
#curveChanceText, #circleChanceText, #minAngleText { vertical-align: middle; }
/* appearance-none sliders (WorldGen) keep their custom track/thumb */
input[type=range]::-webkit-slider-runnable-track {
  background: #0a0f1d;
  border: 0.2px solid rgba(212, 218, 230, 0.28);
}
input[type=range]::-webkit-slider-thumb {
  background: #4fdad5;
  border: 1px solid #2fa9a3;
}
input[type=range]:focus::-webkit-slider-runnable-track { background: #0a0f1d; }
input[type=range]::-moz-range-track {
  background: #0a0f1d;
  border: 0.2px solid rgba(212, 218, 230, 0.28);
  /* the 2017 css gives tracks fractional widths (50-75%). Chrome ignores
     that on its track pseudo-element but Firefox honors it, so the thumb
     (which always travels the full input) floated past the short track. */
  width: 100%;
}
input[type=range]::-moz-range-thumb {
  background: #4fdad5;
  border: 1px solid #2fa9a3;
}

/* WorldGen's button panel is z-index:-1 in the 2017 CSS; it only received
   clicks because nothing painted above it. The skin's body changes made the
   body hit-testable, so lift the panel (tooltips are its children and keep
   their internal layering). */
#DisplayButtons { z-index: 2; }

/* ── page-specific exceptions ── */
/* LanguageGen custom-language modal stays a light panel: keep its text dark */
#customLangOptions { color: #16181d; }