/* ============================================================================
   PRICING PAGE — Direction A
   ============================================================================
   Phase 3a translation of pricing.jsx into vanilla CSS. All selectors prefixed
   `ps-pricing-*`. Reuses `.ps-page` / `.ps-eyebrow` / `.ps-nav` / `.ps-footer`
   / `.ps-tier-chip` / `.ps-home-cta-*` from the shared layer.
   ============================================================================ */

/* ─────────────────────────────────────────────────────────────────────────
   HERO (left-aligned, max 820px)
   ───────────────────────────────────────────────────────────────────────── */

.ps-pricing-hero {
    padding: 80px 48px 40px;
    background: var(--ps-bg);
}

.ps-pricing-hero-inner {
    max-width: 820px;
}

.ps-pricing-hero-title {
    font-family: var(--ps-font-display);
    font-size: clamp(48px, 8.5vw, 88px);
    letter-spacing: -0.032em;
    margin: 20px 0 0;
    font-weight: 400;
    line-height: 0.96;
    color: var(--ps-ink);
}

.ps-pricing-hero-title em {
    font-style: italic;
    color: var(--ps-green-deep);
}

.ps-pricing-hero-lede {
    font-size: 19px;
    line-height: 1.5;
    color: var(--ps-ink-muted);
    margin: 28px 0 0;
    max-width: 540px;
}

/* ─────────────────────────────────────────────────────────────────────────
   TIER TABLE
   ───────────────────────────────────────────────────────────────────────── */

.ps-pricing-tiers {
    padding: 40px 48px 80px;
    background: var(--ps-bg);
}

.ps-pricing-tier-card {
    background: var(--ps-card);
    border-radius: 24px;
    border: 1px solid var(--ps-line);
    overflow: hidden;
}

.ps-pricing-tier-head {
    padding: 24px 32px;
    border-bottom: 1px solid var(--ps-line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.ps-pricing-tier-title {
    font-family: var(--ps-font-display);
    /* Phase 2 demote: tier table is now reference, not feature.
       Round 4 cleanup: title 24px → 20px (~17% reduction) for further visual demote. */
    font-size: 20px;
    font-style: italic;
    letter-spacing: -0.014em;
    margin: 4px 0 0;
    font-weight: 400;
    color: var(--ps-ink);
}

.ps-pricing-tier-tagline {
    font-size: 12px;
    color: var(--ps-ink-muted);
    margin: 4px 0 0;
}

/* Phase 2 demote: tier-row prices from 26px → 22px (~15% reduction).
   Round 4 cleanup: further demote 22px → 19px (~14% additional reduction). */
.ps-pricing-tiers .ps-pricing-tier-price {
    font-size: 19px;
}

.ps-pricing-tier-row {
    display: grid;
    grid-template-columns: 200px 1fr repeat(3, 120px);
    padding: 20px 32px;
    border-bottom: 1px solid var(--ps-line);
    align-items: center;
    gap: 16px;
}

.ps-pricing-tier-row-last { border-bottom: none; }

.ps-pricing-tier-header {
    padding: 14px 32px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ps-ink-muted);
    background: var(--ps-bg);
}

.ps-pricing-tier-num { text-align: right; }

.ps-pricing-tier-desc {
    font-size: 15px;
    color: var(--ps-ink-muted);
    line-height: 1.5;
}

.ps-pricing-tier-price {
    font-family: var(--ps-font-display);
    font-size: 26px;
    letter-spacing: -0.018em;
    color: var(--ps-ink);
    text-align: right;
}

.ps-pricing-tier-price-best { color: var(--ps-green-deep); }

.ps-pricing-tier-notes {
    margin: 20px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--ps-ink-muted);
}

.ps-pricing-tier-notes li::before {
    content: "● ";
    margin-right: 4px;
}

/* ─────────────────────────────────────────────────────────────────────────
   FORMULARY BROWSER (search + filter + table)
   ───────────────────────────────────────────────────────────────────────── */

