/*
   Eligibility tool styling.

   Deliberately scoped to this page and built on the brand tokens from section 4.5 of the plan.
   The full design system - Tailwind, self-hosted type, the component library - lands with the M1
   design milestone; this is enough to make the tool look like it belongs to Exemplar rather than
   to the Blazor template, without pre-empting decisions you have not signed off yet.
*/

/* Tokens live in site.css; this file only adds what the eligibility tool needs on top. */

.ehba-shell {
    max-width: 56rem;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
    color: var(--ehba-ink-900);
    font-variant-numeric: tabular-nums;
}

.ehba-page-head h1 {
    color: var(--ehba-heading);
    font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin: 0 0 0.35rem;
}

.ehba-lede { color: var(--ehba-ink-500); margin: 0 0 2rem; }

/* ---------- stepper ---------- */

.ehba-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    list-style: none;
    margin: 0 0 2rem;
    padding: 0 0 1rem;
    border-bottom: 1px solid var(--ehba-ink-200);
    font-size: 0.9rem;
    color: var(--ehba-ink-500);
}

.ehba-steps li { display: flex; align-items: center; gap: 0.5rem; }

.ehba-step-num {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    border: 1px solid var(--ehba-ink-200);
    font-size: 0.8rem;
    font-weight: 600;
}

.ehba-steps .is-current { color: var(--ehba-heading); font-weight: 600; }
.ehba-steps .is-current .ehba-step-num { background: var(--ehba-primary); border-color: var(--ehba-primary); color: var(--ehba-on-primary); }
/*
    --ehba-accent, not --ehba-accent-600. The chip beside it was already converted; this label was
    missed because a completed step only appears from step 2 onwards, which no contrast sweep of
    the entry page ever reaches. On the dark surface the fixed brand teal measured 3.32:1.
*/
.ehba-steps .is-done { color: var(--ehba-accent); }
.ehba-steps .is-done .ehba-step-num { background: var(--ehba-accent); border-color: var(--ehba-accent); color: var(--ehba-on-primary); }

/* ---------- forms ---------- */

.ehba-form { margin-bottom: 2rem; }
.ehba-field-row { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: 1.25rem; }
.ehba-field { flex: 1 1 16rem; display: flex; flex-direction: column; gap: 0.35rem; }
/*
    The cap belongs on the input, not on the field. Capping the whole column at 20rem also capped
    the hint and the error message, so "The ten-digit National Provider Identifier for your
    practice." wrapped onto a second line at 320px when it needs 436px. The box stays sized for ten
    digits; the words beside it get the room they need.
*/
.ehba-field-narrow { max-width: 28rem; margin-bottom: 1.25rem; }
.ehba-field-narrow input { max-width: 20rem; }

.ehba-field label { font-weight: 600; font-size: 0.9rem; }

.ehba-field input {
    height: 3rem;
    padding: 0 0.75rem;
    border: 1px solid var(--ehba-ink-200);
    border-radius: var(--ehba-radius);
    font-size: 1rem;
    font-family: inherit;
    background: var(--ehba-surface);
    color: inherit;
}

.ehba-field input:focus-visible {
    outline: 2px solid var(--ehba-brand-600);
    outline-offset: 1px;
    border-color: var(--ehba-primary);
}

.ehba-hint { font-size: 0.82rem; color: var(--ehba-ink-500); }

/*
    Field errors speak the same visual language as the alert banners above them: a tinted panel
    with a coloured bar down its left edge. They used to be one line of small red text directly
    under one line of small grey hint text, which read as a third line of help rather than as
    something being wrong - easy to skip past on the NPI step, where the error is the only thing
    standing between a provider and the rest of the form.
*/
.validation-message {
    display: flex; align-items: flex-start; gap: 0.5rem;
    font-size: 0.85rem; font-weight: 500;
    color: var(--ehba-danger);
    background: var(--ehba-danger-50);
    border-left: 3px solid var(--ehba-danger);
    border-radius: 0 var(--ehba-radius) var(--ehba-radius) 0;
    padding: 0.5rem 0.75rem;
}

/* Drawn rather than an asset, so it scales with the text and needs no request. */
.validation-message::before {
    content: "!";
    flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.15em; height: 1.15em; margin-top: 0.05em;
    border-radius: 50%;
    background: var(--ehba-danger); color: var(--ehba-on-danger);
    font-size: 0.85em; font-weight: 700; line-height: 1;
}

