/* DrugAlt Pro (docs/PRO.md): the pricing page, sign-in, the dashboard, and the two printouts. Same tokens as
   site.css (ink on white, hairlines, one radius family). The printouts are sized in points for paper and read in
   black and white; on screen they sit on a sheet at their printed size, shrunk to fit (web/js/pro.js). */

.pro-textbtn { min-height: 2.75rem; padding: 0; border: 0; background: none; color: var(--ink); font: 700 1rem/1.3 var(--sans); text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; }
.btn-quiet { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-quiet:hover { background: var(--soft); color: var(--ink); opacity: 1; }
.btn[disabled] { opacity: 0.4; cursor: not-allowed; }

/* ---------- the pricing page ----------
   What it is in one sentence, then the two plans on the first screen, then a real handout you can read in place. */
.pro-intro h1 { max-width: 44rem; }
.pro-intro .lede { max-width: 36rem; }
.pro-trust { margin: 0.75rem 0 0; font: 700 0.9375rem/1.4 var(--sans); color: var(--ink); }
body[data-pro="home"] main { padding-top: 1.5rem; }
body[data-pro="home"] main details { max-width: 44rem; }
#pricing-sec .note { max-width: 44rem; }

.pro-plans { display: grid; gap: 1rem; max-width: 52rem; }
@media (min-width: 40rem) { .pro-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pro-plan { display: flex; flex-direction: column; padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
@media (min-width: 40rem) { .pro-plan { padding: 1.5rem; } }
.pro-plan h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.625rem; margin: 0; font: 800 1.5rem/1.2 var(--display); }
.pro-plan-who { margin: 0.375rem 0 1rem; color: var(--muted); }
.pro-price { display: flex; align-items: baseline; gap: 0.5rem; margin: 0; }
.pro-amount { font: 800 2.75rem/1 var(--display); font-variant-numeric: lining-nums tabular-nums; }
.pro-per { color: var(--muted); }
.pro-plan-alt { margin: 0.375rem 0 1.25rem; font-size: 0.9375rem; color: var(--muted); }
.pro-plan .btn, .pro-plan-other { box-sizing: border-box; width: 100%; min-height: 3.5rem; margin-top: auto; }
.pro-plan-other { display: flex; align-items: center; margin-bottom: 0; font-size: 0.9375rem; color: var(--muted); }
.pro-plan-other a { font-weight: 700; }
/* A member's own plan (web/js/pro.js). */
.pro-plan.is-mine { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pro-mine { display: inline-flex; align-items: center; height: 1.5rem; padding: 0 0.5rem; border-radius: 0.375rem; background: var(--ink); color: var(--bg); font: 700 0.8125rem/1 var(--sans); }
/* A member's buttons wait until their plan is known (3s at most), so a "Choose" button never flashes for them. */
.pro-checking .pro-go { visibility: hidden; animation: pro-show 0s 3s forwards; }
@keyframes pro-show { to { visibility: visible; } }

/* The sample: at nearly its printed size on a computer, so it reads in place; reflowed to the screen on a phone. It
   shows its first part; the rest fades out under "See the whole page". */
.pro-sample { max-width: 52rem; min-width: 0; margin: 1.5rem 0 0; }
.pro-sample .paper-frame { max-height: 36rem; }
@media (max-width: 40rem) { .pro-sample .paper-frame { max-height: 30rem; } }
.pro-sample .paper-frame::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6rem; background: linear-gradient(transparent, var(--soft) 55%); pointer-events: none; }   /* solid behind the button */
.paper-frame.is-reflow > .paper { width: auto; min-height: 0; padding: 1.25rem 1rem 1.5rem; border-radius: 6px; }
.pro-more { max-width: 44rem; margin-top: 1rem; }
.pro-more p { margin: 0; color: var(--muted); }
.pro-more .pro-textbtn[disabled] { opacity: 0.5; cursor: progress; }

/* After you subscribe: three numbered steps in a row on a computer, stacked on a phone. */
main.wide > section > .pro-steps { max-width: 52rem; }
.pro-steps { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
@media (min-width: 48rem) { .pro-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.pro-steps li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 0 0.875rem; align-items: start; counter-increment: step; }
.pro-steps li::before { content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%;
  background: var(--ink); color: var(--bg); font: 800 1.0625rem/1 var(--display); }
.pro-steps b { padding-top: 0.375rem; color: var(--ink); }
.pro-steps span { color: var(--muted); }

/* ---------- subscribe: one plan, then sign in, then Stripe ---------- */
.pro-back { display: inline-flex; align-items: center; gap: 0.25rem; min-height: 3rem; margin: -0.75rem 0 0.25rem -0.25rem; color: var(--ink); font: 700 0.9375rem/1 var(--sans); text-decoration: none; }
.pro-back:hover { text-decoration: underline; }
.pro-back svg { width: 1.125rem; height: 1.125rem; }
body[data-pro="subscribe"] main { padding-top: 1rem; }
.pro-sub { display: flex; flex-direction: column; gap: 1.25rem; max-width: 30rem; }   /* a hidden part leaves no gap */
.pro-notice { margin: 0; padding: 0.875rem 1rem; border-radius: var(--r); background: var(--soft); line-height: 1.5; }
.pro-sub-plan { padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.pro-sub-billed { margin: 0.5rem 0 0; font-size: 0.9375rem; color: var(--muted); }
/* Monthly / Yearly: two links that look like the dashboard's switch. */
.pro-seg { display: flex; width: 100%; box-sizing: border-box; margin-bottom: 0.75rem; }
.seg a { display: inline-flex; flex: 1; align-items: center; justify-content: center; min-height: 3rem; border-radius: 999px; color: var(--muted); font: 700 0.9375rem/1 var(--sans); text-decoration: none; }
.seg a:hover { color: var(--ink); }
.seg a[aria-current="page"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--line); }
.seg a:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.pro-sub-step h2 { margin: 0 0 0.75rem; font-size: 1.25rem; }
.pro-sub-step > p { margin: 0; }
.pro-sub-step.is-later { color: var(--muted); }
.pro-sub-step > .pro-msg:not(:empty) { margin-top: 0.75rem; }
.pro-sub #clerk-sign-in { min-height: 24rem; }
.pro-sub-hint { margin: 0 0 1rem !important; color: var(--muted); }
.pro-sub-who { display: flex; align-items: flex-start; gap: 0.5rem; overflow-wrap: anywhere; }
.pro-sub-who svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; color: var(--ink); }
.pro-pay { box-sizing: border-box; width: 100%; min-height: 3.5rem; }
.pro-sub-step > .pro-sub-pay { margin-top: 0.75rem; }
.pro-sub-step.is-later > .pro-sub-pay { margin-top: 0; }
.pro-sub .note { margin-top: 1rem; }
.pro-sub .pro-card h2 { margin-bottom: 0.5rem; }
.pro-sub .pro-card p { margin: 0 0 1rem; }
.pro-sub .pro-card p:last-child { margin-bottom: 0; }
/* The sign-in and subscribe pages have the form on the page, so the header's "Sign in" link would be a second one. */
body[data-pro="login"] .acct-slot > .header-link, body[data-pro="subscribe"] .acct-slot > .header-link { display: none; }

/* ---------- sign in ---------- */
.pro-card { padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
@media (min-width: 40rem) { .pro-card { padding: 1.5rem; } }
.pro-card h2 { margin: 0 0 1rem; font-size: 1.375rem; }
.pro-login { max-width: 32rem; }
.pro-field > span { display: block; margin: 0 0 0.375rem; font: 700 0.9375rem/1.3 var(--sans); }
.pro-field input { box-sizing: border-box; width: 100%; min-height: 3rem; padding: 0 0.875rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--card); color: var(--ink); font: 400 1.0625rem var(--sans); }
.pro-field input:focus-visible, .pro-search input:focus-visible { outline: 3px solid color-mix(in srgb, var(--ink) 35%, transparent); outline-offset: 1px; border-color: var(--ink); }
.pro-msg { min-height: 1.5rem; margin: 0.75rem 0 0; font-size: 0.9375rem; line-height: 1.5; }
.pro-msg:empty { min-height: 0; margin: 0; }
.pro-msg.bad { color: var(--warn); font-weight: 700; }
.pro-msg a { font-weight: 700; }

/* ---------- the dashboard ----------
   Medicines on the left, the live printout on the right (it stays in view while you pick), clinic details under the
   list. On a phone: medicines, printout, details. */
.dash-head h1 { overflow-wrap: anywhere; }
.dash-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin: 0.75rem 0 0; }
.dash-chip { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2rem; padding: 0 0.75rem; border-radius: 999px; background: var(--soft);
  color: var(--ink); font: 700 0.9375rem/1 var(--sans); }
.dash-chip::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--line-strong); }
.dash-chip.is-on::before { background: var(--ink); }
.dash-status .pro-textbtn { min-height: 2rem; font-size: 0.9375rem; }

