/*
 * Bitnnock Research section - public hub + per-crypto topic pages.
 * Built entirely on the existing Plasma design tokens (--wlfi-*) defined
 * in wlfi-p2p-sections.css, which both themes already load, so this file
 * never redefines colors/fonts/spacing scales of its own - it only adds
 * layout for content this design system didn't have a component for yet
 * (an editorial hub grid + long-form article typography).
 *
 * Two width scales, used deliberately, not interchangeably:
 * --bn-research-wide  - the page shell: hub grid, topic header, the
 *                        article container itself, and all of its text
 *                        (title, meta line, source credit, every
 *                        paragraph/heading/list/blockquote in the body).
 *                        Noticeably wider than the site's shared
 *                        --wlfi-wrap (980px) so the section reads as
 *                        full-width rather than a narrow column with
 *                        empty gutters on anything wider than a laptop
 *                        screen - and on screens narrower than this cap
 *                        it simply fills the viewport.
 * --bn-research-read   - images only (hero + inline), centered inside
 *                        the wide shell at their original, smaller size.
 *                        Deliberately the opposite emphasis from a
 *                        typical editorial "full-bleed images, narrow
 *                        text column" layout: here the text fills the
 *                        width and the images stay contained.
 */
.bn-research{
    padding-block:2.5rem 4rem;
    --bn-research-wide:min(1200px,calc(100% - 2.5rem));
    --bn-research-read:720px;
}

/* No eyebrow badge here on purpose - the shared page-header partial
   (wlfi-breadcrumb, included by the layout above this) already renders
   "Research" as its own heading immediately above this block, so a
   second "RESEARCH" pill right underneath it was pure repetition. */
.bn-research__hero{width:var(--bn-research-wide);margin-inline:auto;text-align:center;margin-bottom:2.5rem}
.bn-research__title{font-size:clamp(1.75rem,4vw,2.75rem);font-weight:700;letter-spacing:-.02em;color:var(--wlfi-text);margin:0 0 .75rem}
.bn-research__lead{max-width:640px;margin-inline:auto;color:var(--wlfi-text-secondary);font-size:1.0625rem;line-height:1.65}

/* ---------- Hub: search + A-Z filter ----------
 * Built for a directory that grows past one topic - a text search
 * (matches name or ticker) plus a full A-Z strip. Every letter renders,
 * not just ones with a current match: a directory with 25 disabled
 * letters and one enabled one still reads as "a real directory," where
 * only ever showing the one populated letter would just look sparse.
 * Both filters compose (bn-research-search.js) rather than being
 * separate modes - picking a letter clears the search box and vice
 * versa, so the two never fight over what's currently narrowing the grid. */
.bn-research__controls{
    width:var(--bn-research-wide);margin:0 auto 1.25rem;display:flex;flex-direction:column;
    align-items:center;gap:1rem
}
.bn-research__search{
    display:flex;align-items:center;gap:.625rem;width:100%;max-width:420px;padding:.625rem 1rem;
    border-radius:999px;border:1px solid var(--wlfi-border);background:var(--wlfi-bg-secondary);
    transition:border-color .2s var(--wlfi-ease),box-shadow .2s var(--wlfi-ease)
}
.bn-research__search:focus-within{border-color:rgba(236,196,108,.55);box-shadow:0 0 0 3px var(--wlfi-brand-dim)}
.bn-research__search i{flex-shrink:0;color:var(--wlfi-brand);font-size:.9375rem}
.bn-research__search-input{
    flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--wlfi-text);
    font-family:inherit;font-size:.9375rem
}
.bn-research__search-input::placeholder{color:var(--wlfi-text-quaternary)}
.bn-research__alpha{display:flex;flex-wrap:wrap;justify-content:center;gap:.35rem;max-width:640px}
.bn-research__alpha-btn{
    min-width:1.75rem;height:1.75rem;padding:0 .5rem;border-radius:999px;border:1px solid var(--wlfi-border-secondary);
    background:transparent;color:var(--wlfi-text-tertiary);font-size:.75rem;font-weight:600;cursor:pointer;
    transition:border-color .2s var(--wlfi-ease),background .2s var(--wlfi-ease),color .2s var(--wlfi-ease)
}
.bn-research__alpha-btn:hover:not(:disabled){border-color:var(--wlfi-brand-border);color:var(--wlfi-text)}
.bn-research__alpha-btn.is-active{background:var(--wlfi-brand-dim);border-color:var(--wlfi-brand-border);color:var(--wlfi-brand)}
.bn-research__alpha-btn.is-empty{opacity:.3;cursor:default}
.bn-research__alpha-btn:focus-visible{outline:2px solid var(--wlfi-brand);outline-offset:2px}
.bn-research__count{
    width:var(--bn-research-wide);margin:0 auto 1.5rem;text-align:center;
    font-size:.8125rem;color:var(--wlfi-text-quaternary)
}
.bn-research__no-results{
    width:var(--bn-research-wide);margin-inline:auto;text-align:center;padding:3rem 1rem;
    color:var(--wlfi-text-secondary)
}
.bn-research__no-results i{font-size:1.75rem;color:var(--wlfi-text-quaternary);margin-bottom:.75rem;display:block}
.bn-research__clear{
    margin-top:1rem;padding:.5rem 1.25rem;border-radius:999px;border:1px solid var(--wlfi-border-secondary);
    background:transparent;color:var(--wlfi-brand);font-size:.875rem;font-weight:600;cursor:pointer
}
.bn-research__clear:hover{border-color:var(--wlfi-brand-border);background:var(--wlfi-brand-dim)}
.bn-research__clear:focus-visible{outline:2px solid var(--wlfi-brand);outline-offset:2px}

