/* The security service page's film (/services/security-systems). 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 security
   film has of its own: the property status card and the loader tint. */

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

/* loader: the site's blue accent, not the sun */
.sec .shs-loader::before { border-color: rgba(127,168,216,0.25); border-top-color: #7FA8D8; }
.sec .shs-loader span { background: #7FA8D8; box-shadow: 0 0 24px 6px rgba(127,168,216,0.4); }

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

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