/* Sangeet Yatra — the laya grid (sangeet-laya.js). One pulse, the same phrase at
   one, two, three or four notes to a beat. Colours are the theme's own. */
.laya-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 8px 0; }
.laya-controls .laya-click { margin: 0; }
.laya-slow { background: #fffcf8; color: var(--terra); border: 1px solid var(--line); border-radius: 20px; padding: 5px 14px; font: inherit; font-size: 0.88rem; cursor: pointer; }
.laya-slow:hover { border-color: var(--terra); }
.laya-click { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0; font-size: 0.92rem; color: var(--muted); }
.laya-demo { margin: 10px 0 18px; }
.laya-demo .table-wrap { overflow-x: auto; }
table.laya-grid { border-collapse: collapse; width: auto; min-width: 100%; font-variant-numeric: tabular-nums; }
table.laya-grid th, table.laya-grid td { padding: 7px 6px; text-align: center; border-bottom: 1px solid var(--line); }
table.laya-grid thead th { font-size: 0.82rem; color: var(--muted); font-weight: 600; text-align: left; }
table.laya-grid thead th.beat { text-align: left; border-left: 2px solid var(--line); padding-left: 8px; }
table.laya-grid td.rowlabel { text-align: left; white-space: nowrap; padding-right: 14px; }
table.laya-grid td.rowlabel b { display: block; }
table.laya-grid td.rowlabel span { font-size: 0.8rem; color: var(--muted); }
table.laya-grid td.laya-cell { min-width: 2.1em; font-weight: 700; }
table.laya-grid td.laya-cell.named { min-width: 2em; padding-left: 2px; padding-right: 2px; font-size: 0.84rem; }
table.laya-grid td.laya-cell .n, table.laya-grid td.laya-cell .stroke { display: block; line-height: 1.25; }
table.laya-grid td.laya-cell .stroke { font-size: 0.78rem; font-weight: 400; color: var(--terra); }
.laya-key { margin: 4px 0 0; font-size: 0.85rem; color: var(--muted); }
table.laya-grid td.laya-cell.hold { color: var(--line); font-weight: 400; }
table.laya-grid td.beat-start { border-left: 2px solid var(--line); }
table.laya-grid td.playing { background: var(--ochre); transition: background .04s; }
table.laya-grid th.ctrlcol, table.laya-grid td.ctrlcol { padding: 6px 8px; background: transparent; border-bottom: 1px solid var(--line); }
.laya-demo .playbtn { background: var(--terra); color: #fff; border: none; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: .75rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.laya-demo .playbtn:hover { background: var(--terra-soft); }
.laya-demo .playbtn.playing { background: var(--green); }
@media (max-width: 640px) {
  table.laya-grid th, table.laya-grid td { padding: 6px 3px; }
  table.laya-grid td.laya-cell { min-width: 1.5em; font-size: 0.85rem; }
}