/* Worship song detail — lifted from the song mockup (sg-hero / sg-main / chord sheet). */
.sg-hero {
  padding: 36px 0 28px;
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(900px 480px at 12% 0%, var(--accent-tint), transparent 70%),
    var(--paper-3);
}
.sg-crumb { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-3); font-weight: 500; margin-bottom: 16px; text-decoration: none; transition: color 0.15s; }
.sg-crumb:hover { color: var(--accent); }
.sg-crumb svg { width: 14px; height: 14px; }
[dir="rtl"] .sg-crumb svg { transform: scaleX(-1); }
.sg-head { display: grid; grid-template-columns: auto 1fr auto; gap: 28px; align-items: start; }
.sg-cv {
  width: 132px; aspect-ratio: 1 / 1; border-radius: 18px;
  background: linear-gradient(135deg, var(--accent-deep) 0%, var(--accent) 60%, var(--accent-deep) 100%);
  box-shadow: 0 18px 36px rgba(74, 23, 56, 0.20), 0 6px 12px rgba(74, 23, 56, 0.10);
  position: relative; overflow: hidden;
}
.sg-cv::after { content: ''; position: absolute; inset: 0; background: radial-gradient(220px 140px at 100% 100%, rgba(255, 255, 255, 0.12), transparent 60%); }
.sg-info .eyebrow { color: var(--accent); font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: 1.6px; text-transform: uppercase; }
.sg-info h1 { font-family: var(--serif-fa); font-weight: 500; font-size: 44px; letter-spacing: -1px; line-height: 1.1; margin: 8px 0; color: var(--ink); }
.sg-info .artist { font-size: 16px; color: var(--ink-2); margin: 0 0 12px; }
.sg-info .artist span { color: var(--accent-deep); font-weight: 500; }
.sg-meta-row { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; }
.sg-meta-row .item.key { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-3); }
.sg-meta-row .item.key .kl { font-size: 10px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; opacity: 0.78; }
.sg-meta-row .item.key strong { color: var(--accent); font-size: 18px; font-weight: 800; font-family: var(--sans, inherit); }

.sg-actions { display: flex; flex-direction: column; gap: 8px; min-width: 200px; }
.sg-action-stack { display: flex; flex-direction: column; gap: 6px; }
.sg-res-chip {
  display: inline-flex; align-items: center; gap: 10px;
  width: 100%; justify-content: flex-start;
  padding: 8px 14px; height: 38px; border-radius: 999px;
  background: #fff; border: 1px solid var(--line);
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2);
  cursor: pointer; text-decoration: none; transition: all 0.15s;
}
.sg-res-chip:hover { border-color: var(--accent); color: var(--accent); }
.sg-res-chip.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.sg-res-chip svg { width: 14px; height: 14px; flex-shrink: 0; }

.sg-body { padding: 32px 0 80px; }
.sg-player { margin: 0 auto 28px; max-width: 720px; }
.sg-player audio { width: 100%; }

