/* geometric.css — isolated controls for the FLOW form module.
   The classes are intentionally geo-* to avoid the old shared layout/material
   styles from gradient/brand sheets breaking this panel. */

.panel.mode-geometric .panel-body .section {
  margin-top: 16px !important;
}
.panel.mode-geometric .panel-body .section:first-child {
  margin-top: 0 !important;
}

.panel.mode-geometric .section-label .value {
  font-variant-numeric: tabular-nums !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  opacity: 0.68 !important;
}

/* Render = material mode. Exclusive: no shared material-toggle class. */
.panel.mode-geometric .geo-render-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
}
.panel.mode-geometric .geo-render-chip {
  appearance: none !important;
  min-width: 0 !important;
  min-height: 34px !important;
  padding: 0 8px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  background: rgba(255,255,255,0.055) !important;
  color: rgba(245,245,245,0.70) !important;
  font: inherit !important;
  font-size: 10px !important;
  font-weight: 650 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
.panel.mode-geometric .geo-render-chip:hover {
  background: rgba(255,255,255,0.105) !important;
  border-color: rgba(255,255,255,0.28) !important;
  color: rgba(255,255,255,0.92) !important;
}
.panel.mode-geometric .geo-render-chip.active {
  background: rgba(255,255,255,0.88) !important;
  border-color: rgba(255,255,255,0.92) !important;
  color: #070707 !important;
  box-shadow: none !important;
}

/* Shape selector. Kept separate from old .layout-grid/.layout-card rules. */
.panel.mode-geometric .geo-shape-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 7px !important;
  width: 100% !important;
}
.panel.mode-geometric .geo-shape-card {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  min-height: 0 !important;
  padding: 0 !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.045) !important;
  overflow: hidden !important;
  cursor: pointer !important;
  opacity: 0.82 !important;
  box-shadow: none !important;
  transform: none !important;
}
.panel.mode-geometric .geo-shape-card svg {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
}
.panel.mode-geometric .geo-shape-card:hover {
  opacity: 1 !important;
  border-color: rgba(255,255,255,0.30) !important;
}
.panel.mode-geometric .geo-shape-card:active {
  transform: scale(0.97) !important;
}
.panel.mode-geometric .geo-shape-card.active {
  opacity: 1 !important;
  border-color: rgba(255,255,255,0.86) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.84) !important;
}

.panel.mode-geometric .slider {
  width: 100% !important;
  margin: 6px 0 0 !important;
}
.panel.mode-geometric .slider:focus {
  outline: none !important;
}
.panel.mode-geometric .slider:focus-visible {
  outline: 2px solid rgba(255,255,255,0.80) !important;
  outline-offset: 4px !important;
}

.panel.mode-geometric .swatches {
  gap: 10px !important;
}
.panel.mode-geometric .help.compact-help {
  margin-top: 16px !important;
  font-size: 10.5px !important;
  line-height: 1.6 !important;
  letter-spacing: 0.02em !important;
  opacity: 0.55 !important;
}

/* Narrow desktop panels still stay clean. */
@media (max-width: 980px) {
  .panel.mode-geometric .geo-shape-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}


/* Small direct actions: fixes hidden interaction states without adding more panel clutter. */
.panel.mode-geometric .geo-action-section {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
}
.panel.mode-geometric .geo-action-btn {
  appearance: none !important;
  min-height: 32px !important;
  padding: 0 8px !important;
  border-radius: 9px !important;
  border: 1px solid rgba(255,255,255,0.13) !important;
  background: rgba(255,255,255,0.052) !important;
  color: rgba(245,245,245,0.72) !important;
  font: inherit !important;
  font-size: 9.5px !important;
  font-weight: 650 !important;
  letter-spacing: 0.075em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  box-shadow: none !important;
}
.panel.mode-geometric .geo-action-btn:hover,
.panel.mode-geometric .geo-action-btn.active {
  background: rgba(255,255,255,0.88) !important;
  border-color: rgba(255,255,255,0.92) !important;
  color: #070707 !important;
}
.panel.mode-geometric .geo-note {
  margin-top: 10px !important;
  padding: 8px 9px !important;
  border-radius: 9px !important;
  background: rgba(255,255,255,0.045) !important;
  color: rgba(245,245,245,0.58) !important;
  font-size: 10px !important;
  line-height: 1.45 !important;
  letter-spacing: 0.02em !important;
}

.panel.mode-geometric .geo-action-section-single {
  grid-template-columns: 1fr !important;
  margin-top: 7px !important;
}


/* FLOW filter/blend controls */
.panel.mode-geometric .geo-filter-section,
.panel.mode-geometric .geo-blend-section {
  display: grid !important;
  gap: 7px !important;
}
.panel.mode-geometric .geo-filter-section {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.panel.mode-geometric .geo-blend-section .geo-render-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}