/* 01-tokens.css
   Design-system values, vendored from the Timebase design system's colors_and_type.css.
   Update by copying from the design system, not by editing here.

   Extracted verbatim from the reference build, lines 9-115.
   Concatenated into docs.css by tools/build.py in filename order. */

/* ============================================================
   Timebase Design System — colors_and_type.css tokens (inlined)
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Playfair+Display:wght@500;600;700&display=swap");

:root {
  --tb-blue-500:   #31AEE4;
  --tb-blue-600:   #1B81AD;
  --tb-blue-300:   #4CD6F5;
  --tb-logo-blue:  #0BB6FF;
  --tb-green-500:  #36E063;
  --tb-green-800:  #06624E;
  --tb-green-400:  #34D399;
  --tb-orange-500: #F59E0B;
  --tb-red-500:    #EF4444;

  --tb-charcoal:    #1F1F23;
  --tb-anti-flash:  #F2F2F2;
  --tb-iron-gray:   #374151;
  --tb-light-gray:  #E5E7EB;
  --tb-silver-mist: #D1D5DB;
  --tb-slate:       #3F3F46;
  --tb-white:       #FFFFFF;

  --tb-neutral-950:      #121214;
  --tb-neutral-940:      #161618;
  --tb-neutral-925:      #1C1C1E;
  --tb-neutral-875:      #2C2C2E;
  --tb-neutral-zinc-400: #A1A1AA;

  --tb-color-background:             var(--tb-anti-flash);
  --tb-color-foreground:             var(--tb-charcoal);
  --tb-color-card:                   var(--tb-white);
  --tb-color-popover:                var(--tb-white);
  --tb-color-primary:                var(--tb-blue-500);
  --tb-color-primary-foreground:     var(--tb-white);
  --tb-color-primary-hover:          var(--tb-blue-600);
  --tb-color-success:                var(--tb-green-400);
  --tb-color-warning:                var(--tb-orange-500);
  --tb-color-destructive:            var(--tb-coral-red);
  --tb-color-info:                   var(--tb-blue-300);
  --tb-color-muted:                  var(--tb-light-gray);
  --tb-color-muted-foreground:       var(--tb-iron-gray);
  --tb-color-accent:                 var(--tb-light-gray);
  --tb-color-border:                 var(--tb-light-gray);
  --tb-color-input:                  var(--tb-light-gray);
  /* A softer tint than --tb-color-accent for table-row hover specifically: --tb-color-accent
     is the same shade as --tb-color-muted (the table header background), so using it for row
     hover too made the two indistinguishable. This mixes just a little foreground color into
     the card background instead, so the highlight stays visibly lighter than the header. */
  --tb-color-table-hover:             color-mix(in srgb, var(--tb-color-foreground) 5%, var(--tb-color-card));

  --tb-color-sidebar:                var(--tb-white);

  --tb-radius-sm: 0.375rem;
  --tb-radius-md: 0.625rem;
  --tb-radius-lg: 0.875rem;
  --tb-radius-pill: 9999px;

  --tb-shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.05);
  --tb-shadow-lg: 0 12px 24px rgba(17, 24, 39, 0.08), 0 4px 8px rgba(17, 24, 39, 0.04);

  --tb-duration-fast: 120ms;
  --tb-duration-base: 200ms;
  --tb-ease-standard: cubic-bezier(0.2, 0, 0, 1);

  --font-heading: "Playfair Display", Georgia, serif;
  --font-sans:    "Inter", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  --tb-color-info-fill:               color-mix(in srgb, var(--tb-blue-300) 18%, transparent);
  --tb-color-info-fill-border:        color-mix(in srgb, var(--tb-blue-300) 35%, transparent);
  --tb-color-success-fill:            color-mix(in srgb, var(--tb-green-400) 16%, transparent);
  --tb-color-success-fill-border:     color-mix(in srgb, var(--tb-green-400) 35%, transparent);
  --tb-color-warning-fill:            color-mix(in srgb, var(--tb-orange-500) 18%, transparent);
  --tb-color-warning-fill-border:     color-mix(in srgb, var(--tb-orange-500) 40%, transparent);
  --tb-coral-red:                     #FF6B57;
  --tb-color-destructive-fill:        color-mix(in srgb, var(--tb-coral-red) 16%, transparent);
  --tb-color-destructive-fill-border: color-mix(in srgb, var(--tb-coral-red) 45%, transparent);
  /* Alternating H2-section band tint. Much subtler than --tb-color-table-hover since this
     covers a whole section of the article rather than a single row -- just barely perceptible
     while scrolling, not a visible "block". */
  --tb-color-section-alt:             color-mix(in srgb, var(--tb-color-foreground) 1.5%, var(--tb-color-card));
}