.pro-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin: 0 0 1.5rem; padding: 1rem 1.25rem;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--soft); }
.pro-banner p { margin: 0; max-width: 36rem; }
.pro-banner-plans { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pro-banner-plans .btn { min-height: 2.75rem; }

.dash-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) {
  .dash-grid { grid-template-columns: minmax(19rem, 23rem) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 1.5rem 2rem; align-items: start; }
  .dash-meds { grid-column: 1; grid-row: 1; }
  .dash-details { grid-column: 1; grid-row: 2; }
  .dash-main { grid-column: 2; grid-row: 1 / span 2; position: sticky; top: calc(var(--head-h) + 1rem); }   /* under the header */
}
.dash-panel { padding: 1.25rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); }
.dash-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 2.75rem; margin: -0.5rem 0 0.5rem; }
.dash-panel-head h2 { margin: 0; font-size: 1.25rem; }
.dash-count { min-width: 1.75rem; padding: 0.25rem 0.5rem; border-radius: 999px; background: var(--soft); font: 700 0.875rem/1 var(--sans); text-align: center; font-variant-numeric: tabular-nums; }
.dash-count:empty { display: none; }
.dash-sub { margin: -0.5rem 0 0.875rem; font-size: 0.9375rem; color: var(--muted); }

.pro-search { position: relative; }
.pro-search-icon { position: absolute; left: 0.875rem; top: 50%; width: 1.125rem; height: 1.125rem; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.pro-search input { box-sizing: border-box; width: 100%; min-height: 3rem; padding: 0 1rem 0 2.625rem; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--card); color: var(--ink); font: 400 1.0625rem var(--sans); }
.pro-search input::-webkit-search-cancel-button { display: none; }
.pro-suggest { position: absolute; z-index: 10; top: calc(100% + 0.375rem); left: 0; right: 0; margin: 0; padding: 0.25rem; list-style: none; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--card);
  box-shadow: var(--pop-shadow); }