/* ---------- Hub: topic cards ---------- */
.bn-research__grid{
    width:var(--bn-research-wide);margin-inline:auto;display:grid;gap:1.25rem;
    grid-template-columns:repeat(auto-fill,minmax(300px,1fr))
}
.bn-research-card{
    display:flex;flex-direction:column;gap:.85rem;padding:1.5rem;border-radius:16px;overflow:hidden;
    background:var(--wlfi-bg-secondary);border:1px solid var(--wlfi-border-secondary);
    text-decoration:none!important;transition:border-color .25s var(--wlfi-ease),transform .25s var(--wlfi-ease),box-shadow .25s var(--wlfi-ease)
}
/* A clean logo showcase, not a generic stock/AI-art photo - real crypto
   icon this site already maintains (ResearchTopic::getIconUrlAttribute()),
   same reasoning as the topic-icon fix elsewhere in this file: an accurate
   recognizable brand mark is more useful and more editorial than an
   abstract "crypto-ish" illustration that doesn't represent anything
   specific about the topic. First pass kept the old full-bleed photo's
   16/9 banner footprint around it, which read as a small logo lost in a
   lot of empty gradient - no banner box now, just the logo itself, tight,
   sitting directly in the card's own padding rather than bleeding to its
   edges (that bleed was for a full-bleed photo; a small circle doesn't
   need it). */
/* Left-aligned, not centered - everything else in this card (name,
   title, excerpt, footer) reads from the left edge, so a centered logo
   was the one element not lining up with anything else in the card.
   The article page's own showcase stays centered - it sits above a
   centered title there, not left-aligned body text, so that one's
   already consistent. */
.bn-research-card__showcase{
    display:flex;align-items:center;justify-content:flex-start;
    margin-bottom:.25rem;transition:transform .4s var(--wlfi-ease)
}
.bn-research-card__showcase-logo{
    width:88px;height:88px;border-radius:50%;object-fit:cover;
    background:var(--wlfi-bg-tertiary);box-shadow:0 0 0 1px var(--wlfi-border-secondary)
}
.bn-research-card__showcase-logo--placeholder{
    display:flex;align-items:center;justify-content:center;font-weight:700;font-size:2rem;
    color:var(--wlfi-brand-text);background:var(--wlfi-brand-dim);border:1px solid var(--wlfi-brand-border)
}
.bn-research-card:hover,.bn-research-card:focus-visible{
    border-color:var(--wlfi-brand-border);transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.28)
}
.bn-research-card:hover .bn-research-card__showcase{transform:scale(1.06)}
/* No small logo here anymore - the showcase right above already
   establishes the icon prominently; repeating it immediately below,
   with no divider between the two like the topic-page header has,
   just read as an accidental duplicate rather than a deliberate second
   mention. */
.bn-research-card__head{display:flex;align-items:center;gap:.75rem}
.bn-research-card__name{font-size:1.0625rem;font-weight:700;color:var(--wlfi-text);margin:0;display:flex;align-items:center;gap:.4rem;flex-wrap:wrap}
.bn-research-card__symbol{font-size:.6875rem;font-weight:700;letter-spacing:.04em;color:var(--wlfi-text-tertiary);background:rgba(255,255,255,.06);border-radius:6px;padding:.1rem .4rem}
.bn-research-card__article-title{font-size:1rem;font-weight:600;color:var(--wlfi-text);margin:0;line-height:1.4}
.bn-research-card__excerpt{font-size:.9375rem;color:var(--wlfi-text-secondary);line-height:1.6;margin:0;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bn-research-card__foot{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:auto;padding-top:.5rem;
    border-top:1px solid var(--wlfi-border-secondary);font-size:.8125rem;color:var(--wlfi-text-quaternary)}
.bn-research-card__meta{display:flex;align-items:center;gap:.4rem;min-width:0}
.bn-research-card__meta-dot{opacity:.5}
.bn-research-card__cta{flex-shrink:0;color:var(--wlfi-brand)!important;font-weight:600}

.bn-research__empty{width:var(--bn-research-wide);margin-inline:auto;text-align:center;padding:4rem 1rem;
    color:var(--wlfi-text-secondary);border:1px dashed var(--wlfi-border);border-radius:16px}
.bn-research__empty i{font-size:2rem;color:var(--wlfi-text-quaternary);margin-bottom:.75rem;display:block}

/* ---------- Topic page ---------- */
/* Wrapper handles the page-wide alignment (matches every other section
   on this page); the link itself stays sized to its own text so the
   click/hover target is exactly the visible "All Research" pill, not
   an invisible full-width strip. */
.bn-research-back-row{width:var(--bn-research-wide);margin:0 auto 1.25rem}
.bn-research-back{
    display:inline-flex;align-items:center;gap:.4rem;color:var(--wlfi-text-tertiary)!important;
    text-decoration:none!important;font-size:.8125rem;font-weight:600;transition:color .2s var(--wlfi-ease)
}
.bn-research-back:hover{color:var(--wlfi-brand)!important}
.bn-research-back:focus-visible{outline:2px solid var(--wlfi-brand);outline-offset:3px;border-radius:4px}

.bn-research-topic__head{width:var(--bn-research-wide);margin-inline:auto;display:flex;gap:1.25rem;align-items:center;
    margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid var(--wlfi-border-secondary)}
.bn-research-topic__logo{width:64px;height:64px;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--wlfi-bg-tertiary)}
.bn-research-topic__logo--placeholder{display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.375rem;
    color:var(--wlfi-brand-text);background:var(--wlfi-brand-dim);border:1px solid var(--wlfi-brand-border)}
