/* ==========================================================================
   Scientific Articles hub — /articles/
   --------------------------------------------------------------------------
   A clean-slate layer for the rebuilt knowledge centre. Everything is scoped
   under `.mg-sci`, deliberately using a NEW class namespace rather than the
   older `.mg-science__*` one: that surface had been extended three times and
   the layers had begun to fight each other. Starting from a fresh namespace
   means no specificity war with `rd-content.css`.

   Structural rule for this page: every control appears exactly once, and all
   of them live together in the library section, next to the results they act
   on — never in the hero, a screen away from their effect.
     · Search        → .mg-sci__searchpanel  (#mg-sci-q)
     · Quick terms   → .mg-sci__tagrow       (button[data-sci-term])
     · Category      → .mg-sci__cats-sec     (button[data-sci-cat])
     · Refinements   → .mg-sci__panel        (#mg-sci-panel)
   An earlier build shipped two search inputs and three category selectors;
   if you add a control here, replace one — do not stack another.

   Second rule: ONE CLASS NAME, ONE COMPONENT. `.mg-sci__lead` was once both
   the hero paragraph and the featured article card; the card's white
   background won the cascade and made the hero text invisible. Grep before
   reusing a name here.
   ========================================================================== */

.mg-sci {
  --sci-blue: var(--mg-accent, #0067b1);      /* fills: white text sits on this */
  --sci-blue-lift: #4aa3e8;
  --sci-ink-accent: var(--mg-accent, #0067b1); /* accent TEXT and icons */
  --sci-pad: clamp(20px, 4vw, 40px);
  /* Offset for the sticky toolbar. The site header is a FIXED pill, so this
     must clear its real height at every breakpoint or the toolbar scrolls
     underneath it and its controls stop being clickable — which is exactly
     what happened on mobile. Measured against enhance.css:
       >720px  header at top:8px,  nav ~64px tall  -> ~72px occupied
       ≤720px  header at top:8px,  nav  52px tall  -> ~60px occupied
       ≤600px  header at top:0,    nav ~56px tall  -> ~72px occupied
     Each value adds a small breathing gap on top of that. */
  --sci-stick: 92px;
  /* CSS gradients do not mirror with `direction`, so any gradient with a
     side-to-side axis needs that axis stated per writing direction. The
     headline's accent rule fades away from the start edge. */
  --sci-rule-dir: left;

  display: block;
  background: var(--mg-bg, #fff);
  color: var(--mg-text, #0b1320);
  /* Deliberately no `overflow-x: clip` here: it is unsupported in older
     WebViews and has previously broken the fixed header on mobile in this
     theme. Each section that can overflow clips itself instead. */
}

.mg-sci__wrap {
  width: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--sci-pad);
  box-sizing: border-box;
}

.mg-sci .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

[dir="ltr"] .mg-sci { --sci-rule-dir: right; }

/* The `hidden` attribute must win over every author `display` in this file.
   A UA sets `[hidden] { display: none }`, but ANY author display declaration
   outranks it — which is why the search field's clear button and the active
   filter row stayed on screen while JS believed it had hidden them. One rule
   here fixes every current case and any control added later. */
.mg-sci [hidden] { display: none !important; }

.mg-sci :focus-visible {
  outline: 3px solid var(--sci-ink-accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ==========================================================================
   1. Hero
   --------------------------------------------------------------------------
   A LIGHT hero: pale blue-white ground, dark navy headline, and a defined
   visual "stage" holding the implant.

   Two structural rules earned the hard way.

   (1) One coordinate space. The photograph, the 3D canvas and the floating
   labels were once positioned against three different ancestors — the
   section, the section again, and a sibling grid column. Nothing stayed put
   relative to anything else as the viewport changed, so the labels drifted
   off the object they described. Everything visual now lives inside
   `.mg-sci__hero-stage` and is positioned against it.

   (2) One palette. An earlier revision made this a dark navy panel, which
   inverted every text colour and forced a parallel set of literal values —
   that is what produced the invisible-paragraph bug. The light hero uses the
   same tokens as the rest of the page; dark mode restates them once, below.
   ========================================================================== */

.mg-sci__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(104px, 10vw, 148px) clamp(72px, 7vw, 104px);
  background:
    radial-gradient(120% 92% at 86% -12%, #e7f1fb 0%, rgba(231, 241, 251, 0) 62%),
    linear-gradient(198deg, #f7fbfe 0%, #eef5fb 46%, #f7fbfe 100%);
  color: var(--mg-text, #0b1320);
}

/* ------------------------- 1a. Painted background ------------------------ */

/* A faint engineering grid, masked so it never reaches the headline. Drawn
   with two gradients rather than an image: nothing to ship, nothing to 404. */
.mg-sci__hero-grid {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(21, 62, 108, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(21, 62, 108, .05) 1px, transparent 1px);
  background-size: 66px 66px;
  -webkit-mask-image: radial-gradient(86% 76% at 74% 36%, #000 0%, rgba(0, 0, 0, .4) 50%, transparent 80%);
  mask-image: radial-gradient(86% 76% at 74% 36%, #000 0%, rgba(0, 0, 0, .4) 50%, transparent 80%);
}

/* One soft accent glow behind the stage — a single light source, not a
   rainbow of overlapping gradients. */
.mg-sci__hero-glow {
  position: absolute;
  z-index: -1;
  inset-block-start: -14%;
  inset-inline-end: -8%;
  width: min(64vw, 800px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(0, 103, 177, .13) 0%, rgba(0, 103, 177, .045) 44%, transparent 70%);
}

/* ---------------------------- 1b. Layout --------------------------------- */

.mg-sci__hero-in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
  gap: clamp(24px, 3.4vw, 56px);
  align-items: center;
}

.mg-sci__hero-copy { min-width: 0; }

/* ---------------------------- 1c. The stage ------------------------------ */

/* Every visual layer is a child of this box and positioned against it. It
   reaches a little past the container's padding so the composition still
   feels like it belongs to the page edge rather than to a card. */
.mg-sci__hero-stage {
  position: relative;
  align-self: stretch;
  min-height: clamp(380px, 37vw, 540px);
  margin-inline-end: calc(var(--sci-pad) * -.55);

  /* Half-width of the rendered implant at its widest, in px. The 3D camera
     frames by HEIGHT, so this is a fixed fraction (0.0897, asserted in
     test3d.mjs) of the stage height above — which is why it mirrors that
     clamp instead of being a percentage of the stage's width. The annotation
     labels hang off it, so they sit beside the object at every viewport
     rather than out at the panel edge. */
  --sci-r: clamp(34px, 3.32vw, 48px);
}

.mg-sci__hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transition: opacity .9s var(--mg-ease, ease);
}

.mg-sci__hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* The source photo is 1672x941 (1.78:1) and the stage is close to 1.1:1, so
     `cover` throws away about 40% of the width. The fixture stands at x≈25% of
     the original, and the old 32% here put the visible window at roughly
     13%–73% — which left the implant at a fifth of the way across the stage,
     sitting right where the vignette below is at its strongest. It looked like
     half a photograph with the subject falling off the edge.
     At 6% the window starts near the left of the frame and the fixture lands
     around a third of the way in, clear of the fade and clear of the crop. */
  object-position: 6% 50%;
}

/* Dissolve the photograph's edges into the hero ground so it reads as one
   surface rather than a rectangle pasted on top. A RADIAL vignette, not a
   linear fade: linear gradients do not mirror with `direction`, and this one
   would have needed a per-direction axis to stay correct in RTL.
   Widened and weakened from the original (70%/64%, opaque by the corner): the
   old curve was already 60% white over the bottom of the fixture, so the one
   part of the picture worth showing was the part it erased. */
.mg-sci__hero-fade {
  position: absolute;
  inset: 0;
  background: radial-gradient(86% 84% at 44% 50%,
    rgba(246, 250, 253, 0) 0%,
    rgba(246, 250, 253, 0) 52%,
    rgba(246, 250, 253, .34) 74%,
    rgba(246, 250, 253, .88) 92%,
    #f6fafd 100%);
}

/* Concentric scan rings behind the implant. Centred, so plain physical
   properties are unambiguous here and mirror correctly by definition. */
.mg-sci__hero-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(76%, 440px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(0, 103, 177, .085) 0%, transparent 62%);
  box-shadow: 0 0 0 1px rgba(0, 103, 177, .14) inset;
  transition: opacity .9s var(--mg-ease, ease);
}

.mg-sci__hero-rings::before,
.mg-sci__hero-rings::after {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  border: 1px solid rgba(0, 103, 177, .13);
}

.mg-sci__hero-rings::after { inset: 33%; border-color: rgba(0, 103, 177, .2); }

/* A slow dashed orbit with a single marker on it. This is the only moving
   decoration in the hero; it carries a satellite dot so the rotation reads as
   deliberate rather than as a shimmering border. */
.mg-sci__hero-orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(94%, 560px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px dashed rgba(0, 103, 177, .2);
  pointer-events: none;
  animation: mg-sci-orbit 52s linear infinite;
}

.mg-sci__hero-orbit::after {
  content: "";
  position: absolute;
  top: -4px;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-radius: 50%;
  background: var(--sci-blue);
  box-shadow: 0 0 0 4px rgba(0, 103, 177, .14);
}

@keyframes mg-sci-orbit {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Two diagonal corner marks. They frame the object the way a measurement
   crop does, without drawing a box around it. */
.mg-sci__hero-ticks {
  position: absolute;
  inset: clamp(4px, 1.2vw, 16px);
  pointer-events: none;
}

.mg-sci__hero-ticks::before,
.mg-sci__hero-ticks::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border: 1px solid rgba(0, 103, 177, .26);
  border-radius: 4px;
}

.mg-sci__hero-ticks::before {
  inset-block-start: 0;
  inset-inline-start: 0;
  border-inline-end: 0;
  border-block-end: 0;
}

.mg-sci__hero-ticks::after {
  inset-block-end: 0;
  inset-inline-end: 0;
  border-inline-start: 0;
  border-block-start: 0;
}

/* ---------------------------- 1c2. 3D implant ---------------------------- */

/* Fills the stage. It starts fully transparent and is only revealed by the
   `is-ready` class, which the script adds after a frame has actually
   rendered — so a blocked CDN or a device without WebGL leaves the
   photograph untouched rather than showing an empty box. */
.mg-sci__hero-3d {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity .9s var(--mg-ease, ease);
}

.mg-sci__hero-3d.is-ready { opacity: 1; }
.mg-sci__hero-3d canvas { display: block; width: 100% !important; height: 100% !important; }

/* With the 3D object present the photograph steps out entirely and the generic
   labels give way to the anatomical annotations.

   It used to stay at opacity .26 with a 3 px blur. That was an attempt to fix
   the real problem — the bundled hero image is ITSELF a picture of an implant,
   so at low opacity the panel showed two implants and the annotation labels
   pointed at neither of them unambiguously — but a blurred quarter-opacity
   photograph, cropped and vignetted, does not read as "ground". It reads as a
   half-loaded image, which is exactly what it was reported as.

   So: one implant on the stage, and the rings, orbit and ticks are the
   backdrop. Nothing is lost, because the layer being removed was already 74%
   invisible. Where WebGL is unavailable or three.js was never fetched, the
   photograph stays sharp and full-strength and is the whole hero. */
.mg-sci__hero-stage:has(.mg-sci__hero-3d.is-ready) .mg-sci__hero-media {
  opacity: 0;
}
.mg-sci__hero-stage:has(.mg-sci__hero-3d.is-ready) .mg-sci__hero-rings { opacity: .78; }
.mg-sci__hero-stage:has(.mg-sci__hero-3d.is-ready) .mg-sci__hero-orbit { opacity: .62; }
.mg-sci__hero-stage:has(.mg-sci__hero-3d.is-ready) .mg-sci__hero-labels { opacity: 0; }
.mg-sci__hero-stage:has(.mg-sci__hero-3d.is-ready) .mg-sci__hero-anno { opacity: 1; }

/* ---------------------------- 1d. Copy column ---------------------------- */

/* A pill rather than the old label-plus-rule: it reads as a live status
   marker, which is what the pulsing dot is there to say. */
.mg-sci__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 20px;
  padding: 7px 15px 7px 12px;
  border: 1px solid #d7e5f2;
  border-radius: var(--mg-r-pill, 999px);
  background: rgba(255, 255, 255, .82);
  box-shadow: 0 10px 24px -20px rgba(16, 37, 74, .8);
  color: #2f5480;   /* 6.34:1 on the pill */
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.5;
}

.mg-sci__eyebrow-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sci-blue);
  animation: mg-sci-pulse 2.8s var(--mg-ease, ease-out) infinite;
}

@keyframes mg-sci-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 103, 177, .5); }
  70%  { box-shadow: 0 0 0 9px rgba(0, 103, 177, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 103, 177, 0); }
}

