/* ============================================================================
   SMART CHART THEME — CLASSIC
   PORTED VERBATIM from sacred-v4.html. Every value (colors, sizes, glyphs,
   spacing, line-heights, shadows) is copied from your file unchanged. The ONLY
   changes are mechanical: (1) selectors renamed to the live DOM's classes,
   (2) a 2-class container prefix + targeted !important on the handful of
   properties the base sheet forces (display, section pill, dark-mode colors),
   so your values actually apply on the live page.
   Source map: .leaf->.lyric-sheet-container.cp-theme-classic | .section->
   .section-marker | .label->__name | .repeat->__repeat | .fleuron->::before |
   .rule->::after | .leaf.centered->.cp-centered
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,600;1,700&display=swap');

/* palettes — verbatim from .leaf.light / .leaf.dark */
.cp-theme-classic.light {
  --ground:#f4ecd8; --ground-deep:#ece0c4; --ink:#2b2117; --ink-soft:#5c4a36;
  --rubric:#a82f1f; --rubric-deep:#8a2417; --gilt:#9c7a32; --gilt-soft:#b9923f; --hair:#b6a079;
  --lyric:#2b2117; --chord:#a82f1f; --songmsg:#a82f1f; --harmony:#2b2117;
}
.cp-theme-classic.dark {
  --ground:#1c160f; --ground-deep:#241c12; --ink:#efe4cb; --ink-soft:#b9a988;
  --rubric:#f0875c; --rubric-deep:#f59868; --gilt:#d9b25a; --gilt-soft:#f0cf7e; --hair:#5a4a2f;
  /* bridge to base sheet's variable names so its var(--lyric)/var(--chord)
     rules render in Classic colors automatically (no override needed) */
  --lyric:#efe4cb; --chord:#f0875c; --songmsg:#f0875c; --harmony:#efe4cb;
}

/* .leaf -> container. font-size:20px lives HERE (lyrics inherit it), exactly
   as in your file (line 68). */
.cp-theme-classic.lyric-sheet-container {
  position:relative; padding:26px 34px; background:var(--ground);
  font-family:'EB Garamond',Garamond,serif; font-size:20px; color:var(--ink);
  -webkit-font-smoothing:antialiased; animation:cp-cla-rise .6s ease both; transition:background .5s;
}
/* beat base `.dark-mode { background:#000!important; padding:0!important }` */
.cp-theme-classic.dark.lyric-sheet-container,
.cp-theme-classic.lyric-sheet-container.dark-mode {
  background-color:var(--ground) !important; padding:26px 34px !important; border-radius:0 !important;
}
.cp-theme-classic.light.lyric-sheet-container {
  background-color:var(--ground) !important; padding:26px 34px !important;
  background-image:radial-gradient(circle at 18% 22%,rgba(156,122,50,.05) 0%,transparent 38%),radial-gradient(circle at 82% 70%,rgba(110,32,24,.04) 0%,transparent 42%);
  box-shadow:0 2px 4px rgba(0,0,0,.3),0 18px 50px rgba(0,0,0,.55),inset 0 0 80px rgba(180,150,90,.12);
}
.cp-theme-classic.dark.lyric-sheet-container {
  background-image:radial-gradient(ellipse at 50% 18%,rgba(217,178,90,.10) 0%,transparent 55%),radial-gradient(circle at 80% 80%,rgba(217,122,85,.05) 0%,transparent 45%);
  box-shadow:0 2px 6px rgba(0,0,0,.6),0 22px 60px rgba(0,0,0,.7),inset 0 0 100px rgba(217,178,90,.06);
}
@keyframes cp-cla-rise { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:none;} }
/* keep children above the frame, but NEVER the absolute canvas/ornament/rail */
.cp-theme-classic.lyric-sheet-container > *:not(.lsc-drawing-canvas):not(.cp-ornament):not(.lyric-section-rail) { position:relative; z-index:1; }
.cp-theme-classic.lyric-sheet-container > .lsc-drawing-canvas { position:absolute !important; top:0 !important; left:0 !important; z-index:10; }
/* hug content, don't stretch in a tall flex/grid parent */
.cp-theme-classic.lyric-sheet-container { align-self:flex-start !important; align-self:start !important; height:fit-content !important; min-height:0 !important; }