/* The field itself carries a soft ring, so the eye finds the input and not only the message. */
.ehba-field input.invalid,
.ehba-field textarea.invalid {
    border-color: var(--ehba-danger);
    box-shadow: 0 0 0 3px var(--ehba-danger-ring);
}

/* ---------- buttons ---------- */

.ehba-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
/*
    The submit button needs air above it. A bare .ehba-field carries no bottom margin - unlike
    .ehba-field-row and .ehba-field-narrow, which both do - so on the contact form, whose last
    field is a bare one, the button sat flush against the hint text with no gap at all.
*/
.ehba-actions-spaced { margin-top: 1.5rem; }

.ehba-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0 1.25rem;
    border-radius: var(--ehba-radius);
    border: 1px solid transparent;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}

.ehba-btn-primary { background: var(--ehba-primary); color: var(--ehba-on-primary); }
.ehba-btn-primary:hover { background: var(--ehba-brand-900); }
.ehba-btn-ghost { background: var(--ehba-surface); color: var(--ehba-link); border-color: var(--ehba-ink-200); }
.ehba-btn-ghost:hover { border-color: var(--ehba-brand-400); }
.ehba-btn:focus-visible { outline: 2px solid var(--ehba-brand-600); outline-offset: 2px; }

/* ---------- messages ---------- */

.ehba-alert {
    border: 1px solid;
    border-left-width: 4px;
    border-radius: var(--ehba-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.75rem;
}

.ehba-alert p { margin: 0; }
.ehba-alert p + p { margin-top: 0.5rem; }
.ehba-alert-danger { background: var(--ehba-danger-50); border-color: var(--ehba-danger); }
.ehba-alert-warning { background: var(--ehba-warning-50); border-color: var(--ehba-warning); }
.ehba-alert-actions a { color: inherit; }

.ehba-verified {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--ehba-accent-50);
    border-radius: var(--ehba-radius);
    padding: 0.75rem 1rem;
    margin: 0 0 1.75rem;
    font-size: 0.95rem;
}

.ehba-tick { color: var(--ehba-accent-600); font-weight: 700; }

/* ---------- result ---------- */

.ehba-result {
    border: 1px solid var(--ehba-ink-200);
    border-radius: var(--ehba-radius-lg);
    overflow: hidden;
    margin-bottom: 1.5rem;
    background: var(--ehba-surface);
}

.ehba-result-head {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.5rem;
    background: var(--ehba-brand-50);
    border-bottom: 1px solid var(--ehba-ink-200);
}

.ehba-result-head h2 {
    margin: 0 0 0.25rem;
    color: var(--ehba-heading);
    font-size: 1.6rem;
    letter-spacing: -0.01em;
}

/*
    Laid out with a gap rather than relying on the single space either side of the separator,
    which read as one run of text. Each item is its own span in the markup so a wrap breaks
    between items rather than through one.
*/
.ehba-result-ids {
    margin: 0; font-size: 0.9rem; color: var(--ehba-ink-500);
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem;
}

.ehba-pill {
    margin: 0;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.ehba-pill-ok   { background: var(--ehba-success-50); color: var(--ehba-success); }
.ehba-pill-warn { background: var(--ehba-warning-50); color: var(--ehba-warning); }
.ehba-pill-info { background: var(--ehba-brand-50); color: var(--ehba-heading); }

.ehba-result-address {
    margin: 0;
    padding: 1.25rem 1.5rem 0;
    font-style: normal;
    line-height: 1.5;
}

.ehba-dates {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
    margin: 0;
    padding: 1.25rem 1.5rem;
}

.ehba-dates dt { font-size: 0.85rem; color: var(--ehba-ink-500); margin-bottom: 0.15rem; }
.ehba-dates dd { margin: 0; font-size: 1.05rem; font-weight: 600; }

/*
    Named .ehba-coverage, not .ehba-detail. site.css already used that name for the service
    page's two-column grid - display: grid, grid-template-columns: 15rem minmax(0, 1fr) - and it
    loads first, so this table inherited the grid and its cells were squeezed into the 15rem
    track above 64rem, wrapping every value. Below 64rem the grid collapses to one column and it
    looked fine, which is why it only showed on a wide window.
*/
.ehba-coverage { width: 100%; border-collapse: collapse; }

.ehba-coverage th,
.ehba-coverage td {
    text-align: left;
    padding: 0.7rem 1.5rem;
    border-top: 1px solid var(--ehba-ink-200);
    font-weight: 400;
}

.ehba-coverage th { width: 1%; white-space: nowrap; color: var(--ehba-ink-500); }
.ehba-coverage td { font-weight: 600; }
.ehba-muted { color: var(--ehba-ink-500); font-weight: 400; }
/* The description belongs on the same line as the code it explains. */
.ehba-coverage td .ehba-muted { white-space: nowrap; }

.ehba-result-foot {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--ehba-ink-200);
    background: var(--ehba-surface-alt);
}

