/* debt-snowball-avalanche.css
   Knowledge page styles (Debt Snowball / Avalanche + SVG viz)
   Scoped so main.css header/footer remain consistent.
*/

.tool-page {
  /* these are only used inside this page */
  --shadow2: 0 10px 22px rgba(0,0,0,.06);
  --blue-300: #c3d9ff;
  --blue-100: #eaf2ff;
  --blue-200: #d7e6ff;
  --blue-700: #3f6fe6;
  --green: #10b981;
  --purple: #a855f7;
}

/* Headings spacing helpers (replaces inline styles) */
.tool-page .tool-h2 { margin: 0 0 10px; }
.tool-page .tool-h2-zero { margin: 0 0 10px; }
.tool-page .tool-h2-tight { margin-top: 12px; }
.tool-page .tool-h2-loose { margin-top: 18px; }

/* Action rows (replaces inline margin/display flex) */
.tool-page .tool-actions {
  margin-top: 14px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.tool-page .tool-actions-bottom { margin-top: 16px; }

/* Layout */
.tool-page .vizLayout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  align-items: start;
}

/* Page cards (scoped so it won't affect other .card on site) */
.tool-page .tool-card {
  border: 1px solid var(--blue-300);
  border-radius: 18px;
  padding: 20px;
  background: linear-gradient(180deg, var(--blue-100), var(--blue-200));
  box-shadow: var(--shadow2);
}

/* Viz container tweaks */
.tool-page .vizWrap { position: relative; overflow: hidden; }
.tool-page .vizCard { padding: 18px; }
.tool-page .vizTop .stage { height: 460px; }

/* SVG stage */
.tool-page .stage {
  width: 100%;
  height: 420px;
  display: block;
}

/* Hint row under viz */
.tool-page .hint {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  color: rgba(0,0,0,.55);
  font-size: 13px;
}
.tool-page .stat { display: flex; align-items: center; gap: 8px; }
.tool-page .dot { width: 10px; height: 10px; border-radius: 999px; background: var(--blue-700); }
.tool-page .dot2 { background: var(--green); }

/* Inputs area */
.tool-page label { display: block; font-weight: 800; margin: 0 0 6px; }

.tool-page input[type="number"],
.tool-page input[type="text"]{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.14);
  background: rgba(255,255,255,.75);
  font-weight: 700;
}

.tool-page .row {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 10px;
}

.tool-page .row-single { grid-template-columns: 1fr; }

.tool-page .small {
  font-size: 12px;
  color: rgba(0,0,0,.55);
  margin-top: 6px;
}

/* Debt list UI */
.tool-page .debtList {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}

.tool-page .debtItem {
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.70);
}

.tool-page .debtItemHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.tool-page .pill {
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(63,111,230,.12);
  border: 1px solid rgba(63,111,230,.18);
}

.tool-page .danger {
  background: rgba(168,85,247,.10);
  border-color: rgba(168,85,247,.18);
}

/* Toolbar row */
.tool-page .toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.tool-page .menuBtn { cursor: pointer; }

/* Tooltip */
.tool-page .toast{
  position: absolute;
  top: 14px;
  right: 14px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow: var(--shadow2);
  display: none;
  max-width: 320px;
}
.tool-page .toast strong { display: block; }
.tool-page .toast p {
  margin: 4px 0 0;
  font-size: 13px;
}