/* FAQ question cards.
 *
 * Kept as real <h2> headings on purpose: a collapsible admonition (??? question) would look
 * tidier but drops out of the right-hand table of contents, and the ToC is how people actually
 * navigate a long FAQ. So the heading stays a heading, and `attr_list` tags it `.faq` for this
 * rule to hang on.
 *
 * Every colour is a Material CSS custom property, never a literal — that is what keeps the card
 * correct in both the light and dark palettes without a second rule.
 */
.md-typeset h2.faq {
  background: var(--md-code-bg-color);
  border-left: 4px solid var(--md-accent-fg-color);
  border-radius: 0.15rem;
  padding: 0.55em 0.75em;
  margin-top: 2.2em;
  font-size: 1.15rem;
  line-height: 1.4;
  scroll-margin-top: 3rem;          /* so an anchored jump does not hide it under the header */
}

/* The answer, indented to sit visually "inside" its question. */
.md-typeset h2.faq + * {
  margin-top: 0.9em;
}

/* A quieter rule between Q&A groups than the default full-width divider. */
.md-typeset h2.faq::before {
  content: "";
}

/* ── Landing hero ─────────────────────────────────────────────────────────────────────
 * Every colour below is a Material CSS custom property, never a literal, for the same
 * reason as the FAQ cards above: one rule then reads correctly in BOTH palettes. The
 * ember-crimson accent is set in mkdocs.yml, so the hero inherits the product colour
 * rather than restating it.
 */
.dd-hero {
  margin: 0 0 2.5rem;
  padding: 2.6rem 0 2.2rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  text-align: center;
}
.dd-hero__eyebrow {
  display: inline-block;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--md-accent-fg-color);
  border: 1px solid var(--md-accent-fg-color);
  border-radius: 2rem;
  padding: .25em .9em;
  margin-bottom: 1.1rem;
}
/* A real <h1>: without one, Material prints the nav title ('Home') above the hero.
 * Both selectors so Material's .md-typeset h1 rules do not win on specificity. */
.md-typeset .dd-hero__title,
.dd-hero__title {
  font-size: 2.6rem;
  line-height: 1.12;
  font-weight: 800;
  margin: 0 0 .6rem;
  letter-spacing: -.02em;
}
.dd-hero__sub {
  font-size: 1.02rem;
  line-height: 1.65;
  max-width: 42rem;
  margin: 0 auto 1.7rem;
  color: var(--md-default-fg-color--light);
}
.dd-hero__cta { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* Responsive: the hero must not shout on a phone. */
@media screen and (max-width: 44em) {
  .dd-hero { padding: 1.8rem 0 1.6rem; }
  .dd-hero__title { font-size: 1.9rem; }
}

/* A single quiet "what's new" pill, not a marketing banner — same visual weight as the
 * hero eyebrow above it, so a real update reads as a fact stated once, not hype. Update the
 * text/link when the NEXT thing ships; do not stack a second one underneath it. */
.dd-announce {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
  font-size: .85rem;
  line-height: 1.5;
  width: fit-content;
  margin: 0 auto 2rem;
  padding: .5em 1.1em;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 2rem;
  background: var(--md-code-bg-color);
  color: var(--md-default-fg-color--light);
}
.dd-announce__tag {
  flex: none;
  font-size: .62rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--md-primary-bg-color);
  background: var(--md-accent-fg-color);
  border-radius: 1rem;
  padding: .22em .65em;
}
.dd-announce a { color: var(--md-accent-fg-color); font-weight: 600; }

/* Three-up feature row. Auto-fit means it reflows to 1 column on narrow screens with no
 * media query of its own. */
.dd-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 1.6rem 0 2rem;
}
.dd-card {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: .3rem;
  padding: 1.05rem 1.15rem;
  background: var(--md-code-bg-color);
}
.dd-card h3 { margin: 0 0 .45rem; font-size: .95rem; }
.dd-card p  { margin: 0; font-size: .82rem; line-height: 1.6;
              color: var(--md-default-fg-color--light); }

/* Built-by strip. Logo inverts in dark mode — the TOPS mark is dark ink on transparent,
 * so without this it disappears against the slate background. */
.dd-builtby {
  display: flex; align-items: center; justify-content: center; gap: .8rem;
  margin: 2.5rem 0 .5rem; padding-top: 1.6rem;
  border-top: 1px solid var(--md-default-fg-color--lightest);
  font-size: .75rem; color: var(--md-default-fg-color--light);
}
.dd-builtby img { height: 30px; width: auto; }   /* dark-mode handling below */

/* ── TOPS brand palette ───────────────────────────────────────────────────────────────
 * Hexes taken from docs/assets/header-logo.svg, not picked by eye:
 *   #27AAE1  cyan   — the cube mark; the primary/header colour
 *   #585EAA  indigo — secondary
 *   #F06649  coral  — accent (links, buttons); also ~the product's ember-crimson
 * Material has no named colour near #27AAE1, hence `primary: custom` in mkdocs.yml with
 * the real values here. Every other rule in this file reads Material's variables, so
 * setting them at the root re-colours the whole site including components we never touch.
 */
:root,
[data-md-color-scheme="default"] {
  --md-primary-fg-color:        #27AAE1;
  --md-primary-fg-color--light: #5CC3EC;
  --md-primary-fg-color--dark:  #1B87B4;
  --md-primary-bg-color:        #FFFFFF;
  --md-primary-bg-color--light: rgba(255,255,255,.7);
  --md-accent-fg-color:         #F06649;
  --md-accent-fg-color--transparent: rgba(240,102,73,.1);
}

/* Dark palette: the same brand hues, lifted so they stay legible on slate. A brand colour
 * tuned for white will read muddy on a dark ground, so primary lightens rather than being
 * reused unchanged. */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #1B87B4;
  --md-primary-fg-color--light: #5CC3EC;
  --md-primary-fg-color--dark:  #14688A;
  --md-accent-fg-color:         #FF7F63;
  --md-accent-fg-color--transparent: rgba(255,127,99,.12);
}

/* The built-by strip carries the FULL logo, whose wordmark is near-black (#0C0C0C) and so
 * vanishes on slate. invert() alone would also flip the cyan to orange; the hue-rotate puts
 * the hue back, so the mark stays recognisably TOPS in dark mode. */
[data-md-color-scheme="slate"] .dd-builtby img {
  filter: invert(1) hue-rotate(180deg);
}

/* ── "Ask Claude" ────────────────────────────────────────────────────────────────────────
   Deliberately quieter than the primary CTAs. Asking is an alternative to reading, not the
   thing we are selling — an accent-coloured button competing with "Get started" would push
   people away from the docs the button then feeds to an assistant. */
.dd-ask {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .74rem;
  font-weight: 600;
  line-height: 1;
  padding: .5rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color--light);
  background: var(--md-default-bg-color);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.dd-ask::before { content: "✦"; opacity: .75; }
.dd-ask:hover  { border-color: var(--md-accent-fg-color); color: var(--md-accent-fg-color); }
.dd-ask--page  { margin: -.35rem 0 1.4rem; }

.dd-hero__ask      { margin-top: 1.1rem; display: flex; flex-direction: column;
                     align-items: center; gap: .5rem; }
.dd-hero__ask-note { font-size: .72rem; color: var(--md-default-fg-color--light);
                     max-width: 26rem; text-align: center; }