/* =============================================================================
 * KOL components — workshop / docs chrome
 * =============================================================================
 * Shell + docs layout chrome shared across the Workshop and Docs surfaces.
 * Relocated from the monorepo's private @kol/ui package:
 *   packages/ui/css/components.css  → the .shell-* navigation classes
 *   packages/ui/css/docs.css        → the .docs-* content classes
 *                                     (+ docs-only .inline-tag-pill, .tag-graph-*)
 *
 * Class hooks are preserved so the JSX bindings keep resolving.
 *
 * Layer: this file ships unlayered; kol-theme.css assigns the layer at import —
 *   @import "./kol-components-workshop.css" layer(components);
 * placing it in the `components` cascade layer alongside the rest of KOL chrome,
 * so consumer utilities (a later Tailwind layer) still override it.
 *
 * KOL conformance (type/color de-drift):
 *   - Resting type + text color moved OUT to `kol-*` type classes + kol color
 *     utilities carried DIRECTLY on the JSX className (visible in dev tools).
 *     font-family / font-size / font-weight / line-height / letter-spacing /
 *     color were stripped from these rules; rules that were type/color only
 *     were deleted. Active color is a conditional kol color class in the JSX;
 *     the rendered markdown body is wrapped in `.kol-prose`.
 *   - Only structural props Tailwind/kol utilities can't express are kept here
 *     (sticky, scrollbar hiding, grid/flex layout, container-query, absolute
 *     positioning). `:hover` COLOR rules are kept — hover is a pure pointer
 *     state with no JSX hook and the kol color utilities have no hover variant.
 *   - `.shell-tab`, `.shell-nav-header`, `.shell-toc-expand-button`,
 *     `.toggle-switch-label` are rendered by out-of-package / currently-unused
 *     JSX, so their type is left in place (nothing in this repo's scope carries
 *     a replacement class for them yet).
 * ============================================================================= */

/* =============================================================================
 * SHELL NAVIGATION CLASSES
 * ============================================================================= */

/* Shell Page Header */
.shell-page-header {
  background: var(--kol-surface-primary);
}

/* Shell Tab Row */
.shell-tabrow-items {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  overflow-x: auto;
  padding-top: 8px;
  padding-bottom: 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.shell-tabrow-items::-webkit-scrollbar {
  display: none;
}

/* .shell-tab — structure only. Type + color live inline on the tab element
 * (kol-helper-14 + text-meta / active text-emphasis). The active underline
 * stays here as structure, fired by the `active` marker class. */
.shell-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 8px;
  padding-bottom: 12px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
  text-decoration: none;
}

.shell-tab.active,
.shell-tab:active {
  border-bottom-color: var(--kol-surface-on-primary);
}

/* Sidebar sticky wrappers — hidden scrollbar, still scrollable */
.shell-sidebar-sticky {
  scrollbar-width: none;
}

/* Shell content grid — the rail/main/toc gutter. The gap lives HERE, not as a
 * utility on the element: a gap-8 in the JSX outranked this layer at every
 * width and made the 48px wide step (below, ≥1600px) dead code. */
.shell-content-grid {
  gap: 32px;
}

.shell-sidebar-sticky::-webkit-scrollbar {
  display: none;
}

/* THE EYEBROW ROW — the ONE owner of a rail section header's box (user ruling
 * 2026-08-01). Left and right rails render the same row and composed it
 * differently, so they drifted: the left stacked `.shell-sidebar-toggle` +
 * `.shell-sidebar-label` on the wrapper AND `.shell-sidebar-label` again on
 * the inner label — two margin-owners on one row — plus an inline height on
 * the chevron; the right borrowed `.shell-nav-group-header` (the nav row, a
 * different scale) with one `.shell-sidebar-label`. Same eyebrow, two boxes,
 * no version difference between them: the failure ARCHITECTURE §5 records for
 * cascade layers, pointed at spacing.
 *
 * The rule: an eyebrow row wears ONE box class and NOTHING else beside
 * kol-doc-eyebrow. Two names, by role, sharing one definition so they cannot
 * drift from each other either:
 *
 *   .shell-sidebar-toggle   the eyebrow that collapses its section
 *   .shell-sidebar-label    the eyebrow that is just a label
 *
 * Both own padding AND margin. Do not stack them, do not set y-spacing inline,
 * do not repeat a spacing class on a child. Type/colour come from
 * kol-doc-eyebrow. `pnpm validate:rails` R3 enforces it.
 *
 * Vertical rhythm matches .shell-nav-group-header via --kol-pad-rail-row-y —
 * ledger-2.0 #2.6 ruling (final, user-reviewed 2026-07-15): the rail keeps its
 * quieter label scale (deliberate hierarchy vs the nav's), row rhythm is
 * shared. It is shared by a token now, not by copies of a number. */
