/*
 * style.css -- Structural Sieve tool-specific styling.
 *
 * Loaded alongside the shared site stylesheet (../../../style.css, for nav/
 * typography consistency with every other page); this file only holds what is
 * specific to this tool's own UI (canvas frame, control panels, HUD colors).
 *
 * Ported from the toy's inline <style> block (see
 * ../_reference/prime_drum_box_range.html) -- the site has no CSS custom-
 * property/theme system to adopt (style.css uses plain hex colors directly),
 * and its own dark palette (#111/#eee) already matches the toy's, so this is
 * close to a direct port rather than a re-theme. Everything is scoped under
 * .structural-sieve so it can't leak into the shared page chrome.
 *
 * One deliberate change from the toy: the canvas is sized responsively
 * (max-width + aspect-ratio) instead of a fixed 800x500 CSS box. This isn't
 * just a nice-to-have -- DrumRenderer.js reads the canvas's actual displayed
 * size (via clientWidth/clientHeight) to size its backing buffer, which is
 * the fix for the toy's video-export bug (PLAN.md bug #2); a responsive
 * canvas is what makes that sizing meaningful on different screens instead
 * of just replacing one fixed number with another.
 */

.structural-sieve #controls {
  margin: 20px auto;
  max-width: 900px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
}

.structural-sieve button {
  padding: 12px 24px;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  border: none;
  border-radius: 4px;
  color: #fff;
}

.structural-sieve #startBtn,
.structural-sieve #gotoBtn,
.structural-sieve #loadPrimeRangeBtn {
  background: #00bcd4;
}
.structural-sieve #startBtn:hover,
.structural-sieve #gotoBtn:hover,
.structural-sieve #loadPrimeRangeBtn:hover {
  background: #0097a7;
}

.structural-sieve #fullscreenBtn {
  background: #4caf50;
}
.structural-sieve #fullscreenBtn:hover {
  background: #43a047;
}

.structural-sieve #resetBtn {
  background: #e91e63;
}
.structural-sieve #resetBtn:hover {
  background: #c2185b;
}

.structural-sieve #exportWavBtn,
.structural-sieve #exportMidiBtn {
  background: #7e57c2;
}
.structural-sieve #exportWavBtn:hover,
.structural-sieve #exportMidiBtn:hover {
  background: #673ab7;
}

.structural-sieve #recordBtn {
  background: #f44336;
}
.structural-sieve #recordBtn:hover {
  background: #d32f2f;
}

.structural-sieve #info {
  font-size: 1.4rem;
  margin: 10px;
  color: #00bcd4;
  font-weight: bold;
  min-height: 38px;
}

.structural-sieve .control-group {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1a1a1a;
  padding: 10px 15px;
  border-radius: 4px;
  border: 1px solid #333;
  flex-wrap: wrap;
}

.structural-sieve input[type="range"] {
  cursor: pointer;
  /* [ADDED 2026-09-04] Fixed, slightly narrower width -- was unset (browser
     default, ~150-200px depending on engine), crowding the rest of the
     Tempo/Zoom row on narrower viewports. Part of the same visual tidy-up
     as .tempo-zoom-group / .window-toggle-group below (Artur: "tempo i tę
     informację możemy wizualnie poprawić co do wielkości i ułożenia"). */
  width: 140px;
}

/* [ADDED 2026-09-04, moved out of the Tempo/Zoom box 2026-09-04 -- see
   StructuralSieve.html's own comment on the Tempo/Zoom split] One caption
   line for the canvas's drag/scroll/dblclick gestures, centered under the
   whole #controls row and right above the canvas it describes. Previously
   lived INSIDE the (then-merged) Tempo/Zoom control-group via a
   flex-basis:100% child -- that pattern forces the flex container's own
   shrink-to-fit width calculation to balloon (a well-known flexbox sizing
   quirk), which is why that box used to render far wider than every other
   control-group. A plain block-level <p>, not a flex item at all, has none
   of that ambiguity. */
.structural-sieve .canvas-hint {
  text-align: center;
  font-size: 12px;
  color: #888;
  font-style: italic;
  margin: 8px auto 16px;
}

/* [ADDED 2026-09-04] Window-family toggle group (Bertrand/Legendre today,
   see StructuralSieve.html's own comment on this class) -- each toggle is
   wrapped in `.window-toggle` and sized/spaced compactly on purpose, so a
   third (or fourth) toggle added later still fits on one line instead of
   the group growing wide or wrapping. */
