/* Open Source Orchestrator — style.css · CC0
 * Design language shared with opensourceorchestra.org: night-violet stage,
 * gold accents, Iowan/Palatino serif — the chart itself stays a paper
 * songbook page (readable on stage, faithful in print).
 */
:root {
  --night: #0b0612;
  --violet: #2a1740;
  --deep: #1e1836;
  --panel: #161226;
  --plum: #3d1c42;
  --gold: #f0c464;
  --gold-hi: #e8c476;
  --gold-deep: #c9962e;
  --gold-soft: rgba(240, 196, 100, 0.35);
  --rose: #e86a92;
  --lav: #a79cc4;
  --cream: #fff3d6;
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif;
  --sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* the paper songbook page */
  --ink: #1b1b1b;
  --paper: #fbf7ec;
  --accent: #7a3e12;
  --accent2: #0e5c46;
  --faint: #8a8a8a;
  --chip: #efe7d8;
  --chipink: #5a3410;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--cream);
  background: var(--night);
  background-image:
    radial-gradient(1200px 600px at 70% -10%, rgba(61, 28, 66, 0.55), transparent 60%),
    radial-gradient(900px 500px at 10% 110%, rgba(42, 23, 64, 0.6), transparent 60%),
    repeating-linear-gradient(180deg, transparent 0 90px, rgba(240, 196, 100, 0.035) 90px 91px);
  font-family: var(--serif);
  line-height: 1.45;
}

