/* ==========================================================================
   AgensGraph 2.18 documentation — full re-skin of Shibuya to the approved
   (Mintlify-clean) design. Loaded by products/docs/agensgraph/18/, and by
   agensgraph-ai/ and agensgraph-driver/ with agensgraph-libraries.css on top.
   Legacy 2.1–2.17 never reference this file.

   Strategy: Shibuya derives its whole look from semantic CSS variables
   (--sy-c-* colours, --yue-c-* content) sitting on top of Radix scales.
   We (1) retint those variables to a pure-neutral palette + brand-blue accent,
   then (2) patch the individual components (top bar, sidebar, TOC, code,
   headings, tables, notes, badges, tabs) to the approved treatment.
   ========================================================================== */

/* ---- 1. Brand typeface: Pretendard (served from ../fonts) ---- */
@font-face { font-family:'Pretendard'; src:url('../fonts/Pretendard-Regular.woff2') format('woff2');  font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Pretendard'; src:url('../fonts/Pretendard-Medium.woff2') format('woff2');   font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Pretendard'; src:url('../fonts/Pretendard-SemiBold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Pretendard'; src:url('../fonts/Pretendard-Bold.woff2') format('woff2');     font-weight:700; font-style:normal; font-display:swap; }

:root {
  --sy-f-text: 'Pretendard', var(--sy-f-sys);
  --sy-f-heading: 'Pretendard', var(--sy-f-sys);
  --ag-lside-w: 18rem;              /* resizable sidebar width (agensgraph-18.js) */
  --ag-content-max: 50rem;          /* reading measure */
}

/* ---- 2. Palette: pure neutrals + one brand-blue accent ---- */
html.light, :root {
  --sy-c-background: #ffffff;
  --sy-c-surface: #f8fafc;
  --sy-c-text: #384150;
  --sy-c-heading: #0f1522;
  --sy-c-bold: #0f1522;
  --sy-c-light: #6b7280;
  --sy-c-border: #e7e9ee;
  --sy-c-divider: #eef0f4;

  --sy-c-link: #004dff;
  --sy-c-link-hover: #0038c0;
  --accent-3: #eef3ff;
  --accent-a3: rgba(0, 77, 255, .06);
  --accent-9: #004dff;
  --accent-10: #0341da;
  --accent-11: #0b3aad;
  --accent-a10: rgba(0, 77, 255, .90);
  --accent-a11: #0b3aad;

  /* content (yue) */
  --yue-c-text: #384150;
  --yue-c-code-text: #384150;
  --yue-c-code-background: #f1f3f7;
  --yue-c-th-background: #f8fafc;
  --yue-c-table-border: #e7e9ee;
  --yue-c-th-border: #e0e3ea;
  --yue-c-td-border: #eef0f4;
  --yue-c-row-background: #fbfcfe;
  --yue-c-quote-border: #e0e3ea;
  --yue-c-quote-symbol: #9aa3b2;

  --ag-code-bg: #f7f8fa;
  --ag-code-border: #e6e8ec;
}
html.dark {
  --sy-c-background: #0a0a0b;
  --sy-c-surface: #101013;
  --sy-c-text: #c7cbd3;
  --sy-c-heading: #f4f4f5;
  --sy-c-bold: #f4f4f5;
  --sy-c-light: #8b8f99;
  --sy-c-border: #232329;
  --sy-c-divider: #1a1a1f;

  --sy-c-link: #6f9dff;
  --sy-c-link-hover: #97b8ff;
  --accent-3: #16233f;
  --accent-a3: rgba(111, 157, 255, .13);
  --accent-9: #3f6fff;
  --accent-10: #5b8bff;
  --accent-11: #a7c3ff;
  --accent-a10: rgba(120, 152, 255, .90);
  --accent-a11: #a7c3ff;

  --yue-c-text: #c7cbd3;
  --yue-c-code-text: #e6e6e6;
  --yue-c-code-background: #17171b;
  --yue-c-th-background: #101013;
  --yue-c-table-border: #232329;
  --yue-c-th-border: #2a2a31;
  --yue-c-td-border: #1a1a1f;
  --yue-c-row-background: #0d0d0f;
  --yue-c-quote-border: #2a2a31;
  --yue-c-quote-symbol: #5f5f68;

  --ag-code-bg: #101013;
  --ag-code-border: #26262c;
}

/* ---- 3a. Top bar: clean, hairline bottom border ---- */
.sy-head {
  background: var(--sy-c-background);
  border-bottom: 1px solid var(--sy-c-border);
}
.sy-head-brand strong { font-weight: 700; letter-spacing: -.01em; }

/* ---- 3b. Left sidebar: neutral rail, quiet items, simple active tint ---- */
.sy-lside { border-right: 1px solid var(--sy-c-border); }
.sy-lside .sy-scrollbar a {
  border-radius: 8px;
  padding: 5px 10px;          /* internal padding so the active pill isn't cramped */
  color: var(--sy-c-text);
  font-weight: 450;
}
.sy-lside .sy-scrollbar a:hover {
  background: var(--sy-c-surface);
  color: var(--sy-c-heading);
}
/* active LEAF only (the current page's own self-link, href="#"): accent text,
   no left colour bar. Ancestor .current links (the section caption and the
   group) keep their normal muted/dark styling instead of turning blue. */
.sy-lside a.current[href="#"] {
  color: var(--sy-c-link) !important;
  font-weight: 600;
  box-shadow: none !important;
  border-inline-start: 0 !important;
}
/* section captions read as quiet uppercase labels */
.sy-lside .caption, .sy-lside p.caption, .sy-lside .caption-text {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--sy-c-light);
}