[data-theme="dark"] {
  --tb-color-background:             var(--tb-neutral-950);
  --tb-color-foreground:             var(--tb-anti-flash);
  --tb-color-card:                   var(--tb-neutral-925);
  --tb-color-popover:                var(--tb-neutral-925);
  --tb-color-primary:                var(--tb-blue-500);
  --tb-color-primary-foreground:     var(--tb-neutral-950);
  --tb-color-primary-hover:          var(--tb-blue-300);
  --tb-color-muted:                  var(--tb-neutral-925);
  --tb-color-muted-foreground:       var(--tb-neutral-zinc-400);
  --tb-color-accent:                 var(--tb-neutral-925);
  --tb-color-border:                 var(--tb-neutral-875);
  --tb-color-input:                  var(--tb-neutral-875);
  --tb-color-sidebar:                var(--tb-neutral-940);
  /* See the light-theme definition above -- in dark mode --tb-color-accent is literally the
     same value as --tb-color-card, so a hover using it was not just "the same as the header",
     it was invisible against the row background entirely. */
  --tb-color-table-hover:             color-mix(in srgb, var(--tb-color-foreground) 8%, var(--tb-color-card));
  /* Explicit final value, set directly rather than as a color-mix off --tb-color-card. */
  --tb-color-section-alt:             #171719;
}


/* 02-base.css
   Reset, document defaults, links, buttons, scrollbars.

   Extracted verbatim from the reference build, lines 116-134.
   Concatenated into docs.css by tools/build.py in filename order. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
html, body {
  background: var(--tb-color-background);
  color: var(--tb-color-foreground);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--tb-color-primary); text-decoration: none; }
a:hover { color: var(--tb-color-primary-hover); }
button { font: inherit; }
::selection { background: rgba(49,174,228,.25); }
.tb-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
.tb-scroll::-webkit-scrollbar-thumb { background: var(--tb-color-border); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
@keyframes tbFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }


/* 03-layout.css
   The page shell: header, sidebar navigation, main column, table of contents rail,
   home cards, section index pages.

   Extracted verbatim from the reference build, lines 135-360.
   Concatenated into docs.css by tools/build.py in filename order. */

/* ---------- Shell ---------- */
#app { min-height: 100vh; display: flex; flex-direction: column; }

.tb-header {
  height: 60px; flex: 0 0 60px; display: flex; align-items: center; gap: 20px; padding: 0 20px;
  background: var(--tb-color-sidebar); border-bottom: 1px solid var(--tb-color-border);
  position: sticky; top: 0; z-index: 40;
}
.tb-navbtn {
  display: none; width: 32px; height: 32px; place-items: center; border: 1px solid var(--tb-color-input);
  background: transparent; color: var(--tb-color-muted-foreground); border-radius: var(--tb-radius-sm); cursor: pointer;
}
.tb-logo { display: flex; align-items: center; gap: 12px; width: 236px; flex: 0 0 236px; color: var(--tb-color-foreground); }
.tb-logo svg { height: 19px; width: auto; display: block; color: var(--tb-color-foreground); }
.tb-brandsub { font-size: 9.5px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--tb-color-muted-foreground); padding-left: 11px; border-left: 1px solid var(--tb-color-border); }
.tb-searchbtn {
  flex: 1; max-width: 440px; height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 10px;
  border: 1px solid var(--tb-color-input); background: var(--tb-color-background); color: var(--tb-color-muted-foreground);
  border-radius: var(--tb-radius-sm); cursor: pointer; font-family: var(--font-sans); font-size: 13px;
  transition: border-color var(--tb-duration-base) var(--tb-ease-standard);
}
.tb-searchbtn:hover { border-color: var(--tb-color-primary); }
.tb-searchbtn span { flex: 1; text-align: left; }
.tb-searchbtn kbd { font-family: var(--font-mono); font-size: 11px; padding: 2px 6px; border: 1px solid var(--tb-color-border); border-radius: 4px; }
  height: 30px; padding: 0 8px; font-family: var(--font-mono); font-size: 12px; color: var(--tb-color-foreground);
  background: var(--tb-color-background); border: 1px solid var(--tb-color-input); border-radius: var(--tb-radius-sm);
}
.tb-iconbtn {
  width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid var(--tb-color-input);
  background: transparent; color: var(--tb-color-muted-foreground); border-radius: var(--tb-radius-sm); cursor: pointer;
}
.tb-iconbtn:hover { color: var(--tb-color-foreground); background: var(--tb-color-accent); }

.tb-body-row { flex: 1; display: flex; align-items: stretch; min-height: 0; }

.tb-nav {
  width: 276px; flex: 0 0 276px; background: var(--tb-color-sidebar); border-right: 1px solid var(--tb-color-border);
  overflow-y: auto; height: calc(100vh - 60px); position: sticky; top: 60px; padding: 16px 12px 80px;
}
.tb-secgroup { margin-bottom: 4px; }
.tb-sechead {
  width: 100%; display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: transparent; border: 0;
  border-radius: var(--tb-radius-sm); cursor: pointer; font-family: var(--font-sans); font-size: 11px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tb-color-muted-foreground); text-align: left;
}
.tb-sechead:hover { background: var(--tb-color-accent); }
/* Sidebar disclosure carets. An inline SVG chevron rather than a text glyph:
   the glyph rendered at a different size and baseline in every font fallback. */
