/* chords on the start page: its own zinc-dark theme (the one the app boots
   in), the logo orange as the single accent, hairlines instead of shadows —
   and the song view drawn the way app.css draws it: a chord chip over each
   lyric fragment, the "Used" bar above, section tags as outlined pills,
   lyrics in Geist Mono. */
.il-chords { --il: #f97316; }
.il-chords .il-name { font-family: "Geist", sans-serif; font-weight: 700; letter-spacing: -0.02em; }
/* The glyph is a mask, so one file takes each place's own accent: chords' logo
   (the arc and its five strings) with the two colours flattened to one. */
.il-chords .il-name::before, .band-chords .band-name::before {
  -webkit-mask: url("../marks/chords-glyph.svg") center / contain no-repeat; mask: url("../marks/chords-glyph.svg") center / contain no-repeat;
  margin-right: 0.4em; transform: scale(1.1);
}
.il-chords .il-name::before { background: #f97316; }

.band-chords {
  --band-line: #27272a; --band-accent: #f97316; --band-on-accent: #ffffff;
  background: #09090b; color: #fafafa; font-family: "Geist", system-ui, sans-serif;
}
.band-chords .band-name { font-weight: 700; letter-spacing: -0.03em; }
/* The band's title wears the full-colour app icon instead of the mask. */
.band-chords .band-name::before {
  -webkit-mask: none; mask: none; transform: none;
  background: url("../marks/chords-icon.svg") center / contain no-repeat;
}
.band-chords .band-facts li { color: #a1a1aa; }
.band-chords .band-links a { border-radius: 8px; font-weight: 600; font-size: 0.875rem; }
.ch-app { border: 1px solid #27272a; border-radius: 8px; background: #09090b; overflow: hidden; max-width: 28rem; margin-left: auto; }
.ch-head { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem 1rem; border-bottom: 1px solid #27272a; }
.ch-head-text { min-width: 0; }
.ch-title { display: block; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; }
.ch-sub { display: block; font-size: 0.8125rem; color: #a1a1aa; }
/* The standing "you are the controller" marker, dot and all. */
.ch-live {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.625rem; border-radius: 999px;
  border: 1px solid #f97316; background: color-mix(in srgb, #f97316 14%, transparent);
  color: #f97316; font-size: 0.75rem; font-weight: 600; line-height: 1;
}
.ch-live i { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: #f97316; animation: ch-pulse 2s ease-in-out infinite; }
@keyframes ch-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.ch-used { display: flex; align-items: center; gap: 0.375rem; padding: 0.4375rem 1rem; border-bottom: 1px solid #27272a; }
.ch-used-label { margin-right: 0.25rem; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #a1a1aa; }
.ch-used-chip { font-family: "Geist Mono", monospace; font-size: 0.75rem; font-weight: 700; padding: 0.125rem 0.5rem; border-radius: 6px; background: color-mix(in oklab, #f97316 14%, transparent); color: #f97316; }
.ch-sheet { padding: 1rem; font-family: "Geist Mono", monospace; font-size: 0.875rem; line-height: 1.65; }
.ch-section {
  display: inline-block; margin: 0 0 0.5rem; padding: 0.1875rem 0.5625rem;
  border: 1px solid #27272a; border-radius: 999px; background: #09090b;
  font-family: "Geist", system-ui, sans-serif; font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em; color: #a1a1aa;
}
.ch-line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0 2px; margin-bottom: 0.25rem; }
.ch-line + .ch-section { margin-top: 1.125rem; }
.ch-token { display: inline-flex; flex-direction: column; align-items: flex-start; white-space: pre; max-width: 100%; }
.ch-chip {
  margin-bottom: 3px; padding: 1px 6px; border-radius: 6px;
  font-family: "Geist", system-ui, sans-serif; font-size: 0.693rem; font-weight: 700; line-height: 1.3;
  background: color-mix(in oklab, #f97316 14%, transparent); color: #f97316;
}
/* A fragment with no chord keeps the line's baseline where the others put it. */
.ch-nochip { margin-top: calc(0.693rem + 3px + 0.2em); }
.ch-lyric { white-space: pre-wrap; overflow-wrap: anywhere; }
.ch-foot { display: flex; align-items: center; gap: 0.75rem; padding: 0.6875rem 1rem; border-top: 1px solid #27272a; font-size: 0.75rem; color: #a1a1aa; }
.ch-auto { margin-left: auto; font-family: "Geist Mono", monospace; }
@media (prefers-reduced-motion: reduce) { .ch-live i { animation: none; } }