/* ---- 3c. Content: centred reading measure ----
   width:100% keeps the column filled to its max on every page. Without it a
   sparse page (e.g. a section-landing index with only a line of prose) lets the
   column shrink-wrap to its content, and the auto margins then centre that
   narrow box — so the text floats far from the sidebar. Filling the column
   makes the centred reading measure sit consistently on landing and content
   pages alike. */
.sy-main .max-w-6xl { width: 100%; max-width: var(--ag-content-max); margin-inline: auto; }

/* ---- 3d. Right on-page TOC: compact, thin rail, accent active.
   Match the artifact's size (~13px / .82rem) — Shibuya's default (16px, from
   body) makes the map look oversized. ---- */
.sy-rside-inner .localtoc { border-inline-start: 1px solid var(--sy-c-border); font-size: .82rem; }
.sy-rside-inner .localtoc > ul li { margin-top: .15rem; margin-bottom: .15rem; }
.sy-rside-inner .localtoc a {
  display: block;
  color: var(--sy-c-light);
  border-inline-start: 2px solid transparent;
  margin-inline-start: -1px;
  padding: 3px 0 3px 14px;
  font-size: .82rem;
  line-height: 1.45;
}
.sy-rside-inner .localtoc a:hover { color: var(--sy-c-text); }
.sy-rside-inner .localtoc a.current,
.sy-rside-inner .localtoc .current > a {
  color: var(--sy-c-link);
  border-inline-start-color: var(--sy-c-link);
  font-weight: 600;
}

/* ---- 4. Headings: lighter weights, hairline under H2 ---- */
.yue h1 { font-weight: 700; letter-spacing: -.02em; }
.yue h2 {
  font-weight: 620;
  letter-spacing: -.01em;
  border-bottom: 1px solid var(--sy-c-border);
  padding-bottom: .32em;
  margin-top: 2.4em;
}
.yue h3 { font-weight: 600; }

/* ---- 5. Code: system-mode, neutral surface, subtle border ---- */
.yue .highlight {
  background: var(--ag-code-bg);
  border: 1px solid var(--ag-code-border);
  border-radius: 10px;
}
.yue .highlight pre { background: transparent; }
/* inline code: neutral, bordered (not accent-tinted) */
.yue :not(pre) > code {
  background: var(--yue-c-code-background);
  border: 1px solid var(--sy-c-border);
  border-radius: 5px;
  padding: .5px 5px;
  color: var(--sy-c-text);
  font-size: .86em;
}

