/* Save as cv-calculator.css
   Scoped to #cv-calc-app and prefixed with cv- to avoid collisions.
   Keep styles minimal and non-invasive so your site's stylesheet remains primary.
*/

#cv-calc-app { font-family: inherit; color: inherit; }

#cv-calc-app .cv-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 18px;
    box-sizing: border-box;
}

#cv-calc-app .cv-subtitle {
    margin: 0 0 14px;
    font-size: 0.98rem;
    opacity: 0.95;
}

#cv-calc-app .cv-grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 18px;
    align-items: start;
}

/* Card */
#cv-calc-app .cv-card {
    background: transparent;
    border-radius: 10px;
    padding: 14px;
    box-sizing: border-box;
    /* Let host site control borders/backgrounds; add subtle internal spacing */
}

/* Rows / columns */
#cv-calc-app .cv-row { margin-bottom: 12px; display: block; }
#cv-calc-app .cv-split { display:flex; gap:12px; margin-bottom:12px; }
#cv-calc-app .cv-col { flex:1; min-width:0; }

/* Labels / hints */
#cv-calc-app .cv-label {
    display:block;
    font-weight:600;
    margin-bottom:6px;
    font-size:0.95rem;
}
#cv-calc-app .cv-hint { font-size:0.82rem; color: rgba(0,0,0,0.6); margin-top:6px; }
#cv-calc-app .cv-hint-inline { font-weight:400; font-size:0.85rem; margin-left:8px; color: rgba(0,0,0,0.6); }

/* Controls (inputs/select) - conservative styling so as to not override global theme */
#cv-calc-app .cv-control {
    width:100%;
    padding:8px 10px;
    box-sizing:border-box;
    border-radius:6px;
    border:1px solid rgba(0,0,0,0.12);
    background:transparent;
    font-size:0.95rem;
}

/* Slider */
#cv-calc-app .cv-slider-wrap { display:flex; align-items:center; gap:12px; }
#cv-calc-app .cv-slider { flex:1; }
#cv-calc-app .cv-slider-values { min-width:70px; text-align:right; font-weight:600; }

/* Actions */
#cv-calc-app .cv-actions { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
#cv-calc-app .cv-btn { padding:8px 12px; border-radius:8px; cursor:pointer; border:1px solid rgba(0,0,0,0.08); background:transparent; }
#cv-calc-app .cv-primary { background-color: rgba(0,0,0,0.06); font-weight:700; }

/* Results area */
#cv-calc-app .cv-result { display:flex; flex-direction:column; gap:10px; }
#cv-calc-app .cv-pill {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:10px;
    border-radius:8px;
    background: rgba(0,0,0,0.02);
    box-sizing:border-box;
}
#cv-calc-app .cv-label { margin:0; font-size:0.95rem; }
#cv-calc-app .cv-sub { font-size:0.82rem; opacity:0.8; margin-top:2px; }
#cv-calc-app .cv-value { font-weight:700; font-size:1.05rem; min-width:110px; text-align:right; }

/* HR / notes */
#cv-calc-app .cv-hr { height:1px; background: rgba(0,0,0,0.06); margin:6px 0; border-radius:1px; }
#cv-calc-app .cv-footnote { font-size:0.78rem; color: rgba(0,0,0,0.6); margin-top:12px; }
#cv-calc-app .cv-disclaimer { font-size:0.78rem; color: rgba(0,0,0,0.6); margin-top:8px; }

/* Responsive */
@media (max-width: 980px) {
    #cv-calc-app .cv-grid { grid-template-columns: 1fr; }
}

/* Focus styles (keeps accessible outlines but not intrusive) */
#cv-calc-app .cv-control:focus,
#cv-calc-app .cv-slider:focus,
#cv-calc-app .cv-btn:focus { outline: 3px solid rgba(0,120,212,0.12); outline-offset:2px; }

/* Keep everything low-specificity so host CSS still wins for global elements */