/* ---------------------------------------------------------------------------
   Landing page hero — "you already wrote the schema" headline block.
--------------------------------------------------------------------------- */
.md-typeset .gl-hero {
  text-align: center;
  padding: 2.4rem 1.5rem 1.8rem;
  margin: .2em 0 1.6em;
}

.md-typeset .gl-hero h2 {
  font-size: 2.6rem;
  line-height: 1.15;
  font-weight: 800;
  margin: 0 0 .25em;
  letter-spacing: -.01em;
  background: linear-gradient(100deg, #000 0%, #3f51b5 65%, #7986cb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.md-typeset .gl-hero h3 {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--md-default-fg-color--light);
  margin: 0 0 .8em;
}

.md-typeset .gl-hero p {
  max-width: 42rem;
  margin: 0 auto;
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--md-default-fg-color--light);
}

.md-typeset .gl-hero code {
  background: rgba(63, 81, 181, .1);
}

@media screen and (max-width: 44em) {
  .md-typeset .gl-hero h2 { font-size: 1.9rem; }
  .md-typeset .gl-hero h3 { font-size: 1.1rem; }
}

/* ---------------------------------------------------------------------------
   Ranked "what stops being your problem" list.
   Rank 1 (most painful) reads hottest; color cools toward the accent color
   as severity fades down the list — pain resolving into "just works".
--------------------------------------------------------------------------- */
.md-typeset .gl-pain-list h3 {
  text-align: center;
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--md-default-fg-color--light);
  margin-bottom: 1.1em;
}

.md-typeset .gl-pain-list ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: gl-pain;
  display: grid;
  gap: .7rem;
}

@keyframes gl-pain-in {
  from { opacity: 0; transform: translateY(1.1rem) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes gl-pain-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-.3rem); }
}