.tb-caret, .tb-subcaret { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; flex: 0 0 auto; margin-left: auto; color: inherit; transition: transform var(--tb-duration-fast) var(--tb-ease-standard); }
.tb-caret svg, .tb-subcaret svg { width: 100%; height: 100%; display: block; }
.tb-caret.open, .tb-subcaret.open { transform: rotate(90deg); }
.tb-subseclabel .lbl, .tb-subsubseclabel .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-seclabel { flex: 1; }
.tb-seccount { font-family: var(--font-mono); font-size: 10px; }
.tb-secitems { display: flex; flex-direction: column; gap: 1px; padding: 2px 0 8px 9px; margin-left: 8px; border-left: 1px solid var(--tb-color-border); }
.tb-navitem {
  display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: var(--tb-radius-sm); font-size: 14.5px;
  line-height: 1.4; font-weight: 400; color: var(--tb-color-foreground); transition: background var(--tb-duration-fast) var(--tb-ease-standard);
  cursor: pointer;
}
.tb-navitem:hover { background: var(--tb-color-accent); }
.tb-navitem.active { font-weight: 600; color: var(--tb-color-primary); background: color-mix(in srgb, var(--tb-color-primary) 12%, transparent); }
.tb-navitem span.t { flex: 1; }
/* Subsection group header -- a small clickable expand/collapse header inside
   a section's item list, used when a section's items are further divided
   (e.g. Connectors split into Databases / Historians / Protocols). Sits at
   the same indent as the navitems below it; the first one right under the
   section header gets less top padding so it doesn't look like it has a
   stray gap above it. Same button-reset + caret pattern as .tb-sechead, just
   smaller, since it's one level more nested. */
.tb-subseclabel {
  width: 100%; display: flex; align-items: center; gap: 5px; background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--tb-color-muted-foreground); padding: 10px 8px 3px; text-align: left;
}
.tb-subseclabel:hover { background: var(--tb-color-accent); }
.tb-subseclabel:first-child { margin-top: 1px; }
/* Second-level subsection header -- used only where a subsection is itself
   further divided (Timebase Components > Atlas > Domain Modeling/Querying/
   Deploy & Operate/API Reference; > Historian > Historian API). Same visual
   language as .tb-subseclabel, one size down and indented to read as a
   child of it. .tb-navitem--sub2 gives that deeper level's article links a
   matching extra indent; it's placed after .tb-navitem below so its
   padding-left wins at equal specificity. */
.tb-subsubseclabel {
  width: 100%; display: flex; align-items: center; gap: 5px; background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-sans); font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tb-color-muted-foreground); opacity: .8; padding: 8px 8px 3px 20px; text-align: left;
}
.tb-subsubseclabel:hover { background: var(--tb-color-accent); }
.tb-subsubseclabel:first-child { margin-top: 1px; }
.tb-navitem--sub2 { padding-left: 22px; }
/* Shared caret for both subsection levels above -- same rotate-on-open
   mechanic as .tb-caret (the top-level section caret), just smaller so it
   doesn't overpower the smaller label text next to it. */

.tb-main { flex: 1; min-width: 0; overflow-y: auto; height: calc(100vh - 60px); }
.tb-content { max-width: 1520px; margin: 0 auto; display: flex; align-items: flex-start; gap: 44px; padding: 36px 44px 140px; }

.tb-article { flex: 1; min-width: 0; max-width: 1200px; }
.tb-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; font-size: 12.5px; color: var(--tb-color-muted-foreground); margin-bottom: 16px; }
.tb-breadcrumb a { color: var(--tb-color-muted-foreground); }
.tb-breadcrumb .cur { color: var(--tb-color-foreground); }

.tb-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 28px; }
.tb-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: var(--tb-radius-pill); font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; border: 1px solid var(--tb-color-border); background: transparent; color: var(--tb-color-muted-foreground); }
.tb-badge.tone-Concept   { background: var(--tb-color-info-fill);    border-color: var(--tb-color-info-fill-border);    color: var(--tb-color-primary); }
.tb-badge.tone-How-to    { background: var(--tb-color-success-fill); border-color: var(--tb-color-success-fill-border); color: var(--tb-color-success); }
.tb-badge.tone-API       { background: var(--tb-color-warning-fill); border-color: var(--tb-color-warning-fill-border); color: var(--tb-color-warning); }
.tb-badge.tone-Reference { background: transparent; border-color: var(--tb-color-border); color: var(--tb-color-muted-foreground); }

.tb-h1 { font-family: var(--font-heading); font-weight: 600; font-size: 34px; line-height: 1.12; letter-spacing: -0.025em; margin-bottom: 14px; text-wrap: pretty; }
.tb-deck { font-size: 17px; line-height: 1.6; color: var(--tb-color-muted-foreground); text-wrap: pretty; }
.tb-metarow { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--tb-color-border); font-size: 12.5px; color: var(--tb-color-muted-foreground); }
.tb-metarow span { display: inline-flex; align-items: center; gap: 6px; }

.tb-cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.tb-card {
  display: flex; flex-direction: column; gap: 7px; padding: 18px; border: 1px solid var(--tb-color-border);
  border-radius: var(--tb-radius-md); background: var(--tb-color-card); color: var(--tb-color-foreground);
  box-shadow: var(--tb-shadow-xs); transition: border-color var(--tb-duration-base) var(--tb-ease-standard), transform var(--tb-duration-base) var(--tb-ease-standard);
  cursor: pointer; text-decoration: none;
}
.tb-card:hover { border-color: var(--tb-color-primary); transform: translateY(-1px); }
.tb-card .kicker { font-size: 10px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--tb-color-muted-foreground); }
.tb-card .title { font-family: var(--font-heading); font-weight: 500; font-size: 16.5px; letter-spacing: -0.012em; line-height: 1.3; }
.tb-card .text { font-size: 13.5px; line-height: 1.55; color: var(--tb-color-muted-foreground); }

