/*
 * sangeet-fretted.css — shared by: bass, guitar, ukulele
 *
 * TAB blocks, pattern pickers, chord chips and drill chrome for the fretted
 * rooms. The neck itself is sangeet-fretboard.css and the chord box is
 * sangeet-chord-diagram.css; this is the page furniture around them.
 *
 * Every rule here was the same in all of those rooms, so it is written once.
 * Regenerate with: python3 scripts/extract_css_layer.py fretted
 */

.gtab {
  font-family: ui-monospace, Consolas, monospace;
  font-size: .8rem;
  background: #fffdf8;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  overflow-x: auto;
  line-height: 1.4;
  color: var(--ink);
  white-space: pre;
  margin: 10px auto;
  width: fit-content;
  max-width: 100%;
  text-align: left;
  tab-size: 1;
}

.with-tab {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 24px;
  align-items: start;
}

/* Sweep pages: text on top, tab block centered below (not split left/right). */
.with-tab.with-tab-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}

.with-tab.with-tab-stack .gtab,
.with-tab.with-tab-stack .gtab-wrap {
  align-self: center;
  margin: 10px auto;
  width: fit-content;
  max-width: 100%;
}

/* One-string walks: 0–12 and 13–24 as a pair. */
.tab-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px 20px;
  align-items: start;
  margin: 4px 0 16px;
}

.tab-pair-col p { margin: 0 0 2px; }

.tab-pair-col .gtab,
.tab-pair-col .gtab-wrap {
  align-self: start;
  margin: 8px 0;
}

.tab-quad {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  align-items: start;
  margin: 4px 0 16px;
}

.find-home { font-size: .9rem; color: var(--muted); margin: 0 0 6px; }

.pl-mode-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }

.pl-mode-tabs .btn { font-size: .9rem; }

.pl-mode-tabs .btn.active {
  background: var(--terra); color: #fff; border-color: var(--terra);
}

.pl-panel { display: none; }

.pl-panel.active { display: block; }

.pl-legend { font-size: .85rem; color: var(--muted); margin: .35rem 0 .75rem; }

.pl-stats { font-size: .9rem; margin: .5rem 0 0; }

.pl-presets { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 12px; }

.pl-presets .pl-presets-label { font-size: .85rem; color: var(--muted); margin-right: 4px; }

.pl-presets .btn.active {
  background: var(--terra); color: #fff; border-color: var(--terra);
}

.ctrl {
  font: inherit; padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: #fffdf8;
}

.drill-jump { margin: 12px 0 4px; }

.drill-jump .btn { font-size: .85rem; padding: 7px 12px; }

.drill-now { font-weight: 700; color: var(--terra); min-height: 1.2em; }

.check-list { list-style: none; padding: 0; margin: 8px 0; }

.check-list li { margin: 6px 0; }

.check-list label { display: flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; }

.strum-pat {
  display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0;
}

.strum-beat {
  min-width: 48px; min-height: 48px; padding: 8px 10px;
  border: 1.5px solid var(--line); border-radius: 10px;
  font-weight: 800; text-align: center; background: #fffdf8;
}

.strum-beat.on { background: var(--ochre); border-color: var(--terra); }

.strum-beat.strong { border-color: var(--terra); }

.strum-beat .sub { display: block; font-size: .68rem; font-weight: 600; color: var(--muted); }

.strum-beat.rest { color: var(--muted); background: transparent; border-style: dashed; }

.strum-beat.chunk { color: var(--muted); border-style: dashed; }

.strum-pat.dense { gap: 5px; }

.strum-pat.dense .strum-beat { min-width: 32px; min-height: 44px; padding: 6px 3px; font-size: .9rem; }

.pat-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }

.pat-pick .btn { font-size: .85rem; padding: 7px 12px; }

.pat-pick .btn.sel { background: var(--ochre); border-color: var(--terra); color: var(--ink); }

.pat-cap { margin: 4px 0 0; }

.pat-meta { color: var(--muted); font-size: .85rem; font-weight: 700; }

.pima-letter {
  display: inline-block;
  font-family: ui-monospace, Consolas, monospace;
  font-weight: 800;
  min-width: 1.35em;
  text-align: center;
  background: #fbf1da;
  border-radius: 6px;
  padding: 0 6px;
  color: var(--terra);
}

.pima-jobs {
  display: grid;
  gap: 12px;
  margin: 12px 0;
}

.pima-jobs .card { margin: 0; }

.tab-pre {
  font-size: .82rem; overflow: auto; background: #fffdf8;
  padding: 12px; border: 1px solid var(--line); border-radius: 8px;
  font-family: ui-monospace, Consolas, monospace; line-height: 1.35;
  margin: 8px 0;
}

.chart { font-family: ui-monospace, Consolas, monospace; font-size: .9rem; }

.chord-meet h3 { margin-top: 0; }

.rel {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--terra);
  background: #fbf1da;
  border-radius: 999px;
  padding: 2px 8px;
  margin: 0 6px 6px 0;
  vertical-align: middle;
}

.hear-in { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--line); }

.hear-in .btn { margin-top: 8px; }

.track h3 { margin: 0 0 8px; font-size: 1.02rem; }

.track p { margin: 0; }

.track-b { border-top: 4px solid var(--green); }

.track-i { border-top: 4px solid var(--ochre); }

.track-a { border-top: 4px solid var(--terra); }

.btn.ghost.sel {
  background: var(--ochre);
  border-color: var(--terra);
  color: var(--ink);
}

.song-list .song-group {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 14px 0 2px;
  padding: 0;
}

@media (min-width: 1100px) {
  .tab-quad { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 720px) {
  .pima-jobs { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 780px) {
  .with-tab { grid-template-columns: minmax(0, 1fr) minmax(200px, 48%); }

  .with-tab .gtab { margin: 0 auto; }

  .with-tab.with-tab-stack { display: flex; flex-direction: column; }

  .with-tab.with-tab-stack .gtab,
    .with-tab.with-tab-stack .gtab-wrap { align-self: center; margin: 10px auto; }
}

@media (min-width: 820px) {
  .tab-pair { grid-template-columns: 1fr 1fr; }
}