.mg-sci__hero h1 {
  margin: 0;
  color: #0f2038;
  font-size: clamp(2rem, 1rem + 3.9vw, 3.7rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.02em;
  text-wrap: balance;
}

/* The second line carries the accent, and a short rule under it closes the
   headline off. The rule's gradient needs its axis stated per writing
   direction — CSS gradients do not mirror with `direction`. */
.mg-sci__hero h1 em {
  display: block;
  font-style: normal;
  font-weight: 800;
  color: var(--sci-ink-accent);
}

.mg-sci__hero h1 em::after {
  content: "";
  display: block;
  width: 78px;
  height: 4px;
  margin-block-start: 18px;
  border-radius: 3px;
  background: linear-gradient(to var(--sci-rule-dir, left), var(--sci-blue), rgba(0, 103, 177, .16));
}

.mg-sci__hero-lead {
  max-width: 54ch;
  margin: 20px 0 0;
  color: #4c6076;   /* 6.35:1 on the hero ground */
  font-size: clamp(.98rem, .92rem + .32vw, 1.1rem);
  line-height: 2.05;
  text-wrap: pretty;
}

/* ---------------------------- 1e. Capabilities --------------------------- */

/* What the library lets you do — deliberately carrying no figures. Every
   count lives in exactly one place, the bar below; the old hero repeated two
   of them a few hundred pixels above their own stat tile. */
.mg-sci__caps {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.mg-sci__caps li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px 8px 9px;
  border: 1px solid #dbe7f3;
  border-radius: 14px;
  background: rgba(255, 255, 255, .82);
  color: #26405f;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  box-shadow: 0 10px 22px -20px rgba(16, 37, 74, .8);
}

.mg-sci__cap-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 9px;
  background: #e8f1fa;
  color: var(--sci-ink-accent);
}

.mg-sci__cap-ic svg { width: 15px; height: 15px; }

.mg-sci__hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.mg-sci__hero-cta .mg-sci__btn { min-height: 52px; padding-inline: 26px; font-size: 14.5px; }
.mg-sci__hero-cta .mg-sci__btn svg { width: 17px; height: 17px; }

/* ---------------------------- 1f. Newest article ------------------------- */

/* One real piece of content, named, dated and linked. It is read from the
   same query that builds the grid, so it cannot drift out of date. */
.mg-sci__latest {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 580px;
  margin-top: 26px;
  padding: 11px 12px 11px 14px;
  border: 1px solid #dbe7f3;
  border-radius: 16px;
  background: rgba(255, 255, 255, .74);
  color: #17304f;
  text-decoration: none;
  transition: border-color .2s var(--mg-ease, ease), background .2s var(--mg-ease, ease), box-shadow .2s var(--mg-ease, ease), transform .2s var(--mg-ease, ease);
}

.mg-sci__latest:hover {
  border-color: var(--sci-blue);
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 18px 36px -24px rgba(16, 37, 74, .8);
}

