/* ============================================================
   Utilities Bunker — Student Loan Calculator v2.1
   File: /assets/css/modules/calculators/financialcalculators/student-loan-calculator.v2.1.css
   Purpose:
   - Tool-only layout + result panels + amortization table polish
   - No changes to ub-toolkit.v2.1.css
   - Mobile-first, UB-CERT aligned, accessible, light/dark ready
   ============================================================ */

:root{
  --slc-radius: 16px;
  --slc-gap: 14px;
  --slc-soft: rgba(0,0,0,.06);
  --slc-soft-strong: rgba(0,0,0,.10);
}

.ub-hero{
  display:grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: var(--slc-gap);
}

@media (max-width: 980px){
  .ub-hero{
    grid-template-columns: 1fr;
  }
}

.ub-summary-list{
  margin:0;
  padding-left:18px;
}

.ub-summary-list li{
  margin:0 0 8px;
  line-height:1.45;
}

.ub-summary-list li:last-child{
  margin-bottom:0;
}

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

.ub-table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius: var(--ub-radius-2);
}

.ub-table{
  min-width: 720px;
}

.ub-table td,
.ub-table th{
  vertical-align: top;
}

.ub-table tbody tr:nth-child(even){
  background: rgba(0,0,0,.02);
}

html.ub-theme-dark .ub-table tbody tr:nth-child(even){
  background: rgba(255,255,255,.03);
}

.ub-out-grid > div{
  min-width:0;
}

.ub-out-grid .ub-v{
  overflow-wrap:anywhere;
  word-break:break-word;
}

.ub-card code{
  font-family: var(--ub-mono);
  font-size: .95em;
  padding: 2px 6px;
  border-radius: 8px;
  background: var(--ub-surface-2);
  border: 1px solid var(--ub-border);
}

.ub-inputrow{
  display:block !important;
}

.ub-inputrow > input,
.ub-inputrow > select{
  display:block !important;
  width:100% !important;
}

.ub-inputrow > select{
  margin-top:6px;
}

.ub-btn--block{
  width:100%;
}

.ub-collapsible summary{
  cursor:pointer;
  font-weight:950;
  min-height:44px;
  display:flex;
  align-items:center;
}

.ub-collapsible summary:focus{
  outline:none;
  box-shadow:0 0 0 4px var(--ub-focus);
  border-radius:12px;
}

.ub-rail-actions .ub-btn{
  width:100%;
}

.ub-related-list a,
.ub-common-list li{
  overflow-wrap:anywhere;
  word-break:break-word;
}

.ub-card[aria-label="Payment breakdown"] .ub-out-grid,
.ub-card[aria-label="Amortization preview"] .ub-out-grid{
  gap: 10px 14px;
}

.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;
}

@media (max-width: 768px){
  .ub-table{
    min-width: 640px;
  }
}

@media (max-width: 640px){
  .ub-card{
    padding:12px;
  }

  .ub-summary-list{
    padding-left:16px;
  }

  .ub-table{
    min-width: 600px;
  }
}

@media (max-width: 520px){
  .ub-out-grid{
    grid-template-columns:1fr;
  }

  .ub-card-title{
    overflow-wrap:anywhere;
  }
}

@media (prefers-reduced-motion: reduce){
  .ub-related-list a,
  .ub-common-list li,
  .ub-btn,
  .ub-chip{
    transition:none !important;
  }
}