.structural-sieve .window-toggle-group {
  gap: 18px; /* breathing room BETWEEN toggle pairs -- wider than the tight
                internal checkbox-to-label gap inside each .window-toggle */
}
.structural-sieve .window-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}
.structural-sieve .window-toggle input[type="checkbox"] {
  width: 15px;
  height: 15px;
  margin: 0;
  cursor: pointer;
}
.structural-sieve .window-toggle span {
  font-size: 0.85em;
  letter-spacing: 0.02em;
}

/* [ADDED 2026-09-04] Sliding-mode caveat icon next to the General Law
   sliding/stepped <select> (StructuralSieve.html) -- shown only while
   sliding is selected (visibility + tooltip text driven entirely from
   StructuralSieveApp.js's #updateGeneralLawSlidingWarning, see that
   method's own doc-comment for why: sliding and stepped/Legendre have the
   same growth order at theta=0.5 but genuinely different per-n window
   bounds, which reads as a bug on first glance unless explained). Pure-CSS
   tooltip via `content: attr(data-tooltip)` on `::after` -- no JS needed
   to build/position a bubble element, just to keep that attribute's text
   in the current language (done in JS since the text must be localized;
   this file has no i18n access of its own). */
.structural-sieve .gl-sliding-warning {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffb300;
  color: #1a1a1a;
  font-size: 11px;
  font-weight: bold;
  cursor: help;
  position: relative;
}
/* [ADDED 2026-09-04] Without this, the class rule above (which sets its own
   `display`) beats the browser's UA-stylesheet `[hidden] { display: none }`
   rule -- that rule has near-zero specificity, so any same-or-higher-
   specificity author rule setting `display` on the same element silently
   overrides it and the element stays visible even with the `hidden`
   attribute set. Artur caught this live: the icon showed even in stepped
   mode. A same-class-plus-attribute selector outranks the plain class
   selector above regardless of source order, so this reliably wins. */
.structural-sieve .gl-sliding-warning[hidden] {
  display: none;
}
.structural-sieve .gl-sliding-warning::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 260px;
  padding: 8px 10px;
  border-radius: 4px;
  background: #2a2a2a;
  border: 1px solid #555;
  color: #eee;
  font-size: 12px;
  font-weight: normal;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  z-index: 10;
  pointer-events: none;
}
.structural-sieve .gl-sliding-warning:hover::after,
.structural-sieve .gl-sliding-warning:focus::after {
  opacity: 1;
  visibility: visible;
}

.structural-sieve input[type="number"],
.structural-sieve input[type="text"] {
  width: 70px;
  padding: 6px;
  border-radius: 4px;
  border: 1px solid #444;
  background: #333;
  color: #fff;
  font-size: 14px;
  text-align: center;
}

.structural-sieve .canvas-wrap {
  max-width: 800px;
  margin: 0 auto;
}

.structural-sieve canvas {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 5;
  background: #1a1a1a;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.7);
  border: 1px solid #333;
  /* [ADDED 2026-09-04] Drag-to-pan affordance -- StructuralSieveApp's
     #wireCanvasInteractions swaps this to "grabbing" for the duration of an
     active drag and back to "grab" on release/cancel. */
  cursor: grab;
  touch-action: none; /* let pointer events drive panning/zooming, not the browser's own scroll/pinch */
}

.structural-sieve canvas:fullscreen {
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  background: #111;
  object-fit: contain;
}

.structural-sieve .log-panel {
  max-width: 800px;
  margin: 20px auto;
  padding: 15px;
  background: #1a1a1a;
  border-radius: 8px;
  border: 1px solid #333;
  text-align: left;
  font-family: monospace;
  color: #aaa;
  line-height: 1.6;
  word-wrap: break-word;
}

/* [ADDED 2026-09-03] Header row for the log panels: label + item-count badge
 * + collapse/expand toggle. Sits above the existing text span (unchanged
 * below) rather than replacing it, so the panel body's own styling/rules
 * stay exactly as before. */
.structural-sieve .log-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.structural-sieve .log-panel-count {
  color: #666;
  font-size: 0.9em;
}

.structural-sieve .log-panel-toggle {
  margin-left: auto;
  padding: 2px 10px;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.4;
  cursor: pointer;
  border: 1px solid #333;
  border-radius: 4px;
  background: #263238;
  color: #00bcd4;
}
.structural-sieve .log-panel-toggle:hover {
  background: #00bcd4;
  color: #1a1a1a;
}