/* .border-outer / .border-inner -> pseudo-elements (verbatim values) */
.cp-theme-classic.lyric-sheet-container::before { content:""; position:absolute; inset:12px; border:1.5px solid var(--gilt); pointer-events:none; z-index:0; }
.cp-theme-classic.lyric-sheet-container::after  { content:""; position:absolute; inset:17px; border:.75px solid var(--hair); pointer-events:none; z-index:0; }
.cp-theme-classic.dark.lyric-sheet-container::before { box-shadow:0 0 12px rgba(217,178,90,.25); }
/* .corner fleurons -> injected .cp-corner spans (verbatim) */
.cp-theme-classic .cp-corner { position:absolute; color:var(--gilt); font-size:24px; line-height:1; width:24px; height:24px; text-align:center; z-index:2; }
.cp-theme-classic.dark .cp-corner { text-shadow:0 0 8px rgba(217,178,90,.4); }
.cp-theme-classic .cp-corner.tl{top:5px;left:5px;} .cp-theme-classic .cp-corner.tr{top:5px;right:5px;transform:scaleX(-1);}
.cp-theme-classic .cp-corner.bl{bottom:5px;left:5px;transform:scaleY(-1);} .cp-theme-classic .cp-corner.br{bottom:5px;right:5px;transform:scale(-1,-1);}

/* .incipit -> title plate (verbatim sizes) */
.cp-theme-classic .lyric-title-plate { display:block; text-align:center; margin:4px 0 6px; }
.cp-theme-classic .lyric-title-plate__eyebrow { display:flex; align-items:center; justify-content:center; gap:14px; color:var(--gilt); margin:0 0 8px; min-height:1px; }
.cp-theme-classic .lyric-title-plate__eyebrow::before,
.cp-theme-classic .lyric-title-plate__eyebrow::after { content:""; height:1px; flex:0 0 80px; background:linear-gradient(90deg,transparent,var(--gilt)); }
.cp-theme-classic .lyric-title-plate__eyebrow::after { transform:scaleX(-1); }
.cp-theme-classic .lyric-title-plate__title { font-family:'Cormorant Garamond',serif; font-weight:600; font-size:32px; letter-spacing:.02em; color:var(--ink); margin:0; line-height:1.1; }
.cp-theme-classic.dark .lyric-title-plate__title { text-shadow:0 0 16px rgba(239,228,203,.15); }
.cp-theme-classic .lyric-title-plate__link { color:inherit; text-decoration:none; }
.cp-theme-classic .lyric-title-plate__link:hover { color:var(--rubric); }
.cp-theme-classic .lyric-title-plate__colophon { font-family:'EB Garamond',Garamond,serif; font-variant:small-caps; letter-spacing:.1em; font-size:15px; color:var(--rubric); margin:6px 0 0; }

/* .colophon-line / .key-mark -> meta strip (verbatim) */
.cp-theme-classic .lyric-meta-strip { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:4px 22px; margin:6px auto 0; padding:0; font-style:italic; font-size:15px; color:var(--ink-soft); border:0; }
.cp-theme-classic .lyric-meta-label { font-variant:small-caps; font-style:normal; letter-spacing:.1em; font-size:12px; color:var(--ink-soft); }
.cp-theme-classic .lyric-meta-value { font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:600; color:var(--ink); }
.cp-theme-classic .lyric-meta-key .lyric-meta-value { font-variant:small-caps; letter-spacing:.1em; color:var(--rubric); font-weight:600; }
.cp-theme-classic .lyric-meta-time-select { background:transparent; border:0; color:var(--ink); font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:600; cursor:pointer; }
.cp-theme-classic .lyric-state-pill { cursor:pointer; padding:2px 11px; border:1px solid var(--rubric); border-radius:10px; color:var(--rubric); font-style:italic; font-size:13px; }

