/* The fire service page's film (/services/fire-suppression). Layout, titles, tour, act two and the
   iOS bar bleed all come from solar-home.css (the shared .shs film); this file adds only what the fire
   film has of its own: the street status card and the loader tint. */

.fst { --fst-ok: #3FE08A; --fst-wait: rgba(244,242,236,0.28); }

/* loader: the alarm panel's red, not the sun */
.fst .shs-loader::before { border-color: rgba(230,72,60,0.25); border-top-color: #E6483C; }
.fst .shs-loader span { background: #E6483C; box-shadow: 0 0 24px 6px rgba(230,72,60,0.4); }

/* status card: a panel-style header, then one row per building that turns green once it is protected */
.fst-status { min-width: 200px; }
.fst-status-head { display: flex; align-items: center; gap: 10px; padding-bottom: 9px; margin-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,0.1); }
.fst-status-led { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--fst-wait); transition: background-color .6s ease, box-shadow .6s ease; }
.fst[data-protected="4"] .fst-status-led { background: var(--fst-ok); box-shadow: 0 0 10px rgba(63,224,138,0.8); }
.fst-status-text { display: flex; flex-direction: column; gap: 4px; }
.fst-status-title { font: 600 15px/1 var(--f-display); letter-spacing: -.01em; color: #F4F2EC; }
.fst-status-sub { font: 500 10px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--shs-muted); }
.fst-site { grid-template-columns: 14px 1fr; }
.fst-dot { width: 8px; height: 8px; margin-inline-start: 3px; border-radius: 50%; background: var(--fst-wait); transition: background-color .6s ease, box-shadow .6s ease; }
.fst-site.is-on .fst-dot { background: var(--fst-ok); box-shadow: 0 0 8px rgba(63,224,138,0.75); }
.fst-site .shs-row-l { transition: color .6s ease; }
.fst-site.is-on .shs-row-l { color: #F4F2EC; }
/* the card waits for the scene, and steps aside for the hand-over and the tour */
.fst[data-mode="inter"] .fst-status, .fst[data-mode="tour"] .fst-status { opacity: 0; }

@media (max-width: 767.98px) {
  .fst-status { min-width: 0; }
  .fst-status-head { padding-bottom: 6px; gap: 8px; }
  .fst-status-title { font-size: 12px; }
  .fst-status-sub { display: none; }
  /* phones: the four buildings show as a row of dots under the title */
  .fst-status { grid-template-columns: repeat(4, auto); justify-content: start; column-gap: 8px; }
  .fst-status-head { grid-column: 1 / -1; }
  .fst-site { display: block; }
  .fst-site .shs-row-l { display: none; }
  .fst-dot { display: block; margin: 0; }
}