/*
  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) + logo blue #4083b0 (CTAs), rebrand 14/08 (navy/blue mascot logo, hover = existing steel-ink).
*/

: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: blue accent,
     like the home CTAs (the navy primary would read as navigation) */
  --gnm-statebtn: var(--cl-accent, #4083b0);
  --gnm-statebtn-ink: var(--cl-accent-deep, #33698f);
  --gnm-statebtn-rgb: 64, 131, 176;

  /* the next congress in the timeline: same blue accent as the CTAs */
  --gnm-timeline-next: var(--cl-accent, #4083b0);
  --gnm-timeline-next-rgb: 64, 131, 176;
  --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-accent: #4083b0;              /* CTAs, underlines (historic btn-warning) */
  --cl-accent-deep: #33698f;         /* hover of the blue accent CTAs */

  /* Micro-interaction inks (15/08/2026). The network scale lives in base.css;
     what a site owns is the colour it is written in. */
  --gnm-shadow-rgb: 10, 24, 48;              /* space navy, never black */
  --gnm-progress-color: var(--cl-steel, #4083b0);
  --gnm-focus-color: var(--cl-steel-ink, #33698f);
  --cc-row-tint: rgba(10, 24, 48, .05);      /* hovered row, any background */
  --cc-row-tint-dark: rgba(237, 242, 255, .08);

  --cl-eyebrow-light: var(--cl-steel-light);
  --cl-liseret: linear-gradient(90deg, transparent, rgba(64, 131, 176, .9), rgba(64, 131, 176, .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 blue accent */
  --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 var(--gnm-dur-fast) var(--gnm-ease), opacity var(--gnm-dur-fast) var(--gnm-ease);
}

#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 var(--gnm-dur-fast) var(--gnm-ease), opacity var(--gnm-dur-fast) var(--gnm-ease);
}

#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 + blue accent 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: 34px;
  height: 34px;
  flex: 0 0 auto;
  background-image: url('../../assets/cardiolab/cardio-connect-logopicto.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform-origin: center;
  animation: cl-heart-pulse 1.8s ease-in-out infinite;
}

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

/* lub-dub heartbeat: two short beats then a rest, matches an ECG pulse rather than a single throb */
@keyframes cl-heart-pulse {
  0%, 40%, 100% { transform: scale(1); }
  12% { transform: scale(1.16); }
  24% { transform: scale(1); }
  32% { transform: scale(1.1); }
}


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

/* Menu = literal copy of the live Pancreoscopie (measured 11/07/2026):
   uppercase 0.78rem/600 navy. The 2px mark is drawn by ::after and grows from
   the centre: steel on hover, CTA blue acier on the current page (retinted 12/07),
   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;
  /* The border still reserves the box; the visible mark is drawn by ::after,
     which can be animated without the icon item drifting out of line. */
  border-bottom: 2px solid transparent;
  position: relative;
  transition: color var(--gnm-dur-fast) var(--gnm-ease);
}

/* The mark grows out of the centre rather than fading in everywhere at once:
   in a menu it says where you are, and a position should arrive somewhere.
   Kept in the navigation on purpose - there it is a location marker, not the
   underline of a title. */
#header.gnm-site-header-shell--navbar .gnm-navbar-menu .nav-link::after {
  content: "";
  position: absolute;
  left: .9rem;
  right: .9rem;
  bottom: -2px;
  height: 2px;
  background: var(--cl-steel);
  transform: scaleX(0);
  transition:
    transform var(--gnm-dur) var(--gnm-ease), background-color var(--gnm-dur-fast) var(--gnm-ease);
}

#header.gnm-site-header-shell--navbar .gnm-navbar-menu .nav-link:hover::after,
#header.gnm-site-header-shell--navbar .gnm-navbar-menu .nav-link:focus-visible::after {
  transform: scaleX(1);
}

#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;
}

@media (prefers-reduced-motion: reduce) {
  #header.gnm-site-header-shell--navbar .gnm-navbar-menu .nav-link::after {
    transition: none;
  }
}

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-accent) !important;
  background: transparent;
}

/* The current page keeps its mark drawn at full width, in the CTA blue acier that
   separates "you are here" from "this answers your cursor". */
body.post-type-archive-clinical_case #header.gnm-site-header-shell--navbar .nav-item-189 > .nav-link::after,
#header.gnm-site-header-shell--navbar .gnm-navbar-menu .nav-link.active::after,
#header.gnm-site-header-shell--navbar .gnm-navbar-menu .current-menu-item > .nav-link::after {
  transform: scaleX(1);
  background: var(--cl-accent);
}

/* 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: var(--gnm-shadow-hover);
  transition: color var(--gnm-dur-fast) var(--gnm-ease), border-color var(--gnm-dur-fast) var(--gnm-ease), box-shadow var(--gnm-dur-fast) var(--gnm-ease), transform var(--gnm-dur-fast) var(--gnm-ease);
}

#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: var(--gnm-shadow-md);
  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: var(--gnm-shadow-float);
  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-accent);
  border: 0;
  color: #fff !important;
}

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

#header .gnm-btn-search-go .bi,
#header .gnm-adv-search-link .bi {
  display: inline-block;
  transition: transform var(--gnm-dur) var(--gnm-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 var(--gnm-dur) var(--gnm-ease), color var(--gnm-dur) var(--gnm-ease), background var(--gnm-dur) var(--gnm-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-accent);
}

.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 var(--gnm-dur-slow) var(--gnm-ease);
}

.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);
}

/* blue-accent CTA: direct heritage of the old site's buttons */
.gnm-home-hero__card .btn-primary {
  background: var(--cl-accent);
  border-color: transparent;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--gnm-radius-md);
  box-shadow: 0 6px 24px rgba(64, 131, 176, .35);
  transition: background-color var(--gnm-dur) var(--gnm-ease), transform var(--gnm-dur) var(--gnm-ease), box-shadow var(--gnm-dur) var(--gnm-ease);
}

.gnm-home-hero__card .btn-primary:hover,
.gnm-home-hero__card .btn-primary:focus {
  background: var(--cl-accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 10px 32px rgba(64, 131, 176, .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-accent);
  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: blue accent, white text */
.gnm-home-hero-carousel--overlay .gnm-home-hero-carousel__cta {
  background: var(--cl-accent);
  border: 0;
  color: #fff;
  transition: background-color var(--gnm-dur-fast) var(--gnm-ease), transform var(--gnm-dur-fast) var(--gnm-ease), box-shadow var(--gnm-dur-fast) var(--gnm-ease);
}

.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-accent-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 var(--gnm-dur) var(--gnm-ease);
}

.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 var(--gnm-dur-fast) var(--gnm-ease), border-color var(--gnm-dur-fast) var(--gnm-ease);
}

.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 var(--gnm-dur) var(--gnm-ease);
}

.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, blue accent 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-accent);
  border-color: var(--cl-accent);
}

.gnm-home-search-cta__submit:hover,
.gnm-home-search-cta__submit:focus {
  background: var(--cl-accent-deep);
  border-color: var(--cl-accent-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 var(--gnm-dur) var(--gnm-ease), box-shadow var(--gnm-dur) var(--gnm-ease);
}

.gnm-home-article-card--cover:hover,
.gnm-home-article-card--cover:focus-within {
  border-color: var(--cl-steel);
  box-shadow: var(--gnm-shadow-hover);
}

/* 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 var(--gnm-dur) var(--gnm-ease), background-color var(--gnm-dur) var(--gnm-ease);
}

.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 var(--gnm-dur) var(--gnm-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 var(--gnm-dur) var(--gnm-ease);
}

.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, blue-accent 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-accent, #4083b0);
  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;
}

/* blue-accent-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-accent);
  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 var(--gnm-dur) var(--gnm-ease);
}

.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 blue accent ---- */

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

.gnm-home-article-ranking__item {
  transition:
    border-color var(--gnm-dur) var(--gnm-ease), background-color var(--gnm-dur) var(--gnm-ease), box-shadow var(--gnm-dur) var(--gnm-ease);
}

/* This one sits on a soft grey at rest, so it lifts by going white rather
   than by darkening - tinting a tinted surface only muddies it. */
.gnm-home-article-ranking__item:hover,
.gnm-home-article-ranking__item:focus-within {
  border-color: rgba(64, 131, 176, .45);
  background: var(--gnm-surface, #fff);
  box-shadow: var(--gnm-shadow-hover);
}

/* ---- 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-accent);
  border-color: transparent;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: var(--gnm-radius-md);
  box-shadow: 0 6px 24px rgba(64, 131, 176, .35);
  transition: background-color var(--gnm-dur) var(--gnm-ease), transform var(--gnm-dur) var(--gnm-ease), box-shadow var(--gnm-dur) var(--gnm-ease);
}

.gnm-home-editorial-highlight__cta:hover,
.gnm-home-editorial-highlight__cta:focus {
  background: var(--cl-accent-deep);
  transform: translateY(-1px);
  box-shadow: 0 10px 32px rgba(64, 131, 176, .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-accent);
  border-color: var(--cl-accent);
  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-accent-deep);
  border-color: var(--cl-accent-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 var(--gnm-dur) var(--gnm-ease), border-color var(--gnm-dur) var(--gnm-ease), color var(--gnm-dur) var(--gnm-ease);
}

.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-accent);
  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: blue accent, 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-accent);
  border-color: var(--cl-accent);
  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-accent-deep);
  border-color: var(--cl-accent-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 var(--gnm-dur) var(--gnm-ease);
}

.gnm-home-search-cta__card .gnm-home-search-cta__advanced .bi {
  display: inline-block;
  font-size: 1.05em;
  transition: transform var(--gnm-dur) var(--gnm-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 var(--gnm-dur) var(--gnm-ease), border-color var(--gnm-dur) var(--gnm-ease), color var(--gnm-dur) var(--gnm-ease);
}

.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 var(--gnm-dur-fast) var(--gnm-ease), background-color var(--gnm-dur-fast) var(--gnm-ease), border-color var(--gnm-dur-fast) var(--gnm-ease);
}

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 var(--gnm-dur) var(--gnm-ease), color var(--gnm-dur) var(--gnm-ease);
}

.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-accent, #4083b0);
  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 var(--gnm-dur-fast) var(--gnm-ease), box-shadow var(--gnm-dur-fast) var(--gnm-ease);
}

.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-accent, #4083b0);
  color: #fff;
  font-weight: 600;
  transition: background-color var(--gnm-dur) var(--gnm-ease);
}

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

/* 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 var(--gnm-dur) var(--gnm-ease), box-shadow var(--gnm-dur) var(--gnm-ease);
}

/* Flat at rest, raised under the cursor - and the same when the card is
   reached with the keyboard, otherwise tabbing through an index moves a
   focus ring across cards that never acknowledge it. */
.gnm-base-site .gnm-article-card.card:hover,
.gnm-base-site .gnm-article-card.card:focus-within {
  border-color: var(--cl-steel, #4083b0) !important; /* base.css: .gnm-loop-card { border !important } */
  box-shadow: var(--gnm-shadow-hover);
}

.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);
}

/* Hover colour is set once, for every title family, further down the sheet. */

.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, blue accent 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-accent, #4083b0);
  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 var(--gnm-dur) var(--gnm-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 var(--gnm-dur-fast) var(--gnm-ease), background-color var(--gnm-dur-fast) var(--gnm-ease), border-color var(--gnm-dur-fast) var(--gnm-ease);
}

.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 var(--gnm-dur) var(--gnm-ease);
}

