/* —————————————————————————————————————————————————————————
   GLOBAL VARIABLES
————————————————————————————————————————————————————————— */
:root{
  /* panel sizing */
  --panel-width: 300px;
  --panel-pad: 10px;
  

  /* group cards (defaults; individual groups can override) */
  --group-bg: #494B52;
  --group-title-bg: #494B52;
  --group-title-fg: #f2f2f2;
  --group-radius: 4px;
  --group-pad: 10px;
  --group-gap: 0px;

  /* label/slider spacing */
  --label-gap: 2px;

  /* p5 / noUi shared slider vars */
  --slider-track-thickness: 8px;
  --slider-track-radius: 999px;
  --slider-track: #3B3B3B;
  --slider-fill:  #FFC726;
  --slider-focus: #FADC00;
  --slider-stroke: #858585;
  --slider-stroke-width: 1px;

  /* noUi arrow-handle geometry */
  --arrow-h: 14px;
  --arrow-w: 7px;
  --arrow-gap: 14px;
  --arrow-stroke: 0px;
  --arrow-hit: 26px;
  --slider-bottom-clear: calc(var(--arrow-h) + var(--arrow-gap) + 14px);

  /* noUi arrow colors */
  --arrow-fill:    #FFC726;
  --arrow-outline: #FFC726;

  /* tiny alignment nudge for handles (positive moves arrow RIGHT) */
  --handle-nudge-x: -4px;
}

/* —————————————————————————————————————————————————————————
   PAGE + CANVAS
————————————————————————————————————————————————————————— */
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: #1A1B1F;
  position: relative;
}

.p5Canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #3D3D3D;
}

/* —————————————————————————————————————————————————————————
   PANEL CONTAINER + TOGGLE
   (scrollable panel fix + close animation preserved)
————————————————————————————————————————————————————————— */
#panel-container {
  position: fixed;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: stretch;             /* panel + tab line up */
  max-height: calc(100vh - 32px);   /* keep on-screen */
  z-index: 1000;
  transition: right 0.3s ease-in-out;

}
#panel-container.closed {
  /* slide the whole thing off-screen but leave the tab peeking */
  right: calc(-1 * var(--panel-width) + 0px);
}

/* the grip tab */
#panel-container .ui-panel-toggle {
  position: absolute;
  top: 50%;
  left: -34px;
  transform: translateY(-50%);
  width: 34px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  background: #3E3F47;
  color: #FAFAFA;
  border-radius: 20px 0 0 20px;
  padding-left: 2px;
  cursor: pointer;
  user-select: none;
  font-size: 1.2rem;
  z-index: 11;
}

/* the scrollable panel itself */
.ui-panel {
  position: relative;
  width: var(--panel-width);
  max-height: 100%;
  overflow-y: auto;                 /* <-- scrolling lives here */
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  padding: var(--panel-pad);
  background: #3E3F47;
  box-shadow: 0 0 8px rgba(0,0,0,.1);
  border-top: 5px solid #5C5C5C;
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 14px;
}

/* quick helper spacing inside panel */
.ui-control { margin: 8px 0; }

/* —————————————————————————————————————————————————————————
   GROUP CARDS
————————————————————————————————————————————————————————— */
.ui-group{
  background: var(--group-bg);
  border-radius: var(--group-radius);
  padding: var(--group-pad);
  margin: 12px 0;
}
.ui-group-title{
  background: var(--group-title-bg);
  color: var(--group-title-fg);
  font-weight: 600;
  padding: 8px 10px;
  border-radius: max(0px, calc(var(--group-radius) - 4px));
  margin-bottom: var(--group-gap);
}

/* full-bleed variant (uses panel pad for bleed) */
.ui-group--full {
  margin-left: calc(-1 * var(--panel-pad));
  margin-right: calc(-1 * var(--panel-pad));
  border-radius: 0;
}
.ui-group--full .ui-group-title { border-radius: 0; }

/* tidy spacing of common children */
.ui-group .ui-control,
.ui-group .ui-button,
.ui-group .file-row{ margin-top: 8px;}
.ui-group .file-row .ui-button{ margin-right: 8px; }

/* Extra space between the Save row and the Scale slider */
.ui-group .file-row + .ui-control { margin-top: 16px; }

