/* =============================================================
   Utilities Bunker — CD Calculator v2.1 (tool CSS)
   File: ../../assets/css/modules/calculators/financialcalculators/cd-calculator.v2.1.css
   Purpose:
   - Tool-only layout + KPI tiles + inputs + show-work formatting
   - Mobile-first, 44×44 touch targets, respects ub-toolkit variables
   - DO NOT edit ub-toolkit.v2.1.css
   ============================================================= */

/* Tool-scoped tokens */
:root{
  --cd-radius: 14px;
  --cd-gap: 12px;
  --cd-kpi-minw: 120px;
  --cd-accent: rgba(249,58,19,0.95);
  --cd-muted: var(--ub-muted);
}

/* Layout: hero two-column (lab/results | controls) */
.ub-hero{ display:grid; grid-template-columns: 1fr 0.95fr; gap: var(--cd-gap); align-items:start; }
@media (max-width: 980px){
  .ub-hero{ grid-template-columns: 1fr; }
}

/* Lab / results panel */
.ub-lab{
  background: var(--ub-surface-2);
  border: 1px solid var(--ub-border);
  border-radius: var(--cd-radius);
  padding: 12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* KPI tiles */
.ub-kpis{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; align-items:stretch; }
.ub-kpi{
  min-width: var(--cd-kpi-minw);
  padding:10px;
  border-radius:12px;
  border:1px solid var(--ub-border);
  background: var(--ub-card-bg);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:6px;
}
.ub-kpi .k{ font-size: 12px; font-weight:900; color:var(--cd-muted); text-transform:uppercase; }
.ub-kpi .v{ font-family:var(--ub-mono); font-weight:950; font-size:16px; }

/* Risk / assumptions pill */
.ub-risk{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid var(--ub-border);
  background: var(--ub-card-bg);
  min-height:44px;
  font-weight:900;
}
.ub-dot{ width:10px; height:10px; border-radius:50%; background:var(--cd-muted); }

/* Preset buttons row */
.ub-preset-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:6px; }
.ub-preset-row .ub-chip{ min-height:44px; padding:10px 12px; font-weight:900; }

/* Controls (forms) — keep minimal, rely on toolkit for inputs */
form.ub-card{ padding:12px; }

/* Contribution grid hidden by default (controlled by inline style/display) */
#contribGrid{ gap:12px; }

/* Live output styling */
.ub-out{ margin-top:12px; padding:12px; border-radius:12px; border:1px solid var(--ub-border); background:var(--ub-surface-2); }
.ub-out-grid{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px 14px; }
@media (max-width:480px){ .ub-out-grid{ grid-template-columns:1fr; } }

/* Work area */
.ub-work{ font-family:var(--ub-mono); font-size:13px; line-height:1.5; white-space:pre-wrap; overflow-wrap:anywhere; }

/* Hints and inline errors (keep small) */
.hint{ margin-top:6px; font-size:12px; color:var(--ub-muted); }
.ub-inline-error{ margin-top:6px; font-size:12px; color:var(--ub-danger); font-weight:800; min-height:16px; }

/* Buttons & actions: ensure 44x44 hit */
.ub-actions .ub-btn{ min-height:44px; padding:10px 14px; }

/* Compact helpers */
.ub-grid{ gap:12px; }

/* Focus states (complement toolkit) */
input:focus, select:focus, textarea:focus, .ub-chip:focus, .ub-btn:focus {
  box-shadow: 0 0 0 4px rgba(249,58,19,0.12);
  outline: none;
}

/* Small screens polish */
@media (max-width:520px){
  .ub-kpi{ min-width: 98px; }
  .ub-hero { gap: 10px; }
}

/* Dark mode tweaks */
html.ub-theme-dark .ub-lab{ background: var(--ub-surface-2); border-color: var(--ub-card-border); }
html.ub-theme-dark .ub-kpi{ background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.06); }
html.ub-theme-dark .ub-risk{ background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.06); }

/* Accessibility: ensure sufficient contrast for KPI values */
.ub-kpi .v{ color: var(--ub-text); }

/* Responsive: stack rail below on small */
@media (max-width:1024px){
  .ub-rail{ position: fixed; left: 0; top: 0; height: 100vh; width: min(92vw,360px); transform: translateX(-110%); transition: transform 180ms ease; }
  body.ub-rail-open .ub-rail{ transform: translateX(0); }
  .ub-rail-inner{ padding:12px; background: var(--ub-bg); height:100vh; overflow:auto; }
}

/* Minor utility used by this tool only */
.cd-small-note{ font-size:12px; color:var(--cd-muted); margin-top:8px; }

/* End of tool CSS */