/*
 * Missed Call Revenue Calculator
 *
 * Loaded inside the calculator's shadow root (see missed-call-calculator.js),
 * so theme/page-builder CSS can't reach it and it renders exactly like the
 * standalone page. `:host` stands in for the original `:root`, `.mcc-page`
 * for the original `body`.
 */
:host{
  all:initial; display:block;
  --navy:#1F3A6E; --navy-deep:#16294F; --red:#C41414; --red-deep:#6E0E0E;
  --bg:#FFFFFF; --surface:#EEF0F6; --ink:#2B2F38; --muted:#6B7280; --line:#D5DAE5;
  --panel:#1F3A6E; --panel-ink:#FFFFFF; --panel-muted:#C9D3E8; --track:#D5DAE5;
  box-sizing:border-box;
}
@media (prefers-color-scheme:dark){
  :host(:not([data-theme="light"])){
    --bg:#0F1522; --surface:#1A2336; --ink:#E6E9F0; --muted:#9AA3B5; --line:#2C3850;
    --panel:#16294F; --panel-ink:#FFFFFF; --panel-muted:#AFBCD6; --track:#2C3850; --red:#E0342F;
  }
}
:host([data-theme="dark"]){
  --bg:#0F1522; --surface:#1A2336; --ink:#E6E9F0; --muted:#9AA3B5; --line:#2C3850;
  --panel:#16294F; --panel-ink:#FFFFFF; --panel-muted:#AFBCD6; --track:#2C3850; --red:#E0342F;
}
*,*::before,*::after{box-sizing:border-box}
.mcc-page{margin:0;background:var(--bg);color:var(--ink);font-family:"Barlow",Calibri,"Segoe UI",Arial,sans-serif;font-size:16px;line-height:1.5;text-align:left;-webkit-text-size-adjust:100%}
.wrap{max-width:1120px;margin:0 auto;padding:32px 20px 40px}
header h1{font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;font-weight:700;font-size:clamp(30px,5vw,46px);line-height:1.05;margin:0 0 8px;color:var(--ink)}
header p{margin:0;color:var(--muted);max-width:62ch}
.grid{display:grid;grid-template-columns:1fr;gap:24px;margin-top:28px}
@media (min-width:900px){.grid{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}}
.inputs{background:var(--surface);border-radius:14px;padding:22px}
.field{padding:14px 0;border-bottom:1px solid var(--line)}
.field:last-child{border-bottom:0}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
label{font-weight:600}
.hint{font-size:13.5px;color:var(--muted);margin-top:2px}
.num{display:flex;align-items:center;gap:2px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:4px 8px;min-width:120px;justify-content:flex-end}
.num span{color:var(--muted);font-weight:500}
.num input{width:90px;border:0;background:transparent;color:var(--ink);font:600 17px "Barlow",Arial,sans-serif;text-align:right;padding:2px 0;margin:0}
.num input:focus{outline:none}
.num:focus-within{border-color:var(--navy);box-shadow:0 0 0 3px rgba(31,58,110,.25)}
input[type=range]{width:100%;margin-top:10px;accent-color:var(--red);height:22px}
.presets{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.presets button{font:600 13.5px "Barlow",Arial,sans-serif;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:999px;padding:6px 12px;cursor:pointer}
.presets button[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
button:focus-visible,input:focus-visible{outline:3px solid var(--red);outline-offset:2px}

.results{display:flex;flex-direction:column;gap:16px}
.hero{background:var(--panel);color:var(--panel-ink);border-radius:14px;padding:26px 24px 22px;position:relative;overflow:hidden}
.hero .lead{color:var(--panel-muted);font-weight:500;margin:0}
.big{font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;font-weight:700;font-size:clamp(52px,9vw,84px);line-height:1;margin:6px 0 4px;color:#fff;font-variant-numeric:tabular-nums}
.big .unit{font-size:.42em;color:var(--panel-muted);font-weight:600;margin-left:6px}
.hero .sub{margin:0;color:var(--panel-muted)}
.meter{margin-top:18px}
.meter .bar{height:14px;border-radius:7px;background:rgba(255,255,255,.14);overflow:hidden;display:flex}
.meter .kept{background:#fff}
.meter .lost{background:var(--red);transition:width .35s ease}
.meter .legend{display:flex;justify-content:space-between;font-size:13.5px;color:var(--panel-muted);margin-top:6px}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.stat{border:1px solid var(--line);border-radius:10px;padding:14px 16px}
.stat b{display:block;font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;font-size:30px;line-height:1.1;font-variant-numeric:tabular-nums}
.stat b.red{color:var(--red)}
.stat span{font-size:14px;color:var(--muted)}
.fix{background:var(--red-deep);color:#fff;border-radius:14px;padding:18px 20px}
.fix h2{font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;font-size:24px;margin:0 0 4px;font-weight:700}
.fix p{margin:0;color:#F3D2D2}
.fix strong{color:#fff}
.note{font-size:13px;color:var(--muted);margin-top:24px;max-width:80ch}
footer{margin-top:28px;padding-top:14px;border-top:1px solid var(--line);font-size:13px;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
@media (prefers-reduced-motion:reduce){.meter .lost{transition:none}}