/* GeoDeploy documentation theme.
   Material's defaults are deliberately neutral; this gives the site its own identity — brand green,
   a landing hero, and cards that read as a product page rather than a wiki. */

:root {
  --gd-green: #16a34a;
  --gd-green-dim: #15803d;
  --gd-ink: #0b1220;
}

/* Material's primary is a fixed palette name, so the exact brand colour is set here. */
[data-md-color-primary="green"] {
  --md-primary-fg-color: var(--gd-green);
  --md-primary-fg-color--dark: var(--gd-green-dim);
  --md-accent-fg-color: var(--gd-green);
}
[data-md-color-scheme="slate"] {
  --md-default-bg-color: hsl(222 44% 9%);
  --md-code-bg-color: hsl(220 40% 13%);
  --md-typeset-a-color: #4ade80;
}
[data-md-color-scheme="default"] {
  --md-typeset-a-color: var(--gd-green-dim);
}

/* ── Landing hero ──────────────────────────────────────────────────────────
   Only on pages that opt in with `hero` in their front matter class, so no other page inherits it. */
/* FULL-BLEED. The hero lives inside Material's content column, which is padded and centred, so
   negative margins in rem only ate the padding — leaving a visible gutter on three sides.
   `calc(50% - 50vw)` pulls each edge out to the VIEWPORT regardless of how wide that column is, and
   the negative top margin closes the gap under the header so the gradient meets it. */
/* The top margin cancels the two separate spacings Material puts above the first block:
   `.md-main__inner` (1.5rem) and `.md-content__inner`'s own padding (.6rem). Pulling back only the
   first left a thin strip of page background between the header and the gradient. Written as the sum
   rather than -2.1rem so it stays legible if either value changes upstream. */
.gd-hero {
  margin: calc(-1.5rem - .6rem) calc(50% - 50vw) 3rem;
  width: 100vw;
  padding: 5rem 2rem 4rem;
  text-align: center;
  border-radius: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(22,163,74,.22), transparent 70%),
    linear-gradient(180deg, rgba(22,163,74,.10), transparent 65%);
}
/* Material reserves space above the first block for the (hidden) breadcrumb/edit row. On the landing
   page that space is what stopped the hero touching the header. */
.md-content__inner::before { display: none; }
.md-typeset .gd-hero > :first-child { margin-top: 0; }
.gd-hero h1 {
  font-size: 2.9rem;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.03em;
  margin: 0 0 .9rem;
}
.gd-hero .gd-sub {
  max-width: 40rem;
  margin: 0 auto 2rem;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--md-default-fg-color--light);
}
.gd-hero .md-button {
  margin: .3rem .35rem;
  border-radius: .6rem;
  font-weight: 600;
}
.gd-hero .gd-demo-note {
  margin: 1rem auto 0;
  font-size: .72rem;
  color: var(--md-default-fg-color--light);
}
.gd-hero .md-button--primary {
  box-shadow: 0 6px 20px rgba(22,163,74,.28);
  border-color: transparent;
}

/* The install line, presented as the one thing to copy. */
.gd-install {
  max-width: 46rem;
  margin: 2rem auto 0;
  text-align: left;
}
.gd-install .highlight pre {
  border-radius: .7rem;
  border: 1px solid var(--md-default-fg-color--lightest);
}

/* ── Feature cards ─────────────────────────────────────────────────────────
   Material ships `.grid.cards`; these adjust the weight so a card reads as a feature, not a note. */
.md-typeset .grid.cards > ul > li {
  border-radius: .8rem;
  border-color: var(--md-default-fg-color--lightest);
  padding: 1.1rem 1.2rem;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--gd-green);
  box-shadow: 0 6px 22px rgba(0,0,0,.10);
  transform: translateY(-2px);
}
.md-typeset .grid.cards > ul > li > hr {
  margin: .6rem 0 .8rem;
}
.md-typeset .grid.cards .twemoji,
.md-typeset .grid.cards .md-typeset .twemoji {
  color: var(--gd-green);
}

/* ── Reading comfort ───────────────────────────────────────────────────────*/
.md-typeset h1 { font-weight: 750; letter-spacing: -.02em; }
.md-typeset h2 {
  font-weight: 700; letter-spacing: -.015em;
  margin-top: 2.4rem; padding-top: .4rem;
  border-top: 1px solid var(--md-default-fg-color--lightest);
}
.gd-hero + h2, .md-typeset h1 + h2 { border-top: none; }
.md-typeset table:not([class]) { font-size: .78rem; }
.md-typeset table:not([class]) th { font-weight: 600; }

/* A flow diagram in a code block should not read as something to copy. */
.gd-flow .highlight pre {
  background: transparent;
  border: 1px dashed var(--md-default-fg-color--lighter);
  text-align: center;
}


/* ── Screenshots ───────────────────────────────────────────────────────────
   The product is a dark dashboard, so shots are framed rather than floated: a border and a soft
   shadow stop a dark screenshot from bleeding into a dark page and losing its edges. */
.md-typeset figure { margin: 1.6rem 0; }
.md-typeset figure img {
  width: 100%;
  border-radius: .7rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
  display: block;
}
.md-typeset figcaption {
  margin-top: .6rem;
  font-size: .72rem;
  line-height: 1.5;
  color: var(--md-default-fg-color--light);
  text-align: center;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
}
/* The lead shot carries the page, so it may break out of the text column. */
.gd-shot-lead img { border-radius: .9rem; box-shadow: 0 22px 60px rgba(0, 0, 0, .38); }