.pro-suggest li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.5rem; min-height: 2.75rem; padding: 0.625rem 0.75rem; box-sizing: border-box; border-radius: 6px; cursor: pointer; }
.pro-suggest li[aria-selected="true"], .pro-suggest li:hover { background: var(--soft); }
.pro-med-name { font-weight: 700; }
.pro-med-gen { font-size: 0.9375rem; color: var(--muted); }
.pro-med-have { margin-left: auto; font-size: 0.8125rem; font-weight: 700; color: var(--muted); }
.pro-meds-tools { display: flex; align-items: center; gap: 0 1rem; margin: 0.75rem 0 0; }
.pro-meds-tools[hidden] { display: none; }
.pro-meds-tools span { margin-right: auto; font-size: 0.875rem; color: var(--muted); }
.pro-meds-tools .pro-textbtn { font-size: 0.875rem; }
.pro-meds { margin: 0.25rem -0.5rem 0; padding: 0; list-style: none; }
.pro-meds li { display: flex; align-items: center; border-radius: var(--r-sm); }
.pro-meds li:hover { background: var(--soft); }
.pro-meds label { display: flex; flex: 1; min-width: 0; align-items: center; gap: 0.75rem; min-height: 3rem; padding: 0.375rem 0.5rem; cursor: pointer; }
.pro-meds label > span:not(.pro-med-name):not(.pro-med-gen) { display: contents; }
.pro-meds .pro-med-gen { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pro-meds input[type="checkbox"] { flex: none; width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--ink); }
.pro-remove { flex: none; width: 2.75rem; height: 2.75rem; border: 0; border-radius: var(--r-sm); background: none; color: var(--muted); font-size: 1.375rem; line-height: 1; cursor: pointer; opacity: 0.55; }
.pro-meds li:hover .pro-remove, .pro-remove:focus-visible { opacity: 1; }
.pro-remove:hover { color: var(--ink); background: var(--card); }
.dash-empty { margin-top: 1rem; }
.dash-empty p { margin: 0 0 0.875rem; color: var(--muted); }
.dash-empty b { color: var(--ink); }
.dash-quick { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.dash-chip-btn { min-height: 2.5rem; padding: 0 0.875rem; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--card); color: var(--ink); font: 700 0.875rem/1 var(--sans); cursor: pointer; }
.dash-chip-btn:hover { border-color: var(--ink); background: var(--soft); }

