/*
 * sangeet-percussion.css — shared by: drums, madal, tabla-site
 *
 * Bol grids, hand keys and the play button for the percussion rooms.
 * Pairs with sangeet-grid.js, which plays what these rules print.
 *
 * Every rule here was the same in all of those rooms, so it is written once.
 * Regenerate with: python3 scripts/extract_css_layer.py percussion
 */

nav a.brand { display: block; padding: 0 0 10px; text-decoration: none; }

nav a.brand:hover { background: transparent; color: var(--terra-soft); }

/* Images */
figure { margin: 22px 0; }

img { max-width: 100%; height: auto; display: block; border-radius: var(--radius); box-shadow: var(--shadow); }

figcaption { font-size: 0.88rem; color: var(--muted); margin-top: 8px; font-style: italic; }

.hero img { border-radius: 18px; }

/* Kit-piece chips, for naming a voice in prose */
.bol { display:inline-block; padding: 2px 9px; border-radius: 20px; font-weight: 700; font-size: 0.82rem; color:#fff; }

.b-rest  { background: #d8c7a8; color:#6a5a42; }

.hands strong { color: var(--terra); }

.step-label { margin: 10px 0 2px; font-size:.92rem; color:#5a4a34; }

.handkey td, .handkey th { padding: 7px 12px; }

.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: 16px; }

footer .sy-credit { margin: 0 0 1.1rem; }

th.ctrlcol, td.ctrlcol { padding:6px 8px !important; background:transparent !important; box-shadow:none !important; }

table.grid td.playing { background: var(--ochre) !important; transition: background .04s; }

/* Accent hint + song companion */
td.accent { box-shadow: inset 0 -3px 0 var(--terra); }

td.accent .bol { font-weight: 800; }

.song-strip {
  margin: 10px 0 16px; padding: 10px 14px; border-radius: 8px;
  background: #f3e6cf; font-size: 0.9rem; color: #5a4a34;
}

.song-strip strong { color: var(--terra); }

.song-strip a { color: var(--terra); font-weight: 700; }

.demo-grid-label { font-size: 0.92rem; color: #5a4a34; margin: 8px 0 4px; }