/* ── DESIGN TOKENS (placeholder branding, single-home #2 of 2) ───────────────
   All site-level custom styling reads from the custom properties below; the
   theme-level tokens (palette/primary/accent) live in the `theme.palette` block
   of mkdocs.yml. To restyle the whole site, edit ONLY these two spots — the
   maintainer picks the final look over screenshots at the aesthetics phase.
   Placeholder accent tracks the mkdocs `teal` primary. */
:root {
  --dp-accent: var(--md-primary-fg-color);
  --dp-accent-soft: color-mix(in srgb, var(--md-primary-fg-color) 13%, var(--md-default-bg-color));
  --dp-surface: color-mix(in srgb, var(--md-code-bg-color) 72%, var(--md-default-bg-color));
  --dp-surface-raised: var(--md-default-bg-color);
  --dp-border: var(--md-default-fg-color--lightest);
  --dp-text-muted: var(--md-default-fg-color--light);
  --dp-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--md-default-fg-color) 9%, transparent);
  --dp-hero-radius: 1rem;
  --dp-card-radius: 0.75rem;
  --dp-tile-radius: 0.6rem;
  --dp-tile-num: var(--md-primary-fg-color);
  --dp-tile-gap: 0.9rem;
  --dp-card-gap: 0.9rem;
  --dp-motion: 160ms ease;
}

/* Landing hero: compact enough to keep the derived benchmark counts above the
   fold, while separating the product promise from the documentation chrome. */
.dp-hero {
  position: relative;
  overflow: hidden;
  margin: 0.5rem 0 1.2rem;
  padding: clamp(1.6rem, 4vw, 3.2rem);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-hero-radius);
  background:
    radial-gradient(circle at 92% 8%, var(--dp-accent-soft), transparent 38%),
    var(--dp-surface);
}
.dp-hero::after {
  content: "";
  position: absolute;
  right: -3rem;
  bottom: -4rem;
  width: 12rem;
  height: 12rem;
  border: 1.25rem solid var(--dp-accent-soft);
  border-radius: 50%;
  pointer-events: none;
}
.dp-hero > * {
  position: relative;
  z-index: 1;
}
.dp-hero h1 {
  max-width: 16ch;
  margin: 0.35rem 0 0.75rem;
  font-size: clamp(2rem, 5vw, 3.35rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
}
.dp-hero p {
  max-width: 44rem;
  margin: 0;
  color: var(--dp-text-muted);
  font-size: 1.05rem;
}
.dp-hero-kicker,
.dp-card-eyebrow {
  color: var(--dp-accent);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.dp-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.25rem;
}

/* Landing pathways: three equal, fully-clickable cards with a clear keyboard
   focus state. Content stays authored in index.md; this is presentation only. */
.dp-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--dp-card-gap);
  margin: 0 0 2.2rem;
}
.dp-card {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-height: 8.5rem;
  padding: 1rem 1.1rem;
  color: var(--md-default-fg-color);
  text-decoration: none;
  background: var(--dp-surface-raised);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-card-radius);
  box-shadow: var(--dp-shadow);
  transition: border-color var(--dp-motion), transform var(--dp-motion);
}
.dp-card:hover,
.dp-card:focus-visible {
  color: var(--md-default-fg-color);
  border-color: var(--dp-accent);
  transform: translateY(-2px);
}
.dp-card:focus-visible {
  outline: 2px solid var(--dp-accent);
  outline-offset: 2px;
}
.dp-card strong {
  font-size: 1rem;
}
.dp-card > span:last-child {
  color: var(--dp-text-muted);
  font-size: 0.82rem;
  line-height: 1.5;
}

/* Landing stat tiles: a responsive grid of derived-count cards (studies /
   instances / tasks / algorithms). The NUMBERS are injected at build time by
   assemble.py; this only styles them (no JS, no authored counts). */
.dp-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--dp-tile-gap);
  margin: 1.4rem 0 2rem;
}
.dp-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.1rem 0.6rem;
  background: var(--dp-surface);
  border: 1px solid var(--dp-border);
  border-radius: var(--dp-tile-radius);
}
.dp-stat-num {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--dp-tile-num);
}
.dp-stat-label {
  margin-top: 0.3rem;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dp-text-muted);
}

@media screen and (max-width: 44rem) {
  .dp-card-grid {
    grid-template-columns: 1fr;
  }
  .dp-card {
    min-height: 0;
  }
  .dp-hero::after {
    opacity: 0.55;
  }
}

/* ── existing behaviour ──────────────────────────────────────────────────────
   Deep-linking into a backing-dataset collapsible (the claims table links to
   #<dataset-id>) should reveal its contents even while the <details> is closed,
   so the jump lands on visible features/response/bounds. Author rules override
   the user-agent `details:not([open]) > :not(summary) { display: none }`. */
details.dataset-collapsible:target {
  border-left: 3px solid var(--md-accent-fg-color, #4051b5);
  padding-left: 0.6rem;
}
details.dataset-collapsible:target > *:not(summary) {
  display: block;
}