.dash-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; }
.dash-segs { display: flex; flex-wrap: wrap; gap: 0.5rem; }   /* which printout, and its language */
.seg { display: inline-flex; padding: 0.25rem; border-radius: 999px; background: var(--soft); }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1.125rem; border-radius: 999px; color: var(--muted); font: 700 0.9375rem/1 var(--sans); cursor: pointer; white-space: nowrap; }
.seg input:checked + span { background: var(--card); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 1px var(--line); }
.seg input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 1px; }
.dash-print { gap: 0.625rem; min-height: 3rem; }
.dash-print svg { width: 1.25rem; height: 1.25rem; }
.dash-kind-note { margin: 0.75rem 0 0; font-size: 0.9375rem; color: var(--muted); }
.dash-main .pro-msg { margin-top: 0.5rem; }
.dash-paper { margin-top: 1rem; }
@media (min-width: 60rem) { .dash-paper { max-height: calc(100vh - var(--head-h) - 11rem); overflow: auto; } }
/* Phones: Print floats at the bottom once the real one is off screen (web/js/pro.js). */
.dash-fab { position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; display: flex; justify-content: center;
  padding: 0.75rem 1.25rem calc(0.875rem + env(safe-area-inset-bottom, 0px)); pointer-events: none;
  opacity: 0; transform: translateY(1.5rem); transition: opacity 0.2s, transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0.25s; visibility: hidden; }
.dash-fab.is-on { opacity: 1; transform: none; visibility: visible; }
.dash-fab .btn { gap: 0.625rem; min-height: 3.25rem; padding-inline: 1.5rem; border-radius: 999px; pointer-events: auto;
  box-shadow: 0 10px 24px -8px color-mix(in srgb, var(--ink) 45%, transparent), 0 2px 6px color-mix(in srgb, var(--ink) 18%, transparent); }
.dash-fab svg { width: 1.25rem; height: 1.25rem; }
body:has(.dash-fab.is-on) .site-footer { padding-bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px)); }   /* room to scroll the page's end out from under it */
@media (min-width: 60rem) { .dash-fab { display: none; } }
@media (max-width: 30rem) {
  .seg { display: flex; width: 100%; }
  .seg label { display: flex; flex: 1; }
  .seg span { flex: 1; justify-content: center; padding: 0 0.5rem; }   /* each half fills its side, short word or long */
  .dash-print { width: 100%; justify-content: center; }
}

.dash-summary p { margin: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.5; }
.dash-summary .dash-sum-org { color: var(--ink); font-weight: 700; font-size: 1rem; }
.dash-summary .dash-sum-note { margin-top: 0.375rem; }
.pro-field { display: block; margin: 0 0 0.875rem; }
.dash-form-actions { display: flex; align-items: center; gap: 1.25rem; margin-top: 0.25rem; }

/* ---------- a sheet of paper, on screen ---------- */
.paper-frame { overflow: hidden; padding: 1rem; border-radius: var(--r); background: var(--soft); }
/* On a phone a printout is shrunk past reading; this opens it full size (web/js/pro.js). */
.paper-frame { position: relative; }
.paper-read { display: inline-flex; position: absolute; z-index: 1; left: 50%; bottom: 1rem; translate: -50% 0; align-items: center; gap: 0.5rem; min-height: 2.75rem;
  padding: 0 1.125rem 0 1rem; border: 0; border-radius: 999px; background: var(--ink); color: var(--bg); font: 700 0.9375rem/1 var(--sans); white-space: nowrap; cursor: pointer;
  box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--ink) 50%, transparent); }
