/* --- INLINE CALCULATORS (progressive enhancement) --- */
.calc {
  background: var(--black2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin: 1.5rem 0 2rem;
}
.calc-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.25rem; }
.calc-note { font-size: 0.78rem; color: var(--muted); margin-bottom: 1rem; }
.calc-privacy { font-size: 0.75rem; color: var(--muted); margin-top: 1rem; display: flex; align-items: center; gap: 6px; }
.calc-privacy::before { content: '\1F512'; font-size: 0.8rem; }

.calc table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.calc th { text-align: left; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); }
.calc td { padding: 6px 10px; border-bottom: 1px solid var(--border); color: #b5b5b5; vertical-align: middle; }
.calc tr:last-child td { border-bottom: none; }
.calc .table-scroll { overflow-x: auto; }
.calc .table-scroll table { min-width: 680px; }

.calc input[type="number"], .calc input[type="text"], .calc select {
  background: var(--card); border: 1px solid var(--border); border-radius: 6px;
  color: var(--white); font-family: inherit; font-size: 0.85rem;
  padding: 6px 8px; width: 100%; max-width: 110px;
}
.calc input[type="number"]:focus, .calc select:focus { outline: none; border-color: rgba(255,255,255,0.35); }
.calc input[readonly] { opacity: 0.6; }
.calc input[type="checkbox"] { accent-color: var(--accent); width: auto; }
.calc label { font-size: 0.8rem; color: #b5b5b5; }
.calc .field-label { display: block; font-size: 0.72rem; color: var(--muted); margin-bottom: 3px; }
.calc .estimate-suffix { color: var(--muted2); font-style: italic; font-size: 0.68rem; }

.calc-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.calc-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.calc-btn {
  background: var(--card); border: 1px solid var(--border); border-radius: 100px;
  color: var(--white); font-family: inherit; font-size: 0.78rem; font-weight: 600;
  padding: 7px 16px; cursor: pointer; transition: border-color 0.2s;
}
.calc-btn:hover { border-color: rgba(255,255,255,0.4); }
.calc-btn.primary { background: var(--white2); color: var(--black); border-color: var(--white2); }
.calc-btn.primary:hover { opacity: 0.85; }

.calc-warning {
  font-size: 0.8rem; color: #e0c080;
  background: rgba(200,169,110,0.08); border: 1px solid rgba(200,169,110,0.3);
  border-radius: var(--radius-sm); padding: 8px 12px; margin: 0.75rem 0;
}
.calc-flash {
  font-size: 0.85rem; font-weight: 600; color: var(--accent);
  border: 1px solid rgba(200,169,110,0.45); background: rgba(200,169,110,0.1);
  border-radius: var(--radius-sm); padding: 10px 14px; margin: 0.75rem 0;
}

.calc-results { margin-top: 1rem; }
.calc-result-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; }
.calc-result-name { flex: 0 0 190px; font-size: 0.82rem; color: var(--white); }
.calc-result-value { flex: 0 0 110px; font-size: 0.95rem; font-weight: 700; text-align: right; }
.calc-bar-track { flex: 1; height: 10px; background: var(--card); border-radius: 100px; overflow: hidden; }
.calc-bar { height: 100%; background: var(--accent); border-radius: 100px; width: 0; transition: width 0.3s; }
.calc-bar.dim { background: var(--muted2); }
.calc-rank { flex: 0 0 46px; font-size: 0.72rem; color: var(--muted); text-align: right; }
.calc-eliminated { opacity: 0.4; }
.calc-eliminated .calc-result-value { font-size: 0.78rem; font-weight: 600; color: #d09090; }
.calc-interpretation { font-size: 0.8rem; color: var(--muted); margin-top: 0.75rem; line-height: 1.6; }

.calc details { margin-top: 1rem; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.calc details summary { cursor: pointer; padding: 10px 14px; font-size: 0.82rem; font-weight: 600; color: #b5b5b5; }
.calc details[open] summary { border-bottom: 1px solid var(--border); }
.calc .formula-body { padding: 12px 14px; font-size: 0.8rem; color: var(--muted); line-height: 1.7; }
.calc .formula-body code { font-family: ui-monospace, Consolas, monospace; font-size: 0.78rem; color: var(--accent); background: var(--card); padding: 1px 5px; border-radius: 4px; }
.calc .formula-body table { font-size: 0.75rem; margin-top: 0.5rem; }

.calc .model-toggle { display: inline-flex; align-items: center; gap: 6px; margin-right: 1rem; }
.calc .ko-grid td { text-align: center; }
.calc .ko-grid label { display: inline-flex; align-items: center; gap: 4px; font-size: 0.72rem; }

.calc .year-tabs { display: flex; gap: 0.4rem; margin: 0.75rem 0; }
.calc .year-tab {
  background: var(--card); border: 1px solid var(--border); border-radius: 100px;
  color: var(--muted); font-size: 0.75rem; font-weight: 600; padding: 5px 14px; cursor: pointer;
}
.calc .year-tab.active { background: var(--white2); color: var(--black); border-color: var(--white2); }

.calc .stack-profile { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-top: 0.75rem; }
.calc .stack-col { flex: 1; min-width: 140px; }
.calc .stack-col h5 { font-size: 0.72rem; color: var(--muted); font-weight: 600; margin-bottom: 0.4rem; }
.calc .year-bar-row { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.calc .year-bar-label { flex: 0 0 26px; font-size: 0.68rem; color: var(--muted); }
.calc .year-bar-track { flex: 1; height: 8px; background: var(--card); border-radius: 100px; overflow: hidden; }
.calc .year-bar { height: 100%; background: var(--accent); }
.calc .year-bar-val { flex: 0 0 80px; font-size: 0.68rem; color: #b5b5b5; text-align: right; }

.calc-delta { font-size: 0.75rem; color: var(--muted); }
.calc-delta.positive { color: #d09090; }
.calc-cheapest { color: #9ec89e; font-size: 0.72rem; font-weight: 600; }

@media (max-width: 600px) {
  .calc { padding: 1rem; border-radius: var(--radius-sm); }
  .calc-result-name { flex-basis: 120px; font-size: 0.75rem; }
  .calc-result-value { flex-basis: 84px; font-size: 0.85rem; }
  .calc input[type="number"], .calc input[type="text"], .calc select { max-width: 90px; font-size: 16px; }
}