/* The static chord, chart and tuner pages (built by scripts/pages.mjs). Everything else comes from styles.css. */
.static-page main { padding-bottom: var(--s6); }
.static-page .topbar .open-app { margin-left: auto; text-decoration: none; white-space: nowrap; }
.static-page h3 { margin: var(--s4) 0 var(--s2); color: var(--ink-soft); font: 800 var(--text-xs) var(--font-body); letter-spacing: .6px; text-transform: uppercase; }
.static-page a:not(.small-button):not(.sound-button):not(.brand):not(.small-link):not(.tabs a) { color: var(--rose-strong); }
.static-page main > .panel, .static-page main > .page-grid { margin-top: var(--s5); }
.static-page main > .intro + .page-grid, .static-page main > .intro + .panel { margin-top: 0; }

.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 0; padding: 0; list-style: none; color: var(--ink-soft); font-size: var(--text-sm); font-weight: 700; }
.crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--muted); }
.crumbs + .intro { margin-top: 10px; }

.page-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s5); align-items: start; }
.chart-stack { display: grid; gap: var(--s5); }
.shape-panel { display: flex; flex-direction: column; gap: var(--s3); }
.shape-panel > .small-button { align-self: flex-start; text-decoration: none; }
.level-tag { padding: 2px 8px; border: var(--border) solid var(--ink); border-radius: 999px; background: var(--sage); font: 800 var(--text-xs) var(--font-body); letter-spacing: .4px; text-transform: uppercase; }
.shape-diagram { display: grid; place-items: center; padding: var(--s4) var(--s2); border: 3px solid var(--ink); border-radius: var(--radius-small); background: var(--paper); }
.shape-facts { margin: 0; font-weight: 800; }
.shape-tip { margin: 0; color: var(--ink-soft); }
.string-steps { margin: 0; padding-left: 22px; line-height: 1.7; }
.string-steps.how-to { margin-top: var(--s4); }
.string-steps.how-to li + li { margin-top: var(--s2); }

.cta-panel { background: var(--sage-light); }
.cta-panel h2 { margin: 0 0 var(--s2); font: 400 26px/1 var(--font-display); letter-spacing: .3px; }
.cta-panel .sound-button { text-decoration: none; }

.link-list { margin: 0; padding: 0; list-style: none; }
.link-list.sets li { padding: var(--s2) 0; border-bottom: 2px dashed var(--line); }
.link-list.sets li:last-child { border-bottom: 0; }
.songs-note { display: block; color: var(--muted); font-size: var(--text-sm); }
.link-list.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.link-list.chips a { display: inline-flex; align-items: center; min-height: var(--control-sm); padding: 0 10px; border: var(--border) solid var(--ink); border-radius: var(--radius-small); background: var(--paper); color: var(--ink) !important; font: 400 18px var(--font-display); text-decoration: none; }

.pair-diagrams { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--s3); margin-top: var(--s4); }
.pair-card { display: grid; justify-items: center; gap: var(--s2); margin: 0; padding: var(--s4) var(--s2); border: 3px solid var(--ink); border-radius: var(--radius-small); background: var(--paper); }
.pair-card figcaption { font: 400 30px/1 var(--font-display); }
.pair-card figcaption a { color: var(--ink) !important; text-decoration: none; }
.pair-arrow { font: 400 32px var(--font-display); color: var(--rose-strong); }
.move-panel { display: flex; flex-direction: column; gap: var(--s3); }
.move-panel h2 { margin: 0; font: 400 26px/1 var(--font-display); letter-spacing: .3px; }
.ladder-list { counter-reset: rung; }
.ladder-list li { counter-increment: rung; }
.ladder-list li::before { content: counter(rung) ". "; color: var(--rose-strong); font-weight: 800; }

.chart-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: var(--s3); margin: var(--s4) 0 0; padding: 0; list-style: none; }
.chart-grid a { display: grid; justify-items: center; gap: 4px; padding: var(--s2); border: var(--border) solid var(--ink); border-radius: var(--radius-small); background: var(--paper); color: var(--ink) !important; text-decoration: none; }
.chart-name { font: 400 22px/1 var(--font-display); }
.chart-grid .diagram { width: 100%; }

.table-wrap { margin-top: var(--s4); overflow-x: auto; }
.chord-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.chord-table th, .chord-table td { padding: var(--s2); border-bottom: 2px dashed var(--line); text-align: left; vertical-align: top; }
.chord-table thead th { color: var(--ink-soft); font-size: var(--text-xs); letter-spacing: .6px; text-transform: uppercase; }
.chord-table tbody th { font: 400 20px var(--font-display); }
.chord-table td a { display: inline-block; margin: 0 8px 4px 0; }
.tuning-table td, .tuning-table th { font-size: var(--text-md); }

@media (hover: hover) and (pointer: fine) {
  .chart-grid a:hover, .link-list.chips a:hover { background: var(--sage-light); }
}
@media (max-width: 860px) {
  .page-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
  /* styles.css hides the app's intros on phones; on these pages the heading and lead are the content. */
  .static-page .intro { margin: 10px 0 16px; }
  .static-page .intro h1 { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; font-size: 28px; }
  .static-page .intro span { display: inline; }
  .pair-diagrams { grid-template-columns: minmax(0, 1fr); }
  .pair-arrow { justify-self: center; transform: rotate(90deg); }
  .static-page .topbar .tabs a { padding: 7px 6px; }
}