/* ============================================================
   guides.css: the public LanaChat Guides (/guides/, /guides/section/<id>/, /guides/<slug>/).
   Written by hand (guides/build.mjs never touches it). Since l22 (20/10) the help center
   follows the Intercom layout: a brand band (logo, headline, one search bar) above a white
   page with collection cards, article rows, or the article. Light only, Onest, raspberry
   accent, own --gd-* tokens so they never collide with css/tokens.css (loaded for the
   support widget). Mobile first: the wide-screen rules come in the @media (min-width) blocks.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --gd-bg: #ffffff; --gd-card: #ffffff; --gd-muted: #f5f5f7; --gd-soft: #fafafb;
  --gd-fg: #111111; --gd-fg2: #2f2f36; --gd-mfg: #4b4b55; --gd-ink4: #6b6b76;
  --gd-line: rgba(17, 17, 17, 0.09); --gd-line2: rgba(17, 17, 17, 0.15); --gd-input: rgba(17, 17, 17, 0.22);
  --gd-ac: #f24886; --gd-ac-rgb: 242, 72, 134; --gd-ac-tx: #c0185a; --gd-ac-deep: #cf2d6c; --gd-ac-ink: #1a0710;
  --gd-tg: #2aabee;              /* Telegram blue, second colour of the brand (links in the prose, focus in the band) */
  --gd-ok: #0b7a52; --gd-warn: #9a5b00;
  --gd-r-sm: 6px; --gd-r-md: 10px; --gd-r-lg: 16px;
  --gd-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --gd-fs-body: 16px; --gd-fs-sm: 14px; --gd-fs-label: 13px;
  --gd-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 10px 28px -14px rgba(17, 17, 17, 0.18);
  --gd-font: "Onest", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --gd-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gd-btn: #f24886;               /* the Login button: the brand pink with white text, the same pink everywhere (Arthur, 22/10) */
}

/* ---------- page ---------- */
body.gd *, body.gd *::before, body.gd *::after { box-sizing: border-box; }
body.gd {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--gd-bg); color: var(--gd-fg);
  font: 400 var(--gd-fs-body) / 1.6 var(--gd-font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip;
}
html:has(body.gd) { scroll-padding-top: 24px; -webkit-text-size-adjust: 100%; color-scheme: light; }
:where(.gd) :is(h1, h2, h3, p) { margin: 0; }
:where(.gd) a { color: inherit; text-decoration: none; }
:where(.gd) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:where(.gd) svg { display: block; flex: none; }
:where(.gd) img { max-width: 100%; }
.gd ::selection { background: rgba(var(--gd-ac-rgb), 0.24); }
.gd :focus { outline: none; }
.gd :focus-visible { outline: 2px solid var(--gd-ac); outline-offset: 3px; }
.gd .skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--gd-fg); color: #fff; border-radius: var(--gd-r-md); font-size: var(--gd-fs-sm); font-weight: 500; }
.gd .skip:focus { top: 12px; }
.gd .wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: 20px; }
.gd .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.gd-main { flex: 1 0 auto; padding-top: 28px; padding-bottom: 72px; }
.gd-main:focus { outline: none; }
.gd [hidden] { display: none !important; }

/* ---------- the band: brand row, headline (home), search ---------- */
/* l46 (Arthur): the band takes the landing hero's background, light with the soft pink light "B1"
   (landing.css body:has(.hero)::before, same two gradients, same sizes), dark ink on it. The light sits
   behind the whole top of the page like on the landing (the page stays white, so it shows through: never give
   html a background) and fades out under the band. */