.shell-sidebar-toggle,
.shell-sidebar-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--kol-pad-rail-row-y);
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: var(--kol-pad-rail-row-y) 0;
  margin-bottom: var(--kol-spacing-2);
  transition: color 0.15s ease;
}

/* Interactivity is a property of the element, not a second class at the call
 * site — a static eyebrow and a clickable one must not have to remember a
 * different class pair to get the same box. */
.shell-sidebar-toggle,
.shell-sidebar-label:is(button, a, [role='button']) {
  cursor: pointer;
}

.shell-sidebar-toggle:hover,
.shell-sidebar-label:is(button, a, [role='button']):hover {
  color: color-mix(in srgb, var(--kol-surface-on-primary) 72%, transparent);
}

/* NB — the old `.shell-sidebar-label { margin-bottom }` rule was DELETED here
 * (2026-08-01). It was the second box owner: it re-declared the eyebrow's
 * bottom margin below the shared rule above, so an element wearing both
 * classes got its spacing decided by source order. The shared rule owns it. */

/* Sidebar links — layout only; type/color (+ active) in JSX. */
.shell-sidebar-link {
  padding: 4px 0;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.15s ease;
  display: block;
}

.shell-sidebar-link:hover {
  color: color-mix(in srgb, var(--kol-surface-on-primary) 100%, transparent);
}

/* Sidebar action buttons — layout only; type/color in JSX. */
.shell-sidebar-action {
  padding: 4px 0;
  border-radius: 4px;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
}

.shell-sidebar-action:hover {
  color: color-mix(in srgb, var(--kol-surface-on-primary) 100%, transparent);
}

