/* ============================================================================
   Virtual Piano — tool layer over base.css
   base.css supplies reset, type, forms, buttons, chips, badges, panels, tables,
   header, footer, focus rings. This file adds the accent and only what is
   unique to this tool: the now-playing readout, the octave/waveform/volume/
   sustain controls, and the on-screen keyboard itself.

   Accent — blue, measured against base.css surfaces (WCAG relative luminance):
     dark  #6187ef   5.6:1 on --bg    5.2:1 on --surface    5.8:1 on --bg-sunk
     light #082e96  10.9:1 on --bg   11.4:1 on --surface   10.0:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.

   The piano keys themselves are deliberately NOT accent-coloured — a real
   piano's keys are white and black regardless of room lighting, so this tool
   keeps that literally true in both the light and dark site themes. The
   accent shows up only as the tool's chrome (readout, focus rings, buttons)
   and as the "pressed" highlight on a key, whether that press came from the
   mouse, touch, or the computer keyboard.
   ========================================================================= */
:root { --accent: #6187ef; --accent-dim: rgba(97, 135, 239, 0.14); }
@media (prefers-color-scheme: light) {
  :root { --accent: #082e96; --accent-dim: rgba(8, 46, 150, 0.10); }
}

.brand svg .mark-bg  { fill: var(--accent); }
.brand svg .mark-fg  { fill: var(--on-accent); }

/* ============================================================================
   The instrument bay
   ========================================================================= */

.tool {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1rem, 3vw, 1.5rem);
  margin-bottom: 2.5rem;
}

.tool > h2 {
  margin: 0 0 1.1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--line);
}

.now-playing-row {
  margin-bottom: 1.25rem;
  min-height: 2.2rem;
  display: flex;
  align-items: center;
}
.now-playing-row .readout { overflow-wrap: anywhere; }

/* -------------------------------------------------------------- controls -- */

.fields-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.oct-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.oct-row .btn { min-width: 2.4rem; padding-inline: 0.6rem; }
.oct-readout {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  min-width: 5.5rem;
  text-align: center;
}

.vol-value {
  font-family: var(--mono);
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text-dim);
}

/* base.css never styles input[type=range] — every tool that needs one adds
   its own minimal theme. accent-color alone gets native thumb/track colour
   in every current engine; the height just gives the thumb a fair touch
   target on mobile. */
input[type="range"] {
  width: 100%;
  accent-color: var(--accent);
  background: transparent;
  height: 1.75rem;
  padding: 0;
}

.chip-toggle {
  min-width: 4.5rem;
}
.chip-toggle[aria-pressed="true"],
.chip-toggle.is-active {
  color: var(--on-accent);
  background: var(--accent);
  border-color: var(--accent);
}

/* ------------------------------------------------------------- keyboard --- */
/* Rendered in rem, not %, so black keys can be positioned with simple,
   testable arithmetic (see piano.js): left = (afterWhiteIndex + 1) *
   WHITE_KEY_WIDTH_REM - BLACK_KEY_WIDTH_REM / 2. Wrapping it in its own
   overflow-x:auto container is what keeps a two-octave keyboard (14 white
   keys, ~38.5rem) from ever forcing the page itself to scroll sideways at a
   500px viewport — this element scrolls instead, per the site's layout rule. */

.piano-scroll {
  overflow-x: auto;
  padding-bottom: 0.5rem;
  margin-bottom: 0.75rem;
}

.piano-keys {
  position: relative;
  /* width/height set inline per render in piano.js */
}

.key {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
  border-radius: 0 0 4px 4px;
  transition: background-color 0.05s ease, border-color 0.05s ease;
}

/* Real piano keys are white and black regardless of theme — see the note
   in the header comment above. */
.key-white {
  height: 100%;
  background: #f7f6f3;
  border: 1px solid #c7c5c0;
  border-top: none;
  color: #21242b;
  z-index: 1;
  padding-bottom: 0.6rem;
}
.key-white.is-pressed {
  background: var(--accent-dim);
  border-color: var(--accent);
}

.key-black {
  height: 60%;
  background: #1b1d24;
  border: 1px solid #000000;
  border-top: none;
  color: #e7eaf0;
  z-index: 2;
  padding-bottom: 0.45rem;
  border-radius: 0 0 3px 3px;
}
.key-black.is-pressed {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
}

.key-note {
  font-family: var(--mono);
  font-size: 0.625rem;
  opacity: 0.75;
  line-height: 1.3;
}
.key-letter {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
}

#kb-hint kbd {
  font-family: var(--mono);
  font-size: 0.75rem;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  padding: 0.05em 0.4em;
  color: var(--text);
}

.toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; }

/* ============================================================================
   Article furniture
   ========================================================================= */

.section { max-width: 74ch; }
.section table { max-width: none; }

.formula {
  overflow-x: auto;
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin: 0 0 1.2em;
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.7;
  white-space: pre;
}

.callout {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.1rem;
  margin: 0 0 1.2em;
  font-size: 0.9375rem;
  color: var(--text-dim);
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--text); }

.pagelinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.pagelinks a {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
  text-decoration: none;
}
.pagelinks a:hover { border-color: var(--accent); }
.pagelinks strong { display: block; color: var(--accent); margin-bottom: 0.15rem; }
.pagelinks span   { display: block; color: var(--text-dim); font-size: 0.875rem; }

td .mono, th .mono { white-space: nowrap; }

.noscript {
  background: var(--err-bg);
  border: 1px solid var(--err);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  color: var(--err);
  font-size: 0.9375rem;
}