/* ═══════════════════════════════════════════════════════════════
   ada-icon-scale.css — multiplies tile emoji + label sizes by the
   --ada-icon-scale custom property (set by js/ada-icon-scale.js).
   Loaded AFTER tile-sizing.css so the scale runs on top of the
   baseline WH-parity sizing.
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ada-icon-scale: 1;             /* baseline; js sets this from localStorage */
}

/* Use calc() so the user's scale multiplies the existing sizes from
   tile-sizing.css. Both selector lines are listed (.tablet-grid and
   .tablet-grid.grid-compact) so this rule's specificity (0,0,3,0)
   beats the existing rule in styles.css:681 which is
   `.tablet-grid.grid-compact .demo-tile-emoji { font-size: 44px; }`
   (same specificity but loaded earlier — ours wins by source order).
   Without this, the home grid (>9 tiles → grid-compact) was ignoring
   the slider entirely. */
.tablet-grid .demo-tile-emoji,
.tablet-grid.grid-compact .demo-tile-emoji {
  font-size: calc(44px * var(--ada-icon-scale)) !important;
}
.tablet-grid .demo-tile-label,
.tablet-grid.grid-compact .demo-tile-label {
  font-size: calc(0.72rem * var(--ada-icon-scale)) !important;
}

/* Wider screens: keep tile-sizing.css's bigger baseline, still
   multiplied by --ada-icon-scale. */
@media (min-width: 720px) {
  .tablet-grid .demo-tile-emoji,
  .tablet-grid.grid-compact .demo-tile-emoji {
    font-size: calc(48px * var(--ada-icon-scale)) !important;
  }
}

/* Rich mode (horizontal bars) uses a different scale; keep tile-sizing.css
   in charge — do not over-scale the bar emoji or labels go off-row. */
.tablet-grid.rich-mode .demo-tile-emoji,
.tablet-grid.rich-mode .demo-tile-label {
  font-size: revert !important;
}

/* ── ADA Settings panel UI ─────────────────────────────────────── */

.mb-section.mb-section-ada {
  /* Same surface as the other mb-section blocks. No override needed
     for the wrapper — the controls below are what matter. */
}

.ada-scale-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0 2px;
}
.ada-scale-row input[type="range"] {
  flex: 1;
  height: 32px;
  accent-color: var(--amber);
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  cursor: pointer;
}
/* Track + thumb styling for cross-browser consistency. */
.ada-scale-row input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}
.ada-scale-row input[type="range"]::-moz-range-track {
  height: 6px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 3px;
}
.ada-scale-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  background: var(--amber);
  border-radius: 50%;
  margin-top: -8px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
.ada-scale-row input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: var(--amber);
  border-radius: 50%;
  cursor: pointer;
  border: none;
}

.ada-scale-btn {
  min-width: 36px;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-family: var(--f-sans);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ada-scale-btn:hover,
.ada-scale-btn:focus-visible {
  border-color: var(--amber);
  color: var(--amber);
  outline: none;
}

.ada-scale-readout {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 4px;
  text-align: right;
}

.ada-scale-reset {
  margin-top: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 1px dashed rgba(255, 255, 255, 0.22);
  border-radius: 10px;
  background: transparent;
  color: rgba(255, 255, 255, 0.75);
  font-family: var(--f-sans);
  font-size: 0.82rem;
  cursor: pointer;
}
.ada-scale-reset:hover { border-color: var(--amber); color: var(--amber); }

.light-mode .ada-scale-btn { color: #333; border-color: rgba(0,0,0,0.2); background: rgba(0,0,0,0.02); }
.light-mode .ada-scale-readout { color: #555; }
.light-mode .ada-scale-reset { color: #555; border-color: rgba(0,0,0,0.2); }