/* TOC expand button — no in-package JSX consumer; kept as-is (icon button). */
.shell-toc-expand-button {
  padding: 2px;
  border: none;
  background: transparent;
  color: color-mix(in srgb, var(--kol-surface-on-primary) 48%, transparent);
  cursor: pointer;
  transition: color 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.shell-toc-expand-button:hover {
  color: color-mix(in srgb, var(--kol-surface-on-primary) 100%, transparent);
}

/* Navigation header label — structure only; type/color inline (kol-helper-10 text-meta). */
.shell-nav-header {
  margin-bottom: 12px;
}

/* THE CHAPTER ROW (the rail's names, user 2026-08-01):
 *
 *   CATEGORY  the eyebrow          .shell-sidebar-toggle / -label
 *   CHAPTER   `Foundations (5)`    .shell-nav-group-header   ← this
 *   PAGE      `Tokens`             .shell-nav-item
 *   SECTION   the right rail's rows (same PAGE row idiom)
 *
 * CHAPTER and PAGE were indistinguishable: both `kol-mono-14`, and the only
 * difference was `.text-default` — which is a COLOUR utility, not type. A parent
 * and its children reading identically is not a hierarchy.
 *
 * The weight is the difference, and it stays INSIDE the one ramp: 700 here
 * against the page row's 100. Not a second type class —
 * R1 exists to stop a second RAMP in the rails, and a weight within one ramp
 * is not one.
 *
 * Layout: same y-rhythm as the eyebrow (--kol-pad-rail-row-y), no bottom
 * margin because .shell-nav-items owns the gap under it. A CATEGORY must never
 * borrow this class — that is how the right rail drifted; use
 * .shell-sidebar-toggle. */
.shell-nav-group-header {
  /* MEDIUM + SHOUT (user ruling 2026-08-01, the settled pair). 700 was tried
   * for one turn and reverted: with the page rows at Thin 100 the weight gap
   * already carries, so the CHAPTER buys its prominence from INK instead —
   * `shout` (88) against the rows' `fg-64`. Weight and colour each doing half
   * the work beats either doing all of it, and 500 keeps the chapter inside
   * the ramp's normal range. */
  font-weight: 500;
  color: var(--kol-fg-shout);
  padding: var(--kol-pad-rail-row-y) 0;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color 0.15s ease;
}

.shell-nav-group-header:hover {
  color: color-mix(in srgb, var(--kol-surface-on-primary) 90%, transparent);
}

/* THE RAIL STACK — the SECTION container, owned here for exactly the reason
 * `.shell-nav-items` below owns the ROW gap (user ruling 2026-08-01, said in
 * anger and said before): *"I HAVE TOLD YOU LEFT AND RIGHT = THE SAME LAYOUT
 * MARGINPADDING"*.
 *
 * The row gap was fixed on 2026-08-01 and the stack above it was not, so one
 * layout shipped as FOUR idioms:
 *
 *   left rail   `flex flex-col gap-6`     ShellChrome.jsx
 *   right rail  `space-y-6`               DocumentationReader.jsx
 *   sidebars    `space-y-4`               ShellSidebar / WorkshopSidebar
 *   rows        `space-y-0`               (the one already fixed)
 *
 * `gap` and `space-y-*` are not the same mechanism either — `space-y` is a
 * margin on every child but the first, so it fights any child that sets its own
 * margin, and the eyebrow box DOES (see the box law above). Flex gap does not.
 *
 * Two rungs, two gaps, one definition each. A rail stack is never a utility. */
.shell-rail-stack {
  display: flex;
  flex-direction: column;
  gap: var(--kol-spacing-6);
}

/* Between GROUPS inside one category — tighter than between categories. The
 * left rail said 16 and the right said 24 for the same relationship. */
.shell-rail-stack-inner {
  display: flex;
  flex-direction: column;
  gap: var(--kol-spacing-4);
}

/* THE TAG SHELF — chips indented to the ROW text edge (user ruling 2026-08-01:
 * "indent the tags like it was a text"). They were flush to the rail's left
 * edge while every row beside them started one indent in, so the one block that
 * is not a row was the only thing setting the rail's left margin. The inset is
 * `.shell-nav-item`'s own left padding, read from the same declaration rather
 * than typed again. */
.shell-rail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kol-spacing-2);
  padding-left: var(--kol-pad-rail-row-x);
  padding-top: var(--kol-spacing-2);
}

/* THE ROW CONTAINER — owns the gap so the two rails cannot disagree. They
 * did: `space-y-0` on one side, `space-y-4` on the other, for the same list. */
.shell-nav-items {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 4px;
}

/* Navigation items — layout only; type/color (+ active) in JSX. */
/* THE PAGE ROW — L3, the class owns the whole look (user ruling 2026-08-01).
 * PAGE in the rail's vocabulary (`Tokens`); the right rail's rows are SECTIONS
 * and wear this same idiom deliberately. Weight stays the ramp's own 400 — the
 * CHAPTER above it carries 500, and that difference IS the hierarchy.
 *
 * `.shell-nav-item` was the shared name and nothing else: every call site
 * hand-wrote its own utility stack around it, so ONE row idiom shipped as NINE
 * strings across five files — `block kol-mono-14 text-default transition-colors
 * focus-visible:ring-focus hover:text-emphasis` in one rail, bare
 * `kol-mono-14` in the other, `flex items-center gap-2 …` for actions. R1/R2
 * locked the TYPE class and nothing locked the stack: the eyebrow-box failure,
 * one rung down.
 *
 * Layout, colour, hover, transition and focus live HERE now. Markup comes from
 * `RailRow`; `validate:rails` R4 fails a hand-written `shell-nav-item`.
 *
 * WEIGHT IS THIN (user ruling 2026-08-01, asked five times).
 *
 * The arithmetic, measured on the H stem at this size:
 *
 *   400 vs 500  1.26 → 1.39   the original pair. Invisible.
 *   300 vs 500  1.11 → 1.39   +25%. Also invisible — applied, correct in the
 *                             cascade, and unseeable.
 *   200 vs 500  0.92 → 1.39   +51%. Still not enough for him.
 *   100 vs 700  0.70 → 1.75   +150%. THE PAIR. Both ends of the usable axis.
 *
 * I argued against 100 on the grounds that it falls under one device pixel and
 * antialiases to a wash. He ruled it anyway, and against 700 rather than 500
 * the contrast carries the hierarchy the stroke alone could not.
 *
 * Renderable only because the family went VARIABLE the same day
 * (kol-typography-mono.css, `wght 100 800`). Under the old static set the
 * lightest cut was 300 and this line would have rounded back to 400. */
