/* Liner Notes: the song page as a printed booklet. Cream stock, black ink,
   one vermilion accent and a highlighter for whatever is being sung. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght,SOFT,WONK@0,9..144,300..800,0..100,0..1;1,9..144,300..800,0..100,0..1&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

body[data-song-style='liner'] {
  --stock: #f3ede2;
  --stock-deep: #ebe3d4;
  --ink: #1d1a16;
  --muted: #6f675b;
  --faint: #a59b8b;
  --rule: #1d1a1624;
  --line: #1d1a1624;
  --paper: #f8f4ec;
  --green: #d9401f;
  --red: #d9401f;
  --marker: #ffd23f;
  --serif: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;
  position: relative;
  isolation: isolate;
  background: var(--stock);
  color: var(--ink);
  font: 400 15px/1.55 var(--serif);
  font-variation-settings: 'opsz' 14;
}
/* Paper fibre: fine noise multiplied into the stock. */
body[data-song-style='liner']::after {
  content: '';
  position: fixed;
  z-index: -1;
  inset: 0;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  pointer-events: none;
}
body[data-song-style='liner'] ::selection {
  background: var(--marker);
  color: var(--ink);
}
body[data-song-style='liner'] button:focus-visible,
body[data-song-style='liner'] a:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}
body[data-song-style='liner'] button,
body[data-song-style='liner'] select,
body[data-song-style='liner'] input {
  border-radius: 0;
}

/* Masthead */
body[data-song-style='liner'] .site-header {
  border-bottom: 0;
  background: transparent;
  box-shadow: inset 0 -1px var(--ink), inset 0 -4px var(--stock), inset 0 -5px var(--ink);
}
body[data-song-style='liner'] .site-header .brand {
  color: var(--ink);
  font: 600 26px/1 var(--serif);
  font-variation-settings: 'opsz' 72, 'SOFT' 100, 'WONK' 1;
  letter-spacing: -0.03em;
}
body[data-song-style='liner'] .header-library {
  color: var(--ink);
  font: 500 11px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
body[data-song-style='liner'] .header-library:hover {
  color: var(--red);
}
body[data-song-style='liner'] .header-search-field {
  border: 0;
  border-bottom: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
}
body[data-song-style='liner'] .header-search-field:focus-within {
  box-shadow: 0 1px var(--red);
  border-bottom-color: var(--red);
}
body[data-song-style='liner'] .header-search input {
  font-style: italic;
}
body[data-song-style='liner'] .header-search input::placeholder {
  color: var(--faint);
}
body[data-song-style='liner'] .header-search-icon {
  color: var(--ink);
}
body[data-song-style='liner'] .header-search .header-search-submit {
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 500 10px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
body[data-song-style='liner'] .header-search .header-search-submit:hover {
  background: var(--ink);
  color: var(--stock);
}
body[data-song-style='liner'] #header-results {
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  box-shadow: 6px 6px 0 var(--rule);
}
body[data-song-style='liner'] #header-results a {
  border-radius: 0;
}
body[data-song-style='liner'] #header-results a:hover,
body[data-song-style='liner'] #header-results a:focus {
  background: var(--stock-deep);
}

