/* الخريطة الخارجية (GPS). تعتمد على shell.css. تحافظ على كل معرّفات app.js. */
html, body, .app { height: 100%; margin: 0; overflow: hidden; }
body.outdoor { overscroll-behavior: none; }
.app { display: flex; flex-direction: column; width: 100%; height: 100dvh; position: relative; }

.guide-screen { position: relative; flex: 1; min-height: 0; overflow: hidden; isolation: isolate; margin-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); }
.campus-map-section { position: absolute; inset: 0; z-index: 0; background: #dce8f4; }
.campus-map { width: 100%; height: 100%; direction: ltr; }
.google-map { position: absolute; inset: 0; z-index: 1; }
.leaflet-container { font-family: Arial, sans-serif; }
.leaflet-control-attribution { font-size: 9px !important; background: #ffffffdc !important; color: #263b42 !important; }

/* أدوات الخريطة: عمود صغير فوق الخريطة */
.map-info {
  position: absolute; z-index: 600; top: 8px; left: 8px; width: 176px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px; padding: 7px;
  background: rgba(255, 255, 255, .95); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 4px 14px rgba(16, 35, 61, .18);
}
.map-info h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.map-info span { grid-column: 1 / -1; font-size: .68rem; font-weight: 700; line-height: 1.35; color: var(--muted); }
.map-info #mapStatus { color: var(--navy); font-weight: 800; }
.map-info .network-note { color: var(--amber-ink); }
.map-info button { min-height: 40px; padding: 0 6px; border: 1px solid var(--line); border-radius: 10px; background: var(--tint); color: var(--navy); font-size: .74rem; font-weight: 800; }

.route-preview {
  position: absolute; z-index: 600; top: 8px; right: 8px; width: calc(100% - 202px); max-height: 46%; overflow: auto;
  padding: 6px 10px; background: rgba(255, 255, 255, .96); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 4px 14px rgba(16, 35, 61, .18);
}
.route-preview summary { min-height: 36px; display: flex; align-items: center; color: var(--navy); font-size: .8rem; font-weight: 800; cursor: pointer; }
.route-preview p { margin: 6px 1px 0; color: var(--muted); font-size: .7rem; line-height: 1.5; }
.route-image-wrap { position: relative; width: 100%; margin-top: 6px; overflow: hidden; border-radius: 10px; direction: ltr; }
.route-image-wrap img { display: block; width: 100%; height: auto; }
.route-image-wrap svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.route-network { fill: none; stroke: #fce17d; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 9; }
.route-selected { fill: none; stroke: #00ecd4; stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 4px #003e45); }
.route-label circle { fill: #fff; stroke: var(--navy); stroke-width: 3; }
.route-label text { font: 800 17px Arial, sans-serif; fill: var(--ink); text-anchor: middle; dominant-baseline: central; }
.route-label.gate text { font-size: 13px; }

.location-arrow-marker { display: grid; place-items: center; }
.location-arrow { width: 36px; height: 36px; display: grid; place-items: center; transform: rotate(var(--phone-rotation, 0deg)); border: 3px solid #fff; border-radius: 50%; background: #0879e7; color: #fff; font: 800 22px Arial, sans-serif; line-height: 1; box-shadow: 0 2px 9px #0b2439aa; }
.entrance-pin { width: 30px; height: 30px; display: grid; place-items: center; border: 3px solid #fff; border-radius: 50%; background: var(--navy); color: #fff; font: 800 15px Arial, sans-serif; box-shadow: 0 2px 8px #0b2439aa; }
.entrance-pin.turn-pin { width: 26px; height: 26px; margin: 2px; background: #164774; font-size: 13px; }
.entrance-pin.pending-pin { background: #b66a25; }

/* لوحة التعليمات السفلية */
.sheet {
  position: absolute; z-index: 700; left: 0; right: 0; bottom: 0; max-height: 52%;
  display: flex; flex-direction: column; background: #fff; border-radius: 20px 20px 0 0; box-shadow: 0 -6px 22px rgba(16, 35, 61, .22);
}
.sheet::before { content: ''; flex: none; width: 40px; height: 4px; margin: 8px auto 0; border-radius: 4px; background: var(--line); }
.sheet-body { overflow: auto; padding: 8px 14px 14px; max-width: 560px; width: 100%; margin: 0 auto; }
.visual-pulse { display: none; }
.instruction { background: var(--navy); color: #fff; border-radius: 14px; padding: 10px 14px; }
.phase-label { margin: 0 0 2px; color: #cfe0f5; font-size: .72rem; font-weight: 800; }
.main-message { margin: 0; font-size: 1.1rem; font-weight: 800; line-height: 1.5; }
.detail-message { margin: 3px 0 0; color: #cfe0f5; font-size: .78rem; line-height: 1.55; }

.heading-indicator { display: flex; align-items: center; gap: 10px; margin: 10px 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--ground); }
.phone-arrow { width: 38px; height: 38px; flex: none; display: grid; place-items: center; color: var(--navy); border: 2.5px solid var(--navy); border-radius: 50%; background: #fff; font-size: 1.3rem; font-weight: 800; }
.heading-text { flex: 1; min-width: 0; }
.heading-text b { display: block; font-size: .86rem; }
.heading-text small { display: block; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.heading-indicator .btn { min-height: 44px; padding: 0 10px; font-size: .75rem; }

.btn.mic { min-height: 56px; font-size: 1.05rem; }
.fallback-destinations { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin: 8px 0; }
.fallback-destinations button { min-height: 48px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--tint); color: var(--navy); font-size: 1.1rem; font-weight: 800; }
.fallback-destinations button:active { background: var(--navy); color: #fff; }
.sheet .btn-row { margin-top: 8px; }
#arrivedButton { margin-top: 10px; }
.map-coordinates { margin: 10px 0 6px; color: var(--muted); font-size: .7rem; line-height: 1.6; }
.safety-note { margin: 10px 0 0; color: var(--muted); font-size: .7rem; line-height: 1.55; text-align: center; }

/* شاشة البدء */
.start-screen { position: absolute; z-index: 1100; inset: calc(var(--bar-h) + env(safe-area-inset-top) + var(--step-h)) 0 calc(var(--tab-h) + env(safe-area-inset-bottom)) 0; }
.start-button { position: relative; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(8, 28, 56, .35); color: #fff; }
.start-icon { display: none; }
.start-label { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); width: min(88vw, 400px); padding: 18px 20px; border-radius: 18px; background: var(--navy); color: #fff; box-shadow: 0 12px 36px rgba(2, 20, 48, .45); font-size: 1.35rem; font-weight: 800; line-height: 1.5; text-align: center; }
.start-caption { position: absolute; top: calc(40% + 62px); left: 50%; transform: translateX(-50%); width: min(80vw, 360px); color: #fff; font-size: .9rem; font-weight: 700; text-align: center; text-shadow: 0 2px 6px #00132d; }
.start-button:focus-visible { outline: 4px solid var(--amber); outline-offset: -8px; }
.app:not(.before-start) .start-screen { display: none; }
.before-start .sheet, .before-start .map-info, .before-start .route-preview { display: none !important; }
.before-start .stepper a[href="./tags.html"] { pointer-events: none; }

/* شاشة التحويل للداخل */
.handoff { position: absolute; inset: 0; z-index: 1200; display: grid; place-items: center; padding: 16px; background: rgba(8, 28, 56, .55); }
.handoff-card { width: min(100%, 420px); padding: 20px; border-radius: 20px; background: #fff; box-shadow: 0 16px 40px rgba(2, 20, 48, .4); }
.handoff-card h2 { margin: 0 0 8px; font-size: 1.25rem; }
.handoff-card p { margin: 0 0 14px; color: var(--muted); line-height: 1.7; }

@media (max-height: 700px) {
  .sheet { max-height: 58%; }
  .safety-note { display: none; }
}
@media (min-width: 700px) {
  .sheet { left: 50%; right: auto; width: 560px; transform: translateX(-50%); }
}