.tb-home-section { display: flex; flex-direction: column; gap: 34px; padding-top: 32px; }
.tb-home-h2 { font-family: var(--font-heading); font-weight: 600; font-size: 22px; letter-spacing: -0.018em; margin-bottom: 14px; }
/* "Where things live" -- one card per top-level section (Start Here, Timebase
   Components, Gage the AI Harness, Developer), each with a distinct accent
   color (set via the --accent custom property, one of the 4 existing
   callout-tone hues so this reuses the established palette rather than
   introducing new brand colors) and a row of clickable chips for that
   section's own top-level subsections, so a subsection is one click away
   from the homepage instead of requiring the sidebar. Replaced the older
   flat .tb-wtlrow/.tb-wtlcard list on 13 Aug 2026 -- Jeff felt sections
   weren't visible enough and subsections weren't easy to get to. */
.tb-sectioncards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.tb-sectioncard {
  display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 18px;
  border: 1px solid var(--tb-color-border); border-top: 3px solid var(--accent, var(--tb-color-primary));
  border-radius: var(--tb-radius-md); background: var(--tb-color-card); box-shadow: var(--tb-shadow-xs);
}
.tb-sectioncard-head {
  width: 100%; display: flex; align-items: baseline; gap: 10px; background: transparent; border: 0; padding: 0;
  cursor: pointer; text-align: left;
}
.tb-sectioncard-head .lbl {
  flex: 1; font-family: var(--font-heading); font-weight: 600; font-size: 18px; letter-spacing: -0.012em;
  color: var(--tb-color-foreground); transition: color var(--tb-duration-fast) var(--tb-ease-standard);
}
.tb-sectioncard-head:hover .lbl { color: var(--accent, var(--tb-color-primary)); }
.tb-sectioncard-head .cnt { font-family: var(--font-mono); font-size: 12px; color: var(--tb-color-muted-foreground); font-variant-numeric: tabular-nums; }
.tb-sectioncard-blurb { font-size: 13.5px; line-height: 1.55; color: var(--tb-color-muted-foreground); }
.tb-sectioncard-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 2px; }
.tb-sectionchip {
  height: 28px; padding: 0 13px; border-radius: var(--tb-radius-pill); border: 1px solid var(--tb-color-border);
  background: transparent; color: var(--tb-color-foreground); font-family: var(--font-sans); font-size: 12.5px;
  font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: border-color var(--tb-duration-fast) var(--tb-ease-standard), color var(--tb-duration-fast) var(--tb-ease-standard),
              background var(--tb-duration-fast) var(--tb-ease-standard);
}
.tb-sectionchip:hover {
  border-color: var(--accent, var(--tb-color-primary)); color: var(--accent, var(--tb-color-primary));
  background: color-mix(in srgb, var(--accent, var(--tb-color-primary)) 10%, transparent);
}

/* Section-index page: opens when a "Where things live" category card is
   clicked (added 14 Aug 2026, replacing the old jump-straight-to-first-
   article behavior). Lists every article in that section, grouped by
   subsection exactly like the sidebar groups them -- nested sub-subsections
   (Atlas > Domain Modeling etc.) get an indented, smaller-headed subgroup
   with a left border rather than their own card, so the nesting reads as
   "part of the group above" instead of a sibling of equal weight. */
.tb-secidx { display: flex; flex-direction: column; gap: 30px; margin-top: 8px; }
.tb-secidx-group { display: flex; flex-direction: column; gap: 10px; }
.tb-secidx-subgroup {
  display: flex; flex-direction: column; gap: 10px; margin-top: 4px; padding-left: 18px;
  border-left: 2px solid var(--tb-color-border);
}
.tb-secidx-grouptitle { font-family: var(--font-heading); font-weight: 600; font-size: 19px; letter-spacing: -0.015em; }
.tb-secidx-subtitle {
  font-family: var(--font-heading); font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  color: var(--tb-color-muted-foreground);
}
.tb-secidx-list { display: flex; flex-direction: column; gap: 8px; }
.tb-secidx-item {
  display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; border: 1px solid var(--tb-color-border);
  border-radius: var(--tb-radius-md); background: var(--tb-color-card); text-decoration: none;
  color: var(--tb-color-foreground); transition: border-color var(--tb-duration-fast) var(--tb-ease-standard);
}
.tb-secidx-item:hover { border-color: var(--tb-color-primary); }
.tb-secidx-item .ti { font-family: var(--font-heading); font-weight: 500; font-size: 14.5px; letter-spacing: -0.008em; }
.tb-secidx-item .sm { font-size: 12.5px; line-height: 1.5; color: var(--tb-color-muted-foreground); }

.tb-stub { margin-top: 32px; display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px dashed var(--tb-color-border); border-radius: var(--tb-radius-md); background: var(--tb-color-card); }
.tb-stub .kick { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tb-color-muted-foreground); }
.tb-stub p { font-size: 15px; line-height: 1.6; color: var(--tb-color-muted-foreground); }