/* —————————————————————————————————————————————————————————
   COLLAPSIBLE GROUPS
   (JS sets max-height inline; we don’t fix it in CSS)
————————————————————————————————————————————————————————— */
.ui-group.collapsible .collapsible-body ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.ui-group.collapsible .ui-group-title{
  display: flex;
  align-items: center;
  font-weight: 500;
  gap: 2px;
  cursor: pointer;
  user-select: none;
}
.ui-group.collapsible .ui-group-title .twisty{
  width: 1.2em;
  text-align: center;
  font-weight: 800;
  opacity: 0.9;
  flex: 0 0 auto;
}
.ui-group.collapsible .ui-group-title::before,
.ui-group.collapsible.open .ui-group-title::before{
  content: none !important;
}

/* sliding body (heights are set by JS for smooth animation) */
.ui-group .collapsible-body{
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height .25s ease, opacity .2s ease;
  color: #B1B1B1;
  font-size: 0.875rem;
  line-height: 1.85;
}
.ui-group.collapsible.open .collapsible-body{
  opacity: 1;
  /* max-height is set inline by JS */
  overflow: visible; /* allow native dropdowns to escape */
}

/* —————————————————————————————————————————————————————————
   UI ELEMENT STYLES
————————————————————————————————————————————————————————— */
/* labels */
.ui-panel .ui-label {
  color: #B1B1B1;
  margin: 10px 0;
  font-size: 0.8rem;
}

.ui-group--colors { padding-top: calc(var(--group-pad) + 0px); }
.ui-group--colors .color-swatches { margin-top: 14px; }

/* p5 sliders */
.ui-panel .ui-slider {
  width: 100% !important;
  margin-bottom: 12px !important;
}
.ui-label + .ui-slider{ margin-top: var(--label-gap); }

/* selects + buttons */
.ui-panel select {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 8px 0;
}
.ui-panel .ui-button {
  display: inline-block;
  padding: 0.5em 1em;
  font-size: 0.9rem;
  font-weight: 500;
  text-align: center;
  color: #fff;
  width:100%;
  background: #282D30;
  border: none;
  border-radius: 1.75rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
  margin: 10px 10px 10px 0;
}
.ui-panel .ui-button:hover,
.ui-panel .ui-button:focus {
  transform: translateY(-1px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
  background: #000;
}
.ui-panel .ui-button:active {
  transform: translateY(0);
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);
  background: #808080;
}