/* Breadcrumb and debug pickers */
body[data-song-style='liner'] main {
  padding-top: 26px;
}
body[data-song-style='liner'] .song-breadcrumb {
  color: var(--muted);
  font: 400 11px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body[data-song-style='liner'] .song-breadcrumb a {
  color: var(--muted);
  text-decoration: none;
}
body[data-song-style='liner'] .song-breadcrumb a:hover {
  color: var(--red);
}
body[data-song-style='liner'] .song-style-picker {
  font-family: var(--mono);
  font-weight: 500;
  letter-spacing: 0.04em;
}
body[data-song-style='liner'] .song-style-picker small {
  color: var(--red);
}
body[data-song-style='liner'] select {
  border: 1px solid var(--ink);
  background-color: var(--paper);
  color: var(--ink);
}

/* Hero: an editorial title page, artwork mounted on the right */
body[data-song-style='liner'] .song-overview > .hero {
  position: relative;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 32px;
  align-items: end;
  margin-bottom: 26px;
  padding: 22px 0 26px;
  border: 0;
  border-bottom: 1px solid var(--ink);
  background: none;
  box-shadow: none;
}
body[data-song-style='liner'] .hero .artwork-cover {
  order: 2;
  width: 190px;
  height: 190px;
  padding: 0;
  border: 8px solid var(--paper);
  border-radius: 0;
  background: var(--stock-deep);
  box-shadow:
    0 0 0 1px var(--rule),
    0 1px 1px #1d1a1610,
    0 14px 28px -14px #1d1a1666;
  transform: rotate(1.4deg);
  transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body[data-song-style='liner'] .hero .artwork-cover:hover {
  transform: rotate(0deg) translateY(-3px);
}
body[data-song-style='liner'] .hero .artwork-cover img {
  border-radius: 0;
}
body[data-song-style='liner'] .hero .artwork-cover > span {
  color: var(--red);
  font: italic 300 64px var(--serif);
}
body[data-song-style='liner'] .hero .identity {
  order: 1;
}
body[data-song-style='liner'] .hero .identity::before {
  content: 'The Lead Sheet — Vocal, chords & lyrics';
  display: block;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  color: var(--red);
  font: 500 10.5px/1.4 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
body[data-song-style='liner'] .hero .identity h1 {
  margin: 0;
  color: var(--ink);
  font: 400 clamp(48px, 6.4vw, 96px) / 0.92 var(--serif);
  font-variation-settings: 'opsz' 144, 'SOFT' 30, 'WONK' 1;
  letter-spacing: -0.045em;
  overflow-wrap: anywhere;
  text-wrap: balance;
  animation: liner-ink 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes liner-ink {
  from { clip-path: inset(0 100% -0.2em 0); opacity: 0.2; }
  to { clip-path: inset(0 0 -0.2em 0); opacity: 1; }
}
body[data-song-style='liner'] .identity #artist {
  margin: 12px 0 22px;
  color: var(--ink);
  font: italic 350 24px/1.2 var(--serif);
  font-variation-settings: 'opsz' 48;
  animation: liner-rise 0.8s 0.25s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
body[data-song-style='liner'] .identity #artist::before {
  content: 'as recorded by ';
  color: var(--muted);
  font-size: 0.72em;
}
body[data-song-style='liner'] #artist a {
  color: inherit;
  text-decoration: underline 1px var(--rule);
  text-underline-offset: 5px;
}
body[data-song-style='liner'] #artist a:hover {
  color: var(--red);
  text-decoration-color: var(--red);
}
@keyframes liner-rise {
  from { opacity: 0; transform: translateY(10px); }
}
/* Credits-style facts: labels in mono small caps, values set in the serif. */
body[data-song-style='liner'] .hero .facts {
  gap: 0;
  animation: liner-rise 0.8s 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
body[data-song-style='liner'] .song-fact {
  gap: 2px;
  padding: 0 22px 0 0;
  margin-right: 22px;
  border: 0;
  border-right: 1px solid var(--rule);
  border-radius: 0;
  background: none;
}
body[data-song-style='liner'] .song-fact:last-child {
  border-right: 0;
}
body[data-song-style='liner'] .fact-label {
  color: var(--muted);
  font: 500 9.5px var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
body[data-song-style='liner'] .fact-value {
  color: var(--ink);
  font: 500 20px/1.2 var(--serif);
  font-variation-settings: 'opsz' 36;
}
body[data-song-style='liner'] .song-actions {
  animation: liner-rise 0.8s 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
body[data-song-style='liner'] .song-actions button {
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 500 10.5px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--rule);
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
body[data-song-style='liner'] .song-actions button:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--ink);
}
body[data-song-style='liner'] .song-actions button:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}
body[data-song-style='liner'] #save[aria-pressed='true'] {
  background: var(--ink);
  color: var(--stock);
}

