/* ══════════════════════════════════════════════════════════════════════
   EDUBRACKET VISUAL DIGESTIBILITY LAYER (.article-wrap)
   Teal #b5481f + sky #b8893a port of the light system (matches the
   Prescription Savings Finder tool). Same component class vocabulary
   network-wide; per-article bespoke graphics add CONTENT, this provides
   STYLE + motion + grids. Chassis port — canonized 2026-07-01.
   var(--x, fallback) syntax so it is robust to overhaul-v3 token gaps.
   ══════════════════════════════════════════════════════════════════════ */
.article-wrap{--rx-a:#b5481f;--rx-b:#b8893a}

/* hero illustration */
.article-wrap .lc-illus{max-width:560px;margin:1.7rem auto .7rem;display:block}
.article-wrap .lc-illus svg{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 26px rgba(181,72,31,.18))}

/* accent-bar headings */
.article-wrap h2{position:relative;padding-left:1.05rem}
.article-wrap h2::before{content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:5px;border-radius:3px;background:linear-gradient(180deg,var(--rx-a),var(--rx-b))}

/* lede */
.article-wrap .article-intro,.article-wrap p.lede{font-size:1.14rem;line-height:1.75;color:var(--text,#44403c)}

/* pull-quote */
.article-wrap .pq{margin:2.2rem 0;padding:.3rem 0 .3rem 1.5rem;border-left:4px solid var(--rx-a);font-family:var(--display,'Fraunces',Georgia),serif;font-weight:700;font-size:clamp(1.2rem,2.5vw,1.6rem);line-height:1.38;color:var(--dark,#1c1917);letter-spacing:-.01em}
.article-wrap .pq .hl{background:linear-gradient(90deg,var(--rx-a),var(--rx-b));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.article-wrap .pq .src{display:block;margin-top:.55rem;font-family:var(--mono,monospace),monospace;font-size:.68rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#a8a29e)}

/* concept split */
.article-wrap .lc-split{display:grid;grid-template-columns:1fr 1fr;margin:1.7rem 0;border:1px solid var(--border,#e7e5e4);border-radius:14px;overflow:hidden;background:#fff}
.article-wrap .lc-split figcaption{grid-column:1/-1;order:2;font-size:.79rem;color:var(--text-light,#78716c);line-height:1.55;padding:.85rem 1.2rem;background:var(--paper,#faf6ef);border-top:1px solid var(--border,#e7e5e4)}
.article-wrap .lc-split .pane{padding:1.3rem 1.35rem}
.article-wrap .lc-split .a{background:linear-gradient(160deg,#faf6ee,#fff)}
.article-wrap .lc-split .b{background:linear-gradient(160deg,#f7f0e2,#fff);border-left:1px solid var(--border,#e7e5e4)}
.article-wrap .lc-split .ph{font-family:var(--mono,monospace),monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .2rem;font-weight:700}
.article-wrap .lc-split .a .ph{color:#0e1a2b}
.article-wrap .lc-split .b .ph{color:#8c6422}
.article-wrap .lc-split .sub{font-size:.76rem;color:var(--text-light,#78716c);margin:0 0 .85rem}
.article-wrap .lc-split .chips{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.85rem}
.article-wrap .lc-split .chip{font-family:var(--mono,monospace),monospace;font-size:10px;color:var(--text,#44403c);background:#fff;border:1px solid var(--border,#e7e5e4);border-radius:5px;padding:.22rem .52rem}
.article-wrap .lc-split .big{font-family:var(--display,'Fraunces',Georgia),serif;font-weight:800;font-size:1.16rem;margin:.1rem 0 .55rem;letter-spacing:-.02em}
.article-wrap .lc-split .a .big{color:#0e1a2b}
.article-wrap .lc-split .b .big{color:#8c6422}
.article-wrap .lc-split .tags{margin:0;font-size:.84rem;color:var(--text,#44403c);line-height:1.85}
.article-wrap .lc-split .tags .t{display:flex;align-items:flex-start;gap:.45rem}
.article-wrap .lc-split .tags .t::before{content:"";width:5px;height:5px;border-radius:50%;flex:none;margin-top:.5em}
.article-wrap .lc-split .a .tags .t::before{background:var(--rx-a)}
.article-wrap .lc-split .b .tags .t::before{background:var(--rx-b)}

/* key callout */
.article-wrap .key{display:flex;gap:.9rem;align-items:flex-start;margin:1.8rem 0;padding:1.05rem 1.2rem;background:linear-gradient(135deg,#faf6ee,#f7f0e2);border:1px solid #e0c9a8;border-radius:13px}
.article-wrap .key .ic{flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--rx-a),var(--rx-b));font-family:var(--display,'Fraunces',Georgia),serif;font-weight:800;color:#fff;font-size:1rem}
.article-wrap .key .kt{margin:0;color:var(--text,#44403c);font-size:.94rem;line-height:1.62}
.article-wrap .key .kt b{color:var(--dark,#1c1917)}

/* screenshot frame */
.article-wrap .shot{margin:1.8rem 0;border:1px solid var(--border,#e7e5e4);border-radius:13px;overflow:hidden;background:#fff;box-shadow:0 8px 28px rgba(24,24,27,.08)}
.article-wrap .shot .bar{display:flex;align-items:center;gap:.5rem;padding:.55rem .85rem;background:var(--paper,#faf6ef);border-bottom:1px solid var(--border,#e7e5e4)}
.article-wrap .shot .bar i{width:9px;height:9px;border-radius:50%;background:#d4d4d8;display:inline-block}
.article-wrap .shot .bar .u{margin-left:.6rem;font-family:var(--mono,monospace),monospace;font-size:11px;color:var(--muted,#a8a29e)}
.article-wrap .shot img{display:block;width:100%;height:auto}
.article-wrap .shot figcaption{font-size:.8rem;color:var(--text-light,#78716c);line-height:1.5;padding:.7rem .95rem;border-top:1px solid var(--border,#e7e5e4)}

/* data dashboard */
.article-wrap .crm-dash{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1.9rem 0 .6rem}
.article-wrap .crm-dash .dcard{background:#fff;border:1px solid var(--border,#e7e5e4);border-radius:14px;padding:1.05rem 1.1rem 1.15rem;box-shadow:0 8px 24px rgba(24,24,27,.06);display:flex;flex-direction:column}
.article-wrap .crm-dash .dh{font-family:var(--mono,monospace),monospace;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#a8a29e);margin:0 0 .7rem}
.article-wrap .crm-dash .dsub{font-size:.73rem;color:var(--text-light,#78716c);margin:.7rem 0 0;line-height:1.4}
.article-wrap .gauge{position:relative;width:104px;height:104px;margin:.1rem auto .1rem}
.article-wrap .gauge svg{transform:rotate(-90deg)}
.article-wrap .gauge .ring{fill:none;stroke:#f3e2d4;stroke-width:10}
.article-wrap .gauge .prog{fill:none;stroke:url(#gaugeg);stroke-width:10;stroke-linecap:round;stroke-dasharray:283;stroke-dashoffset:283;animation:gFill 1.9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes gFill{to{stroke-dashoffset:var(--goff,23)}}
.article-wrap .gauge .num{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.article-wrap .gauge .num b{font-family:var(--display,'Fraunces',Georgia),serif;font-size:1.75rem;font-weight:800;color:#0e1a2b;line-height:1}
.article-wrap .gauge .num em{font-family:var(--mono,monospace),monospace;font-size:7.5px;letter-spacing:.12em;color:var(--muted,#a8a29e);text-transform:uppercase;font-style:normal;margin-top:.15rem}
.article-wrap .pbars{display:flex;flex-direction:column;gap:.5rem;padding:.55rem 0;flex:1;justify-content:center}
.article-wrap .pbar{height:13px;border-radius:7px;background:linear-gradient(90deg,var(--rx-a),var(--rx-b));transform-origin:left;transform:scaleX(0);animation:pGrow 1.3s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes pGrow{to{transform:scaleX(1)}}
.article-wrap .echips{display:flex;flex-wrap:wrap;gap:.4rem;padding:.5rem 0;flex:1;align-content:center}
.article-wrap .echip{font-family:var(--mono,monospace),monospace;font-size:10px;color:#15803d;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:6px;padding:.26rem .55rem;display:flex;align-items:center;gap:.32rem;opacity:0;animation:eIn .5s ease forwards}
.article-wrap .echip::before{content:"";width:5px;height:5px;border-radius:50%;background:#22c55e;flex:none}
@keyframes eIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

/* verdict grid */
.article-wrap .verdict-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1.9rem 0}
.article-wrap .vcard{background:#fff;border:1px solid var(--border,#e7e5e4);border-radius:13px;padding:1.1rem 1.15rem;border-top:3px solid var(--rx-a);transition:transform .2s,box-shadow .2s}
.article-wrap .vcard:hover{transform:translateY(-4px);box-shadow:0 16px 34px -14px rgba(181,72,31,.4)}
.article-wrap .vcard.top{background:linear-gradient(160deg,#faf6ee,#fff)}
.article-wrap .vcard .vt{font-family:var(--mono,monospace),monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#a8a29e);margin-bottom:.4rem}
.article-wrap .vcard .vn{font-family:var(--display,'Fraunces',Georgia),serif;font-weight:800;font-size:1.18rem;color:#0e1a2b;letter-spacing:-.02em;margin-bottom:.35rem}
.article-wrap .vcard .vd{font-size:.85rem;color:var(--text,#44403c);line-height:1.5}

/* scroll reveal */
.article-wrap .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.article-wrap .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.article-wrap .reveal{opacity:1;transform:none;transition:none}}

/* ── FLOATING CHAPTER-RAIL (scroll-spy TOC in the right whitespace) ── */
/* scrollbar-safe 2026-09-17: 172px assumed the gutter equals (100vw - 1180)/2, but 100vw INCLUDES
   the scrollbar while the centred .article-wrap does not, so the rail sat about half a
   scrollbar too far left and clipped the H1. Measured at a 1920px viewport: rail left
   1535 against an article-wrap right edge of 1543, a 7px overlap on exactly one element.
   196px = 172px rail + 24px of real gutter, which absorbs the scrollbar and leaves a gap. */
.rx-rail{position:fixed!important;top:50%!important;transform:translateY(-50%)!important;right:max(1.1rem,calc((100vw - 1180px)/2 - 196px))!important;left:auto!important;bottom:auto!important;width:172px!important;z-index:40;display:block!important;margin:0!important;font-family:var(--body,system-ui),sans-serif}
.rx-rail .rt{font-family:var(--mono,monospace),monospace;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#a8a29e);margin:0 0 .7rem;padding-left:.85rem}
.rx-rail ul{list-style:none;margin:0;padding:0;border-left:1px solid var(--border,#e7e5e4)}
.rx-rail li{margin:0}
.rx-rail a{display:block;padding:.28rem 0 .28rem .85rem;margin-left:-1px;border-left:2px solid transparent;font-size:.76rem;line-height:1.35;color:var(--text-light,#78716c);text-decoration:none;transition:color .16s,border-color .16s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rx-rail a:hover{color:var(--rx-a)}
.rx-rail a.on{color:var(--rx-a);border-left-color:var(--rx-a);font-weight:600}
/* RAIL HIDE RE-OUTRANKED 2026-09-16: the same defect BagEngine fixed on 2026-08-25 was live on 16 OTHER
   properties, because that fix was applied to one instance instead of to the class.
   `.rx-rail` above declares `display:block!important`, so the hide below outranked and the
   floating chapter-rail NEVER HID. Measured in the live DOM 2026-09-16 on
   rxgrab/articles/best-ed-telehealth-cost-per-dose-2026 at a 958px viewport: the rail sat at
   left=753 right=925 and overlapped 10 elements INCLUDING THE H1, printing the table of
   contents on top of the headline. Adding !important here hides it and the overlap goes to 0.
   The rail is designed to live in the gutter outside a 1180px column, so below ~1524px it has
   no gutter to live in and `right` falls back to its 1.1rem floor, i.e. on top of the article.
   ⭐ A media query cannot beat `!important` no matter how specific the breakpoint is. */
/* RAIL BREAKPOINT RAISED 1300 -> 1600, 2026-09-16: 1300px was measured WRONG, by me, earlier the same day.
   The rail is 172px wide and pins itself 1.1rem from the right edge whenever its gutter
   calc goes negative, i.e. whenever the viewport is narrower than about 1572px. Hiding it
   only below 1300px therefore left a 300px band, 1301-1572, where it still printed itself
   over the article. Measured live at 1424px on rxgrab GLP-1: rail at left=1219 against an
   article right edge of 1271, overlapping 11 elements including the table of contents.
   The gutter needed is 172 + 17.6 + a small gap, about 206px each side of a ~1180px column,
   so the rail can only be shown from roughly 1592px up. Rounded to 1600. */
@media(max-width:1600px){.rx-rail{display:none!important}}

@media(max-width:760px){.article-wrap .crm-dash,.article-wrap .verdict-grid{grid-template-columns:1fr}}
@media(max-width:680px){.article-wrap .lc-split{grid-template-columns:1fr}.article-wrap .lc-split .b{border-left:0;border-top:1px solid var(--border,#e7e5e4)}}

/* drug-page price bars + eyebrow spacing (added 2026-07-01d) */
.article-tags .article-tag:not(:last-child){margin-right:.5rem}
.article-wrap .rxdbar rect.b{transform:scaleY(0);transform-box:fill-box;transform-origin:bottom;animation:rxdbarGrow .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes rxdbarGrow{to{transform:scaleY(1)}}
.article-wrap .rxdbar text{font-family:'JetBrains Mono',monospace}

.article-wrap .ebbar rect.b{transform:scaleY(0);transform-box:fill-box;transform-origin:bottom;animation:ebbarGrow .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes ebbarGrow{to{transform:scaleY(1)}}
@media(prefers-reduced-motion:reduce){.article-wrap .ebbar rect.b{animation:none;transform:none}}
.article-tags .article-tag:not(:last-child){margin-right:.5rem}

/* lattice:reading-progress */
/* Emitted on 345 pages across 13 properties, styled on 2, driven by 0 until 2026-08-27.
   ⭐ The markup travelled and the behaviour did not. Driver lives in site_engine.js. */
.reading-progress{position:fixed;top:0;left:0;right:0;height:3px;background:transparent;z-index:100;pointer-events:none}
.reading-progress span{display:block;height:100%;width:0;background:var(--accent-fill,var(--accent,#4f46e5));transition:width .12s linear}
@media (prefers-reduced-motion: reduce){.reading-progress span{transition:none}}


/* ⛔⛔ A FIXED OVERLAY HAS NO GROUND BY CONSTRUCTION, SO IT MUST SUPPLY ITS OWN.
   `.rx-rail` is `position:fixed` with a transparent background, so whatever the page happens to
   put behind it becomes its ground. Found on Health Britannica /calculator/: the table of
   contents rendered mid-brown over a dark forest photograph, present on screen and unreadable.
   Measured across the fleet the same day: 12 properties carry the identical latent defect, which
   only becomes visible where a page happens to put a dark hero behind the rail.
   ⭐⭐ EVERY OTHER CONTRAST FIX ASKS "WHAT IS THIS SITTING ON?". A fixed element has no stable
     answer, because it sits on different things as the page scrolls and page to page, so the only
     durable fix is for it to paint its own surface.
   ⚠️ Written against tokens with fallbacks so it ports unchanged, and deliberately a soft panel
     rather than a hard card, because this is a quiet navigational aid that must not compete with
     the content it indexes. */
.rx-rail{
  background:color-mix(in srgb, var(--paper,#fafaf9) 92%, transparent);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--border,#e5e5e5); border-radius:10px;
  padding:.85rem .6rem .7rem; box-shadow:0 2px 14px rgba(0,0,0,.06);
}