:root {
  --md-accent-fg-color: #E4312A;
  --md-accent-fg-color--transparent: rgba(228, 49, 42, 0.10);
  --md-typeset-a-color: #C42017;
}

/* White header with a brand-red underline for definition */
.md-header {
  color: #171717;
  border-bottom: 3px solid #E4312A;
  box-shadow: 0 2px 4px rgba(0,0,0,.05);
}
.md-tabs {
  color: #171717;
  border-bottom: 1px solid rgba(0,0,0,.07);
}
/* If more modules are added than fit on one row, let the tab bar scroll
   horizontally (swipe / shift+wheel / drag) instead of clipping the extras.
   The scrollbar is hidden for a clean look; every module stays reachable. */
.md-tabs__list {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;                       /* Firefox */
}
.md-tabs__list::-webkit-scrollbar { display: none; }   /* Chrome / Edge / Safari */
.md-tabs__item { flex: 0 0 auto; }

/* Taller header bar so the full "Xclusiv 4D" logo can be larger. The bar height
   is the title's height (Material's default is 2.4rem); we raise it here. The
   height lives in one variable so the dependent sticky offsets (left sidebar,
   mobile search dropdown) stay in sync. The logo's own transparent margin keeps
   it clear of the edges — no clipping. */
:root { --x4d-header-h: 3.9rem; }
.md-header__title { height: var(--x4d-header-h); line-height: var(--x4d-header-h); }
.md-header__button.md-logo { padding-top: .15rem; padding-bottom: .15rem; }
.md-header__button.md-logo img,
.md-header__button.md-logo svg { height: 3.6rem; width: auto; }
@media screen and (min-width: 76.25em) {
  .md-sidebar { top: var(--x4d-header-h); }
}
@media screen and (max-width: 59.984375em) {
  .md-search__output { top: var(--x4d-header-h); }
}