.bn-research-topic__name{font-size:1.5rem;font-weight:700;color:var(--wlfi-text);margin:0 0 .35rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.bn-research-topic__intro{color:var(--wlfi-text-secondary);font-size:.9375rem;line-height:1.6;margin:0;max-width:56ch}

.bn-research-banner{
    width:var(--bn-research-wide);margin:0 auto 2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;
    padding:.9rem 1.25rem;border-radius:12px;background:var(--wlfi-brand-dim);border:1px solid var(--wlfi-brand-border);
    color:var(--wlfi-brand-text);font-size:.9375rem
}
.bn-research-banner a{color:var(--wlfi-text)!important;font-weight:700;text-decoration:underline!important}

/* ---------- Article ----------
 * The article itself, its title/meta/source line, and every paragraph/
 * heading/list in the body all use the full wide measure - the section
 * genuinely fills the page. Images (hero + inline) are the one exception:
 * kept at their original, narrower size and centered, since a 1200px-wide
 * photo looked stretched next to text at the same width - this is the
 * opposite emphasis from a typical "full-bleed images, narrow text
 * column" editorial layout, by explicit request.
 *
 * No boxed container around the whole thing - that read as a generic
 * CMS template wrapper, not an edited piece, and was explicitly rejected
 * in favor of the lighter-weight treatment below: each paragraph gets
 * its own quote-style left border instead (see .bn-research-article__body
 * p), the way a WordPress pull-quote shortcode wraps a block of text -
 * so the article still sits directly on the page like the rest of the
 * site, just with a clean, repeatable rhythm running down it. */
.bn-research-article{width:var(--bn-research-wide);margin-inline:auto}

/* The article's own title reuses .bn-research-topic__name (same font
   treatment as the topic header's name) but needs its own alignment -
   the topic header version sits next to a round logo and stays
   left-aligned, this one is a standalone heading and should be centered. */
.bn-research-article>h2.bn-research-topic__name{justify-content:center;text-align:center}

.bn-research-article__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;color:var(--wlfi-text-quaternary);
    font-size:.8125rem;margin-bottom:1.75rem}
.bn-research-article__meta i{color:var(--wlfi-brand)}
.bn-research-article__meta-dot{opacity:.5}
.bn-research-article__source{
    display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;border-radius:10px;margin-bottom:2rem;
    background:rgba(255,255,255,.03);border:1px solid var(--wlfi-border-secondary);font-size:.875rem;color:var(--wlfi-text-secondary)
}
.bn-research-article__source a{color:var(--wlfi-brand)!important;font-weight:600}

/* AI narration player - same restrained "barely-there panel" treatment
   as .bn-research-article__source right above (translucent fill, hairline
   border, no shadow) rather than a heavier card, consistent with this
   page's own "not a container" precedent elsewhere. */
.bn-research-audio{
    display:flex;align-items:center;gap:1rem;padding:.85rem 1.1rem;border-radius:12px;margin-bottom:1.75rem;
    background:rgba(255,255,255,.03);border:1px solid var(--wlfi-border-secondary)
}
.bn-research-audio__play{
    flex-shrink:0;width:2.75rem;height:2.75rem;border-radius:50%;display:flex;align-items:center;justify-content:center;
    background:var(--wlfi-brand);color:#13100d;border:none;cursor:pointer;font-size:1rem;transition:filter .2s var(--wlfi-ease)
}
.bn-research-audio__play:hover{filter:brightness(1.08)}
.bn-research-audio__play:active{filter:brightness(.94)}
.bn-research-audio__play:focus-visible{outline:2px solid var(--wlfi-brand);outline-offset:3px}
.bn-research-audio__main{flex:1;min-width:0}
.bn-research-audio__label{display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem;font-size:.8125rem;font-weight:600;color:var(--wlfi-text)}
.bn-research-audio__badge{
    font-size:.625rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--wlfi-text-quaternary);
    background:rgba(255,255,255,.06);border-radius:6px;padding:.15rem .4rem
}
.bn-research-audio__scrubber{
    -webkit-appearance:none;appearance:none;display:block;width:100%;height:4px;border-radius:999px;
    background:var(--wlfi-border);cursor:pointer;margin-bottom:.35rem
}
.bn-research-audio__scrubber::-webkit-slider-thumb{
    -webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:var(--wlfi-brand);cursor:pointer;
    box-shadow:0 0 0 3px rgba(19,16,13,.5)
}
.bn-research-audio__scrubber::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--wlfi-brand);border:none;cursor:pointer}
.bn-research-audio__scrubber::-moz-range-progress{background:var(--wlfi-brand);border-radius:999px;height:4px}
.bn-research-audio__time{display:flex;justify-content:space-between;font-size:.75rem;color:var(--wlfi-text-quaternary)}
.bn-research-audio__speed{
    flex-shrink:0;background:var(--wlfi-bg-tertiary);color:var(--wlfi-text-secondary);border:1px solid var(--wlfi-border-secondary);
    border-radius:8px;padding:.4rem .5rem;font-size:.8125rem;cursor:pointer
}
.bn-research-audio__speed:focus-visible{outline:2px solid var(--wlfi-brand);outline-offset:2px}
/* Pre-existing bug found and fixed while verifying the chart panel below
   (unrelated to it - this rule predates that work): flex-wrap:wrap alone
   never actually triggered here, because "flex:1" gives
   .bn-research-audio__main a flex-basis of 0% (the flex:<number>
   shorthand's own default), and combined with its min-width:0, main
   contributes nothing to the browser's "does this fit on one line"
   check - so it always answered yes, shrinking main down to a sliver
   instead of ever wrapping .speed onto its own line. The label text +
   "AI narrated" badge were getting crushed into an unreadable stack as
   a result, instead of the clean two-row layout this media query
   clearly intended (see the margin-left below, which only makes sense
   if .speed is on its own row).
   Fix: give main a real min-width floor at this one breakpoint. Once
   main can't shrink past that floor, [play + main-at-its-floor + gap +
   speed] genuinely no longer fits on one line, so flex-wrap correctly
   moves speed down - and because that's a real overflow-driven wrap
   (not a forced flex-basis:100% trick), speed keeps its natural ~74px
   width instead of stretching to fill the row and overflowing past the
   margin-left indent. */
@media (max-width:375px){
    .bn-research-audio{flex-wrap:wrap}
    .bn-research-audio__main{min-width:180px}
    .bn-research-audio__speed{margin-left:calc(2.75rem + 1rem)}
}

/* Live price chart - directly below the audio player. Self-hosted:
   BinancePriceHistoryService fetches Binance's own free public price
   history server-side and ResearchController::chartData() serves it as
   JSON; bn-research-chart.js polls that and draws a plain line chart
   with Chart.js (already vendored locally sitewide, see the dashboard's
   trade-activity chart) - no embedded third-party widget at all.
   This replaced an embedded TradingView widget after repeated "chart
   shows blank" reports, worse on mobile than desktop - see the Research
   design-system rule for the full history of that widget's config
   (tried both a bare version and a much richer "analytics platform"
   version, reverted both directions) before this rebuild. Rendering our
   own data with our own already-loaded library means the visitor's
   browser only ever talks to this site for this feature - nothing
   third-party for a blocker, a slow connection to someone else's
   domain, or a competitor's outage to interfere with.
   Same restrained panel language as .bn-research-audio right above it
   (translucent fill, hairline border, no shadow). */
