:root {
  --jadara-navy: #023f7d;
  --jadara-deep: #082a53;
  --jadara-green: #006b41;
  --jadara-aqua: #45a6af;
  --jadara-sky: #bceaf0;
  --jadara-red: #9d2635;
  --jadara-white: #ffffff;
}

/* Keep the map as the entire screen; place the university identity on the controls. */
.guide-header, .guide-center, .map-info, .heading-indicator, .map-coordinates, .route-preview, .guide-bottom {
  background: rgba(8, 42, 83, .95);
  border: 1px solid rgba(188, 234, 240, .35);
  color: var(--jadara-white);
}
.guide-header { gap: .6rem; padding: .45rem .65rem; }
.brand-lockup, .brand { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.brand-logo { display: block; width: 52px; height: 52px; flex: 0 0 52px; object-fit: contain; border-radius: 10px; }
.wordmark { color: var(--jadara-white); font-weight: 800; line-height: 1.08; }
.wordmark small, .brand small { color: var(--jadara-sky); }
.gps-pill { color: white; background: var(--jadara-green); border-color: #87e2b4; }
.gps-pill.warn { color: white; background: var(--jadara-red); border-color: #f4bdc3; }
.phase-label { color: var(--jadara-sky); }
.detail-message, .safety-note { color: #e1f1f6; }
.main-action { background: var(--jadara-green); color: white; box-shadow: 0 5px 0 #02492e; border: 2px solid #9ae7be; }
.main-action:active { box-shadow: 0 2px 0 #02492e; }
.secondary-actions button, .map-info button { background: var(--jadara-navy); color: white; border-color: var(--jadara-sky); }
.secondary-actions button:hover, .map-info button:hover { background: #07569e; }
.heading-indicator, .map-coordinates { border-color: rgba(188, 234, 240, .5); }
.phone-arrow { border-color: var(--jadara-sky); }
.route-preview { background: rgba(8, 42, 83, .98); }
.route-preview summary { color: white; }
.route-network { stroke: #dcf8ef; opacity: .8; }
.route-selected { stroke: #35e2cc; filter: drop-shadow(0 0 4px #001d38); }
.route-label circle { stroke: var(--jadara-navy); }
.field-test-link { color: var(--jadara-sky); }
.fallback-destinations button { background: var(--jadara-navy); border-color: var(--jadara-sky); }

.start-screen .start-button .start-icon { display: none; }
.start-screen .start-button .start-label {
  position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%);
  width: min(88vw, 420px); height: auto; margin: 0; padding: 1.1rem 1.25rem;
  overflow: visible; clip: auto; white-space: normal;
  color: white; background: rgba(8, 42, 83, .96); border: 2px solid var(--jadara-sky);
  border-radius: 20px; box-shadow: 0 12px 40px #001b3988;
  font-size: clamp(1.4rem, 6vw, 2rem); line-height: 1.45;
}
.start-screen .start-button .start-caption {
  position: absolute; top: calc(44% + 64px); left: 50%; transform: translateX(-50%);
  width: min(82vw, 380px); height: auto; margin: 0; padding: .25rem;
  overflow: visible; clip: auto; white-space: normal; color: white;
  font-size: .9rem; text-shadow: 0 2px 6px #00132d;
}
.start-screen .start-button:focus-visible { outline: 5px solid var(--jadara-sky); outline-offset: -8px; }

/* The field survey is a companion page, with the same colors and logo. */
body:has(.topbar) { background: #f1f7f8; color: #082a53; }
.topbar { background: var(--jadara-deep); }
.topbar .brand { color: white; }
.topbar .brand-logo { width: 52px; height: 52px; }
.topbar .top-action { border-color: var(--jadara-sky); text-decoration: none; }
.eyebrow, .section-num, .calibration summary, .map-panel summary { color: var(--jadara-green); }
.notice { border-right-color: var(--jadara-red); background: #fff3f4; }
.destination[aria-pressed=true] { background: #e8f5ec; border-color: var(--jadara-green); }
.destination-letter { color: var(--jadara-navy); }
.voice-button, .action-button.primary { background: var(--jadara-green); color: white; border-color: var(--jadara-green); }
.voice-button:hover, .action-button.primary:hover { background: #005432; }
.instruction { background: var(--jadara-deep); }
.mode-badge { background: #dff2eb; color: #064d31; }
.top-action:focus-visible, .field-test-link:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible { outline: 4px solid var(--jadara-aqua); outline-offset: 3px; }

@media (max-width: 420px) {
  .brand-logo { width: 44px; height: 44px; flex-basis: 44px; }
  .guide-header { padding: .35rem .5rem; }
  .wordmark { font-size: 1.05rem; }
  .gps-pill { font-size: .68rem; padding: .28rem .45rem; }
  .start-screen .start-button .start-caption { top: calc(44% + 72px); }
}
@media (prefers-reduced-motion: reduce) {
  .start-screen .start-button .start-label { transition: none; }
}