/* Cropsy simulation chrome — paired with /sim-theme.mjs (html[data-theme="light"]). */
/* Light mode: header, mobile menu, and right-hand control panel. Canvas shell + transport bar stay dark (no wash over the 3D view). */
html {
  color-scheme: dark;
}
html[data-theme="light"] {
  color-scheme: light;
}
html[data-theme="light"],
html[data-theme="light"] body {
  background: #eef3ef;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

html[data-theme="light"] .app-shell {
  color: #0f1a16;
}
html[data-theme="light"] .app-header {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: rgba(18, 100, 80, 0.22);
}
html[data-theme="light"] .brand-mark {
  color: #0d6b56;
}
html[data-theme="light"] .brand-title {
  color: #0f1f18;
}
html[data-theme="light"] .header-nav a {
  color: #0d6b56;
}
html[data-theme="light"] .header-nav a[aria-current="page"] {
  color: #0a1620;
  text-decoration-color: rgba(200, 50, 120, 0.55);
}
html[data-theme="light"] .header-actions button {
  border-color: rgba(200, 60, 120, 0.4);
  background: rgba(18, 120, 96, 0.12);
  color: #0d1f18;
}
html[data-theme="light"] .header-actions button[aria-pressed="true"] {
  background: rgba(200, 60, 120, 0.22);
  border-color: rgba(180, 40, 100, 0.55);
  color: #0a1210;
}
html[data-theme="light"] .sim-nav-trigger {
  border-color: rgba(18, 100, 80, 0.45);
  background: rgba(18, 120, 96, 0.14);
  color: #0a5c4a;
}
html[data-theme="light"] .sim-nav-layer__dialog {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(18, 100, 80, 0.35);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12);
}
html[data-theme="light"] .sim-nav-layer__title {
  color: #0d6b56;
}
html[data-theme="light"] .sim-nav-layer__close {
  background: rgba(200, 60, 120, 0.12);
  color: #0f1a16;
}
html[data-theme="light"] .sim-nav-layer__links a {
  color: #0d6b56;
  background: rgba(18, 120, 96, 0.08);
  border-color: rgba(18, 100, 80, 0.35);
}
html[data-theme="light"] .sim-nav-layer__links a[aria-current="page"] {
  background: rgba(200, 60, 120, 0.18);
  border-color: rgba(180, 40, 100, 0.45);
  color: #0a1210;
}

/* Right-hand settings panel (all sim pages) */
html[data-theme="light"] .control-panel {
  background: rgba(255, 255, 255, 0.92);
  border-left-color: rgba(18, 100, 80, 0.2);
  box-shadow: -8px 0 28px rgba(0, 0, 0, 0.08);
}
html[data-theme="light"] .panel-collapse-edge {
  background: rgba(255, 255, 255, 0.96);
  color: #0f1a16;
  border-color: rgba(200, 60, 120, 0.35);
}

@media (min-width: 1024px) {
  html[data-theme="light"] .panel-collapse-edge {
    background: rgba(252, 252, 252, 0.98);
    color: #0d1210;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-right: none;
    box-shadow: none;
  }
  html[data-theme="light"] .panel-collapse-edge:hover {
    background: #f4f8f6;
    border-color: rgba(18, 100, 80, 0.28);
  }
}
html[data-theme="light"] .panel-scroll {
  scrollbar-color: rgba(200, 60, 120, 0.4) rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .acc {
  border-color: rgba(18, 100, 80, 0.22);
  background: rgba(0, 0, 0, 0.03);
}
html[data-theme="light"] .acc summary {
  color: #3d5a50;
}
html[data-theme="light"] .acc .acc-body {
  border-top-color: rgba(0, 0, 0, 0.06);
}
html[data-theme="light"] .panel-lede,
html[data-theme="light"] .panel-lede-short {
  color: rgba(15, 26, 22, 0.82);
}
html[data-theme="light"] .panel-title {
  color: #3d5a50;
}
html[data-theme="light"] .row label {
  color: #4a5c54;
}
html[data-theme="light"] .row .val {
  color: #2d4a40;
}
html[data-theme="light"] .presets button,
html[data-theme="light"] .chladni-presets button {
  border-color: rgba(200, 60, 120, 0.35);
  background: rgba(18, 120, 96, 0.1);
  color: #0f1f18;
}
html[data-theme="light"] .presets button.active {
  background: rgba(200, 60, 120, 0.22);
  border-color: rgba(180, 40, 100, 0.5);
  color: #0a1210;
}
html[data-theme="light"] .apply-row button {
  border-color: rgba(18, 100, 80, 0.45);
  background: rgba(18, 120, 96, 0.22);
  color: #0f1f18;
}
html[data-theme="light"] .apply-hint {
  color: rgba(15, 26, 22, 0.55);
}
html[data-theme="light"] select#density {
  background: #f4faf7;
  color: #0f1f18;
  border-color: rgba(200, 60, 120, 0.35);
}
html[data-theme="light"] .badge {
  background: rgba(25, 118, 210, 0.12);
  color: #1565c0;
}
html[data-theme="light"] .doc-link a {
  color: #0d47a1;
}
html[data-theme="light"] .focus-mode-banner {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(200, 60, 120, 0.4);
  color: #0f1a16;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Field preview — readout block inside panel */
html[data-theme="light"] .readout-hz small {
  color: #5c6b62;
}
html[data-theme="light"] .readout-mode {
  color: #4a5c54;
}
html[data-theme="light"] .readout-stats {
  color: rgba(15, 26, 22, 0.82);
}
html[data-theme="light"] .readout-stats .lbl {
  color: #5c6b62;
}
html[data-theme="light"] .readout-stats .val {
  color: #0d6b56;
}

/* Range inputs: WebKit/Safari often ignores accent-color on sliders — explicit track/thumb + --range-fill (set in sim-theme.mjs). */
.row input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  min-width: 120px;
  max-width: 100%;
  height: 28px;
  background: transparent;
  accent-color: #E91E63;
  --range-fill: 50%;
}

.row input[type="range"]:focus {
  outline: none;
}

.row input[type="range"]:focus-visible {
  outline: 2px solid rgba(233, 30, 99, 0.55);
  outline-offset: 2px;
  border-radius: 6px;
}

.row input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #E91E63 0%,
    #E91E63 var(--range-fill, 50%),
    rgba(255, 255, 255, 0.16) var(--range-fill, 50%),
    rgba(255, 255, 255, 0.16) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -5px;
  border-radius: 50%;
  background: #E91E63;
  border: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

html[data-theme="light"] .row input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(
    90deg,
    #E91E63 0%,
    #E91E63 var(--range-fill, 50%),
    #e4e9e6 var(--range-fill, 50%),
    #e4e9e6 100%
  );
  border: 1px solid rgba(0, 0, 0, 0.14);
}

html[data-theme="light"] .row input[type="range"]::-webkit-slider-thumb {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}

.row input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.row input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 999px;
  background: #E91E63;
}

html[data-theme="light"] .row input[type="range"]::-moz-range-track {
  background: #e4e9e6;
  border: 1px solid rgba(0, 0, 0, 0.14);
}

.row input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: #E91E63;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}

html[data-theme="light"] .row input[type="range"]::-moz-range-thumb {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
}