.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 var(--gnm-dur-fast) var(--gnm-ease);
}

.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-accent, #4083b0);
}

.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: blue accent 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-accent, #4083b0);
  margin-right: .5rem;
  vertical-align: 1px;
}
.gnm-route-single .gnm-article-topic a {
  color: var(--cl-space, #0a1830);
  text-decoration: none;
  transition: color var(--gnm-dur) var(--gnm-ease);
}
.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 var(--gnm-dur) var(--gnm-ease), background-color var(--gnm-dur) var(--gnm-ease), border-color var(--gnm-dur) var(--gnm-ease);
}
.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 var(--gnm-dur) var(--gnm-ease);
}
.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-accent, #4083b0);
  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 var(--gnm-dur-fast) var(--gnm-ease), border-color var(--gnm-dur-fast) var(--gnm-ease);
}
.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 var(--gnm-dur-fast) var(--gnm-ease), box-shadow var(--gnm-dur-fast) var(--gnm-ease);
}
.gnm-base-site #bookmark-manager-root .bm-bookmark.card:hover {
  border-color: #cfd5e4;
  box-shadow: var(--gnm-shadow-hover);
}
.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 var(--gnm-dur-fast) var(--gnm-ease);
}
.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 var(--gnm-dur-fast) var(--gnm-ease);
}
.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-accent, #4083b0);
  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: var(--gnm-shadow-float);
}
.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 var(--gnm-dur-fast) var(--gnm-ease), border-color var(--gnm-dur-fast) var(--gnm-ease);
}
.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 var(--gnm-dur-fast) var(--gnm-ease), border-color var(--gnm-dur-fast) var(--gnm-ease);
}
.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-accent);
  --gnm-feat-arrow-bg: var(--cl-space);
  --gnm-feat-arrow-fg: #fff;
  --gnm-feat-arrow-bg-hover: var(--cl-accent);
  --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-accent);
  transition: background-color var(--gnm-dur) var(--gnm-ease);
}

.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-accent-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-accent)) 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-accent-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 = 70 ms/child cascade.
   Same easing as every hover on the site (--gnm-ease, base.css): one motion
   vocabulary, only the duration changes with the distance travelled - a hover
   is --gnm-dur, a block entering is longer. Home only:
   Browse, Clinical Cases, People and Webinars paint at once. ---- */

.reveal-ready [data-reveal],
.reveal-ready [data-reveal-children] > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--gnm-dur-slow) var(--gnm-ease), transform var(--gnm-dur-slow) var(--gnm-ease);
  will-change: opacity, transform;
}

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

/* 70 ms per child, capped at the sixth: a ten-item ranking whose last row
   waited .81 s read as a list loading, not as a list arriving. */
.reveal-ready [data-reveal-children].is-visible > *:nth-child(2) { transition-delay: .07s; }
.reveal-ready [data-reveal-children].is-visible > *:nth-child(3) { transition-delay: .14s; }
.reveal-ready [data-reveal-children].is-visible > *:nth-child(4) { transition-delay: .21s; }
.reveal-ready [data-reveal-children].is-visible > *:nth-child(5) { transition-delay: .28s; }
.reveal-ready [data-reveal-children].is-visible > *:nth-child(n+6) { transition-delay: .35s; }

@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 blue accent ->
   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-accent, #4083b0);
  border-left-color: var(--cl-accent, #4083b0);
  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 blue accent) — 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: var(--gnm-shadow-float);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--gnm-dur-slow) var(--gnm-ease), transform var(--gnm-dur-slow) var(--gnm-ease), background var(--gnm-dur-fast) var(--gnm-ease);
  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-accent, #4083b0);
}

.back-to-top i {
  display: inline-block;
  transition: transform var(--gnm-dur) var(--gnm-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-accent, #4083b0);
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  transition: background-color var(--gnm-dur) var(--gnm-ease), transform var(--gnm-dur) var(--gnm-ease);
}
.gnm-base-site .cl-about__cta-btn .bi {
  transition: transform var(--gnm-dur) var(--gnm-ease);
}
.gnm-base-site .cl-about__cta-btn:hover,
.gnm-base-site .cl-about__cta-btn:focus-visible {
  background: var(--cl-accent-deep, #33698f);
  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-accent-deep, #33698f); }

/* 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-accent-deep, #33698f);
}
.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-accent, #4083b0);
}

/* 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-accent, #4083b0);
}

/* 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, blue-accent
   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: var(--gnm-shadow-float);
}
.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 var(--gnm-dur) var(--gnm-ease), box-shadow var(--gnm-dur) var(--gnm-ease);
}
.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-accent);
  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-accent);
  border: 0;
  border-radius: 12px;
  transition: background-color var(--gnm-dur) var(--gnm-ease), transform var(--gnm-dur) var(--gnm-ease);
}
.gnm-auth-v .btn-primary:hover,
.gnm-auth-v .btn-primary:focus {
  background-color: var(--cl-accent-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-accent);
  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-route-browse,
.gnm-route-archive,
.gnm-route-home,
.gnm-route-webinars {
  padding: 32px 0 56px;
}

/* Browse + Highlights: eyebrow reads as a caption under the title, not a
   cramped label pinned to the sticky header edge. */
.gnm-route-browse .gnm-cases-head,
.gnm-route-archive .gnm-cases-head,
.gnm-route-home .gnm-cases-head,
.gnm-route-webinars .gnm-cases-head {
  margin-top: 8px;
}

.gnm-route-browse .gnm-cases-head__text,
.gnm-route-archive .gnm-cases-head__text,
.gnm-route-home .gnm-cases-head__text,
.gnm-route-webinars .gnm-cases-head__text {
  display: flex;
  flex-direction: column;
}

.gnm-route-browse .gnm-cases-head__title,
.gnm-route-archive .gnm-cases-head__title,
.gnm-route-home .gnm-cases-head__title,
.gnm-route-webinars .gnm-cases-head__title {
  order: 1;
}

.gnm-route-browse .gnm-cases-head__eyebrow,
.gnm-route-archive .gnm-cases-head__eyebrow,
.gnm-route-home .gnm-cases-head__eyebrow,
.gnm-route-webinars .gnm-cases-head__eyebrow {
  order: 2;
  margin: 10px 0 0;
}

.gnm-route-browse .gnm-cases-head__intro,
.gnm-route-archive .gnm-cases-head__intro,
.gnm-route-home .gnm-cases-head__intro,
.gnm-route-webinars .gnm-cases-head__intro {
  order: 3;
}


.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-accent, #4083b0);
  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);
}

/* ---------- blue-accent 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-accent, #4083b0);
  color: var(--cc-on-dark);
  font-size: .9rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color var(--gnm-dur) var(--gnm-ease), transform var(--gnm-dur) var(--gnm-ease);
}

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

.gnm-cases-cta__icon {
  display: inline-block;
  font-size: .95rem;
  transition: transform var(--gnm-dur) var(--gnm-ease);
}

.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) 280px;
  align-items: start;
  gap: 24px;
}

.gnm-cases-aside {
  position: sticky;
  top: var(--cc-sticky-top);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* The column copy of the rail, dark until the aside goes. */
.gnm-cases-nav__highlights {
  display: none;
}

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

  .gnm-cases-aside {
    display: none;
  }

  /* One rail at a time: what the aside stops showing, the column picks up. */
  .gnm-cases-nav__highlights {
    display: block;
    margin-top: 16px;
  }
}

