/* No backdrop filters, animated previews, or image carousels: this control
   stays inexpensive even on the main-thread audio fallback. */
/* Preserve the app-wide keyboard ring formerly supplied by Eco's CSS. */
button:focus-visible,
select:focus-visible,
input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.scene-picker.background-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 22px;
  width: 480px;
  max-width: calc(100vw - 40px);
  padding: 13px 16px 10px;
  overflow: visible;
  border-radius: 18px;
  background: #10171f;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 32;
}
.background-choice { min-width: 0; }
.background-eyebrow {
  display: block;
  color: #aab8c4;
  font-size: 10px;
  line-height: 1.4;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.background-picker #backgroundTrigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 5px 0;
  border-radius: 6px;
  color: #f5f7fa;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
}
#backgroundName { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.background-chevron { font-size: 20px; color: #7ce7f4; }
.background-motion { border-left: 1px solid #34404b; padding-left: 22px; }
.background-switch { display: flex; align-items: center; gap: 9px; position: relative; min-height: 44px; cursor: pointer; color: #f5f7fa; font-size: 13px; font-weight: 600; white-space: nowrap; }
.background-switch input { position: absolute; width: 100%; height: 100%; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.background-switch-track { width: 34px; height: 20px; flex: 0 0 34px; border-radius: 20px; background: #42515f; border: 1px solid #6f8293; }
.background-switch-track::after { content: ''; display: block; width: 14px; height: 14px; margin: 2px; border-radius: 50%; background: #eff7ff; }
.background-switch input:checked + .background-switch-track { background: #7ce7f4; border-color: #7ce7f4; }
.background-switch input:checked + .background-switch-track::after { background: #0d2028; transform: translateX(14px); }
.background-switch input:focus-visible + .background-switch-track { outline: 2px solid #7ce7f4; outline-offset: 4px; }
#backgroundMotionWarning { display: block; color: #b2bec9; font-size: 10px; line-height: 1.5; }
.background-status { grid-column: 1 / -1; margin: 1px 0 0; color: #9eafbd; font-size: 10px; line-height: 1.4; }
.background-picker .background-choices {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  max-height: min(440px, 60vh);
  max-height: min(440px, 60dvh);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 10px;
  background: #10171f;
  border: 1px solid #46545f;
  border-radius: 16px;
  box-shadow: 0 16px 36px #0008;
}
.background-picker [hidden] { display: none !important; }
.background-menu-heading { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; margin: 2px 8px 10px; color: #d9e4eb; font-size: 12px; }
.background-menu-heading span { color: #9eafbd; font-size: 10px; }
.background-picker .background-choices button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  position: relative;
  width: 100%;
  min-height: 57px;
  padding: 9px 40px 9px 12px;
  border-radius: 9px;
  font-family: var(--font-ui);
  text-transform: none;
  letter-spacing: 0;
  text-align: left;
  color: #e2ebf2;
  font-size: 14px;
}
.background-choices button small { font-size: 11px; color: #aab8c4; font-weight: 400; line-height: 1.7; }
.background-picker .background-choices button:hover { background: #20333f; }
.background-picker .background-choices button[aria-pressed='true'] { background: #18343e; color: #9af0fa; }
.background-choices button[aria-pressed='true']::after { content: '✓'; position: absolute; right: 16px; color: #9af0fa; }
.gps-settling-tip { margin: 0; color: var(--text-dim); font-size: 11px; line-height: 1.6; }
.gps-settling-tip strong { display: block; margin-bottom: 3px; color: var(--text); font-size: 12px; font-weight: 600; }

@media (max-width: 700px) and (orientation: portrait),
       (max-width: 950px) and (max-height: 500px) and (pointer: coarse) {
  .scene-picker.background-picker { position: relative; inset: auto; transform: none; width: 100%; max-width: none; padding: 12px; gap: 4px 12px; min-height: 110px; }
  .background-motion { padding-left: 12px; }
  .background-picker #backgroundTrigger { font-size: 15px; }
  .background-switch { font-size: 12px; gap: 6px; }
  .background-picker .background-choices button { min-height: 62px; font-size: 16px; }
  .background-choices button small { font-size: 12px; }
  .background-status, #backgroundMotionWarning { font-size: 10px; }
  /* Keep the drive-mode badge below the taller background bar. */
  .mode-badge { top: calc(max(16px, env(safe-area-inset-top)) + 126px); }
  .gps-settling-tip { font-size: 12px; line-height: 1.6; }
  .gps-settling-tip strong { font-size: 13px; }
}
@media (max-width: 370px) and (orientation: portrait) {
  .scene-picker.background-picker { padding: 10px; gap: 4px 8px; }
  .background-motion { padding-left: 8px; }
  .background-picker #backgroundTrigger { font-size: 13px; }
  .background-switch { font-size: 11px; gap: 5px; }
  #backgroundMotionWarning { max-width: 112px; font-size: 9px; }
}