/* Page-scoped layout CSS for the medication detail templates (T-0627 wave 3).
   Class/token swap only, per the design system's rules that always apply --
   layout rules on top of components.css, no new colors, fonts, or sizes
   beyond what the tokens already define. */

.rx-medication-page .rx-header-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin: 0 0 var(--space-6); }
.rx-medication-page .rx-answer-note { font-size: var(--fs-small); color: var(--ink-soft); margin: 0; }
.rx-medication-page .rx-answer-lede { margin: 0; }
.rx-medication-page .rx-answer-price-block { display: grid; gap: var(--space-3); }
.rx-medication-page .rx-answer-actions { display: grid; gap: var(--space-4); }
.rx-medication-page .rx-answer-facts-full { grid-column: 1 / -1; margin-top: var(--space-5); }
.rx-medication-page .rx-program-detail { border-top: 1px solid var(--line-soft); padding-top: var(--space-4); margin-top: var(--space-4); }
.rx-medication-page .rx-program-detail summary { list-style: none; cursor: pointer; color: var(--link); font-size: var(--fs-small); font-weight: var(--fw-medium); }
.rx-medication-page .rx-program-detail summary::-webkit-details-marker { display: none; }
.rx-medication-page .rx-program-detail summary::before { content: "+ "; color: var(--primary); }
.rx-medication-page .rx-program-detail[open] summary::before { content: "\2212 "; }
.rx-medication-page .rx-related-links { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: var(--space-5) 0 var(--space-6); padding: 0; }
.rx-medication-page .rx-related-links a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 18px; border: 1px solid var(--line); border-radius: var(--radius-pill); color: var(--ink); text-decoration: none; font-size: var(--fs-ui); }
.rx-medication-page .rx-related-links a:hover { border-color: var(--primary); color: var(--link); }
.rx-medication-page .rx-cta .rx-btn { margin-top: var(--space-5); }
.rx-medication-page .rx-options-empty { border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; padding: var(--space-6); display: grid; gap: var(--space-3); }
.rx-medication-page .rx-options-empty p { margin: 0; }
.rx-medication-page .rx-options-empty p a { color: var(--link); text-decoration: underline; text-underline-offset: 0.16em; }
.rx-medication-page .rx-figure-pending { text-decoration: none; color: var(--status-checking-fg); }
.rx-medication-page .rx-figure .rx-chip--checking.rx-chip--lg { margin-left: 6px; vertical-align: middle; }
.rx-medication-page .rx-facts dd .rx-chip--checking:not(.rx-chip--lg) { margin-left: 4px; min-height: 26px; font-size: 12px; }
@media (min-width: 768px) { .rx-medication-page .rx-answer-price-block { grid-template-columns: 1fr; } }

/* Readability correction (HeroReadabilityAndFooterTest lineage): the display
   face at long-sentence sizes needs loosened tracking + explicit word-spacing
   or words/letters run together. Applied to .rx-answer-claim, this system's
   equivalent of the old .answer-lede -- components.css already sets
   font-family/font-size/line-height/color/margin/max-width on it, this file
   only adds the two readability properties on top, page-scoped. */
.rx-medication-page .rx-answer-claim { letter-spacing: -.02em; word-spacing: .12em; }

/* Side rail: two shared partials (sidehelp, locale-notice) carry no rx-
   classes of their own and are out of this wave's file ownership, so they
   are re-skinned here, from the page CSS, using the design system's tokens
   rather than editing the partials themselves. */
.rx-medication-side { display: grid; gap: var(--space-5); margin: 0 auto var(--space-7); }
.rx-medication-side .sidehelp { border: 1px solid var(--line); border-radius: var(--radius-card); background: var(--bg-pale); padding: var(--space-6); }
.rx-medication-side .sidehelp h3 { margin: 0 0 var(--space-3); font-family: var(--font-display); font-size: 22px; }
.rx-medication-side .sidehelp p { margin: 0 0 var(--space-4); color: var(--ink-soft); }
.rx-medication-side .sidehelp .btn-gold { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h); padding: 14px 30px 16px; border-radius: var(--radius-pill); background: var(--primary); color: #fff; font-family: var(--font-sans); font-size: 18px; text-decoration: none; }
.rx-medication-side .sidehelp .sidelinks { display: grid; gap: 8px; margin-top: var(--space-4) !important; }
.rx-medication-side .sidehelp .sidelinks a { color: var(--link); font-size: var(--fs-small); text-decoration: none; }
.rx-medication-side .sidehelp .sidelinks a:hover { text-decoration: underline; }
.rx-medication-page .locale-notice { display: block; margin: 0 0 var(--space-5); padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-left: 4px solid var(--blue-500); border-radius: var(--radius-sm); background: #fff; font-size: var(--fs-small); color: var(--ink-soft); }
@media (min-width: 900px) { .rx-medication-side { grid-template-columns: 1fr 1fr; } }

/* Refreshed page composition from the supplied September design export. */

.rx-medication-page .rx-answer { background: #fff; border: 0; padding: 0; gap: clamp(28px, 5vw, 60px); align-items: start; }
.rx-medication-page .rx-answer-claim { font-size: clamp(26px, 3.4vw, 34px); line-height: 1.22; letter-spacing: -.01em; word-spacing: normal; font-weight: 700; }
.rx-medication-page .rx-answer-price-block { padding: clamp(24px, 3vw, 32px); background: var(--bg-pale); border: 1px solid #CFE9F8; border-radius: 20px; }
.rx-medication-page .rx-answer-facts-full { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.rx-medication-page .rx-answer-facts-full .rx-figure { font-size: clamp(24px, 3vw, 32px); }
.rx-medication-page .rx-header-meta { margin-bottom: 22px; }