/* 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 var(--gnm-dur) var(--gnm-ease), color var(--gnm-dur) var(--gnm-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 var(--gnm-dur) var(--gnm-ease), color var(--gnm-dur) var(--gnm-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: var(--gnm-shadow-float);
}

.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-accent, #4083b0);
  color: #fff;
  font: inherit;
  font-size: .84rem;
  font-weight: 700;
  cursor: pointer;
}

.gnm-portrait-crop__use:hover {
  background: var(--cl-accent-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 var(--gnm-dur) var(--gnm-ease), color var(--gnm-dur) var(--gnm-ease);
}

.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-accent, #4083b0);
}

.gnm-ranks {
  width: min(420px, calc(100vw - 40px));
  padding: 0;
  border: 0;
  border-radius: 14px;
  box-shadow: var(--gnm-shadow-float);
}

.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 var(--gnm-dur) var(--gnm-ease);
}

.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-accent, #4083b0);
}

.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 var(--gnm-dur-slow) var(--gnm-ease);
  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: var(--gnm-shadow-sm);
  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 var(--gnm-dur) var(--gnm-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-accent, #4083b0);
  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 var(--gnm-dur) var(--gnm-ease), box-shadow var(--gnm-dur) var(--gnm-ease);
}

.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 var(--gnm-dur) var(--gnm-ease);
}

/* 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-accent, #4083b0);
}

.gnm-case-back__icon {
  display: inline-block;
  transition: transform var(--gnm-dur) var(--gnm-ease);
}

.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: var(--gnm-shadow-sm);
  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 var(--gnm-dur) var(--gnm-ease), color var(--gnm-dur) var(--gnm-ease), border-color var(--gnm-dur) var(--gnm-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 blue accent 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-accent, #4083b0);
}

.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-accent, #4083b0),
    0 0 0 var(--cl-steel, #4083b0),
    0 0 0 var(--cl-accent, #4083b0),
    0 0 0 var(--cl-steel-light, #7fb1d4),
    0 0 0 var(--cl-accent, #4083b0),
    0 0 0 var(--cl-steel, #4083b0),
    0 0 0 var(--cl-accent, #4083b0),
    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-accent, #4083b0),
      8px -4px 0 1px var(--cl-steel, #4083b0),
      9px 4px 0 1px var(--cl-accent, #4083b0),
      5px 9px 0 1px var(--cl-steel-light, #7fb1d4),
      -1px 10px 0 1px var(--cl-accent, #4083b0),
      -8px 6px 0 1px var(--cl-steel, #4083b0),
      -10px -2px 0 1px var(--cl-accent, #4083b0),
      -5px -8px 0 1px var(--cl-steel-light, #7fb1d4);
  }
  100% {
    opacity: 0;
    box-shadow:
      0 -17px 0 -2px var(--cl-accent, #4083b0),
      13px -11px 0 -2px var(--cl-steel, #4083b0),
      17px 3px 0 -2px var(--cl-accent, #4083b0),
      11px 13px 0 -2px var(--cl-steel-light, #7fb1d4),
      -1px 17px 0 -2px var(--cl-accent, #4083b0),
      -13px 11px 0 -2px var(--cl-steel, #4083b0),
      -17px -3px 0 -2px var(--cl-accent, #4083b0),
      -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, at the heart's wattage ----
   The heart gets its lift from three layers stacked on one press: the glyph
   pops, a disc thins into a ring, eight sparks leave the centre. The other three
   used to carry the first layer alone, which is why they read as polite next to
   it. They now carry three each, on the same easing and the same timings.

   What they do NOT share is the shape of the burst. Firing radial sparks from
   all four would cost the heart its status and turn a set of four gestures into
   four servings of confetti. So each one bursts in its own grammar, and the
   grammar is still the verb: the bookmark lands on a shelf and throws debris
   upward, the bubble breathes in and lets three dots out, the share mark leaves
   a wake and a trail behind it as it goes.

   Red stays the heart's alone here too - these three burst in steel. Same
   energy, different signature, and the one control that means "this helped"
   remains the only one that lights up in blue accent.

   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>. */

.gnm-case-burst {
  position: relative;
  display: inline-flex;
}

/* Two spare layers per control. Both start invisible and neither is ever in the
   flow, so a burst cannot move the row it fires in. */
.gnm-case-burst::before,
.gnm-case-burst::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  margin: -2px 0 0 -2px;
  opacity: 0;
  pointer-events: none;
}

/* ---- Saved: it lands on a shelf ---- */

