/* Customer illustrations paired with responsive native page content. */
.home-discover-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.home-discover {
  --discover-accent: #bd3d63;
  --discover-accent-soft: #fbecf1;
  --discover-blue: #537fb3;
  --discover-blue-soft: #eaf2fc;
  --discover-art-paper: #fff;
  --discover-shadow: rgb(31 60 86 / 5%);
  padding: 50px 0 12px;
  background: var(--bioatlas-soft);
  color: var(--bioatlas-ink);
}
html[data-theme="dark"] .home-discover {
  --discover-accent: #eb8ba7;
  --discover-accent-soft: #3b2c3d;
  --discover-blue: #94bfea;
  --discover-blue-soft: #263e52;
  --discover-art-paper: #263d50;
  --discover-shadow: rgb(0 0 0 / 12%);
}
.home-discover-inner { width: calc(100% - 2 * var(--home-content-gutter)); margin-inline: auto; }
.home-discover-heading { display: flex; align-items: center; gap: 24px; margin-bottom: 22px; }
.home-discover-heading h2 { scroll-margin-top: 18px; margin: 0; color: var(--bioatlas-ink); font-size: 1.6rem; font-weight: 750; letter-spacing: -.025em; }
html:has(.home-hub) { scroll-behavior: smooth; }
.home-discover-heading > span { height: 1px; flex: 1; background: var(--bioatlas-line); }
.home-discover-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 16px; }
.discover-module {
  display: flex;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  padding: 20px 18px 18px;
  border: 1px solid var(--bioatlas-line);
  border-radius: 12px;
  background: var(--bioatlas-surface);
  box-shadow: 0 6px 22px var(--discover-shadow);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.discover-module-heading { display: flex; align-items: center; gap: 12px; }
.discover-module-heading h3 { margin: 0; color: var(--bioatlas-ink); font-size: 1.12rem; line-height: 1.3; font-weight: 730; letter-spacing: -.02em; }
.discover-module-icon { display: grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; border-radius: 50%; background: var(--discover-blue-soft); color: var(--discover-blue); }
.is-datasets .discover-module-icon, .is-about .discover-module-icon { background: var(--discover-accent-soft); color: var(--discover-accent); }
.discover-module-icon svg, .discover-preview-fallback, .discover-empty svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.discover-module-description { margin: 12px 0 14px; color: var(--bioatlas-muted); font-size: .86rem; line-height: 1.55; }
.discover-action {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  min-height: 42px;
  flex: 0 0 auto;
  margin-top: auto;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--discover-accent) 68%, transparent);
  border-radius: 7px;
  color: var(--discover-accent);
  background: transparent;
  font-size: .86rem;
  font-weight: 650;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  transition: background-color .16s ease, box-shadow .16s ease;
}
.discover-action.is-solid { background: #bc4165; border-color: #bc4165; color: #fff; }
html[data-theme="dark"] .discover-action.is-solid { background: #b83e62; border-color: #b83e62; }
.discover-action.is-disabled { border-color: var(--bioatlas-line); color: var(--bioatlas-muted); background: var(--bioatlas-soft); }
.discover-action > span { font-size: 1.1rem; line-height: .8; }
.discover-datasets { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.discover-dataset { display: grid; grid-template-columns: 62px minmax(0, 1fr); border: 1px solid var(--bioatlas-line); border-radius: 8px; background: var(--bioatlas-surface); color: var(--bioatlas-ink); text-decoration: none; overflow: hidden; }
.discover-dataset-preview { display: grid; position: relative; min-height: 90px; place-items: center; background: var(--bioatlas-soft); color: var(--discover-blue); }
.discover-dataset-preview canvas { position: absolute; width: 100%; height: 100%; inset: 0; }
.discover-preview-caption { display: none; }
.discover-dataset-body { min-width: 0; padding: 10px; }
.discover-dataset-body h4 { display: flex; align-items: start; justify-content: space-between; gap: 6px; margin: 0 0 8px; color: var(--bioatlas-ink); font-size: .9rem; font-weight: 700; line-height: 1.3; }
.discover-dataset-body h4 > span { color: var(--discover-blue); font-size: 1rem; }
.discover-dataset-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.discover-dataset-tags span { padding: 3px 6px; border-radius: 4px; background: var(--bioatlas-soft); color: var(--bioatlas-muted); font-size: .68rem; line-height: 1.35; overflow-wrap: anywhere; }
.discover-dataset-tissue { margin: 7px 0 0; color: var(--bioatlas-muted); font-size: .75rem; line-height: 1.4; }
.discover-dataset-counts { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; color: var(--bioatlas-muted); font-size: .73rem; }
.discover-datasets.is-single .discover-dataset { display: block; }
.discover-datasets.is-single .discover-dataset-preview { height: 138px; }
.discover-datasets.is-single .discover-dataset-body { padding: 14px; }
.discover-datasets.is-single .discover-preview-caption { display: block; position: absolute; top: 9px; left: 10px; padding: 2px 6px; border-radius: 4px; background: var(--bioatlas-surface); color: var(--bioatlas-muted); font-family: ui-monospace, monospace; font-size: .66rem; }
.discover-empty { display: grid; place-content: center; justify-items: center; gap: 14px; min-height: 220px; border: 1px dashed var(--bioatlas-line); border-radius: 8px; color: var(--bioatlas-muted); }
.discover-empty svg { width: 38px; height: 38px; color: var(--discover-blue); }
.discover-empty p { margin: 0; font-size: .85rem; }
.discover-markers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 8px; align-content: start; margin-bottom: 18px; }
.discover-marker { display: flex; min-width: 0; align-items: center; flex-direction: column; text-align: center; }
.discover-cell-art { display: block; width: min(100%, 76px); height: 76px; object-fit: contain; border-radius: 8px; background: #fff; }
.discover-marker strong { display: flex; align-items: start; justify-content: center; width: 100%; min-height: 32px; margin: 7px 0 4px; color: var(--bioatlas-ink); font-size: .76rem; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
.discover-genes { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }
.discover-genes span { padding: 2px 4px; border-radius: 4px; background: var(--bioatlas-soft); color: var(--bioatlas-muted); font: .68rem/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
.discover-viewer-figure { display: flex; flex-direction: column; min-width: 0; margin: 0 0 18px; padding: 0; border: 1px solid var(--bioatlas-line); border-radius: 8px; background: #fff; overflow: hidden; }
.discover-viewer-figure figcaption { padding: 9px 12px 0; color: #526b86; font-size: .73rem; font-weight: 650; }
.discover-viewer-art { display: block; width: 100%; height: auto; max-height: 280px; object-fit: contain; }
.discover-viewer-plot { display: grid; grid-template-columns: minmax(0, 1fr) 86px; gap: 8px; align-items: center; }
.discover-umap { position: relative; padding: 0 0 8px 6px; }
.discover-umap > svg { display: block; width: 100%; height: 200px; }
.discover-axis-x { position: absolute; right: 4px; bottom: 0; font-size: .57rem; color: var(--bioatlas-muted); }
.discover-axis-y { position: absolute; top: 43%; left: -11px; transform: rotate(-90deg); font-size: .57rem; color: var(--bioatlas-muted); }
.discover-legend { display: grid; gap: 9px; padding: 0; margin: 0; list-style: none; }
.discover-legend li { display: flex; align-items: center; gap: 5px; color: var(--bioatlas-muted); font-size: .62rem; line-height: 1.3; }
.discover-legend i { width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: #e87699; }
.discover-legend .is-group-2 { background: #669be1; }
.discover-legend .is-group-3 { background: #ac85d7; }
.discover-legend .is-group-4 { background: #78c494; }
.discover-legend .is-group-5 { background: #edae6c; }
.discover-about-figure { display: flex; align-items: flex-start; justify-content: center; min-width: 0; margin: 0 0 18px; padding: 4px; border: 1px solid var(--bioatlas-line); border-radius: 8px; background: #fff; overflow: hidden; }
.discover-about-art { display: block; width: 100%; height: auto; max-height: 260px; object-fit: contain; }
.discover-action:focus-visible, .discover-dataset:focus-visible { outline: 3px solid var(--discover-blue); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .discover-module:hover { transform: translateY(-2px); border-color: var(--discover-blue); box-shadow: 0 9px 24px var(--discover-shadow); }
  .discover-action:hover { color: var(--discover-accent); background: var(--discover-accent-soft); }
  .discover-action.is-solid:hover { background: #aa3557; color: #fff; }
  .discover-dataset:hover { border-color: var(--discover-blue); color: var(--bioatlas-ink); }
}
@media (max-width: 1439px) {
  .home-discover-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .discover-cell-art { width: 84px; height: 84px; }
  .discover-marker strong { min-height: 20px; }
}
@media (min-width: 1440px) and (max-width: 1535px) {
  .home-discover:lang(en) .discover-marker strong { font-size: .68rem; letter-spacing: -.02em; }
}
@media (max-width: 640px) {
  .home-discover { padding-top: 36px; }
  .home-discover-heading { margin-bottom: 16px; }
  .home-discover-heading h2 { font-size: 1.3rem; }
  .home-discover-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .discover-module { min-height: 0; padding: 18px 16px 16px; }
  .discover-markers { gap: 18px 8px; }
  .discover-cell-art { width: 76px; height: 76px; }
  .discover-marker strong { min-height: 30px; }
  .discover-viewer-plot { grid-template-columns: minmax(0, 1fr) 98px; }
  .discover-umap > svg { height: 210px; }
  .discover-legend li { font-size: .7rem; }
  .discover-action { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(.home-hub) { scroll-behavior: auto; }
  .discover-module, .discover-action { transition: none; }
  .discover-module:hover { transform: none; }
}
@media (max-width: 360px) {
  .discover-markers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}