/* ---------- musically alive background: drifting notes (CSS only) ---------- */
.notes-sky {
  position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none;
}
.notes-sky span {
  position: absolute; bottom: -8vh;
  color: var(--gold); opacity: 0;
  font-size: 22px; text-shadow: 0 0 12px rgba(240, 196, 100, 0.35);
  animation: notefloat var(--dur, 40s) linear var(--delay, 0s) infinite;
}
@keyframes notefloat {
  0%   { transform: translateY(0) translateX(0) rotate(-8deg); opacity: 0; }
  8%   { opacity: 0.13; }
  50%  { transform: translateY(-55vh) translateX(2.2vw) rotate(6deg); opacity: 0.1; }
  92%  { opacity: 0.05; }
  100% { transform: translateY(-112vh) translateX(-1.5vw) rotate(-6deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .notes-sky { display: none; }
}

main, header.site, footer.site { position: relative; z-index: 1; }

header.site {
  padding: 30px 20px 20px; text-align: center;
  border-bottom: 1px solid rgba(240, 196, 100, 0.22);
}
header.site h1 {
  margin: 0; font-size: 32px; letter-spacing: 0.5px; color: var(--gold);
  text-shadow: 0 0 24px rgba(240, 196, 100, 0.25);
}
header.site h1 small { display: block; font-size: 13px; color: var(--lav); font-weight: normal; margin-top: 7px; letter-spacing: 0.14em; text-transform: uppercase; }
header.site .mission { max-width: 640px; margin: 12px auto 0; color: var(--lav); font-size: 14.5px; font-style: italic; }
header.site a { color: var(--gold-hi); }

main { max-width: 980px; margin: 0 auto; padding: 18px 16px 80px; }

.card {
  background: rgba(22, 18, 38, 0.82); border: 1px solid rgba(240, 196, 100, 0.18);
  border-radius: 14px; padding: 18px 20px; margin: 20px 0;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(2px);
}
.card > h2 { margin: 0 0 4px; font-size: 21px; color: var(--gold-hi); }
.card > h2 .stepno { color: var(--rose); }
.card .sub { margin: 0 0 12px; color: var(--lav); font-size: 13.5px; }

.hint { color: var(--lav); font-size: 13px; }
.hint a, .card a { color: var(--gold-hi); }
code { background: rgba(240, 196, 100, 0.12); color: var(--gold-hi); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

button {
  font-family: var(--sans); font-size: 14px; cursor: pointer;
  background: rgba(240, 196, 100, 0.08); color: var(--cream);
  border: 1.5px solid rgba(240, 196, 100, 0.4); border-radius: 8px; padding: 7px 14px;
}
button:hover { border-color: var(--gold); color: var(--gold); }
button.primary { background: var(--gold-deep); color: #241a05; border-color: var(--gold-deep); font-weight: bold; }
button.primary:hover { background: var(--gold); border-color: var(--gold); color: #241a05; }

/* ---------- step 1 tabs ---------- */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.tabs button { border-radius: 999px; font-size: 13px; }
.tabs button.on { background: var(--gold); color: #241a05; border-color: var(--gold); font-weight: bold; }
.tabpane textarea {
  width: 100%; min-height: 180px; font-family: 'Courier New', monospace; font-size: 13px;
  border: 1px solid rgba(240, 196, 100, 0.3); border-radius: 8px; padding: 10px;
  background: rgba(11, 6, 18, 0.7); color: var(--cream);
}
.tabpane textarea::placeholder { color: #6f6592; }
.filein { margin: 8px 0; font-size: 14px; color: var(--lav); }
.filein input { color: var(--lav); }
.cat-artist h4 { margin: 10px 0 6px; color: var(--gold-hi); }
.cat-songs { display: flex; flex-wrap: wrap; gap: 8px; }
.cat-song { font-size: 13px; }

/* ---------- step 2: the paper songbook page on the dark stage ---------- */
#step2 { background: var(--paper); color: var(--ink); border-color: rgba(240, 196, 100, 0.45); }
#step2 > h2 { color: var(--accent); }
#step2 .sub { color: var(--faint); }
#step2 button { background: #fff; color: var(--ink); border-color: #c9bfa8; font-family: var(--sans); }
#step2 button:hover { border-color: var(--accent); color: var(--accent); }

.toolbar {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 8px 0 14px; border-bottom: 1px dashed #ddd3bd; margin-bottom: 14px;
}
.toolbar .group { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.toolbar label { font-size: 12px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--sans); }
.instr button.on, #step2 .instr button.on { background: var(--accent2); color: #fff; border-color: var(--accent2); }

.meta-grid { display: grid; grid-template-columns: 2fr 2fr 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.meta-grid input, #m-comment {
  font-family: var(--serif); font-size: 14px; padding: 6px 9px;
  border: 1px solid #d5cbb4; border-radius: 7px; background: #fffdf8; width: 100%; color: var(--ink);
}
#m-comment { margin-bottom: 6px; font-size: 12.5px; color: #7a6a4a; }

.pv-head { text-align: center; margin: 6px 0 14px; }
.pv-head h3 { margin: 0; font-size: 24px; color: var(--ink); }
.pv-head .pv-sub { color: var(--faint); font-size: 13px; }
.pv-head .pv-note { color: #a3701c; font-size: 12px; font-style: italic; margin-top: 3px; }

.sec { margin: 0 0 20px; }
.sec-head { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; }
.sec-label {
  font-family: var(--sans); font-size: 13px; font-weight: bold; letter-spacing: 0.04em;
  border: 1px dashed #cfc4aa; border-radius: 6px; padding: 3px 8px; background: transparent;
  color: var(--accent2); width: 200px;
}
.sec-rep, .sec-del { font-size: 12px; padding: 3px 8px; }
.sec-head-print { display: none; font-weight: bold; color: var(--accent2); font-size: 13px; margin-bottom: 2px; }

.line { margin: 2px 0 10px; position: relative; }
.ln-split {
  display: none; position: absolute; left: -34px; bottom: 2px;
  font-size: 11px; padding: 1px 6px; border-color: #ddd3bd; color: var(--faint);
}
.line:hover .ln-split { display: inline-block; }
.tok { display: inline-block; vertical-align: bottom; }
.tok .sp { display: inline-block; width: 0.45em; }
.chip {
  display: block; min-height: 17px; font-family: var(--sans);
  font-size: 12.5px; font-weight: bold; color: var(--chipink);
  cursor: pointer; line-height: 17px; padding: 0 2px; border-radius: 4px;
}
.chip.has { background: var(--chip); }
.chip.has:hover { outline: 2px solid var(--accent); }
.chip.empty { color: transparent; }
.tok:hover .chip.empty { color: #c9b995; background: #f6f0e2; }
.word { font-size: 16px; cursor: pointer; }
.word:hover { text-decoration: underline dotted #b89; }

/* chord popover */
#chordpop {
  display: none; position: absolute; z-index: 50;
  background: #fff; color: var(--ink); border: 1.5px solid var(--accent); border-radius: 10px;
  padding: 10px 12px; box-shadow: 0 6px 18px rgba(20, 10, 30, 0.35); width: 230px;
}
#chordpop .at { font-size: 11px; color: var(--faint); margin-bottom: 6px; font-family: var(--sans); }
#pop-input {
  width: 100%; font-family: var(--sans); font-weight: bold; font-size: 16px;
  padding: 5px 8px; border: 1px solid #cbbfa2; border-radius: 6px; margin-bottom: 8px;
}
#chordpop .row { display: flex; gap: 6px; }
#chordpop button { font-size: 12px; padding: 4px 9px; background: #fff; color: var(--ink); border-color: #c9bfa8; }
#chordpop button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }

/* diagrams strip */
.diag-title { margin: 18px 0 6px; font-size: 13px; letter-spacing: 0.1em; color: var(--faint); font-family: var(--sans); }
.diag-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.diag {
  margin: 0; text-align: center; background: #fff;
  border: 1px solid #e7dfc9; border-radius: 8px; padding: 6px 8px 2px;
}
.diag figcaption { font-family: var(--sans); font-weight: bold; font-size: 13px; margin-bottom: 2px; color: var(--ink); }
.noshape { width: 120px; height: 90px; border: 1px dashed #ccc; border-radius: 8px;
  display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: 11px; }

/* ---------- step 3 ---------- */
.exports { display: flex; flex-wrap: wrap; gap: 10px; }
.roadmap { margin-top: 10px; font-size: 12.5px; color: var(--lav); }

footer.site {
  text-align: center; color: var(--lav); font-size: 12.5px; padding: 24px 16px 40px;
  border-top: 1px solid rgba(240, 196, 100, 0.22);
}
footer.site a { color: var(--gold-hi); }

/* ---------- print: the songbook page, pure paper ---------- */
@media print {
  body { background: #fff !important; color: var(--ink); }
  .notes-sky, header.site, footer.site, #step1, #step3, .toolbar, .meta-grid, #m-comment,
  .no-print-controls, #chordpop, .card > h2, .card .sub, .ln-split { display: none !important; }
  main { max-width: none; padding: 0; }
  .card, #step2 { border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; background: #fff !important; backdrop-filter: none; }
  .sec-head-print { display: block; }
  .sec { break-inside: avoid; }
  .chip.has { background: none; padding: 0; }
  .chip.empty { display: none; }
  .diag { border: none; padding: 0; }
  .diag-row { gap: 10px; }
  .pv-note { color: #777 !important; }
}

@media (max-width: 640px) {
  .meta-grid { grid-template-columns: 1fr 1fr; }
  .ln-split { left: -6px; bottom: -14px; }
}