/*
 * GNM Clinical Cases frontend components.
 * Loaded by the plugin only on its archive, case, submission, and people surfaces.
 * Design values inherit from base.css tokens; Site CSS may override them.
 */

/* ==================================================================
   Clinical Cases — minimal social surface (03/08/2026)
   The shared site background and header stay; the plugin owns only its
   feature components and short content column. Neutrals derive from the
   shared design tokens so Site CSS remains authoritative.
   Selectors: .gnm-cases-* (index), .gnm-case* (one case),
   .gnm-thread* (the thread), .gnm-avatar (initial pills).
   ================================================================== */

.gnm-cases-surface {
  --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(--gnm-primary-strong, #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 the shared site 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(var(--gnm-primary-rgb, 64, 131, 176), .09);     /* steel wash: hover, chips, badges */
  --cc-wash-strong: rgba(var(--gnm-primary-rgb, 64, 131, 176), .16);
  --cc-sticky-top: 89px;                  /* 73px sticky header + breathing room */
  --cc-measure: 860px;                    /* the one column: list, case and thread */
}

.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(--gnm-primary-strong, #0a1830);
}

.gnm-cases-head__eyebrow::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gnm-primary, #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(--gnm-primary-strong, #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(--gnm-primary, #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(--gnm-primary-strong, #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(--gnm-secondary, #33698f);
}