.tb-related { margin-top: 52px; padding-top: 24px; border-top: 1px solid var(--tb-color-border); display: flex; flex-direction: column; gap: 14px; }
.tb-related-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tb-color-muted-foreground); }
.tb-relgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 12px; }
.tb-relcard {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border: 1px solid var(--tb-color-border);
  border-radius: var(--tb-radius-md); background: var(--tb-color-card); color: var(--tb-color-foreground); font-size: 14px; font-weight: 500; line-height: 1.35;
  text-decoration: none; cursor: pointer;
}
.tb-relcard:hover { border-color: var(--tb-color-primary); color: var(--tb-color-primary); }
.tb-relcard .arrow { font-family: var(--font-mono); color: var(--tb-color-muted-foreground); }

.tb-feedback { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 15px 18px; border: 1px solid var(--tb-color-border); border-radius: var(--tb-radius-md); background: var(--tb-color-card); }
.tb-feedback .prompt { font-size: 14.5px; color: var(--tb-color-muted-foreground); }
.tb-feedback .spacer { flex: 1; }
.tb-fbbtn { height: 30px; padding: 0 14px; font-family: var(--font-sans); font-size: 13px; font-weight: 500; border: 1px solid var(--tb-color-border); background: transparent; color: var(--tb-color-foreground); border-radius: var(--tb-radius-sm); cursor: pointer; }
.tb-fbbtn.yes:hover { border-color: var(--tb-color-success); color: var(--tb-color-success); }
.tb-fbbtn.no:hover { border-color: var(--tb-color-destructive); color: var(--tb-color-destructive); }

.tb-toc { width: 210px; flex: 0 0 210px; position: sticky; top: 4px; display: flex; flex-direction: column; gap: 2px; }
.tb-toc-label { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--tb-color-muted-foreground); padding-bottom: 8px; }
.tb-tocitem { font-size: 12.5px; line-height: 1.4; padding: 5px 0 5px 12px; border-left: 2px solid var(--tb-color-border); color: var(--tb-color-muted-foreground); font-weight: 400; text-decoration: none; display: block; transition: color var(--tb-duration-fast) var(--tb-ease-standard); cursor: pointer; }
.tb-tocitem.depth2 { padding-left: 24px; }
.tb-tocitem.active { border-left-color: var(--tb-color-primary); color: var(--tb-color-primary); font-weight: 600; }
.tb-tocfoot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--tb-color-border); display: flex; flex-direction: column; gap: 9px; }
.tb-tocfoot a { font-size: 12.5px; color: var(--tb-color-muted-foreground); }

/* ---------- Pre-release banner ---------- */
/* Mirrors .tbp .tb-callout[data-tone="warn"] deliberately: the corpus already uses
   that tone for "you can break something here", and a page-level warning that looked
   like a different species of box would read as chrome rather than as a warning.
   Restated here rather than reused because .tb-callout is scoped under .tbp, which is
   article prose only -- this sits above the article, on the home page too.
   Rendered by tools/build.py when content/_copy.yml's version says Beta.
   Values track .tbp .tb-callout in 04-content.css; change both together. */
.tb-betabanner-wrap { max-width: 1520px; margin: 0 auto; padding: 30px 44px 0; }
.tb-betabanner {
  max-width: 1200px; display: flex; gap: 12px; padding: 15px 17px;
  border-radius: var(--tb-radius-md);
  border: 1px solid var(--tb-color-warning-fill-border);
  background: var(--tb-color-warning-fill);
}
.tb-betabanner > .bar { width: 5px; flex: 0 0 5px; border-radius: 3px; background: var(--tb-color-warning); align-self: stretch; }
.tb-betabanner .body { min-width: 0; }
.tb-betabanner .kick { font-family: var(--font-sans); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tb-color-warning); margin-bottom: 6px; }
.tb-betabanner p { font-family: var(--font-sans); font-size: 14.5px; line-height: 1.6; font-weight: 300; margin: 0; }


/* 04-content.css
   Article prose, everything under .tbp: headings, tables, code cards, callouts,
   Diving Deeper asides, section bands, heading anchors.

   Extracted verbatim from the reference build, lines 361-458.
   Concatenated into docs.css by tools/build.py in filename order. */

