/*
  CardioLab — per-site sheet (Appearance > Site Layout > Style Sheet).
  Dark "deep space" hero (nova.app pattern), light content.
  Consumes the --gnm-* network tokens from base.css, extends them as --cl-*.
  Colorimetry inherited from the old cardiology-lab.com site (cid_2920):
  steel blue #4083b0 (brand) + cardio red #dd100b (CTAs), cf. catheter/heart logo.
*/

:root {
  --gnm-border: #e6e8ee;
  /* Bootstrap primary = space navy (tokens consumed by base.css) */
  --gnm-primary: var(--cl-space, #0a1830);
  --gnm-primary-rgb: 10, 24, 48;
  --gnm-primary-strong: var(--cl-steel-ink, #33698f); /* re-tints the network border grey to the CardioLab charter */

  /* Latest publications / Archives switch under the indexes: cardio red,
     like the home CTAs (the navy primary would read as navigation) */
  --gnm-statebtn: var(--cl-red, #dd100b);
  --gnm-statebtn-ink: var(--cl-red-deep, #b50d09);
  --gnm-statebtn-rgb: 221, 16, 11;

  /* the next congress in the timeline: same red as the CTAs */
  --gnm-timeline-next: var(--cl-red, #dd100b);
  --gnm-timeline-next-rgb: 221, 16, 11;
  --cl-space: #0a1830;
  --cl-space: oklch(0.17 0.045 255);
  --cl-space-deep: #060d1e;
  --cl-space-deep: oklch(0.13 0.04 258);
  --cl-nebula-violet: #4c2f9e;
  --cl-nebula-violet: oklch(0.42 0.16 285);
  --cl-star: #edf2ff;
  --cl-hero-text: #eef3fb;
  --cl-hero-muted: #b9c7de;

  /* old-site heritage (roles read from rootKit/2920/custom-style.css) */
  --cl-steel: #4083b0;            /* brand: typography, buttons, hovers */
  --cl-steel-ink: #33698f;        /* text variant (AA contrast on white) */
  --cl-steel-light: #a8cbe8;      /* eyebrow / accents on night background */
  --cl-red: #dd100b;              /* CTAs, underlines (historic btn-warning) */
  --cl-red-deep: #b50d09;         /* hover of the red CTAs */

  --cl-eyebrow-light: var(--cl-steel-light);
  --cl-liseret: linear-gradient(90deg, transparent, rgba(64, 131, 176, .9), rgba(221, 16, 11, .75), transparent);

  /* header + sub-header: structure copied from the live Pancreoscopie (11/07/2026),
     re-tokenised to the CardioLab charter on 12/07/2026 (Sébastien's decision):
     space navy, steel accents (brand/hover), active + CTA cardio red */
  --cl-hd-navy: var(--cl-space);
  --cl-hd-green: var(--cl-steel);
  --cl-hd-green-d: var(--cl-steel-ink);
  --cl-hd-yellow: var(--cl-steel-light);
  --cl-hd-border: #e6e8ee;
}

/* ---- Sub-header, Pancreoscopie style: navy ribbon, flat white links + icons,
   light-steel hover. Actual background = theme mod gnm_login_ribbon_bg_color (#060d1e),
   the Customizer prints it with !important.
   It also locks the typography (#login-ribbon a/span … !important) →
   counter-measures prefixed #login-ribbon + !important, locked properties only. */
#login-ribbon.gnm-login-ribbon {
  background: var(--cl-hd-navy);
  padding-block: 8px;
  /* "deep space" sky (Bibliographic search band) over the Customizer
     colour: its background !important shorthand also locks background-image
     to none -> longhand !important + id+class to win */
  background-image:
    radial-gradient(1.5px 1.5px at 12% 30%, rgba(237, 242, 255, .9), transparent),
    radial-gradient(1px 1px at 28% 72%, rgba(237, 242, 255, .6), transparent),
    radial-gradient(1.5px 1.5px at 46% 18%, rgba(237, 242, 255, .7), transparent),
    radial-gradient(1px 1px at 64% 58%, rgba(237, 242, 255, .5), transparent),
    radial-gradient(1.5px 1.5px at 78% 24%, rgba(237, 242, 255, .8), transparent),
    radial-gradient(1px 1px at 90% 66%, rgba(237, 242, 255, .55), transparent),
    radial-gradient(60% 140% at 15% 40%, rgba(37, 99, 235, .28), transparent 62%),
    radial-gradient(50% 120% at 85% 50%, rgba(64, 131, 176, .22), transparent 60%),
    radial-gradient(70% 160% at 60% 80%, rgba(76, 47, 158, .26), transparent 65%) !important;
}

/* spreads the links across the full width (Register on the left, like the live) */
#login-ribbon.gnm-login-ribbon .gnm-login-ribbon__links {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 1rem;
}

#login-ribbon.gnm-login-ribbon .gnm-login-ribbon__links > a {
  color: #fff !important;
  opacity: .85;
  font-size: .8rem !important;
  font-weight: 400 !important;
  text-decoration: none;
  transition: color 150ms ease-out, opacity 150ms ease-out;
}

#login-ribbon.gnm-login-ribbon .gnm-login-ribbon__links > a:hover,
#login-ribbon.gnm-login-ribbon .gnm-login-ribbon__links > a:focus-visible {
  color: var(--cl-hd-yellow) !important;
  opacity: 1;
}

#login-ribbon.gnm-login-ribbon .gnm-login-ribbon__links > a::before {
  font-family: "bootstrap-icons";
  margin-right: .35em;
  vertical-align: -.1em;
}

#login-ribbon.gnm-login-ribbon .gnm-login-ribbon__links > a[href*="/registration"]::before {
  content: "\f4fa"; /* bi-plus-circle */
}

#login-ribbon.gnm-login-ribbon .gnm-login-ribbon__links > a[href*="/registration"] {
  margin-right: auto;
}

#login-ribbon.gnm-login-ribbon .gnm-login-ribbon__links > a[href*="/login"]::before {
  content: "\f4d7"; /* bi-person-circle */
}

/* language selector: same weight as a ribbon link */
#login-ribbon.gnm-login-ribbon .gnm-login-ribbon__language-toggle {
  color: #fff !important;
  opacity: .85;
  border: 0;
  padding: 0 2px;
  transition: color 150ms ease-out, opacity 150ms ease-out;
}

#login-ribbon.gnm-login-ribbon .gnm-login-ribbon__language-toggle span {
  color: inherit !important;
  font-size: .8rem !important;
  font-weight: 400 !important;
  letter-spacing: 0;
}

#login-ribbon.gnm-login-ribbon .gnm-login-ribbon__language-toggle:hover,
#login-ribbon.gnm-login-ribbon .gnm-login-ribbon__language-toggle:focus-visible,
#login-ribbon.gnm-login-ribbon .gnm-login-ribbon__language-switcher.show .gnm-login-ribbon__language-toggle {
  color: var(--cl-hd-yellow) !important;
  opacity: 1;
}

/* language menu: white background, hover/active navy 10% — ENTIRELY locked by the
   Customizer (!important). The locked rendering is acceptable, we do not outbid it. */

#header.gnm-site-header-shell--navbar {
  position: sticky;
  top: 0;
  z-index: 1200;
  /* frosted glass: near-opaque fallback when backdrop-filter is missing.
     !important: the Customizer prints #header { background-color:#fff !important }
     (gnm-surface-customizer-css) -> id+class counter-measure, like #login-ribbon */
  background: rgba(255, 255, 255, .94) !important;
  border-bottom: 1px solid var(--cl-hd-border);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #header.gnm-site-header-shell--navbar {
    background: rgba(255, 255, 255, .8) !important;
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}

/* logged-in admin: the WP bar (fixed, 32px / 46px under 783px) covers the top
   of the sticky header on scroll - offset by the same amount (var set by admin-bar.css) */
body.admin-bar #header.gnm-site-header-shell--navbar {
  top: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
  /* the WP bar goes back to absolute and scrolls away: no more offset */
  body.admin-bar #header.gnm-site-header-shell--navbar {
    top: 0;
  }
}

/* base.css's shell-inner adds 20px of vertical padding:
   the live Pancreoscopie only has the 72px bar, we neutralise it */
#header.gnm-site-header-shell--navbar .gnm-shell-inner {
  padding-block: 0;
}

/* logo: 100% CSS pulsing heart (pen popjyG transposed to the charter: two rounded
   halves rotated ±45°, scale 1.1 + red surge at 10% of the 1s cycle)
   + wordmark image (custom_logo = lettering only) */
#header.gnm-site-header-shell--navbar .gnm-brand-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

#header.gnm-site-header-shell--navbar .gnm-brand-heart {
  position: relative;
  width: 36px;
  height: 32px;
  flex: 0 0 auto;
  animation: cl-heart-pulse 1s infinite;
}

#header.gnm-site-header-shell--navbar .gnm-brand-heart::before,
#header.gnm-site-header-shell--navbar .gnm-brand-heart::after {
  content: "";
  position: absolute;
  top: 0;
  left: 18px;
  width: 18px;
  height: 29px;
  background: var(--cl-red-deep);
  border-radius: 18px 18px 0 0;
  transform: rotate(-45deg);
  transform-origin: 0 100%;
  animation: cl-heart-pulse-color 1s infinite;
}

#header.gnm-site-header-shell--navbar .gnm-brand-heart::after {
  left: 0;
  transform: rotate(45deg);
  transform-origin: 100% 100%;
}

#header.gnm-site-header-shell--navbar .gnm-brand-logo--navbar {
  height: 46px;
  width: auto;
  display: block;
}

@keyframes cl-heart-pulse {
  10% { transform: scale(1.1); }
}

@keyframes cl-heart-pulse-color {
  10% { background: var(--cl-red); }
}

@media (prefers-reduced-motion: reduce) {
  #header.gnm-site-header-shell--navbar .gnm-brand-heart,
  #header.gnm-site-header-shell--navbar .gnm-brand-heart::before,
  #header.gnm-site-header-shell--navbar .gnm-brand-heart::after {
    animation: none;
  }
}

/* Menu = literal copy of the live Pancreoscopie (measured 11/07/2026):
   uppercase 0.78rem/600 navy, reserved 2px underline (transparent at rest),
   hover = yellow underline, active = dark green text + green underline,
   1x14px navy 14% pipes between items. */

.gnm-site-header-shell--navbar .gnm-navbar {
  padding-block: .5rem;
}

.gnm-site-header-shell--navbar .gnm-brand-logo--navbar {
  height: 46px;
}

#header.gnm-site-header-shell--navbar .gnm-navbar-menu .nav-link {
  font-size: .78rem !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  /* ABSOLUTE line-height: keeps the same box (18px) for the font-size:0 icon item,
     otherwise its border-bottom is offset ~3px from the text items */
  line-height: 18px;
  color: var(--cl-hd-navy) !important;
  padding: .5rem .9rem;
  background: transparent;
  border-radius: 7px 7px 0 0;
  border-bottom: 2px solid transparent;
  transition: color 150ms ease-out, background-color 150ms ease-out, border-bottom-color 150ms ease-out;
}

#header.gnm-site-header-shell--navbar .gnm-navbar-menu .nav-link:hover,
#header.gnm-site-header-shell--navbar .gnm-navbar-menu .nav-link:focus-visible {
  color: var(--cl-hd-navy) !important;
  background: transparent;
  border-bottom-color: var(--cl-steel);
}

body.post-type-archive-clinical_case #header.gnm-site-header-shell--navbar .nav-item-189 > .nav-link,
#header.gnm-site-header-shell--navbar .gnm-navbar-menu .nav-link.active,
#header.gnm-site-header-shell--navbar .gnm-navbar-menu .current-menu-item > .nav-link {
  color: var(--cl-red) !important;
  background: transparent;
  border-bottom-color: var(--cl-red);
}

/* Home item = house icon (like Pancreoscopie; robust across languages) */
#header.gnm-site-header-shell--navbar .gnm-navbar-menu .menu-item-home > .nav-link {
  font-size: 0 !important;
  letter-spacing: 0;
}

.gnm-site-header-shell--navbar .gnm-navbar-menu .menu-item-home > .nav-link::before {
  content: "\f423"; /* bi-house-door, outline like the live */
  font-family: "bootstrap-icons";
  font-size: 1rem;
  line-height: 18px;
  display: inline-block;
  vertical-align: top;
}

/* pipes between items, desktop only */
@media (min-width: 992px) {
  .gnm-site-header-shell--navbar .gnm-navbar-menu .nav-item {
    position: relative;
  }

  .gnm-site-header-shell--navbar .gnm-navbar-menu .nav-item + .nav-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 14px;
    background: rgba(10, 24, 48, .14);
  }
}

/* magnifier: 44px white disc with green border, navy hover + slight lift (like the live) */
#header.gnm-site-header-shell--navbar .gnm-navbar-search {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background-color: #fff;
  border: 1px solid var(--cl-hd-green);
  color: var(--cl-hd-green) !important;
  box-shadow: 0 5px 22px rgba(10, 24, 48, .1);
  transition: color 150ms ease-out, border-color 150ms ease-out, box-shadow 150ms ease-out, transform 150ms ease-out;
}

#header.gnm-site-header-shell--navbar .gnm-navbar-search:hover,
#header.gnm-site-header-shell--navbar .gnm-navbar-search:focus-visible,
#header.gnm-site-header-shell--navbar .gnm-navbar-search.show {
  color: var(--cl-hd-navy) !important;
  background-color: #fff;
  border-color: var(--cl-hd-navy);
  box-shadow: 0 8px 22px rgba(10, 24, 48, .2);
  transform: translateY(-1px);
}

/* ---- Navbar search dropdown (literal copy of the live) ---- */

#header.gnm-site-header-shell--navbar .gnm-navbar-search-drop .gnm-search-dropdown {
  min-width: min(520px, 86vw);
  border: 1px solid var(--cl-hd-border);
  border-radius: 14px;
  border-top: 3px solid var(--cl-hd-green);
  box-shadow: 0 18px 50px rgba(10, 24, 48, .16);
  margin-top: .55rem;
  right: 0;
  left: auto;
}

#header .gnm-search-dd-title {
  font-weight: 700 !important;
  font-size: .95rem !important;
  color: var(--cl-hd-navy) !important;
}

#header .gnm-search-count {
  font-size: .7rem !important;
  font-weight: 700 !important;
  color: var(--cl-hd-green-d) !important;
  background: rgba(64, 131, 176, .12);
  border-radius: 20px;
  padding: .15rem .55rem;
  white-space: nowrap;
}

#header .gnm-search-bar .input-group-text {
  border-color: var(--cl-hd-border);
  color: var(--cl-hd-green) !important;
}

#header .gnm-search-bar .form-control {
  font-size: .95rem !important;
  box-shadow: none;
}

#header .gnm-search-bar .form-control:focus,
#header .gnm-search-bar:focus-within .form-control,
#header .gnm-search-bar:focus-within .input-group-text {
  border-color: var(--cl-hd-green);
}

#header .gnm-btn-search-go {
  background: var(--cl-red);
  border: 0;
  color: #fff !important;
}

#header .gnm-btn-search-go:hover,
#header .gnm-btn-search-go:focus {
  background: var(--cl-red-deep);
  color: #fff !important;
}

#header .gnm-btn-search-go .bi,
#header .gnm-adv-search-link .bi {
  display: inline-block;
  transition: transform .2s ease;
}

#header .gnm-btn-search-go:hover .bi {
  transform: translateX(2px);
}

#header .gnm-search-chip {
  display: inline-block;
  padding: .3rem .85rem;
  border: 1px solid var(--cl-hd-border);
  border-radius: 30px;
  font-size: .8rem !important;
  font-weight: 600 !important;
  color: var(--cl-hd-navy) !important;
  background: #f4f7fc;
  text-decoration: none;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}

#header .gnm-search-chip:hover {
  border-color: var(--cl-hd-green);
  color: var(--cl-hd-green) !important;
  background: #fff;
}

#header .gnm-adv-search-link {
  font-weight: 600 !important;
  font-size: .8rem !important;
  color: var(--cl-hd-navy) !important;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  text-decoration: none;
}

#header .gnm-adv-search-link:hover {
  color: var(--cl-hd-green) !important;
}

#header .gnm-adv-search-link:hover .bi {
  transform: translateX(2px);
}

#header .gnm-search-dropdown .text-muted {
  font-size: .875em !important;
  color: #6c757d !important;
}

/* ---- Deep-space hero ---- */

.gnm-home-hero-carousel {
  --gnm-hero-dot: rgba(255, 255, 255, .45);
  --gnm-hero-dot-active: var(--cl-red);
}

.gnm-home-hero {
  border-bottom: 2px solid transparent;
  border-image: var(--cl-liseret) 1;
}

.gnm-home-hero--standard {
  position: relative;
  overflow: hidden;
  background-color: var(--cl-space-deep);
  /* static fine stars (prime-number tiles ≈ pseudo-random field) + night background */
  background-image:
    radial-gradient(1px 1px at 22px 46px, rgba(237, 242, 255, .9) 50%, transparent 51%),
    radial-gradient(1px 1px at 121px 90px, rgba(237, 242, 255, .7) 50%, transparent 51%),
    radial-gradient(1px 1px at 89px 21px, rgba(237, 242, 255, .55) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 64px 172px, rgba(237, 242, 255, .6) 50%, transparent 51%),
    linear-gradient(180deg, var(--cl-space) 0%, var(--cl-space-deep) 100%);
  background-size: 191px 191px, 253px 253px, 149px 149px, 271px 271px, 100% 100%;
  background-repeat: repeat, repeat, repeat, repeat, no-repeat;
}

/* nebula layers, slow drift; the steel layer carries the CTA's gravity (right column) */
.gnm-home-hero--standard::before {
  content: "";
  position: absolute;
  inset: -15%;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(46% 38% at 32% 34%, rgba(37, 99, 235, .32), transparent 70%),
    radial-gradient(30% 34% at 76% 52%, rgba(64, 131, 176, .38), transparent 70%),
    radial-gradient(52% 42% at 56% 14%, rgba(76, 47, 158, .30), transparent 72%);
  animation: cl-nebula-drift 90s ease-in-out infinite alternate;
}

/* bright foreground stars, slow twinkle */
.gnm-home-hero--standard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1.5px 1.5px at 84px 38px, var(--cl-star) 50%, transparent 51%),
    radial-gradient(2px 2px at 210px 156px, rgba(237, 242, 255, .9) 50%, transparent 51%);
  background-size: 421px 421px, 569px 569px;
  animation: cl-star-twinkle 9s ease-in-out infinite alternate;
}

.gnm-home-hero__container {
  position: relative;
  z-index: 1;
  padding: 72px 10px 84px;
}

.gnm-home-hero__eyebrow,
.gnm-home-hero .gnm-ui-eyebrow {
  color: var(--cl-eyebrow-light);
}

.gnm-home-hero__title {
  color: var(--cl-hero-text);
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.015em;
}

.gnm-home-hero__subtitle {
  color: var(--cl-hero-muted);
  font-size: 1.06rem;
  line-height: 1.65;
  max-width: 56ch;
}

/* member-access card: elevated navy surface, steel halo on hover */
.gnm-home-hero__card {
  background:
    linear-gradient(180deg, rgba(148, 197, 255, .10), rgba(148, 197, 255, .02)),
    #0e1e3a;
  border: 1px solid rgba(148, 197, 255, .22);
  border-radius: var(--gnm-radius-lg);
  padding: 24px;
  box-shadow: 0 24px 60px rgba(3, 8, 20, .55);
  transition: box-shadow 400ms cubic-bezier(.16, 1, .3, 1);
}

.gnm-home-hero__card:hover {
  box-shadow: 0 24px 60px rgba(3, 8, 20, .55), 0 0 56px rgba(64, 131, 176, .22);
}

.gnm-home-hero__card-title {
  color: var(--cl-eyebrow-light);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
}

.gnm-home-hero__card-text {
  color: var(--cl-hero-muted);
}

/* cardio-red CTA: direct heritage of the old site's buttons */
.gnm-home-hero__card .btn-primary {
  background: var(--cl-red);
  border-color: transparent;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--gnm-radius-md);
  box-shadow: 0 6px 24px rgba(221, 16, 11, .35);
  transition: background-color 200ms cubic-bezier(.16, 1, .3, 1), transform 200ms cubic-bezier(.16, 1, .3, 1), box-shadow 200ms cubic-bezier(.16, 1, .3, 1);
}

