/* IvyLabs Wiki chrome. Every value comes from the BostonIvy tokens (tokens.css, built from design.json), in the clean
   (青藤) style, light or dark. The tokens also pick the right fonts for each language through :lang(). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 72px; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-canvas); color: var(--text-primary);
  font: var(--type-body); letter-spacing: var(--type-body-tracking); }
a { color: var(--accent-text); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: var(--focus-width, 2px) solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }
img { max-width: 100%; }
code, kbd, pre { font-family: var(--font-mono); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 8px; top: -48px; padding: 8px 12px; background: var(--bg-surface); border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-sm); z-index: 20; }
.skip:focus { top: 8px; }
/* Inter's plain capital I reads as a lower-case l in "IvyLabs"; cv08 gives it serifs, as in the banners. Google Fonts
   drops cv08, so the brand name uses a self-hosted Latin subset of Inter (SIL OFL 1.1, fonts/inter-ofl.txt). */
@font-face { font-family: "IvyLabs Brand"; src: url("/fonts/inter-brand.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
  min-height: 56px; padding: var(--space-2) var(--space-6); background: var(--bg-sidebar); border-bottom: var(--border-width) solid var(--border-default); }
.brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--text-primary); text-decoration: none; }
.brand img { border-radius: 7px; }
.brand-name { font: 700 18px/1 "IvyLabs Brand", var(--font-display); font-feature-settings: "cv08"; }
.brand-name b, .chooser h1 b { color: var(--accent-text); }
.tools { margin-inline-start: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.seg { display: inline-flex; border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--bg-surface); }
.seg button { font: var(--type-caption); letter-spacing: var(--type-caption-tracking); color: var(--text-secondary); background: transparent; border: 0; padding: 4px 10px;
  min-height: 32px; cursor: pointer; white-space: nowrap; }
.seg button + button { border-inline-start: var(--border-width) solid var(--border-default); }
.seg button:hover { background: var(--bg-hover); color: var(--text-primary); }
.seg button[aria-checked="true"] { background: var(--accent); color: var(--on-accent); }
.lang-menu { position: relative; }
.lang-menu summary { list-style: none; cursor: pointer; font: var(--type-caption); color: var(--text-primary); border: var(--border-width) solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--bg-surface); padding: 5px 28px 5px 10px; min-height: 32px; position: relative; white-space: nowrap; }
.lang-menu summary::-webkit-details-marker { display: none; }
.lang-menu summary::after { content: ""; position: absolute; inset-inline-end: 10px; top: 50%; width: 6px; height: 6px; margin-top: -5px;
  border: solid var(--text-muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.lang-menu summary:hover { background: var(--bg-hover); }
.lang-menu ul { position: absolute; inset-inline-end: 0; top: calc(100% + 4px); z-index: 11; list-style: none; margin: 0; padding: 4px; min-width: 160px;
  background: var(--bg-surface); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-raised); }
.lang-menu a { display: block; padding: 6px 10px; border-radius: var(--radius-sm); color: var(--text-primary); text-decoration: none; }
.lang-menu a:hover { background: var(--bg-hover); }
.lang-menu a[aria-current] { background: var(--bg-selected); font-weight: 600; }

/* ---------- layout ---------- */
.layout { flex: 1; width: 100%; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 220px minmax(0, 1fr) 200px; gap: var(--space-8);
  padding: 0 var(--space-6); }
.side { position: sticky; top: 56px; align-self: start; max-height: calc(100vh - 56px); overflow: auto; padding: var(--space-6) 0; }
.side-menu > summary { display: none; }
.side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.side a { display: block; padding: 6px var(--space-3); border-radius: var(--radius-sm); color: var(--text-secondary); text-decoration: none; }
.side a:hover { background: var(--bg-hover); color: var(--text-primary); }
.side a[aria-current="page"] { background: var(--bg-selected); color: var(--text-primary); font-weight: 600; }
.toc { position: sticky; top: 56px; align-self: start; padding: var(--space-6) 0; font: var(--type-caption); }
.toc p { margin: 0 0 var(--space-2); color: var(--text-muted); }
.toc ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; border-inline-start: var(--border-width) solid var(--border-default); }
.toc a { display: block; padding-inline-start: var(--space-3); color: var(--text-secondary); text-decoration: none; }
.toc a:hover { color: var(--accent-text); }
.foot { border-top: var(--border-width) solid var(--border-default); background: var(--bg-sidebar); color: var(--text-muted); font: var(--type-caption);
  padding: var(--space-4) var(--space-6); text-align: center; }