/* ---------- Prose (.tbp) ---------- */
.tbp { font-size: 15.5px; line-height: 1.68; color: var(--tb-color-foreground); padding-top: 28px; }
.tbp > * + * { margin-top: 20px; }
.tbp h2 { font-family: var(--font-heading); font-weight: 600; font-size: 25px; line-height: 1.25; letter-spacing: -0.018em; margin-top: 92px; scroll-margin-top: 24px; }
.tbp h3 { font-family: var(--font-heading); font-weight: 500; font-size: 19px; line-height: 1.32; letter-spacing: -0.01em; margin-top: 51px; scroll-margin-top: 24px; }
.tbp h4 { font-family: var(--font-heading); font-weight: 500; font-size: 16.5px; margin-top: 26px; }
.tbp h5 { font-family: var(--font-sans); font-weight: 600; font-size: 13px; letter-spacing: .03em; text-transform: uppercase; color: var(--tb-color-muted-foreground); margin-top: 22px; }
.tbp img { max-width: 100%; height: auto; display: block; border: 1px solid var(--tb-color-border); border-radius: var(--tb-radius-md); }
.tbp p { text-wrap: pretty; font-weight: 300; }
.tbp strong { font-weight: 600; }
.tbp ul, .tbp ol { padding-left: 22px; display: flex; flex-direction: column; gap: 9px; }
.tbp li { line-height: 1.62; }
.tbp li > ul, .tbp li > ol { margin-top: 9px; }
.tbp hr { border: 0; border-top: 1px solid var(--tb-color-border); margin: 40px 0; }
.tbp code { font-family: var(--font-mono); font-size: 0.87em; padding: 0.12em 0.36em; border-radius: 4px; background: var(--tb-color-muted); border: 1px solid var(--tb-color-border); white-space: normal; overflow-wrap: anywhere; }
.tbp pre { margin: 0; padding: 16px; overflow-x: auto; font-family: var(--font-mono); font-size: 13px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.tbp pre code { background: none; border: 0; padding: 0; font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.tbp table { width: 100%; border-collapse: collapse; font-size: 14px; table-layout: fixed; }
.tbp thead th { text-align: left; padding: 10px 14px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--tb-color-muted-foreground); background: var(--tb-color-muted); border-bottom: 1px solid var(--tb-color-border); overflow-wrap: break-word; word-break: break-word; }
.tbp tbody td { padding: 11px 14px; vertical-align: top; line-height: 1.55; border-bottom: 1px solid var(--tb-color-border); overflow-wrap: break-word; word-break: break-word; }
.tbp tbody tr:last-child td { border-bottom: 0; }
.tbp tbody tr:hover { background: var(--tb-color-table-hover); }
.tbp .tb-tablewrap { border: 1px solid var(--tb-color-border); border-radius: 0; overflow: auto; background: var(--tb-color-card); }
.tbp .tb-rowhide { display: none; }
.tbp .tb-expand { width: 100%; padding: 10px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; color: var(--tb-color-primary); background: var(--tb-color-muted); border: 0; border-top: 1px solid var(--tb-color-border); cursor: pointer; }
.tbp .tb-codewrap { border: 1px solid var(--tb-color-border); border-radius: var(--tb-radius-md); overflow: hidden; background: var(--tb-color-card); }
.tbp .tb-codebar { display: flex; align-items: center; gap: 4px; height: 38px; padding: 0 8px 0 10px; border-bottom: 1px solid var(--tb-color-border); background: var(--tb-color-muted); }
.tbp .tb-tab { height: 24px; padding: 0 10px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--tb-color-muted-foreground); background: transparent; border: 1px solid transparent; border-radius: 5px; cursor: pointer; }
.tbp .tb-tab[data-on="1"] { color: var(--tb-color-foreground); background: var(--tb-color-card); border-color: var(--tb-color-border); }
.tbp .tb-copy { height: 24px; padding: 0 9px; font-family: var(--font-sans); font-size: 11.5px; font-weight: 500; color: var(--tb-color-muted-foreground); background: transparent; border: 1px solid var(--tb-color-border); border-radius: 5px; cursor: pointer; }
.tbp .tb-copy:hover { color: var(--tb-color-foreground); }
/* margin-bottom doubles the space below every callout (20px baseline -> 40px). Adjacent
   sibling margins collapse to their max in normal flow, so this sets a 40px floor without
   fighting whatever follows: a plain paragraph's 20px gap becomes 40px, while a following
   heading that wants more (h2's 92px, h3's new 51px) still wins outright. */
/* A blockquote that is just a quote.
 *
 * The reference build had no rule for this because it never produced one: every
 * blockquote became a callout, tone guessed from its wording when no label was present.
 * The generator only promotes a blockquote that opens with an explicit **Note:** /
 * **Tip:** / **Important:** / **Breaking:** label, which leaves 166 genuine asides across
 * the set needing an appearance of their own. Deliberately quieter than a callout: a
 * rule, muted text, no fill and no kicker, so the two do not compete. */
.tbp blockquote { margin: 0 0 40px; padding: 2px 0 2px 18px; border-left: 3px solid var(--tb-color-border); color: var(--tb-color-muted-foreground); }
.tbp blockquote > * + * { margin-top: 10px; }
.tbp blockquote p:last-child { margin-bottom: 0; }

