/* Echo the editor's palette (duck_soup/web/ui/src/styles.css): violet accent, teal "spatial". */
:root {
  --ds-accent: #9d85ff;
  --ds-spatial: #00ebd7;
}

[data-md-color-scheme="slate"] {
  --md-default-bg-color: #0d0a1f;
  --md-primary-fg-color: #1b1640;
  --md-accent-fg-color: var(--ds-spatial);
  --md-typeset-a-color: var(--ds-accent);
  --md-code-bg-color: #15112e;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: #5b3fd6;
  --md-typeset-a-color: #5b3fd6;
}

.md-header__title,
.md-typeset h1,
.md-typeset h2 {
  letter-spacing: -0.01em;
}

.md-typeset h1 {
  font-weight: 700;
}

.md-header__button.md-logo img {
  border-radius: 6px;
}

/* Material leaves 1rem between the logo and the site name; keep the duck next to its name. */
[dir=ltr] .md-header__button.md-logo ~ .md-header__title {
  margin-left: 0.2rem;
}

/* The editor's wordmark ends in an accent-coloured ring, a 。 ("duck soup。"); give the header's
   site name the same one. Only the first topic is the site name, the second the page title.
   On the topic (a flex box) rather than its span, whose trailing whitespace would show; drawn
   rather than typed, since the theme's font has no 。. */
.md-header__topic:first-child {
  align-items: baseline;
}

.md-header__topic:first-child::after {
  content: "";
  /* The editor's ring (.brand .dot in styles.css), a little larger, with a stroke that scales
     down to 1px: the header's text is small, and the editor's 1.5px minimum stroke fills in
     a ring this size, so it reads as a dot. */
  width: 0.28em;
  height: 0.28em;
  margin-left: 0.07em;
  box-sizing: border-box;
  flex-shrink: 0;
  border: max(1px, 0.065em) solid var(--ds-accent);
  border-radius: 50%;
}

/* The light scheme's header is the violet itself: use a paler one there. */
[data-md-color-scheme="default"] .md-header__topic:first-child::after {
  border-color: #c4b0ff;
}

/* Material hides the header logo below its desktop breakpoint (it only shows in the drawer).
   Keep a small duck there, placed after the hamburger button. */
@media screen and (max-width: 76.234375em) {
  .md-header__button.md-logo {
    display: inline-block;
    order: 1;
    margin: 0.2rem 0;
    padding: 0.4rem 0.2rem;
  }
  .md-header__button.md-logo img {
    height: 1.1rem;
  }
  .md-header__inner > label.md-header__button[for="__drawer"] {
    order: 0;
  }
  .md-header__inner > :not(.md-logo):not(label[for="__drawer"]) {
    order: 2;
  }
}

/* Hero block on the home page */
.ds-hero {
  text-align: center;
  padding: 1rem 0 0.5rem;
}

/* Pull the logo and title together: by default the logo's <p> margin plus the h1's top
   spacing leave a gap that makes the duck look detached from the name. */
.ds-hero > p:first-child {
  margin-bottom: 0;
}

.md-typeset .ds-hero h1 {
  margin: 0.3rem 0 0.4rem;
}

/* The wordmark's ring, as in the editor's top bar (.brand .dot in styles.css). */
.ds-hero h1 .ds-dot {
  display: inline-block;
  width: 0.24em;
  height: 0.24em;
  margin-left: 0.07em;
  box-sizing: border-box;
  border: max(1.5px, 0.065em) solid var(--ds-accent);
  border-radius: 50%;
  vertical-align: baseline;
}

[data-md-color-scheme="default"] .ds-hero h1 .ds-dot {
  border-color: #5b3fd6;
}

.ds-hero img {
  width: 96px;
  border-radius: 16px;
  box-shadow: 0 0 24px rgba(157, 133, 255, 0.35);
}

.ds-hero p.tagline {
  font-size: 1.15rem;
  opacity: 0.85;
}

/* Material draws outline buttons in --md-primary-fg-color, which in slate is the near-black
   header colour (#1b1640) — invisible on the dark page until hovered. Use the accent instead. */
[data-md-color-scheme="slate"] .md-typeset .md-button:not(.md-button--primary):not(:hover):not(:focus) {
  color: var(--ds-accent);
  border-color: var(--ds-accent);
}

