/* Affordability Calculator by CodeVision — UI (Bond-style calm dashboard) */

.acv-wrap{max-width:1200px;margin:0 auto}

/* Layout */
.acv-grid{display:grid;gap:14px}
.acv-top{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width: 980px){ .acv-top{grid-template-columns:1fr} }

/* Cards */
.acv-card{background:#fff;border-radius:10px;box-shadow:0 1px 2px rgba(0,0,0,.06);overflow:hidden}
.acv-card-head{padding:14px 14px 10px 14px;background:#fff}
.acv-card-body{padding:14px;background:#fff}

.acv-title{font-weight:900;font-size:16px;color:#111827}
.acv-desc{font-weight:600;font-size:12px;color:#6b7280;margin-top:6px;line-height:1.35}

/* Inputs (Bond-like) */
.acv-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width: 980px){ .acv-form-grid{grid-template-columns:1fr} }

.acv-field{background:#f9f9f9;border-radius:10px;padding:10px 12px}
.acv-label{display:block;font-size:12px;font-weight:900;color:#111827;margin-bottom:6px}
.acv-input{
  width:100%;
  border:0;
  border-radius:10px;
  padding:10px 12px;
  background:#fff;
  outline:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.10);
  font-weight:800;
  color:#111827;
}
.acv-input:focus{box-shadow:inset 0 0 0 2px rgba(8,106,216,.28)}
/* Remove number spinners if browser decides to add them */
.acv-input::-webkit-outer-spin-button,
.acv-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.acv-input[type=number]{-moz-appearance:textfield}

.acv-help{font-size:11px;font-weight:600;color:#6b7280;margin-top:6px;line-height:1.3}

/* Buttons (Bond palette) */
.acv-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.acv-btn{border:0;border-radius:10px;padding:10px 14px;font-weight:900;cursor:pointer}
.acv-btn-primary{background:#086ad8;color:#fff}
/* Secondary kept calmer than full orange by default */
.acv-btn-secondary{background:#e97023;color:#fff}
.acv-btn:active{transform:translateY(1px)}

.acv-muted{margin-top:10px;font-size:12px;font-weight:700;color:#6b7280}

/* Separators + metrics */
.acv-divider{height:1px;background:rgba(0,0,0,.06);margin:14px 0}

.acv-metric{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  background:#f9f9f9;
  border-radius:10px;
  padding:10px 12px;
  margin-top:10px
}
.acv-k{font-size:12px;font-weight:900;color:#111827}
.acv-v{font-size:18px;font-weight:900;color:#111827}
.acv-v-sm{font-size:16px}

/* Mini grid */
.acv-mini-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width: 980px){ .acv-mini-grid{grid-template-columns:1fr} }
.acv-mini{background:#f9f9f9;border-radius:10px;padding:10px 12px}

/* Verdict */
.acv-verdict{border-radius:10px;padding:12px 12px;background:#f9f9f9}
.acv-verdict-badge{
  display:inline-block;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  background:#086ad8;
  color:#fff
}
.acv-verdict-text{margin-top:10px;font-size:13px;font-weight:800;color:#111827;line-height:1.3}
.acv-verdict-neutral .acv-verdict-badge{background:#086ad8}

/* Auth */
.acv-auth{background:#f9f9f9;border-radius:10px;padding:14px;font-weight:900;color:#111827}

.acv-breakdown{margin-top:6px;font-size:11px;font-weight:700;color:#6b7280;line-height:1.35}

/* --- Mode toggle (v1.0.4) --- */
.acv-mode{background:#f9f9f9;border-radius:10px;padding:10px 12px;margin-bottom:12px}
.acv-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px}
.acv-toggle-label{font-size:12px;font-weight:900;color:#111827}
.acv-select{border:0;border-radius:10px;padding:10px 12px;background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.10);font-weight:800;color:#111827;min-width:160px}
.acv-select:focus{outline:none;box-shadow:inset 0 0 0 2px rgba(8,106,216,.28)}

.acv-mode-details{margin-top:8px;background:#fff;border-radius:10px;padding:10px 12px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.acv-mode-details .acv-md-title{font-size:12px;font-weight:900;color:#111827;margin-bottom:6px}
.acv-mode-details ul{margin:0;padding-left:16px}
.acv-mode-details li{font-size:11px;font-weight:700;color:#6b7280;line-height:1.35;margin:4px 0}
.acv-mode-details .acv-md-note{margin-top:8px;font-size:11px;font-weight:800;color:#6b7280}
.acv-metric .acv-breakdown{margin-top:6px}

/* ACV_BREAKDOWN_107 - keep calculation explanations underneath (not squashing the row) */
.acv-metric{flex-wrap:wrap}
.acv-metric .acv-k{flex:1 1 auto}
.acv-metric .acv-v{margin-left:auto}
.acv-metric .acv-breakdown{flex:0 0 100%;text-align:right}

/* ACV_BREAKDOWN_108 - align calculation explanations left */
.acv-metric .acv-breakdown{ text-align:left; }

/* ACV_METRIC_HELP_109 - keep metric help compact */
.acv-metric .acv-help{margin-top:6px}