/* Overrides on top of Pico. Keep this small. */

.icon {
  width: 1.25em;
  height: 1.25em;
  vertical-align: -0.25em;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.brand-icon {
  display: block;
  height: 2rem;
  width: auto;
  border-radius: 8px;
}

.narrow {
  max-width: 42rem;
}

main > section {
  margin-bottom: 3rem;
}

/* Landing */

.hero {
  display: grid;
  gap: 2rem;
  align-items: center;
  padding-top: 2rem;
}

.hero img {
  width: 100%;
  height: auto;
  max-height: 32rem;
  object-fit: contain;
}

@media (min-width: 768px) {
  .hero {
    grid-template-columns: 3fr 2fr;
  }
}

.screenshot {
  width: 100%;
  height: auto;
  border-radius: var(--pico-border-radius);
}

nav form.inline {
  margin: 0;
}

nav form.inline button {
  margin: 0;
  padding: 0.4rem 0.6rem;
}

.error {
  color: var(--pico-del-color);
}

.saved {
  color: var(--pico-ins-color);
}

/* Sign in: one card centered under the header. */

main:has(.auth-card) {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 3rem;
}

.auth-card {
  width: min(100%, 30rem);
  margin-bottom: 2rem;
}

.auth-card h1,
.form-stack > hgroup h1 {
  margin-bottom: 1.15rem;
  font-size: 1.75rem;
  line-height: 1.2;
}

.auth-form {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 0;
}

.auth-form label,
.auth-form button,
.auth-form select {
  margin-bottom: 0;
}

.auth-form button,
.auth-card [role="button"] {
  width: 100%;
}

.auth-card [role="button"] {
  display: block;
  text-align: center;
}

.role-choice {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
}

.role-choice legend {
  margin-bottom: 0.5rem;
}

.role-choice small {
  color: var(--pico-muted-color);
}

.cf-turnstile {
  align-self: flex-start;
}

/* The password field and its button show only when the toggle is checked. */
.auth-password,
.auth-password-submit,
.auth-form:has(.auth-password-toggle:checked) .auth-link-submit,
.when-open,
.auth-form:has(.auth-password-toggle:checked) .when-closed {
  display: none;
}

.auth-form:has(.auth-password-toggle:checked) .auth-password,
.auth-form:has(.auth-password-toggle:checked) .auth-password-submit {
  display: block;
}

.auth-form:has(.auth-password-toggle:checked) .when-open {
  display: inline;
}

.auth-card input.auth-password-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  appearance: none;
}

.auth-switch {
  text-align: center;
}

.auth-switch label {
  display: inline-block;
  color: var(--pico-muted-color);
  font-size: 0.875rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.auth-card input.auth-password-toggle:focus-visible + label {
  outline: 2px solid var(--pico-primary);
  outline-offset: 2px;
}

.auth-foot {
  margin: 1.15rem 0 0;
  text-align: center;
  color: var(--pico-muted-color);
  font-size: 0.875rem;
}

.auth-note {
  color: var(--pico-muted-color);
  font-size: 0.875rem;
}

/* Settings pages: a narrow column of cards. */

.form-stack {
  width: min(100%, 36rem);
  margin-inline: auto;
  padding-top: 2rem;
}

.form-card h2 {
  margin-bottom: 0.85rem;
  font-size: 1.25rem;
}

.form-card form {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin-bottom: 0;
}

.form-card form + form {
  margin-top: 0.85rem;
}

.form-card label,
.form-card button,
.form-card input,
.form-card select {
  margin-bottom: 0;
}

.form-card small {
  display: block;
  margin-top: 0.35rem;
  color: var(--pico-muted-color);
}

.form-card details {
  margin-bottom: 0;
}

@media (max-width: 576px) {
  main:has(.auth-card),
  .form-stack {
    padding-top: 1.25rem;
  }
}

/* Footer and theme switch */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 2rem;
}

.theme-switch {
  width: auto;
  margin: 0;
}

.theme-switch button {
  padding: 0.35rem 0.6rem;
}

.theme-switch button.outline[aria-pressed="true"] {
  --pico-background-color: var(--pico-secondary-background);
  --pico-border-color: var(--pico-secondary-background);
  --pico-color: var(--pico-secondary-inverse);
}