/* Screenshot grids. `auto-fit` + minmax means these reflow to one column on a phone with no
   breakpoint of their own. */
.gd-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.2rem;
  margin: 1.6rem 0;
}
.gd-tiles-2 { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); }
.gd-tiles figure { margin: 0; }
.gd-tiles figure img { transition: transform .2s ease, box-shadow .2s ease; }
.gd-tiles figure img:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .38);
}

/* Buttons that follow a section read as "read more", so they sit tighter than a paragraph. */
.md-typeset .md-button { margin: .2rem .3rem 1.2rem 0; }

.gd-next table { width: 100%; }

/* Dark is the default scheme, so tune it rather than accepting Material's neutral slate. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: hsl(222 44% 8%);
  --md-default-fg-color--lightest: hsl(217 33% 22%);
  --md-code-bg-color: hsl(220 40% 12%);
}
[data-md-color-scheme="slate"] .gd-hero {
  background:
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(22, 163, 74, .28), transparent 70%),
    linear-gradient(180deg, rgba(22, 163, 74, .12), transparent 65%);
}

/* ── Roadmap legend ────────────────────────────────────────────────────────*/
.gd-legend {
  padding: .7rem 1rem;
  border-radius: .6rem;
  background: var(--md-code-bg-color);
  font-size: .74rem;
  line-height: 1.9;
}
.gd-legend .gd-ok   { color: #22c55e; }
.gd-legend .gd-wip  { color: #f59e0b; }
.gd-legend .gd-plan { color: #38bdf8; }
.gd-legend .gd-idea { color: var(--md-default-fg-color--light); }

/* Cards carrying an icon lead read better with the icon on its own line. */
.md-typeset .grid.cards .lg.twemoji,
.md-typeset .grid.cards svg.lg { height: 1.6rem; width: 1.6rem; }

/* ── Roadmap: milestones, not a card wall ──────────────────────────────────
   The complaint was that it did not read as a roadmap. A roadmap needs a SPINE — a visible sequence
   you travel down — so releases are laid out as stops on a line rather than tiles in a grid. */
.gd-rel {
  position: relative;
  padding-left: 2.2rem;
  margin: 0 0 2.2rem;
}
/* The line itself, running through the whole sequence. */
.gd-rel::before {
  content: "";
  position: absolute;
  left: .62rem;
  top: .35rem;
  bottom: -2.2rem;
  width: 2px;
  background: linear-gradient(180deg, var(--gd-green), var(--md-default-fg-color--lightest));
}
/* The spine must stop where a run of releases stops. `tail` marks the last stop before an intervening
   heading, otherwise the line reaches down past it into unrelated prose. */
.gd-rel:last-of-type::before,
.gd-rel.tail::before { bottom: auto; height: 1.6rem; }
/* The stop. Filled = shipped, hollow = still ahead. */
.gd-rel::after {
  content: "";
  position: absolute;
  left: 0;
  top: .28rem;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  border: 2px solid var(--gd-green);
  background: var(--md-default-bg-color);
}
.gd-rel.done::after {
  background: var(--gd-green);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--gd-green) 22%, transparent);
}
.gd-rel.now::after {
  border-color: #f59e0b;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, .22);
}
.gd-rel > h3 {
  margin: 0 0 .2rem !important;
  font-size: .95rem;
  letter-spacing: -.01em;
}
.gd-rel .gd-when {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--md-default-fg-color--light);
}
.gd-rel .gd-goal {
  font-size: .78rem;
  color: var(--md-default-fg-color--light);
  margin: .35rem 0 .6rem;
}
/* Seven of the eight stops are history. They stay legible but recede, so the one release actually in
   flight is what the eye lands on — otherwise a page that is mostly green reads as finished. */
.gd-rel.now {
  padding: .1rem 1rem .1rem 2.2rem;
  margin-left: -1rem;
  border-radius: .7rem;
  background: linear-gradient(90deg, rgba(245, 158, 11, .09), transparent 70%);
}
.gd-rel.now > h3 { padding-top: .9rem; }
.gd-rel.now::before, .gd-rel.now::after { left: 1.62rem; }
.gd-rel.now::after { left: 1rem; top: 1.18rem; }

/* Checklists read as progress rather than bullets. */
.md-typeset .gd-rel .task-list-item { font-size: .78rem; line-height: 1.75; }
.md-typeset .gd-rel .task-list-item.done { color: var(--md-default-fg-color--light); }
/* A ticked box on a shipped milestone is the whole point of the page — colour it. */
.md-typeset .gd-rel [type="checkbox"]:checked + .task-list-indicator::before {
  background-color: var(--gd-green);
}

/* Status chips used inline in prose. */
.gd-chip {
  display: inline-block;
  padding: .05rem .45rem;
  border-radius: 999px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: .12em;
}
.gd-chip-done { color: #22c55e; background: rgba(34, 197, 94, .14); }
.gd-chip-now  { color: #f59e0b; background: rgba(245, 158, 11, .14); }
.gd-chip-next { color: #38bdf8; background: rgba(56, 189, 248, .14); }