/* ============================================================================
   SMART CHART THEME — CLEAN
   ----------------------------------------------------------------------------
   This is the CURRENT chart look, lifted verbatim into a theme bundle so the
   existing appearance becomes one of three peer themes (Clean / Industrial /
   Classic) and NOTHING is lost. Every value here is copied exactly from the
   live css/lyric-sheet-chords.css as of this extraction — see CLEAN-SOURCE-MAP
   comments inline for the original line each value came from.

   IMPORTANT — this round is ADDITIVE ONLY:
   The base css/lyric-sheet-chords.css is NOT edited. Its hardcoded colors and
   !important flags still win in the live page. So adding this file changes
   nothing on its own — it is here so you can preview Clean (via the prototype)
   and confirm the values match before the base-sheet refactor is done in a
   later, separate, backed-up step. Revert = delete this file. Zero risk.

   VARIANTS:  cp-theme-clean light  (default, warm cream)
              cp-theme-clean dark   (the existing "stage" / .dark-mode palette)
   ========================================================================== */

/* ---- THE BUNDLE: light (current default look) -------------------------- */
.cp-theme-clean.light {
  /* surfaces */
  --ground:#f4ecd8;          /* base bg — src line 947 */
  --ground-2:#f5f5f5;        /* panel/notation bg — src 179/388 */
  --surface:#f5f5f5; --surface-2:#f0f0f0;
  --line:#ddd; --line-bright:#333;
  /* text */
  --lyric:#000000;           /* lyrics — src 77 */
  --text:#000; --text-dim:#333; --text-faint:#666;
  /* chart semantics (the burnt-orange/teal current identity) */
  --chord:#d35400;           /* chords — src 84 / 104 */
  --songmsg:#16a085;         /* inline song message teal — src 91 */
  --songmsg-alt:#cc6600;     /* CKE inline songmsg — src 647 */
  --harmony:#000000;         /* harmonies — src 98 */
  --chord-plain:#009900;     /* chord-only span — src 634 */
  --chord-plain-bg:#e6ffe6; --chord-plain-border:#009900;
  --songblock-bg:#fff8dc; --songblock-border:#ffa500; --songblock-text:#664400; /* src 656-661 */
  --section-header:#333; --section-header-border:#333;  /* src 684/687 */
  /* meta-strip (cream/rust ribbon — src 1108-1188) */
  --meta-line:#D6C9A9; --meta-text:#6B5938; --meta-label:#8A7755;
  --meta-value:#2A2419; --meta-accent:#B8581D; --meta-accent-deep:#9C4A18;
  --meta-pill-text:#F4ECD8;
  /* tools panel buttons (src 282-440) */
  --btn-primary:#007bff; --btn-primary-hover:#0056b3;
  --btn-ok:#28a745; --btn-ok-hover:#218838;
  --btn-neutral:#6c757d; --btn-neutral-hover:#5a6268; --btn-neutral-active:#545b62;
  --btn-text:#fff;
  --note-bg:#fff3cd; --note-line:#ffc107; --note-text:#664400;  /* src 447-448 */
  --chart-font:Calibri,Arial,sans-serif;
  --mono-font:'Menlo','Consolas','Courier New',monospace;
}

