/*
 * Home page layout (T-0627 wave 2). Page-scoped only: no new colors, fonts,
 * or sizes outside the tokens shipped in site.css. Ported from the comp's
 * own <style> block in design-system/pages/Homepage.html, plus a few rules
 * this page needs that the comp's static markup did not (the drug-scoped
 * verdict panel, and the shared popular-medications partial wrapper).
 */

/* Hero: object column */
.rx-hero .rx-inner--wide { align-items: start; }
.rx-hero-copy .rx-hero-actions { margin-bottom: 0; }

/* Hero spacing fix (owner request, mid-wave-2 comp update): the hero's
   lede/search/price/actions stack was too tight. Not yet in the app's
   shipped site.css (resources/css/design-system) -- the coordinator will
   add these to the shared design-system source at integration; kept here,
   page-scoped, in the meantime so this page renders the fixed spacing now. */
.rx-hero .rx-hero-actions { gap: var(--space-3) var(--space-6); margin-top: var(--space-6); }
.rx-hero .rx-lede { margin-bottom: var(--space-6); }
.rx-hero .rx-search-wrap { margin: 0 0 var(--space-6); }
.rx-hero .rx-price--inline { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: baseline; column-gap: var(--space-4); row-gap: var(--space-3); margin: 0; }

/* Income-check layout (P1-3): single column in DOM order (controls, verdict, "Nothing
   is stored") below 768px, so the verdict sits directly beneath the slider on mobile
   instead of two screens down in a second grid column. At 768px+ the verdict moves
   beside the controls via named grid areas -- a visual reposition only, DOM order
   (and therefore reading/focus order) is unchanged. */
.rx-income-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; grid-template-areas: "controls" "verdict" "note"; }
.rx-income-controls { grid-area: controls; }
.rx-income-layout > [data-verdict] { grid-area: verdict; }
.rx-income-layout > .rx-meta { grid-area: note; margin: 0; }
@media (min-width: 768px) {
  .rx-income-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--space-8); grid-template-areas: "controls verdict" "note verdict"; }
}

/* T-0627 wave 10 (owner, 2026-09-03: "this part doesnt work" -- the dropdown
   painted as an empty rounded bar under the box with nothing typed yet).
   site.css's `.rx-suggest { position:absolute; ... }` rule has equal
   specificity to a bare `[hidden]` attribute selector and wins the later-
   cascade tie, so [hidden] alone does not hide it -- this page-scoped rule
   is the fix, kept here per this wave's file ownership (site.css is not in
   this lane's allowed-files list). medication-search.js's close()/open()
   set/clear the hidden ATTRIBUTE itself (belt) alongside this CSS
   (suspenders), so the empty bar can never repaint from either side. */
.rx-suggest[hidden] { display: none; }

/* Same defeated-[hidden] bug as .rx-suggest above, hitting the state field:
   site.css's `.rx-field { display: block; ... }` has equal specificity to a
   bare [hidden] selector, so income-check.js's stateField.hidden = true (set
   only when insurance !== 'medicare') painted anyway. Belt-and-suspenders
   fix, same pattern as .rx-suggest[hidden] above. */
[data-state-field][hidden] { display: none; }

/* Scoped-mode suggestion rows (medication-search.js renderRowScoped): one
   <button> per <li>, matching the anatomy site.css's `.rx-suggest li a`
   rule already targets -- extended to `li button` here rather than edited
   into site.css, since a <button> (not an <a>) is this mode's one control
   per row (no secondary "view details" link). */
.rx-suggest li button {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px;
  width: 100%; min-height: 48px; padding: 8px 20px; border: 0; background: transparent;
  text-align: left; cursor: pointer; color: var(--ink); font-size: var(--fs-ui); font-family: inherit;
}
.rx-suggest li button:hover, .rx-suggest li button:focus, .rx-suggest li.active button { background: var(--bg-pale); }
.rx-suggest li button .rx-suggest-label { flex: 1 1 8rem; min-width: 0; display: block; overflow-wrap: anywhere; }
.rx-suggest-label > span { display: block; }
.rx-suggest li button .rx-meta { display: block; white-space: normal; }
.rx-suggest li button .rx-chip { flex: 0 1 auto; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.rx-suggest-empty { padding: var(--space-4) 20px; color: var(--ink-soft); font-size: var(--fs-ui); }
.rx-suggest-empty a { color: var(--link); }

/* No-medication state: the tool's own question + its own scoped search box,
   the same .rx-search/.rx-search-wrap shell the hero uses. */
[data-noselection-panel] .rx-search-wrap { margin: var(--space-5) 0 0; }

/* Drug-scoped verdict panel: "How to apply" (secondary) sits beside "See the
   full result" (primary); wraps to its own line on narrow widths since both
   buttons already carry their own top margin via the section rhythm. */
[data-drug-verdict-panel] .rx-btn--secondary[hidden] { display: none; }

/* Income-check split: figure block */
.rx-income-figure { margin-bottom: var(--space-6); }
.rx-income-figure .rx-figure { font-size: 72px; line-height: 1; }
.rx-income-figure .rx-list-h { margin-top: 4px; }

/* Mini "if a program takes you" table rows, inside the card */
.rx-mini-list { list-style: none; margin: 0 0 var(--space-5); padding: 0; border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; overflow: hidden; }
.rx-mini-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 14px var(--space-5); border-bottom: 1px solid var(--line-soft); }
.rx-mini-list li:last-child { border-bottom: 0; }
.rx-mini-list .rx-mini-name { font-size: var(--fs-ui); font-weight: var(--fw-medium); color: var(--ink); }