.paper-read svg { width: 1.0625rem; height: 1.0625rem; }
.paper-frame:has(.paper-read) .paper { cursor: zoom-in; }
.paper-viewer-body { flex: 1; min-height: 0; overflow: auto; padding: 0.75rem; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.paper-viewer-body .paper { margin: 0 auto; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
/* A phone: the printout reflows to the screen, so it reads top to bottom. */
.is-reflow .paper-viewer-body .paper { width: auto; min-height: 0; padding: 1.25rem 1rem 1.5rem; border-radius: 6px; }
.is-reflow .sheet-head { flex-wrap: wrap; gap: 6pt 12pt; }
.is-reflow .sheet-title { text-align: left; }
.is-reflow .sheet-blank { width: 7.5rem; }
.is-reflow .ph-body { grid-template-columns: minmax(0, 1fr) 0.85in; gap: 10pt; }
.is-reflow .qr-fig .qr { width: 0.8in; }
.is-reflow .st, .is-reflow .st tbody, .is-reflow .st tr, .is-reflow .st th, .is-reflow .st td { display: block; width: auto; }
.is-reflow .st thead, .is-reflow .st colgroup { display: none; }
.is-reflow .st tbody tr { padding: 8pt 0; border-bottom: 0.75pt solid #bbb; }
.is-reflow .st tbody th, .is-reflow .st td { padding: 0; border: 0; }
.is-reflow .st td { margin-top: 6pt; }
.is-reflow .st td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2pt; font: 700 8pt/1.3 var(--sans); color: #555; }
.is-reflow .st .st-qr .qr { margin-left: 0; }
.paper { box-sizing: border-box; width: 8.5in; min-height: 5in; margin: 0 auto; padding: 0.45in; background: #fff; color: #111;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.08); }
.paper-wide { width: 11in; }
.paper-empty { margin: 1in 0; color: #555; font: 400 14pt var(--sans); text-align: center; }

/* ---------- on a drug page, without a plan (web/js/pro-offer.js) ----------
   The handout in the full-screen viewer, and under it, always in view, what Pro costs and the way to the plans. The
   viewer is always dark (site.css), so these are its colors, not the page's. */
.pro-offer-foot { display: flex; flex: none; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem;
  padding: 0.875rem 1rem calc(0.875rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255, 255, 255, 0.08); }
.pro-offer-foot p { margin: 0; max-width: 40rem; font-size: 0.9375rem; line-height: 1.45; color: #c5cace; }
.pro-offer-foot .pro-offer-h { margin-bottom: 0.125rem; font: 800 1.125rem/1.25 var(--display); color: #f2f4f5; }
.pro-offer-go { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.5rem; border-radius: var(--r-sm);
  background: #f2f4f5; color: #0c0f12; font: 800 1.0625rem/1 var(--display); text-decoration: none; }
.pro-offer-go:hover { background: #fff; }
.pro-offer-go:focus-visible { outline: 3px solid #f2f4f5; outline-offset: 2px; }
@media (max-width: 40rem) { .pro-offer-go { width: 100%; } }

/* ---------- the printouts (screen preview and paper) ---------- */
.sheet { color: #111; font: 400 10.5pt/1.4 var(--sans); }
.sheet b { font-weight: 700; }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 0.3in; padding-bottom: 8pt; border-bottom: 2pt solid #111; }
.sheet-org { margin: 0; font: 800 17pt/1.15 var(--display); }
.sheet-reach { margin: 3pt 0 0; font-size: 9.5pt; color: #333; }
.sheet-title { text-align: right; }
.sheet-doc { margin: 0; font: 800 12pt/1.2 var(--display); }
.sheet-date, .sheet-for { margin: 3pt 0 0; font-size: 9.5pt; color: #333; }
.sheet-blank { display: inline-block; width: 2.1in; border-bottom: 1pt solid #111; vertical-align: -2pt; }
.sheet-note { margin: 8pt 0 0; font-weight: 700; }
.sheet-foot { margin-top: 10pt; padding-top: 6pt; border-top: 0.75pt solid #999; font-size: 8pt; line-height: 1.4; color: #333; }
.sheet-foot p { margin: 0; }
.sheet .qr { display: block; }
.sheet .qr svg { display: block; width: 100%; height: auto; }

/* Patient handout: one block per medicine; the QR codes in a column on the right. */
.ph-drug { padding: 10pt 0; border-bottom: 0.75pt solid #999; break-inside: avoid; }
.ph-drug:last-of-type { border-bottom: 0; }
.ph-drug h2 { margin: 0 0 4pt; font: 800 15pt/1.2 var(--display); }
.ph-drug h2 span { font: 400 11pt var(--sans); color: #333; }
.ph-body { display: grid; grid-template-columns: minmax(0, 1fr) 1.05in; gap: 0.2in; }
.ph-text h3 { margin: 7pt 0 1pt; font: 700 10.5pt/1.3 var(--sans); }
.ph-text h3:first-child { margin-top: 0; }
.ph-text p { margin: 1pt 0; font-size: 10.5pt; }
.ph-text ul { margin: 2pt 0 2pt 13pt; padding: 0; }
.ph-text li { margin: 1pt 0; }
.ph-say { margin-top: 7pt !important; padding: 5pt 7pt; border: 0.75pt solid #111; border-radius: 5pt; }
.ph-qrs { display: grid; align-content: start; gap: 8pt; }
.qr-fig { margin: 0; text-align: center; }
.qr-fig .qr { width: 0.95in; margin: 0 auto; }
.qr-fig figcaption { margin-top: 2pt; font-size: 7.5pt; line-height: 1.25; color: #333; }

/* Staff reference: one row per medicine, landscape; the header row repeats on each page. */
.st { width: 100%; margin-top: 8pt; border-collapse: collapse; table-layout: fixed; font-size: 9pt; line-height: 1.35; }
.st-c1 { width: 15%; } .st-c2 { width: 33%; } .st-c3 { width: 27%; } .st-c4 { width: 17%; } .st-c5 { width: 8%; }
.st thead { display: table-header-group; }
.st thead th { padding: 0 6pt 4pt 0; border-bottom: 1pt solid #111; font: 700 8.5pt/1.25 var(--sans); text-align: left; vertical-align: bottom; }
.st tbody tr { break-inside: avoid; }
.st tbody th, .st td { padding: 6pt 6pt 6pt 0; border-bottom: 0.75pt solid #bbb; text-align: left; vertical-align: top; }
.st tbody th b { display: block; font: 800 11pt/1.2 var(--display); }
.st tbody th span { display: block; color: #333; }
.st tbody th em { display: block; margin-top: 3pt; font-size: 8pt; font-style: normal; color: #333; }
.st ul { margin: 0; padding: 0; list-style: none; }
.st li { margin: 0 0 2pt; }
.st li i, .st td i { font-style: normal; color: #444; }
.st .st-cards { margin-top: 3pt; color: #222; }
.st .st-none { color: #444; }
.st .ndc { font: 500 8.5pt var(--mono, monospace); white-space: nowrap; }
.st-ndc { margin-top: 2pt !important; }
.st .st-qr { padding-right: 0; }
.st .st-qr .qr { width: 0.62in; margin-left: auto; }

/* ---------- printing: only the printout, at its real size ---------- */
@media print {
  body.pro-app .topbar, body.pro-app .site-header, body.pro-app .site-footer, body.pro-app #pro-banner, body.pro-app .dash-meds, body.pro-app .dash-details,
  body.pro-app .dash-toolbar, body.pro-app .dash-kind-note, body.pro-app .dash-main .pro-msg, body.pro-app #pro-out, body.pro-app .dash-fab { display: none !important; }
  body.pro-app main { max-width: none; padding: 0; margin: 0; }
  body.pro-app .dash-grid { display: block; }
  body.pro-app .dash-main { position: static; }
  body.pro-app .dash-paper { margin: 0; max-height: none; }
  body.pro-app .paper-frame { padding: 0; background: none; border-radius: 0; overflow: visible !important; }
  body.pro-app .paper { width: auto; min-height: 0; padding: 0; box-shadow: none; zoom: 1 !important; }
  .sheet { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}