.tbp .tb-callout { display: flex; gap: 12px; padding: 15px 17px; border-radius: var(--tb-radius-md); border: 1px solid var(--tb-color-info-fill-border); background: var(--tb-color-info-fill); margin-bottom: 40px; }
.tbp .tb-callout > .bar { width: 5px; flex: 0 0 5px; border-radius: 3px; background: var(--tb-color-info); align-self: stretch; }
.tbp .tb-callout .body { min-width: 0; }
.tbp .tb-callout .body > * + * { margin-top: 10px; }
.tbp .tb-callout .kick { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tb-color-info); margin-bottom: 6px; }
.tbp .tb-callout p { font-size: 14.5px; line-height: 1.6; margin: 0; }
.tbp .tb-callout[data-tone="warn"] { border-color: var(--tb-color-warning-fill-border); background: var(--tb-color-warning-fill); }
.tbp .tb-callout[data-tone="warn"] > .bar { background: var(--tb-color-warning); }
.tbp .tb-callout[data-tone="warn"] .kick { color: var(--tb-color-warning); }
.tbp .tb-callout[data-tone="tip"] { border-color: var(--tb-color-success-fill-border); background: var(--tb-color-success-fill); }
.tbp .tb-callout[data-tone="tip"] > .bar { background: var(--tb-color-success); }
.tbp .tb-callout[data-tone="tip"] .kick { color: var(--tb-color-success); }
.tbp .tb-callout[data-tone="breaking"] { border-color: var(--tb-color-destructive-fill-border); background: var(--tb-color-destructive-fill); }
.tbp .tb-callout[data-tone="breaking"] > .bar { background: var(--tb-color-destructive); }
.tbp .tb-callout[data-tone="breaking"] .kick { color: var(--tb-color-destructive); }

/* Alternating background bands behind each top-level H2 section (wrapped client-side in
   processArticle step 5), so long reference articles with many H2s in a row are easier to
   visually scan while scrolling. Flat zebra-stripe bands -- no border-radius, unlike the
   card-style callouts/code blocks above -- bled slightly past the text column with a
   matching negative margin so the tint reads as a full band rather than an indented box.
   The wrapper is a direct child of .tbp, so ".tbp > * + *" already spaces sections apart;
   internal spacing between the elements a section contains has to be re-declared here since
   nesting them one level deeper takes them out of that direct-child selector's reach. */
/* Bleed matches .tb-content's own 44px side padding exactly, so the band reaches all the way
   to the true edges of the main content pane (flush against the left nav sidebar, and up to
   the start of the gap before the right TOC) rather than stopping short with a visible gutter. */
/* Top padding doubled (28px -> 56px) per explicit request for more room above each H2 --
   this is the effective "space above H2" control, since the h2:first-child rule below zeroes
   out .tbp h2's own margin-top for every wrapped heading (every H2 is a section's first
   child). Bottom/horizontal padding are unchanged. */
.tbp .tb-h2section { padding: 56px 44px 28px; margin-left: -44px; margin-right: -44px; }
.tbp .tb-h2section[data-parity="1"] { background: var(--tb-color-section-alt); }
.tbp .tb-h2section > * + * { margin-top: 20px; }
.tbp .tb-h2section > h2:first-child { margin-top: 0; }
/* Fix: ".tb-h2section > * + *" above is two classes, which outranks the single-class-plus-tag
   ".tbp h3/h4/h5" heading rules -- so every wrapped h3/h4/h5 that isn't a section's first child
   (i.e. virtually all of them) was silently collapsing to this generic 20px gap instead of its
   own intended margin-top. Restating each heading's value at this same specificity (class +
   class + tag) restores it; scoped by ">" rather than "> * + *" so it applies whether or not
   the heading happens to be a section's first child. */
.tbp .tb-h2section > h3 { margin-top: 51px; }
.tbp .tb-h2section > h4 { margin-top: 26px; }
.tbp .tb-h2section > h5 { margin-top: 22px; }

/* "Diving deeper" asides: a dashed border (vs. the solid-border tone callouts above) reads as
   optional/supplementary rather than a warning or a required step, with a distinct icon + label. */
.tbp .tb-divingdeeper { margin: 20px 0; border-radius: var(--tb-radius-md); border: 1.5px dashed var(--tb-color-primary); background: color-mix(in srgb, var(--tb-color-primary) 5%, var(--tb-color-card)); overflow: hidden; }
.tbp .tb-divingdeeper-head { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-bottom: 1.5px dashed var(--tb-color-primary); background: color-mix(in srgb, var(--tb-color-primary) 10%, transparent); }
.tbp .tb-divingdeeper-head svg { flex: 0 0 auto; color: var(--tb-color-primary); }
.tbp .tb-divingdeeper-head span { font-family: var(--font-sans); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tb-color-primary); }
.tbp .tb-divingdeeper-body { padding: 14px 18px 18px; }
.tbp .tb-divingdeeper-body > * + * { margin-top: 10px; }
.tbp .tb-divingdeeper-body p { font-size: 14.5px; line-height: 1.6; margin: 0; padding-left: 0 !important; }
.tbp .tb-divingdeeper-body .tb-tablewrap { margin: 4px 0 0; }

/* Inline "enter this / navigate here" values: distinguished from ordinary italic emphasis with a
   monospace, chip-style treatment. Scoped to newly-imported content (tb-src-import) where <em> is
   consistently used for literal values, paths, and URLs rather than prose emphasis. */
.tbp.tb-src-import em { font-style: normal; font-family: var(--font-mono); font-size: 0.87em; padding: 0.1em 0.4em; border-radius: 4px; background: var(--tb-color-muted); border: 1px solid var(--tb-color-border); color: var(--tb-color-foreground); }
.tbp .tb-anchor { opacity: 0; margin-left: 8px; font-weight: 400; color: var(--tb-color-muted-foreground); text-decoration: none; }
.tbp h2:hover .tb-anchor, .tbp h3:hover .tb-anchor { opacity: 1; }


