/*
 * tmux window layouts (docs/_ext/tmux_layout.py).
 *
 * Plain inline SVG: it inherits furo's CSS custom properties and adapts to
 * light/dark via body[data-theme] with no JavaScript and no second render.
 *
 * Shell highlighting reuses furo's own Pygments rules: the command text is
 * wrapped in <g class="highlight">, so `.highlight .nb`, `.highlight .gp`
 * (the prompt), etc. apply, and SVG <text> takes its colour from `color` via
 * `fill: currentColor` — so the panes match the site's console blocks exactly,
 * font and colours, in both light and dark. The viewBox is in pixels (one tmux
 * cell = _CW x _CH), so at intrinsic size the text renders at the code font
 * size.
 */

.gp-tmux-layout-wrapper {
  margin: 1.5rem 0;
  text-align: center;
}

.gp-tmux-layout {
  max-width: min(100%, 480px);
  height: auto;
  display: block;
  margin: 0 auto;
}

/*
 * Pane background mirrors the Pygments code-block background, with the same
 * light/dark switching furo uses for `.highlight` (pygments_style and
 * pygments_dark_style backgrounds).
 */
.gp-tmux-layout .pane {
  fill: #f8fafc;
}

body[data-theme="dark"] .gp-tmux-layout .pane {
  fill: #272822;
}

@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) .gp-tmux-layout .pane {
    fill: #272822;
  }
}

/* Single-stroke window border and pane dividers. */
.gp-tmux-layout .window {
  fill: none;
  stroke: var(--color-background-border, #cccccc);
  stroke-width: 1;
}

.gp-tmux-layout .divider {
  stroke: var(--color-background-border, #cccccc);
  stroke-width: 1;
}

.gp-tmux-layout text {
  font-family: var(--font-stack--monospace, "SFMono-Regular", Menlo, monospace);
  font-size: var(--code-font-size, 0.8125rem);
  /* Match the site's code blocks (pre): even monospace advance, no kerning. */
  font-kerning: none;
  text-rendering: optimizeSpeed;
  letter-spacing: normal;
  /* Colour comes from furo's .highlight / .highlight .nb / .gp rules. */
  fill: currentColor;
}

.gp-tmux-layout-wrapper > figcaption {
  text-align: center;
  font-size: 0.9em;
  margin-top: 0.5rem;
}