.bn-research-chart{
    padding:1rem 1.1rem;border-radius:12px;margin-bottom:1.75rem;overflow:hidden;
    background:rgba(255,255,255,.03);border:1px solid var(--wlfi-border-secondary)
}
.bn-research-chart__head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.6rem}
.bn-research-chart__title{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;font-weight:600;color:var(--wlfi-text)}
/* .__live-dot suffix - picks up the shared bnLivePulse ring animation
   (and its prefers-reduced-motion off-switch) from bn-depth-3d.css
   automatically, no new keyframes needed here. */
.bn-research-chart__live-dot{width:7px;height:7px;border-radius:50%;background:#00c853;flex-shrink:0}
.bn-research-chart__badge{
    font-size:.625rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--wlfi-text-quaternary);
    background:rgba(255,255,255,.06);border-radius:6px;padding:.15rem .4rem
}
/* The actual live number - "only show the price of the coin, the live
   price" was the explicit request that started this rebuild, so the
   price itself gets real visual weight here rather than being left
   implicit at the chart line's rightmost point. Monospace so the digits
   don't visibly shift width as they update every poll. */
.bn-research-chart__price-row{display:flex;align-items:baseline;gap:.6rem;margin-bottom:.85rem;flex-shrink:0}
.bn-research-chart__price{
    font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:1.625rem;font-weight:700;color:var(--wlfi-text)
}
.bn-research-chart__change{font-size:.9375rem;font-weight:600}
.bn-research-chart__change--up{color:#00c853}
.bn-research-chart__change--down{color:#ff5252}
.bn-research-chart__price-period{font-size:.6875rem;color:var(--wlfi-text-quaternary);text-transform:uppercase;letter-spacing:.05em}
.bn-research-chart__widget{display:flex;flex-direction:column;height:300px}
@media (max-width:768px){
    .bn-research-chart__widget{height:260px}
}
@media (max-width:375px){
    .bn-research-chart__widget{height:220px}
}
.bn-research-chart__canvas-wrap{position:relative;flex:1;min-height:0}
.bn-research-chart__canvas-wrap canvas{display:block!important;width:100%!important;height:100%!important}
/* Marks exactly where the line currently ends - positioned in JS
   (bn-research-chart.js's livePointPlugin, via Chart.js's own
   afterDraw hook) to sit precisely on the chart's rightmost data point,
   colored to match the line's own up/down direction. The __live-dot
   suffix (see .bn-research-chart__live-dot above) picks up the shared
   bnLivePulse ring animation from bn-depth-3d.css automatically -
   "explains status" (Chart.js data continuing to update right at this
   point) rather than motion for its own sake. Starts hidden - shown
   once a real chart has actually rendered at least once, never at a
   stale (0,0) default position before that. */
.bn-research-chart__point-live-dot{
    position:absolute;width:9px;height:9px;border-radius:50%;pointer-events:none;
    transform:translate(-50%,-50%);box-shadow:0 0 0 2px var(--wlfi-bg-secondary);z-index:1
}

/* Loading skeleton (.bn-skeleton/.bn-skeleton--chart are shared sitewide
   utilities from bn-depth-3d.css, reused as-is) + a graceful fallback
   for when the fetch itself fails (Binance briefly down, network
   hiccup, or - unlikely but not impossible with any live network call -
   a slow/failed request to this site's own endpoint). See
   bn-research-chart.js for the fetch/poll/fallback logic; this only
   styles the two states. */
.bn-research-chart__fallback{
    position:absolute;inset:0;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
    text-align:center;padding:1.5rem;background:var(--wlfi-bg-secondary);border-radius:10px
}
/* [hidden] and a class-based "display" rule are the same CSS specificity
   (0,1,0 each) - without scoping display to :not([hidden]) here, this
   rule would win the cascade over the browser's own [hidden]{display:
   none} default and the fallback would stay visibly on screen even
   while its "hidden" attribute is set. */
.bn-research-chart__fallback:not([hidden]){display:flex}
.bn-research-chart__fallback i{font-size:1.5rem;color:var(--wlfi-text-quaternary)}
.bn-research-chart__fallback p{margin:0;color:var(--wlfi-text-secondary);font-size:.875rem;max-width:38ch;line-height:1.5}
.bn-research-chart__fallback a{color:var(--wlfi-brand)!important;font-weight:600;font-size:.875rem;text-decoration:underline!important;text-underline-offset:2px}

/* Compact market-stats panel, directly below the chart - "show accurate
   information... not a large section." Numeric values (market cap, FDV,
   volume, supply, 24h high/low) are filled in by bn-research-chart.js
   on the exact same poll already fetching the price chart's own data
   (ResearchController::chartData() now carries both) - no second
   endpoint/fetch loop needed. Website/whitepaper/explorer/contract are
   plain server-rendered Blade output instead, since those are static
   admin-curated fields (see the Research design-system rule on why
   those specifically are never auto-fetched-and-trusted) - nothing to
   poll, so nothing here waits on JS to appear.
   Same restrained panel language as .bn-research-audio/.bn-research-
   chart above it - one more sibling section, not a heavier new style. */
.bn-research-stats{
    padding:1rem 1.1rem;border-radius:12px;margin-bottom:1.75rem;
    background:rgba(255,255,255,.03);border:1px solid var(--wlfi-border-secondary)
}
.bn-research-stats__grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem 1rem
}
.bn-research-stats__item{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.bn-research-stats__label{
    font-size:.6875rem;font-weight:600;color:var(--wlfi-text-quaternary);
    text-transform:uppercase;letter-spacing:.04em;white-space:nowrap
}
.bn-research-stats__value{
    font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.9375rem;font-weight:700;color:var(--wlfi-text);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.bn-research-stats__delta{font-size:.75rem;font-weight:600;margin-left:.35rem}
.bn-research-stats__delta--up{color:#00c853}
.bn-research-stats__delta--down{color:#ff5252}
/* .bn-skeleton (shared sitewide utility) needs real block dimensions to
   show its shimmer - applied straight to the value span rather than a
   separate overlay element, since this is plain inline text, not a
   canvas needing its own layer underneath. */
.bn-research-stats__value.bn-skeleton{display:inline-block;min-width:4.5rem;height:1.1em}
.bn-research-stats__links{
    display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1rem;padding-top:1rem;
    border-top:1px solid var(--wlfi-border-secondary)
}
.bn-research-stats__link{
    display:inline-flex;align-items:center;gap:.35rem;font-size:.8125rem;font-weight:600;
    color:var(--wlfi-text-secondary)!important;text-decoration:none!important;
    background:rgba(255,255,255,.05);border-radius:999px;padding:.3rem .7rem;transition:color .2s var(--wlfi-ease)
}
.bn-research-stats__link:hover{color:var(--wlfi-brand)!important}
.bn-research-stats__link i{font-size:.8125rem;color:var(--wlfi-text-quaternary)}
.bn-research-stats__contract{
    display:inline-flex;align-items:center;gap:.4rem;font-size:.8125rem;
    background:rgba(255,255,255,.05);border-radius:999px;padding:.3rem .5rem .3rem .7rem;color:var(--wlfi-text-secondary)
}
.bn-research-stats__contract code{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.75rem;color:var(--wlfi-text)}
.bn-research-stats__copy{
    display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:50%;
    background:transparent;border:none;color:var(--wlfi-text-quaternary);cursor:pointer;transition:color .2s var(--wlfi-ease),background .2s var(--wlfi-ease)
}
.bn-research-stats__copy:hover{color:var(--wlfi-brand);background:rgba(255,255,255,.06)}
.bn-research-stats__copy:focus-visible{outline:2px solid var(--wlfi-brand);outline-offset:2px}
.bn-research-stats__copy.is-copied{color:#00c853}
@media (max-width:768px){
    .bn-research-stats__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:375px){
    .bn-research-stats__grid{grid-template-columns:1fr 1fr;gap:.9rem .75rem}
    .bn-research-stats__label{font-size:.625rem}
    .bn-research-stats__value{font-size:.875rem}
}

.bn-research-article__body{font-size:1.0625rem;line-height:1.75;color:var(--wlfi-text)}
.bn-research-article__body h2{font-size:1.375rem;font-weight:700;color:var(--wlfi-text);margin-top:2.25rem;margin-bottom:1rem;letter-spacing:-.01em;text-align:center}
.bn-research-article__body h3{font-size:1.1875rem;font-weight:700;color:var(--wlfi-text);margin-top:1.85rem;margin-bottom:.85rem;text-align:center}
/* Every paragraph wrapped individually in the same left-border "quote"
   language the blockquote rule below already uses, at a dimmer, 28%-
   opacity border instead of blockquote's full solid gold - at full
   strength, repeated on every paragraph of a 5,000-word article, that
   would read as a wall of gold stripes instead of a quiet, consistent
   rhythm that still visibly separates each block from the next. */
.bn-research-article__body p{
    margin-top:0;margin-bottom:1.35em;padding:.2rem 0 .2rem 1.15rem;
    border-left:3px solid var(--wlfi-brand-border)
}
.bn-research-article__body ul,.bn-research-article__body ol{margin-top:0;margin-bottom:1.35em;padding-left:1.4rem;color:var(--wlfi-text)}
.bn-research-article__body li{margin-bottom:.5em;line-height:1.7}
.bn-research-article__body a{color:var(--wlfi-brand)!important;text-decoration:underline!important;text-underline-offset:2px}
.bn-research-article__body blockquote{
    margin-top:1.5em;margin-bottom:1.5em;padding:.25rem 0 .25rem 1.15rem;border-left:3px solid var(--wlfi-brand);
    color:var(--wlfi-text-secondary);font-style:italic
}
.bn-research-article__body strong{color:var(--wlfi-text);font-weight:700}
/* Back to the original, narrower size (matches the hero above) and
   explicitly centered - the widened .bn-research-article__body itself
   no longer constrains these, so without this rule they'd stretch to
   the full 1200px measure along with the surrounding text. aspect-ratio
   reserves the right space before a lazy-loaded image finishes fetching,
   so it doesn't collapse to zero height - without this, each image
   loading in turn pushes the ones below it further down the page than
   where the browser last measured them, and a lazy image far down the
   article can end up chasing a moving trigger point and never firing
   until the user manually scrolls past it again. */
.bn-research-article__body img{
    display:block;width:100%;max-width:var(--bn-research-read);margin-left:auto;margin-right:auto;
    height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px;
    margin-top:1.5em;margin-bottom:1.5em;background:var(--wlfi-bg-tertiary)
}

/* A divider, not a second boxed card - previous updates are a short list
   of links to other articles, not part of this article's own content, so
   a top rule is enough to separate the two without introducing a
   container next to the one just removed above. */
.bn-research-older{width:var(--bn-research-wide);margin:3.5rem auto 0;padding-top:2.5rem;border-top:1px solid var(--wlfi-border-secondary)}
.bn-research-older__title{font-size:1rem;font-weight:700;color:var(--wlfi-text);margin:0 0 1rem;text-transform:uppercase;letter-spacing:.04em;font-size:.8125rem;color:var(--wlfi-text-tertiary)}
.bn-research-older__item{
    display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:1rem 0;
    border-bottom:1px solid var(--wlfi-border-secondary);text-decoration:none!important
}
.bn-research-older__item:last-child{border-bottom:none}
.bn-research-older__item-title{color:var(--wlfi-text);font-weight:600;font-size:.9375rem}
.bn-research-older__item:hover .bn-research-older__item-title{color:var(--wlfi-brand)}
.bn-research-older__item-date{color:var(--wlfi-text-quaternary);font-size:.8125rem;white-space:nowrap}

/* ---------- Reactions ----------
 * Pinned directly under the audio player now, not after the article
 * body - "the emojis and comments would look better underneath the
 * audio file... hardly takes up space." Nested inside .bn-research-
 * article (a sibling of .bn-research-audio, not a top-level page
 * section like the pager below it), so it deliberately does NOT
 * redeclare width/margin-inline:auto - it just inherits the article's
 * own already-constrained width. No label, no panel background/border
 * - just the four buttons in a single compact row, so this reads as a
 * lightweight inline control, not another boxed section competing with
 * audio/chart/stats for visual weight. Emoji size bumped up from the
 * original (1.0625rem -> 1.1875rem) since removing the label means the
 * emoji themselves now carry the row's only visual identity. See
 * ResearchController::REACTION_EMOJIS for the current four and why
 * each was chosen. */
.bn-research-reactions{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.75rem}
/* position:relative so .__mark (the "you picked this one" checkmark
   badge) can pin itself to this button's own corner rather than the
   row's. Only one button in the row can ever carry .is-selected at a
   time now - "only one per user" - so .__mark only ever shows on at
   most one button. */
.bn-research-reactions__btn{
    position:relative;display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .65rem;border-radius:999px;
    cursor:pointer;background:rgba(255,255,255,.05);border:1px solid var(--wlfi-border-secondary);
    color:var(--wlfi-text-secondary);font-size:.8125rem;font-weight:600;line-height:1.3;
    transition:border-color .2s var(--wlfi-ease),background .2s var(--wlfi-ease),transform .15s var(--wlfi-ease)
}
.bn-research-reactions__btn:hover{border-color:var(--wlfi-brand-border);background:var(--wlfi-brand-dim)}
.bn-research-reactions__btn:active{transform:scale(.94)}
.bn-research-reactions__btn.is-selected{background:var(--wlfi-brand-dim);border-color:var(--wlfi-brand-border);color:var(--wlfi-brand-text)}
.bn-research-reactions__btn:focus-visible{outline:2px solid var(--wlfi-brand);outline-offset:2px}
.bn-research-reactions__btn:disabled{opacity:.6;cursor:default}
.bn-research-reactions__emoji{font-size:1.1875rem;line-height:1}
.bn-research-reactions__count{font-family:ui-monospace,'SF Mono',Menlo,monospace;font-size:.75rem;min-width:1ch;display:inline-block}
/* Hidden (scaled/faded down) by default, popped in only for the one
   selected button - a second, explicit "this is the one you chose"
   signal on top of the background/border color change above, since a
   color shift alone was judged not clear enough. box-shadow ring
   (rather than a border) so it doesn't fight with the button's own
   border-radius/border at this small a size. */
.bn-research-reactions__mark{
    position:absolute;top:-.3rem;right:-.3rem;width:1rem;height:1rem;border-radius:50%;
    display:flex;align-items:center;justify-content:center;background:var(--wlfi-brand);color:#13100d;
    font-size:.5625rem;line-height:1;box-shadow:0 0 0 2px var(--wlfi-bg-secondary);
    opacity:0;transform:scale(.4);transition:opacity .15s var(--wlfi-ease),transform .15s var(--wlfi-ease)
}
.bn-research-reactions__btn.is-selected .bn-research-reactions__mark{opacity:1;transform:scale(1)}
/* Toggled briefly by bn-research-chart.js after a successful react() -
   "explains status" (the count you just changed), not decoration -
   reduced-motion override lives in the consolidated a11y block below. */
@keyframes bnReactionPop{0%{transform:scale(1)}45%{transform:scale(1.4)}100%{transform:scale(1)}}
.bn-research-reactions__count.is-updated{animation:bnReactionPop .35s var(--wlfi-ease)}

/* ---------- Previous / Next article pager ----------
 * Spans every topic, not just this one - there's already a topic-
 * scoped "Previous updates" list (.bn-research-older) for that
 * narrower case, so this is deliberately the wider, blog-standard
 * "keep reading" convention instead. Next always reads on the right
 * (forced via grid-column, so it stays right even as the only item
 * present when there's no previous article yet). */
.bn-research-pager{width:var(--bn-research-wide);margin:2.5rem auto 0;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.bn-research-pager__link{
    display:flex;flex-direction:column;gap:.35rem;padding:1rem 1.15rem;border-radius:12px;min-width:0;
    background:rgba(255,255,255,.03);border:1px solid var(--wlfi-border-secondary);text-decoration:none!important;
    transition:border-color .2s var(--wlfi-ease),background .2s var(--wlfi-ease),transform .2s var(--wlfi-ease)
}
.bn-research-pager__link:hover{border-color:var(--wlfi-brand-border);background:var(--wlfi-brand-dim);transform:translateY(-1px)}
.bn-research-pager__link:focus-visible{outline:2px solid var(--wlfi-brand);outline-offset:3px}
.bn-research-pager__link--next{grid-column:2;text-align:right;align-items:flex-end}
.bn-research-pager__dir{
    display:flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:700;color:var(--wlfi-text-quaternary);
    text-transform:uppercase;letter-spacing:.04em
}
.bn-research-pager__topic{font-size:.75rem;font-weight:600;color:var(--wlfi-brand)}
.bn-research-pager__title{
    font-size:.9375rem;font-weight:600;color:var(--wlfi-text);line-height:1.4;margin:0;width:100%;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden
}

/* ---------- Comments ----------
 * Moved up to directly under the reactions row (both now sit right
 * below the audio player, inside .bn-research-article) - "very minimal
 * where it doesn't take up any space until you open it." A native
 * <details>/<summary> instead of a JS-toggled div: the collapse/expand
 * itself needs zero JavaScript and is keyboard/screen-reader operable
 * for free, and the [open] attribute gives CSS a hook for the chevron
 * rotation with no JS there either - bn-research-chart.js's existing
 * initCommentForm() (character counter, submit-disable) still only
 * concerns itself with the form inside, unaffected by whether the
 * <details> wrapping it happens to be open or closed.
 *
 * Flat, no threaded replies - deliberately scoped down, not requested.
 * Visible immediately on submission (delete-after-the-fact moderation
 * from the admin research screen), not held in a pre-approval queue -
 * see ResearchController::comment()'s own docblock for the full
 * reasoning. That same controller flashes `bnCommentsOpen` after a
 * successful post or a captcha failure specifically so a visitor who
 * just submitted doesn't land back on a re-collapsed button - see the
 * `open` attribute's condition in the template. */
.bn-research-comments{margin:0 0 1.75rem;scroll-margin-top:calc(var(--pw-nav-height,4.5rem) + 1rem)}
.bn-research-comments__summary{
    display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .8rem;border-radius:999px;cursor:pointer;
    background:rgba(255,255,255,.05);border:1px solid var(--wlfi-border-secondary);color:var(--wlfi-text-secondary);
    font-size:.8125rem;font-weight:600;list-style:none;user-select:none;
    transition:border-color .2s var(--wlfi-ease),background .2s var(--wlfi-ease)
}
.bn-research-comments__summary::-webkit-details-marker{display:none}
.bn-research-comments__summary:hover{border-color:var(--wlfi-brand-border);background:var(--wlfi-brand-dim)}
.bn-research-comments__summary:focus-visible{outline:2px solid var(--wlfi-brand);outline-offset:2px}
.bn-research-comments__summary i:not(.bn-research-comments__chevron){color:var(--wlfi-text-quaternary);font-size:.875rem}
/* [open] lives on the <details> itself, so this targets the summary
   through its parent rather than needing a class toggled by JS. */
.bn-research-comments__chevron{font-size:.625rem;margin-left:.1rem;transition:transform .2s var(--wlfi-ease)}
.bn-research-comments[open]>.bn-research-comments__summary .bn-research-comments__chevron{transform:rotate(180deg)}

.bn-research-comments__panel{
    margin-top:.75rem;padding:1.1rem 1.25rem;border-radius:12px;
    background:rgba(255,255,255,.03);border:1px solid var(--wlfi-border-secondary)
}
.bn-research-comments__form{
    display:flex;flex-direction:column;gap:.75rem;margin-bottom:1.25rem;padding-bottom:1.25rem;
    border-bottom:1px solid var(--wlfi-border-secondary)
}
.bn-research-comments__posting-as{margin:0;font-size:.8125rem;color:var(--wlfi-text-tertiary)}
.bn-research-comments__posting-as strong{color:var(--wlfi-text)}
.bn-research-comments__input,.bn-research-comments__textarea{
    width:100%;border-radius:10px;border:1px solid var(--wlfi-border-secondary);background:var(--wlfi-bg-tertiary);
    color:var(--wlfi-text);font-family:inherit;font-size:.9375rem;padding:.65rem .85rem;resize:vertical;
    transition:border-color .2s var(--wlfi-ease),box-shadow .2s var(--wlfi-ease)
}
.bn-research-comments__textarea{min-height:4.5rem}
.bn-research-comments__input::placeholder,.bn-research-comments__textarea::placeholder{color:var(--wlfi-text-quaternary)}
.bn-research-comments__input:focus,.bn-research-comments__textarea:focus{
    outline:0;border-color:rgba(236,196,108,.55);box-shadow:0 0 0 3px var(--wlfi-brand-dim)
}
.bn-research-comments__input--invalid,.bn-research-comments__textarea--invalid{border-color:#ff5252}
.bn-research-comments__error{margin:-.35rem 0 0;font-size:.8125rem;color:#ff5252}
/* margin-left:auto on the counter (not justify-content:space-between on
   the row) so it stays pinned right whether or not the error message
   next to it is actually present - space-between would instead collapse
   a lone remaining child to the start. */
.bn-research-comments__textarea-foot{display:flex;align-items:center;gap:.75rem;margin-top:-.35rem}
.bn-research-comments__counter{
    margin-left:auto;flex-shrink:0;font-size:.75rem;color:var(--wlfi-text-quaternary);
    font-family:ui-monospace,'SF Mono',Menlo,monospace
}
.bn-research-comments__form-foot{display:flex;align-items:center;justify-content:flex-end}
.bn-research-comments__submit{
    flex-shrink:0;padding:.6rem 1.5rem;border-radius:999px;border:none;background:var(--wlfi-brand);color:#13100d;
    font-size:.875rem;font-weight:700;cursor:pointer;transition:filter .2s var(--wlfi-ease)
}
.bn-research-comments__submit:hover{filter:brightness(1.08)}
.bn-research-comments__submit:active{filter:brightness(.94)}
.bn-research-comments__submit:focus-visible{outline:2px solid var(--wlfi-brand);outline-offset:2px}

/* Height-capped and independently scrollable so an article with many
   comments never grows this panel - or the page - unbounded. The cap
   applies even once open: "scrollable to see the other comments," not
   "reveal all of them and keep growing." ~3-4 comments visible before
   scrolling starts, at this font size/avatar size. */
.bn-research-comments__scroll{max-height:320px;overflow-y:auto;padding-right:.35rem;margin-right:-.35rem}
.bn-research-comments__scroll::-webkit-scrollbar{width:6px}
.bn-research-comments__scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:999px}
.bn-research-comments__scroll::-webkit-scrollbar-track{background:transparent}

.bn-research-comments__list{display:flex;flex-direction:column;gap:1.25rem}
.bn-research-comments__item{display:flex;gap:.85rem}
.bn-research-comments__avatar{width:2.25rem;height:2.25rem;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--wlfi-bg-tertiary)}
.bn-research-comments__body{flex:1;min-width:0}
.bn-research-comments__meta{display:flex;align-items:center;gap:.5rem;margin-bottom:.3rem;flex-wrap:wrap}
.bn-research-comments__name{font-size:.875rem;font-weight:700;color:var(--wlfi-text)}
.bn-research-comments__badge{
    font-size:.625rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--wlfi-brand-text);
    background:var(--wlfi-brand-dim);border:1px solid var(--wlfi-brand-border);border-radius:6px;padding:.1rem .4rem
}
.bn-research-comments__date{font-size:.75rem;color:var(--wlfi-text-quaternary)}
.bn-research-comments__text{margin:0;font-size:.9375rem;line-height:1.6;color:var(--wlfi-text-secondary);white-space:pre-wrap;word-break:break-word}
.bn-research-comments__empty{color:var(--wlfi-text-quaternary);font-size:.875rem;padding:.5rem 0;text-align:center}

/* ---------- Breakpoints (320 / 375 / 768 / 1024 / 1440 / 1920) ---------- */
@media (max-width:768px){
    .bn-research__grid{grid-template-columns:1fr}
    .bn-research-topic__head{flex-direction:column;text-align:center}
    .bn-research-topic__name{justify-content:center}
    .bn-research-topic__intro{max-width:none}
    /* Stacked, previous above next - the two-column side-by-side race
       reads fine on a laptop but leaves each title only ~half the
       width to work with, which got tight fast with real headlines. */
    .bn-research-pager{grid-template-columns:1fr}
    .bn-research-pager__link--next{grid-column:1;text-align:left;align-items:flex-start}
}
@media (max-width:375px){
    .bn-research-card{padding:1.15rem}
    .bn-research-article__body{font-size:1rem}
    .bn-research__search{max-width:none}
    .bn-research-card__foot{flex-direction:column;align-items:flex-start;gap:.35rem}
    .bn-research-comments__panel{padding:.9rem}
}
@media (min-width:1440px){
    .bn-research__grid{grid-template-columns:repeat(3,1fr)}
}

/* ---------- AI research assistant ----------
   Same restrained <details>/<summary> pill pattern as
   .bn-research-comments right above it - collapsed by default, takes no
   extra space until opened. Only ever rendered when the admin has
   turned the feature on (see research/partials/assistant.blade.php). */
.bn-research-assistant{margin-top:.75rem}
.bn-research-assistant__summary{
    display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .8rem;border-radius:999px;cursor:pointer;
    background:rgba(255,255,255,.05);border:1px solid var(--wlfi-border-secondary);color:var(--wlfi-text-secondary);
    font-size:.8125rem;font-weight:600;list-style:none;user-select:none;
    transition:border-color .2s var(--wlfi-ease),background .2s var(--wlfi-ease)
}
.bn-research-assistant__summary::-webkit-details-marker{display:none}
.bn-research-assistant__summary:hover{border-color:var(--wlfi-brand-border);background:var(--wlfi-brand-dim)}
.bn-research-assistant__summary:focus-visible{outline:2px solid var(--wlfi-brand);outline-offset:2px}
.bn-research-assistant__summary i:not(.bn-research-assistant__chevron){color:var(--wlfi-text-quaternary);font-size:.875rem}
.bn-research-assistant__chevron{font-size:.625rem;margin-left:.1rem;transition:transform .2s var(--wlfi-ease)}
.bn-research-assistant[open]>.bn-research-assistant__summary .bn-research-assistant__chevron{transform:rotate(180deg)}

.bn-research-assistant__panel{
    margin-top:.75rem;padding:1.1rem 1.25rem;border-radius:12px;
    background:rgba(255,255,255,.03);border:1px solid var(--wlfi-border-secondary)
}
.bn-research-assistant__disclaimer{
    margin:0 0 .85rem;font-size:.75rem;color:var(--wlfi-text-quaternary);line-height:1.5
}
.bn-research-assistant__form{display:flex;gap:.6rem}
.bn-research-assistant__input{
    flex:1 1 auto;border-radius:10px;border:1px solid var(--wlfi-border-secondary);background:var(--wlfi-bg-tertiary);
    color:var(--wlfi-text);font-family:inherit;font-size:.9375rem;padding:.65rem .85rem;
    transition:border-color .2s var(--wlfi-ease),box-shadow .2s var(--wlfi-ease)
}
.bn-research-assistant__input::placeholder{color:var(--wlfi-text-quaternary)}
.bn-research-assistant__input:focus{
    outline:0;border-color:rgba(236,196,108,.55);box-shadow:0 0 0 3px var(--wlfi-brand-dim)
}
.bn-research-assistant__submit{
    flex-shrink:0;padding:.6rem 1.25rem;border-radius:999px;border:none;background:var(--wlfi-brand);color:#13100d;
    font-size:.875rem;font-weight:700;cursor:pointer;transition:filter .2s var(--wlfi-ease)
}
.bn-research-assistant__submit:hover{filter:brightness(1.08)}
.bn-research-assistant__submit:active{filter:brightness(.94)}
.bn-research-assistant__submit:focus-visible{outline:2px solid var(--wlfi-brand);outline-offset:2px}
.bn-research-assistant__submit:disabled{opacity:.6;cursor:default;filter:none}
.bn-research-assistant__exchange{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--wlfi-border-secondary)}
.bn-research-assistant__question{margin:0 0 .5rem;font-size:.875rem;font-weight:600;color:var(--wlfi-text-secondary)}
.bn-research-assistant__question::before{content:"Q: ";color:var(--wlfi-text-quaternary);font-weight:700}
.bn-research-assistant__response{margin:0;font-size:.9375rem;line-height:1.6;color:var(--wlfi-text)}
.bn-research-assistant__error{margin:.75rem 0 0;font-size:.8125rem;color:#ff5252}
@media (max-width:480px){
    .bn-research-assistant__form{flex-direction:column}
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion:reduce){
    .bn-research-card,.bn-research-card__showcase{transition:none}
    .bn-research-card:hover{transform:none}
    .bn-research-card:hover .bn-research-card__showcase{transform:none}
    .bn-research-reactions__btn{transition:none}
    .bn-research-reactions__btn:active{transform:none}
    .bn-research-reactions__mark{transition:none}
    .bn-research-reactions__count.is-updated{animation:none}
    .bn-research-pager__link{transition:none}
    .bn-research-pager__link:hover{transform:none}
    .bn-research-assistant__chevron{transition:none}
}
.bn-research-card:focus-visible,.bn-research-older__item:focus-visible{outline:2px solid var(--wlfi-brand);outline-offset:3px}