/* GEM - the few extra styles for content that comes from the dashboard's database
   (assets/js/cms-pages.js). Loaded only by experts.html, news.html and
   news-item.html, after the site's own stylesheets. Every rule is prefixed
   cms- and applies only to elements that script creates: it changes nothing
   about the pages as they are built by hand, the header, the menu or the
   footer. Colours are the site's tokens. */

/* ---- Experts: a database card may also carry a title, a country and a biography -- */
.board-card .board-card__name, .board-card .board-card__meta { overflow-wrap: break-word; }
.cms-card { justify-content: flex-start; }
.cms-card__country { font-size: 0.8125rem; letter-spacing: 0.04em; }
/* "Full profile" (2026-11-01): the link to the expert's own page (expert-<slug>.html), last in the
   card; a 44px hit area; --purple on white 12.33:1 (measured, publish-p1.mjs) */
.cms-card__more { margin: 0.35rem 0 0; }
.cms-card__profile { display: inline-flex; align-items: center; min-height: 44px; padding: 0 0.25rem; font-weight: 600; color: var(--purple); text-underline-offset: 3px; }
.cms-card__profile:hover { color: var(--purple-bright); }
.cms-card__profile:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
/* the biography scrolls INSIDE the card (2026-10-17): the box keeps every card in a row the same height
   (the grid stretches the short ones), the paragraph is capped at ~7 lines and scrolls - wheel, trackpad
   and finger - without dragging the page along when it reaches its end. A long one is focusable with a
   GEM-purple ring (set by cms-pages.js once laid out); a soft fade at the foot says there is more, and
   lifts at the end. Nothing else about the card changes. */
.cms-card__bio-box { position: relative; align-self: stretch; margin: 0.5rem 0 0; max-width: none; }
.cms-card__bio {
  margin: 0; max-width: none; max-height: 11.5rem; overflow-y: auto; padding-right: 0.4rem;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-gutter: stable;
  text-align: left; white-space: pre-line; overflow-wrap: break-word;
  font-size: 0.9375rem; line-height: 1.6; color: var(--text-warm);            /* 8.9:1 on white */
}
.cms-card__bio:focus { outline: none; }
.cms-card__bio:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; border-radius: 6px; }
.cms-card__bio-box::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.25rem; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--white) 85%); pointer-events: none; opacity: 0; }
.cms-card__bio-box.is-scrollable::after { opacity: 1; }
.cms-card__bio-box.is-at-end::after { opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .cms-card__bio-box::after { transition: opacity 0.2s ease; } }

/* ---- News list ------------------------------------------------------------------ */
.cms-pre { white-space: pre-line; }
.cms-plain { color: var(--purple); }       /* a headline that is not a link takes the same ink as one that is */

/* ---- One news story (news-item.html): the site's article layout, plus these ------ */
.cms-crumb__link { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.cms-crumb__link:focus-visible { outline: 3px solid var(--purple-bright); outline-offset: 2px; border-radius: 4px; }
.cms-article__place { margin-top: 0.15rem; }
.cms-article__fig img { width: 100%; height: auto; }
.cms-story { overflow-wrap: break-word; }
.cms-story a { color: var(--purple-bright); text-underline-offset: 3px; }      /* 6.4:1 on white */
.cms-story a:focus-visible { outline: 3px solid var(--purple-bright); outline-offset: 2px; border-radius: 4px; }
.cms-article__more { margin: 1.5rem 0 0; }
.cms-article__more .btn { min-height: 44px; }
.cms-state { padding-block: 3rem; }
.cms-state[hidden] { display: none; }
.cms-state__line { margin: 0; max-width: none; font-size: 1.0625rem; color: var(--text-warm); }
.cms-state__action { margin: 1rem 0 0; }
.cms-state__action .btn { min-height: 44px; }