:root,
[data-theme='night'] {
  /* Shape and layout. The colours are below, one set per theme (see theme.js). */
  --radius: 12px;
  --sheet-size: 17px;
  --column-radius: 18px;
  --corner-bottom-right: radial-gradient(circle at 100% 100%, transparent calc(var(--column-radius) - 0.5px), var(--margin) var(--column-radius));
  --corner-bottom-left: radial-gradient(circle at 0 100%, transparent calc(var(--column-radius) - 0.5px), var(--margin) var(--column-radius));
  --corner-top-right: radial-gradient(circle at 100% 0, transparent calc(var(--column-radius) - 0.5px), var(--margin) var(--column-radius));
  --corner-top-left: radial-gradient(circle at 0 0, transparent calc(var(--column-radius) - 0.5px), var(--margin) var(--column-radius));
  --sheet-pad: clamp(1rem, 2vw, 2rem); /* equal side padding of the chord sheet */

  /* Night: the default theme. A theme is a set of colours on any element with data-theme, which is
     how a swatch in the theme menu shows a theme without repeating its colours in JavaScript. */
  --bg: #0f1115;
  --surface: #181b22;
  --surface-2: #232733;
  --text: #e8eaf0;
  --muted: #8b92a5;
  --accent: #5eead4;
  --chord: #fbbf24;
  --section: #93c5fd;
  --danger: #f87171;
  --margin: #1d2638; /* around the reading column */
  --column: #151b27; /* the reading column: where a tap scrolls */
  --column-edge: #2e3a55;
  --on-accent: #04211c; /* text on an accent-coloured button */
  --on-chord: #231a00; /* text on the chord-coloured offline banner */
  --border: #343a4d;
  --border-strong: #3a4260;
  --shadow: rgb(0 0 0 / 0.5);
  color-scheme: dark;
}

[data-theme='graphite'] {
  --bg: #131314;
  --surface: #1d1d20;
  --surface-2: #2a2a2e;
  --text: #ececee;
  --muted: #9c9ca3;
  --accent: #7fd8c6;
  --chord: #f6c453;
  --section: #a4bfdc;
  --danger: #f87171;
  --margin: #2c2c30; /* around the reading column */
  --column: #1d1d21; /* the reading column: where a tap scrolls */
  --column-edge: #3c3c42;
  --on-accent: #05241e; /* text on an accent-coloured button */
  --on-chord: #231a00; /* text on the chord-coloured offline banner */
  --border: #3a3a40;
  --border-strong: #4a4a52;
  --shadow: rgb(0 0 0 / 0.5);
  color-scheme: dark;
}

[data-theme='forest'] {
  --bg: #0e1512;
  --surface: #16211c;
  --surface-2: #1f2e27;
  --text: #e6efe9;
  --muted: #8fa89b;
  --accent: #86efac;
  --chord: #fcd34d;
  --section: #a7f3d0;
  --danger: #fca5a5;
  --margin: #1f3a30; /* around the reading column */
  --column: #15211b; /* the reading column: where a tap scrolls */
  --column-edge: #2f5a49;
  --on-accent: #052e16; /* text on an accent-coloured button */
  --on-chord: #231a00; /* text on the chord-coloured offline banner */
  --border: #2b3f35;
  --border-strong: #436655;
  --shadow: rgb(0 0 0 / 0.5);
  color-scheme: dark;
}

[data-theme='paper'] {
  --bg: #f3efe6;
  --surface: #ffffff;
  --surface-2: #ece6d8;
  --text: #23201a;
  --muted: #625c4f;
  --accent: #0f766e;
  --chord: #9a3412;
  --section: #1d4ed8;
  --danger: #b91c1c;
  --margin: #d8d0bd; /* around the reading column */
  --column: #fffdf7; /* the reading column: where a tap scrolls */
  --column-edge: #c4baa0;
  --on-accent: #ffffff; /* text on an accent-coloured button */
  --on-chord: #ffffff; /* text on the chord-coloured offline banner */
  --border: #d3cbb8;
  --border-strong: #b7ae96;
  --shadow: rgb(70 55 20 / 0.22);
  color-scheme: light;
}