.shell-nav-item {
  font-weight: 100;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 12px 4px 20px;
  border: none;
  background: transparent;
  text-align: left;
  border-radius: 0px;
  text-decoration: none;
  /* fg-64 → fg-80 (ShellNavItemInk, user ruling 2026-08-12) */
  color: var(--kol-fg-80);
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
  /* THE TEXT INDENT, named (2026-08-01). It was the last value of the padding
   * shorthand above and nothing else could read it, so the tag shelf beside
   * these rows had to guess and guessed flush-left. Declared after the
   * shorthand deliberately — it overrides that slot and nothing else. */
  padding-left: var(--kol-pad-rail-row-x);
}

.shell-nav-item:hover {
  color: var(--kol-surface-on-primary);
}

/* Reads the quiet ring token, not --kol-fg-32 directly, so this rail is part
 * of the system-wide focus off switch (FocusRingsInConsumers, 2026-08-15).
 * Same value as before — this is a rewiring, not a restyle. */
.shell-nav-item:focus-visible {
  outline: 1px solid var(--kol-focus-ring-quiet);
  outline-offset: -1px;
}

/* THE ACTIVE ROW — `emphasis`, the role, not a raw token (user ruling
 * 2026-08-01). One definition for both rails: the left tree's current PAGE and
 * the right rail's current SECTION are the same state, and where-you-are is the
 * one thing in a rail that earns max ink. It read `var(--kol-surface-on-primary)`
 * — the same value, reached without going through the ladder, which is how a
 * role set ends up with call sites that do not know it exists. */
.shell-nav-item.is-active {
  color: var(--kol-fg-emphasis);
  /* where-you-are steps 100 → 300 in weight beside its emphasis ink
   * (ShellNavItemInk, user ruling 2026-08-12) */
  font-weight: 300;
}

/* THIS PAGE'S OWN ROW — brighter than the rest of the list (user ruling
 * 2026-08-01, twice). The first attempt put `text-emphasis` on the row from the
 * JSX and nothing happened: `.text-emphasis` and `.shell-nav-item` are both
 * single-class selectors in the same cascade layer, and this file loads AFTER
 * kol-opacity.css, so the rail's resting `--kol-fg-64` won every time. A colour
 * utility cannot brighten a row whose own rule sets colour — the modifier has
 * to live beside that rule. Same file, same specificity, declared later. */
.shell-nav-item--own {
  color: var(--kol-fg-emphasis);
  /* 500 → 300 (ShellNavItemInk, 2026-08-12): the --own tags block at 500 WAS
   * the "one side light, one side medium" inconsistency — verified by
   * computed-style probe: every non---own row in both rails rests at 100.
   * Emphasis weight is now ONE step (300), shared with .is-active. */
  font-weight: 300;
}

/* …AND THE REST STEP DOWN (user ruling 2026-08-01: *"no needs more"*). Raising
 * the page's own tags to full ink was not enough on its own, because the rows
 * beneath them sat at the rail's resting `fg-64` — close enough that the two
 * ranks read as one list with a slightly brighter top. Contrast is a GAP, not a
 * value: the other rank drops to `meta`, so the distance is 100 against 48
 * rather than 100 against 64, and the weight moves too. */
.shell-nav-item--muted {
  color: var(--kol-fg-meta);
}

/* The trailing slot: counts, doc numbers, anything pushed right. */
.shell-nav-item-trailing {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--kol-fg-48);
}

