/* ============================================================
   Form W-4 wizard
   ------------------------------------------------------------
   Two voices share every screen and have to stay visually apart:

     .w4-form-text   Form W-4's own wording, reproduced verbatim.
                     Serif, on a tinted panel, so it reads as the
                     printed page rather than as our writing.
     everything else The wizard's own chrome, in the app typeface.

   An employee has to be able to tell which words are the IRS's and
   which are ours, because only the first set is what they sign.

   Sizing follows the caregiver rule: body text and every control
   at 16px or larger, since the audience runs 18 to 93.
   ============================================================ */

:root {
    --w4-form-font: Georgia, "Times New Roman", "Liberation Serif", serif;
    --w4-form-size: 16px;
    --w4-control-min: 48px;
}

/* ---------- Shell and layout ---------- */

.w4-shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-5) var(--space-4) var(--space-9);
}

.w4-layout {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: var(--space-7);
    align-items: start;
}

.w4-main {
    min-width: 0;
}

.w4-screen {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    padding: var(--space-6);
}

.w4-screen-heading {
    font: var(--fw-semibold) var(--fs-h1) / var(--lh-snug) var(--font-display);
    color: var(--fg-primary);
    margin: 0 0 var(--space-4);
}

/* ---------- Step rail ---------- */

.w4-rail {
    position: sticky;
    top: var(--space-5);
    background: var(--bg-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
}

.w4-rail ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.w4-rail button {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--w4-control-min);
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    text-align: left;
    font: var(--fw-regular) var(--fs-body) / var(--lh-snug) var(--font-body);
    color: var(--fg-secondary);
    cursor: pointer;
}

.w4-rail button:hover {
    background: var(--bg-muted);
    color: var(--fg-primary);
}

.w4-rail li.on button {
    background: var(--accent-primary-soft);
    color: var(--fg-primary);
    font-weight: var(--fw-semibold);
}

.w4-rail-mark {
    flex: 0 0 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-pill);
    font-size: 12px;
    line-height: 1;
}

.w4-rail li.done .w4-rail-mark {
    border-color: var(--semantic-success);
    background: var(--semantic-success);
    color: #fff;
}

.w4-rail li.on .w4-rail-mark {
    border-color: var(--accent-primary);
}

/* ---------- The form's own words ---------- */

.w4-form-text {
    display: block;
    font-family: var(--w4-form-font);
    font-size: var(--w4-form-size);
    line-height: var(--lh-relaxed);
    color: var(--fg-primary);
    background: var(--bg-subtle);
    border-left: 3px solid var(--border-strong);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    padding: var(--space-3) var(--space-4);
    margin: 0 0 var(--space-4);
    white-space: pre-line;
}

.w4-form-text-small {
    font-size: 15px;
}

.w4-form-text-tight {
    margin-bottom: var(--space-2);
}

/* ---------- The wizard's own words ---------- */

.w4-chrome-note {
    font: var(--fw-regular) var(--fs-body) / var(--lh-normal) var(--font-body);
    color: var(--fg-secondary);
    margin: 0 0 var(--space-4);
}

/* The finished screen's offer of the employee's own copy. Stacked rather than inline so the button
   keeps a full-width tap target on a phone, which is where nearly every caregiver reads this. */
.w4-employee-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    font: var(--fw-regular) var(--fs-body) / var(--lh-normal) var(--font-body);
    color: var(--fg-secondary);
    margin: 0 0 var(--space-4);
}

.w4-employee-copy .btn {
    display: inline-flex;
    align-items: center;
    min-height: var(--w4-control-min);
    font-size: var(--fs-body);
}

.w4-chrome-warning {
    font: var(--fw-medium) var(--fs-body) / var(--lh-normal) var(--font-body);
    color: var(--fg-primary);
    background: var(--semantic-warning-soft);
    border-radius: var(--radius-sm);
    padding: var(--space-3) var(--space-4);
    margin: 0 0 var(--space-4);
}

.w4-question {
    font: var(--fw-semibold) var(--fs-h2) / var(--lh-snug) var(--font-display);
    color: var(--fg-primary);
    margin: 0 0 var(--space-3);
}

.w4-blocked {
    font: var(--fw-regular) var(--fs-body) / var(--lh-normal) var(--font-body);
    color: var(--fg-secondary);
    margin: var(--space-2) 0 0;
}

/* ---------- Choices ---------- */

