/* calculator.css — styles specific to the quarterly tax estimator */

.calc-intro { padding: 1.5rem 0 0.5rem; text-align: center; }
.calc-intro h1 { margin-bottom: 0.25rem; }
.calc-lead { font-size: 1.05rem; color: var(--text-muted); max-width: 60ch; margin-left: auto; margin-right: auto; }
.calc-intro .trust-row { justify-content: center; }

/* Layout: form + results */
.calc-layout { display: grid; gap: 1.25rem; }
@media (min-width: 880px) {
  .calc-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
}

/* Form */
.calc-form fieldset { border: none; margin: 0; padding: 0; }
.calc-form legend {
  font-weight: 700; font-size: 1.05rem; padding: 0; margin-bottom: 0.75rem;
}
.field { margin-bottom: 1rem; }
.field.small { margin-bottom: 0.65rem; }
.field label { display: block; font-weight: 600; font-size: 0.92rem; margin-bottom: 0.35rem; }
.field .hint { font-weight: 400; color: var(--text-faint); font-size: 0.82rem; }

.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .affix {
  position: absolute; color: var(--text-faint); font-size: 0.95rem; pointer-events: none;
}
.input-wrap .affix:first-child { left: 0.8rem; }
.input-wrap .affix:last-child:not(:first-child) { right: 0.8rem; }

.calc-form input[type='number'],
.calc-form input[type='text'],
.calc-form select {
  width: 100%; font-size: 1rem; font-family: inherit;
  padding: 0.65rem 0.8rem; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text); appearance: none;
}
.input-wrap:has(.affix:first-child) input { padding-left: 1.6rem; }
.input-wrap:has(.affix:last-child:not(:first-child)) input { padding-right: 1.8rem; }
.calc-form input:focus, .calc-form select:focus { border-color: var(--accent); }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; } }

/* Segmented toggle (payment method) */
.seg-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.seg-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.seg-toggle label {
  padding: 0.55rem 1.4rem; cursor: pointer; font-weight: 700; color: var(--text-muted);
  background: var(--surface); margin: 0;
}
.seg-toggle input:checked + label { background: var(--success); color: #052e16; }
.seg-toggle label + input + label { border-left: 1px solid var(--border); }

/* Optional toggles (W-2, tips, expenses) */
.opt-toggle {
  display: flex; align-items: center; gap: 0.6rem; cursor: pointer;
  padding: 0.65rem 0.75rem; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); margin-bottom: 0.5rem; font-weight: 600; font-size: 0.95rem;
}
.opt-toggle input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
.opt-fields {
  padding: 0.5rem 0.85rem 0.25rem; border-left: 2px solid var(--border); margin: 0 0 1rem 0.4rem;
}

.tip-note, .info-note {
  background: color-mix(in srgb, var(--teal) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--teal) 35%, transparent);
  border-radius: 8px; padding: 0.7rem 0.85rem; font-size: 0.85rem; color: var(--text-muted);
  margin-top: 0.5rem;
}

/* Results */
.results-panel { min-height: 0; }
.results-empty {
  border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 2rem 1.25rem; text-align: center; color: var(--text-faint);
}

/* Quarterly cards — the hero output. 2×2 so tiles stay readable in the
   narrower right-hand column on wide layouts. */
