/* Page-level CSS for the WPR ported pages.
 *
 * Merged from the <style> blocks of Eligibility Report.dc.html and Eligibility
 * Funnel.dc.html -- the client-approved artifacts. Only rules inline styles
 * cannot express live here: media queries, pseudo-elements, icon masks.
 *
 * Merge rules, in case this needs regenerating:
 *   - Ordinary selectors are deduped; every shared one was verified
 *     byte-identical between the two files.
 *   - @media blocks are NOT deduped by condition. Both files scope different
 *     selectors under the same breakpoint, and their inner selectors were
 *     checked for conflicts (there are none). Deduping them by condition is
 *     what dropped .flow-main, .wpr-choice, .consent-box, .action-row,
 *     .hero-rail and .name-grid on the first attempt.
 *
 * Load-bearing rules -- do not "tidy" any of these (CLAUDE.md S14):
 *
 *   .ico           SVG data URIs must stay in this stylesheet and must omit the
 *                  ";utf8" parameter. In an inline style attribute the
 *                  semicolon terminates the declaration and truncates the
 *                  payload. A mask that fails to load renders as a SOLID FILLED
 *                  BLOCK, not as nothing.
 *   .band-scale    minmax(0, 1fr), not 1fr. A bare 1fr floors at min-content,
 *                  pushing the middle band label off the gauge axis.
 *   .preview-body  The max-height crop, with .preview-veil over it, is what
 *                  makes the landing preview read as a glimpse of the real
 *                  report rather than a stack of cards.
 *
 * Paths are rewritten for the worker: assets/ -> /assets/.
 */

body { margin: 0; background: var(--bg-canvas); }

a { color: var(--fg-accent); }

a:hover { color: var(--wpr-green-800); }

dd { margin: 0; }

.grain { position: relative; }

.grain::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background-image: url("/assets/grain.png"); background-size: 192px 192px;
    opacity: 0.035; mix-blend-mode: overlay;
  }

.grain > * { position: relative; z-index: 1; }

.ico {
    display: inline-block; width: 1.125rem; height: 1.125rem; flex: none;
    background: currentColor;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }

@media (max-width: 60rem) { .two-up { grid-template-columns: 1fr !important; gap: 2rem !important; } .eq-head { min-height: 0; } }

.site-footer { background: var(--wpr-green-800); padding: 3.5rem 0 2rem; margin-top: 1rem; }

.footer-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 2fr); gap: 3rem; padding-bottom: 2.5rem; border-bottom: 1px solid color-mix(in srgb, var(--fg-primary) 20%, transparent); }

.footer-brand { display: flex; flex-direction: column; gap: 1.25rem; }

.footer-blurb { margin: 0; font: var(--text-body-sm); max-width: 40ch; color: color-mix(in srgb, var(--fg-primary) 72%, transparent); text-wrap: pretty; }

.footer-contact { display: flex; flex-direction: column; gap: 0.375rem; }

.footer-phone { font-family: var(--wpr-font-sans); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.015em; font-variant-numeric: tabular-nums lining-nums; color: var(--fg-primary); text-decoration: none; }

.footer-phone:hover { color: var(--fg-primary); text-decoration: underline; text-underline-offset: 3px; }

.footer-address { margin: 0; font: var(--text-body-sm); line-height: 1.55; color: color-mix(in srgb, var(--fg-primary) 74%, transparent); }

.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }

.footer-col { display: flex; flex-direction: column; gap: 0.75rem; }

.footer-col a { font: var(--text-body-sm); color: color-mix(in srgb, var(--fg-primary) 74%, transparent); text-decoration: none; min-height: 1.5rem; transition: color var(--wpr-duration-fast) var(--wpr-ease-standard); }

.footer-col a:hover { color: var(--fg-primary); text-decoration: underline; text-underline-offset: 3px; }

.footer-legal { padding-top: 2rem; display: flex; flex-direction: column; gap: 1rem; }

.footer-legal p { margin: 0; font-size: 0.75rem; line-height: 1.6; max-width: 88ch; color: color-mix(in srgb, var(--fg-primary) 56%, transparent); }

.footer-legal strong { font-weight: 600; color: color-mix(in srgb, var(--fg-primary) 74%, transparent); }

.footer-base { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: 0.75rem; padding-top: 1.25rem; border-top: 1px solid color-mix(in srgb, var(--fg-primary) 14%, transparent); }

@media (max-width: 60rem) {
    .site-footer { padding: 2.5rem 0 1.5rem; }
    .footer-top { grid-template-columns: 1fr; gap: 2rem; }
    .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
  }

.row-basis { display: block; margin-top: 0.1875rem; font: var(--text-caption); color: var(--fg-muted); font-variant-numeric: tabular-nums lining-nums; }

.eq-head { min-height: 2.34em; }

/* minmax(0,1fr) so the side tracks can be equal — a bare 1fr floors at
     min-content, which made the middle chip drift off the gauge's axis. */
  .band-scale {
    display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center; gap: 0.5rem;
    width: 100%; max-width: 23rem; margin: 1.25rem auto 0;
  }

@media (max-width: 30rem) {
    .band-scale { display: flex; justify-content: center; }
    .band-off { display: none; }
  }