.gnm-home-hero__card .btn-primary:hover,
.gnm-home-hero__card .btn-primary:focus {
  background: var(--cl-red-deep);
  transform: translateY(-1px);
  box-shadow: 0 10px 32px rgba(221, 16, 11, .5);
}

/* ---- Hero carousel overlay: literal copy of the live Pancreoscopie slider
   (measured 11/07/2026: full-height navy caption-gradient, yellow bulleted eyebrow,
   yellow + ghost CTAs, stock BS5 indicators, next arrow only, desktop only) ---- */

.gnm-home-hero--carousel-overlay {
  border-bottom: 0;
  border-image: none;
  margin-bottom: 3rem;
}

.gnm-home-hero__container--overlay {
  padding: 0;
}

.gnm-home-hero-carousel--overlay {
  border-radius: 0 0 6px 6px;
  overflow: hidden;
  box-shadow: none; /* base.css sets --gnm-shadow-md on .gnm-home-hero-carousel */
}

.gnm-home-hero-carousel--overlay .gnm-home-hero-carousel__image,
.gnm-home-hero-carousel--overlay .gnm-home-hero-carousel__fallback {
  height: 440px;
  width: 100%;
  object-fit: cover;
  object-position: 55% 42%;
}

.gnm-home-hero-carousel--overlay .gnm-home-hero-carousel__fallback {
  background:
    radial-gradient(1.5px 1.5px at 12% 30%, rgba(237, 242, 255, .9), transparent),
    radial-gradient(1px 1px at 28% 72%, rgba(237, 242, 255, .6), transparent),
    radial-gradient(1.5px 1.5px at 46% 18%, rgba(237, 242, 255, .7), transparent),
    radial-gradient(1px 1px at 64% 58%, rgba(237, 242, 255, .5), transparent),
    radial-gradient(1.5px 1.5px at 78% 24%, rgba(237, 242, 255, .8), transparent),
    radial-gradient(1px 1px at 90% 66%, rgba(237, 242, 255, .55), transparent),
    radial-gradient(60% 80% at 15% 18%, rgba(37, 99, 235, .28), transparent 62%),
    radial-gradient(50% 70% at 85% 28%, rgba(64, 131, 176, .22), transparent 60%),
    radial-gradient(70% 90% at 60% 95%, rgba(76, 47, 158, .26), transparent 65%),
    linear-gradient(180deg, var(--cl-space), var(--cl-space-deep));
}

/* caption = full-height layer, navy → transparent gradient, vertically centred content */
.gnm-home-hero-carousel--overlay .gnm-home-hero-carousel__caption--overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* legibility navy scrim + a hint of nebula (blue toward the title, violet
     at the foot) and faint stars confined to the dark zone (x <= 30%) */
  background:
    radial-gradient(1.5px 1.5px at 8% 26%, rgba(237, 242, 255, .5), transparent),
    radial-gradient(1px 1px at 18% 64%, rgba(237, 242, 255, .35), transparent),
    radial-gradient(1.5px 1.5px at 27% 38%, rgba(237, 242, 255, .4), transparent),
    radial-gradient(1px 1px at 13% 82%, rgba(237, 242, 255, .3), transparent),
    radial-gradient(50% 90% at 12% 20%, rgba(37, 99, 235, .16), transparent 60%),
    radial-gradient(45% 80% at 30% 95%, rgba(76, 47, 158, .14), transparent 65%),
    linear-gradient(90deg, rgba(10, 24, 48, .94) 0%, rgba(10, 24, 48, .55) 45%, rgba(10, 24, 48, .05) 80%);
  padding: 0 6%;
  text-align: left;
}

.gnm-home-hero-carousel__eyebrow {
  display: flex;
  align-items: center;
  gap: .55rem;
  color: var(--cl-hd-yellow);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.gnm-home-hero-carousel__eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cl-red);
  flex: 0 0 auto;
}

.gnm-home-hero-carousel--overlay .gnm-home-hero-carousel__title {
  color: #fff;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.01em;
  max-width: 18ch;
  margin: .6rem 0 1.3rem;
}

.gnm-home-hero-carousel--overlay .gnm-home-hero-carousel__content,
.gnm-home-hero-carousel--overlay .gnm-home-hero-carousel__content p {
  color: rgba(255, 255, 255, .85);
  font-size: 1rem;
  line-height: 1.65;
  margin-bottom: 0;
}

.gnm-home-hero-carousel__actions {
  display: flex;
  gap: .7rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}

.gnm-home-hero-carousel__actions .btn {
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: .62rem 1.2rem;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* main CTA: cardio red, white text */
.gnm-home-hero-carousel--overlay .gnm-home-hero-carousel__cta {
  background: var(--cl-red);
  border: 0;
  color: #fff;
  transition: background-color 150ms ease-out, transform 150ms ease-out, box-shadow 150ms ease-out;
}

.gnm-home-hero-carousel--overlay .gnm-home-hero-carousel__cta:hover,
.gnm-home-hero-carousel--overlay .gnm-home-hero-carousel__cta:focus {
  background: var(--cl-red-deep);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(10, 24, 48, .18);
}

.gnm-home-hero-carousel__cta .bi {
  display: inline-block;
  transition: transform 200ms ease-out;
}

.gnm-home-hero-carousel--overlay .gnm-home-hero-carousel__cta:hover .bi {
  transform: translateX(4px);
}

/* ghost secondary CTA: translucent white border, magnifier prefix */
.gnm-home-hero-carousel--overlay .gnm-home-hero-carousel__cta--secondary {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, .65);
  color: #fff;
  transition: background-color 150ms ease-out, border-color 150ms ease-out;
}

.gnm-home-hero-carousel--overlay .gnm-home-hero-carousel__cta--secondary::before {
  content: "\f52a"; /* bi-search */
  font-family: "bootstrap-icons";
  display: inline-block;
  transition: transform 200ms ease-out;
}

.gnm-home-hero-carousel--overlay .gnm-home-hero-carousel__cta--secondary:hover,
.gnm-home-hero-carousel--overlay .gnm-home-hero-carousel__cta--secondary:focus {
  background: rgba(255, 255, 255, .14);
  border-color: #fff;
  color: #fff;
  transform: none;
  box-shadow: none;
}

.gnm-home-hero-carousel--overlay .gnm-home-hero-carousel__cta--secondary:hover::before {
  transform: scale(1.12);
}

/* previous arrow hidden, next discreet (like the live) */
.gnm-home-hero-carousel--overlay .carousel-control-prev {
  display: none;
}

.gnm-home-hero-carousel--overlay .carousel-control-next {
  opacity: .5;
}

/* the live is desktop-only (d-none d-lg-block) */
@media (max-width: 991.98px) {
  .gnm-home-hero--carousel-overlay {
    display: none;
  }
}

/* ---- Home type scale (typeset audit 12/07/2026): 600/700 headings
   for real weight contrast, card links as uppercase labels ---- */

.gnm-home-module .gnm-section-title__title {
  font-size: 2rem;
  font-weight: 700;
}

.gnm-home-search-cta__submit {
  font-weight: 600;
}

/* ---- Latest publications band: steel veil descending from the hero (6%
   radial halo) over a pearl -> white gradient, the band melts into the page
   instead of cutting off sharply ---- */

.gnm-home-latest-articles {
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(64, 131, 176, .06), transparent 60%),
    linear-gradient(180deg, #f3f6fa 0%, #f7f8fa 45%, #ffffff 100%);
  padding-top: 36px;
}

/* ---- White page background, like the live Pancreoscopie (base.css: #f5f7fb) ---- */

body.gnm-base-site {
  background: #fff;
}

/* ---- Signature hairline between home modules ---- */

.gnm-home-module + .gnm-home-module {
  border-top: 2px solid transparent;
  border-image: var(--cl-liseret) 1;
}

/* ---- Light content: steel brand, red CTAs ---- */

/* Magnifier inside the input (bi-search SVG as data-URI, BS validation-icon technique) */
.gnm-home-search-cta__input {
  padding-left: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2333698f'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 15px center;
  background-size: 17px 17px;
}

.gnm-home-search-cta__input:focus {
  border-color: var(--cl-steel);
  box-shadow: 0 0 0 .25rem rgba(64, 131, 176, .18);
}

.gnm-home-search-cta__submit {
  background: var(--cl-red);
  border-color: var(--cl-red);
}

.gnm-home-search-cta__submit:hover,
.gnm-home-search-cta__submit:focus {
  background: var(--cl-red-deep);
  border-color: var(--cl-red-deep);
}

.gnm-home-search-cta__specialty-chip {
  border-color: rgba(64, 131, 176, .35);
  color: var(--cl-steel-ink);
  font-weight: 500;
}

.gnm-home-search-cta__specialty-chip:hover,
.gnm-home-search-cta__specialty-chip:focus {
  background: var(--cl-steel);
  border-color: var(--cl-steel);
  color: #fff;
}

/* ---- Latest articles ---- */

/* card = copy of the live's card-breve (border, radius 8, p-4, hover steel border + shadow) */
.gnm-home-module .gnm-home-article-card--cover {
  background: #fff;
  /* translucent navy, more discreet than --cl-hd-border on the band gradient */
  border: 1px solid rgba(37, 60, 98, .07);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: none;
  transition: border-color .15s, box-shadow .15s;
}

.gnm-home-article-card--cover:hover {
  border-color: var(--cl-steel);
  box-shadow: 0 6px 22px rgba(10, 24, 48, .07);
}

/* specialty as a pill (family signature: light at rest / inverted steel on hover) */
.gnm-home-article-card__meta span[aria-hidden] {
  display: none;
}

.gnm-home-article-card__meta span:last-child {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(64, 131, 176, .12);
  color: var(--cl-steel-ink);
  font-weight: 600;
  transition: color 200ms ease-out, background-color 200ms ease-out;
}

.gnm-home-article-card:hover .gnm-home-article-card__meta span:last-child {
  background: var(--cl-steel);
  color: #fff;
}

.gnm-home-article-card__title .gnm-title-link:hover,
.gnm-home-article-card__title .gnm-title-link:focus {
  color: var(--cl-steel-ink);
}

.gnm-home-article-card__link {
  color: var(--cl-steel-ink);
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.gnm-home-article-card__link span[aria-hidden] {
  display: inline-block;
  transition: transform .2s ease;
}

.gnm-home-article-card--cover:hover .gnm-home-article-card__link span[aria-hidden] {
  transform: translateX(5px);
}

.gnm-section-title__link span[aria-hidden] {
  display: inline-block;
  transition: transform 200ms cubic-bezier(.16, 1, .3, 1);
}

.gnm-section-title__link:hover span[aria-hidden],
.gnm-section-title__link:focus span[aria-hidden] {
  transform: translateX(4px);
}

/* "Last update of the site" eyebrow (live Pancreoscopie pattern, cardio-red bullet) */
.gnm-home-latest-articles__last-update {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 .5rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cl-space, #0a1830);
}
.gnm-home-latest-articles__last-update::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cl-red, #dd100b);
  flex: 0 0 auto;
}

/* ---- Latest articles, with-covers variant (inspired by the live Pancreoscopie briefs:
   journal thumbnail + bulleted title + journal line + excerpt + link) ---- */

.gnm-home-article-card--cover .gnm-home-article-card__head {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: .5rem;
}

.gnm-home-article-card__cover {
  flex: 0 0 66px;
  display: block;
  align-self: flex-start;
  margin-top: .3rem;
}

.gnm-home-article-card__cover-img {
  width: 66px;
  height: auto;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
  display: block;
}

/* red-bulleted title (echo of the live: yellow bullet + green title -> red + steel) */
.gnm-home-article-card--cover .gnm-home-article-card__title {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.28;
  font-weight: 700;
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
}

.gnm-home-article-card--cover .gnm-home-article-card__title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cl-red);
  margin-right: .5rem;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.gnm-home-article-card--cover .gnm-home-article-card__title .gnm-title-link {
  color: var(--cl-steel-ink);
}

.gnm-home-article-card--cover .gnm-home-article-card__title .gnm-title-link:hover,
.gnm-home-article-card--cover .gnm-home-article-card__title .gnm-title-link:focus {
  color: var(--cl-steel);
}

.gnm-home-article-card__journal {
  margin: 0 0 .5rem;
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #7b8094;
}

.gnm-home-article-card--cover .gnm-home-article-card__summary {
  margin: .5rem 0 .4rem;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.65;
  color: var(--cl-space);
}

/* ---- Specialty spotlight: "calm sky" banners (static echoes of the hero) ---- */

.gnm-site-specialty-spotlight__banner {
  min-height: 96px;
  background-color: var(--cl-space);
  background-image:
    radial-gradient(1px 1px at 31px 22px, rgba(237, 242, 255, .8) 50%, transparent 51%),
    radial-gradient(1px 1px at 118px 58px, rgba(237, 242, 255, .55) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 74px 79px, rgba(237, 242, 255, .65) 50%, transparent 51%),
    radial-gradient(70% 130% at 24% 110%, rgba(37, 99, 235, .62), transparent 72%),
    radial-gradient(46% 100% at 86% -10%, rgba(76, 47, 158, .45), transparent 75%),
    linear-gradient(180deg, var(--cl-space) 0%, var(--cl-space-deep) 100%);
  background-size: 157px 157px, 211px 211px, 251px 251px, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: repeat, repeat, repeat, no-repeat, no-repeat, no-repeat;
}

.gnm-site-specialty-spotlight__row > div:nth-child(even) .gnm-site-specialty-spotlight__banner {
  background-image:
    radial-gradient(1px 1px at 44px 67px, rgba(237, 242, 255, .8) 50%, transparent 51%),
    radial-gradient(1px 1px at 102px 25px, rgba(237, 242, 255, .55) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 143px 81px, rgba(237, 242, 255, .65) 50%, transparent 51%),
    radial-gradient(70% 130% at 76% 110%, rgba(64, 131, 176, .62), transparent 72%),
    radial-gradient(46% 100% at 12% -10%, rgba(37, 99, 235, .35), transparent 75%),
    linear-gradient(180deg, var(--cl-space) 0%, var(--cl-space-deep) 100%);
}

.gnm-site-specialty-spotlight__card {
  overflow: hidden;
  transition: border-color 200ms cubic-bezier(.16, 1, .3, 1);
}

.gnm-site-specialty-spotlight__card:hover {
  border-color: rgba(64, 131, 176, .45);
}

.gnm-site-specialty-spotlight .gnm-site-specialty-spotlight__term {
  color: var(--gnm-primary);
  font-weight: 600;
}

.gnm-site-specialty-spotlight__link {
  color: var(--cl-steel-ink);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.gnm-site-specialty-spotlight__recent-title {
  color: var(--cl-steel-ink);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
  font-weight: 700;
}

.gnm-site-specialty-spotlight__recent-list a:hover,
.gnm-site-specialty-spotlight__recent-list a:focus {
  color: var(--cl-steel-ink);
}

/* ---- Article ranking: prominent numbers in cardio red ---- */

.gnm-home-article-ranking__rank {
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
  color: var(--cl-red);
}

.gnm-home-article-ranking__item {
  transition: border-color 200ms cubic-bezier(.16, 1, .3, 1);
}

.gnm-home-article-ranking__item:hover {
  border-color: rgba(64, 131, 176, .45);
}

.gnm-home-article-ranking__title-link:hover,
.gnm-home-article-ranking__title-link:focus {
  color: var(--cl-steel-ink);
}

/* ---- Editorial highlight: final echo of the sky (static, no animation) ---- */

.gnm-home-editorial-highlight__card {
  background-color: var(--cl-space);
  background-image:
    radial-gradient(1px 1px at 37px 41px, rgba(237, 242, 255, .7) 50%, transparent 51%),
    radial-gradient(1px 1px at 131px 88px, rgba(237, 242, 255, .5) 50%, transparent 51%),
    radial-gradient(40% 120% at 82% 118%, rgba(64, 131, 176, .34), transparent 72%),
    radial-gradient(52% 130% at 14% -20%, rgba(37, 99, 235, .32), transparent 75%),
    linear-gradient(180deg, var(--cl-space) 0%, var(--cl-space-deep) 100%);
  background-size: 223px 223px, 293px 293px, 100% 100%, 100% 100%, 100% 100%;
  background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat;
  border: 1px solid rgba(148, 197, 255, .18);
}

.gnm-home-editorial-highlight__card .gnm-section-title__subtitle {
  color: var(--cl-eyebrow-light);
}

.gnm-home-editorial-highlight__card .gnm-section-title__title {
  color: var(--cl-hero-text);
}

.gnm-home-editorial-highlight__body,
.gnm-home-editorial-highlight__body p {
  color: var(--cl-hero-muted);
}

.gnm-home-editorial-highlight__cta {
  background: var(--cl-red);
  border-color: transparent;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--gnm-radius-md);
  box-shadow: 0 6px 24px rgba(221, 16, 11, .35);
  transition: background-color 200ms cubic-bezier(.16, 1, .3, 1), transform 200ms cubic-bezier(.16, 1, .3, 1), box-shadow 200ms cubic-bezier(.16, 1, .3, 1);
}

.gnm-home-editorial-highlight__cta:hover,
.gnm-home-editorial-highlight__cta:focus {
  background: var(--cl-red-deep);
  transform: translateY(-1px);
  box-shadow: 0 10px 32px rgba(221, 16, 11, .5);
}

/* ---- Light product dressing (light content) ---- */

.gnm-ui-eyebrow {
  color: var(--cl-steel-ink);
  letter-spacing: .12em;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}

/* ---- Hero search slide (Springer Nature Link header pattern) ---- */

.gnm-home-hero-carousel__search {
  max-width: 560px;
  margin-top: 20px;
}

.gnm-home-hero-carousel__search .gnm-home-hero-carousel__search-input {
  border: 0;
  padding: 14px 18px 14px 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237b8094'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 17px center;
  background-size: 17px 17px;
}

.gnm-home-hero-carousel__search .gnm-home-hero-carousel__search-submit {
  background: var(--cl-red);
  border-color: var(--cl-red);
  padding-inline: 22px;
}

.gnm-home-hero-carousel__search .gnm-home-hero-carousel__search-submit:hover,
.gnm-home-hero-carousel__search .gnm-home-hero-carousel__search-submit:focus {
  background: var(--cl-red-deep);
  border-color: var(--cl-red-deep);
}

.gnm-home-hero-carousel__search-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}

.gnm-home-hero-carousel__search-chips-label {
  color: var(--cl-steel-light);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-right: 2px;
}

.gnm-home-hero-carousel__search-chip {
  color: var(--cl-hero-text);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(168, 203, 232, .55);
  background: rgba(237, 242, 255, .07);
  transition: background-color .18s ease-out, border-color .18s ease-out, color .18s ease-out;
}

.gnm-home-hero-carousel__search-chip:hover,
.gnm-home-hero-carousel__search-chip:focus {
  background: var(--cl-star);
  border-color: var(--cl-star);
  color: var(--cl-space);
}

/* Brand bullet before the eyebrows (label-sec pattern of the live Pancreoscopie) */
.gnm-ui-eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cl-red);
  flex: 0 0 auto;
}

.gnm-ui-section-title {
  color: var(--gnm-primary);
}

/* ---- "Deep space" theme of the Bibliographic search band: same sky
   as the hero (layers + stars in the background stack, under the content) ---- */
.gnm-home-search-cta__card {
  border: 0;
  border-radius: var(--gnm-radius-lg);
  background:
    radial-gradient(1.5px 1.5px at 12% 30%, rgba(237, 242, 255, .9), transparent),
    radial-gradient(1px 1px at 28% 72%, rgba(237, 242, 255, .6), transparent),
    radial-gradient(1.5px 1.5px at 46% 18%, rgba(237, 242, 255, .7), transparent),
    radial-gradient(1px 1px at 64% 58%, rgba(237, 242, 255, .5), transparent),
    radial-gradient(1.5px 1.5px at 78% 24%, rgba(237, 242, 255, .8), transparent),
    radial-gradient(1px 1px at 90% 66%, rgba(237, 242, 255, .55), transparent),
    radial-gradient(60% 80% at 15% 18%, rgba(37, 99, 235, .28), transparent 62%),
    radial-gradient(50% 70% at 85% 28%, rgba(64, 131, 176, .22), transparent 60%),
    radial-gradient(70% 90% at 60% 95%, rgba(76, 47, 158, .26), transparent 65%),
    linear-gradient(180deg, var(--cl-space), var(--cl-space-deep));
  color: var(--cl-hero-text);
}

