/* =========================================================================
   SERVICE QUOTA PLANNER — scoped to .sqp- prefix
   Reuses --brand / --text / --border tokens defined globally in header.php
========================================================================= */
:root{
    --sqp-green:#16a34a; --sqp-green-d:rgba(22,163,74,.08); --sqp-green-b:rgba(22,163,74,.25);
    --sqp-amber:#d97706; --sqp-amber-d:rgba(217,119,6,.08); --sqp-amber-b:rgba(217,119,6,.25);
    --sqp-red:#dc2626;   --sqp-red-d:rgba(220,38,38,.08);   --sqp-red-b:rgba(220,38,38,.25);
    --sqp-blue:#2563eb;  --sqp-blue-d:rgba(37,99,235,.08);
    --sqp-mono:'DM Mono', monospace;
}
*, *::before, *::after { box-sizing:border-box; }
.sqp-page{ font-family:'DM Sans',sans-serif; background:#f5f9f8; color:var(--text); }

/* ── Hero ── */
.sqp-hero{
    background:linear-gradient(145deg,#0e2d27 0%,#1a4a3d 60%,#0e3530 100%);
    border-bottom:1px solid rgba(78,179,154,.2);
    padding:2.25rem 2rem 2rem; position:relative; overflow:hidden;
}
.sqp-hero::before{ content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse 60% 80% at 75% 50%, rgba(78,179,154,.08) 0%, transparent 60%);
    pointer-events:none; }
.sqp-hero-inner{ max-width:1140px; margin:0 auto; position:relative; z-index:1; }
.sqp-chips{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:1rem; }
.sqp-chip{ font-family:var(--sqp-mono); font-size:.62rem; padding:4px 10px; border-radius:4px;
    border:1px solid rgba(111,209,179,.3); color:#6fd1b3; background:rgba(78,179,154,.1);
    letter-spacing:.05em; text-transform:uppercase; display:inline-flex; align-items:center; gap:5px; }
.sqp-tag{ font-family:var(--sqp-mono); font-size:.65rem; color:#6fd1b3; letter-spacing:.12em;
    text-transform:uppercase; margin-bottom:.6rem; }
.sqp-updated{ font-size:.78rem; color:#a8c9c0; margin:.35rem 0 1rem; }
.sqp-hero h1{ font-size:1.85rem; font-weight:700; color:#fff; line-height:1.25; margin-bottom:.6rem; }
.sqp-hero h1 em{ font-style:normal; color:#6fd1b3; }
.sqp-hero p{ font-size:.95rem; color:#c8ded8; line-height:1.7; max-width:760px; }

/* ── Main layout ── */
.sqp-main{ max-width:1140px; margin:0 auto; padding:1.75rem 2rem 3rem; }
.sqp-section{ margin-top:2.25rem; }
.sqp-sec-title{ font-family:var(--sqp-mono); font-size:.68rem; font-weight:700; color:#3a9b83;
    letter-spacing:.1em; text-transform:uppercase; margin-bottom:.75rem; display:flex; align-items:center; gap:8px; }
.sqp-sec-title svg{ width:15px; height:15px; stroke:#3a9b83; fill:none; stroke-width:2; }
.sqp-h2{ font-size:1.3rem; font-weight:700; color:var(--text); margin-bottom:.4rem; }
.sqp-lede{ font-size:.9rem; color:var(--text-muted); line-height:1.7; max-width:820px; margin-bottom:1.25rem; }

/* ── Estimator panel ── */
.sqp-panel{ background:#fff; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.sqp-panel-head{ padding:.9rem 1.25rem; border-bottom:1px solid var(--border); background:#f5f9f8;
    display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem; }
.sqp-panel-title{ font-family:var(--sqp-mono); font-size:.68rem; font-weight:700; color:#3a9b83;
    letter-spacing:.08em; text-transform:uppercase; }
.sqp-panel-body{ padding:1.25rem; }
.sqp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:1rem 1.25rem; }
.sqp-field{ display:flex; flex-direction:column; gap:5px; }
.sqp-field label{ font-size:.76rem; font-weight:600; color:var(--text); }
.sqp-field .sqp-hint{ font-size:.68rem; color:var(--text-muted); font-weight:400; }
.sqp-field input, .sqp-field select{
    border:1px solid var(--border); border-radius:6px; padding:.5rem .65rem; font-size:.85rem;
    font-family:var(--sqp-mono); color:var(--text); background:#fafffd; }
.sqp-field input:focus, .sqp-field select:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(78,179,154,.15); }
.sqp-check-row{ display:flex; align-items:center; gap:8px; margin-top:.6rem; }
.sqp-check-row input{ width:16px; height:16px; accent-color:var(--brand); }
.sqp-check-row label{ font-size:.8rem; color:var(--text); }
.sqp-subgroup-title{ font-size:.7rem; font-weight:700; color:var(--text-muted); text-transform:uppercase;
    letter-spacing:.06em; margin:1.25rem 0 .6rem; padding-top:1rem; border-top:1px dashed var(--border); }
.sqp-subgroup-title:first-of-type{ border-top:none; padding-top:0; margin-top:0; }

.sqp-btn-row{ display:flex; gap:.6rem; flex-wrap:wrap; }
.sqp-btn{ border:none; border-radius:7px; padding:.65rem 1.15rem; font-size:.82rem; font-weight:600;
    cursor:pointer; display:inline-flex; align-items:center; gap:7px; font-family:'DM Sans',sans-serif; transition:transform .12s,box-shadow .12s; }
.sqp-btn:active{ transform:translateY(1px); }
.sqp-btn-primary{ background:linear-gradient(135deg,var(--brand),var(--brand-dark)); color:#fff; }
.sqp-btn-primary:hover{ box-shadow:0 4px 14px rgba(78,179,154,.35); }
.sqp-btn-sec{ background:#fff; border:1px solid var(--border); color:var(--text); }
.sqp-btn-sec:hover{ border-color:var(--brand); color:var(--brand-dark); }
.sqp-btn svg{ width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }

/* ── Results ── */
.sqp-results{ margin-top:1.75rem; display:none; }
.sqp-results.show{ display:block; }
.sqp-summary-bar{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; margin-bottom:1.25rem; }
.sqp-summary-card{ border-radius:9px; padding:.9rem 1rem; border:1px solid; text-align:center; }
.sqp-summary-card .num{ font-family:var(--sqp-mono); font-size:1.6rem; font-weight:700; line-height:1; }
.sqp-summary-card .lbl{ font-size:.68rem; text-transform:uppercase; letter-spacing:.05em; margin-top:.3rem; opacity:.85; }
.sqp-summary-card.ok{ background:var(--sqp-green-d); border-color:var(--sqp-green-b); color:var(--sqp-green); }
.sqp-summary-card.amber{ background:var(--sqp-amber-d); border-color:var(--sqp-amber-b); color:var(--sqp-amber); }
.sqp-summary-card.red{ background:var(--sqp-red-d); border-color:var(--sqp-red-b); color:var(--sqp-red); }
.sqp-summary-card.neutral{ background:#f5f9f8; border-color:var(--border); color:var(--text2); }

.sqp-result-row{ display:grid; grid-template-columns:1.6fr .8fr .8fr 1fr 1.6fr; gap:.75rem; align-items:center;
    padding:.75rem .9rem; border-radius:8px; border:1px solid var(--border); background:#fff; margin-bottom:8px; }
.sqp-result-row.amber{ border-color:var(--sqp-amber-b); background:var(--sqp-amber-d); }
.sqp-result-row.red{ border-color:var(--sqp-red-b); background:var(--sqp-red-d); }
.sqp-result-row.ok{ border-color:var(--sqp-green-b); }
.sqp-rr-name{ font-size:.82rem; font-weight:600; color:var(--text); }
.sqp-rr-sub{ font-size:.68rem; color:var(--text-muted); margin-top:2px; }
.sqp-rr-val{ font-family:var(--sqp-mono); font-size:.82rem; text-align:center; }
.sqp-rr-badge{ font-family:var(--sqp-mono); font-size:.62rem; font-weight:700; letter-spacing:.05em;
    text-transform:uppercase; padding:3px 8px; border-radius:4px; display:inline-block; text-align:center; }
.sqp-rr-badge.ok{ background:var(--sqp-green-d); color:var(--sqp-green); }
.sqp-rr-badge.amber{ background:var(--sqp-amber-d); color:var(--sqp-amber); }
.sqp-rr-badge.red{ background:var(--sqp-red-d); color:var(--sqp-red); }
.sqp-rr-action{ font-size:.75rem; color:var(--text2); line-height:1.5; }
.sqp-result-head{ display:grid; grid-template-columns:1.6fr .8fr .8fr 1fr 1.6fr; gap:.75rem;
    padding:0 .9rem .5rem; font-family:var(--sqp-mono); font-size:.62rem; font-weight:700; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:.05em; }

/* ── Reference tables ── */
.sqp-tabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:1rem; }
.sqp-tab{ font-family:var(--sqp-mono); font-size:.7rem; font-weight:600; padding:.45rem .9rem; border-radius:20px;
    border:1px solid var(--border); background:#fff; color:var(--text2); cursor:pointer; letter-spacing:.02em; }
.sqp-tab.active{ background:var(--brand); border-color:var(--brand); color:#fff; }
.sqp-search-row{ display:flex; gap:.6rem; margin-bottom:1rem; flex-wrap:wrap; }
.sqp-search-row input{ flex:1; min-width:220px; border:1px solid var(--border); border-radius:7px;
    padding:.55rem .8rem; font-size:.85rem; font-family:'DM Sans',sans-serif; }
.sqp-search-row input:focus{ outline:none; border-color:var(--brand); }

.sqp-cat-block{ background:#fff; border:1px solid var(--border); border-radius:10px; margin-bottom:1.25rem; overflow:hidden; }
.sqp-cat-head{ padding:1rem 1.25rem .75rem; border-bottom:1px solid var(--border); }
.sqp-cat-head h3{ font-size:1.02rem; font-weight:700; color:var(--text); margin-bottom:.3rem; }
.sqp-cat-head p{ font-size:.8rem; color:var(--text-muted); line-height:1.6; }
.sqp-table-wrap{ overflow-x:auto; }
table.sqp-tbl{ width:100%; border-collapse:collapse; font-size:.82rem; }
table.sqp-tbl th{ text-align:left; font-family:var(--sqp-mono); font-size:.62rem; font-weight:700; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:.04em; padding:.6rem 1rem; background:#f5f9f8; border-bottom:1px solid var(--border); white-space:nowrap; }
table.sqp-tbl td{ padding:.65rem 1rem; border-bottom:1px solid rgba(78,179,154,.1); vertical-align:top; color:var(--text); }
table.sqp-tbl tr:last-child td{ border-bottom:none; }
table.sqp-tbl tr.sqp-hidden{ display:none; }
.sqp-qname{ font-weight:600; }
.sqp-qdefault{ font-family:var(--sqp-mono); white-space:nowrap; }
.sqp-qnote{ color:var(--text-muted); font-size:.78rem; line-height:1.6; max-width:420px; }
.sqp-badge-yn{ font-family:var(--sqp-mono); font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:4px; white-space:nowrap; }
.sqp-badge-yn.yes{ background:var(--sqp-green-d); color:var(--sqp-green); }
.sqp-badge-yn.no{ background:var(--sqp-red-d); color:var(--sqp-red); }
.sqp-badge-yn.other{ background:var(--sqp-blue-d); color:var(--sqp-blue); }
.sqp-level{ font-size:.72rem; color:var(--text-muted); white-space:nowrap; }
.sqp-no-results{ padding:1.5rem; text-align:center; color:var(--text-muted); font-size:.85rem; }

/* ── Checklist ── */
.sqp-checklist{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:.9rem; }
.sqp-check-card{ background:#fff; border:1px solid var(--border); border-radius:10px; padding:1rem 1.1rem; }
.sqp-check-card .num{ font-family:var(--sqp-mono); font-size:.68rem; font-weight:700; color:var(--brand-dark);
    background:var(--accent-light); display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px; border-radius:50%; margin-bottom:.6rem; }
.sqp-check-card h4{ font-size:.88rem; font-weight:700; color:var(--text); margin-bottom:.35rem; }
.sqp-check-card p{ font-size:.78rem; color:var(--text-muted); line-height:1.65; }

/* ── Report panel ── */
.sqp-report{ display:none; margin-top:1.25rem; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.sqp-report.show{ display:block; }
.sqp-report-head{ padding:.8rem 1.1rem; background:#f5f9f8; border-bottom:1px solid var(--border);
    display:flex; align-items:center; justify-content:space-between; }
.sqp-report-title{ font-family:var(--sqp-mono); font-size:.66rem; font-weight:700; color:#3a9b83; letter-spacing:.08em; text-transform:uppercase; }
.sqp-report-body{ padding:1rem 1.1rem; font-family:var(--sqp-mono); font-size:.72rem; line-height:1.85;
    white-space:pre-wrap; word-break:break-word; background:#0e2d27; color:#e1f5ee; max-height:340px; overflow-y:auto; }

/* ── SEO / FAQ ── */
.sqp-seo{ background:#fff; border:1px solid var(--border); border-radius:10px; padding:1.75rem 2rem; }
.sqp-seo h2{ font-size:1.05rem; font-weight:700; color:var(--text); margin-bottom:.5rem; }
.sqp-seo > p{ font-size:.875rem; color:var(--text-muted); line-height:1.8; }
.sqp-faq-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:10px; margin-top:1.25rem; }
.sqp-faq-card{ background:#f5f9f8; border:1px solid rgba(78,179,154,.15); border-radius:10px; padding:1rem; }
.sqp-faq-q{ font-size:.875rem; font-weight:600; color:var(--text); margin-bottom:.3rem; }
.sqp-faq-a{ font-size:.82rem; color:var(--text-muted); line-height:1.7; }

.sqp-related{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.85rem; }
.sqp-related a{ display:block; background:#fff; border:1px solid var(--border); border-radius:9px; padding:.9rem 1.05rem;
    text-decoration:none; color:var(--text); font-size:.85rem; font-weight:600; transition:border-color .15s,transform .15s; }
.sqp-related a:hover{ border-color:var(--brand); transform:translateY(-1px); }
.sqp-related a span{ display:block; font-weight:400; color:var(--text-muted); font-size:.75rem; margin-top:.25rem; }

.sqp-toast{ position:fixed; bottom:2rem; right:2rem; background:#0e2d27; border:1px solid rgba(78,179,154,.35);
    border-radius:8px; padding:.7rem 1.2rem; font-family:var(--sqp-mono); font-size:.78rem; color:#e1f5ee;
    z-index:999; transform:translateY(60px); opacity:0; transition:all .3s; pointer-events:none; }
.sqp-toast.show{ transform:translateY(0); opacity:1; }

@media (max-width:820px){
    .sqp-result-row, .sqp-result-head{ grid-template-columns:1fr; }
    .sqp-result-head{ display:none; }
    .sqp-result-row{ grid-template-columns:1fr; gap:.3rem; }
    .sqp-rr-val, .sqp-rr-badge{ text-align:left; }
}
@media (max-width:700px){
    .sqp-hero{ padding:1.75rem 1.25rem 1.5rem; }
    .sqp-main{ padding:1rem; }
    .sqp-seo{ padding:1.25rem; }
    .sqp-panel-body{ padding:1rem; }
}