/* Editor screenshots */
.md-typeset img.screenshot {
  display: block;
  margin: 1rem auto;
  border: 1px solid rgba(157, 133, 255, 0.35);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.md-typeset img.screenshot.narrow {
  max-width: 560px;
  width: 100%;
}

/* Light/dark screenshot pairs: Material hides #only-light / #only-dark images per scheme, but
   the display:block above outranks its rule, so restate it with higher specificity. */
[data-md-color-scheme="slate"] .md-typeset img.screenshot[src$="#only-light"],
[data-md-color-scheme="default"] .md-typeset img.screenshot[src$="#only-dark"] {
  display: none;
}

/* Tutorial before/after diagrams (inline SVG from scripts/build_tutorial.py). Colours come
   from the page, so they follow the light/dark toggle without separate image files. */
:root {
  --ds-base: #7c4dff;
  --ds-ref: #00a896;
  --ds-water: #2f8fdd;
  --ds-park: #43a047;
  --ds-miss: #e53935;
  --ds-lamp: #f2a900;
}
[data-md-color-scheme="slate"] {
  --ds-base: #a58bff;
  --ds-ref: #2ee6cf;
  --ds-water: #5cb0f0;
  --ds-park: #66bb6a;
  --ds-miss: #ff6b6b;
  --ds-lamp: #ffd54f;
}
svg.ds-diagram {
  display: block;
  width: 100%;
  max-width: 780px;
  height: auto;
  margin: 1.2rem auto;
  font-family: var(--md-text-font-family);
}
svg.ds-diagram .hd { fill: var(--md-default-fg-color--light); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
svg.ds-diagram .lbl { fill: var(--md-default-fg-color--light); font-size: 10px; }
svg.ds-diagram .frame { fill: var(--md-code-bg-color); stroke: var(--md-default-fg-color--lightest); }
svg.ds-diagram path, svg.ds-diagram polyline { stroke-width: 1.4; stroke-linejoin: round; }
svg.ds-diagram .bg { fill: none; stroke: var(--md-default-fg-color--lightest); }
svg.ds-diagram path.base { fill: color-mix(in srgb, var(--ds-base) 30%, transparent); stroke: var(--ds-base); }
svg.ds-diagram path.out { fill: color-mix(in srgb, var(--ds-base) 60%, transparent); stroke: var(--ds-base); }
svg.ds-diagram path.ref { fill: color-mix(in srgb, var(--ds-ref) 18%, transparent); stroke: var(--ds-ref); }
svg.ds-diagram path.refline { fill: none; stroke: var(--ds-ref); stroke-dasharray: 5 3; stroke-width: 2; }
svg.ds-diagram path.ghost { fill: none; stroke: var(--md-default-fg-color--lighter); stroke-dasharray: 4 3; }
svg.ds-diagram path.water { fill: color-mix(in srgb, var(--ds-water) 35%, transparent); stroke: var(--ds-water); }
svg.ds-diagram path.waterline { fill: none; stroke: var(--ds-water); stroke-dasharray: 5 3; }
svg.ds-diagram path.park { fill: color-mix(in srgb, var(--ds-park) 35%, transparent); stroke: var(--ds-park); }
svg.ds-diagram polyline.link { fill: none; stroke: var(--ds-ref); stroke-dasharray: 3 2; }
svg.ds-diagram polyline.path { fill: none; stroke: var(--ds-base); stroke-width: 1.6; }
svg.ds-diagram polyline.trail { fill: none; stroke: var(--md-default-fg-color--light); stroke-width: 1.2; stroke-dasharray: 4 2; }
svg.ds-diagram polyline.lit { fill: none; stroke: var(--ds-lamp); stroke-width: 7; stroke-opacity: .55; }
svg.ds-diagram polyline.board { fill: none; stroke: var(--ds-ref); stroke-width: 3; stroke-dasharray: 6 2; }
svg.ds-diagram circle.vtx { fill: var(--md-default-fg-color); stroke: none; }
svg.ds-diagram circle { stroke: var(--md-default-bg-color); stroke-width: 1; }
svg.ds-diagram circle.base, svg.ds-diagram circle.out { fill: var(--ds-base); }
svg.ds-diagram circle.ref, svg.ds-diagram circle.stop { fill: var(--ds-ref); }
svg.ds-diagram circle.ghostpt { fill: var(--md-default-fg-color--lighter); }
svg.ds-diagram circle.miss { fill: var(--md-default-bg-color); stroke: var(--ds-miss); stroke-width: 2; }

/* Colour key under a diagram */
/* Material lets inline code break between any two letters, so in a table squeezed for room a
   column shrank below one name (clean_coverag|e). In tables, code wraps at spaces only, and
   a table that gets too wide scrolls sideways. */
.md-typeset table:not([class]) code { word-break: normal; overflow-wrap: normal; }

/* A diagram and its caption, as a figure: the caption sits right under the picture, small and
   italic, so it reads as belonging to it. */
.md-typeset figure.ds-figure { display: block; width: 100%; max-width: 780px; margin: 1.2rem auto 1.4rem; }
.md-typeset figure.ds-figure svg.ds-diagram { margin: 0 auto; }
.md-typeset figure.ds-figure > p { margin: 0; }  /* the paragraph Markdown puts the svg in */
.md-typeset figure.ds-figure .ds-key { margin-top: .5rem; }
.md-typeset figure.ds-figure figcaption {
  max-width: none; margin: .5rem auto 0; font-size: .7rem; font-style: italic; line-height: 1.5;
  color: var(--md-default-fg-color--light); text-align: center;
}
.ds-key { font-size: .7rem; color: var(--md-default-fg-color--light); text-align: center; margin-top: -.6rem; }
.ds-key span { display: inline-flex; align-items: center; gap: .3em; margin: 0 .6em; }
.ds-key i { width: .8em; height: .8em; border-radius: 50%; display: inline-block; }
.ds-key .k-base { background: var(--ds-base); }
.ds-key .k-out { background: var(--ds-base); }
.ds-key .k-ref { background: var(--ds-ref); }
.ds-key .k-water { background: var(--ds-water); }
.ds-key .k-park { background: var(--ds-park); }
.ds-key .k-ghost { background: var(--md-default-fg-color--lighter); }
.ds-key .k-lamp { background: color-mix(in srgb, var(--ds-lamp) 55%, transparent); border-radius: 2px; }
.ds-key .k-board { background: var(--ds-ref); border-radius: 0; height: .25em; }
.ds-key .k-path { background: var(--ds-base); border-radius: 0; height: .15em; }
.ds-key .k-trail { background: none; border-radius: 0; height: 0; border-top: 2px dashed var(--md-default-fg-color--light); }
.ds-key .k-miss { background: transparent; box-shadow: inset 0 0 0 2px var(--ds-miss); }