.w4-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0 0 var(--space-5);
}

.w4-option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-height: var(--w4-control-min);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    font-family: var(--w4-form-font);
    font-size: var(--w4-form-size);
    line-height: var(--lh-normal);
    color: var(--fg-primary);
    cursor: pointer;
}

.w4-option:hover {
    border-color: var(--accent-primary);
    background: var(--accent-primary-soft);
}

.w4-option:focus-within {
    outline: 2px solid var(--border-focus);
    outline-offset: 2px;
}

.w4-option input[type="radio"],
.w4-option input[type="checkbox"] {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 2px;
}

/* An option we wrote rather than one the form prints. Same target size, our typeface. */
.w4-option-chrome {
    font-family: var(--font-body);
}

/* The form's own wording inside an option is a label, not a quoted block. The typeface alone says whose
   words these are, and the option is already a bordered container, so the panel and rule that the
   standalone form-text block carries would nest one container inside another. It matters most on the
   exemption screen, the one place an option we wrote sits beside an option the form prints. */
.w4-option .w4-form-text {
    background: none;
    border-left: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

/* ---------- Fields ---------- */

.w4-field {
    margin: 0 0 var(--space-5);
}

.w4-field-label {
    margin-bottom: var(--space-2);
}

.w4-field-note,
.w4-field-advisory,
.w4-field-source {
    font: var(--fw-regular) var(--fs-body-sm) / var(--lh-normal) var(--font-body);
    color: var(--fg-secondary);
    margin: var(--space-2) 0 0;
}

.w4-field-advisory {
    color: var(--semantic-warning);
}

/* Says where a filled-in number came from. Marked rather than plain, so a box the wizard wrote to is
   distinguishable at a glance from one the employee typed, and reads as information rather than a
   warning. */
.w4-field-source {
    border-left: 2px solid var(--accent-primary);
    padding-left: var(--space-2);
}

.w4-field-error {
    font: var(--fw-medium) var(--fs-body-sm) / var(--lh-normal) var(--font-body);
    color: var(--semantic-danger);
    margin: var(--space-2) 0 0;
}

.w4-money {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    overflow: hidden;
}

.w4-money:focus-within {
    outline: 2px solid var(--border-focus);
    outline-offset: 1px;
}

.w4-money-prefix {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--space-3);
    background: var(--bg-muted);
    color: var(--fg-secondary);
    font-size: var(--fs-body);
}

.w4-money-input,
.w4-count-input,
.w4-lookup-inputs input {
    min-height: var(--w4-control-min);
    font-size: var(--fs-body);
    font-family: var(--font-body);
    color: var(--fg-primary);
    background: transparent;
    border: 0;
    padding: 0 var(--space-3);
    width: 12ch;
}

.w4-money-input:focus,
.w4-count-input:focus {
    outline: none;
}

.w4-count-input,
.w4-lookup-inputs input {
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
}

/* ---------- Disclosures ---------- */

/* Rendered open. An electronic W-4 may not hide the form's instructions behind a pop-up or a
   hover box, so this collapses only after the reader chooses to collapse it. */
.w4-disclosure {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    padding: var(--space-3) var(--space-4);
    margin: 0 0 var(--space-4);
}

.w4-disclosure > summary {
    font: var(--fw-semibold) var(--fs-body) / var(--lh-snug) var(--font-display);
    color: var(--fg-primary);
    cursor: pointer;
    min-height: 32px;
}

.w4-disclosure-body {
    margin-top: var(--space-3);
}

/* ---------- The dependants helper ---------- */

.w4-helper {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--accent-olivia-soft);
    padding: var(--space-4);
    margin: 0 0 var(--space-5);
}

.w4-helper-counts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.w4-helper-counts label {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font: var(--fw-medium) var(--fs-body) / var(--lh-snug) var(--font-body);
    color: var(--fg-primary);
}

.w4-helper-out {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-2);
}

.w4-helper-amount {
    font: var(--fw-bold) var(--fs-h2) / var(--lh-tight) var(--font-display);
    color: var(--fg-primary);
}

.w4-helper-why {
    font: var(--fw-regular) var(--fs-body-sm) / var(--lh-normal) var(--font-body);
    color: var(--fg-secondary);
    margin: 0;
}

.w4-helper-applied {
    font: var(--fw-medium) var(--fs-body-sm) / var(--lh-normal) var(--font-body);
    color: var(--semantic-success);
    margin: var(--space-2) 0 0;
}

