/* All workspace overrides land in @layer gp-sphinx so precedence is
 * declarative against Furo's @layer components rather than relying
 * on accidental "unlayered wins." Layer order is established in
 * gp-furo-theme/web/src/styles/index.css. */
@layer gp-sphinx {

.sidebar-tree p.indented-block {
  padding: var(--sidebar-item-spacing-vertical) var(--sidebar-item-spacing-horizontal) 0
    var(--sidebar-item-spacing-horizontal);
  margin-bottom: 0;
}

.sidebar-tree p.indented-block span.indent {
  margin-left: var(--sidebar-item-spacing-horizontal);
  display: block;
}

.sidebar-tree p.indented-block .project-name {
  font-size: var(--sidebar-item-font-size);
  font-weight: bold;
  margin-right: calc(var(--sidebar-item-spacing-horizontal) / 2.5);
}

#sidebar-projects:not(.ready) {
  visibility: hidden;
}

.sidebar-tree .active {
  font-weight: bold;
}


/* ── Global heading refinements ─────────────────────────────
 * Biome-inspired scale: medium weight (500) throughout — size
 * and spacing carry hierarchy, not boldness. H4-H6 add eyebrow
 * treatment (uppercase, muted). `article` prefix overrides
 * Furo's bare h1-h6 selectors.
 * ────────────────────────────────────────────────────────── */
article h1 {
  font-size: 1.8em;
  font-weight: 500;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
}

article h2 {
  font-size: 1.6em;
  font-weight: 500;
  margin-top: 2.5rem;
  margin-bottom: 0.5rem;
}

article h3 {
  font-size: 1.15em;
  font-weight: 500;
  margin-top: 1.5rem;
  margin-bottom: 0.375rem;
}

article h4 {
  font-size: 0.85em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-foreground-secondary);
  margin-top: 1rem;
  margin-bottom: 0.25rem;
}

article h5 {
  font-size: 0.8em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-foreground-secondary);
}

article h6 {
  font-size: 0.75em;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-foreground-secondary);
}

/* ── Changelog heading extras ───────────────────────────────
 * Vertical spacing separates consecutive version entries.
 * Category headings (h3) are muted. Item headings (h4) are
 * subtle. Targets #history section from CHANGES markdown.
 * ────────────────────────────────────────────────────────── */

/* Spacing between consecutive version entries */
#history > section + section {
  margin-top: 2.5rem;
}

/* Category headings — muted secondary color */
#history h3 {
  color: var(--color-foreground-secondary);
  margin-top: 1.25rem;
}

/* Item headings — subtle, same size as body */
#history h4 {
  font-size: 1em;
  margin-top: 1rem;
  text-transform: none;
  letter-spacing: normal;
  color: inherit;
}

/* ── Right-panel TOC refinements ────────────────────────────
 * Adjust Furo's table-of-contents proportions for better
 * readability. Inspired by Starlight defaults (Biome docs).
 * Uses Furo CSS variable overrides where possible.
 * ────────────────────────────────────────────────────────── */

/* TOC font sizes: drive from the gp-sphinx-type-metadata role token
 * (87.5%, ~14px). Declared on `body` because gp-furo-tokens emits
 * Furo's own --toc-font-size on `body` too — a `:root` override is
 * silently shadowed for descendants of body. */
body {
  --toc-font-size: var(--gp-sphinx-type-metadata);
  --toc-title-font-size: var(--gp-sphinx-type-metadata);
}

/* More generous line-height for wrapped TOC entries */
.toc-tree {
  line-height: 1.4;
}

/* ── Flexible right-panel TOC (inner-panel padding) ─────────
 * Furo hardcodes .toc-drawer to width: 15em (SASS, compiled).
 * min-width: 18em overrides it; long TOC entries wrap inside
 * the box instead of blowing past the viewport.
 *
 * Padding lives on .toc-sticky (the inner panel), not on
 * .toc-drawer (the outer aside). This matches Biome/Starlight
 * where the aside defines dimensions and an inner wrapper
 * (.right-sidebar-panel) controls content insets. The
 * scrollbar sits naturally between content and viewport edge.
 *
 * Content area gets flex: 1 to absorb extra space on wide
 * screens. At ≤82em Furo collapses the TOC to position: fixed;
 * override right offset so the drawer fully hides off-screen.
 * ────────────────────────────────────────────────────────── */