/* ---- THE BUNDLE: dark (the existing "stage" palette) ------------------- */
.cp-theme-clean.dark {
  --ground:#000000;          /* pure black stage — src 710 */
  --ground-2:#2a2a2a;        /* notation bg — src 772 */
  --surface:#000; --surface-2:#23272b;
  --line:#333; --line-bright:#666;
  --lyric:#88bbff;           /* softer blue — src 729 */
  --text:#d4d4d4; --text-dim:#888; --text-faint:#777;   /* src 711/1195/1203 */
  --chord:#ffcc66;           /* softer gold — src 734/749 */
  --songmsg:#66ff66;         /* softer green — src 739 */
  --songmsg-alt:#ffcc66;
  --harmony:#88bbff;         /* src 744 */
  --chord-plain:#00ff00;     /* bright green — src 777/795 */
  --chord-plain-bg:#1a2a1a; --chord-plain-border:#00ff00;
  --songblock-bg:#3a3000; --songblock-border:#ffa500; --songblock-text:#ffcc66; /* src 782-784 */
  --section-header:#ffa500; --section-header-border:#666;  /* src 788-789 */
  --meta-line:#3a3a3a; --meta-text:#888; --meta-label:#777;
  --meta-value:#d4d4d4; --meta-accent:#ffcc66; --meta-accent-deep:#ffa500;
  --meta-pill-text:#000;
  --btn-primary:#343a40; --btn-primary-hover:#23272b;
  --btn-ok:#28a745; --btn-ok-hover:#218838;
  --btn-neutral:#6c757d; --btn-neutral-hover:#5a6268; --btn-neutral-active:#545b62;
  --btn-text:#e8e8e8;
  --note-bg:#2a2a1a; --note-line:#6a6a4a; --note-text:#d4d4d4;
  --chart-font:Calibri,Arial,sans-serif;
  --mono-font:'Menlo','Consolas','Courier New',monospace;
}

/* ---- CONTAINER --------------------------------------------------------- */
.cp-theme-clean.lyric-sheet-container { background:var(--ground); color:var(--lyric); font-family:var(--chart-font); padding:26px 34px !important; }

/* ---- LYRICS / CHORDS / MESSAGES / HARMONIES ---------------------------- */
.cp-theme-clean .lyrics { color:var(--lyric); line-height:var(--clh); margin-top:0; }
.cp-theme-clean .chords,
.cp-theme-clean .style-chords { color:var(--chord); line-height:1.3rem; }
.cp-theme-clean .songmsg,
.cp-theme-clean .style-songmsg { color:var(--songmsg); font-style:italic; line-height:1.5rem; }
.cp-theme-clean .harmonies,
.cp-theme-clean .style-harmonies { color:var(--harmony); text-decoration:underline; }
.cp-theme-clean span.chord span.chord-text { color:var(--chord); }
.cp-theme-clean span.style-chords {
  display:inline; color:var(--chord-plain); font-weight:bold; font-size:20px;
  background-color:var(--chord-plain-bg); padding:2px 6px; border-left:3px solid var(--chord-plain-border);
  font-family:'Courier New',monospace; white-space:nowrap; margin:0 3px;
}
.cp-theme-clean .style-songmsg-block {
  display:block; background-color:var(--songblock-bg); border-left:4px solid var(--songblock-border);
  padding:10px 15px; margin:10px 0; font-style:italic; color:var(--songblock-text); font-size:18px;
}
.cp-theme-clean .style-section-header {
  font-weight:bold; font-size:20px; color:var(--section-header); text-transform:uppercase;
  margin:15px 0 5px 0; border-bottom:2px solid var(--section-header-border); padding-bottom:3px; display:block;
}

/* ---- META-STRIP (cream/rust ribbon — exact copy) ----------------------- */
.cp-theme-clean .lyric-meta-strip {
  display:flex; align-items:center; flex-wrap:wrap; gap:0; margin:0 0 22px 0; padding:8px 0;
  border-top:.5px solid var(--meta-line); border-bottom:.5px solid var(--meta-line);
  font-family:var(--mono-font); font-size:12px; color:var(--meta-text); letter-spacing:.04em; user-select:none;
}
.cp-theme-clean .lyric-meta-item { display:inline-flex; align-items:center; gap:6px; padding:0 14px; border-left:.5px solid var(--meta-line); line-height:1.6; }
.cp-theme-clean .lyric-meta-item:first-child { padding-left:0; border-left:0; }
.cp-theme-clean .lyric-meta-label { color:var(--meta-label); text-transform:uppercase; font-size:11px; }
.cp-theme-clean .lyric-meta-value { color:var(--meta-value); font-weight:500; }
.cp-theme-clean .lyric-meta-key .lyric-meta-value { color:var(--meta-accent); }
.cp-theme-clean .lyric-meta-time-select { font-family:inherit; font-size:12px; background:transparent; border:0; color:var(--meta-value); font-weight:500; cursor:pointer; padding:0 2px; margin:0; appearance:none; -webkit-appearance:none; }
.cp-theme-clean .lyric-meta-time-select:focus { outline:1px solid var(--meta-accent); outline-offset:1px; }
.cp-theme-clean .lyric-meta-spacer { flex:1; min-width:8px; }
.cp-theme-clean .lyric-state-pill {
  display:inline-flex; align-items:center; gap:4px; padding:2px 10px; margin-right:2px; border-radius:999px;
  background:var(--meta-accent); color:var(--meta-pill-text); font-family:var(--mono-font); font-size:11px;
  font-weight:500; letter-spacing:.05em; cursor:pointer; transition:background .15s ease;
}
.cp-theme-clean .lyric-state-pill:hover { background:var(--meta-accent-deep); }

