:root, [data-md-color-scheme] { --af-product: var(--af-product-hangar); }

/* Each guide diagram has a wide drawing and a stacked one (docs/assets/front/diagram.py). Phones and narrow tablets
   get the stacked one, at the width it was drawn for, so its text stays 11 px or larger at 390 px. */
.md-typeset figure.af-figure--stacked { display: none; }
@media (max-width: 959px) {
  .md-typeset figure.af-figure--wide { display: none; }
  .md-typeset figure.af-figure--stacked { display: block; max-width: 22rem; }
}

/* A screenshot, framed as agent-factory frames its captures (theme/suite.css there, .af-figure--lead): the card radius,
   a 1px line, and a caption that says what is on the screen. The image links to the full capture. */
.md-typeset figure.af-figure--lead { margin: 1.2em 0 1.6em; }
.md-typeset figure.af-figure--lead > a > img { display: block; width: 100%; height: auto; border-radius: var(--af-radius-card); box-shadow: 0 0 0 1px var(--af-line); }
/* the Night or Day twin only, as Material does for a Markdown image (the display: block above would show both) */
[data-md-color-scheme="default"] .md-typeset figure img[src$="#only-dark"],
[data-md-color-scheme="slate"] .md-typeset figure img[src$="#only-light"] { display: none; }
.md-typeset figure.af-figure--lead figcaption { font-family: inherit; font-size: .72rem; letter-spacing: 0; text-transform: none; color: var(--af-fg-muted); text-align: left; max-width: none; margin-top: .7em; }

/* The docs home's hero: a still of a delivered job that links to the recording, in the page's theme */
.md-typeset .af-hero__visual figcaption a { color: var(--af-fg-muted); }

/* The docs home's features table on phones: each row stacks into a block (the feature, its status, then what it gives),
   so the description gets the full width instead of a 100 px column. The header row goes; the status reads as a note. */
@media (max-width: 599px) {
  .md-typeset .hg-features table:not([class]), .md-typeset .hg-features tbody,
  .md-typeset .hg-features tr, .md-typeset .hg-features table:not([class]) td { display: block; width: auto; }
  .md-typeset .hg-features thead { display: none; }
  .md-typeset .hg-features table:not([class]) tr { display: grid; grid-template-columns: 1fr auto; column-gap: .8rem; padding: .7rem 0; border-top: 1px solid var(--af-line-subtle); }
  .md-typeset .hg-features table:not([class]) tr:hover { background: transparent; }
  .md-typeset .hg-features table:not([class]) td { border: 0; padding: 0; }
  .md-typeset .hg-features table:not([class]) td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .md-typeset .hg-features table:not([class]) td:nth-child(3) { grid-column: 2; grid-row: 1; color: var(--af-fg-muted); font-size: .64rem; text-align: right; }
  .md-typeset .hg-features table:not([class]) td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; margin-top: .3rem; }
}

@media (forced-colors: active) {
  .md-typeset .hg-features table:not([class]) tr { border-color: CanvasText; }
  .md-typeset figure.af-figure--lead > a > img { box-shadow: none; outline: 1px solid CanvasText; }
}