/* Annona — documentation theme.
 *
 * A border post should look like one: dark, precise, a little official. The
 * accent is customs-stamp red, used sparingly enough that it still means
 * something when it appears.
 *
 * Everything here is self-hosted. No CDN fonts, no remote assets — a project
 * whose claim is "nothing leaves" cannot have documentation that phones home.
 */

:root {
  --dg-red: #d64545;
  --dg-red-dim: #a83535;
  --dg-ink: #0b0d12;
  --dg-ink-soft: #141821;
  --dg-line: #232936;
}

/* Accent and links are verdigris, the mascot's armour. They were customs-red and
 * a borrowed blue from the previous name: a permalink glyph and a link in three
 * unrelated colours is what a page looks like when nobody owns the palette. */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--dg-ink);
  --md-accent-fg-color: #5cbbae;
  --md-default-bg-color: var(--dg-ink);
  --md-code-bg-color: var(--dg-ink-soft);
  --md-typeset-a-color: #5cbbae;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: #1f6f68;
  --md-accent-fg-color: #1f6f68;
  --md-typeset-a-color: #1a5c56;
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.dg-hero {
  margin: 0 0 3rem;
  padding: 3.5rem 2rem 3rem;
  border: 1px solid var(--dg-line);
  border-radius: 14px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(214, 69, 69, 0.14), transparent 62%),
    linear-gradient(180deg, var(--dg-ink-soft), var(--dg-ink));
}

[data-md-color-scheme="default"] .dg-hero {
  background:
    radial-gradient(circle at 50% 0%, rgba(214, 69, 69, 0.09), transparent 62%),
    linear-gradient(180deg, #ffffff, #f4f5f7);
  border-color: #e3e5ea;
}

.dg-hero__eyebrow {
  display: inline-block;
  margin-bottom: 1.4rem;
  padding: 0.3rem 0.9rem;
  border: 1px solid var(--dg-red);
  border-radius: 999px;
  color: var(--dg-red);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.dg-hero__title {
  margin: 0 0 0.4rem;
  font-size: 3.6rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1;
}

.dg-hero__stamp {
  color: var(--dg-red);
}

.dg-hero__tagline {
  margin: 0 0 1.2rem;
  font-size: 1.35rem;
  font-weight: 600;
  opacity: 0.92;
}

.dg-hero__sub {
  max-width: 34rem;
  margin: 0 auto;
  font-size: 0.95rem;
  line-height: 1.65;
  opacity: 0.75;
}

.dg-hero__meta {
  margin-top: 1.8rem;
  font-family: var(--md-code-font-family, monospace);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  opacity: 0.5;
}

/* ── Vocabulary table ──────────────────────────────────────────────────── */

.dg-terms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
  margin: 1.6rem 0 2.4rem;
}

.dg-term {
  padding: 0.9rem 1rem;
  border: 1px solid var(--dg-line);
  border-left: 3px solid var(--dg-red);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
}

[data-md-color-scheme="default"] .dg-term {
  border-color: #e3e5ea;
  border-left-color: var(--dg-red-dim);
  background: #fafbfc;
}

.dg-term__name {
  font-weight: 700;
  font-size: 0.9rem;
}

.dg-term__desc {
  margin-top: 0.2rem;
  font-size: 0.8rem;
  line-height: 1.45;
  opacity: 0.75;
}

/* ── Status pills, used in the honesty tables ──────────────────────────── */

.dg-pill {
  display: inline-block;
  padding: 0.1rem 0.55rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.dg-pill--cleared {
  background: rgba(46, 160, 90, 0.16);
  color: #35b46a;
}

.dg-pill--held {
  background: rgba(214, 69, 69, 0.16);
  color: var(--dg-red);
}

.dg-pill--open {
  background: rgba(224, 168, 61, 0.16);
  color: #e0a83d;
}

/* ── Typography polish ─────────────────────────────────────────────────── */

.md-typeset h1,
.md-typeset h2 {
  font-weight: 750;
  letter-spacing: -0.02em;
}

.md-typeset table:not([class]) th {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

@media screen and (max-width: 44em) {
  .dg-hero {
    padding: 2.4rem 1.2rem;
  }

  .dg-hero__title {
    font-size: 2.4rem;
  }
}

/* ── Landing page ───────────────────────────────────────────────────────────
 *
 * The home page is the first thing a stranger sees, so it gets a hero, download
 * cards and a verdigris accent that matches the mascot's armour. Everything is
 * local: the CSS, the image, the type. A project whose claim is "nothing leaves"
 * cannot have a landing page that loads a font from a CDN.
 */

:root {
  --an-accent: #1f6f68;
  --an-accent-bright: #2e9187;
}

[data-md-color-scheme="slate"] {
  --an-accent: #5cbbae;
  --an-accent-bright: #7fd0c4;
}

.an-hero {
  text-align: center;
  padding: 2rem 0 1.5rem;
}

.an-hero__mascot {
  width: 200px;
  max-width: 46vw;
  height: auto;
  margin: 0 auto 0.5rem;
  display: block;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.28));
}

.md-typeset .an-hero__title {
  font-size: 3.4rem;
  line-height: 1;
  margin: 0.2rem 0 0.4rem;
  letter-spacing: -0.02em;
  font-weight: 700;
}

.an-hero__tagline {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--an-accent);
  margin: 0 0 0.9rem;
  letter-spacing: 0.01em;
}