[data-theme='contrast'] {
  --bg: #000000;
  --surface: #0b0b0b;
  --surface-2: #1c1c1c;
  --text: #ffffff;
  --muted: #c4c4c4;
  --accent: #00f0cf;
  --chord: #ffe600;
  --section: #7cc4ff;
  --danger: #ff7b7b;
  --margin: #17174a; /* around the reading column */
  --column: #000000; /* the reading column: where a tap scrolls */
  --column-edge: #6666b0;
  --on-accent: #000000; /* text on an accent-coloured button */
  --on-chord: #000000; /* text on the chord-coloured offline banner */
  --border: #707070;
  --border-strong: #a0a0a0;
  --shadow: rgb(0 0 0 / 0.8);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.4 system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
}

h1 { margin: 0; font-size: 1.25rem; }
a { color: var(--accent); }
.muted { color: var(--muted); margin: 0; }
.error { color: var(--danger); margin: 0.5rem 1rem; min-height: 0; }
.error:empty { display: none; }

.page { max-width: 760px; margin: 0 auto; }
/* Reader: full width on a phone; on a wide screen the sheet, the header and the controls share one
   centred column of two thirds, so both side margins are equal (1/6 each) and stay free for
   future widgets. Long chord lines still fit without horizontal scrolling. */
.reader { width: 100%; }
/* Room for the toolbar under the last line. Padding, not a margin: a margin would collapse out of
   the column and leave it ending above the toolbar. */
.reader-body { padding-bottom: 9rem; }
@media (min-width: 900px) {
  /* The reading column is a panel in its own colour, framed by the margins: it is clear where a
     tap scrolls. The text slides under the top and the bottom bar, so the rounded corners cannot
     belong to the column itself: the bars carry the corners instead (see the masks below), which
     keeps the window between them rounded wherever the text is. */
  body.reading { background: var(--margin); }
  .reader-body {
    width: calc(100% * 2 / 3); margin: 0 auto; background: var(--column);
    min-height: calc(100dvh - 4.2rem); cursor: pointer;
  }
  .reading .topbar, .reading .toolbar { background: var(--margin); border-color: var(--column-edge); }
  .reading .topbar::before, .reading .topbar::after,
  .reading .toolbar::before, .reading .toolbar::after {
    content: ''; position: absolute; pointer-events: none;
    width: var(--column-radius); height: var(--column-radius);
  }
  /* A square in the colour of the margin with a quarter circle cut out of it: laid over a corner of
     the column it leaves the corner rounded. */
  .reading .topbar::before { top: 100%; left: calc(100% / 6); background: var(--corner-bottom-right); }
  .reading .topbar::after { top: 100%; right: calc(100% / 6); background: var(--corner-bottom-left); }
  .reading .toolbar::before { bottom: 100%; left: calc(100% / 6); background: var(--corner-top-right); }
  .reading .toolbar::after { bottom: 100%; right: calc(100% / 6); background: var(--corner-top-left); }
  .reader .topbar { padding-inline: calc(100% / 6); }
  .reader .row-tools { max-width: calc(100% * 2 / 3); }
}
.center { min-height: 100dvh; display: grid; place-content: center; gap: 1rem; padding: 1rem; }

.topbar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1rem; position: sticky; top: 0; background: var(--bg); z-index: 2;
}
.topbar h1 { flex: 1; min-width: 0; }
.heading { flex: 1; min-width: 0; }
.heading h1, .heading p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

button, .button, input, select, textarea {
  font: inherit; color: inherit; background: var(--surface-2);
  border: 1px solid transparent; border-radius: var(--radius); padding: 0.65rem 0.9rem;
}
button, .button { cursor: pointer; text-decoration: none; text-align: center; min-height: 44px; }
button:disabled { opacity: 0.6; cursor: progress; }
input, select, textarea { width: 100%; }
/* A checkbox is not a text field: with the rule above it spans the whole row of a flex line and
   pushes what follows it out of its card. */