.md-typeset .gl-pain-list li {
  counter-increment: gl-pain;
  position: relative;
  list-style: none;
  margin: 0;
  padding: 1rem 1.2rem 1rem 3.6rem;
  border-radius: .6rem;
  border-left: .3rem solid var(--gl-pain-color, #3f51b5);
  background: var(--md-code-bg-color, #f5f5f7);
  box-shadow: 0 .35rem .9rem rgba(0, 0, 0, .1), 0 .1rem .25rem rgba(0, 0, 0, .06);
  opacity: 0;
  transition: transform .2s ease, box-shadow .2s ease;
  animation:
    gl-pain-in .6s cubic-bezier(.16, .84, .44, 1) var(--gl-pain-enter, 0s) forwards,
    gl-pain-float 5s ease-in-out calc(var(--gl-pain-enter, 0s) + .7s + var(--gl-pain-phase, 0s)) infinite;
}

.md-typeset .gl-pain-list li:hover {
  animation-play-state: paused;
  transform: translateY(-.35rem) translateX(.2rem);
  box-shadow: 0 .7rem 1.6rem rgba(0, 0, 0, .16), 0 .2rem .5rem rgba(0, 0, 0, .08);
}

@media (prefers-reduced-motion: reduce) {
  .md-typeset .gl-pain-list li {
    animation: none;
    opacity: 1;
  }
}

.md-typeset .gl-pain-list li::before {
  content: counter(gl-pain, decimal-leading-zero);
  position: absolute;
  left: 1rem;
  top: 1rem;
  font-family: var(--md-code-font, monospace);
  font-weight: 800;
  font-size: .95rem;
  color: var(--gl-pain-color, #3f51b5);
  opacity: .9;
}

.md-typeset .gl-pain-list li strong {
  color: var(--md-default-fg-color);
}

/* Red/green inline code pills used across the pain-list to mark
   "the painful way" vs. "the GraphLink way" terms inline in prose. */
.md-typeset .gl-pain-list code.gl-bad-inline {
  color: #b4231b;
  background: #fcecec;
  border-radius: .2rem;
}

.md-typeset .gl-pain-list code.gl-good-inline {
  color: #157a47;
  background: #e9f7ef;
  border-radius: .2rem;
}

/* Apollo-vs-GraphLink cache example inside the #5 pain-list item */
.md-typeset .gl-pain-list .gl-cache-bad-label {
  color: #b4231b;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.md-typeset .gl-pain-list .gl-cache-good-label {
  color: #157a47;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.md-typeset .gl-pain-list div.highlight.gl-cache-bad {
  background: #fcecec;
  border: 1px solid #f1b6b3;
  border-radius: .4rem;
}

.md-typeset .gl-pain-list div.highlight.gl-cache-bad pre {
  background: transparent;
}

.md-typeset .gl-pain-list div.highlight.gl-cache-good {
  background: #e9f7ef;
  border: 1px solid #a5dec1;
  border-radius: .4rem;
}

.md-typeset .gl-pain-list div.highlight.gl-cache-good pre {
  background: transparent;
}

.md-typeset .gl-pain-list li:nth-child(1) { --gl-pain-color: #c62828; --gl-pain-enter: .00s; --gl-pain-phase: .0s; }
.md-typeset .gl-pain-list li:nth-child(2) { --gl-pain-color: #d84315; --gl-pain-enter: .08s; --gl-pain-phase: .5s; }
.md-typeset .gl-pain-list li:nth-child(3) { --gl-pain-color: #ef6c00; --gl-pain-enter: .16s; --gl-pain-phase: 1.1s; }
.md-typeset .gl-pain-list li:nth-child(4) { --gl-pain-color: #8d6e63; --gl-pain-enter: .24s; --gl-pain-phase: 1.6s; }
.md-typeset .gl-pain-list li:nth-child(5) { --gl-pain-color: #5c6bc0; --gl-pain-enter: .32s; --gl-pain-phase: 2.2s; }
.md-typeset .gl-pain-list li:nth-child(6) { --gl-pain-color: #283593; --gl-pain-enter: .40s; --gl-pain-phase: 2.8s; }

/* ---------------------------------------------------------------------------
   Before / After comparison cards (landing page "pain story")
   Side-by-side via Material's .grid; red = without, green = with.
--------------------------------------------------------------------------- */

.md-typeset .ba-grid {
  gap: .9rem;
  margin: 1.2em 0;
}

.md-typeset .ba-card {
  border-radius: .35rem;
  border: 1px solid;
  padding: 0 .9rem .5rem;
  margin: .6rem 0;
}

/* the "Without / With" label sits at the top of each card */
.md-typeset .ba-card > p:first-child {
  font-weight: 700;
  margin: .75rem 0 .45rem;
  font-size: .82rem;
}

/* tuck the code block neatly inside the card */
.md-typeset .ba-card > .highlight,
.md-typeset .ba-card pre {
  margin-bottom: .25rem;
}

/* red — the painful "before" */
.md-typeset .ba-without {
  background: #fcecec;
  border-color: #f1b6b3;
}
.md-typeset .ba-without > p:first-child {
  color: #b4231b;
}

/* green — the "after" */
.md-typeset .ba-with {
  background: #e9f7ef;
  border-color: #a5dec1;
}
.md-typeset .ba-with > p:first-child {
  color: #157a47;
}

/* ---------------------------------------------------------------------------
   Language-specific payoff line under the before/after tabs.
   Text is swapped per tab by javascripts/ba-payoff.js; this just styles it
   and animates each swap.
--------------------------------------------------------------------------- */
.md-typeset .ba-payoff {
  border-left: .2rem solid var(--md-primary-fg-color, #000);
  background: var(--md-code-bg-color, #f5f5f5);
  padding: .7rem .9rem;
  border-radius: .2rem;
  margin: 1.2em 0;
}

.md-typeset .ba-payoff--enter {
  animation: baPayoffIn .35s ease;
}

@keyframes baPayoffIn {
  from { opacity: 0; transform: translateY(.45rem); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------------------
   Narrow the left navigation sidebar site-wide (~12.1rem default → ~6rem).
   Only applies on desktop; below 76.25em the nav is a hamburger drawer.
   The freed space flows to .md-content (flex-grow), widening the article.
--------------------------------------------------------------------------- */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    width: 4rem;
  }
  /* shrink nav text so labels still fit the narrower column */
  .md-sidebar--primary .md-nav {
    font-size: 0.58rem;
  }
}