.gd-band { position: relative; background: transparent; color: var(--gd-fg); padding-bottom: 32px; }
body.gd::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 860px; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 46% at 50% 26%, rgba(242, 72, 134, 0.13), rgba(242, 72, 134, 0.05) 55%, transparent 100%), radial-gradient(70% 60% at 50% 0%, rgba(255, 214, 231, 0.55), transparent 70%);
}
@media (max-width: 640px) {
  body.gd::before { height: 760px; background: radial-gradient(90% 40% at 50% 24%, rgba(242, 72, 134, 0.13), rgba(242, 72, 134, 0.05) 55%, transparent 100%), radial-gradient(120% 50% at 50% 0%, rgba(255, 214, 231, 0.55), transparent 70%); }
}
@media (prefers-reduced-motion: no-preference) {   /* landing motion.css: the light breathes slowly */
  body.gd::before { animation: gdB1 9s ease-in-out infinite alternate; }
}
@keyframes gdB1 { to { opacity: 0.62; } }
.gd-band > * { position: relative; z-index: 1; }
.gd-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }   /* l47 (Arthur): back to the plain bar at the top of the band, not sticky (the l46 pill is gone) */
.gd-brand { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--gd-fg); border-radius: var(--gd-r-sm); }
.gd-brand img { width: 36px; height: 36px; object-fit: contain; }   /* l42: Lana full body with her gold bag, 36 px so the bag reads */
/* l46: the band is light again, so the word mark is the landing's: "Lana" in ink, "Chat" in the brand pink (the l45 white is gone) */
.gd-brand .brand-accent, .gd-band-h .brand-accent { color: var(--gd-ac); }   /* l47: exactly the landing's mark (.brand-word .brand-accent = #f24886), logo and headline alike */
.gd-band-h .brand-word { white-space: nowrap; }
.gd-top-links { display: flex; align-items: center; gap: 4px; }
.gd-top-links a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border-radius: 999px;
  font-size: var(--gd-fs-sm); font-weight: 500; color: var(--gd-fg);
  transition: background-color 0.15s var(--gd-ease), color 0.15s var(--gd-ease);
}
.gd-top-links a:hover { background: #fff0f5; color: #f24886; }   /* l49 (Arthur): hover = pink */
/* "Login" (one word, Arthur): exactly the landing's nav pill (.nav-login.btn-ac): 40 px, 0 20px, 14 px semi-bold, 999px.
   l46 (Arthur): pink with white text; on hover white fill, #111 text, 1 px pink outline */
.gd-top-links .gd-login {
  height: 40px; min-height: 40px; padding: 0 20px; border: 1px solid var(--gd-btn); border-radius: 999px;
  background: var(--gd-btn); color: #fff; font-size: 14px; font-weight: 600;
  box-shadow: 0 8px 20px -12px rgba(var(--gd-ac-rgb), 0.7);
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.gd-top-links .gd-login:hover, .gd-top-links .gd-login:focus-visible { background: #fff; border-color: var(--gd-btn); color: #111; transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  .gd-top-links .gd-login { transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
  .gd-top-links .gd-login:hover, .gd-top-links .gd-login:focus-visible { transform: none; }
}
.gd-band-in { padding-top: 8px; }
.gd-band--home .gd-band-in { padding-top: 28px; }
.gd-band--home { padding-bottom: 48px; }
.gd-band--home .gd-band-in { text-align: center; }
.gd-band--home .gd-search { margin-inline: auto; text-align: left; }
.gd-band-h {
  margin: 0 0 22px; font-size: clamp(26px, 5.6vw, 38px); font-weight: 600; line-height: 1.15; letter-spacing: -0.025em;
  color: var(--gd-fg); text-wrap: balance;
}

/* the search bar: white with a fine border like the landing's fields, a soft shadow when focused; the results drop under it */
.gd-search { position: relative; width: 100%; max-width: 680px; margin: 0; }
.gd-search > svg { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--gd-ink4); pointer-events: none; transition: color 0.15s var(--gd-ease); }
.gd-q {
  width: 100%; height: 52px; padding: 0 18px 0 50px; margin: 0;
  border: 1px solid var(--gd-line2); border-radius: 12px;
  background: #fff; color: var(--gd-fg); box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 10px 30px -14px rgba(17, 17, 17, 0.18);
  font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none;
  transition: background-color 0.15s var(--gd-ease), border-color 0.15s var(--gd-ease), color 0.15s var(--gd-ease), box-shadow 0.15s var(--gd-ease);
}
.gd-q::placeholder { color: var(--gd-ink4); opacity: 1; }
.gd-q::-webkit-search-decoration, .gd-q::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.gd-q:hover { border-color: rgba(17, 17, 17, 0.28); }
.gd-q:focus, .gd-search.is-open .gd-q { border-color: rgba(var(--gd-ac-rgb), 0.6); box-shadow: 0 0 0 3px rgba(var(--gd-ac-rgb), 0.16), 0 8px 24px -10px rgba(17, 17, 17, 0.25); outline: none; }
.gd-band--home .gd-q { height: 56px; }
/* l47 (Arthur): Lana sits on the top edge of the home search bar, right of centre (.lp-sit.lp-on-top = the landing's FAQ
   Lana); she never takes a click (.lp has pointer-events none) and the headline keeps clear of her */
.gd-search-lana { --w: 96px; right: 72px; }
.gd-band--home .gd-search { margin-top: 84px; }
@media (max-width: 640px) {
  .gd-search-lana { --w: 72px; right: 28px; }
  .gd-band--home .gd-search { margin-top: 60px; }
}
.gd-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40;
  max-height: min(70vh, 520px); overflow-y: auto; overscroll-behavior: contain;
  padding: 6px; background: #fff; color: var(--gd-fg);
  border: 1px solid var(--gd-line); border-radius: 14px; box-shadow: 0 16px 48px -16px rgba(17, 17, 17, 0.32), 0 2px 6px rgba(17, 17, 17, 0.06);
}
.gd-results a[role="option"] {
  display: block; padding: 10px 12px; border-radius: 10px; cursor: pointer;
  transition: background-color 0.1s var(--gd-ease);
}
.gd-results a[role="option"]:hover, .gd-results a[aria-selected="true"] { background: var(--gd-muted); }
.gd-res-t { display: block; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--gd-fg); }
.gd-res-s { display: block; margin-top: 2px; font-size: var(--gd-fs-label); line-height: 1.45; color: var(--gd-ink4); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gd-res-s b { font-weight: 500; color: var(--gd-fg2); }
.gd-res-k { font-weight: 500; color: var(--gd-ac-tx); }
.gd-res-none, .gd-res-wait { display: block; padding: 14px 12px; font-size: var(--gd-fs-sm); color: var(--gd-mfg); }

/* ---------- /guides/: the collection cards ---------- */
.gd-home { padding-top: 32px; }
.gd-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.gd-col {
  display: flex; flex-direction: column; height: 100%; padding: 24px 24px 22px;
  background: var(--gd-card); border: 1px solid var(--gd-line); border-radius: var(--gd-r-lg);
  transition: border-color 0.18s var(--gd-ease), box-shadow 0.18s var(--gd-ease), transform 0.18s var(--gd-ease);
}
.gd-col:hover { border-color: rgba(var(--gd-ac-rgb), 0.4); box-shadow: var(--gd-shadow); transform: translateY(-2px); }
.gd-col-ic { display: block; margin-bottom: 16px; color: var(--gd-ac); }
.gd-col-t { font-size: 17px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--gd-fg); }
.gd-col-d { margin-top: 6px; font-size: var(--gd-fs-sm); line-height: 1.5; color: var(--gd-mfg); }
.gd-col-n { margin-top: 14px; font-size: var(--gd-fs-label); color: var(--gd-ink4); }

