/* ============================================================
   SLOW WAVE SIMULATOR — component stylesheet.

   Lifted VERBATIM from the approved prototype. Every rule is prefixed
   with the root class `.swsim` so nothing here leaks onto a page and no
   page rule reaches in. Scoping is the ONLY change: not one colour,
   size, radius or font-size has been altered.

   The prototype's `body` rule carried the font stack and ink colour for
   its content; those move onto `.swsim` itself, which is the component
   root — same values, same effect.

   Two additions are required by the build prompt and are marked below:
   the play/pause button (§4.6) reuses button.region's rules exactly, and
   the reduced-motion static frame (§4.5) needs no styling of its own.
   ============================================================ */

.swsim, .swsim * { box-sizing: border-box; }

.swsim {
  background: #FFFFFF;
  color: #111111;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.swsim .wrap { max-width: 980px; margin: 0 auto; }
.swsim h1 { font-size: 21px; margin: 0 0 4px; }
.swsim .sub { font-size: 14px; margin: 0 0 20px; }

.swsim .panel {
  border: 2px solid #D8D2C7;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}

.swsim canvas { width: 100%; height: auto; display: block; }

.swsim .regionrow { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.swsim .regionrow .lbl { font-size: 13px; font-weight: 700; margin-right: 4px; }
.swsim button.region {
  font: inherit; font-size: 13px; font-weight: 700;
  padding: 7px 14px; border-radius: 8px; cursor: pointer;
  background: #FFFFFF; color: #111111; border: 2px solid #B8B8B8;
}
.swsim button.region.on { background: #E8F4F8; border-color: #2E7C9A; }

.swsim .sliders { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .swsim .sliders { grid-template-columns: 1fr; } }
.swsim .sl { border-left: 4px solid #D8D2C7; padding-left: 12px; }
.swsim .sl.up { border-left-color: #B4362F; }
.swsim .sl.down { border-left-color: #2E7C9A; }
.swsim .sl .name { font-size: 13px; font-weight: 700; }
.swsim .sl .note { font-size: 12px; margin: 2px 0 8px; }
.swsim input[type=range] { width: 100%; accent-color: #2E7C9A; }

.swsim .presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.swsim button.preset {
  font: inherit; font-size: 13px; font-weight: 700;
  padding: 7px 14px; border-radius: 8px; cursor: pointer;
  background: #FFF1D2; color: #111111; border: 2px solid #C9922A;
}

.swsim .readouts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 4px; }
@media (max-width: 760px) { .swsim .readouts { grid-template-columns: 1fr 1fr; } }
.swsim .ro { border: 2px solid #B8B8B8; border-radius: 10px; padding: 10px 12px; }
.swsim .ro .k { font-size: 11px; font-weight: 700; }
.swsim .ro .v { font-size: 24px; font-weight: 700; margin-top: 2px; }
.swsim .ro .u { font-size: 11px; }

.swsim .explain { border: 2px solid #C9922A; background: #FFF1D2; border-radius: 10px; padding: 12px 14px; margin-top: 14px; }
.swsim .explain .h { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.swsim .explain .b { font-size: 13px; }

.swsim .locked { border: 2px solid #B4362F; background: #FAEDEC; border-radius: 10px; padding: 12px 14px; }
.swsim .locked .h { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.swsim .locked ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.swsim .locked li { margin-bottom: 4px; }

.swsim .foot { font-size: 12px; margin-top: 6px; }

/* §4.6 — the play/pause control. Same rules as button.region, which is
   what the prompt specifies ("in the same style as the existing
   button.region buttons"); no new values introduced. */
.swsim button.playpause {
  font: inherit; font-size: 13px; font-weight: 700;
  padding: 7px 14px; border-radius: 8px; cursor: pointer;
  background: #FFFFFF; color: #111111; border: 2px solid #B8B8B8;
  margin-left: auto;
}
.swsim button.playpause[aria-pressed="true"] { background: #E8F4F8; border-color: #2E7C9A; }

/* §4.7 — the slider names become real <label>s. They keep the .name
   class and its exact rules above; label just needs to sit as a block. */
.swsim .sl label.name { display: block; cursor: pointer; }

/* Keyboard focus: the platform focus treatment, so every control in the
   component shows a ring rather than relying on the browser default. */
.swsim button:focus-visible,
.swsim input[type=range]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.35);
}