input[type='checkbox'], input[type='radio'] { width: auto; flex: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.primary { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.primary.active { background: var(--chord); }
.icon {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  background: var(--surface-2); border-radius: 50%; text-decoration: none; color: var(--text);
  cursor: pointer; border: 0; flex: none;
}
.icon.active { background: var(--danger); }
.icon { font-size: 0.95rem; }
.danger { background: none; color: var(--danger); border-color: var(--danger); }
.chip { min-height: 44px; padding: 0 0.8rem; flex: none; }

.searchbar { display: flex; gap: 0.5rem; padding: 0 1rem 0.5rem; }
.status { padding: 0.25rem 1rem; }

.songs { list-style: none; margin: 0; padding: 0 0.5rem 4rem; }
.row {
  display: flex; flex-direction: column; padding: 0.7rem 0.75rem; border-radius: var(--radius);
  color: var(--text); text-decoration: none; min-height: 56px; justify-content: center;
}
.row:hover, .row:focus-visible { background: var(--surface); }
.row .artist { color: var(--muted); font-size: 0.9rem; }

.card { background: var(--surface); border-radius: var(--radius); padding: 1rem; display: grid; gap: 0.75rem; margin: 0 1rem; }
.center .card { margin: 0; width: min(92vw, 360px); }
.editor { display: grid; gap: 0.75rem; padding: 0 1rem 2rem; }
.editor[hidden], .card[hidden] { display: none; }
.actions { display: flex; gap: 0.75rem; }
.actions > * { flex: 1; }
.sheet-input { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 15px; white-space: pre; overflow-x: auto; }

.sheet {
  margin: 0; padding: 0.5rem var(--sheet-pad); overflow-x: auto; cursor: pointer;
  font: var(--sheet-size)/1.35 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; tab-size: 4;
}
.line { display: block; white-space: pre; min-height: 1.35em; }
.line.chord { color: var(--chord); font-weight: 700; }
.line.section { color: var(--section); font-weight: 700; margin-top: 0.6em; }

.toolbar {
  position: fixed; left: 0; right: 0; bottom: 0; background: var(--surface);
  border-top: 1px solid var(--surface-2); padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom));
  display: grid; gap: 0.5rem; z-index: 3;
}
.row-tools { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; justify-content: center; max-width: 760px; margin: 0 auto; width: 100%; }
.stepper { display: flex; align-items: center; gap: 0.2rem; flex: 0 1 auto; justify-content: center; }
.stepper button { min-width: 36px; padding: 0.3rem; }
.value { min-width: 2.4em; text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
.value.wide { min-width: 5.2em; }
.play { min-width: 7.5rem; flex: none; }
.row-tools input[type='range'] { flex: 1; min-width: 64px; } /* too narrow: the row wraps instead */
input[type='range'] { padding: 0; border: 0; background: none; accent-color: var(--accent); }


.offline {
  position: fixed; top: env(safe-area-inset-top); left: 0; right: 0; z-index: 10;
  background: var(--chord); color: var(--on-chord); text-align: center; font-size: 0.85rem; padding: 0.2rem;
}
.offline[hidden] { display: none; }
.songs-tools { display: flex; gap: 0.5rem; }

.chord-token { border-radius: 4px; cursor: pointer; }
.chord-token:hover { background: color-mix(in srgb, var(--chord) 20%, transparent); }
.chord-token.playing { background: color-mix(in srgb, var(--chord) 45%, transparent); }

.chord-pop {
  position: fixed; z-index: 20; pointer-events: none; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.75rem 0.4rem;
  box-shadow: 0 8px 24px var(--shadow); text-align: center;
}
.chord-pop[hidden] { display: none; }
.pop-title { font-weight: 700; color: var(--chord); margin-bottom: 0.15rem; }
.pop-grid { stroke: var(--muted); stroke-width: 1; }
.pop-nut { stroke: var(--text); stroke-width: 3; }
.pop-dot { fill: var(--text); }
.pop-mark { stroke: var(--text); stroke-width: 1.5; fill: none; }
.pop-label { fill: var(--chord); font-size: 11px; font-weight: 700; }

/* Playlists */
.icon.small { width: 36px; height: 36px; font-size: 0.85rem; }
.icon.disabled { opacity: 0.3; pointer-events: none; }
.icon:disabled { opacity: 0.3; cursor: default; }
.section-title { margin: 1.25rem 1rem 0.25rem; font-size: 1rem; color: var(--muted); }
.playlist-songs { counter-reset: none; }
.playlist-row { display: flex; align-items: center; gap: 0.35rem; padding-right: 0.5rem; }
.playlist-row .row { flex: 1; min-width: 0; }
.playlist-row .row.static:hover { background: none; }
.playlist-row .number { width: 1.6rem; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
.play-all { flex: 1; text-align: center; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.play-all[hidden] { display: none; }
.rename { display: flex; flex: 1; gap: 0.5rem; }

/* In the reader: a slim bar on a narrow screen, a widget in the left margin on a wide one */
.playlist-bar {
  display: flex; align-items: center; gap: 0.5rem; padding: 0 1rem 0.4rem;
}
.playlist-bar .bar-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.playlist-widget { display: none; }
@media (min-width: 900px) {
  .reader .playlist-bar { padding-inline: calc(100% / 6); }
}
@media (min-width: 1000px) {
  .playlist-bar { display: none; }
  .playlist-widget {
    display: block; position: fixed; z-index: 1; top: 5rem; left: 0.75rem;
    width: calc(100vw / 6 - 1.5rem); max-height: calc(100dvh - 11rem); overflow-y: auto;
    background: var(--column); border: 1px solid var(--column-edge); border-radius: var(--radius); padding: 0.6rem 0.75rem;
  }
  .widget-head { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
  .widget-title { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; }
  .widget-steps { display: flex; justify-content: space-between; margin: 0.4rem 0; }
  .widget-list { list-style: decimal; margin: 0; padding-left: 1.4rem; font-size: 0.9rem; }
  .widget-list li { padding: 0.15rem 0; }
  .widget-list li::marker { color: var(--muted); }
  .widget-list a { color: var(--text); text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .widget-list a:hover { color: var(--accent); }
  .widget-list li.current a { color: var(--chord); font-weight: 700; }
  .playlist-widget select { width: 100%; }
}

/* "Add to playlist" menu */
.menu-trigger {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 36px;
  padding: 0.35rem 0.9rem; border-radius: 999px; font-size: 0.85rem; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--border-strong); white-space: nowrap;
}
.menu-trigger:hover, .menu-trigger[aria-expanded='true'] { border-color: var(--accent); color: var(--accent); }
.add-bar { justify-content: flex-end; }
.add-widget { background: none !important; padding: 0 !important; }
.menu-pop {
  position: fixed; z-index: 30; width: min(290px, calc(100vw - 16px)); display: grid; gap: 0.2rem;
  padding: 0.5rem; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px;
  box-shadow: 0 16px 40px var(--shadow);
}
.menu-pop[hidden] { display: none; }
.menu-title {
  padding: 0.2rem 0.5rem; font-size: 0.72rem; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--muted);
}
.menu-list { display: grid; gap: 2px; max-height: min(40vh, 280px); overflow-y: auto; }
.menu-item {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; min-height: 40px; padding: 0.5rem 0.6rem;
  text-align: left; color: var(--text); background: none; border: 0; border-radius: 10px;
}
.menu-item:hover:not(:disabled), .menu-item:focus-visible { background: var(--surface-2); }
.menu-item:disabled { cursor: default; opacity: 1; color: var(--muted); }
.menu-mark { width: 1.1rem; color: var(--accent); font-weight: 700; }
.menu-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu-count { color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.menu-new { color: var(--accent); margin-top: 0.15rem; border-top: 1px solid var(--surface-2); border-radius: 0 0 10px 10px; }
.menu-form { display: flex; gap: 0.4rem; padding: 0.3rem 0.2rem 0.1rem; }
.menu-form input { flex: 1; min-width: 0; }
.menu-empty { margin: 0; padding: 0.4rem 0.6rem; }
.menu-status { min-height: 1.2em; margin: 0; padding: 0 0.5rem 0.15rem; font-size: 0.85rem; color: var(--accent); }
.menu-status a { color: var(--accent); }

/* "Next song" at the end of a sheet in a playlist */
.next-song {
  position: fixed; z-index: 5; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--toolbar-h, 7rem) + 0.75rem); max-width: min(92vw, 28rem);
  padding: 0.8rem 1.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border-radius: 999px; background: var(--accent); color: var(--on-accent); font-weight: 700;
  text-decoration: none; box-shadow: 0 8px 24px var(--shadow);
}
.next-song[hidden] { display: none; }

/* Colour theme menu: a swatch is the margin, the reading column and the accent of a theme */
.theme-pop { width: min(280px, calc(100vw - 16px)); }
.theme-item { align-items: center; }
.theme-swatch {
  position: relative; flex: none; width: 2.6rem; height: 1.6rem; border-radius: 7px;
  border: 1px solid var(--border-strong); background: var(--margin); overflow: hidden;
}
.theme-swatch::before { content: ''; position: absolute; inset: 18% 22%; border-radius: 4px; background: var(--column); }
.theme-swatch::after { content: ''; position: absolute; left: 50%; top: 50%; width: 0.5rem; height: 0.5rem; margin: -0.25rem 0 0 -0.25rem; border-radius: 50%; background: var(--accent); }
.theme-swatch.auto { display: flex; padding: 0; }
.theme-swatch.auto > span { flex: 1; position: relative; background: var(--margin); }
.theme-swatch.auto > span::before { content: ''; position: absolute; inset: 22% 18%; background: var(--column); border-radius: 3px; }
.theme-hint { color: var(--muted); font-size: 0.8rem; }

/* Narrow phones: the toolbar row holds play, the speed slider and three small buttons; keep the
   slider long enough to use. */
@media (max-width: 420px) {
  .play { min-width: 6.4rem; padding-inline: 0.6rem; }
  .row-tools .chip { min-width: 38px; padding: 0 0.5rem; }
  .row-tools { gap: 0.3rem; }
  .row-tools .value:not(.wide) { min-width: 1.6em; } /* the speed number */
}

/* Batch import */
.batch-controls { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0 1rem; margin: 0.5rem 0; }
.batch-controls > * { flex: 1 1 auto; }
.batch-notice { margin: 0.25rem 1rem; min-height: 1.2em; font-size: 0.9rem; color: var(--accent); }
.batch-list { padding-bottom: 6rem; }
.batch-row { padding: 0.6rem 0.75rem; border-radius: var(--radius); display: grid; gap: 0.4rem; }
.batch-row.ready { background: var(--surface); margin-bottom: 0.4rem; }
.batch-top { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.batch-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-remove { flex: none; margin-left: auto; }
.batch-host + .batch-remove { margin-left: 0; }
.batch-host { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 0.8rem; }
.batch-state {
  flex: none; padding: 0.1rem 0.55rem; border-radius: 999px; font-size: 0.75rem;
  color: var(--muted); border: 1px solid var(--border-strong); white-space: nowrap;
}
.batch-state.ready, .batch-state.saved { color: var(--accent); border-color: var(--accent); }
.batch-state.failed { color: var(--danger); border-color: var(--danger); }
.batch-state.fetching { color: var(--chord); border-color: var(--chord); }
.batch-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
.batch-fields input { min-width: 0; }
.batch-row details summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; }
.batch-preview {
  margin: 0.4rem 0 0; max-height: 14rem; overflow: auto; padding: 0.6rem; border-radius: 8px;
  background: var(--column); font: 0.8rem/1.35 ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}
.batch-error { margin: 0; font-size: 0.85rem; }
.batch-warning { margin: 0; font-size: 0.85rem; color: var(--chord); }
.batch-option { display: flex; gap: 0.5rem; align-items: flex-start; font-size: 0.9rem; color: var(--muted); }
.batch-option input { margin-top: 0.2rem; }
@media (max-width: 520px) { .batch-fields { grid-template-columns: 1fr; } }