:root {
  color-scheme: dark;
  --bg: #16181d;
  --panel: #20232a;
  --border: #353a45;
  --text: #e6e8ec;
  --muted: #9aa1ad;
  --accent: #3b82f6;
  --live: #dc2626;
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px system-ui, sans-serif;
}

header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
}

header h1 {
  margin: 0;
  font-size: 1.1rem;
}

#status {
  margin-left: auto;
  color: var(--muted);
}

#status.open {
  color: #22c55e;
}

button {
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: var(--panel);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

button:hover {
  border-color: var(--muted);
}

/* Three columns that scroll on their own: songs, slides, output. */
main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 16rem 1fr 22rem;
}

main > * {
  min-height: 0;
  overflow-y: auto;
  padding: 1rem;
}

main > * + * {
  border-left: 1px solid var(--border);
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.empty {
  color: var(--muted);
}

/* Songs */

.library {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

#search,
#target,
#jigwall-dialog input,
#jigwall-dialog select {
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: var(--panel);
  color: var(--text);
  font: inherit;
}

#songs button {
  width: 100%;
  padding: 0.4rem 0.6rem;
  border: 0;
  background: none;
  text-align: left;
}

#songs button:hover {
  background: var(--panel);
}

#songs button.selected {
  background: var(--accent);
}

/* Slides */

/* The title stays visible while the slides scroll. */
.song-header {
  position: sticky;
  top: -1rem;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: -1rem -1rem 0.8rem;
  padding: 1rem;
  background: var(--bg);
}

.song-header h2 {
  margin: 0;
  font-size: 1.2rem;
}

#add-to-service {
  margin-left: auto;
  white-space: nowrap;
}

#slides {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.6rem;
}

#slides button {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 5.5rem;
  padding: 1.4rem 0.7rem 0.7rem;
  border-width: 2px;
  white-space: pre-line;
  text-align: center;
  line-height: 1.35;
}

#slides button::before {
  content: attr(data-index);
  position: absolute;
  top: 0.3rem;
  left: 0.5rem;
  color: var(--muted);
  font-size: 0.75rem;
}

#slides button.next {
  border-color: var(--accent);
}

#slides button.live {
  border-color: var(--live);
  background: color-mix(in srgb, var(--live) 18%, var(--panel));
}

/* Output */

.output {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

figure {
  margin: 0;
}

figcaption {
  margin-bottom: 0.3rem;
  color: var(--muted);
}

.monitor {
  aspect-ratio: 16 / 9;
  border: 2px solid var(--border);
  border-radius: 0.3rem;
}

.monitor.live {
  border-color: var(--live);
}

.actions {
  display: flex;
  gap: 0.5rem;
}

.help {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

#measure {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 1920px;
  height: 1080px;
  visibility: hidden;
}

@media (max-width: 900px) {
  main {
    grid-template-columns: 1fr;
  }

  main > * + * {
    border-left: 0;
    border-top: 1px solid var(--border);
  }
}

/* Backgrounds */

.bg-line {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0 0 0.8rem;
  color: var(--muted);
}

.bg-line[hidden] {
  display: none;
}

.bg-line span:first-child::after {
  content: ":";
}

.bg-line span:nth-child(2) {
  color: var(--text);
}

.bg-line button {
  padding: 0.2rem 0.6rem;
  font-size: 0.85rem;
}

#media-dialog,
#jigwall-dialog {
  width: min(60rem, 90vw);
  max-height: 85vh;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--bg);
  color: var(--text);
}

#media-dialog::backdrop,
#jigwall-dialog::backdrop {
  background: rgb(0 0 0 / 60%);
}

#media-dialog header {
  padding: 0 0 0.8rem;
  border: 0;
}

#media-dialog h2 {
  margin: 0;
  font-size: 1.1rem;
}

#media-dialog form {
  margin-left: auto;
}

.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
  gap: 0.6rem;
}

.media-grid button {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.4rem;
  text-align: left;
}

.media-grid img,
.media-grid video,
.media-grid .none::before {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0.2rem;
  background: #000;
}

.media-grid .none::before {
  content: "";
}

.media-grid span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.85rem;
}

/* Tabs: songs and Bible */

.tabs {
  display: flex;
  gap: 0.3rem;
}