.an-hero__sub {
  max-width: 40rem;
  margin: 0 auto 1.4rem;
  font-size: 0.92rem;
  opacity: 0.86;
}

.an-hero__meta {
  font-size: 0.72rem;
  opacity: 0.6;
  margin-top: 1.1rem;
}

/* Numbers, not adjectives. */
.an-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 0 0 1.4rem;
}

.an-stat {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 3px;
  padding: 0.35rem 0.7rem;
  min-width: 5.4rem;
}

.an-stat b {
  display: block;
  font-size: 0.95rem;
  color: var(--an-accent);
  line-height: 1.2;
}

.an-stat span {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.66;
}

.an-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.md-typeset .an-btn {
  display: inline-block;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 3px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: background-color 120ms, border-color 120ms, transform 120ms;
}

.md-typeset .an-btn:hover {
  border-color: var(--an-accent);
  transform: translateY(-1px);
}

.md-typeset .an-btn--primary {
  background: var(--an-accent);
  border-color: var(--an-accent);
  color: #fff;
}

.md-typeset .an-btn--primary:hover {
  background: var(--an-accent-bright);
  border-color: var(--an-accent-bright);
  color: #fff;
}

/* Download and step cards: same grid Material ships, quieter. */
.md-typeset .an-downloads .md-typeset__table,
.md-typeset .an-downloads p {
  margin: 0.4rem 0;
}

.md-typeset .an-downloads > ul > li,
.md-typeset .an-steps > ul > li {
  border-color: var(--md-default-fg-color--lightest);
}

.md-typeset .an-downloads .twemoji,
.md-typeset .an-downloads .material-icons {
  font-size: 1.6rem;
  color: var(--an-accent);
}

@media screen and (max-width: 44.98em) {
  .md-typeset .an-hero__title { font-size: 2.4rem; }
  .an-hero__mascot { width: 150px; }
}


/* ── Landing polish ─────────────────────────────────────────────────────────
 *
 * Material dims h1 on the slate scheme, which reads as "unfinished" on a page
 * whose whole job is a first impression. The hero also earns more room than a
 * documentation page: the mascot is the logo, so it is shown at logo size.
 */

.md-typeset .an-hero__title {
  color: var(--md-default-fg-color);
  font-size: 4.2rem;
  margin: 0.4rem 0 0.5rem;
}

[data-md-color-scheme="slate"] .md-typeset .an-hero__title {
  color: #fff;
  text-shadow: 0 2px 30px rgba(92, 187, 174, 0.18);
}

.an-hero__mascot {
  width: 280px;
  max-width: 54vw;
}

.an-hero__tagline {
  font-size: 1.35rem;
  font-weight: 700;
}

.an-hero__sub {
  font-size: 0.98rem;
  max-width: 44rem;
  line-height: 1.7;
}

/* Numbers should read as numbers: bigger, tighter, with the label quiet. */
.an-stat {
  min-width: 6.2rem;
  padding: 0.5rem 0.9rem;
  background: var(--md-code-bg-color);
}

.an-stat b {
  font-size: 1.25rem;
  font-weight: 700;
}

.an-cta {
  margin-top: 0.4rem;
  gap: 0.6rem;
}

.md-typeset .an-btn {
  padding: 0.62rem 1.35rem;
  font-size: 0.8rem;
  border-radius: 4px;
}

/* A hairline under each section title, so a long page has a rhythm. */
.md-typeset h2 {
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  padding-bottom: 0.35rem;
  margin-top: 2.6rem;
}

/* The header logo is a character, not a glyph: give it room and no filter. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.6rem;
  width: 1.6rem;
}

@media screen and (max-width: 44.98em) {
  .md-typeset .an-hero__title { font-size: 2.7rem; }
  .an-hero__mascot { width: 190px; }
  .an-hero__tagline { font-size: 1.1rem; }
}

/* The platform glyphs on the download cards: large, in the accent, above the
 * name rather than inline with it. */
.md-typeset .an-downloads .twemoji {
  display: block;
  width: 2.1rem;
  height: 2.1rem;
  margin-bottom: 0.35rem;
  fill: var(--an-accent);
}

/* Material's own rule is more specific, so match it and add the class: the
 * cards must be equal-height flex columns or a two-line description drops one
 * button below the others. */
.md-typeset .grid.cards.an-downloads > ul > li,
.md-typeset .grid.cards.an-steps > ul > li {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
}

/* The download button sits at the bottom of every card, so three cards of
 * different text length still line up. */
.md-typeset .grid.cards.an-downloads > ul > li > p:last-child {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: 0.6rem;
}

/* No "edit this page" pencil floating over a hero. */
.md-typeset .an-hero ~ * .md-content__button,
body[data-md-color-scheme] .md-content__button.md-icon:first-of-type:has(+ .an-hero) {
  display: none;
}

/* Four steps read as a sequence, so they go 2×2 rather than leaving an orphan.
 *
 * The grid lives on the container: Material gives `.grid.cards > ul` a
 * `display: contents`, so the list items are grid children of the div and any
 * rule aimed at the `ul` does nothing at all. */
@media screen and (min-width: 60em) {
  .md-typeset .grid.an-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}