/* active = white pill lifted off the site 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(--gnm-primary-strong, #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(--gnm-primary, #4083b0);
}

.gnm-cases-nav__count {
  margin-left: auto;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--cc-wash-strong);
  color: var(--gnm-secondary, #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(--gnm-secondary, #33698f);
}

.gnm-cases-chip.is-active {
  background: var(--gnm-primary-strong, #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(--gnm-secondary, #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(--gnm-primary, #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(--gnm-secondary, #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(--gnm-primary, #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(--gnm-primary-strong, #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(--gnm-secondary, #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(--gnm-secondary, #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(--gnm-secondary, #33698f);
  font: inherit;
  font-size: .74rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
}

.gnm-portrait__link:hover {
  color: var(--gnm-primary, #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(--gnm-primary-strong, #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(--gnm-primary, #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(--gnm-secondary, #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(--gnm-primary-strong, #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(--gnm-primary-strong, #0a1830);
}

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

.gnm-cases-row__specialty {
  font-size: .8rem;
  font-weight: 600;
  color: var(--gnm-secondary, #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(--gnm-primary-strong, #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(--gnm-secondary, #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(--gnm-secondary, #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(--gnm-primary-strong, #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(--gnm-secondary, #33698f);
  text-decoration: none;
}

.gnm-cases-empty__link:hover {
  color: var(--gnm-primary, #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(--gnm-secondary, #33698f);
}

.gnm-cases-pagination .page-numbers.current {
  background: var(--gnm-primary-strong, #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(--gnm-secondary, #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(--gnm-secondary, #33698f);
  text-decoration: none;
}

.gnm-case-back__link:hover {
  color: var(--gnm-primary, #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(--gnm-primary-strong, #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(--gnm-secondary, #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(--gnm-primary-strong, #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(--gnm-secondary, #33698f);
}

.gnm-case-actions__btn[aria-pressed="true"] {
  background: var(--cc-wash-strong);
  border-color: transparent;
  color: var(--gnm-secondary, #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(--gnm-primary, #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(--gnm-primary, #4083b0),
    0 0 0 var(--gnm-primary, #4083b0),
    0 0 0 var(--gnm-primary, #4083b0),
    0 0 0 var(--cl-steel-light, #7fb1d4),
    0 0 0 var(--gnm-primary, #4083b0),
    0 0 0 var(--gnm-primary, #4083b0),
    0 0 0 var(--gnm-primary, #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(--gnm-primary, #4083b0),
      8px -4px 0 1px var(--gnm-primary, #4083b0),
      9px 4px 0 1px var(--gnm-primary, #4083b0),
      5px 9px 0 1px var(--cl-steel-light, #7fb1d4),
      -1px 10px 0 1px var(--gnm-primary, #4083b0),
      -8px 6px 0 1px var(--gnm-primary, #4083b0),
      -10px -2px 0 1px var(--gnm-primary, #4083b0),
      -5px -8px 0 1px var(--cl-steel-light, #7fb1d4);
  }
  100% {
    opacity: 0;
    box-shadow:
      0 -17px 0 -2px var(--gnm-primary, #4083b0),
      13px -11px 0 -2px var(--gnm-primary, #4083b0),
      17px 3px 0 -2px var(--gnm-primary, #4083b0),
      11px 13px 0 -2px var(--cl-steel-light, #7fb1d4),
      -1px 17px 0 -2px var(--gnm-primary, #4083b0),
      -13px 11px 0 -2px var(--gnm-primary, #4083b0),
      -17px -3px 0 -2px var(--gnm-primary, #4083b0),
      -11px -13px 0 -2px var(--cl-steel-light, #7fb1d4);
  }
}

.gnm-case-actions__btn[aria-pressed="true"]:hover {
  background: var(--gnm-primary, #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(--gnm-primary, #4083b0),
      -3px -2px 0 0 var(--cl-steel-light, #7fb1d4),
      0 -4px 0 0 var(--gnm-secondary, #33698f),
      3px -2px 0 0 var(--cl-steel-light, #7fb1d4),
      6px 2px 0 0 var(--gnm-primary, #4083b0);
  }
  100% {
    opacity: 0;
    box-shadow:
      -14px -4px 0 -2px var(--gnm-primary, #4083b0),
      -8px -11px 0 -2px var(--cl-steel-light, #7fb1d4),
      0 -15px 0 -2px var(--gnm-secondary, #33698f),
      8px -11px 0 -2px var(--cl-steel-light, #7fb1d4),
      14px -4px 0 -2px var(--gnm-primary, #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(--gnm-secondary, #33698f),
      8px -9px 0 -2px var(--gnm-primary, #4083b0),
      12px -12px 0 -2px var(--cl-steel-light, #7fb1d4);
  }
  26% {
    opacity: 1;
    box-shadow:
      5px -7px 0 0 var(--gnm-secondary, #33698f),
      8px -9px 0 -2px var(--gnm-primary, #4083b0),
      12px -12px 0 -2px var(--cl-steel-light, #7fb1d4);
  }
  48% {
    opacity: 1;
    box-shadow:
      6px -8px 0 -1px var(--gnm-secondary, #33698f),
      10px -11px 0 0 var(--gnm-primary, #4083b0),
      12px -12px 0 -2px var(--cl-steel-light, #7fb1d4);
  }
  70% {
    opacity: 1;
    box-shadow:
      7px -10px 0 -2px var(--gnm-secondary, #33698f),
      12px -13px 0 -1px var(--gnm-primary, #4083b0),
      16px -16px 0 0 var(--cl-steel-light, #7fb1d4);
  }
  100% {
    opacity: 0;
    box-shadow:
      8px -12px 0 -2px var(--gnm-secondary, #33698f),
      14px -16px 0 -2px var(--gnm-primary, #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(--gnm-primary, #4083b0),
      -5px 5px 0 0 var(--cl-steel-light, #7fb1d4),
      -8px 8px 0 0 var(--gnm-secondary, #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(--gnm-primary, #4083b0),
      -14px 14px 0 -2px var(--cl-steel-light, #7fb1d4),
      -19px 19px 0 -2px var(--gnm-secondary, #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(--gnm-secondary, #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(--gnm-secondary, #33698f);
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

.gnm-case-share__link:hover {
  color: var(--gnm-primary, #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(--gnm-secondary, #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(--gnm-primary-strong, #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(--gnm-primary-strong, #0a1830);
}

.gnm-thread__badge {
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--cc-wash-strong);
  color: var(--gnm-secondary, #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(--gnm-primary, #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(--gnm-secondary, #33698f);
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}

.gnm-thread-mark__btn:hover {
  color: var(--gnm-primary, #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(--gnm-secondary, #33698f);
  text-decoration: none;
}

.gnm-thread__actions a:hover {
  color: var(--gnm-primary, #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(--gnm-primary-strong, #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(--gnm-primary-strong, #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(--gnm-primary, #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(--gnm-primary, #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(--gnm-primary, #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(--gnm-secondary, #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(--gnm-primary, #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(--gnm-primary-strong, #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(--gnm-secondary, #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(--gnm-primary, #4083b0);
  background: rgba(var(--gnm-primary-rgb, 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(--gnm-secondary, #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(--gnm-primary, #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(--gnm-primary, #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(--gnm-primary, #4083b0);
  color: var(--gnm-secondary, #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(--gnm-secondary, #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(--gnm-primary, #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(--gnm-primary, #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(--gnm-primary-strong, #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(var(--gnm-primary-rgb, 64, 131, 176), .38);
  background: rgba(var(--gnm-primary-rgb, 64, 131, 176), .09);
  color: var(--gnm-secondary, #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(--gnm-primary, #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 site 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(--gnm-primary-strong, #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(--gnm-primary-strong, #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(--gnm-accent, #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(--gnm-primary, #4083b0);
  outline-offset: 1px;
}

.gnm-bubble__btn:focus-visible {
  outline: 2px solid var(--gnm-accent, #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(var(--gnm-primary-rgb, 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(var(--gnm-primary-rgb, 64, 131, 176), .28);
}

/* ============================================================
   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(--gnm-primary, #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(--gnm-secondary, #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(--gnm-primary, #4083b0);
}

.gnm-people__search-submit:focus-visible {
  outline: 2px solid var(--gnm-primary, #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(--gnm-secondary, #33698f);
  border-bottom-color: var(--cc-panel-border);
}

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

.gnm-people__sort-link.is-active {
  font-weight: 700;
  color: var(--gnm-primary-strong, #0a1830);
  border-bottom-color: var(--gnm-primary, #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(--gnm-primary-strong, #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(--gnm-secondary, #33698f);
}

.gnm-people-row__link:focus-visible {
  outline: 2px solid var(--gnm-primary, #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(--gnm-secondary, #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(--gnm-secondary, #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(--gnm-primary, #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(--gnm-secondary, #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(--gnm-secondary, #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(--gnm-primary, #4083b0);
  border-color: var(--gnm-primary, #4083b0);
}

.gnm-people-row__message-btn:focus-visible {
  outline: 2px solid var(--gnm-primary, #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(--gnm-primary, #4083b0);
  border-color: var(--gnm-primary, #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(--gnm-primary, #4083b0);
  border-color: var(--gnm-primary, #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(--gnm-secondary, #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(--gnm-primary, #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(--gnm-secondary, #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(--gnm-primary-strong, #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(--gnm-secondary, #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(--gnm-primary, #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(--gnm-primary, #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(--gnm-primary-strong, #33698f);
  transform: translateY(-1px);
}

.gnm-thread__send:focus-visible {
  outline: 2px solid var(--gnm-primary, #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; }
}


/* ---- 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 site 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(--gnm-primary-strong, #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(--gnm-primary-strong, #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;
}