/* ---- 6. Tables: neutral header, hairline rules ---- */
.yue table th { font-weight: 600; }

/* ---- 7. Notes: quiet left-ruled annotations (NOT tinted banners) ---- */
.yue .admonition {
  border: 0;
  border-inline-start: 2px solid var(--sy-c-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 2px 0 2px 16px;
  margin: 1.6em 0;
}
.yue .admonition > .admonition-title {
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--sy-c-light);
  background: transparent;
  padding: 0;
  margin: 0 0 .25em;
}
.yue .admonition > .admonition-title::before,
.yue .admonition > .admonition-title::after { content: none !important; }
.yue .admonition > .admonition-title svg { display: none; }
/* Shibuya draws its note icon as a filled circle on the CONTAINER (::before/
   ::after) — remove it so notes are clean left-ruled annotations. */
.yue .admonition::before,
.yue .admonition::after { content: none !important; display: none !important; }
.yue .admonition.note { border-inline-start-color: var(--sy-c-border); }
.yue .admonition.gql-conformance { border-inline-start-color: #1f9d57; }
.yue .admonition.gql-conformance > .admonition-title { color: #157a43; }
html.dark .yue .admonition.gql-conformance > .admonition-title { color: #4ecb83; }

/* ---- 8. Badges: quiet GQL tag, restrained "New in 2.18" ---- */
.sd-badge {
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .01em;
  border-radius: 6px;
  padding: .2em .55em;
  vertical-align: middle;
}

/* ---- 9. Tabs (sphinx-design): clean underline-active ---- */
.sd-tab-set > label.sd-tab-label {
  color: var(--sy-c-light);
  font-weight: 600;
  font-size: .84rem;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: .5em .9em;
  opacity: 1;
}
.sd-tab-set > label.sd-tab-label:hover { color: var(--sy-c-heading); }
.sd-tab-set > input:checked + label.sd-tab-label {
  color: var(--sy-c-heading);
  border-bottom-color: var(--sy-c-link);
}
.sd-tab-set > .sd-tab-content {
  border: 0;
  border-top: 1px solid var(--sy-c-border);
  padding-inline: 0;
}

/* ---- Hide Shibuya's copy-page button (not in the approved design) ---- */
.copy-page-wrapper { display: none !important; }

/* ---- Synopsis: a formal syntax-definition block ---- */
.yue .ag-synopsis {
  font-family: var(--sy-f-mono);
  font-size: .92rem;
  line-height: 1.75;
  background: var(--sy-c-surface);
  border: 1px solid var(--sy-c-border);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 1.2em 0 .6em;
  overflow-x: auto;
  white-space: pre-wrap;
  color: var(--sy-c-heading);
}
.yue .ag-synopsis .s-kw { color: var(--sy-c-heading); font-weight: 700; }
.yue .ag-synopsis .s-ph { color: var(--sy-c-link); font-style: italic; }
.yue .ag-synopsis .s-op { color: var(--sy-c-light); }
.yue .ag-notation {
  font-size: .82rem;
  color: var(--sy-c-light);
  margin: 0 0 1.4em;
}
.yue .ag-notation .s-kw { font-weight: 700; color: var(--sy-c-text); }
.yue .ag-notation .s-ph { font-style: italic; color: var(--sy-c-link); }

/* ---- Parameters: bordered two-column card (from a definition list) ---- */
.yue dl.simple {
  display: grid;
  grid-template-columns: minmax(140px, 200px) 1fr;
  border: 1px solid var(--sy-c-border);
  border-radius: 10px;
  margin: 1.2em 0;
  overflow: hidden;
}
.yue dl.simple > dt {
  padding: 13px 18px;
  margin: 0;
  border-top: 1px solid var(--sy-c-border);
  font-family: var(--sy-f-mono);
  font-weight: 600;
  font-size: .86rem;
  color: var(--sy-c-link);
}
.yue dl.simple > dd {
  padding: 13px 18px;
  margin: 0;
  border-top: 1px solid var(--sy-c-border);
  color: var(--sy-c-text);
}
.yue dl.simple > dt:first-of-type,
.yue dl.simple > dd:first-of-type { border-top: 0; }

/* ==========================================================================
   Resizable left sidebar (drag handle added by agensgraph-18.js)
   ========================================================================== */
@media (min-width: 768px) {
  .sy-lside { width: var(--ag-lside-w, 18rem) !important; position: relative; }
}
.ag-resize-handle {
  position: absolute; top: 0; right: -3px; width: 7px; height: 100%;
  cursor: col-resize; z-index: 20; background: transparent;
}
.ag-resize-handle::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 3px; width: 1px; background: transparent;
}
.ag-resize-handle:hover::after,
.ag-resize-handle.ag-dragging::after { background: var(--sy-c-link); }
body.ag-resizing { cursor: col-resize; user-select: none; }
@media (max-width: 767px) { .ag-resize-handle { display: none; } }

/* ==========================================================================
   Parity refinements — align the Shibuya render with the finalized artifact
   ========================================================================== */

/* Layout: Shibuya centers its whole layout inside a 90rem container, so on wide
   screens the top bar + sidebar float in from the left. The approved design is
   full-width with the sidebar pinned to the left edge and the content centered
   in the reading area — so un-cap the container. (The section-landing float is
   handled where the reading column is sized: filling the column keeps sparse
   pages centered like every other page instead of shrink-wrapping narrow.) */
.sy-container { max-width: none; }

/* Brand lockup beside the mark: parent company "skaiworldwide" bold on top,
   the product "AgensGraph" lighter below. (Shibuya hides the <strong> when a
   logo image is set; we bring it back and restyle it as a two-line lockup —
   the <strong> text is "AgensGraph" (the project), and ::before adds the
   company line above it.) */
/* Keep the mark and the text-lockup on ONE row (the flex-column <strong> is
   block-level and would otherwise drop below the inline mark). */
.sy-head-brand { display: flex !important; flex-direction: row; align-items: center; gap: 10px; }
.sy-head-brand strong {
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  gap: 1px;
  margin-left: 0;
  line-height: 1.04;
  font-weight: 400;                 /* "AgensGraph" (the product line) */
  font-size: .8rem;
  color: var(--sy-c-light);
}
.sy-head-brand strong::before {
  content: "SKAIWorldwide";         /* parent company, prominent */
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: -.01em;
  color: var(--sy-c-heading);
}

/* Left sidebar: uppercase, letter-spaced, muted section (level-1) labels */
/* .sy-scrollbar in the selector raises specificity above the leaf-link
   `.sy-lside .sy-scrollbar a{font-size:.875rem}` rule so this size actually wins. */
.sy-lside .sy-scrollbar .toctree-l1 > a {
  display: block;
  text-transform: uppercase;
  letter-spacing: .02em;
  font-size: .72rem;
  font-weight: 700;
  color: var(--sy-c-light);
  padding-right: 22px;        /* reserve room for the expand chevron so it never collides */
  white-space: nowrap;        /* keep long captions ("Query Language Reference") on one line */
  overflow: hidden;
  text-overflow: ellipsis;
}
.sy-lside .toctree-l1 > a:hover { color: var(--sy-c-text); background: transparent; }
/* filled pill on the active leaf (current page self-link). */
.sy-lside a.current[href="#"] {
  display: block;
  background: rgba(0, 77, 255, .10);
  border-radius: 7px;
}
html.dark .sy-lside a.current[href="#"] { background: rgba(111, 157, 255, .16); }
/* GQL tags injected into the nav by agensgraph-18.js */
.ag-gql-tag {
  font-family: var(--sy-f-mono);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .03em;
  border: 1px solid var(--sy-c-border);
  border-radius: 5px;
  padding: 0 4px;
  margin-left: 6px;
  color: var(--sy-c-light);
  vertical-align: middle;
}
.sy-lside a.current .ag-gql-tag {
  border-color: color-mix(in srgb, var(--sy-c-link) 45%, transparent);
  color: var(--sy-c-link);
}

/* Right on-page TOC: label + active item (Shibuya marks li.active) */
.sy-rside-inner .localtoc h3 {
  text-transform: uppercase;
  letter-spacing: .09em;
  font-size: .7rem;
  font-weight: 700;
  color: var(--sy-c-light);
  margin: 0 0 .9em;
}
.sy-rside-inner .localtoc li.active > a,
.sy-rside-inner .localtoc a.active {
  color: var(--sy-c-link);
  border-inline-start-color: var(--sy-c-link);
  font-weight: 600;
}

/* Examples: wrap the tabs in a bordered container, code flush inside */
.yue .sd-tab-set {
  border: 1px solid var(--sy-c-border);
  border-radius: 10px;
  overflow: hidden;
  margin: 1.2em 0;
}
.yue .sd-tab-set > label.sd-tab-label { padding-inline: 1em; }
.yue .sd-tab-set > .sd-tab-content { padding: 0; border-top: 1px solid var(--sy-c-border); }
.yue .sd-tab-set > .sd-tab-content > .highlight { border: 0; border-radius: 0; margin: 0; }

/* Synopsis-conventions link stays blue (yue makes content links dark) */
.yue .ag-notation a { color: var(--sy-c-link); text-decoration: none; }
.yue .ag-notation a:hover { text-decoration: underline; }

/* Code palette matched to the artifact — light: keyword purple, string green,
   number brown, function blue, comment/operator muted. */
.yue .highlight .k, .yue .highlight .kn, .yue .highlight .kd,
.yue .highlight .kr, .yue .highlight .kt, .yue .highlight .kp { color: #8250df !important; }
.yue .highlight .s, .yue .highlight .s1, .yue .highlight .s2,
.yue .highlight .sb, .yue .highlight .sc, .yue .highlight .dl { color: #0a7d33 !important; }
.yue .highlight .mi, .yue .highlight .mf, .yue .highlight .m, .yue .highlight .il { color: #953800 !important; }
.yue .highlight .nf, .yue .highlight .fm { color: #0550ae !important; }
.yue .highlight .c, .yue .highlight .c1, .yue .highlight .cm { color: #6e7781 !important; font-style: italic; }
.yue .highlight .o, .yue .highlight .p { color: #57606a !important; }
html.dark .yue .highlight .k, html.dark .yue .highlight .kn, html.dark .yue .highlight .kd,
html.dark .yue .highlight .kr, html.dark .yue .highlight .kt, html.dark .yue .highlight .kp { color: #c4a7ff !important; }
html.dark .yue .highlight .s, html.dark .yue .highlight .s1, html.dark .yue .highlight .s2,
html.dark .yue .highlight .sb, html.dark .yue .highlight .sc, html.dark .yue .highlight .dl { color: #7ee787 !important; }
html.dark .yue .highlight .mi, html.dark .yue .highlight .mf, html.dark .yue .highlight .m, html.dark .yue .highlight .il { color: #ffab70 !important; }
html.dark .yue .highlight .nf, html.dark .yue .highlight .fm { color: #79c0ff !important; }
html.dark .yue .highlight .c, html.dark .yue .highlight .c1, html.dark .yue .highlight .cm { color: #8b949e !important; }
html.dark .yue .highlight .o, html.dark .yue .highlight .p { color: #a1a1aa !important; }

/* Desktop breadcrumb: Shibuya hides it >=1280px (it's a mobile nav bar there).
   Show it as a quiet trail above the H1, aligned with the centered content. */
@media (min-width: 1280px) {
  .sy-breadcrumbs { display: block; position: static; background: transparent; padding: 0; z-index: auto; }
  .sy-breadcrumbs .sy-breadcrumbs-inner { max-width: var(--ag-content-max); margin-inline: auto; border-bottom: 0; padding: 1.7rem 3rem 0; }
  .sy-breadcrumbs .js-menu { display: none !important; }
}
.sy-breadcrumbs ol { font-size: .82rem; }
.sy-breadcrumbs ol a { color: var(--sy-c-light); }
.sy-breadcrumbs ol strong { font-weight: 600; color: var(--sy-c-text); }

/* Title badges: rendered as a clean row directly beneath the H1. (Inline-with-
   title, as in the static mockup, is impractical on Shibuya without polluting
   the sidebar nav title, so we keep the standard below-title placement.) */
.yue h1 + p:has(.sd-badge) { margin-top: .5em; margin-bottom: .2em; }

/* Language switcher rendered as EN / 한국어 text toggles (template override) */
.ag-lang-toggle { display: inline-flex; align-items: center; gap: 2px; margin: 0 2px; }
.ag-lang-toggle a { padding: 5px 8px; border-radius: 7px; font-size: .82rem; font-weight: 600; color: var(--sy-c-light); }
.ag-lang-toggle a:hover { color: var(--sy-c-text); }
.ag-lang-toggle a.is-active { color: var(--sy-c-heading); background: var(--sy-c-surface); }

/* ---- Typography size: match the artifact (15px content, tighter rhythm) ---- */
.yue { font-size: 0.9375rem; line-height: 1.7; }
.yue p, .yue li { line-height: 1.7; }
.yue h1 { font-size: 2.15rem; }
.yue h2 { font-size: 1.35rem; }
.yue h3 { font-size: 1.06rem; }
.sy-lside .sy-scrollbar a { font-size: .875rem; }

/* ---- Navbar: solid (not frosted/translucent), single hairline bottom border.
   Shibuya's .sy-head is transparent with a blurred .sy-head-blur using a
   translucent dropback fill (a grey in dark) — make it solid + match content. */
.sy-head-blur {
  background-color: var(--sy-c-background) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* ---- Search: bordered pill (Shibuya default is a filled surface, no border) ---- */
/* Match the artifact: transparent fill (so it sits on the navbar, not a near-
   white blob) with a clearly-visible border that defines the pill; hover just
   darkens the border — the fill never changes. */
.searchbox input {
  background: transparent !important;
  border: 1px solid var(--sy-c-border);
  border-radius: 8px;
  font-size: .88rem;
}
html.light .searchbox input { border-color: #d4d8e0; }
html.dark  .searchbox input { border-color: #34343d; }
html.light .searchbox input:hover { border-color: #a9afbb; }
html.dark  .searchbox input:hover { border-color: #4c4c57; }
.searchbox input:focus { border-color: var(--sy-c-link); }

/* ---- Copy button on code blocks: always visible (the artifact shows one) ---- */
.yue .highlight .copybtn, .yue div[class*="highlight-"] .copybtn { opacity: 1 !important; }

/* ---- Sidebar active branch: Shibuya recolours the current level-2 item's left
   guide blue (.globaltoc li.toctree-l2.current{border-color:var(--sy-c-link)}).
   Keep the guide neutral so the pill is the ONLY active highlight — no left
   colour bar. ---- */
.globaltoc li.toctree-l3.current,
.globaltoc li.toctree-l2.current,
.globaltoc li.toctree-l1.current { border-color: var(--sy-c-border); }

/* ---- On-page map (right TOC): show only top-level sections. Some carried-over
   pages nest 3-4 heading levels (e.g. data-types: title -> H3 -> H4 = ~50
   entries), which makes the map unusably long. Hide the nested level. ---- */
.sy-rside-inner .localtoc ul ul { display: none; }

/* ==========================================================================
   Navbar polish + ⌘K command-palette search (from the approved artifact)
   ========================================================================== */

/* Search box acts as a trigger button that opens the modal */
.searchbox { min-width: 220px; }
.searchbox input { cursor: pointer; }
/* Breathing room so the top-right elements (search / version / language / icons)
   don't collide. */
.sy-head-extra { gap: 12px; }
.sy-head-actions { margin-left: 8px; }
/* Fix the odd gradient/inset-shadow on the "/" (now "⌘K") chip → flat chip */
.searchbox kbd {
  background: var(--sy-c-surface) !important;
  box-shadow: none !important;
  border: 1px solid var(--sy-c-border) !important;
  color: var(--sy-c-light) !important;
  font-family: var(--sy-f-text) !important;
  font-weight: 600 !important;
  font-size: .68rem !important;
  border-radius: 5px !important;
  padding: 2px 6px !important;
}

/* Version switcher: clean bordered pill (no divider bar), soft dropdown */
.nav-versions button {
  border-right: 0 !important;
  border: 1px solid var(--sy-c-border) !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  color: var(--sy-c-text) !important;
  font-size: .8rem !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}
.nav-versions button:hover { border-color: var(--sy-c-light) !important; }
.nav-versions button > i { display: inline-block !important; color: var(--sy-c-light); }
.nav-versions-choices {
  box-shadow: 0 10px 30px -10px rgba(20, 26, 36, .3) !important;
  border: 1px solid var(--sy-c-border);
  border-radius: 10px !important;
  padding: 6px !important;
  top: 3.2rem !important;
}
.nav-versions-choices a { border-radius: 7px; font-size: .84rem; }
.nav-versions-choices a:hover { background: var(--accent-a3) !important; color: var(--sy-c-link) !important; }

/* ---- Command palette modal ---- */
.ag-cmdk-backdrop {
  position: fixed; inset: 0; z-index: 200; display: none;
  background: rgba(10, 12, 20, .5); backdrop-filter: blur(3px);
}
.ag-cmdk-backdrop.open { display: block; }
.ag-cmdk {
  position: fixed; z-index: 201; top: 13vh; left: 50%; transform: translateX(-50%);
  width: min(580px, 92vw); max-height: 68vh; display: none; flex-direction: column;
  background: var(--sy-c-background); color: var(--sy-c-text);
  border: 1px solid var(--sy-c-border); border-radius: 14px;
  box-shadow: 0 28px 70px -18px rgba(0, 0, 0, .5); overflow: hidden;
  font-family: var(--sy-f-text);
}
.ag-cmdk.open { display: flex; }
.ag-cmdk-top { display: flex; align-items: center; gap: 11px; padding: 14px 16px; border-bottom: 1px solid var(--sy-c-border); }
.ag-cmdk-top svg { width: 18px; height: 18px; color: var(--sy-c-light); flex: none; }
.ag-cmdk input {
  flex: 1; border: 0; background: transparent; outline: 0;
  font-family: var(--sy-f-text); font-size: 1rem; color: var(--sy-c-text);
}
.ag-cmdk input::placeholder { color: var(--sy-c-light); }
.ag-cmdk-list { overflow-y: auto; padding: 7px; }
.ag-cmdk-item {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px;
  cursor: pointer; color: var(--sy-c-text); text-decoration: none; font-size: .92rem;
}
.ag-cmdk-item svg { width: 15px; height: 15px; color: var(--sy-c-light); flex: none; }
.ag-cmdk-item small { color: var(--sy-c-light); margin-left: auto; font-size: .76rem; padding-left: 10px; }
.ag-cmdk-item.sel, .ag-cmdk-item:hover { background: var(--accent-a3); color: var(--sy-c-link); }
.ag-cmdk-item.sel svg, .ag-cmdk-item:hover svg { color: var(--sy-c-link); }
.ag-cmdk-empty { padding: 26px 16px; color: var(--sy-c-light); font-size: .9rem; text-align: center; }
.ag-cmdk-foot { border-top: 1px solid var(--sy-c-border); padding: 9px 14px; font-size: .74rem; color: var(--sy-c-light); display: flex; gap: 16px; }
.ag-cmdk-foot span { display: inline-flex; align-items: center; gap: 5px; }
.ag-cmdk-foot kbd { font-family: var(--sy-f-mono); border: 1px solid var(--sy-c-border); border-radius: 4px; padding: 0 5px; font-size: .7rem; }

/* ---- Theme toggle icon: show the mode you'll switch TO (like the artifact):
   moon while in light, sun while in dark — Shibuya's default shows the current
   mode (the reverse). Auto keeps the combined sun-moon glyph. ---- */
[data-color-mode="light"] .theme-switch .theme-icon { --icon-url: var(--lucide-moon-url); }
[data-color-mode="dark"]  .theme-switch .theme-icon { --icon-url: var(--lucide-sun-url); }