/* Listen-with */
body[data-song-style='liner'] .hero-listen .field {
  color: var(--muted);
  font: 500 10px var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
body[data-song-style='liner'] .hero-listen select {
  padding: 10px;
  font: 500 15px var(--serif);
  letter-spacing: 0;
  text-transform: none;
}
body[data-song-style='liner'] .hero-listen #video-wrap iframe {
  border: 6px solid var(--paper);
  box-shadow: 0 0 0 1px var(--rule);
}
body[data-song-style='liner'] .hero-listen .hint {
  color: var(--muted);
  font-style: italic;
}

/* The sheet: a page in the booklet */
body[data-song-style='liner'] .sheet {
  --paper: #fbf8f2;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 10px 10px 0 -1px var(--stock-deep), 10px 10px 0 0 var(--rule);
}
body[data-song-style='liner'] .sheet-tools {
  min-height: 50px;
  padding: 0 20px;
  border-bottom: 1px solid var(--ink);
  background: transparent;
}
body[data-song-style='liner'] .sheet-tools .tabs {
  gap: 26px;
}
body[data-song-style='liner'] .sheet-tools .tabs button {
  position: relative;
  padding: 15px 0 13px;
  border: 0;
  color: var(--muted);
  font: italic 400 17px var(--serif);
  transition: color 0.2s;
}
body[data-song-style='liner'] .sheet-tools .tabs button::after {
  content: '';
  position: absolute;
  inset: auto 0 -1px;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
body[data-song-style='liner'] .sheet-tools .tabs button:hover,
body[data-song-style='liner'] .sheet-tools .tabs button.active {
  color: var(--ink);
}
body[data-song-style='liner'] .sheet-tools .tabs button.active {
  border: 0;
  font-style: normal;
  font-weight: 550;
}
body[data-song-style='liner'] .sheet-tools .tabs button.active::after {
  transform: scaleX(1);
}
body[data-song-style='liner'] .sheet-tools .score-navigation button {
  color: var(--ink);
}
body[data-song-style='liner'] .sheet-tools .score-navigation button:hover:not(:disabled) {
  background: var(--stock-deep);
}
body[data-song-style='liner'] .sheet-tools #measure-position {
  font: 500 11px var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
}

/* Sections as a numbered contents line */
body[data-song-style='liner'] .sheet .sections {
  counter-reset: liner-section;
  gap: 0;
  padding: 0 12px;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  scrollbar-color: var(--rule) transparent;
}
body[data-song-style='liner'] .sheet .sections button {
  counter-increment: liner-section;
  min-height: 46px;
  padding: 10px 10px 11px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 400 15px var(--serif);
  box-shadow: none;
  transition: color 0.2s;
}
body[data-song-style='liner'] .sheet .sections button > span::before {
  content: counter(liner-section, decimal-leading-zero);
  margin-right: 6px;
  color: var(--faint);
  font: 500 9.5px var(--mono);
  letter-spacing: 0.04em;
  vertical-align: 0.35em;
}
body[data-song-style='liner'] .sheet .sections button::before {
  display: block;
  inset: auto 10px 7px;
  height: 1.5px;
  background: var(--red);
  opacity: 0.8;
}
body[data-song-style='liner'] .sheet .sections button::after {
  display: none;
}
body[data-song-style='liner'] .sheet .sections button:hover {
  color: var(--ink);
  filter: none;
}
body[data-song-style='liner'] .sheet .sections button.active {
  background: transparent;
  color: var(--ink);
  font-style: italic;
  box-shadow: none;
}
body[data-song-style='liner'] .sheet .sections button.active > span::before {
  color: var(--red);
  font-style: normal;
}

/* Score: black engraving on the page, vermilion where the music is */
body[data-song-style='liner'] #melody {
  background: transparent;
}
body[data-song-style='liner'] .site-score-stage {
  color: var(--ink);
}
body[data-song-style='liner'] .site-score-stage .abcjs-staff path {
  fill: #1d1a168a;
}
body[data-song-style='liner'] .site-score-stage .abcjs-lyric,
body[data-song-style='liner'] .site-score-stage .abcjs-annotation {
  fill: #3a342c;
}
body[data-song-style='liner'] .site-score-stage .ss2-unattached-syllable {
  fill: var(--muted);
  font-style: italic;
}
body[data-song-style='liner'] .site-score-stage .abcjs-chord {
  fill: var(--ink) !important;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  transition: fill 0.3s;
}
body[data-song-style='liner'] .site-score-stage .site-chord-active {
  fill: var(--red) !important;
}
body[data-song-style='liner'] .site-score-stage .site-note-active {
  fill: var(--red) !important;
}
body[data-song-style='liner'] .site-score-stage .site-playhead {
  stroke: var(--red);
  stroke-width: 1.5;
  stroke-dasharray: 1 3;
  stroke-linecap: round;
}