/* Active tab / nav item in brand red */
.md-tabs__link--active { color: #C42017; font-weight: 600; }
.md-nav__link--active,
.md-nav__link--active > .md-ellipsis { color: #C42017; }

/* Section labels (navigation.sections) */
.md-nav__item--section > .md-nav__link { color: #171717; font-weight: 700; }

/* Dark mode: section labels must be light so they're readable on dark background */
[data-md-color-scheme="slate"] .md-nav__item--section > .md-nav__link { color: #ffffff; }

/* Homepage hero */
.x4d-hero { text-align: center; margin: 2.2rem 0 1.2rem; }
.x4d-hero img { width: min(420px, 75%); height: auto; }
.x4d-tagline { text-align: center; font-size: .95rem; color: var(--md-default-fg-color--light); margin-top: -.4rem; }

/* Dark scheme: keep red accent readable */
[data-md-color-scheme="slate"] {
  --md-accent-fg-color: #E4312A;
  --md-typeset-a-color: #FF6A60;
}
[data-md-color-scheme="slate"] .md-header { color: #fff; }
[data-md-color-scheme="slate"] .md-tabs { color: #fff; }

/* ---- Wider content area (less wasted space on large screens) ---- */
.md-grid { max-width: 1600px; }

/* ---- Screenshots: full content width, framed, click = lightbox ---- */
.md-typeset img:not(.off-glb) {
  max-width: 100%;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.md-typeset a.glightbox { cursor: zoom-in; }

/* Homepage hero logo: no frame, not a lightbox target */
.x4d-hero img.off-glb { border: 0; box-shadow: none; }

/* Dark mode: the brand logo is black + red and nearly disappears on a dark
   background. Swap to a light (white-text) variant — red brand colour kept,
   no backdrop needed. content:url() replaces the rendered image per scheme. */
[data-md-color-scheme="slate"] .md-header__button.md-logo img {
  content: url("../assets/logo-full-dark.png");
}
[data-md-color-scheme="slate"] .x4d-hero img {
  content: url("../assets/logo-full-dark.png");
}


/* ---- X4D pipeline additions ---- */
/* Document Control panel — append to your existing docs/assets/extra.css */
.doc-control { margin: 0 0 1.4rem 0; }
.doc-control table {
  width: 100%; border-collapse: collapse; font-size: 0.78rem;
  border: 1px solid var(--md-default-fg-color--lightest);
}
.doc-control table th, .doc-control table td {
  border: 1px solid var(--md-default-fg-color--lightest);
  padding: .35rem .6rem; text-align: left; vertical-align: top;
}
/* the first row (panel title) spans as a header bar */
.doc-control thead { display: none; }
.doc-control table tr:first-child td,
.doc-control table tr:first-child th {
  background: #E4312A; color: #fff; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; font-size: .72rem;
}
.doc-control table td:first-child { width: 9rem; font-weight: 600;
  background: var(--md-default-fg-color--lightest); white-space: nowrap; }

/* ---- Figures with numbered/lettered annotation notes ---- */
.x4d-figure { margin: 1.3rem 0; }
.x4d-figure img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--md-default-fg-color--lightest); border-radius: 4px;
}
.x4d-figure figcaption {
  font-size: .8rem; font-style: italic; margin-top: .4rem;
  color: var(--md-default-fg-color--light);
}
.img-notes ul { list-style: none; padding-left: 0; margin: .7rem 0 0; }
.img-notes li {
  display: flex; gap: .55rem; align-items: flex-start;
  margin: .3rem 0; font-size: .84rem; line-height: 1.45;
}
.x4d-marker {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.45rem; height: 1.45rem; padding: 0 .35rem; margin-top: .05rem;
  border-radius: 999px; background: #E4312A; color: #fff;
  font-weight: 700; font-size: .72rem; line-height: 1;
}

/* ---- Responsive embedded video (16:9, expands with the window) ---- */
.x4d-video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 1.3rem 0; }
.x4d-video iframe, .x4d-video video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border: 0; border-radius: 4px;
}

/* ---- Image notes shown inside the click-to-zoom lightbox ---- */
.gdesc-inner .x4d-lb-notes,
.gslide-description .x4d-lb-notes { text-align: left; font-size: .9rem; line-height: 1.7; }
.gdesc-inner .x4d-lb-notes .x4d-marker { margin-right: .45rem; }

/* ---- Timed video notes (overlay caption + clickable chapter list) ---- */
.x4d-video-frame { position: relative; width: 100%; aspect-ratio: var(--x4d-ar, 16 / 9); }
.x4d-video-frame .x4d-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 4px; }
.x4d-video-overlay {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  margin: 0; padding: .55rem .9rem; text-align: center;
  background: rgba(0,0,0,.72); color: #fff; font-size: .9rem; line-height: 1.4;
}
.x4d-video-cues { list-style: none; padding: 0; margin: .6rem 0 0; }
.x4d-video-cues li {
  display: block; cursor: pointer;
  padding: .3rem .55rem; border-radius: 4px; font-size: .85rem;
}
.x4d-video-cues li:hover { background: var(--md-default-fg-color--lightest); }
.x4d-video-cues li.active { background: rgba(228,49,42,.12); font-weight: 600; }
.x4d-video-cues li .t {
  display: block; font-variant-numeric: tabular-nums; font-weight: 700;
  color: #E4312A; margin-bottom: .1rem;
}
/* a little breathing room between author line breaks (rendered as <br>) */
.x4d-video-cues li { line-height: 1.5; }

/* ---- External video rendered as a click-to-open link (opens new tab) ---- */
.x4d-video-link { margin: 1.1rem 0; }
.x4d-video-link a {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .55rem .9rem; border-radius: 4px; text-decoration: none;
  background: #E4312A; color: #fff; font-weight: 600; font-size: .9rem;
}
.x4d-video-link a:hover { filter: brightness(1.08); }
.x4d-video-cuelist { list-style: none; padding: 0; margin: .5rem 0 0; }
.x4d-video-cuelist li { display: flex; gap: .6rem; font-size: .85rem; margin: .2rem 0; }
.x4d-video-cuelist li .t { color: #E4312A; font-weight: 700; min-width: 3.2rem; font-variant-numeric: tabular-nums; }

/* X4D header color override */
.doc-control table tr:first-child td, .doc-control table tr:first-child th { background: #1565C0 !important; }

/* X4D marker color override */
.x4d-marker { background: #1565C0 !important; }

/* ---- Full-screen video: chapter captions beside the video (never over it) ---- */
.x4d-fs-btn {
  position: absolute; top: .5rem; right: .5rem; z-index: 4;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0;
  border: 0; border-radius: 4px; cursor: pointer;
  background: rgba(0,0,0,.55); color: #fff;
  opacity: 0; transition: opacity .15s ease;
}
.x4d-video-frame:hover .x4d-fs-btn,
.x4d-fs-btn:focus-visible { opacity: 1; }
.x4d-fs-btn:hover { background: rgba(0,0,0,.82); }
.x4d-fs-btn svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }

/* When the whole box is full screen: video on the left, chapters on the right. */
.x4d-video.is-fullscreen {
  display: flex; flex-direction: row;
  width: 100%; height: 100%; aspect-ratio: auto;
  margin: 0; background: #000;
}
.x4d-video.is-fullscreen .x4d-video-frame {
  flex: 1 1 auto; min-width: 0; min-height: 0; height: 100%;
  aspect-ratio: auto; border-radius: 0;
}
.x4d-video.is-fullscreen .x4d-player {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #000; border-radius: 0;
}
/* timed caption stays visible in full screen, pinned over the video area only
   (inside the frame, so it never reaches the chapter panel on the right) */
.x4d-video.is-fullscreen .x4d-video-overlay {
  z-index: 3; left: 50%; right: auto; transform: translateX(-50%);
  max-width: min(90%, 60ch); width: max-content;
  bottom: 1.2rem; border-radius: 6px;
  padding: .7rem 1.2rem; font-size: 1.15rem; line-height: 1.5;
}
/* chapter list = scrollable side panel that never overlaps the video */
.x4d-video.is-fullscreen .x4d-video-cues {
  flex: 0 0 clamp(240px, 26vw, 420px);
  height: 100%; max-height: none; overflow-y: auto;
  margin: 0; padding: 1rem 1.1rem;
  background: #0e0e0e; color: #eaeaea;
  border-left: 1px solid rgba(255,255,255,.14);
}
.x4d-video.is-fullscreen .x4d-video-cues li { color: #eaeaea; }
.x4d-video.is-fullscreen .x4d-video-cues li:hover { background: rgba(255,255,255,.10); }
.x4d-video.is-fullscreen .x4d-video-cues li.active { background: rgba(21,101,192,.35); }
.x4d-video.is-fullscreen .x4d-video-cues li .t { color: #5b9bf0; }

/* Narrow screens: stack the chapter panel under the video in full screen. */
@media (max-width: 700px) {
  .x4d-video.is-fullscreen { flex-direction: column; }
  .x4d-video.is-fullscreen .x4d-video-cues {
    flex: 0 0 auto; width: 100%; max-height: 38%;
    border-left: 0; border-top: 1px solid rgba(255,255,255,.14);
  }
}

/* ---- On-page side layout: video left, scrollable caption/chapter list right ----
   (mirrors the full-screen layout). The list's max-height is set to the video's
   height by x4d-video-notes.js so it scrolls instead of stretching the video.
   On narrow screens it falls back to the stacked layout (list under the video). */
@media (min-width: 769px) {
  .x4d-video {
    display: flex; flex-direction: row; align-items: stretch;
    aspect-ratio: auto; gap: .5rem;
  }
  .x4d-video > .x4d-video-frame { flex: 1 1 auto; width: auto; min-width: 0; }
  .x4d-video > .x4d-video-cues {
    flex: 0 0 clamp(220px, 28%, 360px);
    margin: 0; min-height: 0; overflow-y: auto;
    max-height: 70vh;          /* CSS safety-net; JS refines this to the video's exact height */
    padding: .35rem .4rem;
    border: 1px solid var(--md-default-fg-color--lightest);
    border-radius: 4px;
  }
  /* compact caption text in the side panel (narrow column, stacked layout) */
  .x4d-video > .x4d-video-cues li {
    font-size: .7rem; line-height: 1.4; padding: .3rem .45rem;
  }
  .x4d-video > .x4d-video-cues li .t { font-size: .68rem; }
}

/* The highlighted line in the side panel is the caption indicator now (on-video
   text is off by default), so make the active line clearly stand out. */
.x4d-video-cues li.active {
  background: rgba(21, 101, 192, .14);
  box-shadow: inset 3px 0 0 #1565C0;
}

/* On-page (not full screen): show the video at its OWN size so there are no
   white/black letterbox bands or empty space around it. The fixed 16:9 frame is
   only used in full screen (object-fit: contain) and for iframe embeds. */
.x4d-video:not(.is-fullscreen) .x4d-video-frame { aspect-ratio: auto; }
.x4d-video:not(.is-fullscreen) .x4d-player {
  position: static; width: 100%; height: auto; display: block;
}

/* ---------------------------------------------------------------------------
   Sidebar expand caret (desktop tree). Sections open DOWNWARD, so show a
   downward "dropdown" chevron when collapsed, flipping to point up when open.
   Scoped to the desktop sidebar only — on mobile the right chevron correctly
   means "drill into section". Leaf items have no caret (they are plain links).
   --------------------------------------------------------------------------- */
@media screen and (min-width: 76.25em) {
  /* Collapsed: down-pointing chevron (override Material's right chevron mask). */
  .md-nav--primary {
    --md-nav-icon--next: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16.59%208.59%2012%2013.17%207.41%208.59%206%2010l6%206%206-6z%22%2F%3E%3C%2Fsvg%3E");
  }
  /* Expanded: flip the caret to point up (overrides Material's 90deg rotate). */
  .md-nav--primary .md-nav__item--nested .md-nav__toggle:checked ~ .md-nav__link .md-nav__icon:after,
  .md-nav--primary .md-nav__item--nested .md-toggle--indeterminate ~ .md-nav__link .md-nav__icon:after {
    transform: rotate(180deg);
  }
}

/* X4D image notes left */
.md-typeset .x4d-figure { text-align: left; }
.x4d-figure .img-notes, .x4d-figure .img-notes ul, .x4d-figure .img-notes li { text-align: left; }
.x4d-figure .img-notes li { justify-content: flex-start; }
.gslide-description .x4d-lb-notes, .gdesc-inner .x4d-lb-notes { text-align: left; }