/* XPGuard doc theme — align Material with the xpguard.net palette
   (--stop red, --go green, --vatsim blue, dark #0A0E16 surfaces). */
:root {
  --md-primary-fg-color:        #E8463F;   /* --stop */
  --md-primary-fg-color--light: #ef6b64;
  --md-primary-fg-color--dark:  #b7322c;
  --md-accent-fg-color:         #E8463F;
}
[data-md-color-scheme="slate"] {
  --md-default-bg-color:        #0A0E16;   /* --bg */
  --md-code-bg-color:           #121A26;   /* --surface */
  --md-default-fg-color--light: #EAEEF4;   /* --ink */
}

/* semantic color chips used throughout the docs */
.xpg-red    { color: #E8463F; font-weight: 600; }
.xpg-green  { color: #27D17C; font-weight: 600; }
.xpg-amber  { color: #ECA63C; font-weight: 600; }
.xpg-blue   { color: #2BA3DA; font-weight: 600; }

/* a small inline "light" swatch: {++ ... ++} not used — a span with .swatch */
.swatch { display:inline-block; width:.8em; height:.8em; border-radius:50%; vertical-align:middle; margin-right:.15em; }
.sw-red   { background:#E8463F; }
.sw-green { background:#27D17C; }
.sw-amber { background:#ECA63C; }
.sw-gray  { background:#5a626e; }

.md-typeset .admonition.freeware {
  border-color: #27D17C;
}
.md-typeset .freeware > .admonition-title {
  background-color: rgba(39,209,124,.1);
}
.md-typeset .freeware > .admonition-title::before {
  background-color: #27D17C;
  -webkit-mask-image: var(--md-admonition-icon--tip);
          mask-image: var(--md-admonition-icon--tip);
}

/* figure captions + side-by-side image pairs (md_in_html):
   <div class="fig-pair" markdown>
     <figure markdown="span">![alt](img){ loading=lazy }<figcaption>Caption</figcaption></figure>
     <figure markdown="span">![alt](img){ loading=lazy }<figcaption>Caption</figcaption></figure>
   </div> */
.fig-pair { display: flex; gap: 16px; flex-wrap: wrap; }
.fig-pair figure { flex: 1 1 280px; margin: 0; }
.fig-pair figure img { width: 100%; border-radius: 6px; }
figcaption { text-align: center; font-size: .72rem; opacity: .75; margin-top: .35rem; }

/* Video tutorials. The iframe host MUST be youtube-nocookie.com: server.js's CSP allows
   `frame-src https://www.youtube-nocookie.com` and nothing else, so a plain youtube.com
   embed renders as an empty box with only a console line to say why. */
.tut-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: .6rem 0 1rem;
  border-radius: .25rem;
  overflow: hidden;
  background: #0a0e16;
}
.tut-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* more than one video: two up on a wide screen, stacked on a phone */
.tut-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.tut-grid figure { margin: 0; }
.tut-grid figcaption { font-size: .78rem; color: var(--md-default-fg-color--light); margin-top: -.5rem; }