/* .section -> .section-marker (verbatim flex row, !important to beat base display:block) */
.cp-theme-classic.lyric-sheet-container .section-marker,
.cp-theme-classic.lyric-sheet-container.dark-mode .section-marker {
  display:flex !important; align-items:baseline !important; gap:10px !important; margin:var(--section-marker-gap-top, 15px) 0 var(--section-marker-gap-bottom, 5px) !important; padding:0 !important; background:transparent !important; border:0 !important;
}
.cp-theme-classic .section-marker:first-child { margin-top:4px !important; }
/* .fleuron -> ::before (YOUR glyph U+2736, size 14px) */
.cp-theme-classic .section-marker::before { content:"\2736"; position:relative !important; font-size:14px; color:var(--gilt); top:-1px; flex-shrink:0; }
.cp-theme-classic.dark .section-marker::before { text-shadow:0 0 6px rgba(217,178,90,.4); }
/* .label -> __name (YOUR 18px, beat base pill + .dark-mode color) */
.cp-theme-classic.lyric-sheet-container .section-marker__name,
.cp-theme-classic.lyric-sheet-container.dark-mode .section-marker__name,
.cp-theme-classic .section-marker__name {
  font-family:'Cormorant Garamond',serif !important; font-variant:small-caps !important; font-weight:700 !important;
  letter-spacing:.13em !important; font-size:18px !important; color:var(--gilt) !important;
  background:transparent !important; border:0 !important; border-radius:0 !important; padding:0 !important; text-transform:none !important;
}
.cp-theme-classic.dark .section-marker__name { text-shadow:0 0 7px rgba(217,178,90,.35); }
.cp-theme-classic .section-marker__name::before { content:none !important; } /* no double fleuron */
/* .repeat -> __repeat (verbatim) */
.cp-theme-classic.lyric-sheet-container .section-marker__repeat,
.cp-theme-classic .section-marker__repeat {
  font-style:italic !important; font-variant:normal !important; text-transform:none !important; font-size:14px !important; color:var(--ink-soft) !important; background:transparent !important; padding:0 !important; border-radius:0 !important; font-family:'EB Garamond',serif !important;
}
.cp-theme-classic .section-marker__note { font-family:'EB Garamond',serif; font-style:italic; font-size:14px; color:var(--ink-soft); margin-left:8px; }
/* .rule -> ::after (verbatim trailing hairline) */
.cp-theme-classic .section-marker::after { content:""; flex:1; height:1px; align-self:center; background:linear-gradient(90deg,var(--hair),transparent); }
/* focal section uses rubric (the live theme's accent for choruses) */
.cp-theme-classic .section-marker--focal .section-marker__name { color:var(--rubric) !important; }

/* .lyrics + .chord -> verbatim (line-height 2.9; chord top -1.05em, 0.82em) */
.cp-theme-classic .lyrics { line-height:var(--clh); margin:0; color:var(--ink); font-size:20px !important; }
.cp-theme-classic.lyric-sheet-container.dark-mode .lyrics { color:var(--ink) !important; }
.cp-theme-classic .lyrics .chord { position:relative; display:inline-block; height:1.2em; vertical-align:baseline; }
.cp-theme-classic .lyrics .chord .chord-text {
  position:absolute; top:var(--ctop); left:0; line-height:1; white-space:nowrap;
  font-family:'Cormorant Garamond',serif; font-weight:700; font-size:0.82em; letter-spacing:.01em; color:var(--rubric);
}
.cp-theme-classic.lyric-sheet-container.dark-mode .lyrics .chord .chord-text { color:var(--rubric) !important; }
.cp-theme-classic.dark .lyrics .chord .chord-text { text-shadow:0 0 9px rgba(240,135,92,.5); }

/* .notation + .rubric-note -> verbatim */
.cp-theme-classic .notation,
.cp-theme-classic .style-chords { font-family:'Cormorant Garamond',serif; font-weight:600; color:var(--rubric-deep); font-size:18px; line-height:1.4; letter-spacing:.02em; background:var(--ground-deep); border-left:2px solid var(--gilt); padding:4px 12px; margin:8px 0; display:inline-block; border-radius:1px; }
/* Standalone chord/bar rows are class .chords (handled above). */
.cp-theme-classic .directive,
.cp-theme-classic .rubric-note { font-style:italic; color:var(--rubric); font-weight:600; }

/* the chord-grid lines (|E---|) — keep them gilt/ink, not the base green */
.cp-theme-classic .chords { color:var(--ink); font-family:'Cormorant Garamond',serif; line-height:1.3; }
.cp-theme-classic.lyric-sheet-container.dark-mode .chords { color:var(--ink) !important; }
/* Standalone chord/bar rows (class is .chords): the bar characters (| - :)
   and the chord spans must be ONE color. The base sheet forces .chords to
   var(--chord) !important, and the chord spans can pick up a different tint —
   so we force both the row and its chord spans to the rubric chord color
   with !important, matching the prototype's single-color bar line. */
.cp-theme-classic .chords,
.cp-theme-classic .chords span.chord,
.cp-theme-classic .chords span.chord span.chord-text {
  color: var(--rubric-deep) !important;
}

/* CENTERED variant — block centered on page, lines left-aligned to a common
   left edge. Lyric lines are bare text nodes + <br> (no .lyrics wrapper), so
   shrink the container to its widest line and auto-center that block. */