/* Karaoke: a set-off line of type, highlighted as it is sung */
body[data-song-style='liner'] .site-karaoke {
  --karaoke-size: 31px;
  --karaoke-next-size: 17px;
  padding: 16px 150px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  background: var(--stock);
  box-shadow: inset 0 3px var(--stock), inset 0 4px var(--rule), inset 0 -3px var(--stock), inset 0 -4px var(--rule);
  color: var(--ink);
}
body[data-song-style='liner'] .site-karaoke-current {
  height: 40px;
  color: var(--faint);
  font-family: var(--serif);
  font-weight: 450;
  font-variation-settings: 'opsz' 72, 'SOFT' 50;
  line-height: 40px;
  letter-spacing: -0.02em;
}
body[data-song-style='liner'] .site-karaoke-next {
  height: 24px;
  margin-top: 0;
  color: var(--muted);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 350;
}
body[data-song-style='liner'] .site-karaoke-outgoing {
  top: 16px;
  left: 150px;
  right: 150px;
}
body[data-song-style='liner'] .site-karaoke .karaoke-syllable {
  color: var(--faint);
  background: linear-gradient(transparent 56%, var(--marker) 56% 90%, transparent 90%) no-repeat 0 0 / 0% 100%;
  transition: color 0.2s;
}
body[data-song-style='liner'] .site-karaoke .karaoke-syllable.singing,
body[data-song-style='liner'] .site-karaoke .karaoke-syllable.sung {
  color: var(--ink);
  filter: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
}
body[data-song-style='liner'] .site-karaoke .karaoke-syllable.singing {
  background-size: calc(var(--syllable-progress, 0) * 100%) 100%;
}
body[data-song-style='liner'] .site-karaoke .karaoke-syllable.sung {
  background-size: 100% 100%;
}
body[data-song-style='liner'] .site-karaoke .karaoke-syllable::after {
  display: none;
}
body[data-song-style='liner'] .site-karaoke-chord {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 118px;
  padding: 0 18px;
  font-family: var(--serif);
  font-style: italic;
  white-space: nowrap;
  transition: opacity 0.3s;
}
body[data-song-style='liner'] .site-karaoke-chord::before {
  display: block;
  margin-bottom: 1px;
  color: var(--muted);
  font: 500 9px var(--mono);
  font-style: normal;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
body[data-song-style='liner'] .site-karaoke-chord-now {
  left: 0;
  border-right: 1px solid var(--rule);
  color: var(--red);
  font-size: 34px;
  font-weight: 500;
  line-height: 1;
}
body[data-song-style='liner'] .site-karaoke-chord-now::before {
  content: 'Now';
}
body[data-song-style='liner'] .site-karaoke-chord-next {
  right: 0;
  align-items: flex-end;
  border-left: 1px solid var(--rule);
  color: var(--ink);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.1;
}
body[data-song-style='liner'] .site-karaoke-chord-next::before {
  content: 'Then';
}
/* A hairline under the next chord runs out as the change approaches. */
body[data-song-style='liner'] .site-karaoke-chord-next::after {
  content: '';
  display: block;
  width: 100%;
  height: 1.5px;
  margin-top: 6px;
  background: linear-gradient(var(--red), var(--red)) no-repeat right / calc(var(--chord-countdown, 0) * 100%) 100%, var(--rule);
}
body[data-song-style='liner'] .site-karaoke-chord-empty {
  opacity: 0;
}

/* Chord chart: a typeset songbook page */
body[data-song-style='liner'] #lines {
  counter-reset: liner-line;
  padding: 12px 26px 30px;
  background: transparent;
  scrollbar-color: var(--rule) transparent;
}
body[data-song-style='liner'] #lines .lyric {
  counter-increment: liner-line;
  position: relative;
  margin: 0;
  padding: 16px 16px 16px 58px;
  border: 0;
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  transition: background 0.3s;
}
body[data-song-style='liner'] #lines .lyric::before {
  content: counter(liner-line);
  position: absolute;
  top: 22px;
  left: 8px;
  width: 30px;
  color: var(--faint);
  font: 500 10px var(--mono);
  text-align: right;
}
body[data-song-style='liner'] #lines .lyric:hover {
  background: #1d1a1606;
}
body[data-song-style='liner'] #lines .lyric.active {
  background: linear-gradient(90deg, #ffd23f33, transparent 70%);
}
body[data-song-style='liner'] #lines .lyric.active::before {
  color: var(--red);
}
body[data-song-style='liner'] #lines .lyric.active::after {
  content: '';
  position: absolute;
  top: 14px;
  bottom: 14px;
  left: 46px;
  width: 2px;
  background: var(--red);
}
body[data-song-style='liner'] #lines .line-time {
  color: var(--faint);
  font: 400 10px var(--mono);
}
body[data-song-style='liner'] #lines .chords {
  gap: 18px;
  color: var(--red);
  font: italic 500 18px var(--serif);
}
body[data-song-style='liner'] #lines .words {
  color: var(--ink);
  font: 400 24px/1.35 var(--serif);
  font-variation-settings: 'opsz' 48;
  letter-spacing: -0.01em;
}
body[data-song-style='liner'] #lines .lyric:not(.active) .words {
  color: #3a342ccc;
}
body[data-song-style='liner'] .words .chart-syllable.sung {
  color: var(--ink);
}
body[data-song-style='liner'] .words .chart-syllable.singing {
  border-radius: 0;
  background: linear-gradient(transparent 55%, var(--marker) 55% 92%, transparent 92%);
  color: var(--ink);
  text-decoration: none;
}