.gnm-home-search-cta__card .gnm-ui-eyebrow {
  color: var(--cl-steel-light);
}

.gnm-home-search-cta__card .gnm-section-title__title,
.gnm-home-search-cta__card h5 {
  color: var(--cl-hero-text);
}

.gnm-home-search-cta__card .gnm-home-search-cta__subtitle,
.gnm-home-search-cta__card .text-muted {
  color: var(--cl-hero-muted) !important;
}

.gnm-home-search-cta__card hr,
.gnm-home-search-cta__card .border-bottom {
  border-color: rgba(168, 203, 232, .3) !important;
}

/* same template as the hero search slide's bar: content group
   at 560px (not edge-to-edge), 20px below the text, centred in the card */
.gnm-home-search-cta__card .gnm-home-search-cta__form {
  max-width: 560px;
  margin-top: 20px;
  margin-inline: auto;
}

.gnm-home-search-cta__card .gnm-home-search-cta__input {
  border: 0;
  padding: 14px 18px 14px 46px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%237b8094'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3E%3C/svg%3E");
  background-position: left 17px center;
}

/* submit identical to the hero search slide: red, normal weight
   (the navy came from .gnm-base-site .btn-primary, 0,2,0 — matched here) */
.gnm-home-search-cta__card .gnm-home-search-cta__submit {
  padding-inline: 22px;
  background: var(--cl-red);
  border-color: var(--cl-red);
  font-weight: 400;
}

.gnm-home-search-cta__card .gnm-home-search-cta__submit:hover,
.gnm-home-search-cta__card .gnm-home-search-cta__submit:focus {
  background: var(--cl-red-deep);
  border-color: var(--cl-red-deep);
}

.gnm-home-search-cta__card .gnm-home-search-cta__advanced-wrap {
  font-size: .85rem;
}

/* Advanced search link: sliders icon, bare hover (white text + icon
   slide) — no background, no rule, the base.css button radius/min-height
   stays invisible */
.gnm-home-search-cta__card .gnm-home-search-cta__advanced {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: 2px 0;
  color: var(--cl-hero-muted, #a8c3dd);
  font-weight: 600;
  text-decoration: none;
  transition: color .2s ease;
}

.gnm-home-search-cta__card .gnm-home-search-cta__advanced .bi {
  display: inline-block;
  font-size: 1.05em;
  transition: transform .2s ease;
}

.gnm-home-search-cta__card .gnm-home-search-cta__advanced:hover,
.gnm-home-search-cta__card .gnm-home-search-cta__advanced:focus-visible {
  color: #fff;
}

.gnm-home-search-cta__card .gnm-home-search-cta__advanced:hover .bi,
.gnm-home-search-cta__card .gnm-home-search-cta__advanced:focus-visible .bi {
  transform: translateX(3px);
}

.gnm-home-search-cta__card .gnm-home-search-cta__specialty-chip {
  color: var(--cl-hero-text);
  font-size: .82rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid rgba(168, 203, 232, .55);
  background: rgba(237, 242, 255, .07);
  transition: background-color .18s ease-out, border-color .18s ease-out, color .18s ease-out;
}

.gnm-home-search-cta__card .gnm-home-search-cta__specialty-chip:hover,
.gnm-home-search-cta__card .gnm-home-search-cta__specialty-chip:focus {
  background: var(--cl-star);
  border-color: var(--cl-star);
  color: var(--cl-space);
}

.gnm-site-footer-shell {
  border-top: 1px solid var(--gnm-border);
}

/* ---- Journals A-Z: journal alphabet (live Pancreoscopie pattern) ---- */
.gnm-home-journals-az__count {
  margin: -0.5rem 0 1.25rem;
  color: #7b8094;
}

.gnm-home-journals-az__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 1.25rem;
}

.gnm-home-journals-az__letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border-radius: 10px;
  background: #eef1f7;
  border: 1px solid transparent;
  color: var(--cl-space, #0a1830);
  font-weight: 700;
  text-decoration: none;
  transition: color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out;
}