.quarter-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.quarter-card {
  background: linear-gradient(160deg, var(--surface), var(--surface-2));
  border: 1px solid var(--border); border-top: 3px solid var(--success);
  border-radius: var(--radius); padding: 0.7rem 0.7rem 0.75rem; text-align: center; box-shadow: var(--shadow);
}
.quarter-tag { font-weight: 800; color: var(--success); font-size: 0.85rem; letter-spacing: 0.05em; }
.quarter-due { font-size: 0.76rem; color: var(--text-faint); margin: 0.15rem 0 0.4rem; white-space: nowrap; }
.quarter-amount { font-size: 1.3rem; font-weight: 800; color: var(--text); }
.quarter-split {
  list-style: none; margin: 0 0 0.35rem; padding: 0.4rem 0 0.1rem; font-size: 0.76rem;
  border-top: 1px solid var(--border); text-align: left;
}
.quarter-split li { display: flex; justify-content: space-between; gap: 0.4rem; padding: 0.1rem 0; color: var(--text-muted); }
.quarter-split li span:last-child { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.payment-note { margin: 0.25rem 0 0.5rem; }
#projection-note { margin: 0.5rem 0 0; }
#projection-note a { font-weight: 600; }

.section-label { font-weight: 700; font-size: 1.05rem; margin: 1.5rem 0 0.5rem; }

/* Prior-year-tax helpers in the form */
.sh-available { margin: 0.35rem 0 0; font-size: 0.82rem; font-weight: 600; color: var(--success); }
.check-inline {
  display: flex; align-items: center; gap: 0.45rem; margin-top: 0.5rem;
  font-size: 0.9rem; color: var(--text-muted); cursor: pointer;
}
.check-inline input { width: 1.05rem; height: 1.05rem; accent-color: var(--accent); }

/* "Recommended" pill next to the quarterly heading */
.recommended-pill {
  display: inline-flex; align-items: center; gap: 0.3rem; vertical-align: middle;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--success); background: color-mix(in srgb, var(--success) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 40%, transparent);
  padding: 0.15rem 0.55rem; border-radius: 999px;
}
.recommended-pill::before { content: '●'; font-size: 0.7em; }

/* Safe-harbor empty state (no prior-year tax) */
.safe-harbor-empty {
  grid-column: 1 / -1; border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 1.5rem 1.25rem; text-align: center;
}
.safe-harbor-empty strong { display: block; font-size: 1.05rem; margin-bottom: 0.35rem; }
.safe-harbor-empty p { margin: 0; color: var(--text-faint); font-size: 0.9rem; }

/* "· projected" tag on safe-harbor state/local tile lines */
.tile-projected { font-style: normal; color: var(--text-faint); font-size: 0.9em; }