.tabs button {
  flex: 1;
}

.tabs button[aria-selected="true"] {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 25%, var(--panel));
}

[role="tabpanel"] {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

[role="tabpanel"][hidden] {
  display: none;
}

/* Bible */

.bible-version {
  display: flex;
  gap: 0.4rem;
}

#bible-version {
  flex: 1;
  min-width: 0;
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: var(--panel);
  color: var(--text);
  font: inherit;
}

#bible-ref {
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: var(--panel);
  color: var(--text);
  font: inherit;
}

.steps {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  color: var(--muted);
  font-size: 0.85rem;
}

.step {
  padding: 0.2rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 0.3rem;
}

.step b {
  color: var(--text);
}

.step.current {
  border-style: dashed;
  border-color: var(--accent);
}

.step.found {
  border-color: var(--live);
  color: var(--text);
}

.step.flash {
  animation: flash 0.45s ease-out 2;
}

@keyframes flash {
  50% {
    background: color-mix(in srgb, var(--live) 55%, transparent);
  }
}

#bible-grid {
  display: grid;
  gap: 0.3rem;
  align-content: start;
}

#bible-grid.books {
  grid-template-columns: 1fr 1fr;
}

#bible-grid.numbers {
  grid-template-columns: repeat(auto-fill, minmax(2.6rem, 1fr));
}

#bible-grid button {
  padding: 0.35rem 0.2rem;
  font-size: 0.9rem;
}

#bible-grid.books button {
  overflow: hidden;
  padding-left: 0.5rem;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#bible-grid button.hit {
  border-color: var(--live);
  background: color-mix(in srgb, var(--live) 25%, var(--panel));
}

#bible-grid button.dim {
  opacity: 0.35;
}

#slides.verses {
  grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
}

#slides.verses button {
  text-align: left;
}

/* Verses of a planned reading: only a reference, the slides go on past it. */
#slides button.range {
  background: color-mix(in srgb, var(--accent) 12%, var(--panel));
}

/* Service */

#service-clear {
  align-self: flex-start;
  font-size: 0.85rem;
}

.count:empty {
  display: none;
}

.count {
  padding: 0 0.4rem;
  border-radius: 1rem;
  background: var(--border);
  font-size: 0.8rem;
}

[role="tab"].flash {
  animation: flash 0.45s ease-out 2;
}

@media (prefers-reduced-motion: reduce) {
  .step.flash,
  [role="tab"].flash {
    animation: none;
  }
}

#service li[data-index] {
  display: flex;
  align-items: center;
  border-radius: 0.4rem;
  cursor: grab;
}

#service li[data-index]:hover {
  background: var(--panel);
}

#service li.selected {
  background: color-mix(in srgb, var(--accent) 30%, var(--panel));
}

#service li.live {
  box-shadow: inset 3px 0 0 var(--live);
}

#service button {
  border: 0;
  background: none;
}

#service .open {
  flex: 1;
  padding: 0.4rem 0.6rem;
  text-align: left;
}

#service .remove {
  padding: 0.2rem 0.6rem;
  color: var(--muted);
  visibility: hidden;
}

#service li:hover .remove {
  visibility: visible;
}

/* Right-button menu */

.context-menu {
  position: fixed;
  z-index: 10;
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  padding: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 0.4rem;
  background: var(--panel);
  box-shadow: 0 6px 20px rgb(0 0 0 / 45%);
}

.context-menu button {
  border: 0;
  background: none;
  text-align: left;
}

.context-menu button:hover,
.context-menu button:focus-visible {
  background: var(--accent);
  outline: none;
}

#jigwall-dialog {
  width: min(32rem, 90vw);
}

#jigwall-dialog form {
  display: grid;
  gap: 0.8rem;
}

#jigwall-dialog h2 {
  margin: 0;
  font-size: 1.1rem;
}

#jigwall-dialog label {
  display: grid;
  gap: 0.3rem;
  color: var(--muted);
}

#jigwall-dialog .row {
  display: flex;
  gap: 0.5rem;
}

#jigwall-dialog .row select {
  flex: 1;
}

#jigwall-dialog .message {
  margin: 0;
  color: #f87171;
}

#jigwall-dialog .buttons {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
}