.foot p { margin: 0; }

/* ---------- guide typography ---------- */
.doc { min-width: 0; padding: var(--space-6) 0 var(--space-16); font-size: 15px; line-height: max(1.75, var(--leading-min, 0)); }
.doc > :first-child { margin-top: 0; }
.doc h1 { font-family: var(--font-display); font-size: 32px; line-height: 1.3; font-weight: 700; margin: 0 0 var(--space-4); letter-spacing: var(--type-title-tracking); }
.doc h1 + p { font-size: 17px; color: var(--text-secondary); }
.doc h2 { font-family: var(--font-display); font-size: 22px; line-height: 1.4; font-weight: 700; margin: var(--space-12) 0 var(--space-4); padding-top: var(--space-2);
  border-top: var(--border-width) solid var(--border-subtle); }
.doc h3 { font-size: 17px; line-height: 1.5; font-weight: 600; margin: var(--space-8) 0 var(--space-3); }
.doc p, .doc ul, .doc ol { margin: 0 0 var(--space-4); }
.doc ul, .doc ol { padding-inline-start: 1.4em; }
.doc li + li { margin-top: 4px; }
.doc strong { font-weight: 650; }
.doc code { font-size: .88em; background: var(--bg-sunken); border-radius: 4px; padding: .1em .35em; overflow-wrap: anywhere; }
.doc pre { position: relative; background: var(--bg-sunken); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-md); padding: var(--space-4);
  padding-inline-end: 72px; overflow: auto; margin: 0 0 var(--space-4); font-size: 13px; line-height: 1.6; }
.doc pre code { background: none; padding: 0; font-size: inherit; overflow-wrap: normal; }
.copy { position: absolute; top: 8px; inset-inline-end: 8px; font: var(--type-caption); color: var(--text-secondary); background: var(--bg-surface);
  border: var(--border-width) solid var(--border-default); border-radius: var(--radius-sm); padding: 2px 8px; min-height: 28px; cursor: pointer; }
.copy:hover { color: var(--text-primary); border-color: var(--border-strong); }
.doc blockquote { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-inline-start: 3px solid var(--accent); background: var(--accent-soft);
  color: var(--on-accent-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.doc blockquote p:last-child { margin-bottom: 0; }
.doc blockquote code { background: color-mix(in srgb, var(--bg-surface) 60%, transparent); }
.table { overflow-x: auto; margin: 0 0 var(--space-6); border: var(--border-width) solid var(--border-default); border-radius: var(--radius-md); }
.doc table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.6; }
.doc th, .doc td { text-align: start; vertical-align: top; padding: 8px 12px; border-bottom: var(--border-width) solid var(--border-subtle); }
.doc thead th { background: var(--bg-sunken); font-weight: 600; white-space: nowrap; }
.doc tbody tr:last-child > * { border-bottom: 0; }
.doc td:first-child code { white-space: nowrap; }

/* ---------- language chooser and 404 ---------- */
.chooser { flex: 1; width: 100%; max-width: 640px; margin: 0 auto; padding: var(--space-16) var(--space-6); text-align: center; }
.chooser img { border-radius: 16px; }
.chooser h1 { font: 700 36px/1.2 "IvyLabs Brand", var(--font-display); font-feature-settings: "cv08"; margin: var(--space-4) 0 var(--space-8); }
.langs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); text-align: start; }
.langs a { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3) var(--space-4); border: var(--border-width) solid var(--border-default);
  border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-primary); text-decoration: none; }
.langs a:hover { border-color: var(--accent); background: var(--bg-hover); }
.langs span { color: var(--text-secondary); font: var(--type-caption); }
.langs.compact { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

/* ---------- narrow screens ---------- */
@media (max-width: 1100px) {
  .layout { grid-template-columns: 200px minmax(0, 1fr); }
  .toc { display: none; }
}
@media (max-width: 760px) {
  .top { padding: var(--space-2) var(--space-4); }
  .layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 var(--space-4); }
  .side { position: static; max-height: none; padding: var(--space-4) 0 0; }
  .side-menu > summary { display: block; cursor: pointer; font: var(--type-caption); color: var(--text-secondary); padding: var(--space-2) 0; }
  .doc h1 { font-size: 26px; }
}