/* =========================================================================
   W-2 INCOME CALCULATOR — SCOPED STYLES
   Scoped to .wic-wrap / .wic-intro; no global overrides.
   ========================================================================= */

.wic-intro {
  max-width: 1100px; margin: 0 auto 32px; padding: 0 4px;
}
.wic-intro-title {
  font-family: 'Montserrat', sans-serif; font-size: 1.75rem; font-weight: 700;
  color: var(--color-cream, #F5F1E9); margin: 0 0 12px; line-height: 1.25;
}
.wic-intro-desc {
  font-family: 'Montserrat', sans-serif; font-size: 0.95rem;
  color: var(--color-body, #D9D6CF); margin: 0; line-height: 1.65; max-width: 820px;
}

/* WRAP — variable token mapping */
.wic-wrap {
  --bg:          var(--color-bg, #121212);
  --surface:     var(--color-surface, #1a1a1a);
  --surface-alt: var(--color-surface-dark, #0a0a0a);
  --ink:         var(--color-cream, #F5F1E9);
  --ink-soft:    var(--color-body, #D9D6CF);
  --ink-mute:    var(--color-muted, #b0a898);
  --rule:        var(--color-border, #2a2a2a);
  --accent:      var(--color-gold, #967b45);
  --gold:        var(--color-gold, #967b45);
  --up:          #1D6B3A;
  --down:        #9B2335;
  --radius:      10px;
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.3);
  --font-body:   'Montserrat', sans-serif;
  max-width: 1100px; margin: 0 auto;
}

/* SECTIONS */
.wic-section {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 28px 32px 32px; margin-bottom: 16px;
}
.wic-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 18px; padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 600px) { .wic-section { padding: 18px 16px 22px; } }

/* PAY TYPE TOGGLE */
.wic-pay-toggle { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.wic-toggle-opt {
  display: flex; align-items: center; gap: 8px; padding: 9px 20px;
  background: var(--surface-alt); border: 1px solid var(--rule); border-radius: var(--radius);
  cursor: pointer; font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--ink-soft); transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
  user-select: none;
}
.wic-toggle-opt input[type="radio"] { display: none; }
.wic-toggle-opt.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* BASE ROWS (1 column of inputs) */
.wic-base-row {
  display: grid; grid-template-columns: 2fr 1fr; gap: 16px; align-items: center;
  padding: 8px 0; border-bottom: 1px solid rgba(42,42,42,0.5);
}
.wic-base-row:last-child { border-bottom: none; }
.wic-base-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.wic-base-label small { display: block; font-size: 11px; font-weight: 400; color: var(--ink-mute); margin-top: 2px; font-style: italic; }
@media (max-width: 600px) { .wic-base-row { grid-template-columns: 1fr; gap: 6px; } }

/* VARIABLE SECTION — year header */
.wic-var-header {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; align-items: end;
  margin-bottom: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--rule);
}
.wic-year-col-head {
  font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ink-soft); text-align: center;
}
.wic-year-col-head span { display: block; font-size: 10px; font-weight: 400; color: var(--ink-mute); text-transform: none; letter-spacing: 0; margin-top: 2px; }

/* VARIABLE ROWS */
.wic-row {
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; align-items: start;
  padding: 9px 0; border-bottom: 1px solid rgba(42,42,42,0.5);
}
.wic-row:last-child { border-bottom: none; }
.wic-row-label { padding-top: 10px; }
.wic-row-label-main { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.wic-row-label-ref  { font-size: 11px; color: var(--ink-mute); margin-top: 3px; font-style: italic; }
@media (max-width: 600px) {
  .wic-var-header { grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; }
  .wic-row        { grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; }
}

/* INPUTS */
.wic-input-wrap { position: relative; }
.wic-input {
  width: 100%; font-family: var(--font-body); font-size: 14px; font-weight: 600;
  color: var(--ink); background: var(--surface-alt);
  border: 1px solid var(--rule); border-radius: var(--radius);
  padding: 10px 12px; transition: border-color 140ms ease, background 140ms ease;
  -moz-appearance: textfield;
}
.wic-input::-webkit-outer-spin-button,
.wic-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wic-input:focus { outline: none; border-color: var(--accent); background: var(--surface); }

/* RESULTS */
.wic-results {
  background: var(--surface-alt); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 28px 32px; margin-bottom: 16px;
}
.wic-results-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-mute); margin-bottom: 18px; padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.wic-empty { text-align: center; padding: 36px 20px; color: var(--ink-mute); font-size: 14px; font-style: italic; }

.wic-result-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px 24px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid rgba(42,42,42,0.5);
}
.wic-result-label  { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.wic-result-amount { font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--ink); white-space: nowrap; text-align: right; }
.wic-result-note   { font-size: 11px; color: var(--ink-mute); white-space: nowrap; text-align: right; min-width: 140px; }
.wic-result-note.is-declining { color: #f5a5b0; }
.wic-result-note.is-one-year  { color: var(--accent); }

.wic-result-total {
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px 24px; align-items: center;
  padding: 18px 0 4px;
}
.wic-result-total-label  { font-size: 14px; font-weight: 700; color: var(--ink); }
.wic-result-total-amount { font-size: 24px; font-weight: 700; color: var(--gold); white-space: nowrap; text-align: right; }
.wic-result-total-sub    { font-size: 11px; color: var(--ink-mute); text-align: right; }

@media (max-width: 600px) {
  .wic-results { padding: 18px 16px; }
  .wic-result-row   { grid-template-columns: 1fr auto; }
  .wic-result-note  { display: none; }
  .wic-result-total { grid-template-columns: 1fr auto; }
  .wic-result-total-sub { display: none; }
}

/* FLAGS */
.wic-flags { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.wic-flag {
  padding: 11px 16px; border-radius: 6px; font-size: 12px; line-height: 1.55; color: var(--ink-soft);
}
.wic-flag strong { font-weight: 700; }
.wic-flag.declining { background: rgba(155,35,53,0.12); border-left: 3px solid var(--down); }
.wic-flag.declining strong { color: #f5a5b0; }
.wic-flag.one-year  { background: rgba(150,123,69,0.12); border-left: 3px solid var(--accent); }
.wic-flag.one-year strong { color: var(--accent); }

/* YTD SECTION */
.wic-ytd-section { border-style: dashed; }
.wic-optional {
  font-size: 10px; font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--accent); margin-left: 8px; font-style: italic;
}

/* SELECT */
.wic-select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%23b0a898' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
  padding-right: 32px;
}
.wic-select option { background: #1a1a1a; color: #F5F1E9; }

/* YTD result note states */
.wic-result-note.is-on-pace { color: #6ecf8e; }

/* DISCLAIMER */
.wic-disclaimer {
  margin-top: 4px; padding: 16px 20px;
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
  font-size: 11px; line-height: 1.65; color: var(--ink-mute);
}