/* ==========================================================================
   Paddy Prompt Studio — online musical instruments
   Layers on /blog/style.css (same dark indigo/cyan palette and type scale).
   ========================================================================== */

.inst {
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--border); border-radius: 22px;
  padding: 1.1rem 1.25rem 1.25rem; margin: 0.5rem 0 1rem;
  box-shadow: 0 30px 70px -40px rgba(99, 102, 241, 0.6);
}

/* ------------------------------------------------------------ Tabs */
.inst-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 1rem; }
.inst-tab {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem; cursor: pointer;
  min-height: 64px; padding: 0.55rem 0.4rem; border-radius: 14px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); color: var(--text-muted);
  font: inherit; font-weight: 700; font-size: 0.92rem; line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.inst-tab .emo { font-size: 1.35rem; line-height: 1; }
.inst-tab:hover { background: rgba(129, 140, 248, 0.12); color: #fff; }
.inst-tab[aria-selected="true"] {
  color: #fff; border-color: rgba(34, 211, 238, 0.6);
  background: linear-gradient(135deg, rgba(129, 140, 248, 0.22), rgba(34, 211, 238, 0.16));
}
.inst-tab:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }

/* ------------------------------------------------------------ Shared */
.stage { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.stage button { font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.stage button:focus-visible { outline: 2px solid #22d3ee; outline-offset: 2px; }
.cap {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.72rem; font-weight: 700;
  background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 5px; padding: 0.05em 0.4em; color: #e0e7ff;
}
.inst.no-labels .cap { display: none; }
.panel-note { margin: 0.8rem 0 0; font-size: 0.85rem; color: var(--text-dim); text-align: center; }

/* ------------------------------------------------------------ Drum pads */
.pads { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.6rem; }
.pad {
  position: relative; aspect-ratio: 1 / 1; border-radius: 16px; border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem;
  color: #fff; font-weight: 700; font-size: 0.92rem;
  background: radial-gradient(circle at 50% 35%, var(--pc, #6366f1) -40%, #12131c 75%);
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.35);
  transition: transform 0.06s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.pad-kick { --pc: #818cf8; } .pad-snare { --pc: #22d3ee; } .pad-clap { --pc: #ec4899; }
.pad-hat { --pc: #fcd34d; } .pad-open { --pc: #fbbf24; } .pad-tomlo { --pc: #34d399; }
.pad-tomhi { --pc: #10b981; } .pad-cow { --pc: #f97316; } .pad-rim { --pc: #a78bfa; } .pad-crash { --pc: #f472b6; }
.pad.hit {
  transform: scale(0.95); filter: brightness(1.6);
  box-shadow: 0 0 0 2px var(--pc), 0 0 32px var(--pc), inset 0 -1px 0 rgba(0, 0, 0, 0.35);
}

/* ------------------------------------------------------------ Xylophone */
.bars {
  display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0.45rem; align-items: center;
  height: 290px; padding: 0.4rem 0.2rem;
  background:
    linear-gradient(transparent 22%, #2b2017 22%, #2b2017 26%, transparent 26%, transparent 74%, #2b2017 74%, #2b2017 78%, transparent 78%);
}
.bar {
  position: relative; height: var(--h); border: 0; border-radius: 10px;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 0.5rem 0;
  color: #0b0620; font-weight: 800;
  background: linear-gradient(180deg, hsl(var(--hue) 85% 72%), hsl(var(--hue) 75% 56%));
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.2), 0 6px 14px -8px rgba(0, 0, 0, 0.8);
  transition: transform 0.06s ease, filter 0.1s ease;
}
.bar .note { font-family: "Space Grotesk", "Inter", sans-serif; font-size: 1rem; }
.bar .cap { background: rgba(255, 255, 255, 0.35); color: #0b0620; border-color: rgba(0, 0, 0, 0.15); }
.bar .peg { width: 9px; height: 9px; border-radius: 50%; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3); }
.bar-0 { --hue: 0; } .bar-1 { --hue: 28; } .bar-2 { --hue: 48; } .bar-3 { --hue: 90; } .bar-4 { --hue: 150; }
.bar-5 { --hue: 185; } .bar-6 { --hue: 215; } .bar-7 { --hue: 250; } .bar-8 { --hue: 285; } .bar-9 { --hue: 320; }
.bar.hit { transform: translateY(3px) scaleY(0.985); filter: brightness(1.25) saturate(1.2); }

/* ------------------------------------------------------------ Kalimba */
.kalimba {
  position: relative; margin: 0 auto; max-width: 560px; padding: 1.1rem 1.2rem 4.2rem;
  border-radius: 28px 28px 120px 120px;
  background:
    radial-gradient(circle at 50% 84%, #1a0f08 0 26px, transparent 27px),
    linear-gradient(180deg, #8a5a33, #6b4224 60%, #57341c);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.15), 0 20px 40px -24px rgba(0, 0, 0, 0.9);
}
.tines { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 0.35rem; align-items: start; height: 250px; }
.tine {
  height: var(--len); border: 0; border-radius: 0 0 14px 14px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.3rem; padding-bottom: 0.55rem;
  background: linear-gradient(90deg, #9ca3af, #f3f4f6 45%, #d1d5db 60%, #6b7280);
  color: #111827; font-weight: 800;
  box-shadow: 0 6px 10px -6px rgba(0, 0, 0, 0.8);
  transition: transform 0.06s ease, filter 0.1s ease;
  transform-origin: top center;
}
.tine .note { font-family: "Space Grotesk", "Inter", sans-serif; font-size: 0.95rem; }
.tine .cap { background: rgba(255, 255, 255, 0.6); color: #111827; border-color: rgba(0, 0, 0, 0.2); }
.tine.hit { transform: scaleY(0.97) rotateX(10deg); filter: brightness(1.15) drop-shadow(0 0 8px #67e8f9); }
.kalimba::before { /* the bridge */
  content: ""; position: absolute; left: 1rem; right: 1rem; top: 0.9rem; height: 10px; border-radius: 6px;
  background: linear-gradient(180deg, #e5e7eb, #6b7280); z-index: 1; pointer-events: none;
}

/* ------------------------------------------------------------ Guitar */
.chords { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.45rem; margin-bottom: 0.8rem; }
.chord-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 48px;
  border-radius: 12px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.04);
  color: var(--text); font-weight: 800; font-size: 1.05rem;
}
.chord-btn span { font-family: "Space Grotesk", "Inter", sans-serif; }
.chord-btn[aria-pressed="true"] { border-color: #fcd34d; background: rgba(252, 211, 77, 0.14); color: #fff; }
.chord-btn:hover { background: rgba(129, 140, 248, 0.14); }
.neck {
  position: relative; border-radius: 16px; padding: 0.5rem 0.4rem;
  background:
    radial-gradient(circle at 50% 50%, #120a05 0 70px, transparent 71px),
    linear-gradient(180deg, #a06a3b, #7a4b26);
  box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.25);
}
.strings { display: grid; gap: 0; }
.gstring {
  position: relative; display: flex; align-items: center; gap: 0.6rem; height: 42px; padding: 0 0.6rem;
  border: 0; background: transparent; color: #fde68a; font-weight: 800;
}
.gstring .sname { width: 1rem; text-align: center; font-family: "JetBrains Mono", ui-monospace, monospace; z-index: 1; text-shadow: 0 1px 2px #000; }
.gstring .cap { z-index: 1; }
.gstring .wire {
  position: absolute; left: 3.6rem; right: 0.6rem; top: 50%; height: var(--w); transform: translateY(-50%);
  background: linear-gradient(180deg, #fef3c7, #b45309); border-radius: 2px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
.gstring.hit .wire { animation: wobble 0.35s ease-out; background: linear-gradient(180deg, #fff, #fcd34d); box-shadow: 0 0 10px #fcd34d; }
@keyframes wobble {
  0% { transform: translateY(-50%) scaleY(1); }
  20% { transform: translateY(calc(-50% - 2px)) scaleY(2.4); }
  45% { transform: translateY(calc(-50% + 2px)) scaleY(1.8); }
  70% { transform: translateY(calc(-50% - 1px)) scaleY(1.3); }
  100% { transform: translateY(-50%) scaleY(1); }
}
.strum-row { display: flex; gap: 0.6rem; justify-content: center; margin-top: 0.8rem; }
.strum-row .btn-primary, .strum-row .btn-ghost { flex: 1 1 0; max-width: 14rem; }
.strum-row .hit { filter: brightness(1.25); }

/* ------------------------------------------------------------ Controls */
.inst-controls {
  display: flex; flex-wrap: wrap; align-items: end; gap: 0.6rem 1rem; margin-top: 1rem; padding-top: 0.9rem;
  border-top: 1px solid var(--border-soft);
}
.ctl { display: grid; gap: 0.25rem; font-size: 0.85rem; color: var(--text-muted); }
.ctl > span {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); font-weight: 700;
}
.ctl select {
  font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--text);
  background: #07080d; border: 1px solid var(--border); border-radius: 10px; padding: 0.4rem 0.55rem; min-height: 44px;
}
.ctl input[type="range"] { width: 9rem; accent-color: #818cf8; min-height: 44px; }
.ctl.check { display: flex; align-items: center; gap: 0.45rem; min-height: 44px; cursor: pointer; }
.ctl.check input { width: 1.15rem; height: 1.15rem; accent-color: #818cf8; }
.inst[data-inst="drums"] .pitched-only, .inst[data-inst="guitar"] .pitched-only { display: none; }
.hits { margin-left: auto; font-size: 0.82rem; color: var(--text-dim); align-self: center; }
.hits b { font-family: "JetBrains Mono", ui-monospace, monospace; color: #a5f3fc; }

.inst-status { margin: 0.8rem 0 0; font-size: 0.9rem; color: var(--text-muted); min-height: 1.4em; text-align: center; }
.songs { list-style: none; padding: 0; margin: 0.8rem 0 0; display: grid; gap: 0.35rem; font-size: 0.85rem; color: var(--text-muted); }
.songs .seq { font-family: "JetBrains Mono", ui-monospace, monospace; color: #c7d2fe; letter-spacing: 0.04em; }

.btn-primary, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; cursor: pointer;
  min-height: 48px; padding: 0.6rem 1.15rem; border-radius: 12px;
  font: inherit; font-size: 0.95rem; font-weight: 700; text-decoration: none;
}
.btn-primary { border: 0; background: linear-gradient(135deg, #818cf8, #22d3ee); color: #0b0620; }
.btn-primary:hover { filter: brightness(1.08); text-decoration: none; }
.btn-ghost { background: rgba(255, 255, 255, 0.04); color: var(--text); border: 1px solid var(--border); }
.btn-ghost:hover { background: rgba(129, 140, 248, 0.16); text-decoration: none; }

/* ------------------------------------------------------------ Prose tables */
.table-wrap { overflow-x: auto; margin: 0 0 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; font-size: 0.93rem; }
table.data caption { text-align: left; padding: 0.85rem 1rem 0.2rem; color: var(--text-dim); font-size: 0.82rem; }
table.data th, table.data td { padding: 0.6rem 1rem; text-align: left; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
table.data thead th {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--indigo); font-weight: 700;
  background: rgba(255, 255, 255, 0.03);
}
table.data tbody tr:last-child td, table.data tbody tr:last-child th { border-bottom: 0; }
.article-body kbd {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.78rem;
  background: rgba(129, 140, 248, 0.14); border: 1px solid var(--border-soft);
  border-radius: 5px; padding: 0.05em 0.35em; color: #c7d2fe;
}

@media (prefers-reduced-motion: reduce) {
  .pad, .bar, .tine { transition: none; }
  .gstring.hit .wire { animation: none; }
}

/* ------------------------------------------------------------ Responsive */
@media (max-width: 720px) {
  .inst { padding: 0.85rem; border-radius: 18px; }
  .inst-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pads { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pads .pad:last-child { grid-column: 2; }
  .bars { height: 230px; gap: 0.25rem; }
  .bar .note { font-size: 0.8rem; }
  .tines { height: 200px; gap: 0.2rem; }
  .tine .note { font-size: 0.75rem; }
  .kalimba { padding: 0.9rem 0.7rem 3.6rem; }
  .chords { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.3rem; }
  .chord-btn { font-size: 0.92rem; }
  .cap { display: none; }
  .hits { margin-left: 0; }
}