/* Sits below the counts row rather than inside it, which is a flex line of labels. */
.w4-helper-refused {
    font: var(--fw-medium) var(--fs-body-sm) / var(--lh-normal) var(--font-body);
    color: var(--semantic-danger);
    margin: 0 0 var(--space-3);
}

/* ---------- Worksheets ---------- */

.w4-computed-line {
    margin-bottom: var(--space-4);
}

.w4-computed {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-muted);
    border-radius: var(--radius-sm);
}

.w4-computed strong {
    font: var(--fw-bold) var(--fs-h3) / var(--lh-tight) var(--font-mono);
    color: var(--fg-primary);
}

.w4-computed span {
    font: var(--fw-regular) var(--fs-body-sm) / var(--lh-normal) var(--font-body);
    color: var(--fg-tertiary);
}

.w4-lookup {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-subtle);
    padding: var(--space-4);
    margin: 0 0 var(--space-5);
}

.w4-lookup h3 {
    font: var(--fw-semibold) var(--fs-h3) / var(--lh-snug) var(--font-display);
    color: var(--fg-primary);
    margin: 0 0 var(--space-3);
}

.w4-lookup-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.w4-lookup-inputs label {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    font: var(--fw-medium) var(--fs-body) / var(--lh-snug) var(--font-body);
    color: var(--fg-primary);
}

.w4-lookup-result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-3);
    font: var(--fw-regular) var(--fs-body) / var(--lh-normal) var(--font-body);
    color: var(--fg-primary);
}

.w4-lookup-result strong {
    font: var(--fw-bold) var(--fs-h2) / var(--lh-tight) var(--font-mono);
}

/* ---------- The printed wage tables ---------- */

/* Scrolls inside itself. The table is thirteen columns wide and the page must not widen with it. */
.w4-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: var(--space-3) 0;
}

.w4-wage-table {
    border-collapse: collapse;
    font-family: var(--w4-form-font);
    font-size: 14px;
    white-space: nowrap;
}

.w4-wage-table caption {
    caption-side: top;
    text-align: left;
    padding-bottom: var(--space-2);
    font: var(--fw-semibold) var(--fs-body) / var(--lh-snug) var(--font-display);
    color: var(--fg-primary);
}

.w4-wage-table th,
.w4-wage-table td {
    border: 1px solid var(--border-subtle);
    padding: var(--space-1) var(--space-2);
    text-align: right;
}

.w4-wage-table thead th,
.w4-wage-table tbody th {
    background: var(--bg-muted);
    font-weight: var(--fw-semibold);
    text-align: left;
    position: sticky;
    left: 0;
}

.w4-wage-table thead th {
    position: static;
}

.w4-wage-row-on td,
.w4-wage-row-on th {
    background: var(--accent-primary-soft);
}

.w4-wage-cell-on {
    outline: 2px solid var(--accent-primary);
    font-weight: var(--fw-bold);
}

/* ---------- Review ---------- */

.w4-readback {
    display: grid;
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
}

.w4-readback > div {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-3);
    align-items: start;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-subtle);
}

.w4-readback dt {
    margin: 0;
    font-weight: var(--fw-regular);
}

.w4-readback dd {
    margin: 0;
    font: var(--fw-semibold) var(--fs-body) / var(--lh-normal) var(--font-body);
    color: var(--fg-primary);
}

/* ---------- Pager ---------- */

.w4-pager {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.w4-pager .btn {
    min-height: var(--w4-control-min);
    min-width: 140px;
    font-size: var(--fs-body);
}

/* ---------- Narrow screens ----------
   Most caregivers sign on a phone, so the rail stops being a sidebar and becomes a
   horizontally scrolling strip above the screen rather than disappearing. */

@media (max-width: 860px) {
    .w4-shell {
        padding: var(--space-3) var(--space-2) var(--space-8);
    }

    .w4-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-4);
    }

    .w4-rail {
        position: static;
        overflow-x: auto;
    }

    .w4-rail ol {
        flex-direction: row;
        gap: var(--space-2);
    }

    .w4-rail button {
        white-space: nowrap;
    }

    .w4-screen {
        padding: var(--space-4);
        border-radius: var(--radius-md);
    }

    .w4-readback > div {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-1);
    }

    .w4-pager .btn {
        min-width: 0;
        flex: 1;
    }
}