/* Weight first: the glyph falls from higher, squashes on contact, rebounds. */
.gnm-case-actions__btn[data-gnm-action="save"][aria-pressed="true"]:focus .gnm-case-actions__icon {
  animation: gnm-save-tuck .55s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes gnm-save-tuck {
  0% { transform: translateY(-11px) scale(.92, 1.1); }
  42% { transform: translateY(1px) scale(1.14, .82); }
  64% { transform: translateY(-3px) scale(.97, 1.06); }
  100% { transform: translateY(0) scale(1, 1); }
}

/* The shelf itself, flashing out from under the glyph on contact. */
.gnm-case-actions__btn[data-gnm-action="save"] .gnm-case-burst::before {
  top: auto;
  bottom: -3px;
  margin: 0 0 0 -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--cl-steel-light, #7fb1d4);
}

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

@keyframes gnm-save-shelf {
  0% { opacity: 0; transform: scaleX(1); }
  28% { opacity: .95; transform: scaleX(6.5); }
  100% { opacity: 0; transform: scaleX(8.5); }
}

/* Debris thrown by the impact - upward and sideways only. It has just hit
   something solid from above, so nothing flies down. */
.gnm-case-actions__btn[data-gnm-action="save"] .gnm-case-burst::after {
  border-radius: 50%;
}

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

@keyframes gnm-save-debris {
  0% {
    opacity: 1;
    box-shadow:
      -6px 2px 0 0 var(--cl-steel, #4083b0),
      -3px -2px 0 0 var(--cl-steel-light, #7fb1d4),
      0 -4px 0 0 var(--cl-steel-ink, #33698f),
      3px -2px 0 0 var(--cl-steel-light, #7fb1d4),
      6px 2px 0 0 var(--cl-steel, #4083b0);
  }
  100% {
    opacity: 0;
    box-shadow:
      -14px -4px 0 -2px var(--cl-steel, #4083b0),
      -8px -11px 0 -2px var(--cl-steel-light, #7fb1d4),
      0 -15px 0 -2px var(--cl-steel-ink, #33698f),
      8px -11px 0 -2px var(--cl-steel-light, #7fb1d4),
      14px -4px 0 -2px var(--cl-steel, #4083b0);
  }
}

/* ---- Replies: it breathes in, then speaks ---- */

.gnm-case-actions a.gnm-case-actions__btn:hover .gnm-case-actions__icon {
  animation: gnm-replies-lean .55s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes gnm-replies-lean {
  0% { transform: rotate(0) translateY(0) scale(1); }
  34% { transform: rotate(-14deg) translateY(-3px) scale(1.16); }
  62% { transform: rotate(5deg) translateY(0) scale(.97); }
  100% { transform: rotate(0) translateY(0) scale(1); }
}

/* The breath: a soft wash swelling behind the bubble. Not a ring - the ring is
   the heart's, and two rings in one bar would be one idea used twice. */
.gnm-case-actions a.gnm-case-actions__btn .gnm-case-burst::before {
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border-radius: 50%;
  background: var(--cl-steel-light, #7fb1d4);
}

.gnm-case-actions a.gnm-case-actions__btn:hover .gnm-case-burst::before {
  animation: gnm-replies-breath .5s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes gnm-replies-breath {
  0% { opacity: 0; transform: scale(.4); }
  35% { opacity: .35; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.35); }
}

/* Three dots leaving the bubble in sequence. box-shadow interpolates all its
   shadows on one timeline, so the stagger is written in the spread: a dot held
   at -2px on a 4px box is a dot that has not appeared yet. */
.gnm-case-actions a.gnm-case-actions__btn .gnm-case-burst::after {
  border-radius: 50%;
}

.gnm-case-actions a.gnm-case-actions__btn:hover .gnm-case-burst::after {
  animation: gnm-replies-say .68s cubic-bezier(.16, 1, .3, 1) .1s both;
}

@keyframes gnm-replies-say {
  0% {
    opacity: 1;
    box-shadow:
      4px -6px 0 -2px var(--cl-steel-ink, #33698f),
      8px -9px 0 -2px var(--cl-steel, #4083b0),
      12px -12px 0 -2px var(--cl-steel-light, #7fb1d4);
  }
  26% {
    opacity: 1;
    box-shadow:
      5px -7px 0 0 var(--cl-steel-ink, #33698f),
      8px -9px 0 -2px var(--cl-steel, #4083b0),
      12px -12px 0 -2px var(--cl-steel-light, #7fb1d4);
  }
  48% {
    opacity: 1;
    box-shadow:
      6px -8px 0 -1px var(--cl-steel-ink, #33698f),
      10px -11px 0 0 var(--cl-steel, #4083b0),
      12px -12px 0 -2px var(--cl-steel-light, #7fb1d4);
  }
  70% {
    opacity: 1;
    box-shadow:
      7px -10px 0 -2px var(--cl-steel-ink, #33698f),
      12px -13px 0 -1px var(--cl-steel, #4083b0),
      16px -16px 0 0 var(--cl-steel-light, #7fb1d4);
  }
  100% {
    opacity: 0;
    box-shadow:
      8px -12px 0 -2px var(--cl-steel-ink, #33698f),
      14px -16px 0 -2px var(--cl-steel, #4083b0),
      21px -21px 0 -2px var(--cl-steel-light, #7fb1d4);
  }
}

/* ---- Share: it leaves, and leaves something behind ---- */

.gnm-case-share[open] > summary .gnm-case-actions__icon {
  animation: gnm-share-send .55s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes gnm-share-send {
  0% { transform: translate(0, 0) scale(1); }
  38% { transform: translate(5px, -7px) scale(1.22); }
  64% { transform: translate(-1px, 2px) scale(.96); }
  100% { transform: translate(0, 0) scale(1); }
}

/* The wake: a streak stretching along the diagonal the mark just took. */
.gnm-case-share > summary .gnm-case-burst::before {
  width: 3px;
  height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 3px;
  background: var(--cl-steel-light, #7fb1d4);
}

.gnm-case-share[open] > summary .gnm-case-burst::before {
  animation: gnm-share-wake .5s cubic-bezier(.16, 1, .3, 1) .1s both;
}

@keyframes gnm-share-wake {
  0% { opacity: 0; transform: rotate(-45deg) scaleX(1); }
  32% { opacity: .9; transform: rotate(-45deg) scaleX(7) translateX(-1px); }
  100% { opacity: 0; transform: rotate(-45deg) scaleX(9.5) translateX(-4px); }
}

/* The trail: sparks falling back down the diagonal as the mark climbs it. */
.gnm-case-share > summary .gnm-case-burst::after {
  border-radius: 50%;
}

.gnm-case-share[open] > summary .gnm-case-burst::after {
  animation: gnm-share-trail .68s cubic-bezier(.16, 1, .3, 1) .14s both;
}

@keyframes gnm-share-trail {
  0% {
    opacity: 1;
    box-shadow:
      -2px 2px 0 0 var(--cl-steel, #4083b0),
      -5px 5px 0 0 var(--cl-steel-light, #7fb1d4),
      -8px 8px 0 0 var(--cl-steel-ink, #33698f),
      -7px 0 0 0 var(--cl-steel-light, #7fb1d4),
      0 7px 0 0 var(--cl-steel-light, #7fb1d4);
  }
  100% {
    opacity: 0;
    box-shadow:
      -10px 10px 0 -2px var(--cl-steel, #4083b0),
      -14px 14px 0 -2px var(--cl-steel-light, #7fb1d4),
      -19px 19px 0 -2px var(--cl-steel-ink, #33698f),
      -17px -1px 0 -2px var(--cl-steel-light, #7fb1d4),
      -1px 17px 0 -2px var(--cl-steel-light, #7fb1d4);
  }
}

/* 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: var(--gnm-shadow-float);
}

.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-accent, #4083b0);
  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;
}

/* Posting a reply redirects to #comment-{id}: the browser jumps there
   instantly by default, which on a short case (little content below the
   newest reply) reads as being dropped at the very bottom of the page.
   Smooth scrolling doesn't change where it lands, but turns the jump into
   a deliberate motion instead of a jarring teleport. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

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

.gnm-thread {
  margin-top: 22px;
  background: var(--gnm-surface, #fff);
  border: 1px solid var(--cc-panel-border);
  border-radius: 12px;
  box-shadow: var(--gnm-shadow-sm);
  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);
}

/* Posting a reply lands on #comment-{id} - without this, a reply that has
   room to scroll to the top of the viewport ends up tucked behind the
   sticky admin bar + site header (~105px) instead of just below it. */
.gnm-thread__item {
  scroll-margin-top: 130px;
}

/* 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-accent, #4083b0);
  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-accent, #4083b0);
  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-accent, #4083b0);
}

.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,
  .gnm-case-burst::before,
  .gnm-case-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 var(--gnm-dur) var(--gnm-ease), background-color var(--gnm-dur) var(--gnm-ease);
}

.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 var(--gnm-dur) var(--gnm-ease);
}

.gnm-compose__thumb-remove:hover {
  background: var(--cl-accent, #4083b0);
}

.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-accent, #4083b0);
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--gnm-dur) var(--gnm-ease), transform var(--gnm-dur) var(--gnm-ease);
}

.gnm-compose__submit:hover {
  background: var(--cl-accent-deep, #33698f);
  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: var(--gnm-shadow-float);
}

.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: var(--gnm-shadow-float);
}

.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 var(--gnm-dur-fast) var(--gnm-ease), color var(--gnm-dur-fast) var(--gnm-ease);
}

.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 input zones ----------
   With the boxes gone, the zones themselves say they accept typing: a
   steel-tinted wash on every writing area. Focus flips the zone to pure
   white with a steel ring, so the only blinking caret on the page is the
   native one at the insertion point - three fake prompt carets read as
   three fields all claiming focus (client feedback, 13/08). */

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

.gnm-compose__title,
.gnm-compose__specialty,
.gnm-compose__question,
.gnm-compose__editor {
  background: #f2f6fa;
  border-radius: 10px;
  transition: background-color var(--gnm-dur) var(--gnm-ease), box-shadow var(--gnm-dur) var(--gnm-ease);
}

.gnm-compose__title { padding: 10px 14px; }
.gnm-compose__specialty { padding: 7px 12px; }
.gnm-compose__question { padding: 12px 14px; }
.gnm-compose__editor { padding: 14px 16px; }

.gnm-compose__title:hover,
.gnm-compose__specialty:hover,
.gnm-compose__question:hover,
.gnm-compose__editor:hover {
  background: #ecf1f7;
}

@media (prefers-reduced-motion: reduce) {
  .gnm-compose__title,
  .gnm-compose__specialty,
  .gnm-compose__question,
  .gnm-compose__editor { transition: none; }
}


/* 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 ----------
   The zone itself answers focus: pure white with a steel ring. One
   signal, strong enough for keyboard users. TinyMCE keeps its
   .is-focused class - focus inside its iframe never sets :focus-within
   on the parent document. */

.gnm-compose__title:focus,
.gnm-compose__question:focus,
.gnm-compose__specialty:focus {
  background: #fff;
  box-shadow: 0 0 0 2px rgba(64, 131, 176, .28);
  outline: none;
}

.gnm-compose__editor.is-focused,
.gnm-compose__editor:focus-within {
  background: #fff;
  box-shadow: 0 0 0 2px rgba(64, 131, 176, .28);
}

/* ============================================================
   Login modal (partials/login-modal.php, per-site option
   gnm_login_modal_enabled). Visual panel LEFT: first hero
   slide artwork under a navy scrim (--gnm-login-visual is
   printed by gnm_print_login_modal; falls back to plain navy).
   Form RIGHT on white. DOM order is untouched (form first for
   focus order): the swap is pure CSS via order.
   ============================================================ */
#signInModal .modal-dialog { max-width: 900px; }
#signInModal .modal-content {
  position: relative;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--gnm-shadow-float);
}
/* Grid gutters die through their var: a padding reset on [class*="col-"]
   would out-specify .left-side / .modal-sidebar and strip their padding. */
#signInModal .modal-content > .row { --bs-gutter-x: 0; margin: 0; }
#signInModal .modal-sidebar { order: -1; }

/* ---- form column ---- */
#signInModal .left-side { position: relative; padding: 38px 40px 40px; }
#signInModal .modal-header { display: block; border: 0; padding: 0; }
#signInModal .btn-close { position: absolute; top: 16px; right: 16px; z-index: 5; }
#signInModal .modal-intro img {
  max-height: 48px;
  width: auto;
  margin-bottom: 16px;
}
#signInModal .modal-intro p {
  margin: 0 0 22px;
  font-size: .94rem;
  line-height: 1.55;
  color: #5b6577;
}
#signInModal .form-signin .form-group { position: relative; margin-bottom: 14px; }
#signInModal .form-signin .form-control {
  padding: 11px 44px 11px 15px;
  border-radius: 10px;
  border-color: var(--cc-panel-border, #cfd8e6);
  font-size: .95rem;
}
#signInModal .form-signin .form-control:focus {
  border-color: var(--cl-steel, #4083b0);
  box-shadow: 0 0 0 .2rem rgba(64, 131, 176, .18);
}
#signInModal .form-signin input[type="checkbox"] { accent-color: var(--cl-steel, #4083b0); }
#signInModal .form-signin label { font-size: .88rem; color: var(--cc-ink, #1c2333); }
#signInModal .toggle-password1 {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  border: 0;
  background: none;
  padding: 4px 6px;
  color: #9aa1af;
}
#signInModal .toggle-password1:hover { color: var(--cl-steel-ink, #33698f); }
#signInModal #wp-submit {
  margin-top: 8px;
  background: var(--cl-accent, #4083b0);
  border: 0;
  border-radius: 999px;
  padding: 12px 24px;
  font-weight: 600;
  letter-spacing: .01em;
  transition: background-color var(--gnm-dur) var(--gnm-ease), transform var(--gnm-dur) var(--gnm-ease);
}
#signInModal #wp-submit:hover { background: #c30e0a; transform: translateY(-1px); }
#signInModal .forgot-link {
  display: inline-block;
  margin-top: 16px;
  font-size: .85rem;
  color: var(--cl-steel-ink, #33698f);
  text-decoration: none;
}
#signInModal .forgot-link:hover { text-decoration: underline; }

/* Inline sign-in error, announced and bumped on each failed attempt. */
#signInModal .gnm-modal-alert {
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid rgba(64, 131, 176, .35);
  border-radius: 10px;
  background: #fdeeee;
  font-size: .88rem;
  line-height: 1.45;
  color: #8f1b13;
}
#signInModal .gnm-modal-alert.is-bumping { animation: gnm-modal-alert-bump .3s ease-out; }
@keyframes gnm-modal-alert-bump {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
  #signInModal .gnm-modal-alert.is-bumping { animation: none; }
}

/* ---- visual panel (left) ---- */
#signInModal .modal-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 36px 32px 32px;
  background-image:
    linear-gradient(200deg, rgba(10, 24, 48, .30) 0%, rgba(10, 24, 48, .72) 55%, rgba(10, 24, 48, .93) 100%),
    var(--gnm-login-visual, linear-gradient(var(--cl-space, #0a1830), var(--cl-space, #0a1830)));
  background-size: cover;
  background-position: center;
  color: #fff;
}
#signInModal .modal-sidebar-image { display: none; }
#signInModal .modal-sidebar .first-connection {
  margin: 0 0 8px;
  font-size: 1.12rem;
  font-weight: 700;
}
#signInModal .modal-sidebar p {
  font-size: .92rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .88);
}
#signInModal .modal-sidebar .btn-outline-primary {
  align-self: flex-start;
  margin-top: 10px;
  border-radius: 999px;
  padding: 9px 22px;
  color: #fff;
  border-color: rgba(255, 255, 255, .7);
  transition: background-color var(--gnm-dur) var(--gnm-ease), color var(--gnm-dur) var(--gnm-ease);
}
#signInModal .modal-sidebar .btn-outline-primary:hover {
  background: #fff;
  border-color: #fff;
  color: var(--cl-space, #0a1830);
}
#signInModal .modal-sidebar .disclaimer {
  margin: 16px 0 0;
  font-size: .73rem;
  color: rgba(255, 255, 255, .6);
}

/* Stacked: the artwork becomes a lean banner above the form. */
@media (max-width: 767.98px) {
  #signInModal .left-side { padding: 26px 22px 30px; }
  #signInModal .modal-sidebar { min-height: 150px; padding: 20px 22px 22px; }
  #signInModal .modal-sidebar p:not(.first-connection) { display: none; }
  #signInModal .modal-sidebar .disclaimer { display: none; }
  #signInModal .modal-sidebar .btn-outline-primary { margin-top: 2px; padding: 7px 18px; }
}

/* ============================================================
   PEOPLE - the community behind the cases
   Rows share the case index grammar on purpose: same panel, same three-column
   grid, same rules and rhythm. A directory that invented its own layout would
   read as a different product one click away from the case list.
   ============================================================ */

/* The toolbar sits on the second neutral layer, so it reads as controls rather
   than as the first row of the list. */
.gnm-people__controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 18px;
  padding: 12px 20px;
  background: var(--cc-row-hover);
  border-bottom: 1px solid var(--cc-rule);
}

/* The line that explains an absence, between the controls and the first row.
   Quieter than both, and without a tint of its own: the controls above stay the
   only band in the head of the panel. Mirrors .gnm-people__truncated, which
   closes the list the way this one opens it. */
.gnm-people__rule {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  padding: 10px 20px;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--cc-ink-mute);
  border-bottom: 1px solid var(--cc-rule);
}

.gnm-people__rule-icon {
  flex: none;
  font-size: .85em;
}

.gnm-people__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.gnm-people__search-icon {
  position: absolute;
  left: 11px;
  font-size: .85rem;
  line-height: 1;
  color: var(--cc-ink-mute);
  pointer-events: none;
}

.gnm-people__search-input {
  width: 220px;
  max-width: 100%;
  padding: 7px 12px 7px 32px;
  font-size: .85rem;
  color: var(--cc-ink-body);
  background: var(--gnm-surface, #fff);
  border: 1px solid var(--cc-panel-border);
  border-radius: 8px;
  transition: border-color var(--gnm-dur) var(--gnm-ease), box-shadow var(--gnm-dur) var(--gnm-ease);
}

.gnm-people__search-input::placeholder {
  color: var(--cc-ink-mute);
}

.gnm-people__search-input:focus {
  outline: 0;
  border-color: var(--cl-steel, #4083b0);
  box-shadow: 0 0 0 3px var(--cc-wash);
}

.gnm-people__search-submit {
  flex: 0 0 auto;
  padding: 7px 14px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--cl-steel-ink, #33698f);
  background: var(--gnm-surface, #fff);
  border: 1px solid var(--cc-panel-border);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color var(--gnm-dur) var(--gnm-ease), background-color var(--gnm-dur) var(--gnm-ease);
}

.gnm-people__search-submit:hover {
  background: var(--cc-wash);
  border-color: var(--cl-steel, #4083b0);
}

.gnm-people__search-submit:focus-visible {
  outline: 2px solid var(--cl-steel, #4083b0);
  outline-offset: 2px;
}

/* Sort is a row of links, never pills: pills on this surface are the rail's
   specialty chips, and they filter. The active order is marked by weight and a
   rule under the word, so the two controls cannot be confused. */
.gnm-people__sort {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  min-width: 0;
}

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

.gnm-people__sort-link {
  font-size: .8rem;
  font-weight: 600;
  color: var(--cc-ink-soft);
  text-decoration: none;
  padding-bottom: 1px;
  border-bottom: 1px solid transparent;
  transition: color var(--gnm-dur) var(--gnm-ease), border-color var(--gnm-dur) var(--gnm-ease);
}

.gnm-people__sort-link:hover {
  color: var(--cl-steel-ink, #33698f);
  border-bottom-color: var(--cc-panel-border);
}

.gnm-people__sort-link:focus-visible {
  outline: 2px solid var(--cl-steel, #4083b0);
  outline-offset: 3px;
  border-radius: 2px;
}

.gnm-people__sort-link.is-active {
  font-weight: 700;
  color: var(--cl-space, #0a1830);
  border-bottom-color: var(--cl-accent, #4083b0);
}

/* ---------- the member row ---------- */

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

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

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

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

.gnm-people-row__avatar {
  grid-column: 1;
}

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

.gnm-people-row__name {
  margin: 0 0 2px;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--cl-space, #0a1830);
}

.gnm-people-row__link {
  color: inherit;
  text-decoration: none;
}

/* The name carries the whole row: it is the only link inside it. */
.gnm-people-row__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

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

.gnm-people-row__link:focus-visible {
  outline: 2px solid var(--cl-steel, #4083b0);
  outline-offset: 3px;
  border-radius: 3px;
}

.gnm-people-row__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0;
}

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

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

/* Quieter than the specialty: what someone practises identifies them, their
   rank only describes what they have given so far. */
.gnm-people-row__rank {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cc-ink-mute);
}

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

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

.gnm-people-row__stat.is-empty {
  font-weight: 400;
  font-style: italic;
  color: var(--cc-ink-mute);
}

/* Being kept as helpful is the one contribution a colleague chose to single
   out, so it is the one number that carries the accent. */
.gnm-people-row__stat--helpful {
  color: var(--cl-accent, #4083b0);
}

.gnm-people-row__icon {
  font-size: .8rem;
  line-height: 1;
}

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

.gnm-people__truncated {
  margin: 0;
  padding: 12px 20px;
  font-size: .78rem;
  color: var(--cc-ink-mute);
  border-top: 1px solid var(--cc-rule);
}

@media (max-width: 767.98px) {
  .gnm-people__controls {
    align-items: stretch;
    flex-direction: column;
  }

  .gnm-people__search-input {
    width: 100%;
  }
}

@media (max-width: 575.98px) {
  .gnm-people-row {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    padding: 13px 16px;
  }

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

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

  .gnm-people-row,
  .gnm-people__search-input,
  .gnm-people__search-submit,
  .gnm-people__sort-link {
    transition: none;
  }
}

/* ============================================================
   RANK MARKS - one shape per step of the ladder
   Circle, diamond, pentagon, hexagon, octagon: the family gains a side at each
   rank, so the order is readable from the silhouette before the word is read.
   The mark appears everywhere a rank is named - the directory row, the rail,
   the ranks dialog - because a system that only holds on one screen is not one.
   ============================================================ */

/* The mark is a box of exactly one em: a block glyph on a line-height of 1 has
   no leading to guess at, so the animation that overlays it lands on the shape
   and not next to it. */
.gnm-rank-mark {
  position: relative;
  display: inline-block;
  vertical-align: -.06em;
  line-height: 1;
  letter-spacing: 0;
}

.gnm-rank-icon {
  display: block;
  line-height: 1;
  color: var(--cl-steel-ink, #33698f);
}

/* The base rank is the only quiet one: nothing has been earned yet, and an
   outline in mute says that without writing it. */
.gnm-rank-icon.bi-circle {
  color: var(--cc-ink-mute);
}

/* The animation borrows the glyph's box for the length of one play, absolutely
   so the row cannot reflow around it. A mark that shifted its own line on hover
   would cost more than it gives. */
.gnm-rank-mark__player {
  position: absolute;
  inset: 0;
  display: block;
  pointer-events: none;
}

.gnm-rank-mark__player svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* visibility, not display: the glyph keeps its box, so nothing moves when the
   animation takes over and nothing moves when it hands back. */
.gnm-rank-mark.is-playing .gnm-rank-icon {
  visibility: hidden;
}

.gnm-people-row__rank-icon {
  margin-right: 5px;
  font-size: .8rem;
}

.gnm-standing__rank-icon {
  margin-right: 6px;
  font-size: .85rem;
}

/* Fixed width in the dialog only: five marks stacked in a list have to line up
   on their left edge, which a proportional glyph box will not do. */
.gnm-ranks__tier-icon {
  width: 1.15em;
  margin-right: 6px;
  font-size: .85rem;
  text-align: center;
}

/* ============================================================
   MESSAGES - writing to a colleague, directly
   Mail, not chat: no presence, no typing indicator, no live update. The
   directory row gets a small ghost control that appears once the right is
   earned; the thread itself takes the whole panel, because reading a
   conversation and browsing a roster are two different tasks.
   ============================================================ */

.gnm-people-row__message {
  margin: 6px 0 0;
}

/* Positioned above the name link's stretched ::after (position:absolute,
   inset:0 on .gnm-people-row): without this the whole row's link would sit on
   top and the button could not be clicked. */
.gnm-people-row__message-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  font-size: .74rem;
  font-weight: 700;
  color: var(--cl-steel-ink, #33698f);
  background: var(--gnm-surface, #fff);
  border: 1px solid var(--cc-panel-border);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color var(--gnm-dur) var(--gnm-ease), background-color var(--gnm-dur) var(--gnm-ease), color var(--gnm-dur) var(--gnm-ease);
}

.gnm-people-row__message-btn:hover,
.gnm-people-row__message-btn:focus-visible {
  color: var(--cc-on-dark);
  background: var(--cl-steel, #4083b0);
  border-color: var(--cl-steel, #4083b0);
}

.gnm-people-row__message-btn:focus-visible {
  outline: 2px solid var(--cl-steel, #4083b0);
  outline-offset: 2px;
}

/* Waiting for a reply is the one state on this surface worth the accent: it is
   the same blue accent the helpful count carries, because both say "something here
   wants your attention". */
.gnm-people-row__message-btn.has-unread {
  color: var(--cl-accent, #4083b0);
  border-color: var(--cl-accent, #4083b0);
}

.gnm-people-row__message-btn.has-unread:hover,
.gnm-people-row__message-btn.has-unread:focus-visible {
  color: var(--cc-on-dark);
  background: var(--cl-accent, #4083b0);
  border-color: var(--cl-accent, #4083b0);
}

/* Explicit colour pairs, not currentColor: a badge whose background reads its
   own text colour is a badge whose text is the same colour as its background. */
.gnm-people-row__message-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--cl-steel-ink, #33698f);
  color: var(--cc-on-dark);
  font-size: .68rem;
  font-weight: 700;
}

.gnm-people-row__message-btn.has-unread .gnm-people-row__message-badge {
  background: var(--cc-on-dark);
  color: var(--cl-accent, #4083b0);
}

@media (max-width: 575.98px) {
  .gnm-people-row__message {
    margin-top: 8px;
  }
}

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

/* Compound selector, not bare .gnm-thread__head: the case-reply walker
   (class-gnm-clinical-case-comment-walker.php) uses that same class alone
   on each comment's own author/badge/time row, and a bare override here
   would stack that row vertically instead of inline. Only this panel's own
   header carries gnm-cases-panel__head too. */
.gnm-cases-panel__head.gnm-thread__head {
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
}

.gnm-thread__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: .8rem;
  font-weight: 700;
  color: var(--cc-ink-mute);
  text-decoration: none;
  transition: color var(--gnm-dur) var(--gnm-ease);
}

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

.gnm-thread__back-icon {
  font-size: .78rem;
  transition: transform var(--gnm-dur) var(--gnm-ease);
}

.gnm-thread__back:hover .gnm-thread__back-icon {
  transform: translateX(-3px);
}

.gnm-thread__identity {
  display: flex;
  align-items: center;
  gap: 12px;
}

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

.gnm-thread__rank-icon {
  margin-left: 6px;
  font-size: .78rem;
}

.gnm-thread__specialty {
  margin: 1px 0 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--cl-steel-ink, #33698f);
}

.gnm-thread__body {
  max-height: 56vh;
  overflow-y: auto;
  padding: 20px;
}

.gnm-thread__body .gnm-thread__empty {
  padding: 24px;
}

/* Scoped for the same reason as .gnm-thread__msg above: a bare override
   would add a flex gap on top of the case-reply list's own margin-based
   spacing between replies (further up this file), doubling it. */
.gnm-thread__body .gnm-thread__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Letters, not bubbles-as-app-chrome: a flat card with a colour edge reads as
   correspondence rather than as texting, which is the register this needs.
   Scoped under .gnm-thread__body (unique to a message thread - the case-reply
   walker never wraps its list in one): a bare .gnm-thread__msg here would
   also restyle every case reply, which reuses that same class name for an
   unrelated avatar+text grid. display:block resets that grid, which this
   bubble's two stacked <p> children do not want. */
.gnm-thread__body .gnm-thread__msg {
  display: block;
  max-width: 78%;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--cc-row-hover);
}

.gnm-thread__body .gnm-thread__msg.is-mine {
  align-self: flex-end;
  background: var(--cc-wash);
}

/* A one-liner ("thx", "hello") gains nothing from a whole second row just
   for its timestamp - the two sit on the same baseline instead. Anything
   with a line break keeps the stacked layout below, since a wrapped
   paragraph has nowhere flat to butt a timestamp against. */
.gnm-thread__body .gnm-thread__msg.is-short {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.gnm-thread__msg-body {
  margin: 0;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--cc-ink-body);
  white-space: pre-line;
  overflow-wrap: break-word;
}

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

.gnm-thread__msg.is-short .gnm-thread__msg-time {
  margin-top: 0;
  white-space: nowrap;
}

.gnm-thread__form {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--cc-rule);
  background: var(--cc-row-hover);
}

.gnm-thread__textarea {
  flex: 1 1 auto;
  min-width: 0;
  padding: 10px 14px;
  font: inherit;
  font-size: .88rem;
  line-height: 1.5;
  color: var(--cc-ink-body);
  background: var(--gnm-surface, #fff);
  border: 1px solid var(--cc-panel-border);
  border-radius: 10px;
  resize: vertical;
}

.gnm-thread__textarea:focus {
  outline: 0;
  border-color: var(--cl-steel, #4083b0);
  box-shadow: 0 0 0 3px var(--cc-wash);
}

.gnm-thread__send {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 11px 20px;
  border-radius: 999px;
  background: var(--cl-accent, #4083b0);
  color: var(--cc-on-dark);
  font-size: .86rem;
  font-weight: 700;
  border: 0;
  cursor: pointer;
  transition: background-color var(--gnm-dur) var(--gnm-ease), transform var(--gnm-dur) var(--gnm-ease);
}

.gnm-thread__send-icon {
  font-size: .82rem;
}

.gnm-thread__send:hover,
.gnm-thread__send:focus-visible {
  background: var(--cl-accent-deep, #33698f);
  transform: translateY(-1px);
}

.gnm-thread__send:focus-visible {
  outline: 2px solid var(--cl-accent, #4083b0);
  outline-offset: 2px;
}

.gnm-thread__send:disabled {
  cursor: default;
  opacity: .65;
  transform: none;
}

/* Sending: the plane hints motion instead of the button just going dead. */
.gnm-thread__send.is-sending .gnm-thread__send-icon {
  animation: gnm-thread-send-nudge .9s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .gnm-thread__send.is-sending .gnm-thread__send-icon {
    animation: none;
  }
}

@keyframes gnm-thread-send-nudge {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(3px, -2px); }
}

@media (max-width: 575.98px) {
  .gnm-thread__body .gnm-thread__msg {
    max-width: 90%;
  }

  .gnm-thread__form {
    flex-direction: column;
    align-items: stretch;
  }

  .gnm-thread__send {
    align-self: flex-end;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gnm-people-row__message-btn,
  .gnm-thread__back-icon,
  .gnm-thread__send {
    transition: none;
  }

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

/* ---------- the thread, as a popup ----------
   Deliberately not carrying the .gnm-thread class on .modal-content: that
   class also styles the full-page panel's own background/border/padding
   (further up this file), which would double up against Bootstrap's own
   modal chrome. Only the injected descendants (.gnm-thread__identity,
   .gnm-thread__body, .gnm-thread__list...) are reused here. */
.gnm-message-modal .modal-dialog {
  max-width: 560px;
}

.gnm-message-modal .modal-header {
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.gnm-message-modal .gnm-thread__body {
  padding: 18px 20px;
}

.gnm-message-modal .gnm-thread__empty {
  padding: 24px 0;
}

/* Shaped like the bubbles it is standing in for, not a spinner: the eye
   already knows what is about to land. */
.gnm-thread__skeleton {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gnm-thread__skeleton-bubble {
  display: block;
  height: 32px;
  width: 58%;
  border-radius: 12px;
  background: var(--cc-row-hover);
}

.gnm-thread__skeleton-bubble.is-mine {
  align-self: flex-end;
  width: 44%;
  background: var(--cc-wash);
}

@media (prefers-reduced-motion: no-preference) {
  .gnm-thread__skeleton-bubble {
    animation: gnm-thread-skeleton-pulse 1.4s ease-in-out infinite;
  }

  .gnm-thread__skeleton-bubble.is-mine {
    animation-delay: .2s;
  }
}

@keyframes gnm-thread-skeleton-pulse {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}


/* ---- Browse hub (14/08 redesign): the directory stops being a menu of eleven
   look-alike cards. It reuses the anatomy validated on the webinars page - an
   eyebrow naming the area, one editorial line, the live figure, one way in -
   and extends it to Highlights and Webinars, which now show what is inside
   them rather than describing it.

   The four panels do NOT share a padding. The pair that was validated keeps
   26/28, the reading rail is tighter, the session panel breathes more, so the
   gutters between blocks are never the same twice and the eye lands on the
   heavy one first (the device the Addictoscope home uses for its news column).

   .gnm-browse__section-label is shared with the Explore block of the webinars
   plugin: keep the name. ---- */

.gnm-browse__section-label {
  margin: 36px 0 14px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--cc-ink-mute, #666f7d);
}

.gnm-browse-hub {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  align-items: stretch;
  margin-bottom: 8px;
}

.gnm-browse-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
  border-radius: 14px;
  text-decoration: none;
  transition:
    box-shadow var(--gnm-dur) var(--gnm-ease), border-color var(--gnm-dur) var(--gnm-ease);
}

.gnm-browse-panel--cases {
  grid-column: span 7;
  padding: 26px 28px;
  background: var(--cl-space, #0a1830);
  color: var(--cl-hero-text, #eef3fb);
}

.gnm-browse-panel--people {
  grid-column: span 5;
  padding: 26px 28px;
  background: #fff;
  border: 1px solid var(--gnm-border, #e6e8ee);
  color: var(--cc-ink, #1c2333);
}

.gnm-browse-panel--reading {
  --cc-rail-bleed: 24px;
  grid-column: span 5;
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--gnm-border, #e6e8ee);
  color: var(--cc-ink, #1c2333);
}

.gnm-browse-panel--webinar {
  grid-column: span 7;
  padding: 32px 34px;
  background: var(--cc-app-bg, #eff3f8);
  border: 1px solid transparent;
  color: var(--cc-ink, #1c2333);
}

/* The panel used to jump 2 px on hover. In a grid of four, moving one tile
   drags the eye off whatever the reader was reading; the elevation alone says
   raised, without displacing anything. */
a.gnm-browse-panel:hover,
a.gnm-browse-panel:focus-visible {
  box-shadow: var(--gnm-shadow-md);
}

a.gnm-browse-panel--people:hover,
a.gnm-browse-panel--people:focus-visible,
a.gnm-browse-panel--webinar:hover,
a.gnm-browse-panel--webinar:focus-visible {
  border-color: var(--cl-steel, #4083b0);
}

.gnm-browse-panel__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--cl-steel-ink, #33698f);
}

.gnm-browse-panel--cases .gnm-browse-panel__eyebrow {
  color: var(--cl-steel-light, #a8cbe8);
}

.gnm-browse-panel__title {
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.28;
  color: var(--cl-space, #0a1830);
}

.gnm-browse-panel--cases .gnm-browse-panel__title {
  font-size: 1.28rem;
  color: #fff;
}

.gnm-browse-panel--webinar .gnm-browse-panel__title {
  font-size: 1.18rem;
}

.gnm-browse-panel__desc {
  max-width: 46ch;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--cc-ink-mute, #666f7d);
}

.gnm-browse-panel--cases .gnm-browse-panel__desc {
  color: rgba(255, 255, 255, .8);
}

.gnm-browse-panel__faces {
  display: flex;
  align-items: center;
  margin-top: 2px;
}

.gnm-browse-panel__faces > * {
  margin-left: -10px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff;
}

.gnm-browse-panel__faces > :first-child {
  margin-left: 0;
}

.gnm-browse-panel__faces--small > * {
  margin-left: -7px;
  box-shadow: 0 0 0 2px var(--cc-app-bg, #eff3f8);
}

.gnm-browse-panel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 16px;
}

.gnm-browse-panel__metric {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--cc-ink-mute, #666f7d);
}

.gnm-browse-panel--cases .gnm-browse-panel__metric {
  color: rgba(255, 255, 255, .72);
}

.gnm-browse-panel__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--cl-steel-ink, #33698f);
  text-decoration: none;
}

.gnm-browse-panel--cases .gnm-browse-panel__go {
  color: #fff;
}

.gnm-browse-panel__go i {
  transition: transform var(--gnm-dur) var(--gnm-ease);
}

.gnm-browse-panel:hover .gnm-browse-panel__go i,
.gnm-browse-panel:focus-within .gnm-browse-panel__go i {
  transform: translateX(4px);
}

/* Reading: covers small enough to identify a paper, not to sell it. */
.gnm-browse-reading {
  list-style: none;
  /* The first row now carries a full step of padding instead of 2px, so the
     margin gives the difference back: the text sits where it always sat. */
  margin: -3px 0 0;
  padding: 0;
}

.gnm-browse-read {
  display: flex;
  gap: 12px;
  padding-block: 11px;
  border-top: 1px solid var(--cc-rule, #e9edf2);
}

.gnm-browse-read:first-child {
  border-top: none;
}

.gnm-browse-read__cover {
  flex: 0 0 42px;
  width: 42px;
  height: 54px;
  overflow: hidden;
  border-radius: 5px;
  background: var(--cc-app-bg, #eff3f8);
}

.gnm-browse-read__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gnm-browse-read__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.gnm-browse-read__title {
  font-size: .84rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--cc-ink, #1c2333);
  text-decoration: none;
}

.gnm-browse-read__meta {
  font-size: .72rem;
  color: var(--cc-ink-mute, #666f7d);
}

/* Session: the date carries the block, the way it carries the agenda rows. */
.gnm-browse-session {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 6px;
}

.gnm-browse-date {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 62px;
  padding: 9px 0 8px;
  border-radius: 12px;
  background: var(--cl-space, #0a1830);
  color: #fff;
}

.gnm-browse-date--live {
  background: #a4000e;
  background: oklch(0.452 0.185 27);
}

.gnm-browse-date__day {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
}

.gnm-browse-date__month {
  margin-top: 2px;
  font-size: .64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--cl-steel-light, #a8cbe8);
}

.gnm-browse-date__live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.gnm-browse-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  animation: gnm-browse-pulse 2.4s ease-in-out infinite;
}

@keyframes gnm-browse-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

.gnm-browse-session__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

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

.gnm-browse-session__meta {
  font-size: .78rem;
  color: var(--cc-ink-mute, #666f7d);
}

.gnm-browse-session__signups {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 6px;
  font-size: .76rem;
  color: var(--cc-ink-mute, #666f7d);
}

/* Planned areas: text on rules. A card here would promise a destination that
   does not exist yet, which is exactly the trap the first version fell into. */
.gnm-browse-planned {
  padding-bottom: 58px;
}

.gnm-browse-planned__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 52px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.gnm-browse-planned__item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--cc-rule, #e9edf2);
}

.gnm-browse-planned__name {
  flex: 0 0 auto;
  font-size: .86rem;
  font-weight: 700;
  color: var(--cc-ink-body, #2e3644);
}

.gnm-browse-planned__desc {
  font-size: .79rem;
  line-height: 1.45;
  color: var(--cc-ink-mute, #666f7d);
}

@media (max-width: 991.98px) {
  .gnm-browse-panel--cases,
  .gnm-browse-panel--people,
  .gnm-browse-panel--reading,
  .gnm-browse-panel--webinar {
    grid-column: span 12;
  }

  .gnm-browse-panel--webinar {
    padding: 26px 24px;
  }
}

@media (max-width: 575.98px) {
  .gnm-browse-panel {
    padding: 22px;
  }

  .gnm-browse-planned__list {
    grid-template-columns: 1fr;
  }

  .gnm-browse-planned__item {
    flex-direction: column;
    gap: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gnm-browse-panel,
  .gnm-browse-panel__go i {
    transition: none;
  }

  a.gnm-browse-panel:hover {
    transform: none;
  }

  .gnm-browse-live-dot {
    animation: none;
  }
}


/* ---- Highlights module (14/08): reusable rail, latest articles. Shared by
   gnm_render_highlights_module() across Browse, Clinical Cases, and later
   the homepage - one source of markup/CSS instead of a copy per page. ---- */

.gnm-highlights-module {
  /* --cc-rail-step: air above and below a row. --cc-rail-bleed: the container
     padding the row is pulled back out by, so the hover tint reaches the inner
     edge of the card. The bottom padding is the step paid back to the last row. */
  --cc-rail-step: 14px;
  --cc-rail-bleed: 18px;
  /* --cc-rail-foot: the card pays its bottom padding to the last row instead
     of keeping it. A band that stops short of the rounded edge reads as a
     floating rectangle; carried to the bottom, overflow clips it to the
     radius and the row closes the card the way the first one opens it. */
  --cc-rail-foot: 18px;
  padding: 18px 18px 0;
  background: #fff;
  border: 1px solid var(--gnm-border, #e6e8ee);
  border-radius: 12px;
  overflow: hidden;
}

.gnm-highlights-module__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cl-space, #0a1830);
  padding-bottom: 12px;
  border-bottom: 2px solid var(--cl-steel, #4083b0);
}

.gnm-highlights-module__icon {
  color: var(--cl-steel, #4083b0);
  font-size: .82rem;
}

.gnm-highlights-module__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* The former gap moved into the rows: a gap is dead space no background can
     reach, and the hovered row has to own the air around its own text. */
  gap: 0;
}

.gnm-highlights-module__item {
  display: flow-root;
  padding-block: var(--cc-rail-step, 14px);
  border-bottom: 1px solid var(--cc-rule, #e9edf2);
}

/* The journal cover, at the size where a reader recognises it and no larger:
   these are 110 to 200px source images, blown up they turn to mush.
   Floated rather than set in its own column: a rail is narrow, and a title
   long enough to pass the cover reads better wrapping under it than squeezed
   into what is left of the line. flow-root on the item contains the float. */
.gnm-highlights-module__cover {
  float: left;
  width: 40px;
  height: 52px;
  margin: 2px 12px 2px 0;
  overflow: hidden;
  border-radius: 5px;
  background: var(--cc-app-bg, #eff3f8);
}

.gnm-highlights-module__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gnm-highlights-module__body {
  min-width: 0;
}

.gnm-highlights-module__link {
  overflow-wrap: anywhere;
}

.gnm-highlights-module__item:last-child {
  padding-bottom: var(--cc-rail-foot, 18px);
  border-bottom: none;
}

.gnm-highlights-module__link {
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
  font-size: .88rem;
  line-height: 1.35;
  color: var(--cl-steel-ink, #33698f);
  text-decoration: none;
}

.gnm-highlights-module__excerpt {
  margin: 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--cc-ink-mute, #666f7d);
}

/* ---- Highlights beside the news feed (home): the rail keeps its own gutters.

   Inside its column the module is pushed further in than the article cards are
   inside theirs - more air on the left, a tinted ground, no border - so the two
   halves of the row do not share a rhythm. The uneven gap is the point: it
   marks the rail as a different kind of zone rather than a fifth card in the
   grid. Same device as the news column on the Addictoscope home. ---- */

.gnm-home-latest-articles__aside .gnm-highlights-module {
  --cc-rail-step: 18px;
  --cc-rail-bleed: 22px;
  --cc-rail-foot: 22px;
  padding: 24px 22px 0;
  background: var(--cc-app-bg, #eff3f8);
  border-color: transparent;
  border-radius: 18px;
}

.gnm-home-latest-articles__aside .gnm-highlights-module__title {
  padding-bottom: 14px;
}

.gnm-home-latest-articles__aside .gnm-highlights-module__item {
  border-bottom-color: rgba(10, 24, 48, .1);
}

.gnm-home-latest-articles__aside .gnm-highlights-module__excerpt {
  color: var(--cc-ink-soft, #545e6f);
}

@media (min-width: 992px) {
  .gnm-home-latest-articles__aside {
    padding-left: 34px;
  }

  .gnm-home-latest-articles__aside .gnm-highlights-module {
    --cc-rail-bleed: 30px;
    --cc-rail-foot: 28px;
    padding: 32px 30px 0;
  }
}


/* ---- Hover: the surface answers, not the four words (15/08/2026) ---------

   No title underlines itself any more, at rest or on hover. A title shifts
   colour and nothing else; what answers the cursor is the surface carrying it
   - tint, border, elevation - so the pointer no longer has to land on the
   words themselves.

   On the short rails (Highlights, related cases, the Browse reading list) the
   title's ::after covers its whole row, so the row is genuinely clickable and
   not merely lit up. The index cards are deliberately left out of that: their
   text is a bibliographic reference and it has to stay selectable.

   Every duration and curve below comes from base.css. --------------------- */

.gnm-highlights-module__link,
.gnm-browse-read__title,
.gnm-browse-panel__title,
.gnm-home-article-card__title .gnm-title-link,
.gnm-article-card__title-link,
.gnm-home-article-ranking__title-link,
.gnm-case-related__link,
.gnm-cases-row__link {
  text-decoration: none;
  transition: color var(--gnm-dur-fast) var(--gnm-ease);
}

/* The colour lands whether the cursor is on the words or anywhere on their
   surface - which is the entire point of making the row the target. */
.gnm-highlights-module__link:hover,
.gnm-highlights-module__link:focus-visible,
.gnm-highlights-module__item:hover .gnm-highlights-module__link,
.gnm-browse-read__title:hover,
.gnm-browse-read__title:focus-visible,
.gnm-browse-read:hover .gnm-browse-read__title,
.gnm-case-related__link:hover,
.gnm-case-related__link:focus-visible,
.gnm-case-related__item:hover .gnm-case-related__link,
.gnm-home-article-ranking__title-link:hover,
.gnm-home-article-ranking__title-link:focus-visible,
.gnm-article-card__title-link:hover,
.gnm-article-card__title-link:focus-visible,
.gnm-article-card.card:hover .gnm-article-card__title-link,
.gnm-home-article-card__title .gnm-title-link:hover,
.gnm-home-article-card__title .gnm-title-link:focus-visible,
.gnm-home-article-card:hover .gnm-home-article-card__title .gnm-title-link,
.gnm-cases-row__link:hover,
.gnm-cases-row__link:focus-visible,
.gnm-cases-row:hover .gnm-cases-row__link {
  color: var(--cl-steel-ink, #33698f);
}

/* ---- The short rails become rows ----

   Exactly what a Clinical Cases row does, and for the same reason: the site
   already had one grammar for a hovered line, --cc-row-hover, and a rail is a
   line like any other. The row takes the tint edge to edge of the block that
   carries it, and the rules between rows are left alone.

   The first version of this pass used a rounded pill overflowing the item by
   7px, which crossed those rules and pulled the list apart on hover. Pulling
   the row out by the container padding and paying it straight back gives the
   full-width band without moving a single glyph. */

.gnm-highlights-module__item,
.gnm-case-related__item,
.gnm-browse-read {
  position: relative;
  margin-inline: calc(var(--cc-rail-bleed, 10px) * -1);
  padding-inline: var(--cc-rail-bleed, 10px);
  transition: background-color var(--gnm-dur) var(--gnm-ease);
}

.gnm-highlights-module__item:hover,
.gnm-highlights-module__item:focus-within,
.gnm-case-related__item:hover,
.gnm-case-related__item:focus-within,
.gnm-browse-read:hover,
.gnm-browse-read:focus-within {
  background: var(--cc-row-hover, #f8fafd);
}

/* One target per row. The cover of a Highlights item is already a link to the
   same article, so covering it costs nothing. A case still under review has
   no link at all, and therefore no target - which is correct.

   The one-column index card joins them here rather than in its template: the
   two-column card and the home cover card have carried .stretched-link since
   they were written, and a reader should not meet two different rules for the
   same object depending on which page shows it. */
.gnm-highlights-module__link::after,
.gnm-case-related__link::after,
.gnm-browse-read__title::after,
.gnm-cases-row__link::after,
.gnm-article-card--standard-one-col .gnm-article-card__title-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ---- The focus ring on night surfaces ----

   Steel blue on space navy is a ring nobody sees. These blocks redefine the
   token for their own subtree, and anything focusable inside them - including
   the block itself when it is the link - picks the light value up. */
.gnm-browse-panel--cases,
.gnm-home-hero--standard,
.gnm-home-editorial-highlight__card,
#login-ribbon.gnm-login-ribbon,
.back-to-top {
  --gnm-focus-color: var(--cl-star, #edf2ff);
}

a.gnm-browse-panel:hover .gnm-browse-panel__title,
a.gnm-browse-panel:focus-visible .gnm-browse-panel__title {
  color: var(--cl-steel-ink, #33698f);
}

a.gnm-browse-panel--cases:hover .gnm-browse-panel__title,
a.gnm-browse-panel--cases:focus-visible .gnm-browse-panel__title {
  color: var(--cl-steel-light, #a8cbe8);
}


/* ---- The rail of a single case (14/08): its neighbours, then the reading
   rail the whole surface carries.

   Two blocks, two registers: this one sits straight on the app background with
   ruled rows, the highlights module keeps its white card. Two identical boxes
   stacked would read as a column of widgets; the difference gives the rail an
   order. Same type scale for both headings so they stay a family. ---- */

.gnm-case-related {
  --cc-rail-step: 12px;
  /* No card here, so the row bleeds by a measured amount rather than by a
     container padding it does not have. */
  --cc-rail-bleed: 10px;
  padding: 0 2px;
}

.gnm-case-related__title {
  margin: 0;
  padding-bottom: 10px;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--cl-space, #0a1830);
  border-bottom: 1px solid var(--cc-panel-border, #dfe5ee);
}

.gnm-case-related__list {
  list-style: none;
  /* The last row now pays itself the step the gap used to provide; the negative
     margin gives it back so the block keeps the height it always had. */
  margin: 0 0 calc(var(--cc-rail-step, 12px) * -1);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.gnm-case-related__item {
  padding-block: var(--cc-rail-step, 12px);
  border-bottom: 1px solid var(--cc-rule, #e9edf2);
}

.gnm-case-related__item:last-child {
  border-bottom: none;
}

.gnm-case-related__link {
  display: block;
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--cl-space, #0a1830);
  text-decoration: none;
  overflow-wrap: anywhere;
}

.gnm-case-related__meta {
  margin: 4px 0 0;
  font-size: .76rem;
  line-height: 1.4;
  color: var(--cc-ink-mute, #666f7d);
}

.gnm-case-related__sep {
  margin: 0 5px;
}

/* CardioConnect: separators between footer policy links. */
.gnm-site-footer-shell__policies a + a {
  position: relative;
}
.gnm-site-footer-shell__policies a + a::before {
  content: "|";
  opacity: 0.4;
  position: absolute;
  left: -12px;
  color: var(--bs-secondary-color, #6c757d);
  font-weight: 400;
  pointer-events: none;
}