/* Practice settings: a sidebar of footnotes */
body[data-song-style='liner'] #practice-settings .panel {
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  box-shadow: none;
}
body[data-song-style='liner'] #practice-settings h2 {
  color: var(--ink);
  font: italic 400 24px/1.2 var(--serif);
}
body[data-song-style='liner'] .panel .setting {
  font-family: var(--serif);
  font-size: 15px;
}
body[data-song-style='liner'] .panel .setting b,
body[data-song-style='liner'] .chord-display legend {
  font-weight: 550;
}
body[data-song-style='liner'] .panel .hint,
body[data-song-style='liner'] #practice-settings .accuracy,
body[data-song-style='liner'] #practice-settings .note p {
  color: var(--muted);
  font-style: italic;
  font-size: 13.5px;
}
body[data-song-style='liner'] .panel .scale,
body[data-song-style='liner'] .panel .key-original {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
}
body[data-song-style='liner'] .panel .divider {
  background: var(--rule);
}
body[data-song-style='liner'] .panel input[type='range'],
body[data-song-style='liner'] .panel input[type='checkbox'],
body[data-song-style='liner'] #seek,
body[data-song-style='liner'] #volume {
  accent-color: var(--ink);
}
body[data-song-style='liner'] .setting button,
body[data-song-style='liner'] output {
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 500 10px var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
body[data-song-style='liner'] .setting button[aria-pressed='true'] {
  background: var(--ink);
  color: var(--stock);
}
body[data-song-style='liner'] #reset-key {
  border: 0;
  color: var(--red);
}
body[data-song-style='liner'] #reset-key:disabled {
  color: var(--faint);
}
body[data-song-style='liner'] .segmented {
  padding: 0;
  gap: 0;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
}
body[data-song-style='liner'] .segmented button {
  border-radius: 0;
  color: var(--muted);
  font-family: var(--serif);
}
body[data-song-style='liner'] .segmented button + button {
  border-left: 1px solid var(--ink);
}
body[data-song-style='liner'] .segmented button[aria-pressed='true'] {
  background: var(--ink);
  color: var(--stock);
  box-shadow: none;
}
body[data-song-style='liner'] .segmented small {
  font-family: var(--mono);
}
body[data-song-style='liner'] .key-select select {
  font: 500 17px var(--serif);
}
body[data-song-style='liner'] #practice-settings .note b {
  font-weight: 550;
}
body[data-song-style='liner'] #practice-settings .note > span {
  color: var(--red);
}
body[data-song-style='liner'] .alignment-debug {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 10px;
}

