/* Dark by default (R32). A light theme can override these variables later. */
:root {
  --bg: #14121a;
  --surface: #1e1b27;
  --border: #322d40;
  --text: #f2eff8;
  --muted: #a39db5;
  --accent: #ff5d8f;
  --accent-text: #14121a;
  --tap: 44px; /* minimum tap target (R31) */
  color-scheme: dark;
}

/* Light option (R32): js/theme.js sets data-theme from the saved choice. Keep
   --bg in step with THEME_COLORS in js/lib/theme.js. */
:root[data-theme="light"] {
  --bg: #f6f3fb;
  --surface: #ffffff;
  --border: #d9d3e6;
  --text: #1b1727;
  --muted: #5d5771;
  --accent: #c8176a;
  --accent-text: #ffffff;
  --error: #b3261e;
  color-scheme: light;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.top {
  padding: calc(env(safe-area-inset-top) + 12px) 16px 12px;
  border-bottom: 1px solid var(--border);
}

.top h1 { margin: 0 auto; max-width: 688px; font-size: 1.25rem; } /* lines up with <main> on a desktop (R33) */

main {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  width: 100%;
  max-width: 720px; /* keeps lines readable on desktop (R33) */
  margin: 0 auto;
  outline: none;
}

/* Bottom tabs: reachable with a thumb (R31) */
.tabs {
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--border);
  background: var(--surface);
  padding-bottom: env(safe-area-inset-bottom);
}

.tabs button {
  flex: 1;
  max-width: 180px; /* on a desktop the tabs stay together in the middle (R33) */
  min-height: 56px;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 0.875rem;
}

.tabs button[aria-current="page"] {
  color: var(--accent);
  font-weight: 600;
}

input, select, textarea, button {
  font: inherit;
  color: inherit;
}

input, select, textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
}

input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.btn {
  min-height: var(--tap);
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
  font-weight: 600;
}

.stack > * + * { margin-top: 12px; }

.row { display: flex; gap: 8px; }
.row > * { flex: 1; min-width: 0; }

details.card, .card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 16px;
}

details.card > summary {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
}

.list { list-style: none; margin: 0; padding: 0; }