.toc-drawer {
  min-width: 18em;
  flex-shrink: 0;
  padding-right: 0;
}

.toc-sticky {
  padding-right: 1.5em;
}

.content {
  width: auto;
  max-width: 46em;
  flex: 1 1 46em;
  padding: 0 2em;
}

@media (max-width: 82em) {
  .toc-drawer {
    right: -18em;
  }
}

/* ── Body typography refinements ────────────────────────────
 * Improve paragraph readability with wider line-height and
 * sharper text rendering. Furo already sets font-smoothing.
 *
 * IBM Plex tracks slightly wide at default spacing; -0.01em
 * tightens it to feel more natural (matches tony.sh/tony.nl).
 * Kerning + ligatures polish AV/To pairs and fi/fl combos.
 * ────────────────────────────────────────────────────────── */
body {
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
  letter-spacing: -0.01em;
}

/* ── Code block text rendering ────────────────────────────
 * Monospace needs fixed-width columns: disable kerning,
 * ligatures, and letter-spacing that body sets for prose.
 * optimizeSpeed skips heuristics that can shift the grid.
 * ────────────────────────────────────────────────────────── */
pre,
code,
kbd,
samp {
  text-rendering: optimizeSpeed;
  font-kerning: none;
  font-variant-ligatures: none;
  letter-spacing: normal;
}

article {
  line-height: 1.6;
}

/* ── Image layout shift prevention ────────────────────────
 * Reserve space for images before they load. Furo already
 * sets max-width: 100%; height: auto on img. We add
 * content-visibility and badge-specific height to prevent CLS.
 * ────────────────────────────────────────────────────────── */


img {
  content-visibility: auto;
}

/* Docutils emits :width:/:height: as inline CSS (style="width: Xpx;
 * height: Ypx;") rather than HTML attributes.  When Furo's
 * max-width: 100% constrains width below the declared value,
 * the fixed height causes distortion.  height: auto + aspect-ratio
 * lets the browser compute the correct height from the intrinsic
 * ratio once loaded; before load, aspect-ratio reserves space
 * at the intended proportion — preventing both CLS and distortion. */
article img[loading="lazy"] {
  height: auto !important;
}

img[src*="shields.io"],
img[src*="badge.svg"],
img[src*="codecov.io"] {
  height: 20px;
  width: auto;
  min-width: 60px;
  border-radius: 3px;
  background: var(--color-background-secondary);
}

/* ── Shared badge tuning ────────────────────────────────────
 * Keep sphinx-design semantics, but tighten the stock badge
 * box model so inline metadata reads lighter and more native
 * to the rest of the theme.
 * ────────────────────────────────────────────────────────── */
.sd-badge {
  display: inline-flex !important;
  align-items: center;
  vertical-align: middle;
  font-size: 0.67rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  padding: 0.16rem 0.4rem;
  border-radius: 0.22rem;
  user-select: none;
  -webkit-user-select: none;
}

/* ── Safety badge compatibility ─────────────────────────────
 * libtmux-mcp's fastmcp_autodoc extension still emits these
 * badges with sphinx-design classes plus a "Safety tier"
 * aria-label. Restore the compact palette and heading/list
 * ergonomics that downstream docs used before gp-sphinx.
 * ────────────────────────────────────────────────────────── */
:root {
  --gp-sphinx-fastmcp-safety-readonly-bg: #1f7a3f;
  --gp-sphinx-fastmcp-safety-readonly-border: #2a8d4d;
  --gp-sphinx-fastmcp-safety-readonly-text: #f3fff7;
  --gp-sphinx-fastmcp-safety-mutating-bg: #b96a1a;
  --gp-sphinx-fastmcp-safety-mutating-border: #cf7a23;
  --gp-sphinx-fastmcp-safety-mutating-text: #fff8ef;
  --gp-sphinx-fastmcp-safety-destructive-bg: #b4232c;
  --gp-sphinx-fastmcp-safety-destructive-border: #cb3640;
  --gp-sphinx-fastmcp-safety-destructive-text: #fff5f5;
}