/* Song notes: a numbered Q&A column, like an interview */
body[data-song-style='liner'] .song-guide .arrangement-card,
body[data-song-style='liner'] .song-guide .related-card {
  border: 0;
  border-top: 3px double var(--ink);
  border-radius: 0;
  padding: 22px 0 0;
  background: transparent;
  box-shadow: none;
}
body[data-song-style='liner'] .song-guide .guide-eyebrow {
  color: var(--red);
  font: 500 10px var(--mono);
  letter-spacing: 0.16em;
}
body[data-song-style='liner'] .song-guide h2 {
  color: var(--ink);
  font: 400 34px/1.08 var(--serif);
  font-variation-settings: 'opsz' 96, 'WONK' 1;
  letter-spacing: -0.03em;
}
body[data-song-style='liner'] .song-guide .qa-intro {
  color: var(--muted);
  font-style: italic;
}
body[data-song-style='liner'] .song-guide .qa-list {
  counter-reset: liner-q;
}
body[data-song-style='liner'] .song-guide .qa-list details {
  counter-increment: liner-q;
  border-top-color: var(--rule);
}
body[data-song-style='liner'] .song-guide .qa-list h3 {
  color: var(--ink);
  font: 500 18px/1.4 var(--serif);
}
body[data-song-style='liner'] .song-guide .qa-list h3::before {
  content: 'Q' counter(liner-q);
  display: inline-block;
  width: 38px;
  color: var(--red);
  font: 500 10px var(--mono);
  letter-spacing: 0.06em;
  vertical-align: 0.2em;
}
body[data-song-style='liner'] .song-guide .qa-list p {
  padding-left: 38px;
  color: #3a342c;
  font-size: 16px;
}
body[data-song-style='liner'] .song-guide .qa-list summary:hover h3,
body[data-song-style='liner'] .song-guide .artist-browse-link,
body[data-song-style='liner'] .qa-list .qa-timestamp {
  color: var(--red);
}
body[data-song-style='liner'] .song-guide .related-song {
  border-color: var(--rule);
  color: var(--ink);
}
body[data-song-style='liner'] .song-guide .related-song img,
body[data-song-style='liner'] .song-guide .related-art {
  border: 3px solid var(--paper);
  border-radius: 0;
  box-shadow: 0 0 0 1px var(--rule);
}
body[data-song-style='liner'] .song-guide .related-song b {
  font: 500 17px var(--serif);
}
body[data-song-style='liner'] .song-guide .related-song small {
  color: var(--muted);
  font-style: italic;
}
body[data-song-style='liner'] .song-guide .related-song:hover b {
  color: var(--red);
}
body[data-song-style='liner'] .song-guide .artist-browse-link {
  font: 500 11px var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
body[data-song-style='liner'] .song-guide .guide-badge {
  border-radius: 0;
  background: var(--stock-deep);
  font-family: var(--mono);
}
body[data-song-style='liner'] .song-guide .guide-chords > span {
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font: italic 500 17px var(--serif);
}

/* Transport: the colophon bar */
body[data-song-style='liner'] .transport {
  border-top: 1px solid var(--ink);
  background: #f3ede2f2;
  box-shadow: inset 0 3px var(--stock), inset 0 4px var(--rule);
  color: var(--ink);
}
body[data-song-style='liner'] .transport .play {
  border-radius: 50%;
  background: var(--ink);
  color: var(--stock);
  font-size: 15px;
  box-shadow: 3px 3px 0 var(--red);
  transition: transform 0.15s, box-shadow 0.15s;
}
body[data-song-style='liner'] .transport .play:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 var(--red);
}
body[data-song-style='liner'] .transport .play:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--red);
}
body[data-song-style='liner'] .transport .now b {
  font: italic 500 17px var(--serif);
}
body[data-song-style='liner'] .transport .now small,
body[data-song-style='liner'] .transport > span {
  color: var(--muted);
  font-family: var(--mono);
  letter-spacing: 0.04em;
}
body[data-song-style='liner'] #mute:hover {
  background: var(--stock-deep);
}
body[data-song-style='liner'] #status {
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  font-style: italic;
  box-shadow: 5px 5px 0 var(--rule);
}
body[data-song-style='liner'] #measure-dialog {
  border: 1px solid var(--ink);
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 10px 10px 0 var(--rule);
}
body[data-song-style='liner'] #measure-dialog h2 {
  font: italic 400 26px var(--serif);
}
body[data-song-style='liner'] #jump-measure {
  border: 1px solid var(--ink);
  background: transparent;
  font: 500 18px var(--mono);
}