.sg-tabs-wrap { display: flex; justify-content: center; margin: 8px 0 32px; }
.sg-tabs { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line); }
.sg-tab { background: transparent; border: none; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink-3); padding: 9px 18px; border-radius: 999px; cursor: pointer; line-height: 1; transition: all 0.18s; }
.sg-tab:hover { color: var(--ink); }
.sg-tab.on { background: var(--accent); color: #fff; box-shadow: 0 4px 10px rgba(186, 56, 133, 0.24); }

.sg-sheet {
  max-width: 960px; margin: 0 auto;
  font-family: var(--serif-fa); font-size: 17px; color: var(--ink);
}

/* Chord sheet — chord above lyric (mockup cell layout). */
.sg-chords {
  columns: 2; column-gap: 56px; column-rule: 1px solid var(--line);
}
.sg-chords .sec-block { break-inside: avoid; margin-bottom: 14px; }
.sg-chords .section {
  font-family: var(--sans, inherit); font-size: 11px; font-weight: 800;
  letter-spacing: 1.6px; color: var(--accent-deep); text-transform: uppercase; margin: 0 0 6px;
}
.sg-chords .line { display: flex; flex-wrap: wrap; row-gap: 8px; margin-bottom: 6px; }
.sg-chords .cell { display: inline-flex; flex-direction: column; min-height: 46px; }
.sg-chords .chord {
  font-family: var(--sans, inherit); font-size: 13px; font-weight: 800;
  color: var(--accent-deep); letter-spacing: 0.2px; height: 18px; line-height: 18px;
}
.sg-chords .lyric { font-size: 1em; line-height: 26px; white-space: pre; color: var(--ink); }
@media (max-width: 900px) {
  .sg-chords { columns: 1; column-rule: none; }
}

/* Lyrics-only tab. */
.sg-lyrics {
  columns: 2; column-gap: 56px; column-rule: 1px solid var(--line);
  font-size: 18px; line-height: 1.9;
}
.sg-lyrics .sec-block { break-inside: avoid; margin-bottom: 16px; }
.sg-lyrics .section {
  font-family: var(--sans, inherit); font-size: 11px; font-weight: 800;
  letter-spacing: 1.6px; color: var(--accent-deep); text-transform: uppercase; margin: 0 0 6px;
}
.sg-lyrics p { margin: 0; }
@media (max-width: 900px) {
  .sg-lyrics { columns: 1; column-rule: none; }
}

.sg-tab-body { display: none; }
.sg-tab-body.on { display: block; }
.sg-tab-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 0 0 18px; margin-bottom: 18px; border-bottom: 1px solid var(--line); gap: 18px; flex-wrap: wrap; }
.sg-tab-toolbar-right { display: inline-flex; gap: 8px; }
.sg-transpose { display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sg-transpose-label { font-size: 12px; font-weight: 600; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.6px; }
.sg-trans-ctrl { display: inline-flex; align-items: center; gap: 8px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: #fff; direction: ltr; }
.sg-semi-up, .sg-semi-down { width: 32px; height: 32px; border-radius: 999px; border: none; background: var(--paper-2); font-size: 18px; cursor: pointer; color: var(--ink-2); }
.sg-semi-up:hover, .sg-semi-down:hover { background: var(--accent-tint); color: var(--accent); }
.sg-trans-ctrl .display { display: inline-flex; flex-direction: column; align-items: center; min-width: 52px; }
.sg-key-big { font-family: var(--sans, inherit); font-size: 18px; font-weight: 800; color: var(--accent); line-height: 1; }
.sg-original { font-size: 10px; color: var(--ink-3); letter-spacing: 0.3px; }
.sg-reset { background: transparent; border: none; font-family: inherit; font-size: 12.5px; color: var(--ink-3); cursor: pointer; padding: 6px 10px; border-radius: 8px; font-weight: 500; }
.sg-reset:hover { color: var(--accent); background: var(--paper-2); }
.sg-reset:disabled { opacity: 0; pointer-events: none; }
.sg-icon-btn { width: 36px; height: 36px; border-radius: 999px; border: 1px solid var(--line); background: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink-2); padding: 0; }
.sg-icon-btn:hover { border-color: var(--accent); color: var(--accent); }
.sg-icon-btn svg { width: 16px; height: 16px; }
.sg-pdf-viewer { border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2, #f5f5f5); overflow: hidden; }
.sg-pdf-pages { overflow: auto; max-height: 80vh; padding: 16px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.sg-pdf-pages canvas { display: block; max-width: 100%; box-shadow: 0 1px 4px rgba(0,0,0,.12); background: #fff; }
.sg-pdf-toolbar { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; background: #222; border-radius: 0 0 12px 12px; }
.sg-pdf-btn { width: 36px; height: 36px; border-radius: 8px; border: none; background: transparent; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.sg-pdf-btn:hover { background: rgba(255,255,255,.15); }
.sg-pdf-btn svg { width: 18px; height: 18px; }
.sg-pdf-zoom-label { color: #fff; font-size: 13px; min-width: 44px; text-align: center; font-weight: 500; }
.sg-pdf-loading { text-align: center; padding: 60px 0; color: var(--ink-3, #999); }
.sg-notation-dl { text-align: center; padding: 32px 0; }

@media (max-width: 720px) {
  .sg-head { grid-template-columns: 1fr; gap: 18px; }
  .sg-actions { min-width: 0; }
  .sg-info h1 { font-size: 32px; }
  .sg-chords { font-size: 16px; }
  .sg-lyrics { font-size: 17px; }
}

/* Print / Save as PDF — active tab sheet only (chords or lyrics). */
@media print {
  body.sg-printing header.site,
  body.sg-printing footer,
  body.sg-printing .kal-cm-edit-bar,
  body.sg-printing .kal-mini-player,
  body.sg-printing .sg-crumb,
  body.sg-printing .sg-actions,
  body.sg-printing .sg-cv,
  body.sg-printing .sg-tabs-wrap,
  body.sg-printing .sg-tab-toolbar,
  body.sg-printing .sg-player,
  body.sg-printing .sg-meta-row .sg-icon-btn {
    display: none !important;
  }

  body.sg-printing .sg-hero {
    background: none !important;
    border: none !important;
    padding: 0 0 10px !important;
  }
  body.sg-printing .sg-head {
    display: block !important;
    grid-template-columns: none !important;
  }
  body.sg-printing .sg-info .eyebrow {
    font-size: 9pt;
    letter-spacing: 0.2px;
    text-transform: none;
    color: #7a245c;
  }
  body.sg-printing .sg-info h1 {
    font-size: 20pt !important;
    line-height: 1.15 !important;
    margin: 4px 0 6px !important;
    color: #111 !important;
  }
  body.sg-printing .sg-info .artist {
    font-size: 11pt;
    margin: 0 0 4px;
    color: #444;
  }
  body.sg-printing .sg-meta-row .item.key strong { color: #7a245c; }
  body.sg-printing .sg-body { padding: 8px 0 0 !important; }
  body.sg-printing .sg-main { max-width: none !important; }
  body.sg-printing .sg-tab-body:not(.on) { display: none !important; }
  body.sg-printing .sg-tab-body.on { display: block !important; }
  body.sg-printing .sg-sheet {
    max-width: none !important;
    font-size: 11pt;
    color: #111;
  }
  body.sg-printing .sg-chords,
  body.sg-printing .sg-lyrics {
    columns: 2;
    column-gap: 28pt;
    column-rule: 1px solid #ddd;
  }
  body.sg-printing .sg-chords .section,
  body.sg-printing .sg-lyrics .section {
    color: #7a245c;
    letter-spacing: 0.2px;
    text-transform: none;
    font-size: 8.5pt;
  }
  body.sg-printing .sg-chords .chord { color: #7a245c; font-size: 9.5pt; }
  body.sg-printing .sg-chords .cell { min-height: 34px; }
  body.sg-printing .sg-chords .lyric { line-height: 20px; }
  body.sg-printing .sec-block { break-inside: avoid; }

  @page { margin: 14mm 12mm; }
}