/* service-charges.css — building, community and index pages for the
   DLD owners association service charge register. Scoped to .scp. */

.scp{--ink:#0b1220;--muted:#5b6b7f;--line:#e6eaf0;--accent:#0f766e;--warm:#b45309;
  max-width:1060px;margin:0 auto;padding:36px 24px 64px;color:var(--ink);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}

.scp-crumb{font-size:13px;color:var(--muted);margin:0 0 14px}
.scp-crumb a{color:var(--muted);text-decoration:none}
.scp-crumb a:hover{color:var(--accent);text-decoration:underline}

.scp h1{font-size:clamp(27px,4.2vw,42px);line-height:1.1;letter-spacing:-.025em;margin:0 0 16px}
.scp h2{font-size:22px;letter-spacing:-.015em;margin:38px 0 10px}
.scp-card h2{font-size:18px;margin:0 0 10px}

.scp-answer{font-size:19px;line-height:1.6;max-width:72ch;margin:0 0 10px;color:#1c2b3d}
.scp-answer strong{color:var(--ink)}
.scp-rate{color:var(--accent);white-space:nowrap}
.scp-src{font-size:13px;color:var(--muted);margin:0 0 6px}
.scp-note{font-size:13.5px;color:var(--muted);line-height:1.6;max-width:78ch}
.scp-note a{color:var(--accent);font-weight:600}

.scp-warn{background:#fffbeb;border:1px solid #fde68a;border-left:4px solid var(--warm);
  border-radius:10px;padding:14px 18px;margin:18px 0 0}
.scp-warn p{margin:0 0 8px;font-size:14.5px;line-height:1.6}
.scp-warn p:last-child{margin-bottom:0}

.scp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px;margin-top:30px}
.scp-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}