.ehba-disclaimer { margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--ehba-ink-500); }
.ehba-provenance {
    margin: 0; font-size: 0.8rem; color: var(--ehba-ink-500);
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem;
}
.ehba-result-ids .ehba-sep, .ehba-provenance .ehba-sep { opacity: 0.55; }
.ehba-footnote { margin-top: 2.5rem; font-size: 0.85rem; color: var(--ehba-ink-500); }

.ehba-visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* ---------- small screens ---------- */

@media (max-width: 40rem) {
    .ehba-coverage th, .ehba-coverage td { display: block; padding: 0.4rem 1.25rem; }
    .ehba-coverage th { width: auto; border-top: 1px solid var(--ehba-ink-200); padding-bottom: 0; }
    .ehba-coverage td { border-top: 0; padding-top: 0.1rem; }
    .ehba-dates { gap: 1.25rem; }
}

/* ---------- accumulators ----------
   Three tables of money under the coverage record, laid out like VBA's Plan Accumulator screen so
   that a provider on the phone and a service rep in VBA are reading the same grid. Numbers are
   right-aligned and tabular - .ehba-shell already sets font-variant-numeric - so the columns line
   up digit for digit and a 1,000.00 cannot be misread as a 100.00.
*/

.ehba-accum {
    border-top: 1px solid var(--ehba-ink-200);
    padding: 1.5rem;
}

.ehba-accum-head { margin-bottom: 1.25rem; }

.ehba-accum-head h3 {
    margin: 0 0 0.2rem;
    color: var(--ehba-heading);
    font-size: 1.15rem;
    letter-spacing: -0.01em;
}

.ehba-accum-plan {
    margin: 0; font-size: 0.85rem; color: var(--ehba-ink-500);
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem;
}

.ehba-accum-plan .ehba-sep { opacity: 0.55; }

.ehba-accum-none {
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    background: var(--ehba-surface-alt);
    border-radius: var(--ehba-radius);
    font-size: 0.9rem;
    color: var(--ehba-ink-500);
}

.ehba-accum-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.75rem;
    font-size: 0.9rem;
}

.ehba-accum-table caption {
    text-align: left;
    font-weight: 700;
    color: var(--ehba-heading);
    padding-bottom: 0.4rem;
}

.ehba-accum-table th,
.ehba-accum-table td {
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid var(--ehba-ink-200);
    text-align: right;
    white-space: nowrap;
}

.ehba-accum-table thead th {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ehba-ink-500);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom-width: 2px;
}

/* The row label is the only thing in the table that is not a number. */
.ehba-accum-table tbody th,
.ehba-accum-row-label {
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}

.ehba-accum-table tbody th { color: var(--ehba-ink-500); padding-left: 0; }

/*
    The Total row is what most callers actually want, so it is the one that carries weight. The
    tint is a background on the row rather than a rule above it: a rule read as the end of the
    table and the next caption then looked like a heading for nothing.
*/
.ehba-accum-total { background: var(--ehba-surface-alt); }
.ehba-accum-total td, .ehba-accum-total th { font-weight: 700; border-bottom: 0; }
.ehba-accum-total th { color: var(--ehba-ink-900); }