.shell-nav-item-doc {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.shell-nav-item-id {
  flex-shrink: 0;
}

.shell-nav-item-title {
  min-width: 0;
}

/* Wide viewport nav layout bumps */
@media (min-width: 1600px) {
  .shell-tabrow-items {
    gap: 32px;
  }

  .shell-tab {
    gap: 8px;
    padding-top: 10px;
    padding-bottom: 14px;
  }

  .shell-tab svg {
    width: 18px;
    height: 18px;
  }

  .shell-sidebar-action svg {
    width: 18px;
    height: 18px;
  }

  .shell-nav-item {
    padding: 5px 14px 5px 24px;
  }

  .toggle-switch-label {
    font-size: 13px;
  }

  /* Wide grid gap */
  .shell-content-grid {
    gap: 48px;
  }
}

/* =============================================================================
 * DOCS CONTENT CLASSES
 * =============================================================================
 * Content-rendering styles for documentation pages. The reader types every
 * element explicitly through the kol-doc-* roles (workshop 0.3.4 retype —
 * prose is the blog/CMS voice, never docs surfaces), so the per-element
 * `.docs-article *` type rules that used to live here are gone. Only
 * structural doc chrome (cards, frontmatter layout, callout rule, media,
 * tag graph) remains.
 */

/* Documentation Card (used in inventory listing) */
.docs-card {
  display: block;
  padding: 16px;
  border-radius: var(--kol-radius-sm);
  border: 1px solid;
  border-color: color-mix(in srgb, var(--kol-surface-on-primary) 4%, transparent);
  background: transparent;
  transition: all 0.2s ease;
  text-decoration: none;
  color: inherit;
}

.docs-card:hover {
  border-color: color-mix(in srgb, var(--kol-surface-on-primary) 12%, transparent);
  background: color-mix(in srgb, var(--kol-surface-on-primary) 2%, transparent);
}

.docs-card:hover * {
  color: inherit;
}

/* Compact doc card for sidebar */
.docs-card--compact {
  padding: 8px 12px;
  border-radius: var(--kol-radius-sm);
}

.docs-title-link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Doc meta row — layout only; type/color in JSX (kol-helper-10 text-default). */
.docs-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Article shell — structural only; body type owned by `.kol-prose`. */
.docs-article {
  width: 100%;
  margin-inline: 0;
  container-type: inline-size;
}

@media (min-width: 768px) {
  .docs-article .kol-codeblock { padding: 24px; }
}

@media (min-width: 1024px) {
  .docs-article .kol-codeblock { padding: 32px; }
}

/* Frontmatter properties block */
.docs-frontmatter {
  border-bottom: 1px solid color-mix(in srgb, var(--kol-surface-on-primary) 8%, transparent);
  padding-bottom: 20px;
  margin-bottom: 24px;
}

.docs-frontmatter .shell-sidebar-label {
  margin-block-end: 8px;
}

.docs-frontmatter-row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 4px 0;
}

/* Frontmatter key — layout only; type/color in JSX (kol-helper-12 text-meta). */
.docs-frontmatter-key {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}

/* THE VALUE COLUMN — it had no rule at all, so it was an auto-width flex item
 * next to a fixed-width key: a long `description` or a `sources` path list had
 * nothing telling it to shrink, and ran straight off the right edge of the
 * panel (user screenshot 2026-08-01). `min-width: 0` is the half of the flex
 * contract that was missing; `overflow-wrap: anywhere` handles the paths,
 * which have no spaces to break at. */
