/* The installation and maintenance page's film (/services/installation-maintenance). 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
   this film has of its own: the site status card, the loader tint and the contract plans' bullet lists. */

.mfm { --mfm-ok: #3FE08A; --mfm-busy: #F2B33D; --mfm-fault: #FF5C48; --mfm-wait: rgba(244,242,236,0.28); }

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

/* status card: a header with the site's state, one row per system, and the year's visits */
.mfm-status { min-width: 210px; }
.mfm-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); }
.mfm-status-led { flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--mfm-wait); transition: background-color .6s ease, box-shadow .6s ease; }
.mfm[data-status="setup"] .mfm-status-led, .mfm[data-status="testing"] .mfm-status-led { background: var(--mfm-busy); box-shadow: 0 0 10px rgba(242,179,61,0.7); }
.mfm[data-status="normal"] .mfm-status-led { background: var(--mfm-ok); box-shadow: 0 0 10px rgba(63,224,138,0.8); }
.mfm[data-status="fault"] .mfm-status-led { background: var(--mfm-fault); box-shadow: 0 0 10px rgba(255,92,72,0.8); }
.mfm-status-text { display: flex; flex-direction: column; gap: 4px; }
.mfm-status-title { font: 600 15px/1 var(--f-display); letter-spacing: -.01em; color: #F4F2EC; }
.mfm-status-sub { font: 500 10px/1 var(--f-ui); letter-spacing: .2em; text-transform: uppercase; color: var(--shs-muted); }
.mfm-status-sub [data-st] { display: none; }
.mfm[data-status="setup"] [data-st="setup"], .mfm[data-status="testing"] [data-st="testing"],
.mfm[data-status="normal"] [data-st="normal"], .mfm[data-status="fault"] [data-st="fault"] { display: inline; }
.mfm[data-status="fault"] [data-st="fault"] { color: #ff8a7a; }
.mfm-sys { grid-template-columns: 14px 1fr; }
.mfm-dot { width: 8px; height: 8px; margin-inline-start: 3px; border-radius: 50%; background: var(--mfm-wait); transition: background-color .6s ease, box-shadow .6s ease; }
.mfm-sys.is-on .mfm-dot { background: var(--mfm-ok); box-shadow: 0 0 8px rgba(63,224,138,0.75); }
.mfm-sys.is-fault .mfm-dot { background: var(--mfm-fault); box-shadow: 0 0 8px rgba(255,92,72,0.8); }
.mfm-sys .shs-row-l { transition: color .6s ease; }
.mfm-sys.is-on .shs-row-l { color: #F4F2EC; }
.mfm-visits { grid-template-columns: 1fr auto; padding-top: 8px; margin-top: 2px; border-top: 1px solid rgba(255,255,255,0.1); }
.mfm-pips { display: inline-flex; gap: 4px; }
.mfm-pips i { width: 12px; height: 4px; border-radius: 2px; background: var(--mfm-wait); transition: background-color .5s ease; }
.mfm[data-visits="1"] .mfm-pips i:nth-child(-n+1), .mfm[data-visits="2"] .mfm-pips i:nth-child(-n+2),
.mfm[data-visits="3"] .mfm-pips i:nth-child(-n+3), .mfm[data-visits="4"] .mfm-pips i { background: #7FA8D8; }
/* the extinguisher round: shown from the maintenance half on */
.mfm-ext { display: none; grid-template-columns: 1fr auto; }
.mfm[data-maint="true"] .mfm-ext { display: grid; }
.mfm-ext-n { font: 600 12px/1 var(--f-ui); letter-spacing: .04em; color: #F4F2EC; font-variant-numeric: tabular-nums; }
/* the card waits for the survey, and steps aside for the hand-over and the tour */
.mfm[data-status="idle"] .mfm-status, .mfm[data-mode="inter"] .mfm-status, .mfm[data-mode="tour"] .mfm-status { opacity: 0; }

/* act two: the contract plans list what each one covers; the system links sit left like the text */
.mfm-plan-list { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.mfm-plan-list li { position: relative; padding-inline-start: 18px; font-size: 14.5px; line-height: 1.5; color: rgba(244,242,236,0.82); }
.mfm-plan-list li::before { content: ""; position: absolute; inset-inline-start: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: #7FA8D8; }
.shs-act2 [data-scene="systems"] .shs-actions { justify-content: flex-start; margin-bottom: 0; }

@media (max-width: 767.98px) {
  .mfm-status { min-width: 0; }
  .mfm-status-head { padding-bottom: 6px; gap: 8px; }
  .mfm-status-title { font-size: 12px; }
  .mfm-status-sub { display: none; }
  /* phones: the four systems show as a row of dots under the title, the visits as pips beside them */
  .mfm-status { grid-template-columns: repeat(4, auto) 1fr; justify-content: start; column-gap: 8px; }
  .mfm-status-head { grid-column: 1 / -1; }
  .mfm-sys { display: block; }
  .mfm-sys .shs-row-l, .mfm-visits .shs-row-l { display: none; }
  .mfm-dot { display: block; margin: 0; }
  .mfm-visits { display: block; padding: 0; margin: 0; border: 0; justify-self: end; }
  .mfm-pips i { width: 8px; }
  .mfm-ext, .mfm[data-maint="true"] .mfm-ext { display: none; }
}