/* Catalogs */

.section-panel {
  border-bottom: var(--pico-border-width) solid var(--pico-muted-border-color);
  padding-bottom: var(--pico-spacing);
}

.warning {
  border-left: 4px solid #f2a20d;
  padding-left: 1rem;
  margin-bottom: var(--pico-spacing);
}

.error p,
.error li {
  color: inherit;
}

.error ul {
  margin-bottom: var(--pico-spacing);
}

td select {
  margin: 0;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}

/* Destructive actions, as Rails' .btn-danger. */
button.danger {
  --pico-background-color: var(--pico-del-color);
  --pico-border-color: var(--pico-del-color);
  --pico-color: #fff;
}

button.danger:hover,
button.danger:focus {
  --pico-background-color: color-mix(in srgb, var(--pico-del-color) 85%, #000);
  --pico-border-color: color-mix(in srgb, var(--pico-del-color) 85%, #000);
}

button.danger.outline {
  --pico-color: var(--pico-del-color);
  --pico-border-color: var(--pico-del-color);
  --pico-background-color: transparent;
}

button.danger.outline:hover,
button.danger.outline:focus {
  --pico-color: #fff;
  --pico-border-color: var(--pico-del-color);
  --pico-background-color: var(--pico-del-color);
}

/* Shows */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

#freeform-field {
  margin-bottom: var(--pico-spacing);
}

.show-form fieldset label,
.show-form fieldset small {
  display: block;
}

/* New show: the schedule field and button label follow the When choice,
   and the freeform option only matters with a catalog. */
.show-form:has([name="timing"][value="later"]:checked) .when-now,
.show-form:not(:has([name="timing"][value="later"]:checked)) .when-later,
.show-form:has([name="catalog_id"] option[value=""]:checked) #freeform-field {
  display: none;
}

.row-actions {
  display: flex;
  gap: 0.25rem;
  justify-content: flex-end;
}

.row-actions form {
  margin: 0;
}

.row-actions button {
  margin: 0;
  padding: 0.3rem 0.5rem;
}

.row-actions .approve {
  --pico-background-color: var(--pico-ins-color);
  --pico-border-color: var(--pico-ins-color);
}

.queue-table td {
  vertical-align: middle;
}

.now-playing [role="group"] {
  gap: 0.5rem;
}

.now-playing [role="group"] form {
  margin: 0;
  flex: 1;
  border-radius: var(--pico-border-radius);
}

.now-playing [role="group"] button {
  width: 100%;
  margin: 0;
  border-radius: var(--pico-border-radius);
}

.end-show {
  margin-top: var(--pico-spacing);
}

#add-results button {
  margin: 0;
  padding: 0.3rem 0.75rem;
}

/* Drag handles appear once reorder.js runs; touch-action lets a finger drag
   the row instead of scrolling the page. */
.drag-cell {
  width: 1%;
  padding-right: 0;
}

.drag-handle {
  margin: 0;
  padding: 0.25rem;
  border: none;
  background: none;
  color: var(--pico-muted-color);
  cursor: grab;
  touch-action: none;
  display: none;
}

html[data-reorder] .drag-handle {
  display: inline-block;
}

html[data-reordering] .drag-handle {
  cursor: grabbing;
}

tr.is-dragging {
  opacity: 0.85;
  outline: 2px solid var(--pico-primary);
}

html[data-reordering] {
  user-select: none;
}

/* --- Sharing a show --- */

.share-actions {
  width: auto;
  margin-bottom: var(--pico-spacing);
}

/* QR codes need a white background in the dark theme. */
.qr-code {
  display: block;
  background: #fff;
  border-radius: 0.5rem;
}

.share-dialog-body {
  text-align: center;
}

.share-dialog-body h4 {
  font-size: 1.5rem;
}

.share-qr {
  width: 100%;
  max-width: 200px;
  margin: 0 auto var(--pico-spacing);
}

.share-dialog-body [role="group"] {
  justify-content: center;
}