.ehba-accum-contacts {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.ehba-accum-contacts caption {
    text-align: left;
    font-weight: 700;
    color: var(--ehba-heading);
    padding-bottom: 0.4rem;
}

.ehba-accum-contacts th,
.ehba-accum-contacts td {
    text-align: left;
    padding: 0.5rem 0.6rem 0.5rem 0;
    border-bottom: 1px solid var(--ehba-ink-200);
    vertical-align: top;
}

.ehba-accum-contacts th { width: 14rem; font-weight: 400; color: var(--ehba-ink-500); }
.ehba-accum-contacts td { font-weight: 600; }
.ehba-accum-contacts address { font-style: normal; line-height: 1.45; }

.ehba-accum-note, .ehba-accum-unavailable {
    margin: 0;
    font-size: 0.82rem;
    color: var(--ehba-ink-500);
}

.ehba-accum-unavailable {
    padding: 1.25rem 1.5rem;
    border-top: 1px solid var(--ehba-ink-200);
}

/* ---------- accumulators on a small screen ----------
   Six money columns will not fit a phone, and a horizontally scrolling table of dollar amounts is
   a way to read the wrong figure. Each row becomes its own small block instead, with the column
   heading repeated from the data-label attribute beside every value.

   52rem, not the 48rem the rest of this file uses. The grid needs about 725px for the six columns
   plus the row label, and the panel and the shell take 96px of padding between them: below roughly
   821px the table is wider than the card it sits in, and .ehba-result clips the overflow - so the
   Family Rem. column, the one a provider is most often reading, silently loses its right-hand
   digits. The breakpoint is set by what the table measures, not by what the other rules use.
*/

@media (max-width: 52rem) {

    .ehba-accum { padding: 1.25rem; }

    .ehba-accum-table thead { display: none; }
    .ehba-accum-table, .ehba-accum-table tbody { display: block; }

    /*
        A table-caption inside a table that is display: block is sized shrink-to-fit, which broke
        "Co-Insurance" across two lines at the hyphen. As a block it takes the full width and reads
        as the heading it is.
    */
    .ehba-accum-table caption, .ehba-accum-contacts caption { display: block; }

    .ehba-accum-table tr {
        display: block;
        border: 1px solid var(--ehba-ink-200);
        border-radius: var(--ehba-radius);
        padding: 0.5rem 0.75rem;
        margin-bottom: 0.6rem;
    }

    .ehba-accum-table tbody th {
        display: block;
        padding: 0 0 0.35rem;
        border-bottom: 1px solid var(--ehba-ink-200);
        margin-bottom: 0.35rem;
        color: var(--ehba-ink-900);
    }

    .ehba-accum-table td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.15rem 0;
        border-bottom: 0;
    }

    .ehba-accum-table td::before {
        content: attr(data-label);
        font-weight: 400;
        color: var(--ehba-ink-500);
    }

    .ehba-accum-contacts th, .ehba-accum-contacts td { display: block; width: auto; }
    .ehba-accum-contacts th { border-bottom: 0; padding-bottom: 0; }
    .ehba-accum-contacts td { padding-top: 0.1rem; }
}

/* ---------- print ----------
   Provider offices print this for the chart, and "Save as PDF" is the same stylesheet through the
   browser's print dialog - which is why there is no server-side PDF library to license or patch.

   The header and footer are hidden by site.css, which also forces white and black so a record
   printed while the site is in dark mode does not come out near-black.
*/

