html, body { margin: 0; min-height: 100%; background: #f5f5f3; color: #202020; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }
button, input { font: inherit; }
button, .gig-change-link, .gig-modern-link { min-height: 44px; border: 1px solid #aaa; border-radius: 5px; background: #fff; color: #222; padding: 7px 11px; text-decoration: none; }
button:active, .gig-change-link:active, .gig-modern-link:active { background: #ddd; }
.hidden { display: none !important; }
.gig-picker { max-width: 650px; margin: 40px auto; padding: 20px; }
.gig-picker li { margin: 12px 0; }
.gig-picker li a { display: block; padding: 14px; border: 1px solid #bbb; border-radius: 6px; background: #fff; color: #174ea6; text-decoration: none; }
.gig-error { color: #a00; }

/* Portrait performance view: chart first, controls always reachable. */
.gig-performance-bar { position: fixed; z-index: 6; top: 0; right: 0; left: 0; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; box-sizing: border-box; min-height: 58px; border-bottom: 1px solid #bbb; background: #fafafa; padding: 7px 10px; }
.gig-current-song { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; min-width: 0; overflow: hidden; padding: 0 10px; }
#gig-current-title, #gig-current-details { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#gig-current-title { font-size: 17px; font-weight: bold; }
#gig-current-details { margin-top: 1px; color: #666; font-size: 12px; font-weight: normal; }
.gig-font-controls { display: -webkit-box; display: -webkit-flex; display: flex; }
.gig-transpose-controls { display: -webkit-box; display: -webkit-flex; display: flex; }
.gig-transpose-control { display: -webkit-box; display: -webkit-flex; display: flex; }
.gig-transpose-form { display: inline; margin: 0 0 0 5px; }
.gig-transpose-form button { min-width: 44px; padding-right: 7px; padding-left: 7px; }
.gig-font-controls button { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; min-width: 48px; margin-left: 5px; padding-right: 7px; padding-left: 7px; }
.gig-font-symbol { margin-right: 1px; font-family: Georgia, serif; font-size: 22px; font-style: italic; line-height: 1; }
.gig-more-wrap { position: relative; margin-left: 5px; }
.gig-more-wrap > button { min-width: 48px; padding-right: 8px; padding-left: 8px; letter-spacing: 1px; }
.gig-more-menu { position: absolute; z-index: 10; top: 50px; right: 0; width: 190px; border: 1px solid #999; border-radius: 6px; background: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.2); padding: 5px; }
.gig-more-menu button, .gig-more-menu a { display: block; box-sizing: border-box; width: 100%; min-height: 42px; border: 0; border-radius: 4px; background: transparent; text-align: left; }
.gig-more-menu button:active, .gig-more-menu a:active { background: #ddd; }
.gig-more-menu button:disabled { color: #999; cursor: not-allowed; opacity: .6; }
.gig-ready { position: absolute; overflow: hidden; width: 1px; height: 1px; clip: rect(0,0,0,0); }

.gig-search-label { position: absolute; left: -9999px; }
.gig-search { box-sizing: border-box; width: 250px; min-height: 44px; border: 1px solid #999; border-radius: 5px; padding: 7px 9px; background: #fff; }
.gig-sheet-backdrop { position: fixed; z-index: 7; top: 58px; right: 0; bottom: 0; left: 0; width: 100%; border: 0; border-radius: 0; background: rgba(0,0,0,.25); padding: 0; }
.gig-setlist-sheet { position: fixed; z-index: 8; top: 28%; right: 0; bottom: 0; left: 0; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; flex-direction: column; border-radius: 12px 12px 0 0; background: #eee; box-shadow: 0 -3px 12px rgba(0,0,0,.25); }
.gig-sheet-header { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; justify-content: space-between; border-bottom: 1px solid #bbb; background: #fafafa; padding: 8px 10px; }
.gig-sheet-title { display: inline-block; margin-right: 10px; font-weight: bold; }
.gig-sheet-header > button { margin-left: 8px; font-size: 24px; line-height: 1; }
.gig-set-tabs { display: -webkit-box; display: -webkit-flex; display: flex; overflow-x: auto; border-bottom: 1px solid #bbb; background: #fafafa; padding: 8px 10px; }
.gig-set-tab { margin-right: 7px; white-space: nowrap; }
.gig-set-tab.is-active { border-color: #174ea6; background: #dbeafe; color: #174ea6; font-weight: bold; }
.gig-nav { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 10px; }
.gig-nav-section h2 { margin: 12px 4px 5px; color: #666; font-size: 13px; text-transform: uppercase; }
.gig-song-link { display: block; width: 100%; min-height: 50px; margin-bottom: 5px; overflow: hidden; border-color: transparent; background: transparent; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.gig-song-link small { display: block; overflow: hidden; color: #777; font-size: 13px; text-overflow: ellipsis; }
.gig-song-link.is-active { border-color: #6d9bdd; background: #dbeafe; color: #174ea6; }

.gig-layout { padding: 58px 0 66px; }
.gig-charts { box-sizing: border-box; width: 100%; padding: 18px; }
.gig-song { display: none; max-width: 1050px; margin: 0 auto; }
.gig-song.is-active { display: block; }
.songbook-detail-title { margin-bottom: 5px; font-size: 26px; font-weight: bold; }
.songbook-detail-heading-line { display: inline; }
.songbook-detail-subtitle { margin-left: 8px; color: #666; font-size: 14px; font-weight: normal; }
.songbook-detail-meta, .songbook-detail-note, .songbook-detail-user-note, .songbook-detail-links { margin: 7px 0; }
.songbook-detail-note, .songbook-detail-user-note { border-left: 4px solid #e0a62f; background: #fff6d9; padding: 8px 10px; }
.songbook-detail-link-item { margin-right: 10px; }
.songbook-detail-link { color: #174ea6; }
.songbook-detail-link-icon { width: 15px; height: 15px; vertical-align: middle; }
.songbook-detail-tag { display: inline-block; margin-right: 5px; border-radius: 4px; background: #ddd; padding: 3px 6px; font-size: 12px; }
.songbook-detail-chart { margin-top: 15px; }
.songbook-detail-chart h3 { margin: 0 0 7px; border-bottom: 1px solid #bbb; padding-bottom: 5px; font-size: 15px; }
.songbook-transpose-controls { margin-left: 8px; color: #666; font-size: 12px; font-weight: normal; }
.songbook-transpose-form { display: inline; }
.songbook-transpose-btn, .songbook-transpose-reset { min-height: 38px; margin-left: 3px; padding: 3px 10px; font-size: 16px; }
.songbook-transpose-reset { font-size: 11px; }
.songbook-chart-diagrams-toggle { margin: 6px 0; }
.songbook-diagrams-link { color: #b71943; }
.songbook-chart-diagrams { overflow-x: auto; border-bottom: 1px solid #ccc; padding: 8px 0; white-space: nowrap; }
.songbook-chart-diagrams svg { display: inline-block; margin-right: 8px; vertical-align: top; }
.songbook-chart-body { font-family: Menlo, Monaco, "Courier New", monospace; font-size: 16px; font-weight: bold; line-height: 1.48; white-space: pre-wrap; }
.songbook-chart-body .chord { color: #c81544; font-weight: bold; }
.songbook-chart-body .backing, .songbook-chart-body .directive { font-weight: normal; }
.gig-songbook.is-chord-highlight .songbook-chart-body .chord { border-radius: 2px; background: #fef08a; color: #1a1a1a; padding: 0 2px; }
.gig-songbook.is-lyrics .songbook-chart-body .chord,
.gig-songbook.is-lyrics .songbook-chart-diagrams-toggle,
.gig-songbook.is-lyrics .songbook-chart-diagrams { display: none; }
.songbook-medley-song { margin-top: 28px; border-top: 2px solid #aaa; padding-top: 16px; }
.songbook-medley-song:first-child { margin-top: 8px; border-top: 0; }

.gig-footer { position: fixed; z-index: 6; bottom: 0; left: 0; right: 0; display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; box-sizing: border-box; min-height: 66px; border-top: 1px solid #aaa; background: #fafafa; padding: 7px 10px; }
.gig-footer > button { margin-right: 6px; }
.gig-footer > button:last-child { margin-right: 0; }
.gig-song-nav-button { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; min-width: 50px; padding: 6px; }
.gig-song-nav-button svg { display: block; }
.gig-metronome-button { display: -webkit-box; display: -webkit-flex; display: flex; -webkit-box-align: center; -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; justify-content: center; min-width: 50px; padding: 6px; }
.gig-metronome-button svg { display: block; }
.gig-metronome-button span { margin-left: 5px; font-size: 15px; font-weight: bold; }
.gig-metronome-button:disabled { cursor: default; opacity: .35; }
.gig-metronome-button.is-active { border-color: #111; background: #111; color: #fff; }
#gig-position { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; min-width: 0; overflow: hidden; padding: 0 8px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.gig-songbook.is-metronome-flash .gig-performance-bar, .gig-songbook.is-metronome-flash .gig-footer { border-color: #94a3b8; background: #e2e8f0; }

.gig-songbook.is-dark, .gig-songbook.is-dark .gig-performance-bar, .gig-songbook.is-dark .gig-footer { background: #171717; color: #e7e7e7; }
.gig-songbook.is-dark .gig-nav { border-color: #555; background: #252525; }
.gig-songbook.is-dark .gig-setlist-sheet { background: #252525; }
.gig-songbook.is-dark .gig-sheet-header, .gig-songbook.is-dark .gig-set-tabs { border-color: #555; background: #171717; }
.gig-songbook.is-dark button, .gig-songbook.is-dark .gig-change-link, .gig-songbook.is-dark .gig-modern-link, .gig-songbook.is-dark .gig-search, .gig-songbook.is-dark .gig-more-menu { border-color: #666; background: #2d2d2d; color: #eee; }
.gig-songbook.is-dark .gig-song-link.is-active, .gig-songbook.is-dark .gig-set-tab.is-active { background: #17375e; color: #b8d6ff; }
.gig-songbook.is-dark .songbook-detail-subtitle, .gig-songbook.is-dark .songbook-transpose-controls { color: #aaa; }
.gig-songbook.is-dark .songbook-detail-note, .gig-songbook.is-dark .songbook-detail-user-note { background: #3c321b; }
.gig-songbook.is-dark .songbook-chart-body .chord { color: #ff7599; }
.gig-songbook.is-dark .songbook-detail-link, .gig-songbook.is-dark .songbook-diagrams-link { color: #8db9ff; }
.gig-songbook.is-dark #gig-current-details { color: #aaa; }
.gig-songbook.is-dark.is-metronome-flash .gig-performance-bar, .gig-songbook.is-dark.is-metronome-flash .gig-footer { border-color: #475569; background: #334155; }

@media (max-width: 540px) {
  .gig-current-song { padding-right: 5px; padding-left: 5px; }
  #gig-current-title { font-size: 14px; }
  .gig-transpose-form { margin-left: 3px; }
  .gig-transpose-form button, .gig-font-controls button, .gig-more-wrap > button { min-width: 42px; margin-left: 3px; }
  .gig-sheet-title { display: none; }
  .gig-search { width: 210px; }
  .gig-song-nav-button { min-width: 44px; padding-right: 6px; padding-left: 6px; }
  .gig-footer { padding-right: 5px; padding-left: 5px; }
  .gig-footer > button { margin-right: 3px; }
  .gig-metronome-button { min-width: 44px; padding-right: 6px; padding-left: 6px; }
  .gig-metronome-button span { margin-left: 3px; }
  .songbook-detail-title { font-size: 22px; }
}