@media print {
  body:has(#share-dialog[open]) * {
    visibility: hidden;
  }

  #share-dialog[open],
  #share-dialog[open] * {
    visibility: visible;
    color: #000;
  }

  #share-dialog[open] {
    position: absolute;
    inset: 0;
    background: #fff;
  }

  #share-dialog article {
    box-shadow: none;
    background: #fff;
  }

  #share-dialog h4 {
    font-size: 2.5rem;
  }

  #share-dialog .share-qr {
    max-width: 300px;
  }

  .no-print {
    display: none !important;
  }
}

/* --- Audience pages --- */

.queue-status-banner {
  display: grid;
  gap: 0.5rem;
  margin-bottom: var(--pico-spacing);
}

.queue-status-banner a {
  display: block;
  padding: 0.6rem 1rem;
  border-radius: var(--pico-border-radius);
  background: color-mix(in srgb, var(--pico-primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--pico-primary) 30%, transparent);
  text-decoration: none;
}

#audience-results button,
.queue-table td form button {
  margin: 0;
  padding: 0.3rem 0.75rem;
}

#audience-load-more {
  text-align: center;
}

.selected-song {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.selected-song p {
  margin: 0;
}

.queue-you {
  font-weight: 600;
}

.queue-you td {
  background: color-mix(in srgb, var(--pico-primary) 12%, transparent);
}

.queue-you td:first-child {
  border-left: 3px solid var(--pico-primary);
}

.queue-position-callout {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--pico-border-radius);
  background: color-mix(in srgb, var(--pico-primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--pico-primary) 30%, transparent);
  margin-bottom: var(--pico-spacing);
}

.queue-position-callout .position-number {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--pico-primary);
  line-height: 1;
}

.queue-position-callout p {
  margin: 0;
}

.now-playing-you {
  border: 1px solid var(--pico-primary);
  background: color-mix(in srgb, var(--pico-primary) 12%, transparent);
}

article.queue-signup-cta {
  padding: 0.85rem 1rem 0.85rem 1.125rem;
  border: 1px solid color-mix(in srgb, var(--pico-muted-border-color) 68%, transparent);
  border-left: 2px solid var(--pico-primary);
  box-shadow: none;
}

article.queue-signup-cta p {
  margin: 0 0 0.35rem;
}

article.queue-signup-cta p:last-child {
  margin: 0;
}

.queue-signup-cta__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pico-muted-color);
}

/* --- Song memory: hearts, saved songs, performances --- */

form.heart-toggle {
  display: inline-block;
  margin: 0;
}

button.heart {
  margin: 0;
  padding: 0.35rem 0.5rem;
  background: none;
  border: none;
  color: var(--pico-muted-color);
}

button.heart.saved,
button.heart:hover {
  color: var(--pico-del-color);
}

.row-actions {
  white-space: nowrap;
  text-align: right;
}

.row-actions button {
  margin: 0;
}

.memory-list {
  padding: 0;
}

.memory-list li {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: flex-start;
  justify-content: space-between;
  padding: 0.75rem 0;
  border-bottom: var(--pico-border-width) solid var(--pico-muted-border-color);
}

.memory-song {
  flex: 1 1 14rem;
}

.memory-actions {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

.memory-actions form.inline,
.memory-actions button {
  margin: 0;
}

details.memory-request {
  margin: 0;
}

details.memory-request summary[role="button"] {
  margin: 0;
  padding: 0.35rem 0.75rem;
}

details.memory-request[open] {
  flex-basis: 100%;
}

details.memory-request form {
  margin-top: 0.75rem;
}

.memory-actions:has(details[open]) {
  flex-basis: 100%;
  flex-direction: column;
}

/* --- Admin --- */

.impersonation-banner {
  background: var(--pico-primary-background);
  color: var(--pico-primary-inverse);
  padding: 0.5rem 0;
}

.impersonation-banner .container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
}

.impersonation-banner form,
.impersonation-banner button {
  margin: 0;
  padding: 0.3rem 0.75rem;
}

nav.admin-nav {
  margin-bottom: var(--pico-spacing);
  border-bottom: var(--pico-border-width) solid var(--pico-muted-border-color);
}

nav.admin-nav a[aria-current="page"],
.filter-links a[aria-current="page"] {
  font-weight: 600;
  text-decoration: underline;
}

