/* Home page brand mark (below header nav logo) */
.md-typeset img.docs-brand-logo {
  display: block;
  margin: 0.5rem auto 1.75rem auto;
  max-height: clamp(140px, 22vw, 240px);
  width: auto;
}

/* Navbar logo — Material lays out `.md-header__button` as a compact icon grid (~2.4rem),
   which shrinks raster logos unless the `<img>/<svg>` is sized explicitly:
   squidfunk.github.io/mkdocs-material/discussions/2933 */
.md-header__button.md-logo {
  margin-block: 0;
  padding-block: 0;
  padding-inline: 0.45rem;
  height: auto;
  width: auto;
  flex-shrink: 0;
}

.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: clamp(3.75rem, 6vmin, 5.25rem);
  width: auto;
  max-width: min(38rem, 50vw);
  display: block;
}

/* Sidebar / drawer (mobile) */
.md-nav__button.md-logo {
  margin-block: 0;
  padding-block: 0.15rem;
  height: auto;
  width: auto;
}

.md-nav__button.md-logo img,
.md-nav__button.md-logo svg {
  height: clamp(3.25rem, 5vmin, 4.25rem);
  width: auto;
  display: block;
}

/* ── Right sidebar: table of contents (numbered headings) ───────────────── */
/* Nested heading levels nest `<nav>` blocks; widen step + faint guide rail so depth reads cleanly. */
.md-nav.md-nav--secondary .md-nav__link {
  font-variant-numeric: tabular-nums lining-nums;
}

.md-nav.md-nav--secondary .md-nav__item > nav.md-nav {
  margin-block: 0.15rem 0.45rem;
  margin-inline-start: 0;
  padding-inline-start: 0.95rem;
  border-inline-start: 2px solid var(--md-default-fg-color--lightest, rgba(127, 127, 127, 0.25));
}

/* OopsieBench: MkDocs hook replaces missing MP4 anchors with this pattern */
.md-typeset .oopsiebench-video-missing abbr {
  color: var(--md-default-fg-color--lighter, #888);
  font-size: 0.85em;
  font-style: italic;
  white-space: nowrap;
  cursor: help;
  text-decoration: dotted underline;
  text-underline-offset: 0.12em;
}

/* OopsieBench task tables: task IDs stay one line without horizontal scrollbars.
   Narrow first column shrink-wrap + description column absorbs remaining width + wraps. */
.md-typeset .oopsiebench-task-table-wrapper {
  margin-block: 0.5rem 1rem;
}

.md-typeset .oopsiebench-task-table-wrapper table {
  width: 100%;
  max-width: 100%;
  table-layout: auto;
}

/* Classic “min content width” trick for nowrap column without forcing overflow */
.md-typeset .oopsiebench-task-table-wrapper table thead th:first-child,
.md-typeset .oopsiebench-task-table-wrapper table tbody td:first-child {
  width: 1%;
  white-space: nowrap;
  vertical-align: top;
  font-variant-numeric: tabular-nums lining-nums;
}

.md-typeset .oopsiebench-task-table-wrapper table thead th:first-child {
  vertical-align: bottom;
}

.md-typeset .oopsiebench-task-table-wrapper table tbody td:first-child code {
  white-space: nowrap;
}

.md-typeset .oopsiebench-task-table-wrapper table thead th:nth-child(2),
.md-typeset .oopsiebench-task-table-wrapper table tbody td:nth-child(2) {
  overflow-wrap: anywhere;
  word-wrap: break-word;
  hyphens: auto;
  white-space: normal;
}

/* Keep video thumbnail cells compact; center under header badges */
.md-typeset .oopsiebench-task-table-wrapper table thead th:nth-child(n + 3),
.md-typeset .oopsiebench-task-table-wrapper table tbody td:nth-child(n + 3) {
  width: 1%;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  padding-inline: 0.35rem;
}

/* Clickable demo thumbnails (GLightbox opens the MP4) */
.md-typeset a.oopsiebench-video-thumb {
  display: inline-block;
  position: relative;
  line-height: 0;
  border-radius: 0.35rem;
  overflow: hidden;
  vertical-align: middle;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.md-typeset a.oopsiebench-video-thumb:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.md-typeset a.oopsiebench-video-thumb img {
  display: block;
  width: 9.5rem;
  max-width: min(9.5rem, 22vw);
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  margin: 0;
  border: 2px solid transparent;
}

.md-typeset a.oopsiebench-video-thumb--unsafe img {
  border-color: rgba(220, 38, 38, 0.55);
}

.md-typeset a.oopsiebench-video-thumb--safe img {
  border-color: rgba(22, 163, 74, 0.55);
}

.md-typeset a.oopsiebench-video-thumb::after {
  content: "▶";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 1.35rem;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.65);
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.md-typeset a.oopsiebench-video-thumb:hover::after {
  opacity: 1;
}

.md-typeset span.oopsiebench-video-missing.oopsiebench-video-thumb {
  display: inline-block;
  vertical-align: middle;
}

.md-typeset .oopsiebench-video-thumb__placeholder {
  display: inline-block;
  padding: 0.35rem 0.5rem;
  color: var(--md-default-fg-color--lighter, #888);
  font-size: 0.78rem;
  font-style: italic;
  white-space: nowrap;
}

.md-typeset .oopsiebench-task-table-wrapper table .md-button {
  margin: 0;
  font-size: 0.75rem;
  padding: 0.35em 0.75em;
}

/* OopsieBench + other docs: bolder table header row */
.md-typeset table:not([class]) thead th {
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  vertical-align: bottom;
}

.md-typeset table td .md-button:not(:last-child) {
  margin-right: 0.35em;
}