/* ============================================================
   Utilities Bunker — Social Security Calculator (v2.1)
   File: /assets/css/modules/calculators/financialcalculators/social-security-calculator.v2.1.css
   Purpose:
   - Tool-only layout and styling for Social Security Calculator
   - Keeps shared UB toolkit untouched
   - Mobile-first, accessible, responsive, UB-CERT aligned
   ============================================================ */

:root{
  --ssc-radius: 16px;
  --ssc-gap: 14px;
  --ssc-soft: rgba(0,0,0,.06);
  --ssc-soft-2: rgba(0,0,0,.04);
  --ssc-accent: rgba(249,58,19,.14);
  --ssc-accent-strong: rgba(249,58,19,.22);
  --ssc-good: rgba(34,197,94,.16);
  --ssc-warn: rgba(245,158,11,.16);
  --ssc-panel-grad: linear-gradient(180deg, var(--ub-card-bg), var(--ub-surface-2));
}

html.ub-theme-dark:root{
  --ssc-soft: rgba(255,255,255,.08);
  --ssc-soft-2: rgba(255,255,255,.05);
  --ssc-accent: rgba(249,58,19,.18);
  --ssc-accent-strong: rgba(249,58,19,.26);
  --ssc-good: rgba(34,197,94,.18);
  --ssc-warn: rgba(245,158,11,.18);
  --ssc-panel-grad: linear-gradient(180deg, var(--ub-card-bg), var(--ub-surface-2));
}

/* Header */
.ssc-headbar{
  display:flex;
  gap:10px;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
}

.ssc-title{
  margin:0;
  font-size:var(--ub-fs-5);
}

.ssc-subtitle{
  margin:6px 0 0;
  max-width:72ch;
}

/* Simple step list */
.ssc-steps{
  margin:0;
  padding-left:18px;
}

.ssc-steps li + li{
  margin-top:6px;
}

/* Hero layout */
.ssc-hero{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:var(--ssc-gap);
  align-items:start;
}

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

/* Panels */
.ssc-panel{
  background:var(--ssc-panel-grad);
  border:1px solid var(--ub-border);
  border-radius:var(--ssc-radius);
  padding:12px;
}

.ssc-panel--summary{
  min-width:0;
}

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

.ssc-eyebrow{
  font-size:12px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ub-muted);
}

.ssc-summary-title{
  margin-top:4px;
  font-size:clamp(18px, 1.15rem + .4vw, 24px);
  font-weight:950;
  letter-spacing:-.01em;
}

.ssc-summary-sub{
  margin-top:4px;
  font-size:12px;
  color:var(--ub-muted);
}

/* KPI tiles */
.ssc-kpis{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}

.ssc-kpi{
  min-width:118px;
  padding:8px 10px;
  border-radius:14px;
  border:1px solid var(--ub-border);
  background:var(--ub-card-bg);
}

.ssc-kpi .k{
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--ub-muted);
}

.ssc-kpi .v{
  margin-top:2px;
  font-family:var(--ub-mono);
  font-size:14px;
  font-weight:950;
}

/* Status band */
.ssc-band{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--ub-border);
  background:var(--ub-card-bg);
}

.ssc-band-item{
  min-width:0;
}

.ssc-band-label{
  display:block;
  margin-bottom:4px;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
  color:var(--ub-muted);
}

.ssc-band strong{
  display:block;
  min-width:0;
  overflow-wrap:anywhere;
  word-break:break-word;
  font-size:14px;
}

@media (max-width: 720px){
  .ssc-band{
    grid-template-columns:1fr;
  }
}

/* Quick age chips */
.ssc-age-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}

.ssc-age-chip{
  min-height:44px;
  width:100%;
}

