/* ============================================================
   STADIUM CSS - M11 Stadium companion shell and Following feed.
   All tokens reference variables defined in tokens.css.
   Gold used only on the followed-camel honor ring (.honor-ring).
   Welfare badges use green/amber/red semantic classes.
   Telemetry numerals (.mono) use IBM Plex Mono, LTR-isolated.
   prefers-reduced-motion and prefers-contrast: more honored.
   No em dash character anywhere in this file.
   ============================================================ */

/* ================================================================
   PRAYER COUNTDOWN STRIP
   ================================================================ */
.prayer-countdown {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px var(--gutter);
  background: var(--surface-2);
  border-block-end: 1px solid var(--line-soft);
  font-family: var(--f-body);
  color: var(--text);
}

.prayer-countdown__label {
  color: var(--sand-dim);
  font-size: 0.8rem;
}

.prayer-countdown__name {
  color: var(--text-strong);
  font-size: 0.95rem;
  font-weight: 600;
}

.prayer-countdown__time {
  font-family: var(--f-mono);
  font-size: 1.1rem;
  color: var(--green);
  unicode-bidi: isolate;
  direction: ltr;
}

@media (prefers-contrast: more) {
  .prayer-countdown {
    border-block-end-color: var(--line);
  }
}

/* ================================================================
   FOLLOWED-CAMEL STRIP
   ================================================================ */
.followed-strip {
  display: flex;
  flex-direction: row;
  gap: 12px;
  overflow-x: auto;
  padding: 12px var(--gutter);
  background: var(--surface);
  border-block-end: 1px solid var(--line-soft);
  scrollbar-width: thin;
}

.followed-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 90px;
  padding: 10px;
  background: var(--surface-2);
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
}

/* Gold ONLY on the honor ring (followed-camel honor treatment per WF 15) */
.honor-ring {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--gold);
}

.followed-strip__name {
  font-family: var(--f-body);
  font-size: 0.85rem;
  color: var(--text);
  text-decoration: none;
  text-align: center;
}

.followed-strip__name:hover {
  color: var(--text-strong);
  text-decoration: underline;
}

.followed-strip__time {
  font-family: var(--f-mono);
  font-size: 0.8rem;
  color: var(--sand-dim);
  unicode-bidi: isolate;
  direction: ltr;
}

.follow-prompt {
  padding: 16px var(--gutter);
  color: var(--muted);
  font-family: var(--f-body);
  background: var(--surface);
  border-block-end: 1px solid var(--line-soft);
}

/* ================================================================
   STADIUM HOME VIEW
   ================================================================ */
.stadium-home {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  min-block-size: 100vh;
}

.stadium-home__title {
  font-family: var(--f-display);
  font-size: 1.5rem;
  color: var(--text-strong);
  padding: 16px var(--gutter) 8px;
  margin: 0;
}

/* ================================================================
   MOCKED GPS MAP
   ================================================================ */
.stadium-map {
  position: relative;
  margin: 16px var(--gutter);
  background: var(--surface-3);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  padding: 20px;
  min-block-size: 160px;
  overflow: hidden;
}

.stadium-map__label {
  font-family: var(--f-body);
  font-size: 0.85rem;
  color: var(--sand-dim);
  margin-block-end: 8px;
}

.stadium-map__concept-badge {
  position: absolute;
  inset-block-end: 8px;
  inset-inline-end: 12px;
  font-family: var(--f-body);
  font-size: 0.7rem;
  color: var(--muted);
  background: var(--surface-2);
  border-radius: var(--r-sm);
  padding: 2px 6px;
  border: 1px solid var(--line-soft);
}

.stadium-map__dots {
  position: absolute;
  inset: 0;
}

.stadium-map__dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
}

/* ================================================================
   FOLLOWING FEED VIEW
   ================================================================ */
.following-view {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  min-block-size: 100vh;
  padding-block-start: 16px;
}

.following-view__title {
  font-family: var(--f-display);
  font-size: 1.5rem;
  color: var(--text-strong);
  padding: 0 var(--gutter) 12px;
  margin: 0;
}

