/* The screenshots are exported terminal SVGs. They carry their own colours and
   their own dark background, so they must not be inverted or tinted by the
   theme — and they should sit at a comfortable width rather than filling the
   column edge to edge. */
.md-typeset img[src$=".svg"]:not([src^="http"]) {
  display: block;
  margin: 1.2rem auto;
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

/* Terminal output in a fenced block should read like a terminal: no ligatures
   turning != into a glyph nobody typed. */
.md-typeset pre code {
  font-variant-ligatures: none;
}

/* Slightly tighter tables — the parity and status tables are wide. */
.md-typeset table:not([class]) {
  font-size: 0.72rem;
}

/* Status badges are inline metadata, not terminal screenshots. */
.md-typeset .project-badges > p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: .4rem .5rem;
  margin: 0 0 1rem;
}
.md-typeset .project-badges a {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-height: 24px;
  line-height: 1;
  padding: 0 0.6em;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 999px;
  font-size: 0.7rem;
}
.md-typeset .project-badges a:hover,
.md-typeset .project-badges a:focus-visible {
  border-color: var(--md-accent-fg-color);
}
.md-typeset .project-badges img,
.md-typeset table img[src^="https://img.shields.io/"] {
  display: inline-block;
  width: auto;
  height: 20px;
  max-width: 100%;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}
.md-typeset video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* Tape recordings (recordings.md): a framed player, with the GIF as the
   no-JavaScript fallback. */
.tape-player {
  margin: 1rem 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  background: #292929;
}
.tape-player img {
  display: block;
  width: 100%;
}

/* The gallery (recordings.md): a still per tape that plays its GIF while the
   card is hovered or focused (tapes.js), unless reduced motion is asked for. */
.tape-gallery > p {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}
.md-typeset a.tape-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  background: #292929;
  color: #e6e6e6;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.md-typeset a.tape-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top left;
}
.tape-card-title {
  padding: 0.4rem 0.7rem 0.5rem;
  font-weight: 600;
}
/* A play mark on the still, gone while the GIF plays. */
.md-typeset a.tape-card::after {
  content: "▶";
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.7rem;
}
.md-typeset a.tape-card[data-playing]::after {
  content: "❚❚";
}
.md-typeset a.tape-card:hover,
.md-typeset a.tape-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.md-typeset a.tape-card:focus-visible {
  outline: 3px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .md-typeset a.tape-card {
    transition: none;
  }
  .md-typeset a.tape-card:hover,
  .md-typeset a.tape-card:focus-visible {
    transform: none;
  }
  .md-typeset a.tape-card::after {
    content: none;
  }
}

/* intuiTUIve's pages: the wordmark carries its own colours, one file per
   scheme (#only-dark / #only-light); the topic icons are black line icons
   set inline beside the text, turned light on the slate scheme. */
.md-typeset img.tui-wordmark {
  margin: 0.4rem 0 1rem;
  border-radius: 0;
  box-shadow: none;
}
.md-typeset img.tui-icon[src$=".svg"]:not([src^="http"]),
.md-typeset img.rs-icon[src$=".svg"]:not([src^="http"]),
.md-typeset img.rs-mark[src$=".svg"]:not([src^="http"]) {
  display: inline-block;
  margin: 0 0.35rem 0 0;
  vertical-align: -0.3em;
  border-radius: 0;
  box-shadow: none;
}
[data-md-color-scheme="slate"] .md-typeset img.tui-icon,
[data-md-color-scheme="slate"] .md-typeset img.rs-icon {
  filter: invert(0.92);
}
/* `[src]`, not `:not([src^="http"])`: instant navigation rewrites every
   src to an absolute URL, which the guard would then skip. */
.md-typeset img.tui-mascot[src] {
  float: right;
  margin: 0 0 0.5rem 1rem;
  border-radius: 0;
  box-shadow: none;
}
/* No `display` here: Material hides the other scheme's copy (#only-dark,
   #only-light) with display: none, and this must not undo it. */
.md-typeset img.tui-hero,
.md-typeset img.rs-hero {
  width: 100%;
  height: auto;
  margin: 0 0 1.2rem;
  border-radius: 12px;
  box-shadow: none;
}

/* Noctiluca's pages (docs/assets/noctiluca/): its art carries its own
   colours, set without the screenshots' frame; its sub-site link is edged in
   the lanternfish's blue. */
.md-typeset img.noct-art[src] {
  display: block;
  margin: 0.6rem auto 1.2rem;
  max-width: 100%;
  border-radius: 0;
  box-shadow: none;
}
.md-typeset .rs-subsite.noct-subsite {
  border-left-color: #2a7fd8;
}

/* rs-rich's own identity (docs/assets/rs-rich/): a gold accent, #c08600,
   where intuiTUIve has purple. Material's `custom` accent takes it; links
   hovered on the light scheme use a darker gold so they keep 4.5:1 on
   white. intuiTUIve's pages switch back to deep purple (subsite.js). */
[data-md-color-accent="custom"] {
  --md-accent-fg-color: #946800;
  --md-accent-fg-color--transparent: rgba(192, 134, 0, 0.12);
  --md-accent-bg-color: #ffffff;
  --md-accent-bg-color--light: rgba(255, 255, 255, 0.7);
}
[data-md-color-scheme="slate"][data-md-color-accent="custom"] {
  --md-accent-fg-color: #c08600;
  --md-accent-fg-color--transparent: rgba(192, 134, 0, 0.16);
  --md-accent-bg-color: #1c1a24;
  --md-accent-bg-color--light: rgba(28, 26, 36, 0.7);
}

/* A crate's icon in its page title: the same line icons, at the heading's
   size. */
.md-typeset h1 img.rs-icon[src$=".svg"]:not([src^="http"]) {
  width: 1.1em;
  height: 1.1em;
  margin-right: 0.45rem;
  vertical-align: -0.12em;
}

/* The home page's link to the intuiTUIve sub-site: its mark beside a short
   text, edged in its purple. */
.md-typeset .rs-subsite {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.2rem 0;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-left: 4px solid #7c4dff;
  border-radius: 8px;
}
.md-typeset .rs-subsite > p {
  flex: 0 0 auto;
  margin: 0;
}
.md-typeset .rs-subsite > div > :first-child {
  margin-top: 0;
}
.md-typeset .rs-subsite > div > :last-child {
  margin-bottom: 0;
}
@media (max-width: 30em) {
  .md-typeset .rs-subsite {
    flex-direction: column;
    align-items: flex-start;
  }
}