/* Drug-scoped verdict panel: reuses the same .rx-mini-list shell as a <dl> (cost/limit
   facts instead of price rows), so a medication selection swaps content, not chrome. */
.rx-mini-list dt { font-size: var(--fs-ui); font-weight: var(--fw-medium); color: var(--ink); margin: 0; }
.rx-mini-list dd { font-size: var(--fs-ui); color: var(--ink-soft); margin: 0; }
.rx-mini-list > div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 14px var(--space-5); border-bottom: 1px solid var(--line-soft); }
.rx-mini-list > div:last-child { border-bottom: 0; }

/* Why band: feature list layout (text left already handled by rx-features; add icon-less spacing) */
.rx-features li .rx-list-h { margin-bottom: 4px; }

/* Most-searched (shared partials/popular-medications.blade.php): wrapped, not
   restyled here -- its own markup/classes are outside this page's file ownership
   (partials/** is off-limits per the rollout plan's per-lane file list). This band
   just gives it the section rhythm the rest of the page uses. */
.rx-popmeds-band { padding: var(--section-y) var(--section-x); }

/* Tile icons: simple inline line SVGs, currentColor, no extra color tokens */
.rx-tile svg { stroke: currentColor; fill: none; stroke-width: 1.6; }

/* "Not sure where you fit" entry paths: full-width row links, icon at left, no card frame */
.rx-fit-list { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: 2px; background: var(--line-soft); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.rx-fit-list li { background: transparent; }
.rx-fit-list a { display: flex; align-items: center; gap: var(--space-5); min-height: var(--tap); padding: var(--space-4) 4px; background: var(--bg-warm); color: var(--ink); text-decoration: none; font-size: var(--fs-ui); font-weight: var(--fw-medium); }
.rx-fit-list a:hover { color: var(--link); }
.rx-fit-list a:hover span { text-decoration: underline; }
.rx-fit-list svg { flex: none; width: 32px; height: 32px; stroke: currentColor; fill: none; stroke-width: 1.6; color: var(--primary); }

/* Most searched partial (coordinator, T-0627): rank column */
.popmeds-wrap .rx-cell-rank { width: 4ch; white-space: nowrap; color: var(--ink-soft); font-variant-numeric: tabular-nums; }

/* Most searched: compact three-column grid of names (owner audit, 2026-09-03) */
.popmeds-wrap .rx-popmeds-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
@media (min-width: 768px) { .popmeds-wrap .rx-popmeds-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.popmeds-wrap .popmed { display: flex; align-items: baseline; gap: 10px; min-height: 44px; border-bottom: 1px solid var(--line-soft); padding: 6px 0; }
.popmeds-wrap .popmed .rx-cell-rank { color: var(--ink-muted); font-variant-numeric: tabular-nums; min-width: 2ch; }
.popmeds-wrap .popmed a { color: var(--ink); text-decoration: none; font-weight: 600; }
.popmeds-wrap .popmed a:hover { color: var(--link); text-decoration: underline; }
.popmeds-wrap .popmed .rx-meta { color: var(--ink-soft); }

/* Refreshed homepage supplied in the September 4 design export. */
.rx-refresh-home { --section-x: clamp(20px, 4vw, 40px); }
.rx-refresh-home .rx-inner--wide { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 0; }
.rx-refresh-home .rx-section { padding: 96px var(--section-x); }
.rx-refresh-home .rx-kicker { display: block; font-size: 13px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; margin-bottom: 14px; }
.rx-refresh-home .rx-h { font-size: clamp(30px, 4.6vw, 44px); line-height: 1.14; font-weight: 700; margin-bottom: 20px; }
.rx-refresh-hero { padding: 80px var(--section-x) 0; }
.rx-refresh-hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(480px, 100%), 1fr)); gap: clamp(36px, 5vw, 64px); align-items: start; }
.rx-refresh-intro > .rx-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.rx-refresh-intro > .rx-kicker::before { content: ''; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--price-free); }
.rx-refresh-intro h1 { font-weight: 700; color: #00334D; font-size: clamp(40px, 7vw, 66px); line-height: 1.04; letter-spacing: -.015em; margin-bottom: 24px; text-wrap: balance; }
.rx-refresh-zero { color: var(--price-free); }
.rx-refresh-intro .rx-refresh-lede { font-size: 23px; line-height: 1.45; font-weight: 300; max-width: 34ch; margin-bottom: 28px; }
.rx-refresh-summary { font-size: 18px; line-height: 1.55; color: var(--ink-soft); max-width: 44ch; margin-bottom: 36px; }
.rx-refresh-trust { list-style: none; margin: 0; padding: 28px 0 0; border-top: 1px solid var(--line-soft); display: grid; gap: 14px; max-width: 44ch; font-size: 17px; }
.rx-refresh-trust li { display: flex; gap: 12px; align-items: baseline; }
.rx-refresh-trust li::before { content: '✓'; color: var(--price-free); font-weight: 700; flex: none; }
.rx-refresh-search-card { padding: 32px; background: var(--bg-pale); border: 1px solid #CFE9F8; border-radius: 22px; min-width: 0; }
.rx-refresh-search-card .rx-kicker { color: var(--link); margin-bottom: 6px; }
.rx-refresh-search-card h2 { font-weight: 700; font-size: 29px; line-height: 1.2; margin-bottom: 6px; }
.rx-refresh-search-card > p { font-size: 17px; color: var(--ink-soft); margin-bottom: 20px; }
.rx-refresh-search-card .rx-search { position: relative; display: flex; border: 1.5px solid #B5D9EC; border-radius: 12px; min-height: 60px; overflow: visible; background: white; }
.rx-refresh-search-card .rx-search input { min-width: 0; border: 0; padding: 0 16px; font-size: 19px; border-radius: 12px; background: white; }
.rx-refresh-search-card .rx-refresh-search-submit { background: transparent; color: var(--link); padding: 0 14px; border: 0; font-size: 16px; }
.rx-refresh-search-card .rx-refresh-search-submit:hover { background: var(--blue-100); }
.rx-refresh-quickpicks { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.rx-refresh-quickpicks a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid #B5D9EC; border-radius: 999px; background: white; font-size: 15px; text-decoration: none; }
.rx-refresh-quickpicks a:hover { border-color: var(--link); background: var(--blue-100); }
.rx-refresh-search-card .rx-refresh-search-note { margin: 22px 0 0; padding-top: 20px; border-top: 1px solid #D8ECF7; font-size: 15px; }
.rx-refresh-proof { padding-top: 72px; }
.rx-refresh-proof-grid { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.rx-refresh-proof-grid li { display: flex; flex-direction: column; gap: 16px; padding: 24px; border: 1px solid var(--line); border-radius: 16px; }
.rx-refresh-proof-grid h3 { font-size: 21px; margin: 0; }
.rx-refresh-proof-grid h3 a { color: var(--ink); text-decoration: none; }
.rx-refresh-proof-grid h3 a:hover { color: var(--link); text-decoration: underline; }
.rx-refresh-proof-grid .rx-meta { margin: 2px 0 0; font-size: 15px; }
.rx-refresh-proof-price { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.rx-refresh-proof-price s { font-size: 26px; font-weight: 500; color: var(--price-was); text-decoration-thickness: 2px; }
.rx-refresh-proof-price s span { font-size: 16px; }
.rx-refresh-proof-price > span { color: var(--ink-muted); }
.rx-refresh-proof-price strong { font-size: 38px; line-height: 1; color: var(--price-free); font-weight: 700; }
.rx-refresh-proof-date { display: flex; align-items: center; gap: 10px; margin: auto 0 0; font-size: 14px; color: var(--ink-soft); }
.rx-refresh-proof-date .rx-chip { font-size: 13px; border-radius: 6px; padding: 3px 10px; }
.rx-refresh-steps .rx-split { align-items: start; gap: clamp(36px, 5vw, 64px); }
.rx-refresh-steps .rx-lede { font-size: 20px; line-height: 1.5; margin: 0; font-weight: 300; color: var(--ink-soft); max-width: 34ch; }
.rx-refresh-steps ol { counter-reset: step; list-style: none; padding: 0; margin: 0; }
.rx-refresh-steps li { counter-increment: step; display: grid; grid-template-columns: 52px 1fr; gap: 24px; padding: 28px 0; border-bottom: 1px solid var(--line-soft); }
.rx-refresh-steps li:first-child { padding-top: 0; }
.rx-refresh-steps li:last-child { border: 0; padding-bottom: 0; }
.rx-refresh-steps li::before { content: counter(step); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--blue-100); color: var(--link); font-size: 20px; font-weight: 700; }
.rx-refresh-steps h3 { font-size: 22px; font-weight: 600; margin-bottom: 6px; }
.rx-refresh-steps li p { font-size: 17px; color: var(--ink-soft); margin: 0; }
.rx-refresh-check { background: var(--bg-warm); border-top: 1px solid var(--line-soft); }
.rx-refresh-check .rx-check-intro { margin-bottom: 44px; }
.rx-check-intro .rx-lede { max-width: 60ch; line-height: 1.5; margin: 0; font-size: 20px; font-weight: 300; color: var(--ink-soft); }
.rx-refresh-check .rx-income-layout { gap: 32px; }
.rx-refresh-check .rx-income-controls, .rx-refresh-check [data-drug-verdict-panel] { padding: 32px; border: 1px solid var(--line); border-radius: 20px; background: white; }
.rx-refresh-check [data-drug-verdict-panel] { background: #F4FAF6; border-color: #CFE6D8; }
.rx-refresh-check .rx-income-figure { padding-bottom: 24px; border-bottom: 1px solid var(--line-soft); margin-bottom: 30px; }
.rx-refresh-check .rx-income-figure .rx-h { font-size: 28px; }
.rx-refresh-check .rx-seg { border: 0; background: transparent; padding: 0; gap: 8px; border-radius: 0; display: flex; flex-wrap: wrap; }
.rx-refresh-check .rx-seg button { min-height: 44px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; font-size: 16px; background: white; }
.rx-refresh-check .rx-seg button[aria-pressed='true'] { background: var(--ink); color: white; border-color: var(--ink); }
.rx-refresh-check .rx-seg button[data-household] { min-width: 52px; border-radius: 12px; }
.rx-refresh-check .rx-mini-list { background: transparent; border: 0; border-radius: 0; }
.rx-refresh-check .rx-mini-list > div { padding: 13px 0; border-top: 1px solid #DFE7EB; border-bottom: 0; }
.rx-refresh-check .rx-mini-list dd { text-align: right; color: var(--ink); font-weight: 600; }
.rx-refresh-check .rx-mini-list dt { color: var(--ink-soft); font-weight: 400; }
.rx-refresh-check [hidden] { display: none !important; }
.rx-refresh-check [data-drug-verdict-text] { font-size: 26px; line-height: 1.28; font-weight: 600; }
.rx-refresh-why .rx-object { margin: 0; }
.rx-refresh-why .rx-object img { width: 100%; height: 520px; object-fit: cover; border-radius: 20px; }
.rx-refresh-why .rx-features { margin-block: 30px; }
.rx-refresh-callout { padding: 88px var(--section-x); }
.rx-refresh-callout h2 { font-size: clamp(32px, 5.5vw, 46px); max-width: 26ch; margin: 0 auto 20px; }
.rx-refresh-callout > p { max-width: 66ch; margin: 0 auto 32px; color: white; font-size: 19px; }
.rx-refresh-callout .rx-btn { background: white; color: var(--blue-800); }
.rx-refresh-prices .rx-tablewrap { border: 1px solid var(--line); border-radius: 16px; }
.rx-refresh-prices .rx-table th { background: var(--bg-warm); }
.rx-refresh-prices .rx-table { min-width: 760px; }
.rx-refresh-home .rx-cta-band { padding: 96px var(--section-x); }
.rx-refresh-home .rx-cta-band h2 { color: white; font-size: clamp(34px, 6vw, 52px); line-height: 1.1; margin-bottom: 16px; }
.rx-refresh-home .rx-cta-band > p { color: white; font-size: 20px; font-weight: 300; margin: 0 auto 34px; }
.rx-refresh-cta-actions { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }
.rx-refresh-cta-actions .rx-btn { min-height: 58px; padding-inline: 34px; }
.rx-refresh-cta-actions .rx-btn--on-dark { background: white; color: var(--blue-900); }

@media (max-width: 699px) {
 .rx-refresh-hero { padding-top: 44px; }
 .rx-refresh-home .rx-section, .rx-refresh-home .rx-cta-band, .rx-refresh-callout { padding-block: 56px; }
 .rx-refresh-proof { padding-top: 44px; }
 .rx-refresh-proof-grid { grid-template-columns: 1fr; }
 .rx-refresh-search-card, .rx-refresh-check .rx-income-controls, .rx-refresh-check [data-drug-verdict-panel] { padding: 24px; }
 .rx-refresh-why .rx-object img { height: 360px; }
 .rx-refresh-check .rx-mini-list > div { align-items: start; }
 .rx-refresh-check .rx-mini-list dt, .rx-refresh-check .rx-mini-list dd { font-size: 15px; }
}

.rx-refresh-home .rx-cta-band { background: var(--blue-900); color: white; text-align: center; }
.rx-refresh-why .rx-object { height: auto; min-height: 0; background: transparent; box-shadow: none; padding: 0; border: 0; }

/* Restore the refreshed export's full checker and explanatory composition. */
.rx-refresh-home .rx-example-label { margin: -20px auto 28px; color: #535C61; font-size: 15px; }
.rx-refresh-application-note { padding: 24px; background: #F7F5F3; border-radius: 14px; }
.rx-refresh-why .rx-features li { position: relative; padding-left: 36px; }
.rx-refresh-why .rx-features li::before { content: ''; position: absolute; top: 9px; left: 0; width: 10px; height: 10px; border-radius: 50%; background: #00AAFF; }
.rx-refresh-home .rx-refresh-callout { background: #1479AC; }
.rx-refresh-home .rx-refresh-callout h2 { color: #fff; }
.rx-refresh-home .rx-cta-band { background: #1A4160; }

/* Explicit export typography prevents shared legacy type rules from changing this page. */
.rx-refresh-home .rx-kicker { color: #535C61; }
.rx-refresh-search-card .rx-kicker { color: #0077B3; }
.rx-refresh-home .rx-h { letter-spacing: -.01em; }
.rx-refresh-steps .rx-split { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.rx-refresh-why .rx-split { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); gap: clamp(36px, 5vw, 64px); }
.rx-refresh-check .rx-income-layout { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 753px) { .rx-refresh-check .rx-income-layout { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rx-refresh-check .rx-income-layout { grid-template-areas: none; }
.rx-refresh-check .rx-income-controls, .rx-refresh-check .rx-income-layout > [data-verdict], .rx-refresh-check .rx-income-layout > .rx-meta { grid-area: auto; }
.rx-refresh-check .rx-income-layout > .rx-meta { grid-column: 1 / -1; }
.rx-refresh-check .rx-check-intro h2 { margin-bottom: 16px; }
.rx-refresh-check .rx-income-figure [data-drug-eyebrow] { font-size: 13px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: #6B7479; }
.rx-refresh-check .rx-income-figure [data-drug-sub] { font-size: 16px; color: #535C61; }
.rx-refresh-check .rx-field > span { font-size: 17px; font-weight: 600; margin-bottom: 12px; }
.rx-refresh-why .rx-lede { font-size: 23px; line-height: 1.42; font-weight: 300; max-width: 38ch; margin-bottom: 32px; }
.rx-refresh-why .rx-list-h { font-size: 19px; font-weight: 600; margin-bottom: 3px; }
.rx-refresh-why .rx-list-p { font-size: 17px; color: #535C61; }
.rx-refresh-application-note { font-size: 17px; line-height: 1.6; margin-bottom: 24px; max-width: 56ch; }
.rx-refresh-callout h2 { line-height: 1.18; font-weight: 700; letter-spacing: -.01em; }
.rx-refresh-callout > p { line-height: 1.55; }
.rx-refresh-callout .rx-btn { font-size: 17px; font-weight: 700; min-height: 52px; padding-inline: 28px; color: #1479AC; }
.rx-refresh-prices .rx-p { font-size: 18px; line-height: 1.55; color: #535C61; }
.rx-refresh-home .rx-cta-band h2 { font-weight: 700; letter-spacing: -.01em; }
.rx-refresh-home .rx-cta-band > p { max-width: 44ch; }
.rx-refresh-cta-actions .rx-btn { font-size: 19px; font-weight: 600; }
.rx-refresh-cta-actions .rx-btn--on-dark { font-weight: 700; }

/* Match the refreshed export's inherited body rhythm and responsive proof grid. */
.rx-refresh-home { font-size: 18px; line-height: 1.55; letter-spacing: .005em; }
.rx-refresh-proof-grid { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.rx-refresh-check .rx-mini-list dt { font-size: 16px; }
.rx-refresh-check .rx-mini-list dd { font-size: 17px; }