/* ---------- breadcrumb ---------- */
.gd-crumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; margin: 0 0 22px; padding: 0; list-style: none; font-size: var(--gd-fs-sm); color: var(--gd-ink4); }
.gd-crumb li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.gd-crumb li + li::before { content: "\203A"; color: var(--gd-ink4); }
.gd-crumb a { display: inline-flex; align-items: center; min-height: 32px; color: var(--gd-mfg); border-radius: var(--gd-r-sm); }
.gd-crumb a:hover { color: var(--gd-fg); }
.gd-crumb [aria-current] { color: var(--gd-mfg); }

/* ---------- collection page: folder, title, the rows ---------- */
.gd-coll-head { margin-bottom: 22px; }
.gd-coll-ic { display: block; margin-bottom: 12px; color: var(--gd-ac); }
.gd-h1 { font-size: clamp(26px, 4.4vw, 32px); font-weight: 600; line-height: 1.2; letter-spacing: -0.025em; color: var(--gd-fg); text-wrap: balance; }
.gd-coll-d { margin-top: 8px; max-width: 640px; font-size: var(--gd-fs-body); line-height: 1.55; color: var(--gd-mfg); }
.gd-coll-n { margin-top: 10px; font-size: var(--gd-fs-label); color: var(--gd-ink4); }
.gd-rows { display: flex; flex-direction: column; border: 1px solid var(--gd-line); border-radius: 12px; background: var(--gd-card); overflow: hidden; }
.gd-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 56px; padding: 14px 16px 14px 18px;
  border-top: 1px solid var(--gd-line); transition: background-color 0.12s var(--gd-ease);
}
.gd-row:first-child { border-top: 0; }
.gd-row:hover { background: var(--gd-soft); }
.gd-row > svg { color: var(--gd-ink4); transition: color 0.12s var(--gd-ease), transform 0.12s var(--gd-ease); }
.gd-row:hover > svg { color: var(--gd-ac-tx); transform: translateX(2px); }
.gd-row-in { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gd-row-t { font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--gd-fg); }
.gd-row-d { font-size: var(--gd-fs-sm); line-height: 1.45; color: var(--gd-mfg); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- article ---------- */
.gd-art { max-width: 760px; }
.gd-head { margin-bottom: 26px; }
.gd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 12px; font-size: var(--gd-fs-sm); color: var(--gd-mfg); }
.gd-meta-i { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; }
.gd-meta-md { text-decoration: underline; text-decoration-color: var(--gd-line2); text-underline-offset: 3px; border-radius: var(--gd-r-sm); }
.gd-meta-md:hover { color: var(--gd-fg); text-decoration-color: currentColor; }
.gd-toc { margin: 0 0 24px; padding: 12px 16px; border: 1px solid var(--gd-line); border-radius: 12px; background: var(--gd-soft); }
.gd-toc-t, .gd-rel-t { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gd-ink4); }
.gd-toc > summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; }
.gd-toc ul { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.gd-toc a { display: flex; align-items: center; min-height: 32px; font-size: var(--gd-fs-sm); line-height: 1.45; color: var(--gd-mfg); border-radius: var(--gd-r-sm); }
.gd-toc a:hover { color: var(--gd-fg); }
@media (min-width: 1024px) {
  .gd-art { max-width: 1000px; }
  .gd-head { max-width: 720px; }
  .gd-cols2--toc { display: grid; grid-template-columns: minmax(0, 720px) 240px; column-gap: 40px; align-items: start; }
  .gd-cols2--toc .gd-side { grid-column: 2; grid-row: 1; position: sticky; top: 96px; align-self: start; }
  .gd-cols2--toc .gd-body { grid-column: 1; grid-row: 1; }
  .gd-toc { margin: 0; padding: 0; border: 0; background: none; }
  .gd-toc > summary { pointer-events: none; list-style: none; min-height: 0; margin-bottom: 4px; padding-left: 14px; }
  .gd-toc > summary::-webkit-details-marker { display: none; }
  .gd-toc ul { margin: 6px 0 0; gap: 0; border-left: 1px solid var(--gd-line); }
  .gd-toc a { margin-left: -1px; padding: 5px 0 5px 12px; min-height: 0; border-left: 2px solid transparent; border-radius: 0; }
  .gd-toc a.is-current { color: var(--gd-ac-tx); border-left-color: var(--gd-ac); font-weight: 500; }
}
@media (prefers-reduced-motion: no-preference) { html:has(body.gd-page) { scroll-behavior: smooth; } }
html:has(body.gd-page) { scroll-padding-top: 32px; }

/* ---------- the prose ---------- */
.gd-prose { font-size: var(--gd-fs-body); line-height: 1.7; color: var(--gd-fg2); overflow-wrap: break-word; }
.gd-prose > :first-child { margin-top: 0; }
.gd-prose p { margin: 0 0 18px; }
.gd-prose h2, .gd-prose h3 { color: var(--gd-fg); font-weight: 600; text-wrap: balance; scroll-margin-top: 24px; }
.gd-prose h2 { margin: 40px 0 14px; font-size: 22px; line-height: 1.25; letter-spacing: -0.02em; }
.gd-prose h3 { margin: 30px 0 10px; font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; }
.gd-anchor { margin-left: 4px; padding: 0 4px; border-radius: var(--gd-r-sm); color: var(--gd-ink4); font-weight: 500; opacity: 0; transition: opacity 0.15s var(--gd-ease), color 0.15s var(--gd-ease); }
.gd-prose :is(h2, h3):hover .gd-anchor, .gd-anchor:focus-visible { opacity: 1; }
.gd-anchor:hover { color: var(--gd-ac-tx); }
@media (hover: none) { .gd-anchor { display: none; } }
.gd-prose strong { color: var(--gd-fg); font-weight: 600; }
.gd-prose a:not(.gd-anchor) { color: var(--gd-ac-tx); text-decoration: underline; text-decoration-color: rgba(var(--gd-ac-rgb), 0.45); text-underline-offset: 3px; border-radius: 2px; }
.gd-prose a:not(.gd-anchor):hover { text-decoration-color: currentColor; }
.gd-prose code {
  padding: 1px 6px; border: 1px solid var(--gd-line); border-radius: var(--gd-r-sm); background: var(--gd-muted); color: var(--gd-fg);
  font-family: var(--gd-mono); font-size: 0.86em; overflow-wrap: anywhere;
}
.gd-prose :is(ul, ol) { margin: 0 0 18px; padding-left: 22px; }
.gd-prose li { margin: 0 0 8px; padding-left: 2px; }
.gd-prose li > :is(ul, ol) { margin: 8px 0 0; }
.gd-prose ul > li::marker { color: var(--gd-ink4); }
.gd-prose ol.lgd-steps { padding-left: 0; list-style: none; counter-reset: gd-step; }
.gd-prose ol.lgd-steps > li { position: relative; margin-bottom: 12px; padding-left: 40px; counter-increment: gd-step; }
.gd-prose ol.lgd-steps > li::before {
  content: counter(gd-step);
  position: absolute; left: 0; top: 1px;
  display: grid; place-items: center; width: 26px; height: 26px;
  border: 1px solid var(--gd-line2); border-radius: 999px; background: var(--gd-muted);
  font-size: 13px; line-height: 1; font-weight: 600; color: var(--gd-fg);
}
/* callouts: Note (neutral), Tip (green), Warning (amber) */
.gd-prose .lgd-call { margin: 0 0 18px; padding: 12px 16px; border: 1px solid var(--gd-line); border-left: 3px solid var(--gd-mfg); border-radius: var(--gd-r-md); background: var(--gd-soft); }
.gd-prose .lgd-call p { margin: 0; font-size: 15px; line-height: 1.6; }
.gd-prose .lgd-call-k { margin-right: 4px; color: var(--gd-fg); }
.gd-prose .lgd-call-tip { border-left-color: var(--gd-ok); background: color-mix(in srgb, var(--gd-ok) 7%, var(--gd-card)); }
.gd-prose .lgd-call-tip .lgd-call-k { color: var(--gd-ok); }
.gd-prose .lgd-call-warning { border-left-color: var(--gd-warn); background: color-mix(in srgb, var(--gd-warn) 7%, var(--gd-card)); }
.gd-prose .lgd-call-warning .lgd-call-k { color: var(--gd-warn); }
/* screenshot frames, until the real captures replace them */
.gd-prose .lgd-shot { margin: 8px 0 28px; }
.gd-prose .lgd-shot-in {
  display: grid; place-items: center; aspect-ratio: 16 / 9; max-height: 340px; width: 100%;
  border: 1px dashed var(--gd-line2); border-radius: var(--gd-r-lg); background: var(--gd-soft);
}
.gd-prose .lgd-shot-tag { padding: 4px 10px; border: 1px solid var(--gd-line); border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gd-ink4); }
.gd-prose .lgd-shot figcaption { margin-top: 10px; font-size: var(--gd-fs-label); line-height: 1.5; text-align: center; color: var(--gd-mfg); }
/* g1: real captures and the landing's feature videos */
.gd-prose .lgd-img, .gd-prose .lgd-video { margin: 8px 0 28px; }
.gd-prose .lgd-img img, .gd-prose .lgd-video video { display: block; width: 100%; height: auto; border: 1px solid var(--gd-line); border-radius: var(--gd-r-lg); background: var(--gd-soft); }
.gd-prose .lgd-video video { aspect-ratio: 1280 / 822; object-fit: cover; }
.gd-prose .lgd-img figcaption, .gd-prose .lgd-video figcaption { margin-top: 10px; font-size: var(--gd-fs-label); line-height: 1.5; text-align: center; color: var(--gd-mfg); }
/* API reference: tables and code */
.gd-prose .gd-tbl { margin: 0 0 22px; overflow-x: auto; border: 1px solid var(--gd-line); border-radius: var(--gd-r-md); background: var(--gd-card); }
.gd-prose table { width: 100%; border-collapse: collapse; font-size: var(--gd-fs-sm); line-height: 1.5; }
.gd-prose th, .gd-prose td { padding: 9px 12px; border-bottom: 1px solid var(--gd-line); text-align: left; vertical-align: top; }
.gd-prose th { background: var(--gd-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gd-mfg); white-space: nowrap; }
.gd-prose tr:last-child td { border-bottom: 0; }
.gd-prose td:nth-child(2) code, .gd-prose td:first-child code { white-space: nowrap; }   /* l45: a parameter or field name never breaks; the table scrolls */
.gd-prose td:last-child { min-width: 14em; }   /* l45: on a phone the description column stays readable, the table scrolls sideways */
.gd-prose td:last-child:has(> .lgd-planned) { min-width: 0; }
.gd-prose pre { margin: 0 0 22px; padding: 14px 16px; overflow-x: auto; border: 1px solid var(--gd-line); border-radius: var(--gd-r-md); background: var(--gd-soft); font-family: var(--gd-mono); font-size: 13px; line-height: 1.6; color: var(--gd-fg); tab-size: 2; }
.gd-prose pre code { padding: 0; border: 0; background: none; font-size: inherit; overflow-wrap: normal; white-space: pre; }
/* l45: code blocks with a bar (language or tabs, Copy button), added by guides.js; plain <pre> without the script */
.gd-prose .gd-code { margin: 0 0 22px; border: 1px solid var(--gd-line); border-radius: var(--gd-r-md); background: var(--gd-soft); overflow: hidden; }
.gd-prose .gd-code pre { margin: 0; border: 0; border-radius: 0; background: none; }
.gd-prose .gd-code-bar { display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 6px 0 14px; border-bottom: 1px solid var(--gd-line); background: var(--gd-muted); }
.gd-prose .gd-code--tabs .gd-code-bar { padding-left: 4px; }
.gd-prose .gd-code-lang { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--gd-mfg); }
.gd-prose .gd-code-tabs { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.gd-prose .gd-code-tab { min-height: 32px; padding: 0 10px; border: 0; border-radius: var(--gd-r-sm); background: none; font: 500 13px/1 var(--gd-font); color: var(--gd-mfg); cursor: pointer; white-space: nowrap; }
.gd-prose .gd-code-tab:hover { color: var(--gd-fg); background: rgba(17, 17, 17, 0.05); }
.gd-prose .gd-code-tab[aria-selected="true"] { color: var(--gd-ac-tx); background: var(--gd-card); box-shadow: inset 0 -2px 0 var(--gd-ac); }
.gd-prose .gd-code-copy { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; min-height: 32px; padding: 0 10px; border: 1px solid var(--gd-line2); border-radius: var(--gd-r-sm); background: var(--gd-card); font: 500 12px/1 var(--gd-font); color: var(--gd-fg2); cursor: pointer; flex: none; }
.gd-prose .gd-code-copy:hover { border-color: var(--gd-input); color: var(--gd-fg); }
.gd-prose .gd-code-copy.is-done { border-color: rgba(11, 122, 82, 0.35); color: var(--gd-ok); }
@media print { .gd-prose .gd-code-bar { display: none; } .gd-prose .gd-code pre[hidden] { display: block; } }
.gd-prose .lgd-method { display: inline-block; min-width: 54px; padding: 1px 6px; border-radius: 5px; font-family: var(--gd-mono); font-size: 11px; font-weight: 600; text-align: center; background: var(--gd-muted); color: var(--gd-fg2); }
.gd-prose .lgd-method-get { background: #e7f5ef; color: #0b6b48; }
.gd-prose .lgd-method-post { background: #fdecf2; color: #a3134b; }
.gd-prose .lgd-method-put, .gd-prose .lgd-method-patch { background: #fdf3e0; color: #8a4f00; }
.gd-prose .lgd-method-delete { background: #fde8e8; color: #a11d1d; }
.gd-prose .lgd-planned { display: inline-block; padding: 1px 7px; border: 1px solid var(--gd-line2); border-radius: 999px; font-size: 11px; font-weight: 500; color: var(--gd-ink4); white-space: nowrap; }

/* ---------- related, previous / next, the beta note ---------- */
.gd-rel { margin-top: 40px; }
.gd-rel .gd-rows { margin-top: 10px; }
.gd-rel .gd-row { min-height: 52px; padding-block: 12px; }
.gd-pn { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 28px; }
.gd-pn-a {
  display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 14px 16px;
  border: 1px solid var(--gd-line); border-radius: 12px;
  transition: background-color 0.15s var(--gd-ease), border-color 0.15s var(--gd-ease);
}
a.gd-pn-a:hover { background: var(--gd-soft); border-color: var(--gd-line2); }
.gd-pn-empty { display: none; }
.gd-pn-l { display: inline-flex; align-items: center; gap: 4px; font-size: var(--gd-fs-label); color: var(--gd-mfg); }
.gd-pn-t { font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--gd-fg); }

/* ---------- footer: one slim line ---------- */
/* ---------- wide screens ---------- */
@media (min-width: 600px) {
  .gd .wrap { padding-inline: 32px; }
  .gd-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gd-pn { grid-template-columns: 1fr 1fr; }
  .gd-pn-empty { display: block; border: 0; }
  .gd-pn-next { align-items: flex-end; text-align: right; }
}
@media (min-width: 900px) {
  .gd-band-in { padding-top: 12px; }
  .gd-band--home .gd-band-in { padding-top: 44px; }
  .gd-band--home { padding-bottom: 60px; }
  .gd-band-h { margin-bottom: 26px; }
  .gd-home { padding-top: 40px; }
  .gd-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .gd-main { padding-top: 36px; padding-bottom: 96px; }
}

/* ---------- print: dark text on white, no band, no search, no widget ---------- */
@media print {
  body.gd { background: #fff; color: #000; }
  .gd-band { background: none; color: #000; padding-bottom: 8px; border-bottom: 1px solid #000; }
  body.gd::before, .gd-search, .gd-top-links, .gd-cta, .foot, .gd-pn, .skip, .lana-sw-launcher, .lana-sw { display: none !important; }
  .gd-brand, .gd-brand .brand-accent { color: #000; }
  .gd-prose, .gd-h1, .gd-row-t, .gd-col-t { color: #000; }
  .gd-prose a:not(.gd-anchor) { color: #000; text-decoration: underline; }
  .gd-col, .gd-rows { box-shadow: none; }
}

/* ---------- the CTA card, footer and the world of Lana (l26): the same rules as landing/css/landing.css,
   on the guides' tokens, so the guides look like one more page of the site ---------- */

/* the CTA card (landing/sections/cta.html) */
.gd .gd-cta { padding: 0 0 112px; }
.gd .cta-box { text-align: center; padding: 72px 24px; border: 1px solid var(--gd-line2); border-radius: 20px; background: radial-gradient(60% 120% at 50% 0%, rgba(242,72,134,.10), transparent 70%), #fff; }
.gd .h2 { margin: 0; font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; letter-spacing: -.02em; line-height: 1.15; text-wrap: balance; }
.gd .lead { color: var(--gd-mfg); font-size: 17px; max-width: 600px; margin: 16px auto 0; text-wrap: pretty; }
.gd .hero-ctas { display: flex; gap: 12px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.gd .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 10px; font-weight: 500; font-size: 15px; border: 1px solid var(--gd-line2); background: #fff; color: var(--gd-fg); transition: background .15s, border-color .15s; }
.gd .btn-ac { background: var(--gd-ac); border-color: var(--gd-ac); color: #fff; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; }
.gd .btn-ac:hover, .gd .btn-ac:focus-visible { background: #fff; border-color: var(--gd-ac); color: #111; transform: translateY(-1px); box-shadow: 0 8px 20px -12px rgba(242, 72, 134, 0.55); }   /* l46 (Arthur): every pink button, white text; hover white, ink text, pink outline */
@media (prefers-reduced-motion: reduce) { .gd .btn-ac:hover, .gd .btn-ac:focus-visible { transform: none; box-shadow: none; } }
.gd .cta-box .btn svg { width: 17px; height: 17px; }
.gd .cta-box { position: relative; }   /* l47: Lana (.cta-lana, the landing's lana.css: 116 px, bottom left; 62 px under 760 px) sits in its corner */
@media (max-width: 760px) { .gd .gd-cta { padding-bottom: 80px; } .gd .hero-ctas .btn { flex: 1 1 100%; } }

/* the footer (landing/sections/footer.html): the columns, then the world of Lana, a static watercolor panorama
   blended into the flat footer background with mix-blend-mode so no rectangle edge shows */
.gd .foot { border-top: 1px solid var(--gd-line2); background: #F1F1F3; padding: 64px 0 0; overflow: hidden; color: var(--gd-mfg); font-size: 14px; }
.gd .foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; }
.gd .foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.gd .foot-h { font-size: 13px; font-weight: 600; color: var(--gd-fg); letter-spacing: 0; margin: 0 0 4px; }
.gd .foot-col a { color: var(--gd-mfg); }
.gd .foot a:hover { color: var(--gd-fg); }
.gd .foot-about p { max-width: 300px; margin: 0; color: var(--gd-mfg); }
.gd .foot-brand { display: inline-flex; align-items: center; gap: 8px; color: var(--gd-fg); font-weight: 600; font-size: 16px; }
.gd .foot-brand img { width: 28px; height: 28px; object-fit: contain; }
.gd .foot-brand .brand-accent { color: var(--gd-ac); }
.gd .foot-copy { margin-top: auto; color: var(--gd-ink4); font-size: 13px; }
.gd .foot-tg { display: inline-flex; align-items: center; gap: 7px; }
.gd .foot-tg svg { width: 15px; height: 15px; flex: none; }
@media (max-width: 960px) { .gd .foot-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; } .gd .foot-about { grid-column: 1 / -1; } }
@media (max-width: 760px) {
  .gd .foot-about .foot-brand { min-height: 44px; }
  .gd .foot-col { gap: 0; }
  .gd .foot-col a { display: flex; align-items: center; min-height: 44px; }
  .gd .foot-h { margin-bottom: 0; min-height: 30px; }
}

/* ---- language picker in the band (i18n lot): a <details> of links, code + chevron like the landing's picker ---- */
.gd-top-r { display: flex; align-items: center; gap: 8px; }
.gd-lang { position: relative; }
.gd-lang-btn {
  display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px; border-radius: 999px; cursor: pointer; list-style: none;
  font-size: var(--gd-fs-sm); font-weight: 600; letter-spacing: 0.02em; color: var(--gd-fg); user-select: none;
  transition: background-color 0.15s var(--gd-ease);
}
.gd-lang-btn::-webkit-details-marker { display: none; }
.gd-lang-btn:hover, .gd-lang[open] .gd-lang-btn { background: #fff0f5; color: #f24886; }
.gd-lang-btn svg { width: 14px; height: 14px; transition: transform 0.15s var(--gd-ease); }
.gd-lang[open] .gd-lang-btn svg { transform: rotate(180deg); }
.gd-lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 190px; padding: 6px;
  background: #fff; border: 1px solid var(--gd-line2); border-radius: 12px; box-shadow: var(--gd-shadow);
}
.gd-lang-menu a { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 10px; border-radius: 8px; font-size: var(--gd-fs-sm); color: var(--gd-fg); }
.gd-lang-menu a:hover { background: #fff0f5; color: #f24886; }
.gd-lang-menu a[aria-current="true"] { background: var(--gd-muted); font-weight: 600; }
.gd-lang-menu .lg-c { width: 24px; font-size: 12px; font-weight: 600; color: var(--gd-ink4); }
.gd-lang-menu :focus-visible { outline: 2px solid var(--gd-ac); outline-offset: -2px; }
@media (max-width: 520px) {
  .gd-top { gap: 8px; }
  .gd-top-r { gap: 2px; }
  .gd-top-links .gd-login { padding: 0 14px; font-size: 13px; }
  .gd-lang-btn { padding: 0 8px; }
}
@media print { .gd-lang { display: none !important; } }
/* the picker menu opens over the headline and the search bar below it (both are z-index 1 children of the band) */
.gd-band > .gd-top { z-index: 3; }