/* Monitor My Air: components added in the 2026-09 service rebuild. Tokens come from editorial.css. */

/* top call strip */
.callbar{background:var(--pine-2);border-bottom:1px solid var(--line-2);font-size:.86rem;color:var(--ink-3)}
.callbar .container{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:7px;padding-bottom:7px}
.callbar a{color:var(--ink);font-weight:600;text-decoration:none}
@media(max-width:620px){.callbar .cb-note{display:none}.callbar .container{justify-content:center}}

/* sticky mobile action bar */
.mbar{display:none}
@media(max-width:760px){
  .mbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(12,14,13,.96);border-top:1px solid var(--line);backdrop-filter:blur(8px)}
  .mbar .btn{justify-content:center;padding:12px 8px;font-size:.95rem}
  body{padding-bottom:74px}
}

/* booking form */
.bform{max-width:760px;margin-inline:auto}
.bform .f-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
@media(max-width:620px){.bform .f-row{grid-template-columns:1fr}}
.bform label.f{display:block;font-weight:600;color:var(--ink);font-size:.92rem;margin-bottom:var(--s4)}
.bform label.f .opt{font-weight:400;color:var(--ink-3)}
.bform input[type=text],.bform input[type=email],.bform input[type=tel],.bform select,.bform textarea{
  width:100%;margin-top:6px;padding:12px 14px;border:1px solid var(--line-ink);border-radius:var(--r);
  font-family:var(--sans);font-size:1rem;background:var(--card);color:var(--ink)}
.bform select option{background:var(--card);color:var(--ink)}
.bform input:focus,.bform select:focus,.bform textarea:focus{outline:none;border-color:var(--clay)}
.bform fieldset{border:1px solid var(--line);border-radius:var(--r);padding:var(--s4) var(--s5);margin:0 0 var(--s4)}
.bform legend{font-weight:600;color:var(--ink);font-size:.92rem;padding:0 6px}
.bform .checks{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
@media(max-width:620px){.bform .checks{grid-template-columns:1fr}}
.bform .checks label{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;color:var(--ink-2);cursor:pointer}
.bform .checks input{margin-top:5px;accent-color:var(--clay)}
.bform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bform .fine{font-size:.85rem;color:var(--ink-3)}
.bform .err{color:#e0a38f;font-weight:600;margin-top:var(--s3)}
.bdone{max-width:640px;margin-inline:auto;text-align:center}

/* data table (location pages) */
.dtable{width:100%;border-collapse:collapse;font-size:.95rem;margin:var(--s4) 0}
.dtable th,.dtable td{padding:10px 12px;border-bottom:1px solid var(--line-2);text-align:left}
.dtable th{color:var(--ink-3);font-weight:600;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase}
.dtable td.n{font-variant-numeric:tabular-nums;color:var(--ink)}
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.src{font-size:.82rem;color:var(--ink-3)}

/* answer pages */
.article{max-width:var(--reading);margin-inline:auto}
.article h1{margin-bottom:var(--s4)}
.article h2{font-size:1.45rem;margin:var(--s7) 0 var(--s3)}
.article h3{font-size:1.15rem;margin:var(--s5) 0 var(--s2)}
.article .meta{font-size:.88rem;color:var(--ink-3);margin-bottom:var(--s5)}
.article .answer-box{background:var(--card);border:1px solid var(--line);border-left:2px solid var(--clay);border-radius:0 var(--r) var(--r) 0;padding:var(--s4) var(--s5);margin:var(--s5) 0}
.article .answer-box p{margin:0;color:var(--ink)}
.gatebox{background:linear-gradient(165deg,var(--card-2),var(--card));border:1px solid var(--line-ink);border-radius:var(--r-lg);padding:var(--s6);margin:var(--s7) 0;text-align:center}
.gatebox h2{margin-top:0}
.gatebox ul{text-align:left;display:inline-block;margin:var(--s3) auto var(--s5)}
.threat{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill);border:1px solid var(--line)}
.threat.High{color:#e0a38f;border-color:#5a3a30}
.threat.Moderate{color:var(--gold);border-color:#4a412f}
.threat.Low{color:var(--sage)}

/* link lists */
.linklist{list-style:none;padding:0;margin:0;columns:2;column-gap:var(--s6)}
.linklist li{break-inside:avoid;padding:6px 0;border-bottom:1px solid var(--line-2)}
.linklist a{color:var(--ink-2);text-decoration:none}
.linklist a:hover{color:var(--ink)}
@media(max-width:620px){.linklist{columns:1}}

/* simple numbered steps */
.nsteps{counter-reset:ns;display:grid;gap:var(--s4);grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.nsteps{grid-template-columns:1fr}}
.nsteps .card{position:relative;padding-top:52px}
.nsteps .card::before{counter-increment:ns;content:counter(ns);position:absolute;top:18px;left:clamp(22px,2.4vw,30px);font-family:var(--serif);font-size:1.5rem;color:var(--clay)}

.proofrow{display:flex;flex-wrap:wrap;gap:var(--s5) var(--s7);margin-top:var(--s6)}
.proofrow div b{display:block;font-family:var(--serif);font-size:1.5rem;color:var(--ink);font-weight:480}
.proofrow div span{font-size:.9rem;color:var(--ink-3)}

/* phones: the sticky bottom bar carries the calls to action, so the header keeps only brand + menu */
@media(max-width:760px){.nav-cta{display:none}}

/* estimator */
.est-list{display:grid;gap:10px}
.est-opt{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;color:var(--ink-2)}
.est-opt:hover{border-color:var(--line-ink)}
.est-opt input{margin-top:6px;accent-color:var(--clay)}
.est-r{color:var(--ink);font-weight:600;white-space:nowrap}
.est-n{display:block;font-size:.88rem;color:var(--ink-3)}
.est-group{border:0;padding:0;margin:0 0 var(--s5);display:grid;gap:8px}
.est-group legend{font-weight:600;color:var(--ink);margin-bottom:8px}
.est-total{border-color:var(--clay)}
.est-total #estRem,.est-total #estInsp{font-size:1.1rem;color:var(--ink)}