@media (max-width: 520px){
  .ssc-age-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

/* Comparison bars */
.ssc-mini-chart{
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid var(--ub-border);
  background:var(--ub-card-bg);
}

.ssc-chart-row{
  display:grid;
  grid-template-columns:64px minmax(0,1fr) 110px;
  gap:10px;
  align-items:center;
}

.ssc-chart-row + .ssc-chart-row{
  margin-top:10px;
}

.ssc-chart-label{
  font-size:12px;
  font-weight:900;
  color:var(--ub-muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}

.ssc-bar-wrap{
  position:relative;
  min-width:0;
  height:14px;
  border-radius:999px;
  overflow:hidden;
  background:var(--ub-surface-3);
  border:1px solid var(--ub-border);
}

.ssc-bar{
  height:100%;
  width:0%;
  border-radius:999px;
  background:linear-gradient(92deg,var(--ub-btn-grad-a),var(--ub-btn-grad-b));
  box-shadow:0 0 0 1px rgba(255,255,255,.12) inset;
  transition:width 180ms ease;
}

.ssc-chart-value{
  text-align:right;
  font-family:var(--ub-mono);
  font-size:12px;
  font-weight:950;
}

@media (prefers-reduced-motion: reduce){
  .ssc-bar{
    transition:none;
  }
}

@media (max-width: 560px){
  .ssc-chart-row{
    grid-template-columns:56px minmax(0,1fr) 88px;
    gap:8px;
  }

  .ssc-chart-value{
    font-size:11px;
  }
}

/* Presets */
.ssc-preset-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

.ssc-preset-row .ub-chip{
  min-height:44px;
}

/* Form panel helpers */
.ssc-form{
  margin-bottom:0;
}

.ssc-mode-switch{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}

.ssc-mode-chip{
  min-height:44px;
  width:100%;
}

@media (max-width: 520px){
  .ssc-mode-switch{
    grid-template-columns:1fr;
  }
}

.ssc-sep{
  border:none;
  border-top:1px solid var(--ub-border);
  margin:14px 0;
}

/* Slider row */
.ssc-slider-row{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.ssc-slider-label{
  min-width:180px;
  font-weight:950;
}

.ssc-slider-out{
  font-family:var(--ub-mono);
  font-weight:950;
}

@media (max-width: 640px){
  .ssc-slider-label{
    min-width:100%;
  }

  .ssc-slider-out{
    width:100%;
  }
}

/* Checks / actions */
.ssc-checks{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.ssc-checks .ub-chip{
  display:flex;
  align-items:center;
  gap:8px;
}

.ssc-actions{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* Output / result table */
.ssc-results-card{
  overflow:hidden;
}

.ssc-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

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

.ssc-work-note{
  margin-top:10px;
  color:var(--ub-muted);
  font-size:12px;
}

/* Detail / bullet styles */
.ssc-bullets{
  margin:0;
  padding-left:18px;
}

.ssc-bullets li + li{
  margin-top:6px;
}

.ssc-fineprint{
  margin:12px 0 0;
  font-size:12px;
  color:var(--ub-muted);
}

.ssc-faq-q{
  margin:12px 0 6px;
  font-size:16px;
}

.ssc-faq-a{
  margin:0 0 10px;
}

/* Accessible emphasis for mode and age chips */
.ssc-mode-chip[aria-pressed="true"],
.ssc-age-chip[aria-pressed="true"]{
  border-color:rgba(249,58,19,.55);
  box-shadow:0 0 0 4px rgba(249,58,19,.12);
}

/* Better wrapping for KPI values on narrow layouts */
@media (max-width: 640px){
  .ssc-kpis{
    width:100%;
    justify-content:flex-start;
  }

  .ssc-kpi{
    min-width:calc(50% - 4px);
    flex:1 1 calc(50% - 4px);
  }
}

@media (max-width: 420px){
  .ssc-kpi{
    min-width:100%;
    flex:1 1 100%;
  }
}

/* Tool-specific polish for inputs in this tool */
.ssc-form .ub-inputrow{
  display:block !important;
}

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

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

/* Focus polish */
.ssc-mode-chip:focus,
.ssc-age-chip:focus,
.ssc-preset-row .ub-chip:focus{
  outline:none;
  box-shadow:0 0 0 4px var(--ub-focus);
}

/* Rail spacing helper */
.ub-rail-actions .ub-btn:last-child{
  margin-bottom:0;
}

/* Minor spacing polish inside rail common and related sections */
.ub-common-list li,
.ub-related-list a{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Hidden groups keep spacing clean */
#groupAime[hidden],
#groupFraBenefit[hidden]{
  display:none !important;
}