/* =====================================================================
   Waivr v8.20 "polish" (Web Designer). Load AFTER v819-cool.css:
   <link rel="stylesheet" href="v820-polish.css">
   CSS only. No copy, data, logic or HTML changes. Logo, Tip and בס״ד
   untouched. Home iPhone fit (390x664 "Check my bill" bottom <=620) kept.
   Scale: 4px spacing, radii 8/12/20, one content column (58rem = 928px).
   ===================================================================== */
:root{
  --content:58rem;                         /* the one content column below the header */
  --in:16px;                               /* inner inset of result-card blocks (mobile) */
  --safe-b:env(safe-area-inset-bottom,0px);
}
@media (min-width:641px){:root{--in:20px}}

/* ---------- 1. GLOBAL ---------- */
/* Keep focused fields and scrolled-to blocks clear of Safari's bottom bar */
html{scroll-padding-bottom:calc(88px + var(--safe-b))}
/* Headings: no one-word orphan lines; running text: no single-word last lines */
h2,h3,.zsum-h,.zmsg-h,.obadge,.hp-h,.explain-in h2,.bill h2{text-wrap:balance}
.hpage p,.hpage li,.zitem p,.zsum p,.bill-list li,.explain-in p,.foot p,.block-head p{text-wrap:pretty}

/* ---------- 2. HOME: Planning care "Check" button was invisible ----------
   v819's .btn2{background:#fff} beat .zipgo, so the button rendered white text
   on white until hovered. Restore the slate primary fill. */
