/* 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);
}

/* ── 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.
 * (Also lives in sphinx-gp-theme/.../custom.css for downstream
 * consumers — duplicated here because docs/_static/css/custom.css
 * shadows the theme file at the same path.)
 * ────────────────────────────────────────────────────────── */
.sig:not(.sig-inline) {
  transition: none;
}

.package-demo-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin: 1.25rem 0;
}

.package-demo-card {
  border: 1px solid var(--color-background-border);
  border-radius: 0.75rem;
  background: var(--color-background-secondary);
  padding: 1rem;
}

.package-demo-card h3 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.font-specimen-sans {
  font-family: var(--font-stack);
  font-size: 1.25rem;
  line-height: 1.35;
}

.font-specimen-mono {
  font-family: var(--font-stack--monospace);
  font-size: 1rem;
  line-height: 1.5;
}

/* ── Package page metadata strip ────────────────────────────
 * Selects the first <p> inside the top-level section that
 * contains ONLY sphinx-design badges (no non-badge children).
 *
 * MyST renders {bdg-*} roles as <span class="sd-badge …"> inside
 * a bare <p> that is a direct child of <section>, which is a
 * direct child of <article>.
 *
 * :has() requires CSS Level 4 (all evergreen browsers ≥ 2024).
 * Falls back gracefully: badges render inline without the flex strip.
 *
 * Overrides `article h1 { margin-bottom: 0.75rem }` (line 38)
 * via equal specificity (0,0,2) and later source order.
 * ────────────────────────────────────────────────────────── */

/* Tighten h1 → badge strip gap so they read as a unit */
article > section > h1 {
  margin-bottom: 0.2rem;
}

/* Convert badge-only paragraph into a flex metadata strip */
article > section > p:first-of-type:has(> .sd-badge:first-child):not(:has(*:not(.sd-badge))) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0;
  margin-bottom: 1.5rem;
  padding: 0;
  line-height: 1;
}

/* ── Base badge reset ────────────────────────────────────── */
.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;
}

/* ── Maturity palette ────────────────────────────────────────
 * Subtle fill: Radix steps 12 (text), 11 (border), 3 (bg).
 * Step-12 text passes WCAG AAA on step-3 tinted backgrounds.
 * Step-11 border passes WCAG 1.4.11 (non-text contrast ≥ 3:1).
 *
 * !important matches sphinx-design's own !important on
 * .sd-text-warning / .sd-text-success and .sd-outline-*.
 * Without it, color and border-color are silently overridden.
 * background-color does not need !important — sphinx-design
 * does not set background on these badge variants.
 * ─────────────────────────────────────────────────────────── */
:root {
  --badge-alpha-color:  #4e2009;   /* Radix amber-12 — 11.62:1 on amber-3 (AAA) */
  --badge-alpha-border: #ab6400;   /* Radix amber-11 — 4.11:1 on card footer (WCAG 1.4.11 ✓) */
  --badge-alpha-bg:     #ffedc6;   /* Radix amber-3 — opaque tint, no color-mix */

  --badge-beta-color:   #193b2d;   /* Radix green-12 — 10.55:1 on green-3 (AAA) */
  --badge-beta-border:  #218358;   /* Radix green-11 — 4.22:1 on card footer (WCAG 1.4.11 ✓) */
  --badge-beta-bg:      #ddf3e4;   /* Radix green-3 */
}

/* Furo explicit dark theme */
body[data-theme="dark"] {
  --badge-alpha-color:  #ffca16;   /* Radix amber-11 dark — 9.13:1 on #3f2700 (AAA) */
  --badge-alpha-border: #8f6424;   /* Radix amber-8 dark */
  --badge-alpha-bg:     #3f2700;   /* Radix amber-3 dark */

  --badge-beta-color:   #3dd68c;   /* Radix green-11 dark — 6.66:1 on #113b29 (AA) */
  --badge-beta-border:  #2f7c57;   /* Radix green-8 dark */
  --badge-beta-bg:      #113b29;   /* Radix green-3 dark */
}