.t-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 40rem) {
    .t-scroll .wpr-table { min-width: 28rem; }
    .hero { padding: 2.5rem 0 2.25rem !important; }
    .body-section { padding: 2.5rem 0 3rem !important; }
    .wpr-stat { padding: 1rem 1.25rem; }
  }

.ico--check {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M20%206%209%2017l-5-5%22%2F%3E%3C%2Fsvg%3E");
  }

.ico--help {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M9.09%209a3%203%200%200%201%205.83%201c0%202-3%203-3%203%22%2F%3E%3Cpath%20d%3D%22M12%2017h.01%22%2F%3E%3C%2Fsvg%3E");
  }


/* ══ From Eligibility Funnel.dc.html ══ */


@keyframes wpr-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Report preview: the real report page, cropped. The veil fades the lower
     edge so the CTA sits on solid canvas rather than mid-table. */
  .preview-frame {
    position: relative; border: 1px solid var(--border-subtle); border-radius: 10px;
    background: var(--bg-surface); overflow: hidden;
  }

/* Capped so the preview reads as a glimpse of the real page, not a scroller. */
  .preview-body { padding: 0; max-height: 40rem; overflow: hidden; }

.preview-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
    padding: 1.5rem; align-items: stretch;
  }

.preview-veil {
    position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
    background: linear-gradient(to bottom, transparent 0%, var(--bg-canvas) 68%);
    pointer-events: none;
  }

.preview-cta {
    position: absolute; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
    padding: 0 1.5rem 2rem; text-align: center;
  }

@media (max-width: 60rem) {
    .site-footer { padding: 2.5rem 0 1.5rem; }
    .footer-top { grid-template-columns: 1fr; gap: 2rem; }
    .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
  }

.rail-wide { display: block; }

.rail-narrow { display: none; }

@media (max-width: 60rem) {
    .rail-wide { display: none; }
    .rail-narrow { display: flex; }
    .flow-main { padding: 1.75rem 1.25rem 3rem !important; }
    .flow-aside { padding: 1.125rem 1.25rem !important; border-right: 0 !important; border-bottom: 1px solid var(--border-subtle); position: sticky; top: 0; z-index: 5; }
    .two-up { grid-template-columns: 1fr !important; gap: 2rem !important; }
    .preview-grid { grid-template-columns: 1fr; padding: 1.25rem; }
    .preview-veil { height: 70%; }
    .hero { padding: 2.5rem 0 2.25rem !important; }
    .hero-rail { padding-top: 0 !important; }
    .hero-ornament { display: none !important; }
    .body-section { padding: 2.5rem 0 3rem !important; }
  }

@media (max-width: 40rem) {
    .name-grid { grid-template-columns: 1fr !important; }
    .wpr-choice { flex-wrap: wrap; row-gap: 0.25rem; }
    .wpr-choice__hint { white-space: normal; flex-basis: 100%; }
    .consent-box { flex-wrap: nowrap; }
    .action-row { flex-direction: column; align-items: stretch; gap: 1rem; }
    .action-row .wpr-btn--primary { width: 100%; justify-content: center; }
    .action-row .wpr-btn--link { align-self: center; min-height: 2.75rem; }
    .wpr-stat { padding: 1rem 1.25rem; }
  }

/* ───────────────────────────────────────────────────────────────────────────
 * Questionnaire chrome. Added during the port, not lifted from the artifacts.
 *
 * .flow-topbar holds the step label and the progress bar together. On wide
 * screens it sits statically above the question, with the rail alongside naming
 * all eight steps. On mobile the rail, the logo and the split layout are gone
 * and this bar is the entire navigation, so it sticks to the top.
 *
 * It is deliberately short: label, bar, minimal padding. It sits above every
 * question, and every pixel of it is taken from the thing being read. The
 * design collapsed the rail into a sticky strip of dots here (CLAUDE.md S5.2);
 * this replaces the dots with the bar, which says the same thing in less space
 * and matches the gauge the report ends with.
 * ─────────────────────────────────────────────────────────────────────────── */
.flow-topbar { display: flex; flex-direction: column; gap: 0.5rem; }
.flow-meter { width: 100%; max-width: 20rem; }

@media (max-width: 60rem) {
  /* No rail, no logo, no split. */
  .flow-aside { display: none !important; }

  .flow-topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    gap: 0.375rem;
    /* Bleed past .flow-main's inline padding so the bar spans the viewport. */
    margin: -1.25rem -1.25rem 1.25rem;
    padding: 0.75rem 1.25rem 0.625rem;

    /* Surface, not canvas: the bar sits above the page rather than on it, and
     * the system's canvas is *darker* than its surfaces, so lifting it reads
     * correctly rather than inverted.
     *
     * §4 allows a shadow only for things that truly float. A sticky bar with
     * content scrolling under it is exactly that, so it gets one instead of the
     * hairline — kept very low so it reads as a lift, not a card. */
    background: var(--bg-surface);
    box-shadow:
      0 1px 2px color-mix(in srgb, var(--fg-primary) 5%, transparent),
      0 4px 12px color-mix(in srgb, var(--fg-primary) 4%, transparent);
  }
  .flow-meter { max-width: none; }
  .flow-main { padding: 1.25rem 1.25rem 3rem !important; }
}