h2:has(> .sd-badge[role="note"][aria-label^="Safety tier:"]),
h3:has(> .sd-badge[role="note"][aria-label^="Safety tier:"]),
h4:has(> .sd-badge[role="note"][aria-label^="Safety tier:"]) {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.sd-badge[role="note"][aria-label^="Safety tier:"] {
  gap: 0.28rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}

.sd-badge[role="note"][aria-label^="Safety tier:"]::before {
  font-style: normal;
  font-weight: normal;
  font-size: 1em;
  line-height: 1;
  flex-shrink: 0;
}

.sd-badge.sd-bg-success[role="note"][aria-label^="Safety tier:"] {
  background-color: var(--gp-sphinx-fastmcp-safety-readonly-bg) !important;
  color: var(--gp-sphinx-fastmcp-safety-readonly-text) !important;
  border-color: var(--gp-sphinx-fastmcp-safety-readonly-border);
}

.sd-badge.sd-bg-warning[role="note"][aria-label^="Safety tier:"] {
  background-color: var(--gp-sphinx-fastmcp-safety-mutating-bg) !important;
  color: var(--gp-sphinx-fastmcp-safety-mutating-text) !important;
  border-color: var(--gp-sphinx-fastmcp-safety-mutating-border);
}

.sd-badge.sd-bg-danger[role="note"][aria-label^="Safety tier:"] {
  background-color: var(--gp-sphinx-fastmcp-safety-destructive-bg) !important;
  color: var(--gp-sphinx-fastmcp-safety-destructive-text) !important;
  border-color: var(--gp-sphinx-fastmcp-safety-destructive-border);
}

.sd-badge.sd-bg-success[role="note"][aria-label^="Safety tier:"]::before {
  content: "🔍";
}

.sd-badge.sd-bg-warning[role="note"][aria-label^="Safety tier:"]::before {
  content: "✏️";
}

.sd-badge.sd-bg-danger[role="note"][aria-label^="Safety tier:"]::before {
  content: "💣";
}

h2 .sd-badge[role="note"][aria-label^="Safety tier:"],
h3 .sd-badge[role="note"][aria-label^="Safety tier:"] {
  font-size: 0.68rem;
  padding: 0.17rem 0.4rem;
}

p .sd-badge[role="note"][aria-label^="Safety tier:"],
li .sd-badge[role="note"][aria-label^="Safety tier:"],
td .sd-badge[role="note"][aria-label^="Safety tier:"],
a .sd-badge[role="note"][aria-label^="Safety tier:"] {
  font-size: 0.62rem;
  padding: 0.12rem 0.32rem;
}

code.docutils + .sd-badge[role="note"][aria-label^="Safety tier:"],
.sd-badge[role="note"][aria-label^="Safety tier:"] + code.docutils {
  margin-left: 0.4em;
}

/* ── Safety badge link behavior ────────────────────────────
 * When a tool link includes inline code plus a safety badge,
 * keep the hover underline on the code token only so the gap
 * and badge do not get decorated.
 * ────────────────────────────────────────────────────────── */
a.reference:has(.sd-badge[role="note"][aria-label^="Safety tier:"]) {
  text-decoration: none;
}

a.reference:has(.sd-badge[role="note"][aria-label^="Safety tier:"])
  .sd-badge[role="note"][aria-label^="Safety tier:"] {
  text-decoration: none;
  vertical-align: middle;
}

a.reference:has(.sd-badge[role="note"][aria-label^="Safety tier:"]) code {
  text-decoration: none;
  vertical-align: middle;
}

a.reference:has(.sd-badge[role="note"][aria-label^="Safety tier:"]):hover code {
  text-decoration: underline;
}

/* ── View Transitions (SPA navigation) ────────────────────
 * Crossfade between pages during SPA navigation.
 * Browsers without View Transitions API get instant swap.
 * ────────────────────────────────────────────────────────── */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 150ms;
}

/* ── Theme-toggle should snap, not animate ────────────────
 * Furo's furo.css declares `transition: background .1s
 * ease-out` on `.sig:not(.sig-inline)` for hover smoothing;
 * that same transition runs on every theme swap and produces
 * a visible mid-blend. Override at gp-sphinx scope.
 * ────────────────────────────────────────────────────────── */
.sig:not(.sig-inline) {
  transition: none;
}

}  /* end @layer gp-sphinx */