:root {
  color-scheme: light;
  --bg: #ffffff;
  --text: #111111;
  --muted: #555555;
  --accent: #0b5cab;
  --accent-text: #ffffff;
  --border: #cccccc;
  --badge-bg: #b00020;
  --badge-text: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 1rem 9rem 1rem;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 1.125rem;
  line-height: 1.5;
}

header, main, footer { max-width: 44rem; margin: 0 auto; }

h1 { font-size: 1.75rem; margin: 1rem 0 0.25rem 0; }
h2 { font-size: 1.5rem; margin-top: 1.5rem; }
h3 { font-size: 1.25rem; margin-top: 1.5rem; }

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

button {
  font-size: 1.125rem;
  padding: 0.6rem 1rem;
  margin: 0.25rem 0;
  background: var(--accent);
  color: var(--accent-text);
  border: 2px solid var(--accent);
  border-radius: 0.5rem;
  cursor: pointer;
}
button[disabled] { opacity: 0.55; cursor: default; }

label { display: block; margin-top: 0.75rem; font-weight: 600; }
input[type="text"], textarea, select {
  width: 100%;
  font-size: 1.125rem;
  padding: 0.5rem;
  margin-top: 0.25rem;
  border: 2px solid var(--border);
  border-radius: 0.5rem;
  background: var(--bg);
  color: var(--text);
}
#tuner-strings button { margin-right: 0.5rem; }
button.tuner-selected { background: var(--badge-bg); border-color: var(--badge-bg); }

ul { padding-left: 1.25rem; }
li { margin: 0.5rem 0; }

.band-button {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--bg);
  color: var(--text);
  border: 2px solid var(--border);
}
.band-button .band-name { font-weight: 700; }
.band-button .band-note { color: var(--muted); }

.badge {
  display: inline-block;
  background: var(--badge-bg);
  color: var(--badge-text);
  font-weight: 700;
  border-radius: 1rem;
  padding: 0.1rem 0.6rem;
  margin-left: 0.5rem;
}

#status {
  font-weight: 700;
  margin: 1rem 0;
  min-height: 1.5rem;
}

.section-note, footer p { color: var(--muted); }
.toggle { font-weight: 400; }
.toggle input { width: 1.25rem; height: 1.25rem; vertical-align: middle; }

/* Feed cards: one chronological card per update, newest first. */
.feed-card {
  border: 2px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
}
.feed-card h3 { margin: 0 0 0.25rem 0; }
.feed-card p { margin: 0.25rem 0; }
.feed-meta { color: var(--muted); }
.feed-headline { font-weight: 700; }
.refresh-row { margin-top: 1rem; }
.band-actions { margin: 1rem 0; }
#remove-button { background: var(--bg); color: var(--badge-bg); border-color: var(--badge-bg); margin-top: 2rem; }
details { margin-top: 1rem; }
summary { cursor: pointer; font-weight: 700; padding: 0.25rem 0; }

/* Bottom tab bars: pinned to the bottom of the screen, so they are
   always visible without scrolling to the bottom of the page.
   The My artists actions bar sits above the main tabs and only
   shows while the My artists panel is open. */
#fixed-bars {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
}
#my-artists-actions {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem;
  background: var(--bg);
  border-top: 2px solid var(--border);
}
#my-artists-actions[hidden] { display: none; }
#my-artists-actions button {
  flex: 1;
  margin: 0;
}
#bottom-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));
  background: var(--bg);
  border-top: 2px solid var(--border);
}
#bottom-tabs button {
  flex: 1;
  margin: 0;
  font-size: 0.85rem;
  padding: 0.5rem 0.15rem;
}