/* toggles */
.ui-toggle { width: 100%; }
.ui-toggle.on { background: #111; }
.ui-toggle.columns { background: #111; }

/* OFF-state color for Distortion / Margins / Effects toggles */
.ui-group--distortion .ui-button.ui-toggle:not(.on),
.ui-group--margins   .ui-button.ui-toggle:not(.on),
.ui-group--grain     .ui-button.ui-toggle:not(.on) {
  background: #FFC726;
  border-color: #FFC726;
  color: #111827;
}

/* file button row */
.ui-panel .file-row {
  display: block;
  gap: 0px;
  margin: 0px;
  width: 100%;
  padding-bottom: 10px;
}
.ui-panel .file-row .ui-button {
  flex: 1;
  margin: 0;
  width: 100%;
  margin-bottom: 12px;
}

/* color swatches */
.ui-panel .color-swatches {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.ui-panel .ui-swatch {
  width: 100%;
  aspect-ratio: 1;
  border: none;
  outline: none;
  padding: 0;
  background: none;
  appearance: none;
  cursor: pointer;
}
.ui-panel .ui-swatch::-webkit-color-swatch-wrapper { padding: 0; }
.ui-panel .ui-swatch::-webkit-color-swatch          { border: none; }

/* grain row */
.ui-panel .grain-row {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 8px 0;
}
.ui-panel .grain-row .ui-label {
  margin: 0;
  line-height: 1.6;
}

/* base inputs */
.ui-panel input[type="range"] { width: 100%; }
.ui-panel input[type="checkbox"] { margin-right: 6px; }

/* hide real file inputs */
.ui-panel input[type="file"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* —————————————————————————————————————————————————————————
   noUiSlider — Arrow-handle theme
————————————————————————————————————————————————————————— */
.ui-label + .noUi-target.noUi-horizontal{ margin-top: var(--label-gap); }

/* track wrapper (for stroke overlay) */
.noUi-connects{
  position: relative;
  background: var(--slider-track);
  border-radius: var(--slider-track-radius);
}
/* crisp rounded stroke around track */
.noUi-connects::after{
  content: "";
  position: absolute;
  inset: 0;
  border: var(--slider-stroke-width) solid var(--slider-stroke);
  border-radius: var(--slider-track-radius);
  pointer-events: none;
}

/* bottom spacing so arrows don’t collide with next control */
.noUi-target.noUi-horizontal{ margin-bottom: var(--slider-bottom-clear); }

/* base target */
.noUi-target{
  border: none;
  box-shadow: none;
  background: transparent;
  overflow: visible;
  position: relative;
}

/* fill segment */
.noUi-connect{ background: var(--slider-fill); }

/* dimensions */
.noUi-horizontal{ height: var(--slider-track-thickness); }
.noUi-vertical{   width:  var(--slider-track-thickness); }

/* strip default handle visuals */
.noUi-handle,
.noUi-handle::before,
.noUi-handle::after{
  background: none;
  border: none;
  box-shadow: none;
}

/* handle hit area */
.noUi-handle{
  width: var(--arrow-hit);
  height: var(--arrow-hit);
  cursor: grab;
  z-index: 10;
}

/* position handles under the track; center via right:-half */
.noUi-horizontal .noUi-handle{
  position: absolute;
  top: calc(var(--slider-track-thickness) + var(--arrow-gap));
  left: auto;
  right: calc(-0.5 * var(--arrow-hit) + var(--handle-nudge-x));
}
.noUi-handle:active{ cursor: grabbing; }

/* triangle (outline + fill) */
.noUi-horizontal .noUi-handle::before,
.noUi-horizontal .noUi-handle::after{
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  pointer-events: none;
}

/* outline */
.noUi-horizontal .noUi-handle::before{
  top: calc(-1 * var(--arrow-h));
  border-left:  calc(var(--arrow-w) + var(--arrow-stroke)) solid transparent;
  border-right: calc(var(--arrow-w) + var(--arrow-stroke)) solid transparent;
  border-bottom: calc(var(--arrow-h) + var(--arrow-stroke)) solid var(--arrow-outline);
}

/* fill */
.noUi-horizontal .noUi-handle::after{
  top: calc(-1 * var(--arrow-h));
  border-left:  var(--arrow-w) solid transparent;
  border-right: var(--arrow-w) solid transparent;
  border-bottom: var(--arrow-h) solid var(--arrow-fill);
}

/* generous touch area */
.noUi-touch-area{
  width: var(--arrow-hit);
  height: var(--arrow-hit);
  margin: calc(var(--arrow-hit) / -4);
}

/* focus/active glow (kept subtle for handles) */
.noUi-handle:focus-visible{ outline: none; filter: drop-shadow(0 0 0.15rem var(--slider-focus)); }
.noUi-active .noUi-handle{ filter: drop-shadow(0 0 0.2rem var(--slider-focus)); }

/* disabled */
.noUi-disabled{ opacity: .45; }

/* —————————————————————————————————————————————————————————
   LAYOUT GROUP — tweaks + “no glow, no clip” for selects
————————————————————————————————————————————————————————— */
.ui-group.ui-group--layout .ui-control{ margin: 4px 0 !important; }
.ui-group.ui-group--layout .ui-label{ margin: 2px 0 !important; }
.ui-group.ui-group--layout .ui-label + .ui-slider{ margin-top: 2px !important; }

.ui-group.ui-group--layout select.ui-button,
.ui-group.ui-group--layout .ui-button.ui-toggle{
  margin: 8px 0 !important;
}

/* shrink big bottom clearance for the Layout range */
#rowHeightRange.noUi-target.noUi-horizontal{
  margin-bottom: 30px !important;
}

/* 1) Kill the glow on the Height Gradient Control + Method selects */
.ui-group--layout select.ui-button {
  outline: none;
  box-shadow: none;
}
.ui-group--layout select.ui-button:focus,
.ui-group--layout select.ui-button:focus-visible {
  outline: none;
  box-shadow: none;
}

/* 2) Let native menus escape the card when open (paired with .open overflow:visible above) */
.ui-group--layout .ui-control { position: relative; }
.ui-group--layout .ui-control:focus-within { z-index: 1000; }

/* —————————————————————————————————————————————————————————
   RESPONSIVE
————————————————————————————————————————————————————————— */
@media (max-width: 600px) {
  :root { --panel-width: 80vw; }
}

/* Small helper note under file buttons */
.ui-subnote {
  font-size: 0.8rem;
  font-style: italic;
  color: #B1B1B1;
  opacity: 0.9;
  margin: 4px var(--ctrl-hgap) 0 var(--ctrl-hgap);
  line-height: 1.4;
  display: block;
}

/* Extra breathing room between "Export" title and buttons (only when open) */
.ui-group--export.collapsible.open .collapsible-body {
  padding-top: 12px; /* tweak to taste: 6–12px */
}