/* LK Forge — Music tools cluster styles.
   Layered on top of the shared tool CSS (jsonformatter/css/shared.css + dev-tools.css).
   Components: transport controls, sliders, piano keyboard, tuner needle,
   metronome pendulum, sequencer pad grid. Uses --accent from each page. */

:root { --accent: #7c3aed; }

/* ---- Nav: fit the full music-tool list on one desktop row ---- */
@media (min-width: 680px) {
  .site-nav { gap: 4px; flex-wrap: wrap; }
  .site-nav .nav-link { min-width: auto; padding: 8px 10px; }
}

/* ---- Generic transport / big buttons ---- */
.mx-transport { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 4px 0 8px; }
.mx-btn-lg {
  font-family: inherit; font-weight: 700; font-size: 1rem; color: #fff;
  background: var(--accent); border: none; border-radius: 12px;
  padding: 12px 22px; cursor: pointer; transition: filter .15s, transform .05s;
  display: inline-flex; align-items: center; gap: 8px;
}
.mx-btn-lg:hover { filter: brightness(1.06); }
.mx-btn-lg:active { transform: translateY(1px); }
.mx-btn-lg.alt { background: var(--surface, #fff); color: var(--text, #14152e); border: 1px solid var(--border, #cdd1f0); }
.mx-btn-lg[aria-pressed="true"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.mx-btn-lg svg { width: 20px; height: 20px; }

.mx-chip {
  font-family: inherit; font-weight: 600; font-size: .9rem;
  padding: 8px 14px; border-radius: 99px; cursor: pointer;
  background: var(--surface, #fff); color: var(--muted, #5a5f7a);
  border: 1px solid var(--border, #cdd1f0); transition: .12s;
}
.mx-chip:hover { border-color: var(--accent); color: var(--text, #14152e); }
.mx-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.mx-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- Field + slider ---- */
.mx-field { display: flex; flex-direction: column; gap: 5px; }
.mx-field > label { font-size: .78rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted, #5a5f7a); }
.mx-controls { display: flex; flex-wrap: wrap; gap: 16px 22px; align-items: flex-end; margin: 6px 0 10px; }
.mx-readout { font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 600; color: var(--text, #14152e); }
.mx-readout .big { font-size: 2.4rem; font-weight: 700; letter-spacing: -1px; }
.mx-readout .unit { color: var(--muted, #5a5f7a); font-size: 1rem; font-weight: 600; margin-left: 2px; }

input[type="range"].mx-range {
  -webkit-appearance: none; appearance: none; width: 220px; max-width: 100%;
  height: 6px; border-radius: 99px; background: var(--border, #e5e7f0); outline: none; cursor: pointer;
}
input[type="range"].mx-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent); border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer;
}
input[type="range"].mx-range::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%; background: var(--accent); border: 3px solid #fff; cursor: pointer;
}
input[type="range"].mx-range:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px;
}
.mx-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 1rem; font-weight: 600;
  width: 96px; padding: 8px 10px; text-align: center;
  border: 1px solid var(--border-control, #7a7fb5); border-radius: 8px; background: var(--surface, #fff); color: var(--text, #14152e);
}
select.mx-sel {
  font-family: inherit; font-size: .95rem; padding: 8px 12px; cursor: pointer;
  border: 1px solid var(--border-control, #7a7fb5); border-radius: 8px; background: var(--surface, #fff); color: var(--text, #14152e);
}

/* ---- Piano keyboard ---- */
.mx-piano { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 6px 0 10px; }
.mx-keys { position: relative; display: flex; height: 180px; min-width: max-content; user-select: none; touch-action: none; }
.mx-key {
  position: relative; box-sizing: border-box; cursor: pointer;
  border: 1px solid #c7cbe0; border-top: none;
  /* keys are <button> elements so they are focusable and nameable — reset the
     native button chrome so they still render as piano keys */
  -webkit-appearance: none; appearance: none; font: inherit; color: inherit;
  padding: 0; margin: 0;
}
.mx-key:focus-visible {
  outline: 3px solid var(--accent); outline-offset: -3px; z-index: 3;
}
.mx-key.white {
  width: 46px; background: linear-gradient(#fff, #f4f5fb); border-radius: 0 0 6px 6px; z-index: 1;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px;
}
.mx-key.white.on { background: linear-gradient(#e7ddff, #d6c4ff); }
.mx-key.black {
  width: 30px; height: 112px; margin: 0 -15px; z-index: 2;
  background: linear-gradient(#3a3550, #17131f); border-radius: 0 0 5px 5px; border-color: #000;
  box-shadow: 0 3px 4px rgba(0,0,0,.4);
}
.mx-key.black.on { background: linear-gradient(#7c5cff, #5a34d6); }
.mx-key .lbl { font-size: .62rem; font-weight: 700; color: #9a9fbf; pointer-events: none; }
.mx-key.white.on .lbl { color: #5a34d6; }

/* ---- Tuner needle gauge ---- */
.mx-gauge { position: relative; width: 100%; max-width: 420px; margin: 8px auto 0; }
.mx-gauge svg { width: 100%; height: auto; display: block; }
.mx-gauge .needle { transition: transform .08s linear; transform-origin: 200px 190px; }
.mx-tuner-note { text-align: center; font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 3.2rem; line-height: 1; color: var(--text, #14152e); }
.mx-tuner-note.flat  { color: #d97706; }
.mx-tuner-note.sharp { color: #d97706; }
.mx-tuner-note.intune { color: #16a34a; }
.mx-tuner-cents { text-align: center; font-family: 'JetBrains Mono', monospace; color: var(--muted, #5a5f7a); margin-top: 2px; }

/* ---- Metronome pendulum ---- */
.mx-pendulum { width: 120px; height: 140px; margin: 0 auto; position: relative; }
.mx-pendulum .arm {
  position: absolute; left: 50%; bottom: 8px; width: 4px; height: 118px; margin-left: -2px;
  background: var(--accent); border-radius: 4px; transform-origin: bottom center; transition: transform .02s linear;
}
.mx-pendulum .bob { position: absolute; top: -6px; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--accent); }
.mx-beats { display: flex; gap: 8px; justify-content: center; margin: 12px 0; }
.mx-beat { width: 20px; height: 20px; border-radius: 50%; background: var(--border, #d7dbee); transition: .05s; }
.mx-beat.accent { background: #c7bdf0; }
.mx-beat.on { background: var(--accent); transform: scale(1.25); }
.mx-beat.on.accent { background: #f59e0b; }

/* ---- Sequencer / drum pad grid ---- */
.mx-seq { overflow-x: auto; }
.mx-seq-grid { display: grid; gap: 5px; min-width: max-content; }
.mx-seq-row { display: grid; grid-template-columns: 92px repeat(16, 30px); gap: 5px; align-items: center; }
.mx-seq-label { font-size: .82rem; font-weight: 700; color: var(--text, #14152e); display: flex; align-items: center; gap: 6px; }
.mx-cell {
  width: 30px; height: 30px; border-radius: 6px; cursor: pointer;
  background: var(--surface, #fff); border: 1px solid var(--border, #cdd1f0); transition: .08s;
}
.mx-cell:nth-child(4n+2) { border-left: 2px solid #b9bede; }
.mx-cell.on { background: var(--accent); border-color: var(--accent); }
.mx-cell.playhead { box-shadow: inset 0 0 0 2px #f59e0b; }

/* ---- Pads (big touch buttons) ---- */
.mx-pads { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; }
.mx-pad {
  aspect-ratio: 1/1; border-radius: 12px; border: 1px solid var(--border, #cdd1f0);
  background: var(--surface, #fff); color: var(--text, #14152e); font-weight: 700; font-size: .95rem;
  cursor: pointer; transition: .06s; display: flex; align-items: center; justify-content: center;
}
.mx-pad:active, .mx-pad.hit { background: var(--accent); color: #fff; transform: scale(.97); }

/* ---- Section headings inside cards ---- */
.mx-sub { font-size: .82rem; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: var(--muted, #5a5f7a); margin: 14px 0 8px; }

/* ---- Hub grid (music index) ---- */
.mx-hub-section { margin: 26px 0 6px; }
.mx-hub-section h2 { font-size: 1.15rem; margin: 0 0 4px; }
.mx-hub-section p.lead { color: var(--muted, #5a5f7a); margin: 0 0 14px; }
.mx-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.mx-tool-card {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none;
  padding: 16px; border-radius: 14px; border: 1px solid var(--border, #cdd1f0);
  background: var(--surface, #fff); transition: .14s; color: var(--text, #14152e);
}
.mx-tool-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.07); }
.mx-tool-card .ic { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; }
.mx-tool-card .ic svg { width: 20px; height: 20px; }
.mx-tool-card h3 { margin: 6px 0 0; font-size: 1.02rem; }
.mx-tool-card .d { font-size: .86rem; color: var(--muted, #5a5f7a); margin: 0; line-height: 1.45; }
.mx-tool-card .vol { font-size: .74rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .4px; }

@media (max-width: 560px) {
  .mx-readout .big { font-size: 2rem; }
  .mx-key.white { width: 40px; }
  .mx-key.black { width: 26px; margin: 0 -13px; }
}

/* ---- Dark mode (site toggles [data-theme] / prefers-color-scheme via shared vars) ---- */
@media (prefers-color-scheme: dark) {
  .mx-key.white { background: linear-gradient(#e9eaf2, #cfd2e4); }
  .mx-key.white .lbl { color: #6b7093; }
}

/* ---- Shared reference tables (server-rendered, crawlable) ---- */
.mx-table-wrap{ overflow-x:auto; margin:10px 0 4px; }
.mx-table{ width:100%; border-collapse:collapse; font-size:.9rem; }
.mx-table caption{ text-align:left; font-size:.8rem; color:#4a4f68; padding:0 0 6px; }
.mx-table th, .mx-table td{ text-align:left; padding:8px 10px; border-bottom:1px solid var(--border,#cdd1f0); }
.mx-table th{ font-size:.74rem; text-transform:uppercase; letter-spacing:.4px; color:#4a4f68; }
.mx-table td.num, .mx-table td.mono{ font-family:'JetBrains Mono', ui-monospace, monospace; }
.mx-note{ font-size:.85rem; color:#4a4f68; margin:8px 0 0; }
.dv-section{ margin:22px 0 0; }
.dv-section h2{ margin:0 0 6px; }
.dv-section h3{ margin:18px 0 4px; font-size:1.05rem; }
.dv-updated{ font-size:.82rem; color:#4a4f68; margin:14px 0 0; }

/* ---- Reduced motion: pendulum, playhead and beat lights ---- */
@media (prefers-reduced-motion: reduce) {
  .mx-pendulum .arm { transition: none !important; }
  .mx-beat, .mx-beat.on, .mx-cell, .mx-cell.playhead { transition: none !important; transform: none !important; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* print-friendly-standardized v1 */
@media print {
  .site-header, .site-nav, .nav-mobile-menu, .nav-hamburger,
  .calc-rail, .related-tool, .related-cluster, .related-tools,
  .page-footer, .site-footer, .action-row, .tool-actions,
  .seg-tabs, .st-modes, .mode-toggle, .mode-row, .chart-tip { display: none !important; }
  .calc-layout { display: block !important; }
  .calc-content { margin: 0 !important; padding: 0 !important; }
  body { background: #fff !important; color: #000 !important; }
  .card { box-shadow: none !important; background: #fff !important; border-color: #999 !important; }
  a[href]:after { content: "" !important; }
  @page { margin: 1.5cm; }
}