.scp-tbl{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:10px}
.scp-tbl th,.scp-tbl td{padding:10px 12px;text-align:left;border-top:1px solid var(--line);vertical-align:middle}
.scp-tbl thead th{background:#f2f5f8;border-top:0;font-size:12px;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);font-weight:700}
.scp-tbl td.n,.scp-tbl th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.scp-tbl td small{color:var(--muted)}
.scp-tbl tr.tot td{font-weight:700;border-top:2px solid var(--ink)}

.scp-list{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;display:table}
.scp-list a{color:var(--accent);font-weight:600;text-decoration:none}
.scp-list a:hover{text-decoration:underline}
.scp-list tbody tr:hover{background:#f7fafc}

/* category bars */
.scp-bars td:first-child{width:40%}
.scp-bar{width:45%;padding-right:6px!important}
.scp-bar span{display:block;height:8px;border-radius:4px;background:var(--accent);opacity:.75;min-width:2px}

/* year history */
.scp-hist{display:flex;align-items:flex-end;gap:10px;height:190px;margin-top:16px;
  padding:14px 14px 0;background:#fff;border:1px solid var(--line);border-radius:12px;overflow-x:auto}
.scp-hbar{flex:1 0 54px;display:flex;flex-direction:column;justify-content:flex-end;
  align-items:center;height:100%;gap:6px}
.scp-hval{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.scp-hfill{width:100%;max-width:46px;background:#cbd5e1;border-radius:5px 5px 0 0;min-height:4px}
.scp-hbar.now .scp-hfill{background:var(--accent)}
.scp-hbar.now .scp-hval{color:var(--accent);font-weight:700}
.scp-hyear{font-size:12px;color:var(--muted);padding-bottom:10px}

.scp-compare{background:#f0fdfa;border:1px solid #99f6e4;border-radius:12px;padding:18px 20px;margin-top:34px}
.scp-compare h2{margin-top:0}
.scp-compare p{font-size:15px;line-height:1.65;margin:0 0 8px;max-width:76ch}
.scp-cta{color:var(--accent);font-weight:700;text-decoration:none}
.scp-cta:hover{text-decoration:underline}

.scp-search{display:flex;gap:8px;margin:22px 0 8px;max-width:640px}
.scp-search input{flex:1;padding:12px 14px;border:1px solid var(--line);border-radius:10px;
  font:inherit;font-size:16px;background:#fff}
.scp-search input:focus{outline:2px solid var(--accent);outline-offset:1px}
.scp-search button{padding:12px 20px;border:0;border-radius:10px;background:var(--accent);
  color:#fff;font:inherit;font-weight:700;font-size:15px;cursor:pointer}
.scp-search button:hover{background:#0d6259}

.scp-faq{margin-top:10px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.scp-faq details{border-top:1px solid var(--line)}
.scp-faq details:first-child{border-top:0}
.scp-faq summary{cursor:pointer;padding:14px 18px;font-weight:600;font-size:15.5px;list-style:none}
.scp-faq summary::-webkit-details-marker{display:none}
.scp-faq summary::after{content:'+';float:right;color:var(--accent);font-weight:700}
.scp-faq details[open] summary::after{content:'\2212'}
.scp-faq p{margin:0;padding:0 18px 16px;color:#33455c;line-height:1.65;font-size:14.5px;max-width:80ch}

.scp-more{margin-top:34px;font-size:14.5px;line-height:1.9;color:var(--muted)}
.scp-more a{color:var(--accent);font-weight:600;text-decoration:none}
.scp-more a:hover{text-decoration:underline}

@media(max-width:640px){
  .scp{padding:24px 16px 48px}
  .scp-tbl th,.scp-tbl td{padding:9px 8px;font-size:13.5px}
  .scp-bars td:first-child{width:auto}
  .scp-bar{display:none}
  .scp-search{flex-direction:column}
}

/* ---------------------------------------------------------------------------
   Lead card (partials/service-charge-lead.php). Sticky beside the content on
   desktop, stacked below it on phones with a fixed bottom bar that jumps to it
   — same behaviour as the price-check card on the insight pages.
   ------------------------------------------------------------------------- */
.scp-cols{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}
@media(max-width:980px){.scp-cols{grid-template-columns:1fr}}

.scl{position:sticky;top:20px;background:#0b1220;color:#fff;border-radius:14px;padding:20px;
  font-family:Inter,system-ui,sans-serif}
@media(max-width:980px){.scl{position:static;margin-top:32px}}
.scl-badge{display:inline-block;background:rgba(94,234,212,.15);color:#5eead4;font-size:11px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.scl-title{font-size:18.5px;font-weight:700;line-height:1.25;letter-spacing:-.015em;margin:11px 0 8px}
.scl-lede{font-size:13.5px;line-height:1.6;color:#a9bed2;margin:0 0 16px}
.scl-lede b{color:#fff}
.scl-form label{display:block;margin:0 0 11px}
.scl-lab{display:block;font-size:12px;font-weight:600;color:#cbd9e6;margin-bottom:5px}
.scl-lab em{font-style:normal;font-weight:400;color:#7d93a8}
.scl input[type=text],.scl input[type=email]{width:100%;box-sizing:border-box;padding:10px 11px;
  border:1px solid rgba(255,255,255,.16);border-radius:9px;background:rgba(255,255,255,.06);
  color:#fff;font:inherit;font-size:15px}
.scl input::placeholder{color:#6f8599}
.scl input:focus{outline:2px solid #5eead4;outline-offset:1px;background:rgba(255,255,255,.1)}
.scl-two{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.scl-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.scl-pills{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 13px}
.scl-pill{cursor:pointer;font:inherit;font-size:12.5px;padding:6px 11px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);background:transparent;color:#a9bed2}
.scl-pill[aria-checked=true]{background:#5eead4;border-color:#5eead4;color:#06251f;font-weight:700}
.scl-check{display:flex!important;align-items:flex-start;gap:8px;font-size:12.5px;color:#a9bed2;
  line-height:1.45;margin:2px 0 14px!important}
.scl-check input{margin-top:2px;accent-color:#5eead4}
.scl-go{width:100%;padding:12px;border:0;border-radius:10px;background:#5eead4;color:#06251f;
  font:inherit;font-weight:700;font-size:15px;cursor:pointer}
.scl-go:hover{background:#7ff3e0}
.scl-go:disabled{opacity:.6;cursor:default}
.scl-fine{font-size:11.5px;color:#7d93a8;margin:10px 0 0;line-height:1.5}
.scl-out{margin-top:14px;font-size:13.5px;line-height:1.6}
.scl-out.scl-ok{color:#d7e6f2}
.scl-out.scl-ok strong{color:#5eead4;display:block;margin-bottom:6px;font-size:15px}
.scl-out ul{margin:0;padding-left:18px}
.scl-out li{margin-bottom:7px}
.scl-msg{color:#8fa8bd;font-size:12.5px;margin:10px 0 0}
.scl-out.scl-err{color:#fca5a5}

.scl-mbar{display:none}
@media(max-width:980px){
  .scl-mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;align-items:center;
    justify-content:space-between;gap:12px;width:100%;padding:13px 18px;border:0;
    background:#0b1220;color:#fff;font:inherit;font-size:14px;cursor:pointer;
    box-shadow:0 -4px 18px rgba(0,0,0,.28)}
  .scl-mbar b{background:#5eead4;color:#06251f;padding:7px 14px;border-radius:999px;font-size:13px;white-space:nowrap}
  .scp{padding-bottom:86px}
}