/* Readability and touch-target improvements for small screens. */
@media (max-width: 760px) {
  .sidebar {
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  }

  .nav-btn {
    min-height: 64px;
    padding: 6px 2px;
    gap: 4px;
    font-size: 11px;
    line-height: 1.15;
  }

  .nav-ico {
    font-size: 18px;
  }

  .nav-count {
    padding: 3px 6px;
    font-size: 9px;
    line-height: 1;
  }

  .main {
    padding-bottom: calc(112px + env(safe-area-inset-bottom));
  }

  .crumb {
    font-size: 12px;
  }

  .demo-pill {
    min-height: 36px;
    font-size: 10px;
  }

  .page-head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .page-head > .btn {
    align-self: flex-start;
    min-height: 44px;
    padding: 11px 14px;
    font-size: 12px;
  }

  .page-head > .btn span {
    font-size: 16px;
  }

  .page-desc {
    font-size: 12px;
  }

  .eyebrow {
    font-size: 11px;
  }

  .btn {
    min-height: 44px;
    padding: 11px 14px;
    font-size: 12px;
    line-height: 1.25;
  }

  .btn.small {
    min-height: 44px;
    padding: 9px 12px;
    font-size: 11px;
  }

  .hero .btn {
    min-height: 44px;
    padding: 11px 13px;
    font-size: 12px;
  }

  .metric-label {
    font-size: 11px;
  }

  .metric-note {
    font-size: 10px;
  }

  .card-title {
    font-size: 15px;
  }

  .card-sub {
    font-size: 12px;
  }

  .text-link {
    min-height: 44px;
    padding: 10px 8px;
    font-size: 12px;
  }

  .song-name,
  .queue-person .song-name {
    font-size: 13px;
    line-height: 1.35;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
  }

  .song-meta,
  .queue-person .song-meta {
    font-size: 11px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .key-chip,
  .status-chip,
  .priority-chip {
    padding: 6px 9px;
    font-size: 11px;
  }

  .card-head {
    flex-wrap: wrap;
  }

  .filters {
    flex-wrap: wrap;
    gap: 4px;
  }

  .filter-btn {
    min-height: 44px;
    padding: 8px 10px;
    font-size: 11px;
  }

  .queue-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
  }

  .queue-row .queue-person {
    grid-column: 1 / -1;
  }

  .queue-row .key-chip {
    grid-column: 1;
    align-self: center;
  }

  .row-actions {
    gap: 4px;
    justify-self: end;
  }

  .row-actions .icon-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 8px;
    font-size: 12px;
  }

  .preset {
    min-height: 56px;
    padding: 12px;
  }

  .preset b {
    font-size: 12px;
  }

  .preset small {
    font-size: 11px;
  }

  .device-select {
    min-height: 44px;
    padding: 9px 12px;
    font-size: 12px;
  }

  .slider-row label,
  .slider-row output {
    font-size: 12px;
  }

  .overlay-option {
    min-height: 56px;
    font-size: 12px;
  }

  .toggle {
    width: 48px;
    height: 28px;
    flex: none;
  }

  .toggle:before {
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
  }

  .toggle:checked:before {
    left: 24px;
  }

  .color-row {
    gap: 8px;
    padding: 10px 0;
  }

  .color-dot {
    width: 44px;
    height: 44px;
    flex: none;
  }

  .overlay-builder label {
    gap: 6px;
    font-size: 11px;
  }

  .overlay-builder input {
    min-height: 44px;
    padding: 11px 12px;
    font-size: 14px;
  }

  .overlay-url-output {
    min-height: 44px;
    padding: 10px;
    font-size: 12px;
  }

  .overlay-builder-actions .btn {
    flex: 1 1 140px;
  }

  .form-field label {
    font-size: 12px;
  }

  .form-field input,
  .form-field select {
    min-height: 48px;
    padding: 12px;
    font-size: 16px;
  }

  .form-submit {
    min-height: 48px;
  }

  .form-note {
    font-size: 11px;
  }

  .modal-close {
    width: 44px;
    height: 44px;
    font-size: 24px;
  }

  .link-info p {
    font-size: 12px;
  }

  .copy-line input {
    min-height: 44px;
    font-size: 12px;
  }

  .quick-row b {
    font-size: 12px;
  }

  .quick-row small {
    font-size: 11px;
  }

  .plan-copy {
    font-size: 12px;
  }

  .plan-features {
    font-size: 12px;
  }

  .plan-badge {
    font-size: 9px;
  }

  .plan-foot {
    font-size: 10px;
  }
}

/* Keep scaled Browser Source overlays inside the viewport and improve legibility. */
.overlay {
  width: min(calc((100vw - 48px) / var(--scale)), calc(480px / var(--scale)));
}

@media (max-width: 520px) {
  .overlay {
    left: 14px;
    width: min(calc((100vw - 28px) / var(--scale)), calc(480px / var(--scale)));
  }

  .panel {
    padding: 16px 17px 15px;
  }

  .topline {
    margin-bottom: 12px;
  }

  .brand {
    font-size: 11px;
    letter-spacing: .1em;
  }

  .live {
    padding: 7px 9px;
    font-size: 11px;
  }

  .now-label,
  .next-label {
    font-size: 11px;
    line-height: 1.3;
    letter-spacing: .1em;
  }

  .song {
    font-size: calc(19px * var(--scale));
    line-height: 1.2;
    overflow-wrap: anywhere;
  }

  .artist {
    font-size: calc(13px * var(--scale));
    overflow-wrap: anywhere;
  }

  .divider {
    margin: 15px 0 13px;
  }

  .next-icon {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }

  .next-title {
    font-size: calc(15px * var(--scale));
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    line-height: 1.25;
  }

  .next-artist {
    font-size: calc(12px * var(--scale));
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    line-height: 1.35;
  }

  .request {
    align-items: flex-start;
    font-size: calc(12px * var(--scale));
    line-height: 1.4;
  }

  .request svg {
    width: 16px;
    height: 16px;
    margin-top: 1px;
  }
}