/* Comparison box (recommendation) */
#comparison { margin-top: 1.25rem; }
.comparison-box {
  border-left: 4px solid var(--success);
  display: grid; gap: 1.25rem; align-items: center;
}
@media (min-width: 720px) { .comparison-box { grid-template-columns: 1fr minmax(280px, 360px); } }
.comparison-eyebrow {
  margin: 0 0 0.25rem; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--success);
}
.comparison-title { margin: 0 0 0.4rem; font-size: 1.2rem; }
.comparison-body { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
.comparison-caveat {
  margin: 0.6rem 0 0; padding-top: 0.55rem; border-top: 1px solid var(--border);
  font-size: 0.82rem; color: var(--text-faint);
}
.comparison-cards { display: grid; gap: 0.6rem; }
.comparison-card {
  position: relative; border: 1px solid var(--border); border-radius: 10px;
  padding: 0.7rem 0.9rem; background: var(--surface-2);
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
}
.comparison-card.is-recommended {
  border-color: color-mix(in srgb, var(--success) 55%, transparent);
  background: color-mix(in srgb, var(--success) 12%, transparent);
}
.comp-name { font-weight: 700; }
.comp-amount { font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.comp-amount .comp-per { font-size: 0.7rem; font-weight: 600; color: var(--text-faint); }
.comp-tag {
  position: absolute; top: -0.6rem; left: 0.8rem;
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  color: #052e16; background: var(--success); padding: 0.12rem 0.5rem; border-radius: 999px;
}

/* Annual summary */
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.summary-stat {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 0.9rem; text-align: center;
}
.summary-stat .stat-num { font-size: 1.25rem; font-weight: 800; }
.summary-stat .stat-label { font-size: 0.78rem; color: var(--text-faint); }
.summary-stat.takehome .stat-num { color: var(--success); }
@media (max-width: 420px) { .summary-grid { grid-template-columns: 1fr; } }

/* Full-width results row (chart + breakdown) below the form/summary columns */
#results-wide { margin-top: 1.25rem; }
#results-wide .chart-wrap { justify-content: center; gap: 2.5rem; }
#results-wide .legend { flex: 0 1 380px; }
@media (max-width: 560px) {
  #results-wide .chart-wrap { justify-content: flex-start; gap: 1.25rem; }
}

/* Chart */
.chart-wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.chart-wrap svg { width: 200px; height: 200px; flex: none; }
.donut-center-num { font-size: 30px; font-weight: 800; fill: var(--text); }
.donut-center-label { font-size: 11px; fill: var(--text-faint); }
.legend { list-style: none; margin: 0; padding: 0; flex: 1 1 220px; }
.legend-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; font-size: 0.92rem; }
.legend-swatch { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.legend-label { flex: 1; color: var(--text-muted); }
.legend-value { font-weight: 700; }
.legend-pct { color: var(--text-faint); font-weight: 400; font-size: 0.85rem; }

/* Breakdown table */
.breakdown details { margin-top: 0.5rem; }
.breakdown summary {
  cursor: pointer; font-weight: 600; padding: 0.6rem 0; color: var(--accent);
}
.breakdown table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.breakdown th[scope='row'] { text-align: left; font-weight: 500; color: var(--text-muted); padding: 0.4rem 0; }
.breakdown td { text-align: right; padding: 0.4rem 0; font-variant-numeric: tabular-nums; }
.breakdown tr { border-bottom: 1px solid var(--border); }
.breakdown .breakdown-total th, .breakdown .breakdown-total td {
  font-weight: 800; color: var(--text); border-top: 2px solid var(--border); padding-top: 0.6rem;
}

/* Deduction suggestions */
.deduction-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.75rem; }
.deduction-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem;
}
.deduction-toggle { display: flex; align-items: center; gap: 0.55rem; cursor: pointer; font-weight: 700; }
.deduction-toggle input { width: 1.1rem; height: 1.1rem; accent-color: var(--success); }
.deduction-blurb { font-size: 0.82rem; color: var(--text-faint); margin: 0.5rem 0; }
.deduction-amount { font-size: 0.85rem; font-weight: 700; color: var(--success); margin: 0.4rem 0 0; }

.deduction-savings {
  background: color-mix(in srgb, var(--success) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--success) 40%, transparent);
  border-radius: 10px; padding: 0.85rem 1rem; margin: 1rem 0; font-size: 0.98rem; color: var(--text);
}

/* Supporting content */
.content-section { margin-top: 2.5rem; }
.content-section h2 { border-bottom: 1px solid var(--border); padding-bottom: 0.35rem; }
.due-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.95rem; }
.due-table th, .due-table td { text-align: left; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--border); }
.due-table th { color: var(--text-muted); }

.faq dt { font-weight: 700; margin-top: 1rem; }
.faq dd { margin: 0.25rem 0 0; color: var(--text-muted); }

.error-banner {
  background: #fef2f2; color: #991b1b; border: 1px solid #fecaca;
  padding: 0.85rem 1rem; border-radius: 10px; margin: 1rem 0;
}
[data-theme='dark'] .error-banner { background: #2a1414; color: #fca5a5; border-color: #5b2121; }

/* ---- Download / save-as-PDF action ---- */
.results-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }
.results-actions .btn-secondary { cursor: pointer; padding: 0.55rem 1rem; border-radius: 10px; font-weight: 600; }

/* ---- Print / Save-as-PDF report ----
   A JS-populated report is hidden on screen and is the ONLY thing shown when the
   user prints (or saves to PDF). Its own markup carries explicit light colors via
   inline styles, so the PDF looks right regardless of the on-screen theme. */
.print-report { display: none; }
@media print {
  /* Hide the live app entirely; show only the report. */
  body > *, main.container > * { display: none !important; }
  main.container { display: block !important; max-width: none; padding: 0; margin: 0; }
  #tax-print-report { display: block !important; }
  /* Keep background fills (headline band, cards) in the printout. */
  #tax-print-report { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a[href]:after { content: ''; } /* don't append URLs to links */
}
@page { margin: 14mm; }