/* 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)
   ============================================================ */
/* The @font-face rules are written in by tools/build.py, which is what lets the
   hosted site point at assets/fonts/ while the single offline file carries the
   same faces inline. They used to be one @import from fonts.googleapis.com,
   which meant a site on a plant network with no route out rendered in Georgia
   after waiting for a request that was never going to arrive, and sent every
   reader's address to Google on the way. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/poppins-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/poppins-latin-500-normal.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/poppins-latin-600-normal.woff2) format('woff2');}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/poppins-latin-700-normal.woff2) format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2');}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(assets/fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2');}

: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);

  /* Poppins for both, which is what the product design system sets and what
     every app bundles. The docs are reached from a Knowledge Base button inside
     those apps, so a different face here reads as a different product. Inter
     stays as the first fallback, matching the product's own declaration. */
  --font-heading: "Poppins", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-sans:    "Poppins", "Inter", ui-sans-serif, 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: 296px; flex: 0 0 296px; 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); }
/* 12.5px matches the Overview row above it, so an article and the group's own
   landing page read as one list rather than two type sizes stacked. Weight
   stays 400: Overview is 600 because it names the group, and an article is not
   a heading. Indented past the group header's caret so the hierarchy is legible
   without a rule or a bullet. */
.tb-navitem {
  display: flex; align-items: center; gap: 6px; padding: 7px 10px 7px 30px; border-radius: var(--tb-radius-sm); font-size: 12.5px;
  line-height: 1.45; 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; }

/* A component group header carries two targets: the name opens that
   component's overview page, the caret expands the group. One control cannot
   do both, and a header that only expanded left no way to reach the component
   itself. The row keeps the same box the single-button version had, so the
   two variants line up in a column together; only the children differ. */
.tb-subhead--split { padding: 0; }
/* The 4px margin keeps this button's hover background off the left edge, where
   the current-group rule lives. An inset shadow paints under a CHILD's
   background (it only paints over its own element's), so without the gap the
   caret's hover state covers the rule and the marker blinks out from under the
   pointer. The margin comes back out of the padding, so the caret glyph does
   not move. */
.tb-subhead--split .tb-subhead-caret {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  background: transparent; border: 0; cursor: pointer; color: inherit;
  margin-left: 4px; padding: 10px 3px 3px 4px; border-radius: var(--tb-radius-sm);
}
.tb-subhead--split .tb-subhead-link {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: inherit; text-decoration: none; padding: 10px 8px 3px 2px; border-radius: var(--tb-radius-sm);
}
/* Hovering one half must not light the other, or the row reads as a single
   control again and the split stops being legible. */
.tb-subhead--split:hover { background: transparent; }
.tb-subhead--split .tb-subhead-link:hover,
.tb-subhead--split .tb-subhead-caret:hover { background: var(--tb-color-accent); }
.tb-subhead--split.active .tb-subhead-link { color: var(--tb-color-primary); }
.tb-subhead--split .tb-subcaret { margin-left: 0; }  /* leftmost, like every other caret here */

/* The Overview row itself. Set in the same small caps as the group headers
   rather than in article case, because it names the group it sits under
   rather than a document, and italic would read as an aside. */
.tb-navitem--overview span.t {
  font-size: 12.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--tb-color-muted-foreground);
}
.tb-navitem--overview.active span.t { color: inherit; }

/* The left rule marks WHERE YOU ARE, and nothing else uses it.
   It sits on the group holding the page being shown, not only on a group whose
   own overview is open, so it follows a reader into a group's articles rather
   than disappearing as soon as they open one. An inset shadow rather than a
   border because a border is layout and would shift the marked row out of line
   with its siblings.

   `featured: true` used to paint this same rule permanently on one group,
   which is why it read as a selection that never moved. It now shows only as
   an explicit "Start here" chip on the section-index page, where the words say
   what the colour could not. */
.tb-subseclabel--current { box-shadow: inset 2px 0 0 var(--tb-color-primary); }
/* 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: 42px; }
/* 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; text-decoration: none; color: inherit;
}
.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 {
  /* An anchor now, not a button: a chip names a destination, so it should
     behave like one -- middle-click, open in a new tab, and a status-bar
     preview of where it goes. inline-flex + the line-height reset is what
     keeps a link the same shape the button was. */
  display: inline-flex; align-items: center; text-decoration: none; line-height: 1;
  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. */
/* Curated cards above a component overview's generated index, when that
   component has a _homecards.yml. Separated from the index below it by more
   space than the index uses internally, so the two read as answer-then-
   reference rather than as one long list. */
.tb-secidx-cards { margin: 18px 0 34px; }

.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); }

/* The featured group on a section index page -- the same `featured: true` flag that
   highlights the subsection in the sidebar. Lifted off the page ground with a tinted
   panel and a left rule in the primary accent, so it reads as the thing to do first
   rather than the first of several equal groups. The eyebrow says so in words, which
   is what survives for a reader who cannot see the colour. */
.tb-secidx-group--featured {
  position: relative;
  background: var(--tb-color-accent);
  border-left: 3px solid var(--tb-color-primary);
  border-radius: 4px;
  padding: 16px 18px 18px;
  gap: 8px;
}
.tb-secidx-flag {
  font-family: var(--font-sans); font-size: 10px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--tb-color-primary);
}
.tb-secidx-group--featured .tb-secidx-grouptitle { color: var(--tb-color-foreground); }
.tb-secidx-group--featured .tb-secidx-item { background: var(--tb-color-background); }

.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; 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); }
/* 400, not 300. List items and table cells inherit the base weight, so a 300
   paragraph visibly lightened wherever prose turned into a list, and 300 is
   thin for sustained reading at 15.5px against a dark background. The design
   system sets p to 400. */
.tbp p { text-wrap: pretty; }
.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; }
}