a.gnm-home-journals-az__letter:hover,
a.gnm-home-journals-az__letter:focus {
  background: #fff;
  border-color: var(--cl-steel, #4083b0);
  color: var(--cl-steel-ink, #33698f);
}

a.gnm-home-journals-az__letter.is-active {
  background: var(--cl-steel, #4083b0);
  color: #fff;
}

.gnm-home-journals-az__letter--off {
  background: transparent;
  color: #c3c8d4;
  font-weight: 600;
}

.gnm-home-journals-az__journal {
  display: flex;
  align-items: flex-start; /* icon on the 1st line of multi-line names */
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1px solid #e6e8ee;
  border-radius: 8px;
  color: var(--cl-steel-ink, #33698f);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 200ms cubic-bezier(.16, 1, .3, 1), color 200ms ease-out;
}

.gnm-home-journals-az__journal:hover,
.gnm-home-journals-az__journal:focus {
  border-color: var(--cl-steel, #4083b0);
  color: var(--cl-space, #0a1830);
}

.gnm-home-journals-az__journal .bi {
  margin-top: 3px; /* optical alignment on the 1st line (lh 1.5) */
  color: var(--cl-steel, #4083b0);
}

.gnm-home-journals-az__badge {
  margin-left: auto;
  align-self: center; /* the counter stays centred on the item's height */
  font-size: .72rem;
  font-weight: 700;
  color: #7b8094;
}

.gnm-home-journals-az__hint {
  margin: .25rem 0 0;
  color: #7b8094;
}

/* ---- Search page (?s=): editorial head, card-breve cards, charter pagination ---- */
.gnm-route-search { padding-block: 40px 72px !important; } /* inline style of the template */

.gnm-search-results__head {
  max-width: 720px;
  margin-bottom: 2rem;
}

.gnm-search-results__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 .5rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cl-space, #0a1830);
}

.gnm-search-results__eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--cl-red, #dd100b);
  flex: 0 0 auto;
}

.gnm-search-results__title {
  margin: 0 0 .25rem;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--cl-space, #0a1830);
}

.gnm-search-results__query { color: var(--cl-steel-ink, #33698f); }

.gnm-search-results__count {
  margin: 0 0 1.25rem;
  color: #7b8094;
}

.gnm-search-results__refine .search-form {
  display: flex;
  gap: 10px;
  max-width: 520px;
}

.gnm-search-results__refine .search-field {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: 1px solid #d5dae4;
  border-radius: 8px;
  transition: border-color .15s, box-shadow .15s;
}

.gnm-search-results__refine .search-field:focus {
  outline: 0;
  border-color: var(--cl-steel, #4083b0);
  box-shadow: 0 0 0 .25rem rgba(64, 131, 176, .18);
}

.gnm-search-results__refine .search-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  border: 0;
  border-radius: 8px;
  background: var(--cl-red, #dd100b);
  color: #fff;
  font-weight: 600;
  transition: background-color 200ms cubic-bezier(.16, 1, .3, 1);
}

.gnm-search-results__refine .search-submit:hover,
.gnm-search-results__refine .search-submit:focus {
  background: var(--cl-red-deep, #b50d09);
}

/* result cards: same vocabulary as the home card-breves */
/* ---- Article page: bare content, no frame (13/07) — the Bootstrap card
   and its card-body are neutralised to align the text on the left edge
   of the column and on the top of the row (same line as the sidebar,
   row in align-items-start) ---- */

.gnm-base-site .gnm-article-main-card {
  border: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.gnm-base-site .gnm-article-main-card > .card-body {
  padding: 0;
}

.gnm-base-site .gnm-article-card.card {
  border-radius: 8px;
  box-shadow: none;
  transition: border-color 200ms cubic-bezier(.16, 1, .3, 1);
}

.gnm-base-site .gnm-article-card.card:hover { border-color: var(--cl-steel, #4083b0) !important; } /* base.css: .gnm-loop-card { border !important } */

.gnm-article-card__title {
  margin: 0; /* base.css title-xl: margin 8px 0 10px + 23px -> line box taller than the link */
  font-size: 1.125rem;
  line-height: 1.3;
}

.gnm-article-card__title-link {
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cl-steel-ink, #33698f);
}

.gnm-article-card__title-link:hover,
.gnm-article-card__title-link:focus,
.gnm-article-card.card:hover .gnm-article-card__title-link { color: var(--cl-space, #0a1830); } /* whole card clickable (stretched-link): the card hover lights the title */

.gnm-article-card__meta {
  font-size: .72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: #7b8094 !important; /* .text-body-secondary carries !important */
}

.gnm-article-card__excerpt {
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.65;
  color: var(--cl-space, #0a1830);
}

.gnm-article-card__cover-image {
  margin-top: .2rem;
  width: 84px;
  border-color: #e6e8ee !important;
}

/* card head: cover + title aligned at the top, red bullet (home vocab) */
.gnm-article-card__head { margin-bottom: .6rem; }
.gnm-article-card__title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cl-red, #dd100b);
  margin-right: .5rem;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* action link: the live's READ BRIEF, standard directional arrow */
.gnm-article-card__read {
  padding-top: .75rem;
  color: var(--cl-steel-ink, #33698f);
  font-size: .8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: none;
}
.gnm-article-card__read:hover,
.gnm-article-card__read:focus { color: var(--cl-space, #0a1830); }
.gnm-article-card__read span[aria-hidden] {
  display: inline-block;
  transition: transform .2s ease;
}
.gnm-article-card.card:hover .gnm-article-card__read span[aria-hidden] { transform: translateX(5px); }

/* pagination (shared markup without a gnm hook: scoped by the site body) */
.gnm-base-site .pagination { gap: 6px; }

.gnm-base-site .pagination .page-link {
  border: 1px solid #e6e8ee;
  border-radius: 8px;
  color: var(--cl-space, #0a1830);
  font-weight: 600;
  transition: color 150ms ease-out, background-color 150ms ease-out, border-color 150ms ease-out;
}

.gnm-base-site .pagination .page-link:hover,
.gnm-base-site .pagination .page-link:focus {
  background: #eef1f7;
  border-color: #e6e8ee;
  color: var(--cl-steel-ink, #33698f);
  box-shadow: none;
}

.gnm-base-site .pagination .page-item.active .page-link {
  background: var(--cl-steel, #4083b0);
  border-color: var(--cl-steel, #4083b0);
  color: #fff;
}

.gnm-base-site .pagination .page-item.disabled .page-link { color: #c3c8d4; }

/* search empty state */
.gnm-content-none {
  border: 1px solid #e6e8ee;
  border-radius: 8px;
  background: #fff;
  padding: 2rem;
}

.gnm-content-none__title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cl-space, #0a1830);
}

.gnm-content-none__link {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--cl-steel-ink, #33698f);
}

.gnm-content-none__link:hover { color: var(--cl-space, #0a1830); }

.gnm-content-none__link .bi {
  display: inline-block;
  transition: transform 200ms ease-out;
}

.gnm-content-none__link:hover .bi { transform: translateX(4px); }

/* ---- Top articles list variant: copy of the live Pancreoscopie (custom-style.css l.111-116),
   identical structure and measures, colours re-tokenised to the Cardio charter ---- */
.gnm-home-article-ranking__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gnm-home-article-ranking__list li { border-bottom: 1px solid var(--gnm-border, #e6e8ee); }

.gnm-home-article-ranking__list li:last-child { border-bottom: 0; }

.gnm-home-article-ranking__list a {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  padding: .7rem 0;
  color: var(--cl-space, #0a1830);
  text-decoration: none;
  transition: color 150ms ease-out;
}

.gnm-home-article-ranking__list a:hover,
.gnm-home-article-ranking__list a:focus { color: var(--cl-steel-ink, #33698f); }

.gnm-home-article-ranking__num {
  flex: 0 0 auto;
  width: 1.6rem;
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cl-red, #dd100b);
}

.gnm-home-article-ranking__ttl {
  font-weight: 600;
  font-size: .92rem;
  line-height: 1.35;
}

/* ---- Horizontal sections (GNM grid rhythm: modules married in lg columns) ---- */
.gnm-home-section__row { row-gap: 2rem; }

/* ranking embedded in a column: items stacked in a vertical list (the live's Top articles) */
.gnm-home-article-ranking__card--embedded .gnm-home-article-ranking__row { row-gap: 14px; }

.gnm-home-article-ranking__card--embedded .gnm-home-article-ranking__row > [class*="col-"] {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
}

/* ---- Motion ---- */

@keyframes cl-nebula-drift {
  from { transform: translate3d(-1.5%, -1%, 0) rotate(0deg); }
  to   { transform: translate3d(1.5%, 1.5%, 0) rotate(3deg); }
}

@keyframes cl-star-twinkle {
  from { opacity: .35; }
  to   { opacity: .85; }
}

@media (prefers-reduced-motion: reduce) {
  .gnm-home-hero--standard::before,
  .gnm-home-hero--standard::after {
    animation: none;
  }
}

/* ==================================================================
   Article page (gnm-route-single) - transposition of the live Pancreoscopie
   Main 8 / sidebar 4; bulleted topic eyebrow, sentence-case title,
   journal + date + reading-time line, bold standfirst, facts + actions.
   ================================================================== */

/* topic eyebrow: red bullet (prominent marker) + uppercase */
.gnm-route-single .gnm-article-topic {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.gnm-route-single .gnm-article-topic::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cl-red, #dd100b);
  margin-right: .5rem;
  vertical-align: 1px;
}
.gnm-route-single .gnm-article-topic a {
  color: var(--cl-space, #0a1830);
  text-decoration: none;
  transition: color .18s ease-out;
}
.gnm-route-single .gnm-article-topic a:hover { color: var(--cl-steel-ink, #33698f); }

/* title: sentence case, the page's major landmark (overrides base.css 28-40px) */
.gnm-route-single .gnm-article-title {
  font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--cl-space, #0a1830);
}

/* journal + date + reading-time line */
.gnm-route-single .gnm-article-journal {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cl-steel-ink, #33698f);
}
.gnm-route-single .gnm-article-meta { font-size: .82rem; color: #6a7285; }
.gnm-route-single .gnm-article-meta .bi { color: var(--cl-steel, #4083b0); margin-right: .4rem; }

.gnm-route-single .gnm-article-authors { font-size: .9rem; color: #3d4455; }
.gnm-route-single .gnm-article-affiliations { font-size: .82rem; }

/* standfirst: prominent lede, press treatment (echo of the home cards) */
.gnm-route-single .gnm-article-standfirst {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.65;
  color: var(--cl-space, #0a1830);
  max-width: 70ch;
}

.gnm-route-single .gnm-article-sep {
  border: 0;
  border-top: 1px solid var(--gnm-border, #e6e8ee);
  opacity: 1;
}

/* body section headings (Abstract...) + reading comfort */
.gnm-route-single .gnm-article-section-heading {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cl-space, #0a1830);
}
.gnm-route-single .gnm-article-abstract .gnm-ui-body-text,
.gnm-route-single .gnm-article-body { line-height: 1.65; max-width: 70ch; }

/* ---- sidebar: This article / Actions cards ---- */
.gnm-route-single .gnm-article-sidebar-heading {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6a7285;
  margin-bottom: .85rem;
}
.gnm-route-single .gnm-article-facts__row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .55rem 0;
  border-top: 1px solid var(--gnm-border, #e6e8ee);
}
.gnm-route-single .gnm-article-facts__row:first-child { border-top: 0; padding-top: 0; }
.gnm-route-single .gnm-article-facts__row dt {
  font-size: .72rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #6a7285;
  flex: 0 0 auto;
  padding-top: .15rem;
}
.gnm-route-single .gnm-article-facts__row dd {
  margin: 0;
  font-size: .85rem;
  font-weight: 600;
  color: var(--cl-space, #0a1830);
  text-align: right;
}
.gnm-route-single .gnm-article-facts__row dd a {
  color: var(--cl-steel-ink, #33698f);
  text-decoration: none;
}
.gnm-route-single .gnm-article-facts__row dd a:hover { text-decoration: underline; }

/* ---- actions as a stack of pills (restyled list-group, bookmark shortcode included) ---- */
.gnm-route-single .gnm-article-sidebar-actions { display: grid; gap: .5rem; }
.gnm-route-single .gnm-article-sidebar-actions .list-group-item {
  border: 1px solid var(--gnm-border, #e6e8ee) !important; /* flush sets border-width 0 */
  border-radius: 999px;
  padding: .55rem 1.1rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--cl-space, #0a1830);
  background: #fff;
  transition: color .18s ease-out, background-color .18s ease-out, border-color .18s ease-out;
}
.gnm-route-single .gnm-article-sidebar-actions .list-group-item:hover {
  color: var(--cl-steel-ink, #33698f);
  border-color: var(--cl-steel, #4083b0) !important;
  background: #f2f7fb;
}
.gnm-route-single .gnm-article-sidebar-actions .list-group-item .bi { color: var(--cl-steel-ink, #33698f); }
/* primary action: Add to my bibliography (anonymous link + bookmark shortcode) */
.gnm-route-single .gnm-article-sidebar-actions .gnm-article-action--primary,
.gnm-route-single .gnm-article-sidebar-actions .bm-bookmark-button {
  background: var(--cl-space, #0a1830);
  border-color: var(--cl-space, #0a1830) !important;
  color: #fff;
}
.gnm-route-single .gnm-article-sidebar-actions .gnm-article-action--primary:hover,
.gnm-route-single .gnm-article-sidebar-actions .bm-bookmark-button:hover {
  background: var(--cl-steel-ink, #33698f);
  border-color: var(--cl-steel-ink, #33698f) !important;
  color: #fff;
}
.gnm-route-single .gnm-article-sidebar-actions .gnm-article-action--primary .bi { color: #fff; }

/* ---- back to the library ---- */
.gnm-route-single .gnm-article-back a {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cl-steel-ink, #33698f);
  text-decoration: none;
}
.gnm-route-single .gnm-article-back a:hover { color: var(--cl-space, #0a1830); }
.gnm-route-single .gnm-article-back .bi {
  display: inline-block; /* transform inoperative on inline */
  transition: transform .18s ease-out;
}
.gnm-route-single .gnm-article-back a:hover .bi { transform: translateX(-3px); }

/* ==================================================================
   My bibliography page (gnm-bookmark-manager plugin) - charter of the live
   Pancreoscopie transposed at the EXACT MEASURES (rootKit/2637
   custom-style.css .biblio-*), colours re-tokenised Cardio:
   green -> steel/steel-ink, navy -> space. 880px column like the live.
   ================================================================== */

/* 880px reading column (the live's biblio-wrap/biblio-head) */
.gnm-route-bibliography .gnm-bibliography-head,
.gnm-route-bibliography #bookmark-manager-root {
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}

/* page head: label-sec + h1 1.7rem + counter (live measures) */
.gnm-route-bibliography .gnm-bibliography-head {
  margin-bottom: 1rem !important;
}
.gnm-route-bibliography .gnm-bibliography-head__eyebrow {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--cl-space, #0a1830);
}
.gnm-route-bibliography .gnm-bibliography-head__eyebrow::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cl-red, #dd100b);
  margin-right: .5rem;
  vertical-align: 1px;
}
.gnm-route-bibliography .gnm-bibliography-head__title {
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--cl-space, #0a1830);
  margin-top: .3rem !important;
}
.gnm-route-bibliography .gnm-bibliography-head__count {
  font-size: .86rem;
  color: #7b8094;
}
.gnm-route-bibliography .gnm-bibliography-head__count strong {
  color: var(--cl-steel-ink, #33698f);
  font-weight: 700;
}

/* local re-tokenisation of the plugin */
.gnm-base-site #bookmark-manager-root {
  --gnm-primary: var(--cl-space, #0a1830);
}

/* no enclosing card (the live lays the cards on the page background) */
.gnm-base-site #bookmark-manager-root.gnm-surface-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}
.gnm-base-site .gnm-page-card:has(#bookmark-manager-root) {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* folder chips = the live's .chip2: .78rem/600, radius 20, padding .35/.85 */
.gnm-base-site #bookmark-manager-root .bm-tabs {
  gap: 8px !important;
  margin-bottom: 1.1rem !important;
}
.gnm-base-site #bookmark-manager-root .bm-tab.nav-link {
  font-size: .78rem;
  font-weight: 600;
  border-radius: 20px;
  padding: .35rem .85rem;
  border: 1px solid var(--gnm-border, #e6e8ee);
  background: #fff;
  color: var(--cl-space, #0a1830);
  gap: 5px;
}
.gnm-base-site #bookmark-manager-root .bm-tab.nav-link:hover,
.gnm-base-site #bookmark-manager-root .bm-tab.nav-link:focus {
  border-color: var(--cl-steel, #4083b0);
  color: var(--cl-steel-ink, #33698f);
  background: #fff;
}
.gnm-base-site #bookmark-manager-root .bm-tab.nav-link.active {
  background: var(--cl-space, #0a1830);
  border-color: var(--cl-space, #0a1830);
  color: #fff;
}
.gnm-base-site #bookmark-manager-root .bm-tab-count {
  font-size: .68rem;
  font-weight: 700;
}
.gnm-base-site #bookmark-manager-root .bm-tab-count.text-bg-light {
  background: #eef2f7 !important;
  color: #4a5568 !important;
}

/* + New folder = the live's .chip2.ghost: dashed, grey, stuck to the folders */
.gnm-base-site #bookmark-manager-root .bm-add-folder.btn-primary {
  margin-left: 0 !important;
  background: #fff;
  border: 1px dashed var(--gnm-border, #e6e8ee);
  color: #7b8094;
  border-radius: 20px;
  font-size: .78rem;
  font-weight: 600;
  padding: .35rem .85rem;
  transition: color .15s, border-color .15s;
}
.gnm-base-site #bookmark-manager-root .bm-add-folder.btn-primary::before {
  content: "+ ";
}
.gnm-base-site #bookmark-manager-root .bm-add-folder.btn-primary:hover,
.gnm-base-site #bookmark-manager-root .bm-add-folder.btn-primary:focus {
  background: #fff;
  border-color: var(--cl-steel, #4083b0);
  color: var(--cl-steel-ink, #33698f);
}

/* editorial list = the live's .biblio-list/.biblio-row */
.gnm-base-site #bookmark-manager-root .bm-bookmarks {
  grid-template-columns: 1fr;
  gap: 10px;
}
.gnm-base-site #bookmark-manager-root .bm-bookmark.card {
  border: 1px solid var(--gnm-border, #e6e8ee);
  border-radius: 12px;
  transition: border-color .15s, box-shadow .15s;
}
.gnm-base-site #bookmark-manager-root .bm-bookmark.card:hover {
  border-color: #cfd5e4;
  box-shadow: 0 6px 20px rgba(10, 24, 48, .06);
}
.gnm-base-site #bookmark-manager-root .bm-bookmark .card-body {
  padding: 1rem 1.1rem;
}

/* meta line above the title = .biblio-meta: .68rem/700/.05em */
.gnm-base-site #bookmark-manager-root .bm-bookmark .bm-meta {
  order: -1;
  display: flex;
  flex-wrap: wrap;
  column-gap: .5rem;
  margin-bottom: .25rem !important;
}
.gnm-base-site #bookmark-manager-root .bm-meta .bm-post-type,
.gnm-base-site #bookmark-manager-root .bm-meta .bm-date {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #7b8094;
  margin-bottom: 0 !important;
}
.gnm-base-site #bookmark-manager-root .bm-meta .bm-post-type + .bm-date::before {
  content: "\00b7\00a0";
}

/* title = .biblio-title: 1.02rem/700 navy lh 1.3, hover steel-ink */
.gnm-base-site #bookmark-manager-root .bm-bookmark .h6 {
  font-size: 1.02rem;
  line-height: 1.3;
  margin-bottom: .3rem !important;
}
.gnm-base-site #bookmark-manager-root .bm-bookmark .h6 a {
  color: var(--cl-space, #0a1830);
  font-weight: 700;
  transition: color .15s;
}
.gnm-base-site #bookmark-manager-root .bm-bookmark .h6 a:hover {
  color: var(--cl-steel-ink, #33698f);
}

/* note = the live's .biblio-note.has: pale yellow post-it .8rem/600 radius 8 */
.gnm-base-site #bookmark-manager-root .bm-notes.alert {
  background: #fffbe6;
  border: 0;
  border-radius: 8px;
  color: #7a6a12;
  font-size: .8rem;
  font-weight: 600;
  font-style: normal;
  padding: .4rem .7rem !important;
}

/* actions = .biblio-actions: .73rem/600 uppercase links, gap 1.1rem */
.gnm-base-site #bookmark-manager-root .bm-actions {
  gap: .2rem 1.1rem !important;
  margin-top: .65rem !important;
}
.gnm-base-site #bookmark-manager-root .bm-actions .btn {
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
  font-size: .73rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #7b8094;
  transition: color .15s;
}
.gnm-base-site #bookmark-manager-root .bm-delete.btn-outline-danger:hover,
.gnm-base-site #bookmark-manager-root .bm-delete.btn-outline-danger:focus {
  color: var(--cl-red, #dd100b);
  background: none;
  border: 0;
}
.gnm-base-site #bookmark-manager-root .bm-move.btn-outline-secondary:hover,
.gnm-base-site #bookmark-manager-root .bm-move.btn-outline-secondary:focus {
  color: var(--cl-steel-ink, #33698f);
  background: none;
  border: 0;
}

/* empty = .biblio-empty: centred, 3rem */
.gnm-base-site #bookmark-manager-root .bm-empty.alert {
  text-align: center;
  color: #7b8094;
  padding: 3rem 1rem;
  background: transparent;
  border: 0;
}

/* move to folder = inline picker in the card: destinations as chips,
   same vocabulary as the folder row (no more Bootstrap modal) */
.gnm-base-site #bookmark-manager-root .bm-move[aria-expanded="true"] {
  color: var(--cl-steel-ink, #33698f);
}
.gnm-base-site #bookmark-manager-root .bm-move-picker {
  margin-top: .7rem;
  padding-top: .7rem;
  border-top: 1px solid var(--gnm-border, #e6e8ee);
}
.gnm-base-site #bookmark-manager-root .bm-move-chip {
  font-size: .78rem;
  font-weight: 600;
  border-radius: 20px;
  padding: .35rem .85rem;
  border: 1px solid var(--gnm-border, #e6e8ee);
  background: #fff;
  color: var(--cl-space, #0a1830);
}
.gnm-base-site #bookmark-manager-root .bm-move-chip:hover,
.gnm-base-site #bookmark-manager-root .bm-move-chip:focus-visible {
  border-color: var(--cl-steel, #4083b0);
  color: var(--cl-steel-ink, #33698f);
  background: #fff;
}
.gnm-base-site #bookmark-manager-root .bm-move-chip.is-moving {
  background: var(--cl-space, #0a1830);
  border-color: var(--cl-space, #0a1830);
  color: #fff;
}

/* remaining manager modals (Add folder, Annotate): hairlines removed,
   navy title, uppercase label, navy / ghost pill buttons */
.gnm-base-site #bookmark-manager-root .modal-content {
  border: 1px solid var(--gnm-border, #e6e8ee);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(10, 24, 48, .18);
}
.gnm-base-site #bookmark-manager-root .modal-header {
  border-bottom: 0;
  padding: 1.15rem 1.25rem .35rem;
}
.gnm-base-site #bookmark-manager-root .modal-title {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--cl-space, #0a1830);
}
.gnm-base-site #bookmark-manager-root .modal-body {
  padding: .65rem 1.25rem;
}
.gnm-base-site #bookmark-manager-root .modal-footer {
  border-top: 0;
  padding: .35rem 1.25rem 1.15rem;
}
.gnm-base-site #bookmark-manager-root .modal .form-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #7b8094;
}
.gnm-base-site #bookmark-manager-root .modal .form-control {
  border-color: var(--gnm-border, #e6e8ee);
  border-radius: 10px;
}
.gnm-base-site #bookmark-manager-root .modal .form-control:focus {
  border-color: var(--cl-steel, #4083b0);
  box-shadow: 0 0 0 .2rem rgba(64, 131, 176, .15);
}
.gnm-base-site #bookmark-manager-root .modal .btn-primary {
  background: var(--cl-space, #0a1830);
  border: 1px solid var(--cl-space, #0a1830);
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  padding: .45rem 1.2rem;
  transition: background-color .15s, border-color .15s;
}
.gnm-base-site #bookmark-manager-root .modal .btn-primary:hover,
.gnm-base-site #bookmark-manager-root .modal .btn-primary:focus {
  background: var(--cl-steel-ink, #33698f);
  border-color: var(--cl-steel-ink, #33698f);
}
.gnm-base-site #bookmark-manager-root .modal .btn-secondary {
  background: #fff;
  border: 1px solid var(--gnm-border, #e6e8ee);
  color: #7b8094;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  padding: .45rem 1.2rem;
  transition: color .15s, border-color .15s;
}
.gnm-base-site #bookmark-manager-root .modal .btn-secondary:hover,
.gnm-base-site #bookmark-manager-root .modal .btn-secondary:focus {
  background: #fff;
  border-color: var(--cl-steel, #4083b0);
  color: var(--cl-steel-ink, #33698f);
}

/* ==================================================================
   Article archives (the theme's standard-two-col layout): CardioLab
   density = 2 columns at md, 3 at lg (the theme renders col-12 col-lg-6).
   ================================================================== */
@media (min-width: 768px) {
  .gnm-base-site .gnm-article-archive-grid--standard-two-col > .gnm-article-archive-grid__item {
    flex: 0 0 auto;
    width: 50%;
  }
}
@media (min-width: 992px) {
  .gnm-base-site .gnm-article-archive-grid--standard-two-col > .gnm-article-archive-grid__item {
    width: 33.3333%;
  }
}

/* ==================================================================
   Grouped sections: under lg the columns (gnm-home-section__col)
   stack -> all the content goes centred.
   ================================================================== */
@media (max-width: 991.98px) {
  .gnm-home-section__col {
    text-align: center;
  }

  .gnm-home-section__col .d-flex,
  .gnm-home-section__col .gnm-section-title {
    justify-content: center;
  }

  /* the BS utilities (justify-content-*) are !important: we outbid them */
  .gnm-home-section__col .justify-content-end,
  .gnm-home-section__col .justify-content-between,
  .gnm-home-section__col .justify-content-start {
    justify-content: center !important;
  }

  .gnm-home-section__col .text-start {
    text-align: center !important;
  }

  .gnm-home-section__col img,
  .gnm-home-section__col .btn.d-block {
    margin-inline: auto;
  }

  /* base.css sets align-self: flex-start on the link: it stays left
     despite the text-align -> explicitly re-centred */
  .gnm-home-section__col .gnm-home-features__link {
    align-self: center;
  }

  .gnm-home-section__col ul,
  .gnm-home-section__col ol {
    list-style-position: inside;
    padding-left: 0;
  }
}

/* ==================================================================
   Grouped sections (multi-module bands): same top breathing room as the
   standalone modules (28px), the eyebrow no longer sticks to the hairline.
   ================================================================== */
.gnm-home-section {
  padding-top: 1.75rem;
}
/* counterpart of the padding-top for the search + featured band: without it
   the tallest column ends flush with the bottom hairline and the vertical
   centring (align-items-center) copies the imbalance onto the neighbouring card */
.gnm-home-section:has(.gnm-home-search-cta) {
  padding-bottom: 1.75rem;
}
/* the module's 20/28 network spacing (designed standalone) becomes symmetric in a band */
.gnm-home-section .gnm-home-search-cta {
  padding-block: 20px;
}
/* ==================================================================
   Featured resources in a narrow band column: base.css stacks the
   internal grids via @container (column < 640px actual, all
   viewports) -> same centring as on mobile, scoped to the module.
   ================================================================== */
@container (max-width: 640px) {
  .gnm-home-section__col .gnm-home-features {
    text-align: center;
  }

  .gnm-home-section__col .gnm-home-features .justify-content-end,
  .gnm-home-section__col .gnm-home-features .justify-content-between,
  .gnm-home-section__col .gnm-home-features .justify-content-start {
    justify-content: center !important;
  }

  .gnm-home-section__col .gnm-home-features .text-start {
    text-align: center !important;
  }

  .gnm-home-section__col .gnm-home-features .gnm-section-title {
    justify-content: center;
  }

  .gnm-home-section__col .gnm-home-features__link {
    align-self: center;
  }
}
/* ---- Editorial stack: visuals of the three faces ---- */
.gnm-home-features--editorial-stack {
  --gnm-feat-dot: #d3d8e2;
  --gnm-feat-dot-active: var(--cl-red);
  --gnm-feat-arrow-bg: var(--cl-space);
  --gnm-feat-arrow-fg: #fff;
  --gnm-feat-arrow-bg-hover: var(--cl-red);
  --gnm-feat-arrow-fg-hover: #fff;
}

/* arrows reduced vs the 38px network size (14/07: /3 then x2) */
.gnm-home-features--editorial-stack .gnm-home-features__stackarrow {
  width: 26px;
  height: 26px;
  font-size: .8rem;
}

/* reserve under the stack realigned on the 26px arrows (network: 64px, sized
   for 38px) — the column gets the same white at the bottom as at the top and
   the neighbouring card centres with equal margins */
.gnm-home-features--editorial-stack .gnm-home-features__stack--loop {
  margin-bottom: 34px;
}

.gnm-home-features--editorial-stack .gnm-home-features__stackcard--congresses,
.gnm-home-features--editorial-stack .gnm-home-features__stackglow--congresses {
  background-image: url('../../assets/cardiolab/cells-congresses.webp');
}
.gnm-home-features--editorial-stack .gnm-home-features__stackcard--newsletters,
.gnm-home-features--editorial-stack .gnm-home-features__stackglow--newsletters {
  background-image: url('../../assets/cardiolab/cells-newsletters.webp');
}
.gnm-home-features--editorial-stack .gnm-home-features__stackcard--my-bibliography,
.gnm-home-features--editorial-stack .gnm-home-features__stackglow--my-bibliography {
  background-image: url('../../assets/cardiolab/cells-bibliography.webp');
}/* ---- Editorial stack (chosen variant): charter on the animated card ---- */

.gnm-home-features--editorial-stack .gnm-home-features__stackcard {
  border-radius: var(--gnm-radius-lg, 14px);
}

.gnm-home-features--editorial-stack .gnm-home-features__stackcard-kicker {
  color: var(--cl-steel-light);
}

.gnm-home-features--editorial-stack .gnm-home-features__stackcard-title {
  color: var(--cl-star);
}

.gnm-home-features--editorial-stack .gnm-home-features__stackcard-description {
  color: var(--cl-hero-muted);
}

.gnm-home-features--editorial-stack .gnm-home-features__stackcard-cta {
  background: var(--cl-red);
  transition: background-color .2s cubic-bezier(.22, .61, .36, 1);
}

.gnm-home-features--editorial-stack .gnm-home-features__stackcard:hover .gnm-home-features__stackcard-cta,
.gnm-home-features--editorial-stack .gnm-home-features__stackcard:focus-visible .gnm-home-features__stackcard-cta {
  background: var(--cl-red-deep);
}
/* stack card in tight quarters (4/12 column at md, band convention = col-md-N):
   compact type and paddings */
@container (max-width: 340px) {
  .gnm-home-features--editorial-stack .gnm-home-features__stackcard {
    padding: 16px;
  }
  .gnm-home-features--editorial-stack .gnm-home-features__stackcard-title {
    font-size: 1.2rem;
  }
  .gnm-home-features--editorial-stack .gnm-home-features__stackcard-description {
    font-size: .8rem;
  }
  .gnm-home-features--editorial-stack .gnm-home-features__stackcard-foot {
    gap: 10px;
  }
  .gnm-home-features--editorial-stack .gnm-home-features__stackcard-cta {
    font-size: .78rem;
    padding: 7px 13px;
  }
}
/* ---- Colophon footer (colophon-sponsor / colophon-gnm): CardioLab charter (pattern of the
   live Pancreoscopie footer: white background, brand hairline at the top, column
   titles in small caps, bottom copyright band + GNM logo) ---- */

/* The Customizer prints #footer { ... !important } blocks (header/footer/ribbon
   surfaces): we win through id + class specificity. */
#footer.gnm-site-footer-shell--colophon {
  background: #fff !important;
  border-top: 3px solid transparent !important;
  border-image: linear-gradient(90deg, var(--cl-steel), var(--cl-red)) 1;
  font-size: .85rem !important;
  color: #5a6070 !important;
}

#footer.gnm-site-footer-shell--colophon .gnm-site-footer-shell__title {
  font-size: .78rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cl-space) !important;
}

#footer.gnm-site-footer-shell--colophon ul a {
  color: #5a6070 !important;
  text-decoration: none;
}

#footer.gnm-site-footer-shell--colophon ul a:hover,
#footer.gnm-site-footer-shell--colophon ul a:focus-visible {
  color: var(--cl-red-deep) !important;
}

#footer.gnm-site-footer-shell--colophon ul li + li {
  margin-top: .35rem;
}

#footer.gnm-site-footer-shell--colophon .gnm-site-footer-shell__copyright {
  font-size: .72rem !important;
  line-height: 1.6;
  color: #7b8094 !important;
  flex: 1;
  min-width: 0;
}
/* ---- Reveal on scroll (traced from the live Pancreoscopie, cid_2637): the
   .reveal-ready gate is set by js/custom-js/cardiolab.js (reduced-motion
   + IntersectionObserver guards) — without JS, nothing is hidden.
   data-reveal = single block; data-reveal-children = 90 ms/child cascade. ---- */

.reveal-ready [data-reveal],
.reveal-ready [data-reveal-children] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.2, .7, .2, 1), transform .6s cubic-bezier(.2, .7, .2, 1);
  will-change: opacity, transform;
}

.reveal-ready [data-reveal].is-visible,
.reveal-ready [data-reveal-children].is-visible > * {
  opacity: 1;
  transform: none;
}

.reveal-ready [data-reveal-children].is-visible > *:nth-child(2) { transition-delay: .09s; }
.reveal-ready [data-reveal-children].is-visible > *:nth-child(3) { transition-delay: .18s; }
.reveal-ready [data-reveal-children].is-visible > *:nth-child(4) { transition-delay: .27s; }
.reveal-ready [data-reveal-children].is-visible > *:nth-child(5) { transition-delay: .36s; }
.reveal-ready [data-reveal-children].is-visible > *:nth-child(6) { transition-delay: .45s; }
.reveal-ready [data-reveal-children].is-visible > *:nth-child(7) { transition-delay: .54s; }
.reveal-ready [data-reveal-children].is-visible > *:nth-child(8) { transition-delay: .63s; }
.reveal-ready [data-reveal-children].is-visible > *:nth-child(9) { transition-delay: .72s; }
.reveal-ready [data-reveal-children].is-visible > *:nth-child(n+10) { transition-delay: .81s; }

@media (prefers-reduced-motion: reduce) {
  .reveal-ready [data-reveal],
  .reveal-ready [data-reveal-children] > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* ---- GNM preloader (3 rings, CardioLab skin: navy -> signature red ->
   steel). Exit fade by js/custom-js/cardiolab.js; CSS safety guard:
   the overlay clears itself after 4 s even without JS; reduced-motion
   never sees the animated overlay. ---- */

#gnm-preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .4s ease;
  animation: gnm-preloader-failsafe 0s 4s forwards;
}

#gnm-preloader.hidden {
  opacity: 0;
  pointer-events: none;
}

.gnm-spinner {
  position: relative;
  width: 64px;
  height: 64px;
}

.gnm-ring {
  position: absolute;
  border-radius: 50%;
  border: 4px solid transparent;
}

.gnm-ring-1 {
  width: 64px;
  height: 64px;
  top: 0;
  left: 0;
  border-top-color: var(--cl-space, #0a1830);
  border-right-color: var(--cl-space, #0a1830);
  animation: gnm-spin 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.gnm-ring-2 {
  width: 46px;
  height: 46px;
  top: 9px;
  left: 9px;
  border-top-color: var(--cl-red, #dd100b);
  border-left-color: var(--cl-red, #dd100b);
  animation: gnm-spin 1.3s cubic-bezier(0.4, 0, 0.2, 1) infinite reverse;
}

.gnm-ring-3 {
  width: 28px;
  height: 28px;
  top: 18px;
  left: 18px;
  border-top-color: var(--cl-steel, #4083b0);
  border-right-color: var(--cl-steel, #4083b0);
  animation: gnm-spin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

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

@keyframes gnm-preloader-failsafe {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

@media (prefers-reduced-motion: reduce) {
  #gnm-preloader {
    display: none;
  }
}

/* ---- Back to top (traced from the live Pancreoscopie: floating, appears
   after 500 px of scroll, hover = signature red) — button injected by
   js/custom-js/cardiolab.js ---- */

.back-to-top {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 1030;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: var(--cl-space, #0a1830);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  box-shadow: 0 6px 20px rgba(10, 24, 48, .28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s, transform .25s, background .15s;
  cursor: pointer;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background: var(--cl-red, #dd100b);
}

.back-to-top i {
  display: inline-block;
  transition: transform .2s ease;
}

.back-to-top:hover i {
  transform: translateY(-3px);
}

@media (max-width: 575px) {
  .back-to-top {
    right: 1rem;
    bottom: 1rem;
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
  }
}


/* ============================================================================
   Editorial pages (page.php): no enclosing card — the content breathes
   on the light page background (same stance as the bibliography).
   ========================================================================== */
.gnm-base-site .gnm-route-page .gnm-page-card {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* ============================================================================
   "About us" page (slug about-us): CardioLab editorial treatment
   - the lede sets the tone, numbered points in steel, sober framed figure,
     navy call-out band (light band/night band rhythm) with a red icon.
   ========================================================================== */
.gnm-base-site .cl-about__lede {
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  line-height: 1.5;
  font-weight: 400;
  color: var(--cl-steel-ink, #33698f);
  max-width: 60ch;
  margin: .25rem 0 2.75rem;
}

.gnm-base-site .cl-about__feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}

.gnm-base-site .cl-about__point {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .35rem 1.1rem;
  padding: 1.5rem 0;
}
.gnm-base-site .cl-about__point:first-child { padding-top: 0; }
.gnm-base-site .cl-about__point + .cl-about__point {
  border-top: 1px solid var(--gnm-border, #e2e6ee);
}
.gnm-base-site .cl-about__point-index {
  grid-row: span 2;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1;
  color: var(--cl-steel, #4083b0);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
.gnm-base-site .cl-about__point-title {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--cl-space, #0a1830);
  margin: 0 0 .5rem;
}
.gnm-base-site .cl-about__point p {
  margin: 0;
  line-height: 1.65;
}

.gnm-base-site .cl-about__figure {
  margin: 0;
  padding: 1rem;
  background: #fff;
  border: 1px solid var(--gnm-border, #e2e6ee);
  border-radius: 14px;
}
.gnm-base-site .cl-about__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

.gnm-base-site .cl-about__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  padding: clamp(1.75rem, 4vw, 2.5rem);
  border-radius: 14px;
  background: linear-gradient(180deg, #0a1830, #060d1e);
}
.gnm-base-site .cl-about__cta-eyebrow {
  margin: 0 0 .45rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--cl-steel-light, #a8cbe8);
}
.gnm-base-site .cl-about__cta-title {
  margin: 0;
  font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  font-weight: 600;
  line-height: 1.35;
  color: var(--cl-hero-text, #eef3fb);
  max-width: 36ch;
}
.gnm-base-site .cl-about__cta-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.5rem;
  border-radius: 999px;
  background: var(--cl-red, #dd100b);
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  transition: background-color .18s ease, transform .18s cubic-bezier(.25, 1, .5, 1);
}
.gnm-base-site .cl-about__cta-btn .bi {
  transition: transform .18s cubic-bezier(.25, 1, .5, 1);
}
.gnm-base-site .cl-about__cta-btn:hover,
.gnm-base-site .cl-about__cta-btn:focus-visible {
  background: var(--cl-red-deep, #b50d09);
  color: #fff;
}
.gnm-base-site .cl-about__cta-btn:hover .bi,
.gnm-base-site .cl-about__cta-btn:focus-visible .bi {
  transform: translateX(3px);
}

@media (max-width: 767px) {
  .gnm-base-site .cl-about__feature { grid-template-columns: 1fr; }
  .gnm-base-site .cl-about__figure { max-width: 380px; }
}
@media (prefers-reduced-motion: reduce) {
  .gnm-base-site .cl-about__cta-btn,
  .gnm-base-site .cl-about__cta-btn .bi { transition: none; }
}


/* ============================================================================
   "Document" graphic line (.cl-doc): long regulatory text pages
   (Legal, Privacy, Terms, Sources). Reading column, sober hierarchy,
   steel-bulleted lists, disclaimer box. Same cardless base as .cl-about.
   ========================================================================== */
.gnm-base-site .cl-doc { max-width: 74ch; }
.gnm-base-site .cl-doc__lede {
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  line-height: 1.55;
  color: var(--cl-steel-ink, #33698f);
  margin: .25rem 0 2rem;
}
.gnm-base-site .cl-doc h2 {
  font-size: 1.05rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--cl-space, #0a1830);
  margin: 2.75rem 0 .9rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--gnm-border, #e2e6ee);
}
.gnm-base-site .cl-doc > h2:first-child,
.gnm-base-site .cl-doc__lede + h2 { margin-top: .5rem; }
.gnm-base-site .cl-doc h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--cl-steel-ink, #33698f);
  margin: 1.75rem 0 .4rem;
}
.gnm-base-site .cl-doc p { line-height: 1.65; margin: 0 0 1rem; }
.gnm-base-site .cl-doc ul { list-style: none; padding-left: 0; margin: 0 0 1rem; }
.gnm-base-site .cl-doc li {
  position: relative;
  padding-left: 1.4rem;
  line-height: 1.65;
  margin-bottom: .5rem;
}
.gnm-base-site .cl-doc li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: .66em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cl-steel, #4083b0);
}
.gnm-base-site .cl-doc a {
  color: var(--cl-steel-ink, #33698f);
  text-underline-offset: 2px;
}
.gnm-base-site .cl-doc a:hover { color: var(--cl-red-deep, #b50d09); }

/* Legal: identity blocks in a light grid (steel label above) */
.gnm-base-site .cl-doc__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem 2.5rem;
  margin: .5rem 0 1rem;
}
.gnm-base-site .cl-doc__meta address {
  font-style: normal;
  line-height: 1.65;
  margin: 0;
}
.gnm-base-site .cl-doc__meta address + address { margin-top: 1.5rem; }
.gnm-base-site .cl-doc__meta strong {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cl-steel-ink, #33698f);
  margin-bottom: .35rem;
}

/* Sources: engine queries in a discreet box */
.gnm-base-site .cl-doc__keywords {
  margin: 0 0 1rem;
  padding: 1rem 1.15rem;
  background: rgba(64, 131, 176, .06);
  border: 1px solid var(--gnm-border, #e2e6ee);
  border-radius: 10px;
  font-size: .85rem;
  line-height: 1.7;
}
.gnm-base-site .cl-doc__keywords strong { color: var(--cl-steel-ink, #33698f); }

/* bottom-of-page regulatory disclaimer */
.gnm-base-site .cl-doc__note {
  margin: 1.75rem 0 0;
  padding: 1.1rem 1.3rem;
  background: rgba(64, 131, 176, .07);
  border: 1px solid var(--gnm-border, #e2e6ee);
  border-radius: 12px;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--cl-steel-ink, #33698f);
  text-align: center;
}
.gnm-base-site .cl-doc__note strong { font-weight: 600; }


/* ============================================================================
   Bootstrap .nav-link -> CardioLab charter.
   base.css recolours the generic <a> but .nav-link (0,1,0) beats a (0,0,1)
   and keeps the #0d6efd blue (BS 5.0: compiled colour, no --bs-link-*).
   Steel remap, without !important: the scoped skins (header navbar, footer,
   biblio) keep priority.
   ========================================================================== */
.gnm-base-site .nav-link {
  color: var(--cl-steel-ink, #33698f);
}
.gnm-base-site .nav-link:hover,
.gnm-base-site .nav-link:focus,
.gnm-base-site .nav-link:focus-visible {
  color: var(--cl-red-deep, #b50d09);
}
.gnm-base-site .nav-pills .nav-link.active,
.gnm-base-site .nav-pills .show > .nav-link {
  color: #fff;
  background-color: var(--cl-space, #0a1830);
}
.gnm-base-site .nav-tabs .nav-link.active {
  color: var(--cl-space, #0a1830);
}

/* ============================================================================
   Document pages (.cl-doc): centred reading column + worked headings.
   Applies to the 4 regulatory pages (Legal, Privacy, Terms, Sources) that
   share the page-content card. 15/07/2026.
   ========================================================================== */

/* Tightened, centred card = a true reading column */
.gnm-base-site .gnm-page-card:has(.cl-doc) {
  max-width: 800px;
  margin-inline: auto;
  padding: clamp(30px, 5vw, 60px) clamp(24px, 5vw, 64px);
}

/* Masthead: centred title, navy, charter red rule */
.gnm-base-site .gnm-page-card:has(.cl-doc) > header {
  text-align: center;
  margin-bottom: 2.4rem !important;
}
.gnm-base-site .gnm-page-card:has(.cl-doc) > header .gnm-article-title {
  font-size: clamp(2rem, 4.5vw, 2.85rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--cl-space, #0a1830);
}
.gnm-base-site .gnm-page-card:has(.cl-doc) > header::after {
  content: "";
  display: block;
  width: 54px;
  height: 3px;
  margin: 1.15rem auto 0;
  border-radius: 3px;
  background: var(--cl-red, #dd100b);
}

/* Text column centred in the card */
.gnm-base-site .cl-doc { margin-inline: auto; }
.gnm-base-site .cl-doc__lede { margin-top: 0; }

/* Section headings: thin rule + short red tab (no border-left) */
.gnm-base-site .cl-doc h2 { position: relative; }
.gnm-base-site .cl-doc h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 44px;
  height: 2px;
  background: var(--cl-red, #dd100b);
}

/* Legal Notice: identity blocks stacked in a central column, separator rules */
.gnm-base-site .cl-doc__meta {
  grid-template-columns: 1fr;
  gap: 0;
  max-width: 42ch;
  margin: 1rem auto 0;
  text-align: center;
}
.gnm-base-site .cl-doc__meta address {
  padding: 1.35rem 0;
  border-top: 1px solid var(--gnm-border, #e2e6ee);
}
.gnm-base-site .cl-doc__meta address:first-child {
  padding-top: 0;
  border-top: 0;
}
.gnm-base-site .cl-doc__meta address + address { margin-top: 0; }
.gnm-base-site .cl-doc__meta strong {
  font-size: .74rem;
  letter-spacing: .08em;
  margin-bottom: .5rem;
}


/* ---- This article card: journal cover at the top (moved from the bottom of the article) */
.gnm-route-single .gnm-article-facts__cover { text-align: center; margin-bottom: 1rem; }
.gnm-route-single .gnm-article-facts__cover img {
  width: 112px;
  height: auto;
  padding: 4px;
  background: #fff;
  border: 1px solid var(--gnm-border, #dbe3ef);
  border-radius: 8px;
}


/* ============================================================
   Auth pages - CardioLab vestibule (structure: base.css 3.6)
   Deep-space rail (the ribbon's sky) + steel, cardio-red
   CTA, 48px radius-8 inputs, registration sections as
   kickers, alerts (invalid reset) as a calm panel.
   ============================================================ */
.gnm-auth-v__shell {
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(10, 24, 48, .16);
}
.gnm-auth-v__rail {
  background-color: var(--cl-space);
  background-image:
    radial-gradient(1.5px 1.5px at 12% 30%, rgba(237, 242, 255, .9), transparent),
    radial-gradient(1px 1px at 28% 72%, rgba(237, 242, 255, .6), transparent),
    radial-gradient(1.5px 1.5px at 46% 18%, rgba(237, 242, 255, .7), transparent),
    radial-gradient(1px 1px at 64% 58%, rgba(237, 242, 255, .5), transparent),
    radial-gradient(1.5px 1.5px at 78% 24%, rgba(237, 242, 255, .8), transparent),
    radial-gradient(1px 1px at 90% 66%, rgba(237, 242, 255, .55), transparent),
    radial-gradient(60% 140% at 15% 40%, rgba(37, 99, 235, .28), transparent 62%),
    radial-gradient(50% 120% at 85% 50%, rgba(64, 131, 176, .22), transparent 60%),
    radial-gradient(70% 160% at 60% 80%, rgba(76, 47, 158, .26), transparent 65%);
  color: var(--cl-hero-text);
}
.gnm-auth-v__eyebrow {
  color: var(--cl-steel-light);
  opacity: 1;
}
.gnm-auth-v__rail-title {
  font-weight: 700;
  letter-spacing: -.01em;
}
.gnm-auth-v__rail-text {
  color: var(--cl-hero-muted);
  opacity: 1;
}
.gnm-auth-v__rail-back {
  color: var(--cl-steel-light);
  opacity: 1;
}
.gnm-auth-v__rail-back:hover,
.gnm-auth-v__rail-back:focus-visible {
  color: var(--cl-hero-text);
}
.gnm-auth-v__rail--has-image::before {
  opacity: .16;
  mix-blend-mode: screen;
  filter: saturate(.7);
}
.gnm-auth-v__benefits li {
  color: var(--cl-hero-text);
}
.gnm-auth-v__benefits svg {
  color: var(--cl-steel-light);
}
.gnm-auth-v__liseret {
  background: var(--cl-liseret);
}
.gnm-auth-v__title {
  font-weight: 700;
  letter-spacing: -.01em;
}
.gnm-auth-v__intro {
  color: #3d4455;
}

/* the plugin's form controls, vestibule scope */
.gnm-auth-v .form-label {
  font-size: .8rem;
  font-weight: 600;
  color: #3d4455;
  margin-bottom: 7px;
}
.gnm-auth-v .form-control,
.gnm-auth-v .form-select {
  min-height: 48px;
  padding: 10px 14px;
  font-size: .95rem;
  color: #1c2333;
  border-color: #cfd5e0;
  border-radius: 8px;
  transition: border-color .18s cubic-bezier(.16, 1, .3, 1), box-shadow .18s cubic-bezier(.16, 1, .3, 1);
}
.gnm-auth-v .form-control:focus,
.gnm-auth-v .form-select:focus {
  border-color: var(--cl-steel);
  box-shadow: 0 0 0 4px rgba(64, 131, 176, .18);
}

/* The file input (ID Verification): the generic rule above overrides the
   padding base.css reserved for input[type=file] (same specificity, later
   sheet), and the native button kept its 40px frame inside a box grown to
   48px: an orphan button floating in blank space. The file geometry is
   restated here, aligned on the vestibule's. */
.gnm-auth-v .form-control[type="file"] {
  padding: 0 14px 0 0;
  line-height: 46px;
  overflow: hidden;
}

.gnm-auth-v .form-control[type="file"]::file-selector-button {
  height: 46px;
  margin: 0 14px 0 0;
  padding: 0 18px;
  border: 0;
  border-right: 1px solid #cfd5e0;
  border-radius: 7px 0 0 7px;
  background: #eef1f6;
  color: #2b3242;
  font-size: .9rem;
  font-weight: 600;
  line-height: 46px;
  cursor: pointer;
}

.gnm-auth-v .form-control[type="file"]::file-selector-button:hover {
  background: #e3e8f0;
}

/* The file field's crest: a grey box MUST carry a pictogram, otherwise it
   reads as a broken button - which is exactly what the bare field suggested.
   The native button gives its left rounding up to the crest. */
.gnm-auth-v .gnm-auth-file-group .input-group-text {
  min-width: 48px;
  justify-content: center;
  border-color: #cfd5e0;
  border-radius: 8px 0 0 8px;
  background: #eef1f6;
  color: var(--cl-steel-ink, #33698f);
  font-size: 1.05rem;
}

.gnm-auth-v .gnm-auth-file-group .form-control[type="file"]::file-selector-button {
  border-radius: 0;
}
.gnm-auth-v input[type="checkbox"] {
  accent-color: var(--cl-steel);
}
.gnm-auth-v .checkbox-label,
.gnm-auth-v .form-check-label {
  font-size: .88rem;
  color: #3d4455;
}
.gnm-auth-v .gnm-auth-required-star {
  color: var(--cl-red);
  font-weight: 700;
}
.gnm-auth-v .btn-primary {
  min-height: 50px;
  padding: 12px 30px;
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
  background-color: var(--cl-red);
  border: 0;
  border-radius: 12px;
  transition: background-color .18s cubic-bezier(.16, 1, .3, 1), transform .18s cubic-bezier(.16, 1, .3, 1);
}
.gnm-auth-v .btn-primary:hover,
.gnm-auth-v .btn-primary:focus {
  background-color: var(--cl-red-deep);
  transform: translateY(-1px);
}
.gnm-auth-v--split .gnm-auth-v__form .btn-primary {
  width: 100%;
}
.gnm-auth-v__form a {
  font-size: .85rem;
  font-weight: 600;
  color: var(--cl-steel-ink);
  text-decoration: none;
}
.gnm-auth-v__form a:hover {
  color: var(--cl-red);
  text-decoration: underline;
}
/* article page: the actions column follows the reader. Sticky sits on the
   column (its track is the full row), offset by the 73px sticky header;
   taller-than-viewport sidebars scroll inside so nothing is unreachable. */
@media (min-width: 992px) {
  .gnm-article-aside {
    position: sticky;
    /* 73px sticky header + 47px of air; the WP var only exists for admins,
       members get the 0px fallback */
    top: calc(120px + var(--wp-admin--admin-bar--height, 0px));
    max-height: calc(100vh - 136px - var(--wp-admin--admin-bar--height, 0px));
    overflow-y: auto;
    scrollbar-width: thin;
  }
}

/* anchors dressed as buttons keep the button voice, not the link one */
.gnm-auth-v__form a.btn-primary,
.gnm-auth-v__form a.btn-primary:hover {
  font-size: .95rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}

/* registration: the plugin's intro and sections as kickers */
.gnm-auth-v .gnm-auth-checkout-intro p {
  font-size: .92rem;
  line-height: 1.6;
  color: #3d4455;
  max-width: 75ch;
}
.gnm-auth-v .gnm-auth-form-section h4 {
  margin: 34px 0 20px;
  padding-top: 26px;
  border-top: 1px solid var(--gnm-border);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cl-steel-ink);
}
.gnm-auth-v .form-text {
  font-size: .78rem;
  color: #7a8093;
}

/* states (invalid reset, logged-out account) as a calm panel */
.gnm-auth-v .alert {
  background: #fff;
  border: 0;
  color: #3d4455;
  text-align: center;
  padding: 26px 20px;
}
.gnm-auth-v .alert .alert-heading {
  color: #1c2333;
  font-size: 1.15rem;
}
.gnm-auth-v .alert .btn-primary {
  margin-top: 8px;
}

/* Message alerts on the auth pages.

   The rule above paints every .alert as a plain white panel, which is right for the
   instruction panels but leaves a failed login and an access notice looking like body
   copy. These two variants give them their own voice: a tint, a hairline, an icon.
   Same specificity as the panel rule, declared after it, so they win. */

.gnm-auth-v .alert-danger,
.gnm-auth-v .alert-info {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  padding: 15px 20px;
  border-radius: 10px;
  text-align: left;
  font-size: .94rem;
  line-height: 1.5;
}

.gnm-auth-v .alert-danger .bi,
.gnm-auth-v .alert-info .bi {
  flex: none;
  font-size: 1.05rem;
  line-height: 1.42;
}

.gnm-auth-v .alert-danger {
  background: #fdeeec;
  background: oklch(0.958 0.017 27);
  border: 1px solid #f3c9c4;
  border: 1px solid oklch(0.868 0.052 27);
  color: #9d0b07;
  color: oklch(0.452 0.185 27);
  font-weight: 600;
}

.gnm-auth-v .alert-info {
  background: #eef5fb;
  background: oklch(0.963 0.014 245);
  border: 1px solid #cfe2f1;
  border: 1px solid oklch(0.888 0.033 245);
  color: #2b5b7d;
  color: oklch(0.428 0.069 245);
}

/* ==================================================================
   Clinical Cases — minimal social surface (03/08/2026)
   Only two application signals: a distinct page background and a short
   left column. The CardioLab header stays; no Highlights rail, no
   channels. Neutrals tinted toward the brand steel (#4083b0): the
   surface changes place without changing charter.
   Selectors: .gnm-cases-* (index), .gnm-case* (one case),
   .gnm-thread* (the thread), .gnm-avatar (initial pills).
   ================================================================== */

:root {
  --cc-app-bg: #eff3f8;
  --cc-app-bg: oklch(0.962 0.008 250);
  --cc-panel-border: #dae0e7;
  --cc-panel-border: oklch(0.905 0.012 250);
  --cc-rule: #e9edf2;
  --cc-rule: oklch(0.945 0.008 250);
  --cc-row-hover: #f8fafd;
  --cc-row-hover: oklch(0.985 0.004 250);
  --cc-ink: var(--cl-space, #0a1830);
  --cc-ink-body: #2e3644;
  --cc-ink-body: oklch(0.33 0.028 262);
  --cc-ink-soft: #545e6f;
  --cc-ink-soft: oklch(0.48 0.03 260);
  --cc-ink-mute: #666f7d;                 /* AA on white AND on the app background */
  --cc-ink-mute: oklch(0.54 0.024 258);
  --cc-on-dark: #f7fafe;
  --cc-on-dark: oklch(0.985 0.006 250);
  --cc-wash: rgba(64, 131, 176, .09);     /* steel wash: hover, chips, badges */
  --cc-wash-strong: rgba(64, 131, 176, .16);
  --cc-sticky-top: 89px;                  /* 73px sticky header + breathing room */
  --cc-measure: 860px;                    /* the one column: list, case and thread */
}

/* the app background: the signal that we changed place.
   body.gnm-base-site lays a gradient in base.css, we replace it. */
body.gnm-base-site.gnm-cases-surface {
  background: var(--cc-app-bg);
}

.gnm-route-cases {
  min-height: 50vh;
  padding: 32px 0 56px;
}

/* ---------- the head: recognising the person ---------- */

.gnm-cases-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 24px;
  margin-bottom: 22px;
}

.gnm-cases-head__identity {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.gnm-cases-head__eyebrow {
  margin: 0 0 2px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--cl-space, #0a1830);
}

.gnm-cases-head__eyebrow::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cl-red, #dd100b);
  margin-right: .5rem;
  vertical-align: 1px;
}

.gnm-cases-head__title {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--cl-space, #0a1830);
}

.gnm-cases-head__intro {
  margin: 6px 0 0;
  max-width: 62ch;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--cc-ink-soft);
}

/* ---------- cardio-red CTA (the only one on this surface) ---------- */

.gnm-cases-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--cl-red, #dd100b);
  color: var(--cc-on-dark);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color .18s cubic-bezier(.16, 1, .3, 1), transform .18s cubic-bezier(.16, 1, .3, 1);
}

.gnm-cases-cta:hover,
.gnm-cases-cta:focus {
  background: var(--cl-red-deep, #b50d09);
  color: var(--cc-on-dark);
  transform: translateY(-1px);
}

.gnm-cases-cta__icon {
  display: inline-block;
  font-size: .95rem;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1);
}

.gnm-cases-cta:hover .gnm-cases-cta__icon {
  transform: rotate(90deg);
}

/* ---------- the grid: short column + content ---------- */

.gnm-cases-layout {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  align-items: start;
  gap: 24px;
}

/* The reading measure lives on the column, not on what lands in it: the list
   and the case opened from it then occupy the same column, in the same place.
   The block changes neither width nor position while navigating. */
.gnm-cases-content {
  max-width: var(--cc-measure);
  margin-inline: auto;
}

body.admin-bar {
  --cc-sticky-top: calc(89px + var(--wp-admin--admin-bar--height, 32px));
}

.gnm-cases-nav__scroll {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.gnm-cases-nav {
  position: sticky;
  top: var(--cc-sticky-top);
  /* The rail stays reachable: past the viewport height it scrolls for
     itself instead of leaving its bottom out of reach. */
  max-height: calc(100vh - var(--cc-sticky-top) - 24px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}

.gnm-cases-nav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gnm-cases-nav__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: .88rem;
  font-weight: 600;
  color: var(--cc-ink-soft);
  text-decoration: none;
  transition: background-color .16s ease, color .16s ease;
}

.gnm-cases-nav__link:hover {
  background: var(--cc-wash);
  color: var(--cl-steel-ink, #33698f);
}

/* active = white pill lifted off the app background, echoing the right panel.
   ring as inset box-shadow: no border, hence no 2px jump. */
.gnm-cases-nav__link.is-active {
  background: var(--gnm-surface, #fff);
  color: var(--cl-space, #0a1830);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--cc-panel-border), 0 1px 2px rgba(15, 23, 42, .05);
}

.gnm-cases-nav__icon {
  display: inline-block;
  font-size: .95rem;
  color: var(--cl-steel, #4083b0);
}

.gnm-cases-nav__count {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--cc-wash-strong);
  color: var(--cl-steel-ink, #33698f);
  font-size: .72rem;
  font-weight: 700;
}

.gnm-cases-nav__title {
  margin: 0 0 8px;
  padding-left: 12px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--cc-ink-mute);
}

.gnm-cases-nav__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.gnm-cases-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--cc-wash);
  color: var(--cc-ink-soft);
  font-size: .78rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .16s ease, color .16s ease;
}

.gnm-cases-chip:hover {
  background: var(--cc-wash-strong);
  color: var(--cl-steel-ink, #33698f);
}

.gnm-cases-chip.is-active {
  background: var(--cl-space, #0a1830);
  color: var(--cc-on-dark);
}

.gnm-cases-chip__count {
  font-weight: 700;
  opacity: .68;
}


/* ---------- a case waiting for review ----------
   On "My cases" only: a submitted case no longer vanishes during the
   review. The chip tells the status, the title drops its link (no public
   page to show). */

.gnm-cases-row__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}

.gnm-cases-row__state--review {
  background: rgba(143, 107, 9, .12);
  color: #7a5c06;
}

.gnm-cases-row__state--rejected {
  background: rgba(84, 94, 111, .12);
  color: var(--cc-ink-soft);
}


/* ---------- framing the portrait ----------
   The template circle is exactly the disc colleagues will see: what is
   framed is what is got. The image moves under the finger (touch-action:
   none, otherwise dragging scrolls the page) and zooms with the slider;
   the porthole's drop shadow darkens what will be cut away. */

.gnm-portrait-crop {
  width: min(360px, calc(100vw - 40px));
  padding: 0;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(10, 24, 48, .28);
}

.gnm-portrait-crop::backdrop {
  background: rgba(10, 24, 48, .45);
}

.gnm-portrait-crop__panel {
  padding: 20px 22px 22px;
}

.gnm-portrait-crop__title {
  margin: 0 0 4px;
  color: var(--cc-ink);
  font-size: 1rem;
  font-weight: 800;
}

.gnm-portrait-crop__hint {
  margin: 0 0 14px;
  color: var(--cc-ink-mute);
  font-size: .78rem;
  line-height: 1.45;
}

.gnm-portrait-crop__viewport {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto;
  border-radius: 10px;
  overflow: hidden;
  background: #0a1830;
  cursor: grab;
  touch-action: none;
}

.gnm-portrait-crop__viewport:active {
  cursor: grabbing;
}

.gnm-portrait-crop__viewport::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 999px rgba(10, 24, 48, .5);
  pointer-events: none;
}

.gnm-portrait-crop__img {
  position: absolute;
  top: 0;
  left: 0;
  max-width: none;
  transform-origin: 0 0;
  -webkit-user-select: none;
  user-select: none;
}

.gnm-portrait-crop__zoom {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
}

.gnm-portrait-crop__zoom-label {
  color: var(--cc-ink-mute);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.gnm-portrait-crop__zoom input[type="range"] {
  flex: 1 1 auto;
  accent-color: var(--cl-steel-ink, #33698f);
}

.gnm-portrait-crop__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 16px 0 0;
}

.gnm-portrait-crop__use {
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--cl-red, #dd100b);
  color: #fff;
  font: inherit;
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
}

.gnm-portrait-crop__use:hover {
  background: var(--cl-red-deep, #b30d09);
}

.gnm-portrait-crop__cancel {
  padding: 0;
  border: 0;
  background: none;
  color: var(--cc-ink-mute);
  font: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
}

.gnm-portrait-crop__cancel:hover {
  color: var(--cc-ink);
}


/* ---------- the reply form: title + Cancel ----------
   WordPress prints the cancel link INSIDE the title's <h3>: unstyled,
   "Reply to X" and "Cancel" collide into a single bold word. The title
   becomes a flex row and the cancellation a quiet pill - an exit, not an
   action. */

.gnm-thread-form__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
}

.gnm-thread-form__cancel #cancel-comment-reply-link {
  display: inline-block;
  padding: 3px 12px;
  border: 1px solid var(--cc-panel-border);
  border-radius: 999px;
  color: var(--cc-ink-mute);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-decoration: none;
  transition: background-color .18s cubic-bezier(.16, 1, .3, 1), color .18s cubic-bezier(.16, 1, .3, 1);
}

.gnm-thread-form__cancel #cancel-comment-reply-link:hover {
  background: var(--cc-wash);
  color: var(--cc-ink);
}

@media (prefers-reduced-motion: reduce) {
  .gnm-thread-form__cancel #cancel-comment-reply-link {
    transition: none;
  }
}


/* ---------- the ranks dialog ----------
   A native <dialog>: Bootstrap JS is not loaded on these views, and the
   browser already knows how to trap focus and close on Escape. The padding
   lives on the inner panel, so a click that reaches the dialog itself can
   only be the backdrop. */

.gnm-standing__more-wrap {
  margin: 12px 0 0;
}

.gnm-standing__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--cl-steel-ink, #33698f);
  font: inherit;
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
}

.gnm-standing__more-icon {
  font-size: .86rem;
  line-height: 1;
}

.gnm-standing__more:hover {
  color: var(--cl-red, #dd100b);
}

.gnm-ranks {
  width: min(420px, calc(100vw - 40px));
  padding: 0;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(10, 24, 48, .28);
}

.gnm-ranks::backdrop {
  background: rgba(10, 24, 48, .45);
}

.gnm-ranks__panel {
  padding: 22px 24px 24px;
}

.gnm-ranks__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.gnm-ranks__title {
  margin: 0;
  color: var(--cc-ink);
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
}

.gnm-ranks__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cc-wash);
  color: var(--cc-ink-soft);
  font-size: .8rem;
  cursor: pointer;
}

.gnm-ranks__close:hover {
  background: var(--cc-wash-strong);
  color: var(--cc-ink);
}

.gnm-ranks__how,
.gnm-ranks__helpful {
  margin: 0 0 4px;
  color: var(--cc-ink-body);
  font-size: .86rem;
  line-height: 1.55;
}

.gnm-ranks__subtitle {
  margin: 16px 0 6px;
  color: var(--cc-ink-mute);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.gnm-ranks__ladder {
  margin: 0;
  padding: 0;
  list-style: none;
}

.gnm-ranks__tier {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
}

.gnm-ranks__tier.is-current {
  background: var(--cc-wash);
}

.gnm-ranks__tier-name {
  color: var(--cc-ink);
  font-size: .88rem;
  font-weight: 700;
}

.gnm-ranks__you {
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--cl-space, #0a1830);
  color: var(--cc-on-dark);
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  vertical-align: 2px;
}

.gnm-ranks__tier-min {
  flex: 0 0 auto;
  color: var(--cc-ink-mute);
  font-size: .78rem;
}


/* ---------- the portrait: putting a face on a name ----------
   Above the sections, outside the mobile horizontal ribbon: wherever one
   is in the module, one's own face sits in the same place and changes in
   one click. Both states live in the HTML and the CSS picks which one
   shows, so the block stays right without JavaScript. */

.gnm-portrait {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--cc-rule);
}

/* The field stays focusable: it is what receives the keyboard; the pill and
   the link only reveal it. */
.gnm-portrait__file {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.gnm-portrait__pick {
  position: relative;
  display: inline-flex;
  border-radius: 50%;
  cursor: pointer;
}

.gnm-portrait__badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  border: 2px solid var(--gnm-surface, #fff);
  border-radius: 50%;
  background: var(--cl-steel-ink, #33698f);
  color: var(--cc-on-dark);
  font-size: .58rem;
  line-height: 1;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1);
}

.gnm-portrait__pick:hover .gnm-portrait__badge {
  transform: scale(1.12);
}

.gnm-portrait__file:focus-visible + .gnm-portrait__pick,
.gnm-portrait__file:focus-visible ~ .gnm-portrait__text .gnm-portrait__link {
  outline: 2px solid var(--cl-steel-ink, #33698f);
  outline-offset: 2px;
}

.gnm-portrait__nudge {
  margin: 3px 0 0;
  color: var(--cc-ink-mute);
  font-size: .74rem;
  line-height: 1.35;
}

.gnm-portrait__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  margin: 5px 0 0;
}

.gnm-portrait__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--cl-steel-ink, #33698f);
  font: inherit;
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
}

.gnm-portrait__link:hover {
  color: var(--cl-red, #dd100b);
}

.gnm-portrait__link--remove {
  color: var(--cc-ink-mute);
  font-weight: 400;
}

/* The state decides what shows: offering "Add" to someone who already has
   a photo, or "Remove" to someone who has none, would be wrong. */
.gnm-portrait:not(.has-photo) .gnm-portrait__link--change,
.gnm-portrait:not(.has-photo) .gnm-portrait__link--remove,
.gnm-portrait.has-photo .gnm-portrait__nudge,
.gnm-portrait.has-photo .gnm-portrait__link--add {
  display: none;
}

.gnm-portrait__status {
  margin: 5px 0 0;
  color: var(--cc-ink-soft);
  font-size: .72rem;
  line-height: 1.35;
}

.gnm-portrait__status:empty {
  display: none;
}

/* The submit button only exists for the scriptless path: the script removes
   it and sends as soon as the file is picked. */
.gnm-portrait__send {
  margin: 6px 0 0;
}

.gnm-portrait__go {
  padding: 5px 11px;
  border: 1px solid var(--cc-panel-border);
  border-radius: 999px;
  background: var(--gnm-surface, #fff);
  color: var(--cc-ink);
  font: inherit;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
}

.gnm-portrait__go:hover {
  background: var(--cc-wash);
}

@media (prefers-reduced-motion: reduce) {
  .gnm-portrait__badge {
    transition: none;
  }

  .gnm-portrait__pick:hover .gnm-portrait__badge {
    transform: none;
  }
}


/* ---------- your progress ---------- */

/* Below the rail, outside the horizontal ribbon (cf. .gnm-cases-nav__scroll). */
.gnm-standing {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--cc-rule);
}

.gnm-standing__title {
  margin: 0;
  color: var(--cc-ink-mute);
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.gnm-standing__rank {
  margin: 9px 0 0;
  color: var(--cl-space, #0a1830);
  font-size: .9rem;
  font-weight: 700;
}

.gnm-standing__gauge {
  height: 6px;
  margin-top: 10px;
  border-radius: 999px;
  background: var(--cc-wash);
  overflow: hidden;
}

.gnm-standing__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--cl-steel, #4083b0);
  transition: width .4s cubic-bezier(.16, 1, .3, 1);
  transform-origin: 0 50%;
  animation: gnm-standing-sweep .9s cubic-bezier(.16, 1, .3, 1) .2s both;
}

/* On load the gauge sweeps to its value: scaleX, never width, so the
   animation costs no layout and the inline width stays the truth. */
@keyframes gnm-standing-sweep {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.gnm-standing__next {
  margin: 7px 0 0;
  color: var(--cc-ink-mute);
  font-size: .72rem;
}

.gnm-standing__how {
  margin: 12px 0 0;
  color: var(--cc-ink-mute);
  font-size: .72rem;
  line-height: 1.45;
}

.gnm-standing__milestones {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.gnm-standing__milestone {
  display: flex;
  align-items: baseline;
  gap: 7px;
  color: var(--cc-ink-soft);
  font-size: .76rem;
}

.gnm-standing__value {
  color: var(--cl-steel-ink, #33698f);
  font-weight: 700;
}

/* ---------- the list panel ---------- */

.gnm-cases-panel {
  background: var(--gnm-surface, #fff);
  border: 1px solid var(--cc-panel-border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  overflow: hidden;
}

.gnm-cases-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--cc-rule);
}

.gnm-cases-panel__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--cl-space, #0a1830);
}

.gnm-cases-panel__count {
  margin: 0;
  font-size: .78rem;
  font-weight: 600;
  color: var(--cc-ink-mute);
  white-space: nowrap;
}

/* ---------- the conversation row ---------- */

.gnm-cases-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gnm-cases-row {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--cc-rule);
  transition: background-color .16s ease;
}

.gnm-cases-row:last-child {
  border-bottom: 0;
}

.gnm-cases-row:hover,
.gnm-cases-row:focus-within {
  background: var(--cc-row-hover);
}

/* Explicit columns. The row holds exactly three children — avatar, main, stats — and
   every one of them names its column: an item that fixes only its row gets auto-placed
   into the first free column of that row, which put the counters ahead of the content
   and over the avatar. */

.gnm-cases-row__avatar {
  grid-column: 1;
  align-self: start;
}

.gnm-cases-row__main {
  grid-column: 2;
  min-width: 0;
}

.gnm-cases-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0 0 3px;
}

/* the author at the title's rank: same weight, same ink, one size down */
.gnm-cases-row__author {
  font-size: .86rem;
  font-weight: 700;
  color: var(--cl-space, #0a1830);
}

.gnm-cases-row__sep {
  color: var(--cc-panel-border);
}

.gnm-cases-row__specialty {
  font-size: .8rem;
  font-weight: 600;
  color: var(--cl-steel-ink, #33698f);
}

.gnm-cases-row__title {
  margin: 0 0 5px;
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.3;
}

.gnm-cases-row__link {
  color: var(--cl-space, #0a1830);
  text-decoration: none;
}

/* the whole row is clickable (no other link inside the row) */
.gnm-cases-row__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.gnm-cases-row:hover .gnm-cases-row__link {
  color: var(--cl-steel-ink, #33698f);
}

.gnm-cases-row__excerpt {
  margin: 0;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--cc-ink-soft);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.gnm-cases-row__stats {
  grid-column: 3;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  text-align: right;
  white-space: nowrap;
  font-size: .76rem;
  color: var(--cc-ink-mute);
}

.gnm-cases-row__replies {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  color: var(--cl-steel-ink, #33698f);
}

.gnm-cases-row__replies.is-empty {
  font-weight: 600;
  color: var(--cc-ink-mute);
}

.gnm-cases-row__icon {
  display: inline-block;
  font-size: .82rem;
}

/* ---------- empty states: they teach the surface ---------- */

.gnm-cases-empty {
  padding: 44px 24px;
  text-align: center;
}

.gnm-cases-empty__title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--cl-space, #0a1830);
}

.gnm-cases-empty__note {
  margin: 0 auto 18px;
  max-width: 46ch;
  font-size: .88rem;
  line-height: 1.55;
  color: var(--cc-ink-soft);
}

.gnm-cases-empty__link {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--cl-steel-ink, #33698f);
  text-decoration: none;
}

.gnm-cases-empty__link:hover {
  color: var(--cl-red, #dd100b);
  text-decoration: underline;
}

/* ---------- pagination ---------- */

.gnm-cases-pagination {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 20px;
  border-top: 1px solid var(--cc-rule);
}

.gnm-cases-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--cc-ink-soft);
  text-decoration: none;
}

.gnm-cases-pagination .page-numbers:hover {
  background: var(--cc-wash);
  color: var(--cl-steel-ink, #33698f);
}

.gnm-cases-pagination .page-numbers.current {
  background: var(--cl-space, #0a1830);
  color: var(--cc-on-dark);
  font-weight: 700;
}

/* Under the saved view only: what the list shows is the cases slice of the
   library. One quiet exit to the bibliography page, which also holds the
   member's articles. Present even when the list is empty. */
.gnm-cases-biblio {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 14px 6px 0;
  font-size: .82rem;
}

.gnm-cases-biblio__note {
  color: var(--cc-ink-mute, #6a7182);
}

/* The link becomes a white pill on hover - the surface's own vocabulary for
   "this is a place you can go" (the rail's active state). Negative margins
   grow the hit area without moving the resting line. */
.gnm-cases-biblio__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--cl-steel-ink, #33698f);
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 12px;
  margin: -6px -12px;
  border-radius: 999px;
  transition:
    background-color .18s cubic-bezier(.25, 1, .5, 1),
    box-shadow .18s cubic-bezier(.25, 1, .5, 1);
}

.gnm-cases-biblio__link:hover,
.gnm-cases-biblio__link:focus-visible {
  background: var(--gnm-surface, #fff);
  box-shadow:
    inset 0 0 0 1px var(--cc-panel-border),
    0 2px 6px rgba(15, 23, 42, .08);
}

.gnm-cases-biblio__icon {
  display: inline-block;
  font-size: .9rem;
  line-height: 1;
  transition: transform .18s cubic-bezier(.25, 1, .5, 1);
}

/* The journal tips forward, a book pulled off the shelf. */
.gnm-cases-biblio__link:hover .gnm-cases-biblio__icon,
.gnm-cases-biblio__link:focus-visible .gnm-cases-biblio__icon {
  transform: translateY(-1px) rotate(-8deg);
}

@media (prefers-reduced-motion: reduce) {
  .gnm-cases-biblio__link,
  .gnm-cases-biblio__icon {
    transition: none;
  }

  .gnm-cases-biblio__link:hover .gnm-cases-biblio__icon,
  .gnm-cases-biblio__link:focus-visible .gnm-cases-biblio__icon {
    transform: none;
  }
}

/* ---------- initial avatars ---------- */

.gnm-avatar {
  --gnm-avatar-size: 40px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--gnm-avatar-size);
  height: var(--gnm-avatar-size);
  border-radius: 50%;
  overflow: hidden;
}

/* The ink travels with the colour: each pill carries its own as an inline
   variable; the fallback only serves avatars drawn outside the palette. */
.gnm-avatar--initial {
  color: var(--gnm-avatar-ink, var(--cc-on-dark));
  font-size: calc(var(--gnm-avatar-size) * .42);
  font-weight: 700;
  line-height: 1;
  -webkit-user-select: none;
  user-select: none;
}

.gnm-avatar--photo {
  object-fit: cover;
}

/* ---------- a case: the opening message ---------- */

.gnm-case-back {
  margin-bottom: 14px;
}

.gnm-case-back__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--cl-steel-ink, #33698f);
  text-decoration: none;
}

.gnm-case-back__link:hover {
  color: var(--cl-red, #dd100b);
}

.gnm-case-back__icon {
  display: inline-block;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1);
}

.gnm-case-back__link:hover .gnm-case-back__icon {
  transform: translateX(-3px);
}

.gnm-case {
  background: var(--gnm-surface, #fff);
  border: 1px solid var(--cc-panel-border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  padding: 26px 28px;
}

.gnm-case__head {
  margin-bottom: 18px;
}

.gnm-case__byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.gnm-case__byline-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.gnm-case__author {
  font-size: .92rem;
  font-weight: 700;
  color: var(--cl-space, #0a1830);
}

.gnm-case__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  color: var(--cc-ink-mute);
}

.gnm-case__specialty {
  font-weight: 600;
  color: var(--cl-steel-ink, #33698f);
}

.gnm-case__sep {
  color: var(--cc-panel-border);
}

.gnm-case__title {
  margin: 0;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.22;
  color: var(--cl-space, #0a1830);
}

.gnm-case__body {
  font-size: .97rem;
  line-height: 1.65;
  color: var(--cc-ink-body);
}

/* the case body is built at submission time and carries its own <h2>s
   ("Case Details", "Question for the community"): they are treated as
   section labels rather than headings. */
.gnm-case__body h2 {
  margin: 22px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--cc-rule);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--cc-ink-mute);
}

.gnm-case__body > :first-child {
  margin-top: 0;
}

.gnm-clinical-case-images {
  margin-top: 24px;
}

.gnm-clinical-case-images__title {
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--cc-rule);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--cc-ink-mute);
}

/* ---------- the action bar of a case ---------- */

/* The bar is a real <form>: it works without JavaScript. It comes after the
   case and its images, where the decision to press is made. The script
   repaints it without reloading the page. */

.gnm-case-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
}

/* The form only carries the toggles; its children stay on the same line as
   the thread link and the share panel, which live outside it. */
.gnm-case-actions__form {
  display: contents;
  margin: 0;
}

.gnm-case-actions--bottom {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--cc-rule);
}

.gnm-case-actions__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--cc-panel-border);
  border-radius: 999px;
  background: var(--gnm-surface, #fff);
  color: var(--cc-ink-soft);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.gnm-case-actions__btn:hover {
  background: var(--cc-wash);
  border-color: transparent;
  color: var(--cl-steel-ink, #33698f);
}

.gnm-case-actions__btn[aria-pressed="true"] {
  background: var(--cc-wash-strong);
  border-color: transparent;
  color: var(--cl-steel-ink, #33698f);
  font-weight: 700;
}

/* The Useful heart: outline at rest, filled cardio red once given.
   bi glyphs swap by codepoint; inline-block so the pop can transform. */
.gnm-case-actions__btn[data-gnm-action="useful"] .gnm-case-actions__icon {
  display: inline-block;
}

.gnm-case-actions__btn[data-gnm-action="useful"][aria-pressed="true"] .gnm-case-actions__icon::before {
  content: "\f415";
}

.gnm-case-actions__btn[data-gnm-action="useful"][aria-pressed="true"] .gnm-case-actions__icon {
  color: var(--cl-red, #dd100b);
}

.gnm-case-actions__btn[data-gnm-action="useful"][aria-pressed="true"]:hover .gnm-case-actions__icon {
  color: inherit;
}

/* The give-a-heart burst: ring, sparks, pop - the Twitter-heart grammar
   redrawn in the house palette, no sprite. Everything below only plays on
   the interaction itself (the button holds focus when it flips), never on
   a page that loads already liked. */
.gnm-useful-burst {
  position: relative;
  display: inline-flex;
}

.gnm-useful-burst::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border-radius: 50%;
  border: 12px solid var(--cl-steel-light, #7fb1d4);
  opacity: 0;
  transform: scale(.2);
  pointer-events: none;
}

.gnm-useful-burst::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  box-shadow:
    0 0 0 var(--cl-red, #dd100b),
    0 0 0 var(--cl-steel, #4083b0),
    0 0 0 var(--cl-red, #dd100b),
    0 0 0 var(--cl-steel-light, #7fb1d4),
    0 0 0 var(--cl-red, #dd100b),
    0 0 0 var(--cl-steel, #4083b0),
    0 0 0 var(--cl-red, #dd100b),
    0 0 0 var(--cl-steel-light, #7fb1d4);
}

.gnm-case-actions__btn[data-gnm-action="useful"][aria-pressed="true"]:focus .gnm-case-actions__icon {
  animation: gnm-useful-pop .5s cubic-bezier(.16, 1, .3, 1) .1s both;
}

.gnm-case-actions__btn[data-gnm-action="useful"][aria-pressed="true"]:focus .gnm-useful-burst::before {
  animation: gnm-useful-ring .5s cubic-bezier(.16, 1, .3, 1) both;
}

.gnm-case-actions__btn[data-gnm-action="useful"][aria-pressed="true"]:focus .gnm-useful-burst::after {
  animation: gnm-useful-sparks .65s cubic-bezier(.16, 1, .3, 1) .12s both;
}

@keyframes gnm-useful-pop {
  0% { transform: scale(.2); }
  40% { transform: scale(1.3); }
  100% { transform: scale(1); }
}

/* Filled disc thinning into a ring as it grows, then gone. */
@keyframes gnm-useful-ring {
  0% { opacity: .85; transform: scale(.2); border-width: 12px; }
  55% { opacity: .55; border-width: 3px; }
  100% { opacity: 0; transform: scale(1.15); border-width: 1px; }
}

/* Eight sparks leave the centre and dissolve (negative spread). */
@keyframes gnm-useful-sparks {
  0% {
    opacity: 1;
    box-shadow:
      0 -6px 0 1px var(--cl-red, #dd100b),
      8px -4px 0 1px var(--cl-steel, #4083b0),
      9px 4px 0 1px var(--cl-red, #dd100b),
      5px 9px 0 1px var(--cl-steel-light, #7fb1d4),
      -1px 10px 0 1px var(--cl-red, #dd100b),
      -8px 6px 0 1px var(--cl-steel, #4083b0),
      -10px -2px 0 1px var(--cl-red, #dd100b),
      -5px -8px 0 1px var(--cl-steel-light, #7fb1d4);
  }
  100% {
    opacity: 0;
    box-shadow:
      0 -17px 0 -2px var(--cl-red, #dd100b),
      13px -11px 0 -2px var(--cl-steel, #4083b0),
      17px 3px 0 -2px var(--cl-red, #dd100b),
      11px 13px 0 -2px var(--cl-steel-light, #7fb1d4),
      -1px 17px 0 -2px var(--cl-red, #dd100b),
      -13px 11px 0 -2px var(--cl-steel, #4083b0),
      -17px -3px 0 -2px var(--cl-red, #dd100b),
      -11px -13px 0 -2px var(--cl-steel-light, #7fb1d4);
  }
}

.gnm-case-actions__btn[aria-pressed="true"]:hover {
  background: var(--cl-steel, #4083b0);
  color: var(--cc-on-dark);
}

.gnm-case-actions__btn[aria-busy="true"] {
  opacity: .6;
  pointer-events: none;
}

.gnm-case-actions__count {
  font-weight: 700;
  opacity: .68;
}

.gnm-case-actions__icon {
  display: inline-block;
  font-size: .82rem;
}

/* ---- The other three pictograms, in the heart's grammar ----
   Same easing as the burst, cubic-bezier(.16, 1, .3, 1), and the same rule the
   heart follows: motion says what the control DOES rather than merely moving.
   The bookmark tucks onto a shelf, the speech bubble leans in the way someone
   does before speaking, the share mark travels outward. All three are
   transform-only on a glyph that is already inline-block, so nothing reflows,
   and .gnm-case-actions__icon is already in the prefers-reduced-motion list
   further down - they inherit that guard and need no new entry.

   Saved and Share hang off real state, exactly like the heart. Replies cannot:
   it is an <a href="#comments"> with nothing to read, so it answers to hover.
   Scoping by element type is enough to single it out - Useful and Saved are
   <button>, Share is a <summary>. */

/* Saved: the bookmark drops in and settles - shelving something. */
.gnm-case-actions__btn[data-gnm-action="save"][aria-pressed="true"]:focus .gnm-case-actions__icon {
  animation: gnm-save-tuck .5s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes gnm-save-tuck {
  0% { transform: translateY(-7px) scale(.9); }
  45% { transform: translateY(2px) scale(1.06); }
  100% { transform: translateY(0) scale(1); }
}

/* Replies: the bubble leans in, as if about to say something. */
.gnm-case-actions a.gnm-case-actions__btn:hover .gnm-case-actions__icon {
  animation: gnm-replies-lean .45s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes gnm-replies-lean {
  0% { transform: rotate(0) translateY(0); }
  40% { transform: rotate(-8deg) translateY(-2px); }
  100% { transform: rotate(0) translateY(0); }
}

/* Share: the mark travels out of the panel it has just opened. */
.gnm-case-share[open] > summary .gnm-case-actions__icon {
  animation: gnm-share-send .5s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes gnm-share-send {
  0% { transform: translate(0, 0) scale(1); }
  45% { transform: translate(2px, -3px) scale(1.12); }
  100% { transform: translate(0, 0) scale(1); }
}

/* The author cannot press their own case, a visitor has nothing to press:
   same box, no affordance, no lie. */
.gnm-case-actions__stat {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--cc-ink-mute);
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.2;
}

/* Sharing: a native <details>, because Bootstrap's JS is not loaded on a
   case page. */
.gnm-case-share {
  position: relative;
}

.gnm-case-share > summary {
  list-style: none;
}

.gnm-case-share > summary::-webkit-details-marker {
  display: none;
}

.gnm-case-share[open] > summary {
  background: var(--cc-wash-strong);
  border-color: transparent;
  color: var(--cl-steel-ink, #33698f);
}

.gnm-case-share__panel {
  position: absolute;
  z-index: 5;
  top: calc(100% + 8px);
  right: 0;
  min-width: 264px;
  max-width: calc(100vw - 40px);
  padding: 12px;
  border: 1px solid var(--cc-panel-border);
  border-radius: 12px;
  background: var(--gnm-surface, #fff);
  box-shadow: 0 14px 36px rgba(15, 23, 42, .08);
}

.gnm-case-share__label {
  display: block;
  margin-bottom: 5px;
  color: var(--cc-ink-mute);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
}

.gnm-case-share__url {
  width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--cc-rule);
  border-radius: 8px;
  background: var(--gnm-surface, #fff);
  color: var(--cc-ink-body);
  font-size: .76rem;
}

.gnm-case-share__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.gnm-case-share__link {
  border: 0;
  background: none;
  padding: 0;
  color: var(--cl-steel-ink, #33698f);
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.gnm-case-share__link:hover {
  color: var(--cl-red, #dd100b);
  text-decoration: underline;
}

/* The rank, next to the name: same recipe as the thread badge, because that
   is already this surface's "author decoration" vocabulary. */
.gnm-case__rank {
  /* The parent is a flex column: without this the pill becomes a bar. */
  align-self: flex-start;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--cc-wash-strong);
  color: var(--cl-steel-ink, #33698f);
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* ---------- the thread ---------- */

.gnm-thread {
  margin-top: 22px;
  background: var(--gnm-surface, #fff);
  border: 1px solid var(--cc-panel-border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  padding: 22px 24px;
}

.gnm-thread__title {
  margin: 0 0 16px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--cl-space, #0a1830);
}

.gnm-thread__list,
.gnm-thread__children {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gnm-thread__item + .gnm-thread__item {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--cc-rule);
}

/* replies indent, with no vertical rule: the smaller avatar is enough */
.gnm-thread__children {
  margin-top: 14px;
  padding-left: 24px;
}

.gnm-thread__children .gnm-thread__children {
  padding-left: 16px;
}

.gnm-thread__msg {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
}

.gnm-thread__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
}

.gnm-thread__author {
  font-size: .88rem;
  font-weight: 700;
  color: var(--cl-space, #0a1830);
}

.gnm-thread__badge {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--cc-wash-strong);
  color: var(--cl-steel-ink, #33698f);
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
}


/* One reply per case can be kept by the author: tint and solid badge. */
.gnm-thread__item--helpful > .gnm-thread__msg {
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--cc-wash);
}

.gnm-thread__badge--helpful {
  background: var(--cl-steel, #4083b0);
  color: var(--cc-on-dark);
}

/* A <button> sitting in this footer must be indistinguishable from the
   "Reply" link: .gnm-thread__actions only styles <a>. */
.gnm-thread-mark {
  display: inline;
  margin: 0;
}

.gnm-thread-mark__btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--cl-steel-ink, #33698f);
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}

.gnm-thread-mark__btn:hover {
  color: var(--cl-red, #dd100b);
  text-decoration: underline;
}

.gnm-thread__time {
  font-size: .76rem;
  color: var(--cc-ink-mute);
}

.gnm-thread__pending {
  margin: 0 0 6px;
  font-size: .76rem;
  font-weight: 700;
  color: #8f6b09;
}

.gnm-thread__text {
  font-size: .92rem;
  line-height: 1.6;
  color: var(--cc-ink-body);
}

.gnm-thread__text > :last-child {
  margin-bottom: 0;
}

.gnm-thread__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 7px;
}

/* Hairline pipe between Reply and the helpful mark.
   --cc-panel-border and not --cc-rule: the kept reply tints its own bubble with
   --cc-wash, which resolves to rgb(238,244,248) over white, and --cc-rule is
   rgb(233,237,242) - five values per channel apart, so the pipe was drawn and
   invisible on exactly the reply that has two actions to separate. */
.gnm-thread__actions > * + *::before {
  content: "";
  align-self: center;
  width: 1px;
  height: 11px;
  margin-right: 10px;
  background: var(--cc-panel-border, #dae0e7);
}

.gnm-thread__actions > .gnm-thread-mark {
  display: inline-flex;
  align-items: center;
}

.gnm-thread__actions a {
  font-size: .78rem;
  font-weight: 700;
  color: var(--cl-steel-ink, #33698f);
  text-decoration: none;
}

.gnm-thread__actions a:hover {
  color: var(--cl-red, #dd100b);
  text-decoration: underline;
}

.gnm-thread__empty,
.gnm-thread__closed {
  margin: 0;
  font-size: .9rem;
  color: var(--cc-ink-soft);
}

.gnm-thread__pagination {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  font-size: .82rem;
  font-weight: 600;
}

/* ---------- the reply form ----------
   the form charter is sealed on .gnm-auth-v (labels, controls, focus
   ring, red button): the form carries the class and inherits it; only
   what is missing is added here. */

.gnm-thread-form {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--cc-rule);
}

/* moved into the thread by comment-reply.js: no separator rule anymore */
.gnm-thread__item .gnm-thread-form {
  border-top: 0;
  padding-top: 14px;
}

.gnm-thread-form__title {
  margin: 0 0 12px;
  font-size: .92rem;
  font-weight: 700;
  color: var(--cl-space, #0a1830);
}

.gnm-thread-form__identity {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  font-size: .84rem;
  color: var(--cc-ink-soft);
}

.gnm-thread-form__identity strong {
  color: var(--cl-space, #0a1830);
}

.gnm-thread-form__field {
  margin-bottom: 14px;
}

.gnm-thread-form__actions {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.gnm-thread-form__cancel a {
  font-size: .8rem;
  font-weight: 600;
  color: var(--cc-ink-mute);
  text-decoration: none;
}

.gnm-thread-form__cancel a:hover {
  color: var(--cl-red, #dd100b);
}

.gnm-thread-form__must-log-in {
  margin: 0;
  font-size: .88rem;
}

/* ---------- focus visible ---------- */

.gnm-cases-nav__link:focus-visible,
.gnm-cases-chip:focus-visible,
.gnm-cases-cta:focus-visible,
.gnm-cases-empty__link:focus-visible,
.gnm-case-actions__btn:focus-visible,
.gnm-case-share > summary:focus-visible,
.gnm-case-share__url:focus-visible,
.gnm-case-share__link:focus-visible,
.gnm-thread-mark__btn:focus-visible,
.gnm-cases-pagination .page-numbers:focus-visible,
.gnm-case-back__link:focus-visible,
.gnm-thread__actions a:focus-visible,
.gnm-thread-form__cancel a:focus-visible {
  outline: 2px solid var(--cl-steel, #4083b0);
  outline-offset: 2px;
}

/* the whole row is the target: the ring lands on the row, not on the sole
   text of the covering link */
.gnm-cases-row:has(.gnm-cases-row__link:focus-visible) {
  outline: 2px solid var(--cl-steel, #4083b0);
  outline-offset: -2px;
}

.gnm-cases-row__link:focus-visible {
  outline: none;
}

/* ---------- responsive: the column becomes a horizontal rail ---------- */

@media (max-width: 991.98px) {
  .gnm-cases-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .gnm-cases-nav {
    position: static;
    max-height: none;
    overflow-y: visible;
  }

  .gnm-cases-nav__scroll {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }

  .gnm-cases-nav__scroll::-webkit-scrollbar {
    display: none;
  }

  .gnm-standing {
    margin-top: 14px;
    padding-top: 12px;
  }

  .gnm-cases-nav__list {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 6px;
  }

  .gnm-cases-nav__link {
    white-space: nowrap;
  }

  .gnm-cases-nav__group {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .gnm-cases-nav__title {
    margin: 0;
    padding-left: 0;
    white-space: nowrap;
  }

  .gnm-cases-nav__chips {
    flex-wrap: nowrap;
  }
}

@media (max-width: 575.98px) {
  .gnm-cases-head__title {
    font-size: 1.45rem;
  }

  .gnm-cases-row {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 14px 16px;
  }

  .gnm-cases-row__stats {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    text-align: left;
  }

  .gnm-case,
  .gnm-thread {
    padding: 20px 18px;
  }

  .gnm-case__title {
    font-size: 1.3rem;
  }

  .gnm-thread__children {
    padding-left: 14px;
  }

  .gnm-case-actions {
    gap: 6px;
  }

  .gnm-case-actions__btn,
  .gnm-case-actions__stat {
    padding: 6px 11px;
  }

  .gnm-case-share__panel {
    min-width: 0;
    width: min(300px, calc(100vw - 40px));
  }
}

@media (prefers-reduced-motion: reduce) {

  .gnm-cases-cta,
  .gnm-cases-cta__icon,
  .gnm-cases-nav__link,
  .gnm-cases-chip,
  .gnm-cases-row,
  .gnm-case-back__icon,
  .gnm-case-actions__btn,
  .gnm-case-actions__icon,
  .gnm-case-share > summary,
  .gnm-standing__fill,
  .gnm-thread-mark__btn,
  .gnm-useful-burst::before,
  .gnm-useful-burst::after {
    transition: none;
    animation: none;
  }

  .gnm-cases-cta:hover {
    transform: none;
  }

  .gnm-cases-cta:hover .gnm-cases-cta__icon,
  .gnm-case-back__link:hover .gnm-case-back__icon {
    transform: none;
  }
}

/* ==========================================================================
   Clinical case composer — /submit-clinical-case/
   One writes in the typography one will be read in: the column, the title
   scale and the section labels are those of the published case higher up
   in this file. No form chrome: the chrome disappears, the text stays.
   The regulatory guard-rails do not leave the page, they only change
   voice.
   ========================================================================== */

.gnm-compose {
  max-width: var(--cc-measure);
  margin-inline: auto;
  padding-bottom: 8px;
}

.gnm-compose__specialty-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.gnm-compose__specialty {
  width: 100%;
  max-width: 340px;
  padding: 0;
  border: 0;
  background: none;
  font-size: .78rem;
  font-weight: 600;
  color: var(--cl-steel-ink, #33698f);
  line-height: 1.4;
}

.gnm-compose__specialty::placeholder {
  font-weight: 500;
  color: var(--cc-ink-mute, #6a7182);
  opacity: .75;
}

.gnm-compose__specialty:focus {
  outline: none;
  box-shadow: 0 1px 0 0 var(--cl-steel, #4083b0);
}

/* ---------- the title, at the published case's scale ---------- */

.gnm-compose__title {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.22;
  color: var(--cl-space, #0a1830);
}

.gnm-compose__title::placeholder {
  color: var(--cc-ink-mute, #6a7182);
  opacity: .5;
}

.gnm-compose__title:focus {
  outline: none;
}

.gnm-compose__field {
  margin-bottom: 6px;
}

/* The specialty follows the title: one quiet line below it, at the scale
   of a meta line rather than a form field. */
.gnm-compose__field--specialty {
  margin-top: 8px;
}

.gnm-compose__field--specialty .gnm-compose__specialty {
  max-width: 100%;
}

/* ---------- sections and labels, borrowed from the published case ---------- */

.gnm-compose__section {
  margin-top: 26px;
}

.gnm-compose__label {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--cc-rule, #e3e8f0);
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--cc-ink-mute, #6a7182);
}

.gnm-compose__hint {
  margin: 0 0 12px;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--cc-ink-mute, #6a7182);
}

.gnm-compose__hint-link {
  color: var(--cl-steel-ink, #33698f);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.gnm-compose__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- the editor: erasing the WordPress chrome ---------- */

.gnm-compose__editor .wp-editor-tools {
  padding: 0;
  border: 0;
  background: none;
}

.gnm-compose__editor .wp-editor-tabs {
  display: none;
}

.gnm-compose__editor .wp-editor-container {
  border: 0;
  box-shadow: none;
  background: none;
}

.gnm-compose__editor .mce-panel,
.gnm-compose__editor .mce-toolbar-grp,
.gnm-compose__editor .mce-menubar {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.gnm-compose__editor .mce-toolbar-grp {
  padding-bottom: 4px;
  border-bottom: 1px solid var(--cc-rule, #e3e8f0) !important;
}

.gnm-compose__editor .mce-btn button {
  color: var(--cc-ink-body, #2b3242);
}

.gnm-compose__editor .mce-edit-area {
  border: 0 !important;
}

.gnm-compose__editor iframe {
  background: transparent;
}

.gnm-compose__editor .wp-editor-area {
  border: 0;
  padding: 8px 0;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--cc-ink-body, #2b3242);
  background: none;
}

/* ---------- the question ---------- */

.gnm-compose__question {
  display: block;
  width: 100%;
  min-height: 96px;
  padding: 2px 0;
  border: 0;
  background: none;
  resize: none;
  overflow: hidden;
  font-size: .97rem;
  line-height: 1.65;
  color: var(--cc-ink-body, #2b3242);
}

.gnm-compose__question::placeholder {
  color: var(--cc-ink-mute, #6a7182);
  opacity: .72;
}

.gnm-compose__question:focus {
  outline: none;
}

/* ---------- images: a region of the document, not a control ---------- */

.gnm-compose__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 22px 20px;
  border: 1px dashed var(--cc-panel-border, #cfd8e6);
  border-radius: 12px;
  background: var(--cc-wash, #f7f9fc);
  text-align: center;
  cursor: pointer;
  transition: border-color .2s cubic-bezier(.16, 1, .3, 1), background-color .2s cubic-bezier(.16, 1, .3, 1);
}

.gnm-compose__drop:hover,
.gnm-compose__drop.is-dragging {
  border-color: var(--cl-steel, #4083b0);
  background: rgba(64, 131, 176, .07);
}

.gnm-compose__drop.is-invalid {
  border-color: #b3261e;
  border-style: solid;
}

.gnm-compose__drop-icon {
  font-size: 1.15rem;
  color: var(--cl-steel-ink, #33698f);
}

.gnm-compose__drop-text {
  font-size: .9rem;
  font-weight: 600;
  color: var(--cc-ink, #1c2333);
}

.gnm-compose__drop-note {
  max-width: 58ch;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--cc-ink-mute, #6a7182);
}

.gnm-compose__file {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.gnm-compose__file:focus-visible + .gnm-compose__drop,
.gnm-compose__drop:focus-within {
  outline: 2px solid var(--cl-steel, #4083b0);
  outline-offset: 2px;
}

.gnm-compose__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.gnm-compose__thumbs:not(:empty) {
  padding: 14px;
  border: 1px solid var(--cc-panel-border, #cfd8e6);
  border-radius: 12px;
  background: var(--cc-wash, #f7f9fc);
}

.gnm-compose__thumb {
  position: relative;
  width: 132px;
  margin: 0;
}

.gnm-compose__thumb-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--cc-rule, #e3e8f0);
}

.gnm-compose__thumb-meta {
  margin-top: 5px;
  font-size: .7rem;
  line-height: 1.35;
  color: var(--cc-ink-mute, #6a7182);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gnm-compose__thumb-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(10, 24, 48, .78);
  color: #fff;
  font-size: .62rem;
  cursor: pointer;
  transition: background-color .18s cubic-bezier(.16, 1, .3, 1);
}

.gnm-compose__thumb-remove:hover {
  background: var(--cl-red, #dd100b);
}

.gnm-compose__clear {
  margin-top: 12px;
  padding: 6px 14px;
  border: 1px solid var(--cc-panel-border, #cfd8e6);
  border-radius: 999px;
  background: none;
  font-size: .78rem;
  font-weight: 600;
  color: var(--cc-ink-body, #2b3242);
  cursor: pointer;
}

.gnm-compose__clear:hover {
  border-color: var(--cl-steel, #4083b0);
  color: var(--cl-steel-ink, #33698f);
}

/* ---------- the guard-rails: sober, never tucked away ---------- */

.gnm-compose__guard {
  margin-top: 30px;
  padding: 20px 22px 18px;
  border: 1px solid var(--cc-panel-border, #cfd8e6);
  border-radius: 14px;
  background: var(--cc-wash, #f7f9fc);
}

.gnm-compose__label--guard {
  color: var(--cl-steel-ink, #33698f);
  border-bottom-color: var(--cc-panel-border, #cfd8e6);
}

.gnm-compose__guard-rule {
  margin: 0 0 10px;
  font-size: .84rem;
  line-height: 1.6;
  color: var(--cc-ink-body, #2b3242);
}

.gnm-compose__guard-rule strong {
  color: var(--cc-ink, #1c2333);
}

.gnm-compose__consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 12px;
  font-size: .84rem;
  line-height: 1.5;
  color: var(--cc-ink-body, #2b3242);
}

.gnm-compose__consent input {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--cl-steel, #4083b0);
}

.gnm-compose__consent label {
  cursor: pointer;
}

/* ---------- the send ---------- */

.gnm-compose__send {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
}

.gnm-compose__submit {
  padding: 12px 26px;
  border: 0;
  border-radius: 10px;
  background: var(--cl-red, #dd100b);
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color .18s cubic-bezier(.16, 1, .3, 1), transform .18s cubic-bezier(.16, 1, .3, 1);
}

.gnm-compose__submit:hover {
  background: var(--cl-red-deep, #b50d09);
  transform: translateY(-1px);
}

.gnm-compose__submit:disabled {
  opacity: .6;
  cursor: progress;
  transform: none;
}

.gnm-compose__send-note {
  margin: 0;
  font-size: .78rem;
  color: var(--cc-ink-mute, #6a7182);
}

/* ---------- errors: silent until a send is attempted ---------- */

.gnm-compose__error {
  display: none;
  margin: 6px 0 0;
  font-size: .78rem;
  font-weight: 600;
  color: #b3261e;
}

.was-validated .gnm-compose__title:invalid ~ .gnm-compose__error,
.was-validated .gnm-compose__question:invalid ~ .gnm-compose__error,
.was-validated .gnm-compose__guard:has(input:invalid) .gnm-compose__error--consent,
.gnm-compose__error--images.is-visible {
  display: block;
}

.was-validated .gnm-compose__title:invalid,
.was-validated .gnm-compose__question:invalid {
  box-shadow: 0 1px 0 0 #b3261e;
}

/* ---------- feedback messages ---------- */

.gnm-compose-alert {
  margin-bottom: 22px;
  padding: 13px 16px;
  border: 1px solid;
  border-radius: 10px;
  font-size: .88rem;
  line-height: 1.5;
}

.gnm-compose-alert--success {
  border-color: rgba(28, 105, 74, .35);
  background: rgba(28, 105, 74, .08);
  color: #14543b;
}

.gnm-compose-alert--error {
  border-color: rgba(179, 38, 30, .35);
  background: rgba(179, 38, 30, .07);
  color: #8c1d18;
}

.gnm-compose-alert--warning {
  border-color: rgba(146, 94, 10, .35);
  background: rgba(191, 138, 22, .1);
  color: #6f4708;
}

.gnm-compose-alert--info {
  border-color: rgba(64, 131, 176, .38);
  background: rgba(64, 131, 176, .09);
  color: var(--cl-steel-ink, #33698f);
}

/* ---------- the wait: moderation is synchronous, so it is drawn ---------- */

.gnm-compose-wait {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(10, 24, 48, .55);
}

.gnm-compose-wait.is-active {
  display: flex;
}

.gnm-compose-wait__panel {
  width: 100%;
  max-width: 420px;
  padding: 30px;
  border-radius: 14px;
  background: #fff;
  text-align: center;
  box-shadow: 0 18px 48px rgba(10, 24, 48, .28);
}

.gnm-compose-wait__spinner {
  width: 42px;
  height: 42px;
  margin: 0 auto 16px;
  border: 3px solid var(--cc-rule, #e3e8f0);
  border-top-color: var(--cl-steel, #4083b0);
  border-radius: 50%;
  animation: gnm-compose-spin .8s linear infinite;
}

.gnm-compose-wait__title {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  color: var(--cc-ink, #1c2333);
}

.gnm-compose-wait__note {
  margin: 0;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--cc-ink-mute, #6a7182);
}

body.gnm-clinical-case-is-submitting {
  overflow: hidden;
}

@keyframes gnm-compose-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 575.98px) {
  .gnm-compose__title {
    font-size: 1.3rem;
  }

  .gnm-compose__drop {
    padding: 18px 14px;
  }

  .gnm-compose__guard {
    padding: 16px 15px 14px;
  }

  .gnm-compose__thumb {
    width: calc(50% - 6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gnm-compose__submit,
  .gnm-compose__drop,
  .gnm-compose__thumb-remove {
    transition: none;
  }

  .gnm-compose__submit:hover {
    transform: none;
  }

  .gnm-compose-wait__spinner {
    animation-duration: 2.4s;
  }
}

/* On the composer the theme's page title competed with the case title: two
   big titles stacked. It becomes an eyebrow — the <h1> stays for
   accessibility, its visual weight goes. */
/* The accessible name stays, the ink goes: the composer's meta row carries
   the same text on screen. Two stacked micro-labels used to stutter. */
body.gnm-cases-surface.page .gnm-article-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

body.gnm-cases-surface.page .gnm-page-card > header.mb-3 {
  margin-bottom: 0 !important;
}

/* One line, three anchors: the way back on the left, the author's signature
   in the middle, the page name on the right. The person stands between two
   quiet labels, so the eye lands on the face first. */
.gnm-compose-meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px 18px;
  margin-bottom: 26px;
}

.gnm-compose-meta .gnm-case-back__link {
  grid-column: 1;
  justify-self: start;
}

.gnm-compose-meta__id {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.gnm-compose-meta__name {
  font-size: .93rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cc-ink, #1c2333);
  white-space: nowrap;
}

.gnm-compose-meta__eyebrow {
  grid-column: 3;
  justify-self: end;
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--cc-ink-mute, #6a7182);
}

/* Three anchors need width: when it runs out, the signature takes its own
   centred line under the two labels instead of crushing them. */
@media (max-width: 680px) {
  .gnm-compose-meta {
    grid-template-columns: 1fr auto;
  }

  .gnm-compose-meta__id {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
  }

  .gnm-compose-meta__eyebrow {
    grid-column: 2;
    grid-row: 1;
  }
}

body.gnm-cases-surface.page .gnm-article-title,
body.gnm-cases-surface.page .gnm-compose {
  max-width: var(--cc-measure);
  margin-inline: auto;
}

body.gnm-cases-surface.page .gnm-compose {
  margin-top: 0;
}


/* The draft sits on the same white sheet as the published case: without it
   the writing area dissolves into the app background and stops reading as
   anything. The guard-rail panel stays tinted, hence legible on this white. */
.gnm-compose__form {
  padding: 26px 28px 30px;
  border: 1px solid var(--cc-panel-border, #cfd8e6);
  border-radius: 14px;
  background: #fff;
}

@media (max-width: 575.98px) {
  .gnm-compose__form {
    padding: 18px 16px 22px;
  }
}


/* ---------- the formatting bubble (on selection only) ---------- */

.gnm-compose__editor .mce-toolbar-grp,
.gnm-compose__editor .wp-editor-tools,
.gnm-compose__editor .mce-statusbar {
  display: none !important;
}

.gnm-bubble {
  position: fixed;
  z-index: 60;
  display: none;
  transform: translate(-50%, calc(-100% - 10px));
  padding: 5px;
  border-radius: 10px;
  background: var(--cl-space, #0a1830);
  box-shadow: 0 10px 28px rgba(10, 24, 48, .3);
}

.gnm-bubble.is-open {
  display: block;
}

/* The tip that pins the bubble to the selected text. */
.gnm-bubble:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translateX(-50%) translateY(-5px) rotate(45deg);
  background: var(--cl-space, #0a1830);
}

.gnm-bubble__actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.gnm-bubble__btn {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: none;
  color: rgba(255, 255, 255, .82);
  font-size: .92rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .15s cubic-bezier(.16, 1, .3, 1), color .15s cubic-bezier(.16, 1, .3, 1);
}

.gnm-bubble__btn:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

.gnm-bubble__btn.is-active {
  color: var(--cl-steel-light, #a8cbe8);
}

.gnm-bubble__btn--italic em {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
}

.gnm-bubble__sep {
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: rgba(255, 255, 255, .2);
}

.gnm-bubble__link {
  display: block;
}

.gnm-bubble__link-input {
  width: 260px;
  padding: 6px 10px;
  border: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  font-size: .82rem;
}

.gnm-bubble__link-input::placeholder {
  color: rgba(255, 255, 255, .55);
}

.gnm-bubble__link-input:focus {
  outline: 2px solid var(--cl-steel, #4083b0);
  outline-offset: 1px;
}

.gnm-bubble__btn:focus-visible {
  outline: 2px solid var(--cl-steel-light, #a8cbe8);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .gnm-bubble__btn {
    transition: none;
  }
}


/* ---------- the prompt caret ----------
   With the boxes gone, nothing says a zone accepts typing. A blinking
   caret in front of the prompt text says it without bringing a box back,
   and clears as soon as the field is entered: the real caret takes over,
   there are never two. */

.gnm-compose__field,
.gnm-compose__write {
  position: relative;
  display: block;
}

.gnm-compose__field:before,
.gnm-compose__write:before {
  content: "";
  position: absolute;
  left: 0;
  width: 2px;
  background: var(--cc-ink, #1c2333);
  opacity: 0;
  pointer-events: none;
}

.gnm-compose__field:has(.gnm-compose__title:placeholder-shown:not(:focus)):before,
.gnm-compose__write--specialty:has(.gnm-compose__specialty:placeholder-shown:not(:focus)):before,
.gnm-compose__write--question:has(.gnm-compose__question:placeholder-shown:not(:focus)):before {
  animation: gnm-caret-blink 1.1s steps(1) infinite;
}

/* Each field has its own metrics: the caret hugs the line it precedes. */
.gnm-compose__field:before {
  top: 5px;
  height: 1.55rem;
}

.gnm-compose__write--specialty:before {
  top: 2px;
  height: .82rem;
}

.gnm-compose__write--question:before {
  top: 7px;
  height: 1.05rem;
}

@keyframes gnm-caret-blink {
  0%, 45% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* A blink is motion: keep the landmark, drop the beat. */
@media (prefers-reduced-motion: reduce) {
  .gnm-compose__field:has(.gnm-compose__title:placeholder-shown:not(:focus)):before,
  .gnm-compose__write--specialty:has(.gnm-compose__specialty:placeholder-shown:not(:focus)):before,
  .gnm-compose__write--question:has(.gnm-compose__question:placeholder-shown:not(:focus)):before {
    animation: none;
    opacity: .75;
  }
}


/* The editor stays a positioning reference: the focus underline clings to it. */
.gnm-compose__editor {
  position: relative;
}


/* ---------- prompt caret alignment ----------
   The container was a block: its line-height (25.6px) exceeding the
   field's (17.5px), inline layout re-centred the field on the baseline
   and pushed it 5.5px below its container — the caret, pinned to the
   container, looked too high. In flex, the field starts where its
   container starts, and the landmark falls back onto the text. */

.gnm-compose__write {
  display: flex;
}

.gnm-compose__write > input,
.gnm-compose__write > textarea {
  flex: 1;
  min-width: 0;
}

/* ---------- the focus landmark ----------
   With no box, `outline: none` left the title and the question without any
   keyboard signal: only the specialty field had one. The underline
   Sébastien likes therefore becomes the rule for all four zones - it is
   also the only focus landmark, which is not negotiable. */

.gnm-compose__title:focus,
.gnm-compose__question:focus,
.gnm-compose__specialty:focus {
  box-shadow: 0 1px 0 0 var(--cl-steel, #4083b0);
}

.gnm-compose__editor.is-focused:after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--cl-steel, #4083b0);
}