/* Static pages: For clinics, How we review, Hospital bills, What changed, and the print sheets.
   Loaded after style.css, polish.css, and navigation.css. Header styling belongs to navigation.css;
   nothing here targets .site-header. Sticky offsets read --header-height, which each page measures
   for itself (0px when the header scrolls away). */

/* One offset for every in-page link: the sticky header plus a little air. Do not add scroll-margin-top to
   sections as well; the two add up and the heading lands far below the top. */
html:has(.page) { scroll-padding-top: calc(var(--header-height, 0px) + 16px); }
/* /hospital-help/ also has a sticky filter bar, and its height changes with the width. hospital-help.js writes it
   to --filter-bar-height. Anchors and focused links then land below the bar and not under it. */
html:has(#fap-filters:not([hidden])) { scroll-padding-top: calc(var(--header-height, 0px) + var(--filter-bar-height, 0px) + 16px); }

.page { max-width: 1320px; margin: 0 auto; padding: 32px 40px 56px; }
.page-head { max-width: 52rem; margin: 0 0 28px; }
.page-head h1 { margin: 6px 0 14px; font-size: clamp(2.1rem, 5vw, 3.3rem); letter-spacing: -1px; }
.page-head .lead { max-width: 40rem; }
.eyebrow { margin: 0; font-size: .875rem; font-weight: 700; color: var(--c-42546a, #42546a); }

/* Long-page layout (design §3): TOC on the left from 1000px, a collapsed list above the text below. */
.page-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.page-body { min-width: 0; max-width: 52rem; }
.page-toc { min-width: 0; }
.toc-sticky { display: none; }
.toc-title { margin: 0 0 8px; font: 700 .875rem/1.4 Arial, sans-serif; color: var(--c-42546a, #42546a); }
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-list a { display: flex; align-items: center; min-height: 44px; padding: 4px 10px; border-radius: 8px; text-decoration: none; font-weight: 700; font-size: .9375rem; line-height: 1.3; }
.toc-fold { border: 1px solid var(--surface-border, var(--c-d8dcd9, #d8dcd9)); border-radius: var(--control-radius, 10px); background: var(--c-ffffff, #fff); }
.toc-fold summary { display: flex; align-items: center; min-height: 48px; padding: 0 16px; font-weight: 700; cursor: pointer; }
.toc-fold nav { padding: 0 8px 8px; }
@media (hover: hover) { .toc-list a:hover { background: var(--c-f4ebd0, #f4ebd0); } }
@media (min-width: 1000px) {
  .page-layout { grid-template-columns: 15rem minmax(0, 1fr); gap: 48px; }
  .page-toc { position: sticky; top: calc(var(--header-height, 0px) + 16px); align-self: start; max-height: calc(100vh - var(--header-height, 0px) - 32px); max-height: calc(100dvh - var(--header-height, 0px) - 32px); overflow-y: auto; overscroll-behavior: contain; }
  .toc-sticky { display: block; }
  .toc-fold { display: none; }
}

.page-section { margin: 0 0 40px; }
.page-section > h2 { margin: 0 0 14px; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.3px; }
.page-section h3 { margin: 24px 0 8px; font-size: 1.25rem; }
.page-section :is(p, li, dd) { max-width: 46rem; }
.page-section p { margin: 10px 0; }
.page-section :is(ul, ol) { margin: 10px 0; padding-left: 1.4rem; }
.page-section li { margin: 6px 0; }
.page-section a { overflow-wrap: anywhere; }

.callout { margin: 16px 0; padding: 14px 18px; border: 1px solid var(--surface-border, var(--c-d8dcd9, #d8dcd9)); border-left: 5px solid var(--ink); border-radius: 9px; background: var(--c-ffffff, #fff); }
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }

.flow { counter-reset: step; list-style: none; display: grid; gap: 12px; margin: 16px 0; padding: 0; }
.page-section .flow { padding-left: 0; }
.flow > li { counter-increment: step; position: relative; max-width: 46rem; min-height: 56px; margin: 0; padding: 14px 16px 14px 62px; border: 1px solid var(--surface-border, var(--c-d8dcd9, #d8dcd9)); border-radius: 12px; background: var(--c-ffffff, #fff); }
.flow > li::before { content: counter(step); position: absolute; left: 16px; top: 14px; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--paper); font: 700 1rem/32px Arial, sans-serif; text-align: center; }

.link-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 16px; margin: 16px 0; }
.link-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px; border: 1px solid var(--surface-border, var(--c-d8dcd9, #d8dcd9)); border-radius: 12px; background: var(--c-ffffff, #fff); }
.link-card h3 { margin: 0; font-size: 1.25rem; }
.link-card p { margin: 0; }
.link-card .action { margin-top: auto; }
.action-secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink); }

.empty-state { margin: 16px 0; padding: 20px 22px; border: 1px dashed var(--control-border, var(--c-8996a5, #8996a5)); border-radius: 12px; background: var(--c-ffffff, #fff); }
.empty-state > :first-child { margin-top: 0; }
.empty-state > :last-child { margin-bottom: 0; }

/* What changed */
.change-entry { max-width: 46rem; padding: 24px 0; border-top: 1px solid var(--surface-border, var(--c-d8dcd9, #d8dcd9)); }
.change-entry:first-of-type { border-top: 0; padding-top: 0; }
.change-entry h2 { margin: 0 0 4px; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.change-month { margin: 0 0 12px; font-size: .9375rem; font-weight: 700; color: var(--c-42546a, #42546a); }
.change-entry ul { margin: 0; padding-left: 1.4rem; }
.change-entry li { margin: 8px 0; }

/* Hospital bills: sticky filter bar and one card per hospital system */
.filter-bar { position: sticky; top: var(--header-height, 0px); z-index: var(--z-toolbar, 10); display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; margin: 0 0 20px; padding: 12px 0; background: var(--paper); border-bottom: 1px solid var(--surface-border, var(--c-d8dcd9, #d8dcd9)); }
.filter-field { flex: 1 1 9rem; min-width: 0; max-width: 20rem; }
.filter-field label { display: block; margin: 0 0 4px; font-size: .875rem; font-weight: 700; }
.filter-field .filter-hint { font-weight: 400; color: var(--c-42546a, #42546a); }
.filter-bar :is(select, input) { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; min-height: 48px; padding: 10px 14px; border: 1px solid var(--control-border, var(--c-8996a5, #8996a5)); border-radius: var(--control-radius, 10px); background-color: var(--c-ffffff, #fff); color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.3; }
.filter-bar select { padding-right: 44px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3 6l5 5 5-5' fill='none' stroke='%23192d49' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px; }
.filter-status { flex: 1 1 100%; margin: 0; font-size: .875rem; }
.filter-message { margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--c-d8b84a, #d8b84a); border-radius: 9px; background: var(--c-fff1c7, #fff1c7); }

.fap-list { display: grid; gap: 20px; }
.fap-card { padding: 20px 22px; border: 1px solid var(--surface-border, var(--c-d8dcd9, #d8dcd9)); border-radius: 12px; background: var(--c-ffffff, #fff); }
.fap-help { margin: 0 0 16px; }
.fap-card h3 { margin: 0 0 8px; font-size: 1.5rem; letter-spacing: -.3px; }
.fap-card p { margin: 8px 0; }
.fap-card a { overflow-wrap: anywhere; }
.fap-limits { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 10px; margin: 14px 0; }
.fap-limits > div { padding: 10px 14px; border: 1px solid var(--surface-border, var(--c-d8dcd9, #d8dcd9)); border-radius: 9px; background: var(--c-fffdf5, #fffdf5); }
.fap-limits dt { margin: 0; font-size: .875rem; font-weight: 700; color: var(--c-42546a, #42546a); }
.fap-limits dd { margin: 2px 0 0; font-size: 1.125rem; font-weight: 700; }
.fap-notes { margin: 12px 0; padding-left: 1.2rem; }
.fap-notes li { margin: 6px 0; }
.fap-links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.fap-links a { display: inline-flex; align-items: center; min-height: 44px; }
.fap-meta { font-size: .875rem; color: var(--c-42546a, #42546a); }
/* One filled action per card ("Start a handout with this"); the phone is a second, outlined .action link. */
.fap-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.fap-actions .action { flex: 1 1 14rem; margin: 0; } /* equal widths; on a phone each one fills its own row */
.fap-badge { display: block; margin: 12px 0 0; padding: 10px 14px; border: 1px solid; border-radius: 9px; }
.fap-badge[hidden] { display: none; }
.fap-badge strong { display: block; font-size: 1rem; }
.fap-badge span { display: block; margin-top: 2px; font-size: .875rem; }
.fap-badge[data-status="free"] { background: var(--c-e3f2e1, #e3f2e1); border-color: var(--c-8fbf8a, #8fbf8a); }
.fap-badge[data-status="discount"] { background: var(--c-e2effa, #e2effa); border-color: var(--c-8fb7d6, #8fb7d6); }
.fap-badge[data-status="over"] { background: var(--c-f1f1ee, #f1f1ee); border-color: var(--c-b9bdb8, #b9bdb8); }
.fap-badge[data-status="check"] { background: var(--c-fff1c7, #fff1c7); border-color: var(--c-d8b84a, #d8b84a); }

/* Print sheets (/print/poster/ and /print/tear-off/). The sheet is 85 units by 110 units, and --s is one
   unit. On screen a unit is 1/85 of the preview's width, so the preview is a scaled copy of the page. In
   print a unit is 0.1in, so the sheet is exactly 8.5in by 11in. It is ink on white: nothing depends on
   background colors, which printers leave out by default. */
.print-page { max-width: 1320px; margin: 0 auto; padding: 32px 40px 56px; }
.print-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
.print-controls { min-width: 0; max-width: 40rem; }
.print-controls h1 { margin: 6px 0 14px; font-size: clamp(2rem, 5vw, 3rem); line-height: 1.1; letter-spacing: -1px; }
.print-controls h2 { margin: 28px 0 8px; font-size: 1.375rem; }
.print-controls .lead { margin: 0 0 20px; }
.print-controls .eyebrow a { display: inline-flex; align-items: center; min-height: 44px; }
.print-tools { display: grid; gap: 18px; margin: 0 0 8px; padding: 18px; border: 1px solid var(--surface-border, var(--c-d8dcd9, #d8dcd9)); border-radius: 12px; background: var(--c-ffffff, #fff); }
.print-tools[hidden] { display: none; }
.print-field { min-width: 0; }
.print-label { display: block; margin: 0 0 6px; font-size: .875rem; font-weight: 700; }
.print-optional { font-weight: 400; color: var(--c-42546a, #42546a); }
.print-hint { margin: 6px 0 0; font-size: .875rem; color: var(--c-42546a, #42546a); }
.print-field input { display: block; width: 100%; max-width: 24rem; min-height: 48px; padding: 10px 14px; border: 1px solid var(--control-border, var(--c-8996a5, #8996a5)); border-radius: var(--control-radius, 10px); background: var(--c-ffffff, #fff); color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.3; }
.print-tools .action { justify-self: start; min-height: 48px; cursor: pointer; }
.seg { display: inline-flex; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; background: var(--c-ffffff, #fff); }
.seg button { min-width: 6.5rem; min-height: 44px; padding: 0 20px; border: 0; background: transparent; color: var(--ink); font: 700 1rem Arial, Helvetica, sans-serif; cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.seg button:focus-visible { outline-offset: -6px; }
.print-steps { margin: 8px 0 16px; padding-left: 1.4rem; }
.print-steps li { margin: 8px 0; }
.print-steps li[hidden] { display: none; }
.print-preview { min-width: 0; }
.print-caption { margin: 0 0 8px; font-size: .875rem; color: var(--c-42546a, #42546a); }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.sheet-frame { container-type: inline-size; width: 100%; max-width: 36rem; background: var(--c-ffffff, #fff); border: 1px solid var(--c-cfc6a8, #cfc6a8); box-shadow: 0 3px 14px var(--s-192d4933, rgba(25, 45, 73, .2)); overflow: hidden; }
.sheet { --s: 7px; display: flex; flex-direction: column; align-items: center; width: calc(var(--s) * 85); height: calc(var(--s) * 110); padding: calc(var(--s) * 4.5) calc(var(--s) * 5); overflow: hidden; background: var(--c-ffffff, #fff); color: var(--ink); font: 400 calc(var(--s) * 3)/1.2 Arial, Helvetica, sans-serif; text-align: center; }
@supports (width: 1cqw) { .sheet { --s: calc(100cqw / 85); } }
.sheet[data-lang="es"] [lang="en"], .sheet:not([data-lang="es"]) [lang="es"] { display: none; }
:where(.sheet) p { margin: 0; }
.sheet-headline { font-size: calc(var(--s) * 5.4); font-weight: 700; line-height: 1.1; text-wrap: balance; }
.sheet-sub { margin-top: calc(var(--s) * 1.4); font-size: calc(var(--s) * 3); text-wrap: balance; }
.sheet-scan { font-size: calc(var(--s) * 3); font-weight: 700; text-wrap: balance; }
.sheet-small { margin-top: calc(var(--s) * .4); font-size: calc(var(--s) * 1.8); }
.sheet-draft { margin-top: calc(var(--s) * .4); font-size: calc(var(--s) * 1.6); }

/* Poster */
.sheet-qr-wrap { flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; width: 100%; margin: calc(var(--s) * 2.4) 0; }
.sheet-qr { display: block; height: 100%; max-width: 100%; max-height: calc(var(--s) * 60); aspect-ratio: 1; }
.clinic-line { width: 100%; margin-top: calc(var(--s) * 2); padding-top: calc(var(--s) * 1.6); border-top: calc(var(--s) * .15) solid var(--ink); }
.clinic-ask { display: block; font-size: calc(var(--s) * 2.4); }
.clinic-name { display: block; margin-top: calc(var(--s) * .4); font-size: calc(var(--s) * 3.2); line-height: 1.2; overflow-wrap: anywhere; }
.sheet-foot { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--s) * 3); width: 100%; margin-top: calc(var(--s) * 2.4); text-align: right; }
.sheet-logo { display: block; width: auto; height: calc(var(--s) * 8); }
.sheet-url { font-size: calc(var(--s) * 3.4); font-weight: 700; }

/* Tear-off sheet */
.sheet-tear { padding: calc(var(--s) * 5) calc(var(--s) * 4) 0; }
.sheet-tear .sheet-headline { font-size: calc(var(--s) * 5.6); }
.sheet-mid { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--s) * 2); width: 100%; padding: 0 calc(var(--s) * 2); }
.sheet-tear .sheet-scan { font-size: calc(var(--s) * 3.4); }
.sheet-about { font-size: calc(var(--s) * 2.5); text-wrap: balance; }
.sheet-mid .sheet-small, .sheet-mid .sheet-draft { margin-top: 0; }
.sheet-pointer { flex: none; width: 0; height: 0; margin: calc(var(--s) * .4) 0 calc(var(--s) * 1.4); border-right: calc(var(--s) * 2.6) solid transparent; border-left: calc(var(--s) * 2.6) solid transparent; border-top: calc(var(--s) * 2.8) solid var(--ink); }
.strips { display: flex; flex: none; width: 100%; height: calc(var(--s) * 41); border-top: calc(var(--s) * .25) dashed var(--ink); }
.strip { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; padding: calc(var(--s) * 1) calc(var(--s) * .4) 0; border-left: calc(var(--s) * .25) dashed var(--ink); }
.strip:last-child { border-right: calc(var(--s) * .25) dashed var(--ink); }
.strip-qr { flex: none; display: block; width: 100%; height: auto; aspect-ratio: 1; }
.strip-text { flex: none; height: calc(var(--s) * 24); margin-top: calc(var(--s) * 1.2); writing-mode: vertical-rl; transform: rotate(180deg); font-size: calc(var(--s) * 1.6); font-weight: 700; line-height: 1.25; text-align: start; text-wrap: balance; }

@media (min-width: 1000px) {
  .print-layout { grid-template-columns: minmax(0, 26rem) minmax(0, 36rem); gap: 56px; }
}

@media (max-width: 620px) {
  .page { padding: 24px 20px 40px; }
  .print-page { padding: 24px 20px 40px; }
  .print-tools { padding: 14px; }
  .filter-field { max-width: none; }
  .fap-card { padding: 16px; }
  .flow > li { padding-left: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .page, .page * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Print: only the text of the page. Hiding the header in print is navigation.css's job; the two print
   sheets hide it themselves in their own <style>. On a print sheet the page is exactly the sheet:
   8.5in by 11in, one unit (--s) is 0.1in, and the controls and the preview caption do not print. */
/* Motion (website/motion.js): while html.motion is on, the page title block waits hidden for its entrance. */
@media screen and (prefers-reduced-motion: no-preference) { .motion .page > .page-head > * { opacity: 0; } }
@media print {
  .page-toc, .filter-bar { display: none !important; }
  .page { padding: 0; }
  .page-layout { display: block; }
  .page-section, .fap-card, .change-entry, .link-card { break-inside: avoid; }

  .print-controls, .print-caption { display: none !important; }
  .print-page { max-width: none; margin: 0; padding: 0; }
  .print-layout, .print-preview { display: block; }
  .sheet-frame { container-type: normal; width: 8.5in; max-width: none; height: 11in; margin: 0; border: 0; box-shadow: none; overflow: hidden; break-inside: avoid; }
  .sheet { --s: .1in; }
  .sheet a::after { content: none !important; }
  .sheet-qr, .strip-qr, .sheet-logo { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* Same rule as navigation.css for the static pages. It must outrank the #fap-filters padding rule above. */
html:has(:is(.site-header, #fap-filters) :focus) { scroll-padding-top: 0; }