.mg-sci__latest-tag {
  flex: none;
  padding: 5px 10px;
  border-radius: 8px;
  background: var(--sci-blue);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.mg-sci__latest-t {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mg-sci__latest-d {
  flex: none;
  color: #55677e;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.mg-sci__latest-go {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--sci-ink-accent);
  transition: transform .2s var(--mg-ease, ease);
}

.mg-sci__latest:hover .mg-sci__latest-go { transform: translateX(-4px); }

/* ---------------------------- 1g. Entrance ------------------------------- */

/* Staggered, and only when the visitor has not asked for less motion. The
   `both` fill would otherwise leave the copy at opacity 0 on a browser that
   never runs the animation, so the whole block is gated on the query rather
   than merely neutralised inside it. */
@media (prefers-reduced-motion: no-preference) {
  .mg-sci__hero-copy > * {
    animation: mg-sci-rise .72s var(--mg-ease, cubic-bezier(.22, .61, .36, 1)) both;
  }
  .mg-sci__hero-copy > *:nth-child(1) { animation-delay: .04s; }
  .mg-sci__hero-copy > *:nth-child(2) { animation-delay: .1s; }
  .mg-sci__hero-copy > *:nth-child(3) { animation-delay: .16s; }
  .mg-sci__hero-copy > *:nth-child(4) { animation-delay: .22s; }
  .mg-sci__hero-copy > *:nth-child(5) { animation-delay: .28s; }
  .mg-sci__hero-copy > *:nth-child(6) { animation-delay: .34s; }
  .mg-sci__hero-stage { animation: mg-sci-stage 1.1s .12s var(--mg-ease, cubic-bezier(.22, .61, .36, 1)) both; }
}

@keyframes mg-sci-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes mg-sci-stage {
  from { opacity: 0; transform: scale(.965); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------- 1d. Search (now in the filter area) --------- */

/* Groups the single search field with its quick terms, directly above the
   category tabs and the results they filter. It used to sit in the hero,
   which put the control a full screen away from what it changed. */
.mg-sci__searchpanel {
  margin-bottom: 18px;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--mg-border, #e5eaf1);
  border-radius: 18px;
  background: var(--mg-surface, #f5f8fc);
}

.mg-sci__search {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin: 0;
}

/* Dark navy action square, as in the reference. It is first in source order
   so keyboard focus reaches the action before the field's clear button. */
.mg-sci__search-go {
  flex: none;
  display: grid;
  place-items: center;
  width: 62px;
  padding: 0;   /* buttons carry UA padding; clear it so `place-items` is exact */
  border: 0;
  border-radius: 16px;
  background: #10254a;
  color: #fff;
  cursor: pointer;
  transition: background .2s var(--mg-ease, ease), transform .2s var(--mg-ease, ease), box-shadow .2s var(--mg-ease, ease);
  box-shadow: 0 14px 30px -14px rgba(16, 37, 74, .75);
}

.mg-sci__search-go svg { width: 22px; height: 22px; }
.mg-sci__search-go:hover { background: #1b3a6d; transform: translateY(-2px); box-shadow: 0 20px 36px -16px rgba(16, 37, 74, .85); }
.mg-sci__search-go:active { transform: translateY(0); }

.mg-sci__search-field {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  background: #fff;
  /* 2px at rest as well as on focus. The border is half of the focus
     indicator, so growing it on focus would nudge the text sideways by a
     pixel every time the field is entered. */
  border: 2px solid #dfe9f3;
  border-radius: 16px;
  /* 10px on the clear-button side is exactly what the 38px button leaves
     above and below itself inside the 58px line, so it sits in a square of
     space instead of being pushed into the corner. */
  padding-inline: 22px 10px;
  box-shadow: 0 10px 26px -18px rgba(16, 37, 74, .35);
  transition: border-color .2s var(--mg-ease, ease), box-shadow .2s var(--mg-ease, ease);
}

/* ONE focus band, not two rectangles.

   The field is a single visual control made of an input plus a clear button,
   so the focus indicator belongs on the box. It used to be drawn at
   `outline-offset: 2px`, and that 2px of bare background between the blue
   border and the amber ring is precisely what read as "an orange box and a
   grey box". At offset 0 the two sit flush and form one 5px band.

   The pairing is also what makes it accessible. Amber `--mg-focus` (#ffbf47)
   is only 1.63:1 against white, well under the 3:1 that WCAG 2.4.11 asks of a
   focus indicator, so amber alone on this pale panel would not qualify. The
   2px accent-blue border carries the contrast (5.1:1 on white, 5.4:1 against
   the amber beside it) and the amber keeps the site's focus colour
   recognisable. Neither half works on its own here. */
.mg-sci__search-field:focus-within {
  border-color: var(--mg-accent, #0067b1);
  outline: 3px solid var(--mg-focus, #ffbf47);
  outline-offset: 0;
}

/* conversion-clarity.css sets an amber outline on every input with
   `!important`, from `body:not(.wp-admin) :where(a, button, input, …)`.
   `:where()` contributes NO specificity, so that selector scores 0,2,1 —
   identical to `.mg-sci__search-field input:focus-visible`, leaving the tie to
   be broken by stylesheet order. Qualifying with `.mg-sci` makes it 0,3,1 and
   removes the dependency on load order entirely. Removing the inner ring is
   safe because the wrapper above shows a compliant one. */
.mg-sci .mg-sci__search-field input:focus,
.mg-sci .mg-sci__search-field input:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border: 0 !important;
}

.mg-sci__search-field input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 58px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #12233f;
  font: inherit;
  font-size: 16px; /* 16px stops iOS zooming the page on focus */
  outline: none;
}

.mg-sci__search-field input::placeholder { color: #64778e; } /* 4.62:1 on white; #94a6bb was 2.49:1 */
.mg-sci__search-field input::-webkit-search-cancel-button { display: none; }

.mg-sci__search-clear {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #eef3f9;
  color: #5c6f86;
  cursor: pointer;
  transition: background .2s var(--mg-ease, ease), color .2s var(--mg-ease, ease);
}

.mg-sci__search-clear svg { width: 15px; height: 15px; }
.mg-sci__search-clear:hover { background: #dfe8f2; color: #12233f; }

.mg-sci__hint {
  margin: 10px 2px 0;
  color: #5a6c83;   /* 4.75:1; #7b8ca2 was 3.04:1 */
  font-size: 12.5px;
}

/* ---------------------------- 1d. Quick terms ---------------------------- */

.mg-sci__tagrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

/* Without a label the pills read as six stray buttons under the field. */
.mg-sci__tagrow-label {
  flex: none;
  color: #5a6c83;   /* 5.05:1 on the panel surface */
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
}

.mg-sci__tags {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-block: 3px;
}

.mg-sci__tags::-webkit-scrollbar { display: none; }

/* Arrow buttons, revealed by JS only when the row genuinely overflows. */
.mg-sci__tagnav {
  flex: none;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  border: 1px solid #dfe9f3;
  border-radius: 12px;
  background: #fff;
  color: #3d5a80;
  cursor: pointer;
  transition: border-color .2s var(--mg-ease, ease), color .2s var(--mg-ease, ease), background .2s var(--mg-ease, ease);
}

.mg-sci__tagnav svg { width: 16px; height: 16px; }
.mg-sci__tagnav:hover { border-color: var(--mg-accent, #0067b1); color: var(--mg-accent, #0067b1); }
.mg-sci__tagnav[hidden] { display: none; }

.mg-sci__tag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 20px;
  border: 1px solid #dfe9f3;
  border-radius: var(--mg-r-pill, 999px);
  background: #fff;
  color: #22406b;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 6px 16px -12px rgba(16, 37, 74, .5);
  transition: background .2s var(--mg-ease, ease), color .2s var(--mg-ease, ease), border-color .2s var(--mg-ease, ease), transform .2s var(--mg-ease, ease);
}

.mg-sci__tag:hover {
  background: var(--mg-accent, #0067b1);
  border-color: var(--mg-accent, #0067b1);
  color: #fff;
  transform: translateY(-1px);
}

.mg-sci__tag:active { transform: translateY(0); }

/* No count badge on the pill: the row is a set of one-tap shortcuts, and a
   number on each one made six buttons read as a data table. The real count
   lives in the title/aria-label instead. */

/* ---------------------------- 1h. Stage labels --------------------------- */

/* TWO label sets share the stage, swapped by the `:has(.is-ready)` rules in
   1c2 above.

   The anatomical annotations are only truthful while the 3D model is on
   screen: its crown, abutment and fixture sit at known, fixed fractions of
   the stage height because the model rotates about its own vertical axis
   only. The photograph is a free composition, so the same three labels would
   point at nothing in particular. Browsers without `:has()` keep the generic
   set and never see a mispointed annotation. */

/* Each of the two is written out in full rather than sharing a grouped rule
   with a per-class follow-up: one class, one rule, so the duplicate-selector
   guard in the test suite stays a hard invariant. */
.mg-sci__hero-labels {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  transition: opacity .5s var(--mg-ease, ease);
}

.mg-sci__hero-anno {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s .35s var(--mg-ease, ease);
}

.mg-sci__hlabel {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 116px;
  padding: 14px 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .68);
  border: 1px solid rgba(255, 255, 255, .92);
  box-shadow: 0 18px 40px -22px rgba(16, 37, 74, .5);
  backdrop-filter: blur(10px) saturate(1.3);
  color: #234069;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.mg-sci__hlabel svg { width: 20px; height: 20px; color: var(--sci-ink-accent); }

.mg-sci__hlabel strong {
  font-size: 21px;
  font-weight: 800;
  line-height: 1;
  color: #12233f;
  font-variant-numeric: tabular-nums;
}

.mg-sci__hlabel--1 { inset-block-start: 8%;  inset-inline-end: calc(50% + var(--sci-r) + 26px); }
.mg-sci__hlabel--2 { inset-block-end: 12%;   inset-inline-start: calc(50% + var(--sci-r) + 26px); }

/* --- Anatomical annotations, pinned to the model rather than to the panel.
   Both numbers on each line are derived, not chosen:

     vertical   the assembly is 5.025 units tall and fills 75% of the frame,
                centred, so a part at height y sits at 12.5% + 75% x (1 - y/5.025)
                of the stage. That puts the post at 25%, the platform at 50%
                and the middle of the threaded fixture at 68%.
     horizontal the implant's half-width at that height, as a fraction of its
                widest point: post 0.60, platform 0.89, fixture 0.95 x --sci-r.

   test3d.mjs recomputes all six from the geometry it builds and fails if this
   file drifts. Earlier revisions parked the labels at `inset-inline-start: 0`,
   which on a wide stage left them a third of the panel away from the object
   they were annotating. --- */
.mg-sci__anno {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 8px 13px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .84);
  border: 1px solid rgba(198, 218, 237, .9);
  box-shadow: 0 14px 30px -20px rgba(16, 37, 74, .6);
  backdrop-filter: blur(8px);
  color: #1c3559;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  /* So the percentages above address the label's CENTRE, not its top edge. */
  transform: translateY(-50%);
}

.mg-sci__anno i {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #546c88;   /* 5.24:1 — this one is small, so it gets extra headroom */
  direction: ltr;
}

/* A short leader tick running from the label toward the model. */
.mg-sci__anno::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  width: 14px;   /* bridges exactly the gap left below, up to the silhouette */
  height: 1px;
  background: currentColor;
  opacity: .32;
}

.mg-sci__anno--abut { inset-block-start: 25%; inset-inline-end: calc(50% + var(--sci-r) * .60 + 15px); }
.mg-sci__anno--plat { inset-block-start: 50%; inset-inline-start: calc(50% + var(--sci-r) * .89 + 15px); }
.mg-sci__anno--fix  { inset-block-start: 68%; inset-inline-end: calc(50% + var(--sci-r) * .95 + 15px); }

.mg-sci__anno--abut::after,
.mg-sci__anno--fix::after { inset-inline-start: 100%; }
.mg-sci__anno--plat::after { inset-inline-end: 100%; }

/* --- Company badge, top corner of the stage. ------------------------------
   The owner's own company, on its own product shot. It sits at the stage's
   inline-start corner because that is the one corner no annotation uses: the
   two inline-start labels start at 25%, the inline-end one at 50%, and the
   caption runs along the bottom. --- */
.mg-sci__brand {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: min(100%, 260px);
  padding: 9px 13px 9px 9px;
  border: 1px solid rgba(198, 218, 237, .9);
  border-radius: 14px;
  background: rgba(255, 255, 255, .84);
  backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 16px 34px -24px rgba(16, 37, 74, .85);
  color: #16304f;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform .25s var(--mg-ease, ease), border-color .25s var(--mg-ease, ease), box-shadow .25s var(--mg-ease, ease);
}

.mg-sci__brand:hover {
  transform: translateY(-2px);
  border-color: var(--sci-blue);
  box-shadow: 0 22px 42px -26px rgba(16, 37, 74, .95);
}

.mg-sci__brand-seal {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--sci-blue);
  color: #fff;
}

.mg-sci__brand-seal svg { display: block; width: 18px; height: 18px; }

.mg-sci__brand-txt {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.mg-sci__brand-txt b {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.5;
  white-space: nowrap;
}

.mg-sci__brand-txt i {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.5;
  color: #4f6785;   /* 5.44:1 on the badge */
  white-space: nowrap;
}

/* A sheen that crosses the badge every few seconds. Animated on `transform`
   rather than an inset so it stays on the compositor, and gated on the motion
   query so it is simply absent for anyone who asked for less movement. */
@media (prefers-reduced-motion: no-preference) {
  .mg-sci__brand::after {
    content: "";
    position: absolute;
    inset-block: -45%;
    inset-inline-start: -45%;
    width: 34%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .92), transparent);
    animation: mg-sci-sheen 7s var(--mg-ease, ease-in-out) infinite;
  }
}

@keyframes mg-sci-sheen {
  0%, 58%   { transform: translateX(0) rotate(16deg); opacity: 0; }
  63%       { opacity: 1; }
  93%, 100% { transform: translateX(460%) rotate(16deg); opacity: 0; }
}

/* --- Caption under the stage. --- */
.mg-sci__hero-cap {
  position: absolute;
  inset-inline: 0;
  inset-block-end: -4px;
  z-index: 3;
  margin: 0;
  text-align: center;
  color: #4f6785;   /* 5.44:1 on the hero ground */
  font-size: 11.5px;
  line-height: 1.6;
}

/* ---------------------------- 1f. Figure bar ----------------------------- */

.mg-sci__stats {
  list-style: none;
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: clamp(40px, 5vw, 68px) 0 0;
  padding: clamp(18px, 2.4vw, 28px) clamp(14px, 2vw, 26px);
  border-radius: 20px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 26px 60px -30px rgba(16, 37, 74, .45);
  backdrop-filter: blur(8px);
}

.mg-sci__stat {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  padding-inline: clamp(10px, 1.6vw, 22px);
  border-inline-start: 1px solid #e8eef6;
}

.mg-sci__stat:first-child { border-inline-start: 0; }

.mg-sci__stat-ic {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: #eaf2fb;
  color: var(--mg-accent, #0067b1);
}

.mg-sci__stat-ic svg { width: 22px; height: 22px; }

.mg-sci__stat-txt { min-width: 0; }

.mg-sci__stat-num {
  display: block;
  font-size: clamp(1.3rem, 1rem + 1vw, 1.7rem);
  font-weight: 800;
  line-height: 1.1;
  color: #12233f;
  font-variant-numeric: tabular-nums;
}

.mg-sci__stat-lbl {
  display: block;
  position: relative;
  margin: 5px 0 0;
  padding-bottom: 9px;
  font-size: 12.5px;
  line-height: 1.5;
  color: #63748b;
}

/* The short blue rule under each label in the reference. */
.mg-sci__stat-lbl::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 26px;
  height: 3px;
  border-radius: 999px;
  background: var(--mg-accent, #0067b1);
}

/* The real publish date of the newest article in the archive — the one line
   that tells a visitor whether this library is still being maintained. */
.mg-sci__updated {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 0;
  color: #55677e;
  font-size: 12.5px;
  line-height: 1.6;
}

.mg-sci__updated span {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--sci-blue);
}

/* ==========================================================================
   2. Category navigation — the page's only category selector
   ========================================================================== */

/* Sits inside the library section, immediately above the article grid. */
.mg-sci__cats-sec {
  position: relative;
  margin-bottom: 18px;
}

.mg-sci__cats {
  display: flex;
  gap: 10px;
}

/* Default: every category visible at once, as an even card grid that wraps
   onto as many rows as it needs. A single scrolling strip hid most of the ten
   categories behind a horizontal drag, which nobody discovers. A grid (rather
   than wrapped flex) keeps the cards the same width so the rows stay aligned
   instead of ending ragged. */
.mg-sci__cats--wrap {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
}

.mg-sci__cats--wrap .mg-sci__cat {
  min-width: 0;
  justify-content: flex-start;
}

/* The label is the flexible part, so long category names truncate rather than
   forcing one card wider than the rest and breaking the grid rhythm. */
.mg-sci__cats--wrap .mg-sci__cat-name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Opt-in single-row strip, kept as a setting for anyone who prefers it. */
.mg-sci__cats--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.mg-sci__cats--scroll .mg-sci__cat { flex: 0 0 auto; scroll-snap-align: start; }
.mg-sci__cats--scroll::-webkit-scrollbar { height: 4px; }
.mg-sci__cats--scroll::-webkit-scrollbar-thumb { background: var(--mg-border-strong, #d4dce7); border-radius: 999px; }

.mg-sci__cat {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 16px;
  border: 1px solid var(--mg-border, #e5eaf1);
  border-radius: 12px;
  background: var(--mg-bg, #fff);
  color: var(--mg-text, #0b1320);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s var(--mg-ease, ease), background .2s var(--mg-ease, ease), color .2s var(--mg-ease, ease), transform .2s var(--mg-ease, ease);
}

.mg-sci__cat-ic {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 9px;
  background: var(--mg-accent-soft, #e9f1fa);
  color: var(--sci-ink-accent);
  transition: background .2s var(--mg-ease, ease), color .2s var(--mg-ease, ease);
}

.mg-sci__cat-ic svg { width: 17px; height: 17px; }

/* An inline <svg> sits on the text baseline, which can leave a glyph a pixel
   or two above centre inside its badge even when the container is centring
   correctly. Every icon listed here is a standalone glyph in a box of its own,
   so make them block-level and let the container do the centring. Icons that
   genuinely sit inline beside text (.mg-sci__src, .mg-sci__active-chip) are
   deliberately left alone. */
.mg-sci__search-go svg,
.mg-sci__search-clear svg,
.mg-sci__cat-ic svg,
.mg-sci__cap-ic svg,
.mg-sci__mark-ic svg,
.mg-sci__stat-ic svg,
.mg-sci__tagnav svg,
.mg-sci__filter-btn svg,
.mg-sci__views button svg,
.mg-sci__empty-ic svg,
.mg-sci__cta-ic svg,
.mg-sci__hlabel svg { display: block; }

.mg-sci__cat-name { white-space: nowrap; }

.mg-sci__cat-n {
  font-size: 11.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--mg-surface-2, #eef3f9);
  color: var(--mg-muted, #56677b);
  font-variant-numeric: tabular-nums;
}

.mg-sci__cat:hover {
  border-color: var(--sci-blue);
  transform: translateY(-2px);
}

.mg-sci__cat.is-active {
  background: var(--sci-blue);
  border-color: var(--sci-blue);
  color: #fff;
}

.mg-sci__cat.is-active .mg-sci__cat-ic { background: rgba(255, 255, 255, .2); color: #fff; }
.mg-sci__cat.is-active .mg-sci__cat-n { background: rgba(255, 255, 255, .22); color: #fff; }

/* ==========================================================================
   3. Shared section furniture
   ========================================================================== */

.mg-sci__feat-sec { padding-block: clamp(56px, 7vw, 88px) 0; }
.mg-sci__lib      { padding-block: clamp(48px, 6vw, 76px); }

.mg-sci__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: 30px;
  scroll-margin-top: calc(var(--sci-stick) + 16px);
}

.mg-sci__kicker {
  margin: 0 0 8px;
  color: var(--sci-ink-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
}

.mg-sci__head h2 {
  margin: 0;
  color: var(--mg-heading, #0a1626);
  font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.15rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
}

.mg-sci__head-note {
  margin: 0;
  max-width: 46ch;
  color: var(--mg-muted, #56677b);
  font-size: 14px;
  line-height: 1.85;
}

.mg-sci__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }

.mg-sci__badge {
  display: inline-block;
  padding: 4px 11px;
  border-radius: var(--mg-r-pill, 999px);
  background: var(--mg-accent-soft, #e9f1fa);
  color: var(--mg-accent-deep, #024e86);
  font-size: 12px;
  font-weight: 700;
}

.mg-sci__badge--pdf {
  background: #fdf0e8;
  color: #a1500f;
}

.mg-sci__dot-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--mg-muted, #56677b);
  font-size: 12.5px;
}

.mg-sci__dot-meta > * + *::before {
  content: "·";
  margin-inline-end: 8px;
  color: var(--mg-border-strong, #d4dce7);
}

.mg-sci__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: var(--mg-r-pill, 999px);
  background: var(--sci-blue);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .2s var(--mg-ease, ease), box-shadow .2s var(--mg-ease, ease), background .2s var(--mg-ease, ease);
}

.mg-sci__btn:hover { background: var(--mg-accent-deep, #024e86); transform: translateY(-2px); box-shadow: 0 14px 28px -14px rgba(0, 103, 177, .8); }
.mg-sci__btn:active { transform: translateY(0); }

.mg-sci__btn--ghost {
  background: transparent;
  border-color: var(--mg-border-strong, #d4dce7);
  color: var(--mg-text, #0b1320);
}

.mg-sci__btn--ghost:hover { background: var(--mg-surface, #f5f8fc); border-color: var(--sci-blue); color: var(--sci-ink-accent); box-shadow: none; }

/* ==========================================================================
   4. Featured
   ========================================================================== */

.mg-sci__feat {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 22px;
}

.mg-sci__lead {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--mg-border, #e5eaf1);
  border-radius: 20px;
  overflow: hidden;
  background: var(--mg-bg, #fff);
  transition: border-color .3s var(--mg-ease, ease), box-shadow .3s var(--mg-ease, ease), transform .3s var(--mg-ease, ease);
}

.mg-sci__lead:hover {
  border-color: var(--mg-border-strong, #d4dce7);
  box-shadow: var(--mg-shadow-lg, 0 30px 70px -26px rgba(11, 19, 32, .3));
  transform: translateY(-3px);
}

.mg-sci__lead-media {
  display: block;
  aspect-ratio: 16 / 8.5;
  overflow: hidden;
  background: var(--mg-surface-2, #eef3f9);
}

.mg-sci__lead-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--mg-ease, ease);
}

.mg-sci__lead:hover .mg-sci__lead-media img { transform: scale(1.035); }

.mg-sci__lead-body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: clamp(20px, 2.5vw, 30px);
}

.mg-sci__lead-body h3 {
  margin: 0 0 12px;
  font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -.005em;
}

.mg-sci__lead-body h3 a,
.mg-sci__side-body h3 a {
  color: var(--mg-heading, #0a1626);
  text-decoration: none;
  background-image: linear-gradient(var(--sci-ink-accent), var(--sci-ink-accent));
  background-size: 0 2px;
  background-repeat: no-repeat;
  background-position: right 100%;
  transition: background-size .35s var(--mg-ease, ease), color .2s var(--mg-ease, ease);
}

.mg-sci__lead-body h3 a:hover,
.mg-sci__side-body h3 a:hover { color: var(--sci-ink-accent); background-size: 100% 2px; }

.mg-sci__lead-body > p {
  margin: 0 0 16px;
  max-width: 66ch;
  color: var(--mg-muted, #56677b);
  font-size: 15px;
  line-height: 1.95;
}

.mg-sci__src {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin: 0 0 18px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--mg-surface, #f5f8fc);
  color: var(--mg-muted, #56677b);
  font-size: 12.5px;
  line-height: 1.7;
}

.mg-sci__src svg { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--sci-ink-accent); }

.mg-sci__lead-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid var(--mg-border, #e5eaf1);
}

.mg-sci__feat-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 22px;
  min-width: 0;
}

.mg-sci__side {
  display: flex;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--mg-border, #e5eaf1);
  border-radius: 18px;
  background: var(--mg-bg, #fff);
  transition: border-color .3s var(--mg-ease, ease), box-shadow .3s var(--mg-ease, ease), transform .3s var(--mg-ease, ease);
}

.mg-sci__side:hover {
  border-color: var(--mg-border-strong, #d4dce7);
  box-shadow: var(--mg-shadow, 0 10px 34px -14px rgba(11, 19, 32, .16));
  transform: translateY(-2px);
}

.mg-sci__side-media {
  flex: 0 0 34%;
  align-self: stretch;
  min-height: 108px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--mg-surface-2, #eef3f9);
}

.mg-sci__side-media img { width: 100%; height: 100%; object-fit: cover; }

.mg-sci__side-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.mg-sci__side-body h3 {
  margin: 10px 0 auto;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.7;
}

.mg-sci__side-body .mg-sci__dot-meta { margin-top: 12px; }

/* ==========================================================================
   5. Library toolbar (sticky) + active filters
   ========================================================================== */

.mg-sci__bar {
  position: sticky;
  inset-block-start: var(--sci-stick);
  z-index: 20;
  margin-bottom: 20px;
  padding: 12px 16px;
  border: 1px solid var(--mg-border, #e5eaf1);
  border-radius: 16px;
  background: color-mix(in srgb, var(--mg-bg, #fff) 88%, transparent);
  backdrop-filter: blur(12px) saturate(1.4);
  box-shadow: var(--mg-shadow-xs, 0 1px 2px rgba(11, 19, 32, .06));
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .mg-sci__bar { background: var(--mg-bg, #fff); }
}

.mg-sci__bar-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.mg-sci__count {
  margin: 0;
  color: var(--mg-text, #0b1320);
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.mg-sci__bar-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.mg-sci__filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--mg-border-strong, #d4dce7);
  border-radius: 11px;
  background: var(--mg-bg, #fff);
  color: var(--mg-text, #0b1320);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .2s var(--mg-ease, ease), background .2s var(--mg-ease, ease), color .2s var(--mg-ease, ease);
}

.mg-sci__filter-btn svg { width: 17px; height: 17px; }
.mg-sci__filter-btn:hover { border-color: var(--sci-blue); color: var(--sci-ink-accent); }

.mg-sci__filter-btn.has-filters {
  border-color: var(--sci-blue);
  background: var(--mg-accent-soft, #e9f1fa);
  color: var(--mg-accent-deep, #024e86);
}

.mg-sci__filter-n {
  font-style: normal;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--sci-blue);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.mg-sci__sort select,
.mg-sci__facet select {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--mg-border-strong, #d4dce7);
  border-radius: 11px;
  background: var(--mg-bg, #fff);
  color: var(--mg-text, #0b1320);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

.mg-sci__sort select:hover,
.mg-sci__facet select:hover { border-color: var(--sci-blue); }

.mg-sci__views {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--mg-border-strong, #d4dce7);
  border-radius: 11px;
  background: var(--mg-surface, #f5f8fc);
}

.mg-sci__views button {
  display: grid;
  place-items: center;
  width: 40px;
  min-height: 38px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--mg-muted, #56677b);
  cursor: pointer;
  transition: background .2s var(--mg-ease, ease), color .2s var(--mg-ease, ease);
}

.mg-sci__views button svg { width: 17px; height: 17px; }
.mg-sci__views button:hover { color: var(--sci-ink-accent); }
.mg-sci__views button.is-active { background: var(--mg-bg, #fff); color: var(--sci-ink-accent); box-shadow: var(--mg-shadow-xs, 0 1px 2px rgba(11, 19, 32, .06)); }

/* --------------------------- 5a. Active filter chips --------------------- */

.mg-sci__active {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--mg-border, #e5eaf1);
}

.mg-sci__active-label {
  color: var(--mg-muted, #56677b);
  font-size: 12.5px;
}

.mg-sci__active-chips { display: contents; }

.mg-sci__active-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 5px 8px 5px 12px;
  border: 1px solid var(--mg-accent-soft, #e9f1fa);
  border-radius: var(--mg-r-pill, 999px);
  background: var(--mg-accent-soft, #e9f1fa);
  color: var(--mg-accent-deep, #024e86);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s var(--mg-ease, ease), color .2s var(--mg-ease, ease);
}

.mg-sci__active-chip svg { width: 12px; height: 12px; opacity: .75; }
.mg-sci__active-chip:hover { background: var(--sci-blue); color: #fff; border-color: var(--sci-blue); }

.mg-sci__clear-all {
  margin-inline-start: auto;
  min-height: 32px;
  padding: 5px 12px;
  border: 0;
  border-radius: var(--mg-r-pill, 999px);
  background: transparent;
  color: var(--mg-muted, #56677b);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.mg-sci__clear-all:hover { color: var(--mg-danger, #d0392b); }

/* ==========================================================================
   6. Refinement panel — inline on desktop, bottom sheet on mobile
   ========================================================================== */

.mg-sci__panel {
  margin-bottom: 22px;
  border: 1px solid var(--mg-border, #e5eaf1);
  border-radius: 16px;
  background: var(--mg-surface, #f5f8fc);
}

.mg-sci__panel[hidden] { display: none; }

.mg-sci__panel-in {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  padding: 18px;
}

.mg-sci__facet { display: flex; flex-direction: column; gap: 7px; min-width: 0; }

.mg-sci__facet > span {
  color: var(--mg-muted, #56677b);
  font-size: 12.5px;
  font-weight: 700;
}

.mg-sci__facet select { width: 100%; }

/* Only shown as a real control in the mobile sheet; harmless filler otherwise. */
.mg-sci__panel-foot { display: none; }

.mg-sci__panel-close {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 12px;
  background: var(--sci-blue);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

/* ==========================================================================
   7. Grid, list view, load more, empty state
   ========================================================================== */

.mg-sci__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 22px;
  align-items: stretch;
}

.mg-sci__grid [hidden] { display: none !important; }

/* List view. `.mg-blog-card` is `display:flex` in enhance.css, so this must be
   expressed as a flex row — a `grid-template-columns` here is silently ignored. */
.mg-sci__grid.is-list { grid-template-columns: minmax(0, 1fr); gap: 14px; }

.mg-sci__grid.is-list .mg-blog-card {
  flex-direction: row;
  align-items: stretch;
  gap: 20px;
}

.mg-sci__grid.is-list .mg-blog-card__media {
  flex: 0 0 clamp(150px, 22%, 260px);
  aspect-ratio: 16 / 11;
  align-self: center;
  border-radius: 12px;
  overflow: hidden;
}

.mg-sci__grid.is-list .mg-blog-card__media img { width: 100%; height: 100%; object-fit: cover; }
.mg-sci__grid.is-list .mg-blog-card__body { flex: 1 1 auto; min-width: 0; }

@media (max-width: 600px) {
  /* A 150px thumbnail beside text is unreadable on a phone — fall back to the
     stacked card rather than shipping a cramped row. */
  .mg-sci__grid.is-list .mg-blog-card { flex-direction: column; }
  .mg-sci__grid.is-list .mg-blog-card__media { flex: none; width: 100%; aspect-ratio: 16 / 9; }
}

.mg-sci__more-wrap { display: flex; justify-content: center; margin-top: 34px; }

.mg-sci__more {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 50px;
  padding: 13px 32px;
  border: 1px solid var(--mg-border-strong, #d4dce7);
  border-radius: var(--mg-r-pill, 999px);
  background: var(--mg-bg, #fff);
  color: var(--mg-text, #0b1320);
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color .2s var(--mg-ease, ease), background .2s var(--mg-ease, ease), color .2s var(--mg-ease, ease), transform .2s var(--mg-ease, ease);
}

.mg-sci__more:hover { border-color: var(--sci-blue); background: var(--sci-blue); color: #fff; transform: translateY(-2px); }
.mg-sci__more:active { transform: translateY(0); }
.mg-sci__more[hidden] { display: none; }

.mg-sci__more i {
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  opacity: .7;
  font-variant-numeric: tabular-nums;
}

/* Loading state — a spinner in place of the count, so the button width barely
   shifts and the row below does not jump. */
.mg-sci__more.is-busy { pointer-events: none; opacity: .78; }
.mg-sci__more.is-busy i { visibility: hidden; }

.mg-sci__more.is-busy::after {
  content: "";
  width: 15px; height: 15px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: mg-sci-spin .6s linear infinite;
}

@keyframes mg-sci-spin { to { transform: rotate(360deg); } }

/* ---------------------------- Breadcrumbs -------------------------------- */

/* On the LIGHT hero. Uses page tokens, not the old white-on-navy values —
   those would render this trail invisible here. */
.mg-sci__crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 13px;
  color: var(--mg-faint, #8496a8);
}

.mg-sci__crumbs a {
  color: var(--mg-muted, #56677b);
  text-decoration: none;
  border-radius: 4px;
  transition: color .2s var(--mg-ease, ease);
}

.mg-sci__crumbs a:hover { color: var(--sci-ink-accent); text-decoration: underline; text-underline-offset: 3px; }
.mg-sci__crumbs [aria-current="page"] { color: var(--mg-muted, #56677b); }

.mg-sci__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: clamp(40px, 6vw, 64px) 24px;
  border: 1px dashed var(--mg-border-strong, #d4dce7);
  border-radius: 18px;
  background: var(--mg-surface, #f5f8fc);
}

.mg-sci__empty[hidden] { display: none; }

.mg-sci__empty-ic {
  display: grid;
  place-items: center;
  width: 60px; height: 60px;
  margin-bottom: 8px;
  border-radius: 50%;
  background: var(--mg-bg, #fff);
  color: var(--mg-faint, #8496a8);
  border: 1px solid var(--mg-border, #e5eaf1);
}

.mg-sci__empty-ic svg { width: 26px; height: 26px; }

.mg-sci__empty h3 {
  margin: 0;
  color: var(--mg-heading, #0a1626);
  font-size: 1.15rem;
  font-weight: 800;
}

.mg-sci__empty p {
  margin: 0;
  max-width: 46ch;
  color: var(--mg-muted, #56677b);
  font-size: 14px;
  line-height: 1.9;
}

.mg-sci__empty-act { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }

/* ==========================================================================
   8. Discovery rails
   ========================================================================== */

.mg-sci__rails-sec {
  padding-block: clamp(48px, 6vw, 72px);
  background: var(--mg-surface, #f5f8fc);
  border-block: 1px solid var(--mg-border, #e5eaf1);
}

.mg-sci__rails {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}

.mg-sci__rail {
  display: flex;
  flex-direction: column;
  padding: 22px;
  border: 1px solid var(--mg-border, #e5eaf1);
  border-radius: 18px;
  background: var(--mg-bg, #fff);
}

.mg-sci__rail > h3 {
  margin: 0 0 4px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--mg-border, #e5eaf1);
  color: var(--mg-heading, #0a1626);
  font-size: 1rem;
  font-weight: 800;
}

.mg-sci__rail ul { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; }

.mg-sci__rail-item { border-bottom: 1px solid var(--mg-border, #e5eaf1); }
.mg-sci__rail-item:last-child { border-bottom: 0; }

.mg-sci__rail-item a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 4px;
  min-height: 44px;
  text-decoration: none;
  border-radius: 10px;
  transition: background .2s var(--mg-ease, ease);
}

.mg-sci__rail-item a:hover { background: var(--mg-surface, #f5f8fc); }

.mg-sci__rail-no {
  flex: none;
  width: 26px;
  color: var(--mg-muted, #56677b);
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.mg-sci__rail-media {
  flex: none;
  width: 52px; height: 52px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--mg-surface-2, #eef3f9);
}

.mg-sci__rail-media img { width: 100%; height: 100%; object-fit: cover; }

.mg-sci__rail-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.mg-sci__rail-badge {
  align-self: flex-start;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--mg-accent-soft, #e9f1fa);
  color: var(--mg-accent-deep, #024e86);
  font-size: 10.5px;
  font-weight: 700;
}

.mg-sci__rail-title {
  color: var(--mg-text, #0b1320);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mg-sci__rail-item a:hover .mg-sci__rail-title { color: var(--sci-ink-accent); }

.mg-sci__rail-meta { color: var(--mg-muted, #56677b); font-size: 11.5px; }

.mg-sci__rail-more {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--mg-border, #e5eaf1);
  color: var(--sci-ink-accent);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.mg-sci__rail-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   9. Closing CTA
   ========================================================================== */

.mg-sci__cta-sec { padding-block: clamp(48px, 6vw, 76px); }

.mg-sci__cta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(18px, 3vw, 34px);
  padding: clamp(26px, 4vw, 44px);
  border-radius: 22px;
  background: linear-gradient(215deg, #0d2340 0%, #071628 70%);
  color: #fff;
  overflow: hidden;
}

.mg-sci__cta-ic {
  display: grid;
  place-items: center;
  width: 62px; height: 62px;
  flex: none;
  border-radius: 16px;
  background: rgba(255, 255, 255, .09);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #7ec2f5;
}

.mg-sci__cta-ic svg { width: 28px; height: 28px; }

/* Optional picture in place of the icon (set from the settings screen). */
.mg-sci__cta-media {
  flex: none;
  width: clamp(120px, 15vw, 190px);
  aspect-ratio: 4 / 3;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .05);
}

.mg-sci__cta-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mg-sci__cta-txt h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(1.15rem, 1rem + .8vw, 1.55rem);
  font-weight: 800;
  line-height: 1.4;
}

.mg-sci__cta-txt p {
  margin: 0;
  max-width: 62ch;
  color: rgba(233, 242, 251, .76);
  font-size: 14.5px;
  line-height: 1.95;
}

.mg-sci__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  min-height: 50px;
  padding: 14px 28px;
  border-radius: var(--mg-r-pill, 999px);
  background: #fff;
  color: #071628;
  font-size: 14.5px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .2s var(--mg-ease, ease), box-shadow .2s var(--mg-ease, ease);
}

.mg-sci__cta-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -14px rgba(0, 0, 0, .7); }
.mg-sci__cta-btn:active { transform: translateY(0); }

/* ==========================================================================
   10. Responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .mg-sci__feat { grid-template-columns: minmax(0, 1fr); }
  .mg-sci__feat-side { grid-template-rows: none; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

@media (max-width: 980px) {
  /* One column. The stage keeps every layer it had — it simply becomes a
     full-width band under the copy instead of a side panel, so the headline
     never has to share its line with the fixture. */
  .mg-sci__hero-in { grid-template-columns: minmax(0, 1fr); }
  .mg-sci__hero-stage {
    margin-inline-end: 0;
    min-height: clamp(280px, 54vw, 420px);
    margin-block-start: 12px;
    /* The stage got shorter, so the implant did too — the annotation anchor
       has to follow it. Same 0.0897 fraction of the line above. */
    --sci-r: clamp(25px, 4.84vw, 38px);
  }
  .mg-sci__hero-lead { max-width: none; }
  .mg-sci__hlabel { width: 104px; padding: 12px 9px; }
  .mg-sci__search { max-width: none; }
  .mg-sci__tagrow { max-width: none; }
}

@media (max-width: 860px) {
  .mg-sci { --sci-stick: 74px; }
  .mg-sci__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 0; }
  .mg-sci__stat:nth-child(-n+2) { padding-bottom: 16px; }
  .mg-sci__stat:nth-child(3) { border-inline-start: 0; }
  .mg-sci__stat:nth-child(n+3) { border-block-start: 1px solid #e8eef6; padding-top: 16px; }

  /* Refinements become a bottom sheet. */
  .mg-sci__panel {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1200;
    max-height: 84dvh;
    overflow-y: auto;
    margin: 0;
    border: 0;
    border-radius: 20px 20px 0 0;
    background: var(--mg-bg, #fff);
    box-shadow: 0 -20px 60px -20px rgba(11, 19, 32, .5);
    animation: mg-sci-sheet .28s var(--mg-ease-drawer, cubic-bezier(.32, .72, 0, 1));
  }
  .mg-sci__panel-in { grid-template-columns: minmax(0, 1fr); padding: 22px 20px calc(20px + env(safe-area-inset-bottom)); }
  .mg-sci__panel-foot { display: block; margin-top: 6px; }
  body.mg-sci-locked { overflow: hidden; }
}

@keyframes mg-sci-sheet {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* The WordPress admin bar is itself fixed, and the header sits below it. */
body.admin-bar .mg-sci { --sci-stick: 124px; }
@media (max-width: 782px) { body.admin-bar .mg-sci { --sci-stick: 120px; } }

@media (max-width: 640px) {
  .mg-sci { --sci-stick: 80px; }
  .mg-sci__hero { padding-block: 100px 44px; }
  .mg-sci__eyebrow { letter-spacing: .06em; font-size: 11.5px; }
  /* Below this width the stage is too narrow to place a label beside the
     implant without covering it, so both label sets stand down and the
     caption carries the naming on its own. */
  .mg-sci__hero-labels,
  .mg-sci__hero-anno { display: none; }
  .mg-sci__brand { position: static; margin: 0 auto 10px; max-width: none; width: fit-content; }
  .mg-sci__hero-stage { min-height: clamp(240px, 62vw, 320px); }
  .mg-sci__hero-ticks { display: none; }
  .mg-sci__caps li { font-size: 12.5px; padding-inline: 12px 8px; }
  .mg-sci__latest { flex-wrap: wrap; }
  .mg-sci__latest-t { flex: 1 1 100%; -webkit-line-clamp: 2; order: 3; }
  .mg-sci__latest-go { order: 2; }
  /* Stack the action square above a full-width field rather than shrinking
     both below a comfortable tap size. */
  .mg-sci__search { flex-direction: column-reverse; gap: 10px; }
  .mg-sci__search-go { width: 100%; min-height: 52px; border-radius: 14px; }
  .mg-sci__search-field input { min-height: 54px; }
  .mg-sci__stats { grid-template-columns: minmax(0, 1fr); padding: 16px; }
  .mg-sci__stat { border-inline-start: 0; padding-inline: 0; }
  .mg-sci__stat:nth-child(n+2) { border-block-start: 1px solid #e8eef6; padding-top: 14px; }
  .mg-sci__stat:nth-child(-n+3) { padding-bottom: 14px; }
  .mg-sci__cats--wrap { grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); }
  .mg-sci__cat { padding: 9px 12px; font-size: 13px; }
  .mg-sci__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .mg-sci__side { flex-direction: column; }
  .mg-sci__side-media { flex: none; width: 100%; aspect-ratio: 16 / 9; min-height: 0; }
  .mg-sci__cta { grid-template-columns: minmax(0, 1fr); text-align: start; }
  .mg-sci__cta-btn { justify-content: center; }
  .mg-sci__bar-row { align-items: stretch; }
  .mg-sci__bar-tools { justify-content: space-between; width: 100%; }
  .mg-sci__filter-btn { flex: 1 1 auto; justify-content: center; }
  .mg-sci__clear-all { margin-inline-start: 0; }
}

/* ==========================================================================
   11. Dark theme
   The hero, the CTA and the bottom sheet keep their own literal colours; only
   the light surfaces below need remapping.
   ========================================================================== */

/* The brand blue (#0067b1) only reaches 3.2:1 against the dark background, so
   accent TEXT and icons lift to the brighter tint. Accent FILLS keep the true
   brand blue — white text on the lighter tint would fail instead. */
html[data-theme="dark"] .mg-sci { background: var(--mg-bg); --sci-ink-accent: var(--sci-blue-lift); }

html[data-theme="dark"] .mg-sci__cats-sec,
html[data-theme="dark"] .mg-sci__cat,
html[data-theme="dark"] .mg-sci__lead,
html[data-theme="dark"] .mg-sci__side,
html[data-theme="dark"] .mg-sci__rail,
html[data-theme="dark"] .mg-sci__filter-btn,
html[data-theme="dark"] .mg-sci__sort select,
html[data-theme="dark"] .mg-sci__facet select,
html[data-theme="dark"] .mg-sci__more,
html[data-theme="dark"] .mg-sci__empty-ic {
  background: var(--mg-surface, #101a27);
  border-color: var(--mg-border, #223244);
  color: var(--mg-text, #e8eef6);
}

html[data-theme="dark"] .mg-sci__bar {
  background: color-mix(in srgb, var(--mg-surface, #101a27) 90%, transparent);
  border-color: var(--mg-border, #223244);
}

html[data-theme="dark"] .mg-sci__panel,
html[data-theme="dark"] .mg-sci__empty,
html[data-theme="dark"] .mg-sci__rails-sec,
html[data-theme="dark"] .mg-sci__src {
  background: var(--mg-surface-2, #0c1522);
  border-color: var(--mg-border, #223244);
}

html[data-theme="dark"] .mg-sci__views { background: var(--mg-surface-2, #0c1522); border-color: var(--mg-border, #223244); }
html[data-theme="dark"] .mg-sci__views button.is-active { background: var(--mg-surface, #101a27); }
html[data-theme="dark"] .mg-sci__rail-item a:hover { background: var(--mg-surface-2, #0c1522); }
html[data-theme="dark"] .mg-sci__more:hover,
html[data-theme="dark"] .mg-sci__cat.is-active { background: var(--sci-blue); border-color: var(--sci-blue); color: #fff; }
html[data-theme="dark"] .mg-sci__cat.is-active .mg-sci__cat-name { color: #fff; }
html[data-theme="dark"] .mg-sci__btn--ghost { background: transparent; color: var(--mg-text); }
html[data-theme="dark"] .mg-sci__btn--ghost:hover { background: var(--mg-surface-2, #0c1522); }
/* --- Hero. It is a light surface by design, so dark mode restates every one
   of its literal colours rather than letting near-black text sit on a pale
   ground. Each pair below is contrast-checked in both themes. --- */
html[data-theme="dark"] .mg-sci__hero {
  background:
    radial-gradient(120% 92% at 86% -12%, #162c43 0%, rgba(22, 44, 67, 0) 62%),
    linear-gradient(198deg, #0e1a29 0%, #0b1523 46%, #0d1826 100%);
}

html[data-theme="dark"] .mg-sci__hero-grid {
  background-image:
    linear-gradient(to right, rgba(150, 195, 235, .06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(150, 195, 235, .06) 1px, transparent 1px);
}

html[data-theme="dark"] .mg-sci__hero-glow {
  background: radial-gradient(circle, rgba(74, 163, 232, .13) 0%, rgba(74, 163, 232, .05) 44%, transparent 70%);
}

html[data-theme="dark"] .mg-sci__hero-media { opacity: .34; }

html[data-theme="dark"] .mg-sci__hero-fade {
  background: radial-gradient(70% 64% at 50% 46%,
    rgba(12, 23, 37, 0) 0%,
    rgba(12, 23, 37, .22) 46%,
    rgba(12, 23, 37, .86) 76%,
    #0c1725 100%);
}

html[data-theme="dark"] .mg-sci__hero-rings {
  background: radial-gradient(circle, rgba(74, 163, 232, .1) 0%, transparent 62%);
  box-shadow: 0 0 0 1px rgba(74, 163, 232, .16) inset;
}
html[data-theme="dark"] .mg-sci__hero-rings::before,
html[data-theme="dark"] .mg-sci__hero-rings::after { border-color: rgba(74, 163, 232, .16); }
html[data-theme="dark"] .mg-sci__hero-orbit { border-color: rgba(74, 163, 232, .22); }
html[data-theme="dark"] .mg-sci__hero-orbit::after {
  background: var(--sci-blue-lift);
  box-shadow: 0 0 0 4px rgba(74, 163, 232, .16);
}
html[data-theme="dark"] .mg-sci__hero-ticks::before,
html[data-theme="dark"] .mg-sci__hero-ticks::after { border-color: rgba(74, 163, 232, .3); }

html[data-theme="dark"] .mg-sci__hero h1 { color: var(--mg-heading, #f3f8fd); }
html[data-theme="dark"] .mg-sci__hero h1 em { color: var(--sci-blue-lift); }
html[data-theme="dark"] .mg-sci__hero h1 em::after {
  background: linear-gradient(to var(--sci-rule-dir, left), var(--sci-blue-lift), rgba(74, 163, 232, .16));
}
html[data-theme="dark"] .mg-sci__hero-lead { color: var(--mg-muted, #9fb1c5); }
html[data-theme="dark"] .mg-sci__eyebrow {
  background: var(--mg-surface, #131d2c);
  border-color: var(--mg-border, #26354b);
  color: #9dc3e8;
}
html[data-theme="dark"] .mg-sci__eyebrow-dot { background: var(--sci-blue-lift); }
html[data-theme="dark"] .mg-sci__hint { color: var(--mg-faint, #7d92ab); }

html[data-theme="dark"] .mg-sci__caps li {
  background: var(--mg-surface, #131d2c);
  border-color: var(--mg-border, #26354b);
  color: var(--mg-text, #e8eef6);
}
html[data-theme="dark"] .mg-sci__cap-ic {
  background: rgba(0, 103, 177, .2);
  color: var(--sci-blue-lift);
}

html[data-theme="dark"] .mg-sci__latest {
  background: var(--mg-surface, #131d2c);
  border-color: var(--mg-border, #26354b);
  color: var(--mg-text, #e8eef6);
}
html[data-theme="dark"] .mg-sci__latest:hover { background: var(--mg-surface-2, #0c1522); border-color: var(--sci-blue-lift); }
html[data-theme="dark"] .mg-sci__latest-d { color: var(--mg-muted, #9fb1c5); }
html[data-theme="dark"] .mg-sci__latest-go { color: var(--sci-blue-lift); }

html[data-theme="dark"] .mg-sci__anno {
  background: rgba(19, 29, 44, .84);
  border-color: rgba(255, 255, 255, .1);
  color: var(--mg-text, #e8eef6);
}
html[data-theme="dark"] .mg-sci__anno i { color: var(--mg-muted, #9fb1c5); }
html[data-theme="dark"] .mg-sci__brand {
  background: rgba(19, 29, 44, .86);
  border-color: rgba(255, 255, 255, .1);
  color: var(--mg-text, #e8eef6);
}
html[data-theme="dark"] .mg-sci__brand-txt i { color: var(--mg-muted, #9fb1c5); }
html[data-theme="dark"] .mg-sci__brand::after { background: linear-gradient(90deg, transparent, rgba(120, 190, 255, .28), transparent); }
html[data-theme="dark"] .mg-sci__hero-cap { color: var(--mg-muted, #9fb1c5); }
html[data-theme="dark"] .mg-sci__updated { color: var(--mg-muted, #9fb1c5); }
html[data-theme="dark"] .mg-sci__updated span { background: var(--sci-blue-lift); }
html[data-theme="dark"] .mg-sci__searchpanel {
  background: var(--mg-surface-2, #0c1522);
  border-color: var(--mg-border, #26354b);
}

html[data-theme="dark"] .mg-sci__search-go { background: var(--sci-blue); }
html[data-theme="dark"] .mg-sci__search-go:hover { background: #0176c7; }

html[data-theme="dark"] .mg-sci__search-field,
html[data-theme="dark"] .mg-sci__tag,
html[data-theme="dark"] .mg-sci__tagnav {
  background: var(--mg-surface, #131d2c);
  border-color: var(--mg-border, #26354b);
  color: var(--mg-text, #e8eef6);
}

html[data-theme="dark"] .mg-sci__search-field input { color: var(--mg-text, #e8eef6); }
html[data-theme="dark"] .mg-sci__search-field input::placeholder { color: var(--mg-faint, #7d92ab); }
html[data-theme="dark"] .mg-sci__search-clear { background: var(--mg-surface-2, #1b2636); color: var(--mg-muted, #9fb1c5); }
html[data-theme="dark"] .mg-sci__tag i { background: var(--mg-surface-2, #1b2636); color: var(--mg-muted, #9fb1c5); }
html[data-theme="dark"] .mg-sci__tag:hover,
html[data-theme="dark"] .mg-sci__tagnav:hover { border-color: var(--sci-blue); }

html[data-theme="dark"] .mg-sci__stats {
  background: color-mix(in srgb, var(--mg-surface, #131d2c) 92%, transparent);
  border-color: var(--mg-border, #26354b);
}

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  html[data-theme="dark"] .mg-sci__stats { background: var(--mg-surface, #131d2c); }
}

html[data-theme="dark"] .mg-sci__stat { border-inline-start-color: var(--mg-border, #26354b); }
html[data-theme="dark"] .mg-sci__stat:nth-child(n+3),
html[data-theme="dark"] .mg-sci__stat:nth-child(n+2) { border-block-start-color: var(--mg-border, #26354b); }
html[data-theme="dark"] .mg-sci__stat-num { color: var(--mg-heading, #f3f8fd); }
html[data-theme="dark"] .mg-sci__stat-lbl { color: var(--mg-muted, #9fb1c5); }
html[data-theme="dark"] .mg-sci__stat-ic { background: rgba(0, 103, 177, .2); color: var(--sci-blue-lift); }

html[data-theme="dark"] .mg-sci__hlabel {
  background: rgba(19, 29, 44, .72);
  border-color: rgba(255, 255, 255, .1);
  color: var(--mg-text, #e8eef6);
}

html[data-theme="dark"] .mg-sci__hlabel svg { color: var(--sci-blue-lift); }
html[data-theme="dark"] .mg-sci__hlabel strong { color: var(--mg-heading, #f3f8fd); }
html[data-theme="dark"] .mg-sci__badge--pdf { background: rgba(197, 122, 40, .18); color: #e8a35c; }

/* ==========================================================================
   12. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .mg-sci *,
  .mg-sci *::before,
  .mg-sci *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .mg-sci__lead:hover .mg-sci__lead-media img { transform: none; }
}