@media print {

    main { width: auto !important; }


    /* everything on the page that is not the record itself */
    .ehba-steps,
    .ehba-actions,
    .ehba-no-print,
    .ehba-alert,
    .ehba-verified,
    .ehba-lede,
    .ehba-footnote,
    form { display: none !important; }

    html, body {
        background: #fff !important;
        font-size: 11pt;
    }

    .ehba-shell { max-width: none; padding: 0; margin: 0; }

    .ehba-page-head h1 {
        font-size: 16pt;
        margin: 0 0 0.75rem;
        color: #000;
    }

    /*
        No break-inside: avoid here any more. The record used to fit on one page; with three
        accumulator tables and the contacts under it, it does not - and asking the browser to keep
        an oversized block together makes it start a fresh page and overflow it anyway, losing the
        bottom of the panel. The individual tables carry the rule instead, so a page break lands
        between tables rather than through one.
    */
    /*
        No outer border on paper. The record fragments across two sheets now, and a border around a
        fragmented box is drawn down to the bottom of the page rather than around the content - so
        page one carried a tall empty frame under the coverage rows. The tinted header block and
        the rules between the rows carry the structure without it.
    */
    .ehba-result {
        border: 0;
        border-radius: 0;
        /*
            overflow: hidden - set for the rounded corners on screen - establishes a block
            formatting context, and a browser will not fragment one across pages. It has to go
            here or the accumulators cannot start a page of their own however they are marked.
        */
        overflow: visible;
    }

    .ehba-result-head { background: #f2f2f2 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .ehba-result-head h2 { color: #000; font-size: 14pt; }

    .ehba-pill {
        border: 1px solid #666;
        background: none !important;
        color: #000 !important;
    }

    .ehba-coverage th, .ehba-coverage td { display: table-cell !important; }

    /*
        The accumulators are most of the reason a provider prints this, so the small-screen block
        layout is undone for paper and the grid comes back. The panel is allowed to break across
        pages - three tables plus the contacts will not fit under the coverage record on one sheet -
        but an individual table is not.
    */
    /*
        The accumulators start a second sheet. Asked for directly, and it is the right split: page
        one is who the member is and whether they are covered, page two is what they have used and
        where the claim goes. Letting the tables fall wherever the coverage record happened to end
        was what made the printout hard to read - the deductible table would break across the fold
        as often as not.

        The border-top that separates the two on screen goes with it; a rule across the top of a
        fresh page separates nothing.
    */
    .ehba-accum {
        break-before: page;
        page-break-before: always;
        border-top: 0;
        padding: 0;
    }
    .ehba-accum-head h3, .ehba-accum-table caption, .ehba-accum-contacts caption { color: #000; }

    /*
        The small-screen rules match in print too - the print viewport is narrow enough - so the
        block layout has to be undone here explicitly, captions included. A caption left as
        display: block inside a display: table is not a caption any more: it was being laid out
        after the header row, so every table printed its column headings above its own title.
    */
    .ehba-accum-table caption, .ehba-accum-contacts caption { display: table-caption; }

    .ehba-accum-table, .ehba-accum-table tbody { display: table; }
    .ehba-accum-table tbody { display: table-row-group; }
    .ehba-accum-table thead { display: table-header-group; }
    .ehba-accum-table tr { display: table-row; border: 0; padding: 0; margin: 0; }

    .ehba-accum-table th, .ehba-accum-table td {
        display: table-cell !important;
        border-bottom: 1px solid #999;
    }

    .ehba-accum-table td::before { content: none; }
    .ehba-accum-total { background: #f2f2f2 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    .ehba-accum-contacts th, .ehba-accum-contacts td { display: table-cell !important; }
    .ehba-accum-table, .ehba-accum-contacts { break-inside: avoid; page-break-inside: avoid; }
    .ehba-accum-note, .ehba-accum-unavailable, .ehba-accum-plan { color: #000; }

    /*
        The disclaimer and the provenance line - who asked, under which NPI, and when - are the
        point of a printed copy, and now that the record runs to two sheets they have to appear on
        both. A front desk files page one in the chart; page one cannot be the undated, unqualified
        one.

        position: fixed is how a browser is asked for a running footer: it is painted once per
        printed page rather than once per document. It is taken out of the flow, so the bottom
        @page margin below is widened to leave room for it - without that it prints over the last
        rows of the out-of-pocket table.
    */
    .ehba-result-foot {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: none !important;
        border-top: 1px solid #666;
        padding: 0.35rem 0 0;
    }
    .ehba-provenance { color: #000; font-weight: 600; }
    .ehba-disclaimer { color: #000; }

    a { color: #000; text-decoration: none; }

    /* Bottom margin widened for the running footer above. */
    @page { margin: 15mm 15mm 24mm; }
}

/*
    Not styling. This exists so that an autofilled phone field fires an event.

    Choosing an entry from the browser's address list fills the whole form without focusing any of
    it, so nothing the field would normally raise - focus, blur, keystrokes - ever happens, and the
    number sat there unformatted until the provider clicked into it and back out. Chrome, Edge and
    Safari do mark a filled field with :-webkit-autofill, and applying an animation to that state
    turns it into an animationstart event that js/phone-format.js listens for.

    The keyframes are deliberately empty and the duration is effectively nothing: the event is the
    entire point, and the field must not visibly change. Firefox does not implement
    :-webkit-autofill, which is why phone-format.js does not rely on this alone.
*/
@keyframes ehba-autofill {
    from { /* deliberately empty */ }
    to { /* deliberately empty */ }
}

input[data-phone-format]:-webkit-autofill {
    animation-name: ehba-autofill;
    animation-duration: 1ms;
}