/* === Savings Guardrail Coach – layout & theming === */

.sg-card {
  margin-top: 24px;
}

/* Grid for inputs */
.sg-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 8px;
}

.sg-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sg-field span {
  font-size: 0.85rem;
  color: #aab4c5;
}

.sg-field input {
  background: #0b1220;
  color: #e5e7eb;
  border: 1px solid #334155;
  border-radius: 10px;
  padding: 10px 12px;
}

/* Buttons row */
.sg-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

/* Output area */
.sg-out {
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px dashed #334155;
}

.sg-summary {
  font-weight: 600;
  margin-bottom: 6px;
}

.sg-advice {
  font-size: 0.9rem;
  color: #cbd5e1;
  margin-bottom: 10px;
}

/* Meter bands */
.sg-meter {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px;
  font-size: 0.78rem;
  text-align: center;
  margin-bottom: 8px;
}

.sg-band {
  padding: 4px 2px;
  border-radius: 6px;
  background: #020617;
  border: 1px solid #1f2937;
  color: #9ca3af;
}

.sg-band-safe       { background: rgba(34,197,94,0.12);  border-color: rgba(34,197,94,0.4); }
.sg-band-normal     { background: rgba(59,130,246,0.12); border-color: rgba(59,130,246,0.4); }
.sg-band-ambitious  { background: rgba(234,179,8,0.12);  border-color: rgba(234,179,8,0.4); }
.sg-band-aggressive { background: rgba(248,113,113,0.12);border-color: rgba(248,113,113,0.4); }
.sg-band-impossible { background: rgba(127,29,29,0.35);  border-color: rgba(239,68,68,0.8); }

/* Highlight currently applicable band */
.sg-band.active {
  box-shadow: 0 0 0 1px #e5e7eb;
  color: #e5e7eb;
  font-weight: 600;
}

/* Footnote */
.sg-footnote {
  font-size: 0.78rem;
  color: #9ca3af;
  margin-top: 4px;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .sg-grid {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}