.docs-frontmatter-value {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* A MULTI-VALUE FIELD IS A LIST, one per line. Its 2026-08-01 scroll ceiling
 * (11rem + overscroll contain per field) is REPEALED 2026-08-09 — per-field
 * scrollboxes captured the page wheel on the way down; the cap lives on the
 * WHOLE panel now (.docs-frontmatter-body--capped below). */
.docs-frontmatter-list {
  display: flex;
  flex-direction: column;
  gap: var(--kol-spacing-1);
}

/* THE PANEL COLLAPSES, THE PAGE SCROLLS (2026-08-09 user call). One cap on
 * the whole panel behind a fade, expanded in normal flow via the toggle —
 * zero scroll regions inside the panel. */
.docs-frontmatter-body { position: relative; }
.docs-frontmatter-body--capped {
  max-height: 20rem;
  overflow: hidden;
}
.docs-frontmatter-fade {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 4rem;
  background: linear-gradient(to bottom, transparent, var(--kol-surface-primary));
  pointer-events: none;
}
/* Toggle layout only — type/color ride kol-helper-12 text-meta in JSX. */
.docs-frontmatter-toggle {
  display: flex;
  align-items: center;
  gap: var(--kol-spacing-2);
  margin-block-start: var(--kol-spacing-2);
  cursor: pointer;
}
.docs-frontmatter-toggle:hover { color: var(--kol-surface-on-primary); }

/* `.tag` was the Tag component's base class until it was rebuilt on Pill's
 * model (2026-08-01) and the scheme became `kol-tag`. The selector has matched
 * nothing since. */
.docs-frontmatter-row:has(.kol-tag) {
  align-items: center;
}

.docs-color-swatch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.docs-color-swatch-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.docs-image {
  max-width: 100%;
  height: auto;
  border-radius: var(--kol-radius-sm);
  margin-block: 1.5rem;
}

.docs-meta-inline {
  margin-block-end: 1rem;
}

.docs-article hr {
  margin-block: 2rem;
  border: none;
  border-top: 1px solid color-mix(in srgb, var(--kol-surface-on-primary) 12%, transparent);
}

.docs-divider {
  width: 100%;
  margin-block: 2rem;
}

.docs-divider > div {
  background: color-mix(in srgb, var(--kol-surface-on-primary) 8%, transparent) !important;
}

/* Callout / blockquote rule — structural; only the broken palette token fixed. */
.docs-callout {
  padding: 0;
  padding-left: 16px;
  margin-block-end: 1.5rem;
  background: none;
  border: none;
  border-left: 1px solid var(--kol-color-red-200);
}

/* Inline hashtag pills — layout only; type + resting bg/color in JSX
 * (kol-helper-12 bg-fg-08 text-strong). Hover state kept. */
.inline-tag-pill {
  padding: 2px 8px;
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.inline-tag-pill:hover {
  background: var(--kol-accent-primary);
  color: var(--kol-surface-primary);
}

/* View toggle buttons — no in-package JSX consumer; layout kept, type stripped. */
.docs-view-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid color-mix(in srgb, var(--kol-surface-on-primary) 16%, transparent);
  border-radius: var(--kol-radius-sm);
  background: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.docs-view-toggle:hover {
  background: color-mix(in srgb, var(--kol-surface-on-primary) 8%, transparent);
  color: color-mix(in srgb, var(--kol-surface-on-primary) 72%, transparent);
}

.docs-view-toggle.active {
  background: color-mix(in srgb, var(--kol-accent-primary) 16%, transparent);
  border-color: color-mix(in srgb, var(--kol-accent-primary) 40%, transparent);
  color: var(--kol-accent-primary);
}

.docs-view-toggle--small {
  padding: 4px 8px;
  border-radius: 4px;
}

/* Tag Graph - Main content area */
.tag-graph-container {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.tag-graph-svg {
  display: block;
  margin: 0 auto;
}

/* Tag graph tooltip — layout only; type/color in JSX (kol-helper-10 text-emphasis). */
.tag-graph-tooltip {
  background: color-mix(in srgb, var(--kol-surface-primary) 92%, transparent);
  padding: 4px 8px;
  border-radius: 4px;
  pointer-events: none;
  white-space: nowrap;
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
}

/* Tag Graph - Sidebar */
.tag-graph-sidebar {
  width: 100%;
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  border-radius: var(--kol-radius-sm);
  background: color-mix(in srgb, var(--kol-surface-on-primary) 4%, transparent);
}

.tag-graph-sidebar .tag-graph-svg {
  width: 100%;
  height: 100%;
}

.tag-graph-sidebar .tag-graph-tooltip {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  bottom: auto;
  z-index: 10;
}

.tag-graph-sidebar-wrapper {
  margin-top: 4px;
}