/* ---- TOOLS PANEL BUTTONS (current button palette) ---------------------- */
.cp-theme-clean .tools-panel button { background-color:var(--btn-neutral); color:var(--btn-text); border:none; }
.cp-theme-clean .tools-panel button:hover { background-color:var(--btn-neutral-hover); }
.cp-theme-clean .tools-panel button.active { background-color:var(--btn-ok); }
.cp-theme-clean .transpose-up, .cp-theme-clean .capo-up { background-color:var(--btn-ok); color:var(--btn-text); }
.cp-theme-clean .transpose-up:hover, .cp-theme-clean .capo-up:hover { background-color:var(--btn-ok-hover); }
.cp-theme-clean .toggle-theme { background-color:var(--btn-primary); color:var(--btn-text); }
.cp-theme-clean .toggle-theme:hover { background-color:var(--btn-primary-hover); }

/* ---- PERSONAL NOTES ---------------------------------------------------- */
.cp-theme-clean .personal-note { background-color:var(--note-bg); border-left:3px solid var(--note-line); color:var(--note-text); }

/* NOTE: plain-text / print mode (src ~829-878, 1007-1038) is print-media and
   all-black by design; it is theme-independent and intentionally NOT
   variableized here — it should look the same in every theme. Left to the
   base sheet. */

/* ---- THEME PICKER dropdown ---------------------------------------------- */
.cp-theme-clean .theme-picker-controls { display:flex; align-items:center; gap:5px; }
.cp-theme-clean .theme-picker-controls label { font-size:11px; color:var(--meta-label); }
.cp-theme-clean .lyric-theme-select {
  background-color:var(--btn-neutral); color:var(--btn-text); border:none;
  padding:5px 10px; font-size:13px; cursor:pointer; border-radius:3px;
}

/* ---- TITLE PLATE: Clean keeps today's look (page title stays the title),
   so the injected plate is hidden here. Industrial/Classic reveal & style it. */
.cp-theme-clean .lyric-title-plate { display:none; }

/* ---- SECTION TITLES: larger, more readable in Clean (per J). The base
   .section-marker__name is 0.62em (relative to the large lyric font);
   bump it up so section labels like PIANO INTRO / VERSE 1 read bigger.
   Scoped to Clean so Classic/Industrial keep their own sizing. */
.cp-theme-clean .section-marker__name {
  font-size: 18px !important;
  letter-spacing: 0.08em !important;
}

/* ---- CENTERED variant: Clean had no cp-centered rules, so the Center button
   did nothing here. Lyric lines are bare text nodes + <br> inside the
   container (no .lyrics wrapper). To center the BLOCK on the page while keeping
   every line starting from the same left edge, shrink the container to its
   widest line (fit-content) and auto-center it; text stays left-aligned. */
.cp-theme-clean.cp-centered.lyric-sheet-container {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  text-align: left;
}
.cp-theme-clean.cp-centered .lyrics { text-align:left; }
.cp-theme-clean.cp-centered .tools-panel,
.cp-theme-clean.cp-centered .theme-picker-controls,
.cp-theme-clean.cp-centered .lyric-controls,
.cp-theme-clean.cp-centered .lyric-meta-strip,
.cp-theme-clean.cp-centered .lyric-section-ribbon,
.cp-theme-clean.cp-centered .personal-note { text-align:left; }
.cp-theme-clean.cp-centered .section-marker { justify-content:flex-start !important; }
.cp-theme-clean.cp-centered .section-marker::after { display:none; }