.btn2.zipgo{background:var(--accent);border-color:var(--accent);color:#fff}
.btn2.zipgo:hover,.btn2.zipgo:active{background:var(--accent-h);border-color:var(--accent-h);color:#fff}

/* ---------- 3. HOME desktop: shorter form, one column width ---------- */
@media (min-width:901px){
  /* form uses the same 928px column as results, explainer and footer */
  .page-zip .checkcard{max-width:var(--content)}
  /* "Who counts" + "See the income limits" share one row instead of two
     stacked 14px links held in place by negative margins */
  body.page-zip .hero-form{grid-template-areas:"h s i" "hh lm lm" "st st st" "go go go"!important;row-gap:var(--s4)!important}
  body.page-zip .hero-form>details.f-hh.f-hh.field.field,
  body.page-zip .hero-form>.f-lm.field.field{margin-top:0!important;align-self:start}
  body.page-zip .hero-form>.f-lm.field.field{padding-left:var(--s4)}
  body.page-zip .f-lm .lim-link,body.page-zip .f-hh>summary{min-height:40px;display:inline-flex;align-items:center}
  /* insurance choices were 70px tall; 48px matches the other controls */
  body.page-zip .hero-form .radios label{min-height:48px!important;padding:var(--s2) var(--s4)!important}
  /* the 44px-tall radio input inflated the card; the whole 48px label is the tap target */
  body.page-zip .hero-form .radios input[type=radio]{height:20px!important;min-height:0!important;margin-top:0!important;margin-bottom:0!important}
}

/* ---------- 4. HOME: vertical rhythm below the hero ----------
   Section gaps were 64 / 16 / 24 / 64. Now one section gap (48 mobile,
   64 desktop) and one card gap (24) between the two stacked info cards. */
.explain-wrap{margin-top:var(--s9)}
.bill-wrap{margin-top:var(--s6)}
.zlink{margin-top:var(--s6);margin-bottom:var(--s9)}
@media (min-width:768px){.explain-wrap{margin-top:var(--s10)}.zlink{margin-bottom:var(--s10)}}
/* the explainer, bill notes, link and footer use the same column as results */
@media (min-width:901px){
  .explain-wrap,.bill-wrap,.zlink,.foot>.wrap{max-width:calc(var(--content) + 2 * var(--pad))}
}

/* ---------- 5. "HOW THIS WORKS" panel ----------
   On phones the chevron dropped onto its own line under the subtitle.
   Title and subtitle now stack in one column with the chevron centred right. */
@media (max-width:767px){
  .explain>summary{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--s4);row-gap:var(--s1);align-items:center}
  .explain>summary>span{grid-column:1}
  .explain>summary::before{grid-column:2;grid-row:1 / span 2;margin:0;align-self:center}
}

/* ---------- 6. RESULT PAGE: header ---------- */
/* heading was weight 500 (thinner than every other heading) and broke
   "Cedars-/Sinai"; balance keeps the hospital name together */
.rhead .rhead-h{font-weight:700;letter-spacing:-.02em;text-wrap:pretty;max-width:none}
/* (balance split the name at its hyphen; pretty fills line 1 and only avoids
   a one-word last line. max-width:none lets the title use the full column on
   desktop, with the three links on their own row below, same as mobile.) */
/* link text sat 4px right of the heading; align the left edge */
.rhead .linkbtn{padding-left:0;padding-right:0}

/* ---------- 7. RESULT PAGE: one left edge inside the card ----------
   Hospital name, city line and ownership sat 8px left of the verdict text
   and section labels above and below. All blocks now share --in. */
.hpage>.hp-h,.hpage>.hp-loc,.hpage>.zown{margin-left:var(--in);margin-right:var(--in)}
.hpage>.hp-sec{padding-left:var(--in);padding-right:var(--in)}
.hpage>.hp-sec.hp-act{padding-top:var(--in);padding-bottom:var(--in)}
.hpage>.hp-out{padding-left:var(--in);padding-right:var(--in)}

/* ---------- 8. RESULT PAGE: readable type and measure ---------- */
/* income lines, policy link and guide notes were 14-15px: 16px minimum */
.hpage .dl-line,.hpage .dl-pct,.hpage .read-policy,.hpage .ag-note,.zitem .read-policy{font-size:1rem}
.hpage .dl-line{line-height:1.45}
/* about 70 characters per line on desktop */
.hpage p,.hpage li,.zsum p{max-width:70ch}

/* ---------- 9. RESULT PAGE desktop: no 880px-wide pill buttons ----------
   Apply, Call and the "what to say" note form one 34rem column. */
@media (min-width:641px){
  .hpage .hp-act .acts{max-width:34rem}
}

/* ---------- 10. HOSPITALS PAGE ---------- */
/* mobile: finder card bled to 8px while all other text sits at 16px */
@media (max-width:640px){.finder{margin-left:0;margin-right:0}}
/* desktop: the right-hand cluster wrapped differently on every row.
   Now a fixed 2x2: tier + policy name | policy link + "What to do next". */
@media (min-width:901px){
  .hright{display:grid;grid-template-columns:minmax(0,13rem) max-content;grid-template-areas:"tag read" "sys btn";column-gap:var(--s6);row-gap:var(--s1);align-items:center;justify-items:start;max-width:none}
  .hright>.tag{grid-area:tag}
  .hright>.meta{grid-area:sys}
  .hright>.read-policy{grid-area:read;justify-self:end}
  .hright>.nx-open{grid-area:btn;justify-self:end}
}

/* ---------- 11. SAFE AREA: nothing under Safari's bottom bar ---------- */
/* last thing on every page clears the home indicator / toolbar */
.foot{padding-bottom:calc(var(--s9) + var(--safe-b))}
/* "What to do next" dialog: actions stay above the toolbar */
.next{max-height:calc(100dvh - 16px - var(--safe-b))}
.next .nx-actions{padding-bottom:calc(var(--s4) + var(--safe-b))}
/* hospital suggestions never run under the bar or the keyboard edge */
.hlistbox{max-height:min(60dvh,420px)}

/* ---------- 12. "CHECK POLICY" state: no cream ----------
   The badge fill was #FBF4E6 (cream). Keep the amber ink and dashed amber
   line that signal "check", on a cool near-white fill instead. */
:root{--check-bg:#F3F5F9}