.cp-theme-classic.cp-centered.lyric-sheet-container {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: left;
}
.cp-theme-classic.cp-centered .lyrics { text-align:left; }
.cp-theme-classic.cp-centered .tools-panel,
.cp-theme-classic.cp-centered .theme-picker-controls,
.cp-theme-classic.cp-centered .lyric-controls,
.cp-theme-classic.cp-centered .lyric-meta-strip,
.cp-theme-classic.cp-centered .lyric-section-ribbon,
.cp-theme-classic.cp-centered .personal-note { text-align:left; }
.cp-theme-classic.cp-centered .section-marker { justify-content:flex-start !important; }
.cp-theme-classic.cp-centered .section-marker::after { display:none; }
.cp-theme-classic.cp-centered .notation { display:block; margin:8px auto; }
.cp-theme-classic.cp-centered .lyric-title-plate { text-align:center; }

/* ============================================================================
   INJECTED CHROME — elements the live page adds that your prototype lacked
   (tools panel, ribbon, cheats). Styled in the same manuscript idiom; values
   chosen to harmonize, not from your file since it had none.
   ============================================================================ */
.cp-theme-classic .lyric-controls { text-align:center; margin:18px 0 0; background:transparent !important; }
.cp-theme-classic.lyric-sheet-container.dark-mode .lyric-controls { background:transparent !important; }
.cp-theme-classic .tools-toggle { background:#d35400; color:#fff; border:0; border-radius:2px; padding:10px 18px; cursor:pointer; font-family:'Cormorant Garamond',serif; font-variant:small-caps; font-weight:700; font-size:15px; letter-spacing:.12em; }
.cp-theme-classic .tools-toggle[aria-expanded="true"] { background:#b8470a; color:#fff; }
.cp-theme-classic .tools-panel { margin-top:12px; padding:16px 18px; background:var(--ground-deep); border:1px solid var(--hair); border-radius:2px; display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; justify-content:center; }
.cp-theme-classic .tools-panel > div { display:flex; align-items:center; gap:8px; }
.cp-theme-classic .tools-panel label { font-variant:small-caps; font-size:13px; letter-spacing:.08em; color:var(--ink-soft); }
.cp-theme-classic .tools-panel button, .cp-theme-classic .tools-panel select, .cp-theme-classic .lyric-theme-select { background:transparent; color:var(--ink); border:1px solid var(--hair); border-radius:2px; font-family:'EB Garamond',serif; font-size:15px; padding:4px 11px; cursor:pointer; }
.cp-theme-classic .tools-panel button:hover, .cp-theme-classic .lyric-theme-select:hover { border-color:var(--gilt); color:var(--gilt); }
.cp-theme-classic .lyric-section-ribbon { display:flex; flex-wrap:wrap; gap:3px 5px; align-items:center; justify-content:center; margin:15px 0 0; }
.cp-theme-classic.lyric-sheet-container .lyric-ribbon-chip,
.cp-theme-classic.lyric-sheet-container.dark-mode .lyric-ribbon-chip { background:transparent !important; border:0 !important; color:var(--gilt) !important; font-family:'Cormorant Garamond',serif; font-variant:small-caps; font-weight:700; font-size:15px; }
.cp-theme-classic.lyric-sheet-container .lyric-ribbon-chip[data-section-type="chorus"],
.cp-theme-classic.lyric-sheet-container.dark-mode .lyric-ribbon-chip[data-section-type="chorus"] { color:var(--rubric) !important; }
.cp-theme-classic .lyric-chord-cheats { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:4px 12px; margin:13px 0 0; }
.cp-theme-classic .lyric-chord-cheats-label { font-variant:small-caps; font-size:12px; letter-spacing:.1em; color:var(--ink-soft); margin-right:4px; }
.cp-theme-classic .lyric-chord-cheat { font-family:'Cormorant Garamond',serif; font-weight:700; font-size:17px; color:var(--rubric); }
.cp-theme-classic .section-vocalist-chip { font-style:italic; font-size:13px; color:var(--ink-soft); margin-left:8px; }
.cp-theme-classic .personal-note { font-style:italic; font-size:.72em; background:rgba(168,47,31,.08); border-bottom:1px dotted var(--rubric); color:var(--rubric-deep); padding:0 4px; margin:0 3px; cursor:pointer; vertical-align:middle; }
/* per-type ribbon overrides to beat base [data-section-type] !important bands */
.cp-theme-classic.lyric-sheet-container .section-marker[data-section-type] { background:transparent !important; border-left:0 !important; padding:0 !important; }

/* section rail (sticky right-edge jump nav) — themed to match */
.cp-theme-classic .lyric-section-rail-item { color:var(--gilt) !important; font-family:'Cormorant Garamond',serif; font-variant:small-caps; font-weight:700; font-size:13px; }
.cp-theme-classic .lyric-section-rail-item:hover { color:var(--rubric) !important; }