/* OncoloHealth effects layer: shared tokens and primitives.
   Colours come from the site's own system: ink blue for business, peach for research,
   both together on the home page, restrained green for lists of models and datasets. */

.fx-canvas { display: block; width: 100%; height: 100%; }

/* Numeric readouts (SEQ labels, table figures) */
.fx-mono { font-family: var(--fx-mono); font-feature-settings: 'tnum' 1; letter-spacing: .02em; }

/* White-light bloom on solid blocks: add .fx-bloom to any block with a solid fill. */
.fx-bloom { position: relative; isolation: isolate; overflow: hidden; }
.fx-bloom::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: 70%; aspect-ratio: 1; left: var(--bloom-x, 78%); top: var(--bloom-y, -30%);
  transform: translate(-50%, 0);
  background: radial-gradient(closest-side, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06) 55%, transparent 72%);
  filter: blur(6px);
}

@media (prefers-reduced-motion: reduce) {
  .fx *, .fx *::before, .fx *::after { scroll-behavior: auto !important; }
}

/* ---------- Layout fixes found by the overlap audit ---------- */

/* Nav labels never wrap onto two lines. */
.site-header nav a { white-space: nowrap; }

/* With the added pages the full nav needs about 1,050px; below 1200px use the menu button
   that the phone layout already has (same markup and app.js toggle). */
@media (min-width: 901px) and (max-width: 1200px) {
  .site-header .menu { display: block; border: 0; background: none; font-weight: 700; font-size: 12px; cursor: pointer; }
  .site-header .menu span { margin-left: 8px; }
  .site-header nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    padding: 25px 56px; flex-direction: column; align-items: stretch; gap: 18px;
    background: #f9f3ee; border-bottom: 1px solid var(--fx-line);
    box-shadow: 0 24px 40px -28px rgba(17, 30, 50, .35);
  }
  body[data-page="commercial"] .site-header nav { background: #121f33; }
  .site-header nav.open { display: flex; }
  .site-header nav .nav-cta { align-self: flex-start; }
}

/* Privacy hero: the policy card sits on the right at 42% width, so keep the text column clear of it. */
@media (min-width: 901px) {
  .privacy-hero > .eyebrow,
  .privacy-hero > h1,
  .privacy-hero > .page-hero-bottom { max-width: 52%; }
}

/* Home gallery tabs: between tablet and wide desktop the four tabs are too narrow for a thumbnail
   and a label side by side ("Mammography" spilled), so stack them as the phone layout does. */
@media (min-width: 901px) and (max-width: 1240px) {
  .gallery-tabs button { padding: 8px 6px; flex-direction: column; align-items: start; gap: 5px; }
  .gallery-tabs button img { width: 100%; height: 42px; }
}

/* Catalog rows (tablet): the 85px status column was narrower than "Mapped resource", which
   then ran under the "+" marker. Let that column size to its pill. */
@media (min-width: 521px) and (max-width: 900px) {
  .catalog-record-v2 summary { grid-template-columns: 25px minmax(0, 1fr) auto 15px; }
  .catalog-record-v2 .record-status { white-space: nowrap; }
}