/* Shared travel controls. Scene artwork and image hotspots keep their palette. */
:root { --travel-control-ink: #202020; --travel-control-paper: #fff; }
/* These overrides intentionally take precedence over each unit's older theme. */
:is(button:not(.tart-button):not(.flip-card), a.nav-button, a.text-button, a.exit-unit, a.leave-link, a.leave-topic, [role="button"]) {
  background: var(--travel-control-paper) !important;
  color: var(--travel-control-ink) !important;
  border: 1px solid var(--travel-control-ink) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  text-shadow: none !important;
  min-height: 44px;
  font-family: inherit;
}
:is(button:not(.tart-button):not(.flip-card):not(.place-choice):not(.clock-choice), a.nav-button, a.text-button, a.exit-unit, a.leave-link, a.leave-topic) {
  padding: 10px 16px !important;
}
:is(button.primary, button[type="submit"], button.reveal, button#play, button.listen,
    button[aria-pressed="true"]:not(.flip-card), button[aria-selected="true"], button[aria-current="step"],
    button.selected, button.correct, button.wrong) {
  background: var(--travel-control-ink) !important;
  color: var(--travel-control-paper) !important;
}
:is(button:not(.tart-button):not(.flip-card), a.nav-button, a.text-button, a.exit-unit, a.leave-link, a.leave-topic):hover:not(:disabled) {
  background: var(--travel-control-ink) !important;
  color: var(--travel-control-paper) !important;
}
:is(button.primary, button[type="submit"], button.reveal, button#play, button.listen,
    button[aria-pressed="true"]:not(.flip-card), button[aria-selected="true"], button[aria-current="step"]):hover:not(:disabled) {
  background: var(--travel-control-paper) !important;
  color: var(--travel-control-ink) !important;
}
button:not(.tart-button):not(.flip-card):disabled {
  opacity: .45;
  cursor: not-allowed;
}
:is(button, a, input, summary, [role="button"]):focus-visible {
  outline: 3px solid #202020 !important;
  outline-offset: 4px;
}
/* Text inside choice cards follows the button state; illustrations are untouched. */
:is(button .place-name, button .card-sentence, button .card-state, button .choice-label) {
  color: inherit !important;
}
.mode-tabs, .scene-tabs, .preferences { flex-wrap: wrap; gap: 10px; }
.preferences { margin: 18px 0; }
.clock-choice svg { fill: #fff; stroke: #202020; }

[hidden]{display:none!important}
.phrase-audio-controls,.place-audio-controls{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.audio-status{font-size:.875rem;line-height:1.5}