/* widget-controls.css
   ===================================================================
   Shared control-row layer for textbook widgets across all 9 book
   bundles. Each *-core directory invented its own *-wfr-ctrls /
   *-slider-group / *-button-row CSS, and the reflow behavior below
   480px diverged (some collapse cleanly, others scroll horizontally,
   others stack with mismatched gaps).

   This file adds an .om-controls layer + variants. Existing book-
   namespaced rules (.sa-wfr-ctrls, .sp-wfr-ctrls, etc.) can stay; they
   inherit from .om-controls when both classes are applied to the same
   row, and the namespaced rules act as book-specific accents (color
   tokens, custom backgrounds).

   Loaded after design/tokens.css + typography.css; before the per-book
   core CSS so book-specific rules can override.
   ================================================================= */

/* The container row. Flex-wrap below 480px so long control rows stack
   without horizontal scroll. Gap tuned for thumb-touch on mobile.
   Keeps the row align-items:center so labels + sliders + values sit
   on a shared baseline. */
.om-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--bd, #2a2a2a);
  margin-bottom: 10px;
}

/* A single slider group: label + range input + readout value. */
.om-controls .om-slider-group,
.om-slider-group {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0; /* shrinks below 480px instead of forcing horizontal scroll */
  flex-shrink: 1;
  flex-grow: 0;
}

.om-controls .om-slider-label,
.om-slider-label {
  font-size: 12.5px;
  color: var(--muted, #aaa);
  white-space: nowrap;
  flex-shrink: 0;
}

.om-controls input[type="range"].om-slider,
.om-slider {
  width: clamp(80px, 26vw, 160px);
  accent-color: var(--ac, #d97706);
}

.om-controls .om-slider-val,
.om-slider-val {
  font-variant-numeric: tabular-nums;
  font-size: 12.5px;
  color: var(--tx, #eee);
  min-width: 38px;
  text-align: right;
  flex-shrink: 0;
}

/* Inline button (e.g. Pause/Play, Reset). Sized for thumb-touch. */
.om-controls .om-btn,
.om-btn {
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 4px;
  border: 1px solid var(--bd, #2a2a2a);
  background: transparent;
  color: var(--tx, #eee);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

.om-controls .om-btn:hover,
.om-btn:hover { background: var(--bg-elev, rgba(255, 255, 255, 0.04)); }

.om-controls .om-btn:active,
.om-btn:active { transform: translateY(1px); }

.om-controls .om-btn[aria-pressed="true"],
.om-btn[aria-pressed="true"] {
  background: var(--ac, #d97706);
  color: #fff;
  border-color: var(--ac, #d97706);
}

/* Title + hint paragraph above the control row. */
.om-widget-header {
  margin-bottom: 8px;
}
.om-widget-header .om-title {
  margin: 0 0 4px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--tx, #eee);
}
.om-widget-header .om-hint {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted, #aaa);
  line-height: 1.45;
}

/* Light-theme overrides for the shared classes. The namespaced
   overrides for .sa-wfr-*, .sp-wfr-*, etc. live in their own
   *-core CSS and remain authoritative when both classes apply. */
[data-theme="light"] .om-controls {
  border-bottom-color: var(--bd, #d4d4d4);
}
[data-theme="light"] .om-slider-label,
[data-theme="light"] .om-controls .om-slider-label,
[data-theme="light"] .om-hint,
[data-theme="light"] .om-widget-header .om-hint {
  color: var(--mu, #555);
}
[data-theme="light"] .om-slider-val,
[data-theme="light"] .om-controls .om-slider-val,
[data-theme="light"] .om-title,
[data-theme="light"] .om-widget-header .om-title {
  color: var(--tx, #111);
}

/* Mobile guard: at narrow viewports collapse the row into vertical
   stacks so labels + sliders don't overlap. Hides the bottom border
   between widget rows on cramped layouts to free vertical space. */
@media (max-width: 480px) {
  .om-controls {
    gap: 12px 10px;
    padding: 12px 0 8px;
  }
  .om-controls .om-slider-group,
  .om-slider-group {
    flex-basis: 100%; /* one group per row */
    justify-content: space-between;
  }
  .om-controls input[type="range"].om-slider,
  .om-slider {
    flex: 1 1 auto;
    width: auto;
    min-width: 100px;
    max-width: 60vw;
  }
}

/* Generic widget mount placeholder: when prerender's _primitives
   placeholder is what's on screen, this styles the wrapper so it
   reads as intentional rather than broken while waiting for JS. */
.om-widget-placeholder {
  display: block;
  width: 100%;
  background: transparent;
}