.list li {
  min-height: var(--tap);
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.list .title { font-weight: 600; }
.list .sub { color: var(--muted); font-size: 0.875rem; }

.muted { color: var(--muted); }
.count { color: var(--muted); font-size: 0.875rem; }

label { display: block; font-size: 0.875rem; color: var(--muted); }
label > input, label > select { margin-top: 4px; color: var(--text); }

/* ---- Settings view (Wave 1 B) ---- */
:root { --error: #ff8a8a; } /* destructive buttons and error text everywhere */

/* A <label> that looks like .btn and opens the file input inside it (R20-R22). */
.file-btn {
  display: inline-flex;
  align-items: center;
  font-size: 1rem;
  color: var(--text);
  cursor: pointer;
  position: relative;
}

/* Ring for keyboard focus only, so it does not linger after a tap. */
.file-btn:has(> .file-input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Visually hidden but still focusable and clickable through its label. */
.file-btn > .file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.message:empty { display: none; }
.message p { margin: 0; }
.message ul { margin: 4px 0 0; padding-left: 20px; }
.message.error { color: var(--error); }

/* ---- Songs view (Wave 1 A) ---- */

/* Each list row is one full-width button, so the whole row is the tap target (R31). */
.list li.song-item { padding: 0; }

.song-row {
  display: block;
  width: 100%;
  min-height: var(--tap);
  padding: 10px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}

.song-row .title, .song-row .sub { display: block; }

.song-detail h2 { margin: 0; font-size: 1.25rem; overflow-wrap: anywhere; }
.song-detail h3 { margin: 0 0 4px; font-size: 0.875rem; font-weight: 600; color: var(--muted); }
.song-detail .artist { margin: 0; color: var(--muted); }

.song-notes { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }

.song-fields { margin: 0; }

.song-fields .field {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 6px 0;
  border-top: 1px solid var(--border);
}

.song-fields dt { color: var(--muted); font-size: 0.875rem; }
.song-fields dd { margin: 0; text-align: right; overflow-wrap: anywhere; }

label > textarea { margin-top: 4px; color: var(--text); resize: vertical; }

.btn.danger { color: var(--error); border-color: currentColor; }

.error { margin: 0; color: var(--error); }
.notice { margin: 0; }

/* ---- Venues view (Wave 1 C) ---- */
.venues-view h2 { margin: 0; font-size: 1.25rem; }
.venues-view h3 { margin-bottom: 0; font-size: 1rem; }
.venues-view .error { margin: 0; color: var(--error); }
.venues-view .status { margin: 0; color: var(--accent); }
.venues-view .error:empty, .venues-view .status:empty, .venues-view .count:empty { display: none; }
.venues-view .picked, .venues-view .count { margin: 0; }
.venues-view .title { display: block; font-weight: 600; }
.venues-view .sub { display: block; color: var(--muted); font-size: 0.875rem; }
.venues-view .nowrap { white-space: nowrap; }

.venue-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.venue-row .open {
  flex: 1;
  min-width: 0;
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.venue-row .actions { display: flex; gap: 8px; }
.venue-row > form, .venue-row > .error { flex-basis: 100%; }

.venues-view .picks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.venues-view .pick {
  width: 100%;
  min-height: var(--tap);
  padding: 8px 12px;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.venues-view .pick[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }

.venues-view .history summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  list-style: none;
  cursor: pointer;
}
.venues-view .history summary::-webkit-details-marker { display: none; }
.venues-view .history summary .text { flex: 1; min-width: 0; }
.venues-view .history summary::after { content: "▸"; color: var(--muted); }
.venues-view .history details[open] > summary::after { content: "▾"; }
.venues-view .entries { list-style: none; margin: 4px 0 0; padding: 0 0 0 12px; }
.venues-view .entries li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: var(--tap);
  padding: 4px 0;
  border-bottom: 0;
}

/* ---- Setlists view (Wave 2 E) ---- */
.setlists-view h2 { margin: 0; font-size: 1.25rem; overflow-wrap: anywhere; }
.setlists-view form h2, .setlists-view h3 { margin: 0; font-size: 1rem; }
.setlists-view .venue-line, .setlists-view .count, .setlists-view .empty { margin: 0; }
.setlists-view .error, .setlists-view .status { margin: 0; }
.setlists-view .error { color: var(--error); }
.setlists-view .status { color: var(--accent); }
.setlists-view .error:empty, .setlists-view .status:empty, .setlists-view .count:empty { display: none; }
.setlists-view .title { display: block; font-weight: 600; overflow-wrap: anywhere; }
.setlists-view .sub { display: block; color: var(--muted); font-size: 0.875rem; }
.setlists-view .nowrap { white-space: nowrap; }

/* List rows: the name opens the setlist, Edit and Delete sit beside it. */
.setlist-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.setlist-row .open {
  flex: 1;
  min-width: 0;
  min-height: var(--tap);
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.setlist-row .actions { display: flex; gap: 8px; }
.setlist-row > form { flex-basis: 100%; }

/* Songs in one setlist, in order, each with a Remove button (R15). */
.setlist-song { display: flex; align-items: center; gap: 8px; }
.setlist-song .text { flex: 1; min-width: 0; }

/* Already sung at this setlist's venue (R43). */
.setlists-view .flag {
  display: inline-block;
  margin-top: 4px;
  padding: 0 8px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  color: var(--accent);
  font-size: 0.875rem;
}

.setlists-view .picks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.setlists-view .pick {
  width: 100%;
  min-height: var(--tap);
  padding: 8px 12px;
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}

/* ---- Find (Wave 2 D) ---- */

/* A song row's sing line under the artist line (R8, R37); dates never break at their hyphens. */
.song-row .sung { display: block; color: var(--muted); font-size: 0.875rem; }
.song-row .nowrap { white-space: nowrap; }

/* Filters (R41, R11, R42): menus in two columns so they fit a phone screen. */
.find-filters .find-form { margin-top: 4px; padding-bottom: 4px; }
.find-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 8px; }
.find-form [hidden] { display: none; }
.find-form .btn { width: 100%; }

/* Label above its control, as when the label wraps it (see label > select above). */
.find-field > label + select, .find-field > label + input { margin-top: 4px; }

/* ---- Data and PWA polish (Wave 3 H) ---- */

/* New version banner (R30). js/update.js appends it to <body>; the flex order
   puts it between the screen and the tabs, within thumb reach. */
.update-banner {
  order: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--surface);
  border-top: 2px solid var(--accent);
}
.update-banner p { flex: 1 1 12em; margin: 0; }
.tabs { order: 2; }

/* Printing from the browser's share or print menu (R24): the song list, a
   setlist's songs or a venue's history in black on white, without the tabs,
   forms, buttons and search boxes. List rows are buttons on screen, so those
   stay and print as plain text. */
@media print {
  :root {
    --bg: #fff;
    --surface: #fff;
    --border: #999;
    --text: #000;
    --muted: #333;
    --accent: #000;
    --accent-text: #fff;
    --error: #000;
    --tap: 0px; /* no tap targets on paper */
    color-scheme: light;
  }

  @page { margin: 12mm; }

  html { font-size: 11pt; }
  html, body { height: auto; background: #fff; color: #000; }
  body { display: block; line-height: 1.35; }

  .tabs, .update-banner, form, .btn, button:not(.song-row):not(.open), input, select, textarea, label,
  details.card, .find-field, .message, .notice, .status, .error, .picks {
    display: none !important;
  }
  /* Separate rules: a browser without :has() drops only these. */
  .card:has(> form) { display: none !important; }
  .card:has(input[type="search"]) { display: none !important; }

  .top { padding: 0 0 8pt; border: 0; }
  .top h1 { font-size: 14pt; }
  main { flex: none; overflow: visible; max-width: none; padding: 0; }
  h2 { font-size: 13pt; }
  .card, details.card { background: none; border: 0; border-radius: 0; padding: 0; }

  /* One thin rule between rows, and no row split across pages. */
  .list li { padding: 3pt 0; border-bottom: 0.5pt solid #999; break-inside: avoid; }
  .song-row { padding: 3pt 0; color: #000; }
  .venue-row .open, .setlist-row .open { padding: 0; color: #000; }
  .list .sub, .song-row .sung, .count, .muted { color: #333; font-size: 11pt; }
  .setlists-view .flag { margin: 0; padding: 0; border: 0; color: #000; font-size: 11pt; font-style: italic; }

  /* A venue's history: the summary prints as plain text, without its arrow,
     and closed entries print too where the browser supports ::details-content
     (elsewhere they stay closed). A separate rule, as with :has() above. */
  details::details-content { display: block; content-visibility: visible; }
  summary { list-style: none; }
  summary::-webkit-details-marker { display: none; }
  .venues-view .history summary::after { content: none; }
  .venues-view .entries li { padding: 0; border: 0; }
}

/* ---- Setlists polish (Wave 3 G) ---- */

/* Song rows (R16): drag handle, the song, then Up, Down and Remove. On a phone
   the buttons wrap onto their own line under the song, at the right, so titles
   keep the full width; wider screens fit everything on one line. */
.setlist-song { flex-wrap: wrap; }
.setlist-song .text { flex: 1 1 12rem; }
.setlist-song .sub { overflow-wrap: anywhere; }
.setlist-song .moves { display: flex; gap: 6px; margin-left: auto; }
.setlist-song .moves .btn { padding: 8px 12px; }
.setlist-song .btn.move { min-width: var(--tap); padding: 0; font-size: 1.125rem; }
.setlist-song .btn.move:disabled { opacity: 0.35; }

.setlist-song .handle {
  min-width: var(--tap);
  padding: 0;
  border-color: transparent;
  background: none;
  color: var(--muted);
  font-size: 1.5rem;
  line-height: 1;
  cursor: grab;
  touch-action: none; /* a finger on the handle drags the row, not the page */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* The row being dragged is lifted above the others and follows the pointer. */
.setlist-song.dragging {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.55);
}
.setlist-song.dragging .handle { color: var(--accent); cursor: grabbing; }

/* Mix by genre and decade (R44). */
.mix .mix-empty { margin: 4px 0 0; }
.mix .mix-lines { margin: 4px 0 0; }
.mix .mix-lines > div + div { margin-top: 8px; }
.mix .mix-lines dt { color: var(--muted); font-size: 0.875rem; }
.mix .mix-lines dd { margin: 0; overflow-wrap: anywhere; }

/* ---- Find and library polish (Wave 3 F) ---- */

/* Sort by (R42, R12) takes the full width, so the longer orders read in full on a phone. */
.find-grid > .find-field:has(> #find-sort) { grid-column: 1 / -1; }

/* "Show N more" under a long list (R34). */
.btn.more { width: 100%; }

/* A link that looks and sizes like .btn: the video search on a song (R38). */
a.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: inherit;
  text-decoration: none;
}

a.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }