/* ============================================================
   Tool Styles — Compound Interest Calculator v2.1
   File: /assets/css/modules/calculators/financialcalculators/compound-interest.v2.1.css
   Purpose:
   - Tool-only layout, KPI tiles, table wrapper, work formatting
   - Mobile-first, 44x44 touch targets, clamp() typography
   - No changes to ub-toolkit.v2.1.css
   ============================================================ */

/* Tool-scoped tokens */
:root{
  --ci-radius: 16px;
  --ci-gap: 14px;
  --ci-soft: rgba(0,0,0,.06);
}

/* Header row */
.ci-head{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}
.ci-title{ margin:0; font-size:var(--ub-fs-5); }
.ci-sub{ margin:6px 0 0; }

/* How-to ordered list */
.ci-ol{
  margin:0;
  padding-left:18px;
}

/* Hero layout (Inputs + Summary) */
.ci-hero{
  display:grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--ci-gap);
  align-items:start;
}
@media (max-width: 980px){
  .ci-hero{ grid-template-columns: 1fr; }
}

/* Inputs form card styling (just spacing helpers) */
.ci-form{
  background: var(--ub-card-bg);
  border: 1px solid var(--ub-card-border);
  border-radius: var(--ub-radius-2);
  box-shadow: var(--ub-shadow);
  padding: 14px;
  margin-bottom: 0; /* inside card already */
}

/* Money input row */
.ci-moneyrow{
  position: relative;
  display:flex;
  align-items:center;
}
.ci-prefix{
  position:absolute;
  left:12px;
  font-family: var(--ub-mono);
  font-weight: 950;
  color: var(--ub-muted);
  pointer-events:none;
}
.ci-moneyrow input{
  padding-left: 28px; /* room for $ */
}

/* Section separators */
.ci-hr{
  border:none;
  border-top:1px solid var(--ub-border);
  margin:14px 0;
}

/* Options row */
.ci-options{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

/* Actions */
.ci-actions{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

/* Summary KPI panel */
.ci-kpi{
  background: var(--ub-surface-2);
  border: 1px solid var(--ub-border);
  border-radius: var(--ci-radius);
  padding: 12px;
}

.ci-kpi-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom: 8px;
}

.ci-kpi-title{
  font-size: clamp(13px, 1.2vw, 14px);
  font-weight: 950;
  letter-spacing: .01em;
}
.ci-kpi-sub{
  font-size: 12px;
  color: var(--ub-muted);
  margin-top: 2px;
}

/* KPI tiles */
.ci-kpi-grid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 520px){
  .ci-kpi-grid{ grid-template-columns: 1fr; }
}

.ci-tile{
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--ub-border);
  background: var(--ub-card-bg);
  min-height: 70px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.ci-tile .k{
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ub-muted);
}
.ci-tile .v{
  font-family: var(--ub-mono);
  font-weight: 950;
  font-size: 14px;
  margin-top: 2px;
  overflow-wrap:anywhere;
}

/* small note area */
.ci-mini{
  margin-top: 10px;
}

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

/* Table card helpers */
.ci-tablehead{
  display:flex;
  flex-direction:column;
  gap:6px;
}

/* Horizontal scroll for the table */
.ci-tablewrap{
  width:100%;
  overflow:auto;
  border-radius: var(--ub-radius-2);
}

/* Improve focus for keyboard scrolling region */
.ci-tablewrap:focus{
  outline: 3px solid var(--ub-focus);
  outline-offset: 3px;
  border-radius: var(--ub-radius-2);
}

/* Tighter table on small screens */
@media (max-width: 520px){
  .ub-table th,
  .ub-table td{
    padding: 9px 10px;
    font-size: 12px;
  }
}

/* Reference blocks */
.ci-ref{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px){
  .ci-ref{ grid-template-columns: 1fr; }
}

.ci-ref-block{
  border: 1px solid var(--ub-border);
  background: var(--ub-surface-2);
  border-radius: var(--ub-radius-2);
  padding: 12px;
}

.ci-ref-title{
  font-weight: 950;
  font-size: 13px;
  margin-bottom: 8px;
  color: var(--ub-text);
}

.ci-ref-mono{
  font-family: var(--ub-mono);
  font-weight: 950;
  font-size: 13px;
  line-height: 1.45;
  overflow-wrap:anywhere;
}

.ci-ref-list{
  margin:0;
  padding-left:18px;
  color: var(--ub-text);
}
.ci-ref-list li{
  margin: 6px 0;
}

/* Make sure touch targets feel good even when wrapped */
.ub-chip{
  min-height: var(--ub-hit);
}

/* Optional: slightly stronger borders in dark for card grouping */
html.ub-theme-dark .ci-kpi,
html.ub-theme-dark .ci-ref-block{
  border-color: rgba(255,255,255,.14);
}