.ps-pricing-browser {
    padding: 40px 48px 96px;
    background: var(--ps-bg);
}

.ps-pricing-browser-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 32px;
    gap: 24px;
    flex-wrap: wrap;
}

.ps-pricing-browser-title {
    font-family: var(--ps-font-display);
    font-size: clamp(34px, 5vw, 52px);
    letter-spacing: -0.028em;
    color: var(--ps-ink);
    margin: 14px 0 0;
    font-weight: 400;
    line-height: 1;
}

.ps-pricing-browser-help {
    font-size: 13px;
    color: var(--ps-ink-muted);
    text-align: right;
    max-width: 280px;
    margin: 0;
}

.ps-pricing-browser-help a {
    color: var(--ps-green-deep);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Controls bar: search + supply toggle */
.ps-pricing-controls {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    margin-bottom: 24px;
    align-items: center;
}

/* Search bar (similar to homepage hero search but smaller) */
.ps-pricing-search {
    background: var(--ps-card);
    border: 1px solid var(--ps-line);
    border-radius: 999px;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.ps-pricing-search:focus-within {
    border-color: var(--ps-green);
    box-shadow: 0 8px 24px rgba(6, 135, 73, 0.10);
}

.ps-pricing-search > svg {
    color: var(--ps-ink-muted);
    flex-shrink: 0;
}

.ps-pricing-search input {
    border: none;
    outline: none;
    flex: 1;
    background: transparent;
    font-size: 15px;
    color: var(--ps-ink);
    font-family: var(--ps-font-body);
    min-height: 44px;
}

.ps-pricing-search input::placeholder { color: var(--ps-ink-muted); }

.ps-pricing-search-clear {
    background: none;
    border: none;
    color: var(--ps-ink-muted);
    cursor: pointer;
    font-size: 22px;
    padding: 0 4px;
    line-height: 1;
    min-width: 32px;
    min-height: 32px;
    border-radius: 50%;
    transition: background-color 150ms ease, color 150ms ease;
}

.ps-pricing-search-clear:hover,
.ps-pricing-search-clear:focus-visible {
    background: var(--ps-bg);
    color: var(--ps-ink);
    outline: none;
}

/* Supply toggle (segmented control) */
.ps-pricing-supply {
    display: flex;
    gap: 4px;
    background: var(--ps-card);
    border: 1px solid var(--ps-line);
    border-radius: 999px;
    padding: 4px;
}

.ps-pricing-supply-btn {
    padding: 12px 18px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    background: transparent;
    color: var(--ps-ink);
    font-size: 13px;
    font-weight: 500;
    font-family: var(--ps-font-body);
    /* WCAG 2.5.5: 48x48 px target on mobile (44 is bare minimum; 48 is
       Apple HIG comfortable). Visual height was ~32px before because
       padding+font collapsed under the 44 min-height. */
    min-height: 48px;
    line-height: 1.4;
    transition: background-color 150ms ease, color 150ms ease;
}

.ps-pricing-supply-btn:hover { background: var(--ps-bg); }

.ps-pricing-supply-btn:focus-visible {
    outline: 2px solid var(--ps-green);
    outline-offset: 2px;
}

.ps-pricing-supply-btn-active,
.ps-pricing-supply-btn[aria-checked="true"] {
    background: var(--ps-ink);
    color: #fff;
}

/* Category chips row (uses shared .ps-chip from components.css) */
.ps-pricing-categories {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 28px;
}

.ps-pricing-category-chip {
    /* Matches .ps-chip but slightly smaller for the row */
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-family: var(--ps-font-body);
    font-weight: 500;
    border: 1px solid var(--ps-line);
    background: transparent;
    color: var(--ps-ink);
    cursor: pointer;
    min-height: 44px;
    transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.ps-pricing-category-chip:hover { border-color: var(--ps-ink); }

.ps-pricing-category-chip:focus-visible {
    outline: 2px solid var(--ps-green);
    outline-offset: 2px;
}

.ps-pricing-category-chip[aria-checked="true"] {
    background: var(--ps-ink);
    border-color: var(--ps-ink);
    color: #fff;
}

/* Result table */
.ps-pricing-table {
    background: var(--ps-card);
    border-radius: 20px;
    border: 1px solid var(--ps-line);
    overflow: hidden;
}

.ps-pricing-table-header {
    display: grid;
    grid-template-columns: 2fr 1.3fr 1.4fr 140px 120px;
    padding: 14px 28px;
    border-bottom: 1px solid var(--ps-line);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--ps-ink-muted);
    background: var(--ps-bg);
}

.ps-pricing-table-price-col { text-align: right; }

.ps-pricing-row {
    display: grid;
    grid-template-columns: 2fr 1.3fr 1.4fr 140px 120px;
    padding: 20px 28px;
    border-bottom: 1px solid var(--ps-line);
    align-items: center;
    gap: 16px;
}

.ps-pricing-row:last-child { border-bottom: none; }

.ps-pricing-row-name {
    font-family: var(--ps-font-display);
    font-size: 22px;
    letter-spacing: -0.012em;
    color: var(--ps-ink);
}

.ps-pricing-row-form {
    font-size: 12px;
    color: var(--ps-ink-muted);
    margin-top: 2px;
}

.ps-pricing-row-class {
    font-size: 14px;
    color: var(--ps-ink-muted);
}

.ps-pricing-row-strengths {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

/* Mixed-tier rows render strengths/tier/price as tier-grouped sub-lines so
   the patient sees exactly which strengths fall into which tier+price.
   The grid columns stay aligned (each cell stacks its lines vertically),
   only the row height grows. */
.ps-pricing-row-mixed-tier .ps-pricing-row-strengths,
.ps-pricing-row-mixed-tier .ps-pricing-row-tier,
.ps-pricing-row-mixed-tier .ps-pricing-row-price {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Each sub-line gets a fixed min-height so strengths / tier / price
   stay horizontally aligned across the three cells. */
.ps-pricing-row-mixed-tier .ps-pricing-strength-line,
.ps-pricing-row-mixed-tier .ps-pricing-tier-line,
.ps-pricing-row-mixed-tier .ps-pricing-price-line {
    display: flex;
    align-items: center;
    min-height: 32px;
}

.ps-pricing-row-mixed-tier .ps-pricing-strength-line {
    gap: 4px;
    flex-wrap: wrap;
}

.ps-pricing-row-mixed-tier .ps-pricing-price-line {
    justify-content: flex-end;
}

/* Smaller price font in mixed-tier mode keeps the per-tier prices
   compact and the row height reasonable. */
.ps-pricing-row-mixed-tier .ps-pricing-price-line .ps-pricing-row-price-value {
    font-size: 22px;
}
.ps-pricing-row-mixed-tier .ps-pricing-price-line .ps-pricing-row-price-cents {
    font-size: 14px;
}

.ps-pricing-strength-pill {
    font-size: 11px;
    padding: 3px 8px;
    border: 1px solid var(--ps-line);
    border-radius: 6px;
    color: var(--ps-ink);
}

.ps-pricing-row-price {
    text-align: right;
}

.ps-pricing-row-price-value {
    font-family: var(--ps-font-display);
    font-size: 28px;
    color: var(--ps-ink);
    letter-spacing: -0.018em;
    line-height: 1;
}

.ps-pricing-row-price-cents { font-size: 18px; }

.ps-pricing-row-price-meta {
    font-size: 11px;
    color: var(--ps-ink-muted);
    margin-top: 2px;
}

.ps-pricing-empty {
    padding: 60px 28px;
    text-align: center;
    color: var(--ps-ink-muted);
    font-size: 15px;
}

/* "Looking for something" CTA card */
.ps-pricing-cta-card {
    margin-top: 24px;
    padding: 24px;
    background: var(--ps-cream);
    border-radius: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.ps-pricing-cta-title {
    font-family: var(--ps-font-display);
    font-size: 22px;
    letter-spacing: -0.012em;
    margin: 0 0 4px;
    color: var(--ps-ink);
    font-weight: 400;
}

.ps-pricing-cta-body {
    font-size: 14px;
    color: var(--ps-ink-muted);
    margin: 0;
}

.ps-pricing-cta-btn {
    background: var(--ps-green-deep);
    color: #fff;
    padding: 14px 22px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    transition: background-color 150ms ease;
}

.ps-pricing-cta-btn:hover { background: var(--ps-green-press); }

.ps-pricing-cta-btn:focus-visible {
    outline: 2px solid var(--ps-green);
    outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────
   CONTROLLED SUBSTANCE NOTE
   ───────────────────────────────────────────────────────────────────────── */

.ps-pricing-controlled {
    padding: 0 48px 96px;
    background: var(--ps-bg);
}

.ps-pricing-controlled-card {
    background: var(--ps-card);
    border: 1px solid var(--ps-line);
    border-radius: 20px;
    padding: 40px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 48px;
    align-items: center;
}

.ps-pricing-controlled-eyebrow {
    display: block;
    font-size: 12px;
    color: var(--ps-accent-on-cream);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.ps-pricing-controlled-title {
    font-family: var(--ps-font-display);
    font-size: 32px;
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0;
    font-weight: 400;
    color: var(--ps-ink);
}

.ps-pricing-controlled-body {
    font-size: 15px;
    line-height: 1.7;
    color: var(--ps-ink-muted);
    margin: 0;
}

/* ─────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .ps-pricing-tier-row,
    .ps-pricing-tier-header { grid-template-columns: 140px 1fr repeat(3, 80px); padding: 16px 24px; gap: 12px; }
    .ps-pricing-tier-price { font-size: 22px; }
    .ps-pricing-table-header,
    .ps-pricing-row { grid-template-columns: 1.6fr 1fr 1fr 100px 100px; padding: 16px 22px; gap: 12px; }
    .ps-pricing-controlled-card { grid-template-columns: 1fr; gap: 24px; }
}

@media (max-width: 768px) {
    .ps-pricing-hero,
    .ps-pricing-tiers,
    .ps-pricing-browser,
    .ps-pricing-controlled { padding-left: 24px; padding-right: 24px; }
    .ps-pricing-controls { grid-template-columns: 1fr; }
    .ps-pricing-supply { width: 100%; }
    .ps-pricing-supply-btn { flex: 1; }
    .ps-pricing-tier-row,
    .ps-pricing-tier-header { grid-template-columns: 100px 1fr 70px 70px 70px; padding: 14px 20px; }
    .ps-pricing-tier-desc { display: none; }
    .ps-pricing-tier-row { grid-template-columns: 1fr 70px 70px 70px; }
    .ps-pricing-tier-header { grid-template-columns: 1fr 70px 70px 70px; }
    .ps-pricing-tier-header > div:nth-child(2) { display: none; }
    /* Mobile formulary table: Medication | Tier | Price.
       Drop Class (col 2) + Strengths (col 3); keep Tier (col 4) so users
       still see why a price is what it is. */
    .ps-pricing-table-header,
    .ps-pricing-row { grid-template-columns: 1fr 80px 80px; padding: 16px 20px; gap: 8px; }
    .ps-pricing-table-header > div:nth-child(2),
    .ps-pricing-table-header > div:nth-child(3),
    .ps-pricing-row > div:nth-child(2),
    .ps-pricing-row > div:nth-child(3) {
        display: none;
    }
    .ps-pricing-cta-card { flex-direction: column; align-items: flex-start; }
    .ps-pricing-cta-card .ps-pricing-cta-btn { width: 100%; justify-content: center; }
    .ps-pricing-browser-help { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    .ps-pricing-search,
    .ps-pricing-supply-btn,
    .ps-pricing-search-clear,
    .ps-pricing-category-chip,
    .ps-pricing-cta-btn { transition: none; }
}

/* ============================================================================
   RECEIPT — "Your quote" panel (Direction A artifact, lifted onto pricing.html)
   ============================================================================
   Live-updates from the formulary browser controls above. Shows the top filtered
   drug as a printed pharmacy receipt: cream paper bg, monospace, torn edges,
   "Reviewed by Don Lansing, RPh." footer, CLAIM THIS PRICE CTA.
   ============================================================================ */

.ps-pricing-receipt {
    position: relative;
    max-width: 480px;
    margin: 0 auto;
    background: #FBF8F1;
    color: var(--ps-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.7;
    box-shadow: 0 1px 0 rgba(15, 30, 28, 0.06), 0 24px 48px rgba(15, 30, 28, 0.10);
    background-image: repeating-linear-gradient(
        0deg,
        rgba(15, 30, 28, 0.025) 0px,
        rgba(15, 30, 28, 0.025) 1px,
        transparent 1px,
        transparent 28px
    );
    background-position: 0 18px;
}

.ps-pricing-receipt[hidden] { display: none; }

.ps-pricing-receipt-edge {
    display: block;
    width: 100%;
    height: 14px;
    fill: #FBF8F1;
}

.ps-pricing-receipt-edge-top {
    margin-bottom: -1px;
}

.ps-pricing-receipt-edge-bottom {
    margin-top: -1px;
}

.ps-pricing-receipt-body {
    padding: 8px 36px 24px;
}

.ps-pricing-receipt-header {
    text-align: center;
    padding-bottom: 12px;
    border-bottom: 1px dashed rgba(15, 30, 28, 0.18);
}

.ps-pricing-receipt-pharmacy-name {
    font-family: var(--ps-font-display);
    font-size: 22px;
    font-style: italic;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.ps-pricing-receipt-pharmacy-meta {
    font-size: 11px;
    color: var(--ps-ink-muted);
    margin-top: 4px;
    letter-spacing: 0.04em;
}

.ps-pricing-receipt-quote-meta {
    display: flex;
    justify-content: space-between;
    color: var(--ps-ink-muted);
    font-size: 11px;
    letter-spacing: 0.08em;
    padding: 14px 0 6px;
}

.ps-pricing-receipt-items {
    border-top: 1px dashed rgba(15, 30, 28, 0.18);
    border-bottom: 1px dashed rgba(15, 30, 28, 0.18);
    padding: 10px 0;
}

.ps-pricing-receipt-item-name {
    padding: 4px 0 8px;
    letter-spacing: 0.02em;
}

.ps-pricing-receipt-item-detail {
    display: flex;
    justify-content: space-between;
    color: var(--ps-ink-muted);
    font-size: 12px;
    padding: 2px 0;
}

.ps-pricing-receipt-item-line {
    display: flex;
    justify-content: space-between;
    padding: 8px 0 4px;
}

.ps-pricing-receipt-item-line-meta {
    color: var(--ps-ink-muted);
    font-size: 12px;
    padding: 4px 0;
    letter-spacing: 0.04em;
}

.ps-pricing-receipt-total {
    display: flex;
    justify-content: space-between;
    padding: 16px 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.ps-pricing-receipt-footer {
    border-top: 1px dashed rgba(15, 30, 28, 0.18);
    padding-top: 12px;
    font-size: 11px;
    color: var(--ps-ink-muted);
    line-height: 1.6;
}

.ps-pricing-receipt-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    background: var(--ps-green-deep);
    color: #FBF8F1;
    text-align: center;
    padding: 16px 0;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-decoration: none;
    transition: background-color 150ms ease;
    /* WCAG 2.5.5: ensure the full 48px is tap-able. Prior 44 + 12px font +
       line-height 1 collapsed to ~28px visual. flex+center reliably fills
       the box regardless of font metrics. */
    min-height: 48px;
    line-height: 1.4;
    box-sizing: border-box;
}

.ps-pricing-receipt-cta:hover { background: var(--ps-green-press); }

.ps-pricing-receipt-cta:focus-visible {
    outline: 2px solid var(--ps-accent);
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .ps-pricing-receipt {
        max-width: none;
        margin: 24px 0 32px;
    }
    .ps-pricing-receipt-body {
        padding: 8px 20px 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ps-pricing-receipt-cta { transition: none; }
}

/* ============================================================================
   RECEIPT SECTION (Phase 2 — receipt promoted above tier table)
   ============================================================================
   Per design feedback: receipt is the protagonist; tier table is the appendix.
   Receipt now sits between the hero and the (retitled) tier table, with the
   formulary browser still below. On desktop the receipt sticks to the
   viewport so users can engage controls below without losing sight of the
   live-updated quote.
   ============================================================================ */

.ps-pricing-receipt-section {
    padding: 64px 48px 48px;
    background: var(--ps-bg);
}

.ps-pricing-receipt-section-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: 56px;
    align-items: start;
}

.ps-pricing-receipt-section-head {
    padding-top: 12px;
}

.ps-pricing-receipt-section-title {
    font-family: var(--ps-font-display);
    font-size: clamp(32px, 4.4vw, 48px);
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--ps-ink);
    margin: 12px 0 16px;
}

.ps-pricing-receipt-section-lede {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ps-ink-muted);
    max-width: 420px;
    margin: 0;
}

/* Sticky receipt on desktop so controls below can update it without users
   losing sight of the live quote. Sticky disabled on smaller widths where
   the section stacks vertically. */
@media (min-width: 1024px) {
    .ps-pricing-receipt-section-inner > .ps-pricing-receipt {
        position: sticky;
        top: 96px;
    }
}

@media (max-width: 1024px) {
    .ps-pricing-receipt-section-inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .ps-pricing-receipt-section-head { text-align: center; }
    .ps-pricing-receipt-section-lede { margin: 0 auto; }
}

@media (max-width: 600px) {
    .ps-pricing-receipt-section { padding: 48px 24px 32px; }
    .ps-pricing-receipt-section-title { font-size: clamp(28px, 8vw, 38px); }
}

/* ─────────────────────────────────────────────────────────────────────────
   CONTROLLED SUBSTANCE NOTE (Round 4 cleanup — demoted from card to inline note)
   ───────────────────────────────────────────────────────────────────────── */

.ps-pricing-controlled-note {
    max-width: 720px;
    margin: 24px auto 0;
    padding: 0 24px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ps-ink-muted);
    text-align: center;
}

.ps-pricing-controlled-note strong {
    color: var(--ps-ink);
}

/* ─────────────────────────────────────────────────────────────────────────
   INSTRUMENT PANEL (Round 5 — receipt + browser in one 2-col section)
   Replaces the standalone receipt section. The receipt sticks alongside
   the formulary table so cause-and-effect (click row → receipt updates)
   stays visible without floating mid-page in a default state.
   ───────────────────────────────────────────────────────────────────────── */

.ps-pricing-instrument {
    padding-top: 32px;
}

.ps-pricing-instrument-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 48px;
    align-items: start;
    position: relative;
}

.ps-pricing-instrument-controls {
    min-width: 0;
}

.ps-pricing-instrument-rail {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-self: start;
}

.ps-pricing-instrument-rail-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.ps-pricing-instrument-rail-title {
    font-family: var(--ps-font-display);
    font-style: italic;
    font-size: 24px;
    color: var(--ps-ink);
    margin: 0;
    font-weight: 400;
    letter-spacing: -0.012em;
}

.ps-pricing-instrument-rail-hint {
    font-size: 11px;
    color: var(--ps-ink-muted);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ps-pricing-instrument-rail-hint .live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ps-green);
    box-shadow: 0 0 0 0 rgba(6, 135, 73, 0.55);
    animation: psLivePulse 2.4s ease-out infinite;
}

@keyframes psLivePulse {
    0%   { box-shadow: 0 0 0 0    rgba(6, 135, 73, 0.45); }
    70%  { box-shadow: 0 0 0 10px rgba(6, 135, 73, 0); }
    100% { box-shadow: 0 0 0 0    rgba(6, 135, 73, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .ps-pricing-instrument-rail-hint .live-dot { animation: none; }
}

/* Receipt in the rail spans full width and tilts a hair so it reads as
   a real piece of paper pinned to the rail. */
.ps-pricing-instrument-rail .ps-pricing-receipt {
    max-width: none;
    margin: 0;
    transform: rotate(-0.4deg);
    transform-origin: 50% 0;
}

/* Decorative tilt is suppressed for users who prefer reduced motion.
   Mobile already removes it via the (max-width: 1024px) breakpoint below. */
@media (prefers-reduced-motion: reduce) {
    .ps-pricing-instrument-rail .ps-pricing-receipt {
        transform: none;
    }
}

/* Mixed-tier note in the receipt panel — appears when the displayed drug
   has strengths spanning multiple tiers so the patient knows the quoted
   price is the lowest of multiple per-strength prices. */
.ps-pricing-receipt-tier-note {
    margin-top: 8px;
    padding: 6px 0 0;
    border-top: 1px dotted var(--ps-ink-muted, #5A6563);
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--ps-ink-muted, #5A6563);
    font-style: italic;
}

/* Selected-row state: 3px teal left bar + faint gradient. Tells the user
   which row is currently driving the receipt on the right. */
.ps-pricing-row {
    cursor: pointer;
    transition: background-color 120ms ease;
}

.ps-pricing-row:hover {
    background: rgba(15, 30, 28, 0.025);
}

/* Mobile tap feedback: rows are clickable (they update the receipt) but
   had no visible response before. A brief background flash on :active
   confirms the tap registered. Touchscreen-only via @media (hover:none)
   so desktop hover-only flow is unaffected. */
.ps-pricing-row:active {
    background: rgba(6, 135, 73, 0.08);
}

@media (hover: none) and (pointer: coarse) {
    .ps-pricing-row {
        -webkit-tap-highlight-color: rgba(6, 135, 73, 0.10);
    }
}

.ps-pricing-row.is-selected {
    background: linear-gradient(90deg,
        rgba(6, 135, 73, 0.07) 0%,
        rgba(6, 135, 73, 0.02) 70%,
        transparent 100%);
    box-shadow: inset 3px 0 0 var(--ps-green);
}

/* Mobile: rail collapses below the table. Receipt flows naturally at the
   bottom of the page rather than sticking, because the full receipt
   (~600px tall) was occupying ~70% of a 390x844 viewport and overlapping
   the category chip filters that flow above it in DOM order. A compact
   sticky summary bar is a future enhancement (see B-option in PR #703). */
@media (max-width: 1024px) {
    .ps-pricing-instrument-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .ps-pricing-instrument-rail {
        position: static;
        margin: 0;
        padding: 0;
        background: none;
        z-index: auto;
    }
    .ps-pricing-instrument-rail .ps-pricing-receipt {
        transform: none;
    }
}

/* ----------------------------------------------------------------------
   SKELETON ROWS - drug list loading state
   Shares the .ps-pricing-row grid so the skeleton -> live swap has zero
   layout shift. Visible while pricing.js awaits /api/public/formulary-list
   (~400-900ms). Pulse extends the psLivePulse rhythm established above.
   ---------------------------------------------------------------------- */

.ps-pricing-skel-bar {
    background: var(--ps-line, rgba(15, 30, 28, 0.10));
    border-radius: 4px;
    animation: psSkelPulse 1.8s ease-in-out infinite;
}

@keyframes psSkelPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
    .ps-pricing-skel-bar {
        animation: none;
        background: var(--ps-line-strong, rgba(15, 30, 28, 0.18));
    }
}

.ps-pricing-row--skeleton {
    cursor: default;
    pointer-events: none;
}

.ps-pricing-row--skeleton:hover {
    background: transparent;
}