@media (max-width: 1000px) {
  body[data-song-style='liner'] .song-overview > .hero {
    grid-template-columns: minmax(0, 1fr) 150px;
  }
  body[data-song-style='liner'] .hero .artwork-cover {
    width: 150px;
    height: 150px;
  }
}
@media (max-width: 600px) {
  body[data-song-style='liner'] .song-overview > .hero {
    grid-template-columns: minmax(0, 1fr) 96px;
    gap: 16px;
    margin: 4px 16px 20px;
    padding: 12px 0 20px;
  }
  body[data-song-style='liner'] .hero .artwork-cover {
    width: 96px;
    height: 96px;
    border-width: 5px;
    align-self: start;
  }
  body[data-song-style='liner'] .hero .identity::before {
    content: 'The Lead Sheet';
  }
  body[data-song-style='liner'] .hero .identity h1 {
    font-size: 44px;
  }
  body[data-song-style='liner'] .identity #artist {
    font-size: 19px;
  }
  body[data-song-style='liner'] .song-fact {
    padding-right: 12px;
    margin-right: 12px;
  }
  body[data-song-style='liner'] .fact-value {
    font-size: 16px;
  }
  body[data-song-style='liner'] .workspace > .sheet {
    border-right: 0;
    border-left: 0;
    box-shadow: none;
  }
  body[data-song-style='liner'] .site-karaoke {
    --karaoke-size: 25px;
    --karaoke-next-size: 15px;
    padding-right: 10px;
    padding-left: 10px;
  }
  body[data-song-style='liner'] .site-karaoke-outgoing {
    left: 10px;
    right: 10px;
  }
  body[data-song-style='liner'] .site-karaoke-chord {
    display: none;
  }
  body[data-song-style='liner'] #lines {
    padding: 6px 12px 24px;
  }
  body[data-song-style='liner'] #lines .lyric {
    padding-left: 44px;
  }
  body[data-song-style='liner'] #lines .lyric::before {
    left: 0;
  }
  body[data-song-style='liner'] #lines .lyric.active::after {
    left: 36px;
  }
  body[data-song-style='liner'] #lines .words {
    font-size: 20px;
  }
  body[data-song-style='liner'] #practice-settings .panel {
    border: 0;
    background: transparent;
  }
}
@media (prefers-reduced-motion: reduce) {
  body[data-song-style='liner'] .hero .identity h1,
  body[data-song-style='liner'] .identity #artist,
  body[data-song-style='liner'] .hero .facts,
  body[data-song-style='liner'] .song-actions {
    animation: none;
  }
}
@media print {
  body[data-song-style='liner'] {
    background: white;
  }
  body[data-song-style='liner']::after {
    display: none;
  }
}

/* Base rules colour the action buttons by id; set them in ink here. */
body[data-song-style='liner'] .song-actions #print-song,
body[data-song-style='liner'] .song-actions #save {
  border-color: var(--ink);
  color: var(--ink);
}
body[data-song-style='liner'] .song-actions #save[aria-pressed='true'] {
  color: var(--stock);
}
/* Only the section being played carries its progress rule; finished ones fade back. */
body[data-song-style='liner'] .sheet .sections button::before {
  opacity: 0.18;
}
body[data-song-style='liner'] .sheet .sections button.active::before {
  opacity: 0.9;
}
body[data-song-style='liner'] #settings-toggle {
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}