/* 05-components.css
   Search overlay, image lightbox, and the responsive rules.

   Extracted verbatim from the reference build, lines 459-501.
   Concatenated into docs.css by tools/build.py in filename order. */

/* ---------- Search overlay ---------- */
.tb-searchveil { position: fixed; inset: 0; z-index: 60; background: rgba(18,18,20,.55); backdrop-filter: blur(3px); display: none; justify-content: center; padding-top: 84px; }
.tb-searchveil.open { display: flex; }
.tb-searchpanel { width: 720px; max-width: calc(100vw - 32px); max-height: 74vh; display: flex; flex-direction: column; background: var(--tb-color-popover); border: 1px solid var(--tb-color-border); border-radius: var(--tb-radius-lg); box-shadow: var(--tb-shadow-lg); overflow: hidden; animation: tbFade 160ms cubic-bezier(0.2,0,0,1); }
.tb-searchinrow { display: flex; align-items: center; gap: 10px; padding: 0 16px; height: 54px; border-bottom: 1px solid var(--tb-color-border); }
.tb-searchinrow input { flex: 1; height: 40px; border: 0; outline: none; background: transparent; color: var(--tb-color-foreground); font-family: var(--font-sans); font-size: 16px; }
.tb-searchinrow kbd { font-family: var(--font-mono); font-size: 11px; padding: 3px 6px; border: 1px solid var(--tb-color-border); border-radius: 4px; color: var(--tb-color-muted-foreground); }
.tb-searchfilters { display: flex; flex-wrap: wrap; gap: 6px; padding: 11px 16px; border-bottom: 1px solid var(--tb-color-border); }
.tb-sfchip { height: 26px; padding: 0 11px; font-family: var(--font-sans); font-size: 12px; font-weight: 500; border-radius: var(--tb-radius-pill); border: 1px solid var(--tb-color-border); background: transparent; color: var(--tb-color-muted-foreground); cursor: pointer; }
.tb-sfchip:hover { color: var(--tb-color-foreground); background: var(--tb-color-accent); }
.tb-sfchip.on { font-weight: 600; border-color: var(--tb-color-primary); background: color-mix(in srgb, var(--tb-color-primary) 16%, transparent); color: var(--tb-color-primary); }
.tb-searchresults { flex: 1; overflow-y: auto; padding: 8px; }
.tb-sresult { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: var(--tb-radius-sm); color: var(--tb-color-foreground); text-decoration: none; cursor: pointer; }
.tb-sresult:hover, .tb-sresult.cursor { background: var(--tb-color-accent); }
.tb-sresult .row1 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.tb-sresult .rtitle { font-size: 14.5px; font-weight: 600; color: var(--tb-color-foreground); }
.tb-sresult .rprod { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--tb-color-muted-foreground); border: 1px solid var(--tb-color-border); border-radius: 4px; padding: 1px 5px; }
.tb-sresult .rsec { font-size: 11.5px; color: var(--tb-color-muted-foreground); }
.tb-sresult .snippet { font-size: 12.5px; line-height: 1.5; color: var(--tb-color-muted-foreground); }
.tb-noresults { padding: 44px 16px; text-align: center; font-size: 14px; color: var(--tb-color-muted-foreground); }
.tb-searchfoot { display: flex; align-items: center; gap: 16px; padding: 9px 16px; border-top: 1px solid var(--tb-color-border); background: var(--tb-color-muted); font-size: 11.5px; color: var(--tb-color-muted-foreground); }

/* Image lightbox: click any article image to view it full-screen. */
.tbp img { cursor: zoom-in; transition: opacity 120ms; }
.tbp img:hover { opacity: 0.92; }
.tb-imgveil { position: fixed; inset: 0; z-index: 70; background: rgba(10,10,12,.82); display: none; align-items: center; justify-content: center; flex-direction: column; padding: 48px; cursor: zoom-out; }
.tb-imgveil.open { display: flex; animation: tbFade 140ms cubic-bezier(0.2,0,0,1); }
.tb-imgveil img { max-width: 100%; max-height: calc(100vh - 96px); object-fit: contain; cursor: default; border-radius: var(--tb-radius-md); box-shadow: var(--tb-shadow-lg); background: var(--tb-color-card); }
.tb-imgveil-caption { margin-top: 14px; font-family: var(--font-sans); font-size: 13px; color: rgba(255,255,255,.75); text-align: center; max-width: 80vw; }
.tb-imgveil-close { position: fixed; top: 20px; right: 24px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: var(--tb-radius-md); border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; cursor: pointer; }
.tb-imgveil-close:hover { background: rgba(255,255,255,.16); }

/* ---------- Responsive ---------- */
@media (max-width: 1240px) { .tb-toc { display: none !important; } .tb-content { gap: 0 !important; } }
@media (max-width: 1000px) {
  .tb-navbtn { display: grid !important; }
  .tb-nav { display: none; }
  .tb-nav.open { display: block; position: fixed; left: 0; top: 60px; bottom: 0; z-index: 50; box-shadow: var(--tb-shadow-lg); }
  .tb-content { padding: 28px 24px 120px !important; }
  .tb-brandsub { display: none !important; }
  .tb-logo { width: auto !important; flex: 0 0 auto !important; }
}