/* Furo auto mode: system dark when not explicitly set to light */
@media (prefers-color-scheme: dark) {
  body:not([data-theme="light"]) {
    --badge-alpha-color:  #ffca16;
    --badge-alpha-border: #8f6424;
    --badge-alpha-bg:     #3f2700;
    --badge-beta-color:   #3dd68c;
    --badge-beta-border:  #2f7c57;
    --badge-beta-bg:      #113b29;
  }
}

/* {bdg-warning-line} → .sd-badge.sd-outline-warning.sd-text-warning */
.sd-badge.sd-outline-warning {
  color: var(--badge-alpha-color) !important;
  border-color: var(--badge-alpha-border) !important;
  background-color: var(--badge-alpha-bg);
}

/* {bdg-success-line} → .sd-badge.sd-outline-success.sd-text-success */
.sd-badge.sd-outline-success {
  color: var(--badge-beta-color) !important;
  border-color: var(--badge-beta-border) !important;
  background-color: var(--badge-beta-bg);
}

/* ── Safety badge compatibility ─────────────────────────────
 * Downstream projects like libtmux-mcp emit safety badges via
 * a custom extension. Keep the docs-site copy aligned with the
 * packaged theme CSS so previews match downstream builds.
 * ────────────────────────────────────────────────────────── */
: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 ────────────────────────────
 * Keep docs-site previews aligned with the packaged theme:
 * tool links underline only the code token, not the gap or
 * the attached safety badge.
 * ────────────────────────────────────────────────────────── */
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;
}

/* Type badges (solid fills) — muted gray, scoped to metadata strip only.
 * extension:   {bdg-primary}    → .sd-badge.sd-bg-primary
 * coordinator: {bdg-success}    → .sd-badge.sd-bg-success  (solid fill)
 * theme:       {bdg-info}       → .sd-badge.sd-bg-info
 * .sd-bg-success and .sd-outline-success are mutually exclusive in sphinx-design. */
article > section > p:first-of-type > .sd-badge.sd-bg-primary,
article > section > p:first-of-type > .sd-badge.sd-bg-success,
article > section > p:first-of-type > .sd-badge.sd-bg-info {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.65;
  background-color: var(--color-background-border) !important;
  color: var(--color-foreground-secondary) !important;
  border: 1px solid var(--color-foreground-border);
}

/* Card footer badges — compact and scannable in the grid index */
.sd-card-footer .sd-badge {
  font-size: 0.6rem;
  font-weight: 500;
  padding: 0.13rem 0.35rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: middle;
}

/* Per-package landing layout — rendered by PackageLandingDirective.
 *
 * The directive emits :class-container: gp-sphinx-package__landing-grid
 * (BEM-style with double underscore per the workspace CSS standards in
 * CLAUDE.md). docutils normalizes underscores in HTML class attributes
 * to hyphens, so the rendered class is gp-sphinx-package-landing-grid
 * (single dash). Style both forms so the rule applies to whichever is
 * present.
 *
 * Specificity stays at 0,1,0 per the workspace CSS standards. */
.gp-sphinx-package__landing-grid,
.gp-sphinx-package-landing-grid {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

/* The synopsis beneath the meta-badge row is rendered as a MyST
 * block-quote (> text) which Furo styles with strong vertical-rule
 * formatting. Tighten the margin-bottom below the synopsis so the
 * grid above gets visible breathing room — Furo's default leaves the
 * blockquote flush against following content. */
article > section > blockquote:has(+ .gp-sphinx-package-landing-grid),
article > section > blockquote:has(+ .gp-sphinx-package__landing-grid) {
  margin-bottom: 1.25rem;
}

.gp-sphinx-package__hero {
  font-size: 1.05rem;
  color: var(--color-foreground-secondary);
  margin: 0.5rem 0 1rem 0;
}

}  /* end @layer gp-sphinx */