.admin-details {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.25rem 1rem;
  margin: 0;
}

.admin-details dt {
  color: var(--pico-muted-color);
}

.admin-details dd {
  margin: 0;
}

.admin-role-form {
  display: flex;
  gap: 0.5rem;
  max-width: 24rem;
}

.admin-role-form select,
.admin-role-form button {
  margin: 0;
}

.admin-stats article p {
  margin-bottom: 0.25rem;
}

.feedback-excerpt {
  max-width: 28rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-message {
  white-space: pre-wrap;
  margin-top: var(--pico-spacing);
}

/* --- Venue display (always dark) --- */

.display-layout {
  margin: 0;
  padding: 2rem 3rem;
  min-height: 100vh;
  overflow: hidden;
}

.display-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  height: calc(100vh - 4rem);
}

.display-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--pico-muted-border-color);
}

.display-header-info h1 {
  font-size: 2.5rem;
  margin-bottom: 0.25rem;
}

.display-header-info p {
  font-size: 1.1rem;
  margin-bottom: 0;
  color: var(--pico-muted-color);
}

.display-header-info mark {
  font-size: 0.9rem;
}

.display-dj-name {
  margin-left: 0.5rem;
}

.display-qr {
  text-align: center;
  flex-shrink: 0;
}

.display-qr-svg {
  width: 120px;
  height: 120px;
}

.display-qr small {
  display: block;
  margin-top: 0.25rem;
  color: var(--pico-muted-color);
  font-size: 0.8rem;
}

.display-now-playing {
  padding: 1.5rem 2rem;
  border-radius: var(--pico-border-radius);
  background: color-mix(in srgb, var(--pico-primary) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pico-primary) 30%, transparent);
}

.display-now-playing h2 {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
  color: var(--pico-primary);
}

.display-now-playing-content {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1rem;
}

.display-song-title {
  font-size: 2.2rem;
  font-weight: 700;
}

.display-song-artist {
  font-size: 1.6rem;
  color: var(--pico-muted-color);
}

.display-song-artist::before {
  content: "by ";
}

.display-song-version {
  font-size: 1.2rem;
  color: var(--pico-muted-color);
}

.display-performer {
  font-size: 1.4rem;
  width: 100%;
  color: var(--pico-primary);
}

.display-empty {
  font-size: 1.3rem;
  color: var(--pico-muted-color);
  margin: 0;
}

.display-queue {
  flex: 1;
  overflow: hidden;
}

.display-queue h2 {
  font-size: 1.4rem;
  margin-bottom: 0.75rem;
}

.display-queue h2 small {
  color: var(--pico-muted-color);
}

.display-queue-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1.4rem;
}

.display-queue-table tbody tr {
  border-bottom: 1px solid var(--pico-muted-border-color);
}

.display-queue-table td {
  padding: 0.6rem 0.75rem;
  vertical-align: middle;
  background: none;
}

.display-queue-table tbody tr:nth-child(even) td {
  background: color-mix(in srgb, var(--pico-color) 4%, transparent);
}

.display-queue-position {
  width: 3rem;
  text-align: center;
  font-weight: 700;
  color: var(--pico-muted-color);
  font-size: 1.2rem;
}

.display-queue-name {
  font-weight: 600;
  white-space: nowrap;
  width: 1%;
  padding-right: 1.5rem !important;
}

.display-queue-artist,
.display-queue-version {
  color: var(--pico-muted-color);
}

.display-queue-version {
  font-size: 1rem;
  margin-left: 0.5rem;
}

@media (max-width: 768px) {
  .display-layout {
    padding: 1rem 1.5rem;
  }

  .display-page {
    height: auto;
    min-height: calc(100vh - 2rem);
  }

  .display-header {
    flex-direction: column;
    text-align: center;
    gap: 1rem;
  }

  .display-header-info h1 {
    font-size: 1.8rem;
  }

  .display-song-title {
    font-size: 1.6rem;
  }

  .display-song-artist {
    font-size: 1.2rem;
  }

  .display-performer {
    font-size: 1.1rem;
  }

  .display-queue-table {
    font-size: 1.1rem;
  }
}