.following-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 var(--gutter);
}

.following-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: var(--surface-2);
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
}

.following-row__name {
  font-family: var(--f-body);
  font-size: 1rem;
  color: var(--text-strong);
  text-decoration: none;
  flex: 1;
}

.following-row__name:hover {
  color: var(--sand);
  text-decoration: underline;
}

.following-row__heat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.following-row__heat-label {
  font-size: 0.7rem;
  color: var(--muted);
}

.following-row__heat-time {
  font-family: var(--f-mono);
  font-size: 0.9rem;
  color: var(--sand);
  unicode-bidi: isolate;
  direction: ltr;
}

.following-empty {
  padding: 32px var(--gutter);
  color: var(--muted);
  font-family: var(--f-body);
  text-align: center;
}

/* ================================================================
   WELFARE BADGE
   Green / amber / red only. Never gold.
   ================================================================ */
.welfare-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-family: var(--f-body);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-weight: 600;
}

.welfare-badge--green {
  background: var(--green-deep);
  color: var(--on-warm);
}

.welfare-badge--amber {
  background: rgba(181,115,10,.15);
  color: var(--amber);
}

.welfare-badge--red {
  background: rgba(216,27,96,.14);
  color: var(--crimson);
}

.welfare-badge--no-signal {
  background: var(--surface-3);
  color: var(--muted);
}

@media (prefers-contrast: more) {
  .welfare-badge--green {
    outline: 2px solid var(--green);
  }
  .welfare-badge--amber {
    outline: 2px solid var(--amber);
  }
  .welfare-badge--red {
    outline: 2px solid var(--crimson);
  }
}

/* ================================================================
   VENUE MAP VIEW
   ================================================================ */
.venue-map {
  display: flex;
  flex-direction: column;
  padding: 16px var(--gutter);
  background: var(--surface);
  min-block-size: 100vh;
}

.venue-map__title {
  font-family: var(--f-display);
  font-size: 1.5rem;
  color: var(--text-strong);
  margin: 0 0 8px;
}

.venue-map__note {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0 0 16px;
}

.venue-map__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
}

.poi {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 14px;
  background: var(--surface-2);
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
}

.poi__label {
  font-family: var(--f-body);
  font-size: 0.9rem;
  color: var(--text);
}

/* ================================================================
   DIGITAL TICKET VIEW
   ================================================================ */
.ticket-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px var(--gutter);
  background: var(--surface);
  min-block-size: 100vh;
}

.ticket-view__title {
  font-family: var(--f-display);
  font-size: 1.5rem;
  color: var(--text-strong);
  margin: 0 0 24px;
  align-self: flex-start;
}

.ticket {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--surface-2);
  border-radius: var(--r-lg);
  border: 1px solid var(--line-soft);
  padding: 28px;
  width: 100%;
  max-inline-size: 400px;
  box-shadow: var(--sh-2);
}

.ticket__event {
  font-family: var(--f-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text-strong);
}

.ticket__venue,
.ticket__date {
  font-size: 0.85rem;
  color: var(--sand-dim);
}

.ticket__detail {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-block: 12px;
  border-block: 1px solid var(--line-soft);
}

.ticket__field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ticket__field-label {
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ticket__field-val {
  font-family: var(--f-mono);
  font-size: 1rem;
  color: var(--text-strong);
  unicode-bidi: isolate;
  direction: ltr;
}

.ticket__qr {
  display: flex;
  justify-content: center;
  padding-block: 8px;
}

.ticket__concept {
  font-size: 0.75rem;
  color: var(--muted);
  text-align: center;
}

/* ================================================================
   REDUCED MOTION OVERRIDES
   JS animations (setInterval prayer countdown tick) are guarded
   in JS by checking prefers-reduced-motion via matchMedia.
   CSS animations additionally suppressed here.
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .stadium-map__dot {
    animation: none;
  }
  .livedot {
    animation: none;
  }
}