/* Thundera Shell v2 — docs kit. Load after tokens.css, shell.css and ui.css. Behaviour: docs.js.
 * Left nav + search, article typography (.th-prose), right "On this page" TOC, callouts,
 * code copy, prev/next, edit / back-to-app links. Guide: https://thundera.eu/docs/shell#docs */

.th-docs { display: grid; grid-template-columns: 264px minmax(0, 1fr) 224px; gap: clamp(24px, 3vw, 48px); max-width: var(--th-container-wide); margin: 0 auto; padding: 0 max(var(--th-gutter), env(safe-area-inset-right, 0px)); }
.th-docs-nav, .th-docs-toc { position: sticky; top: calc(var(--th-bar-h) + env(safe-area-inset-top, 0px)); align-self: start; max-height: calc(100dvh - var(--th-bar-h) - env(safe-area-inset-top, 0px)); overflow-y: auto; padding: 28px 0 40px; scrollbar-width: thin; }
.th-docs-main { min-width: 0; padding: 32px 0 80px; }
.th-docs-nav h2, .th-docs-toc h2 { margin: 0 0 8px; padding: 0 10px; font: var(--th-fw-semibold) var(--th-fs-2xs)/1.4 var(--th-font-sans); letter-spacing: var(--th-tracking-wide); text-transform: uppercase; color: var(--th-text-3); }
.th-docs-nav ul, .th-docs-toc ul { list-style: none; margin: 0; padding: 0; }
.th-docs-nav section + section { margin-top: 22px; }
.th-docs-nav a { display: block; padding: 6px 10px; border-radius: var(--th-radius-sm); color: var(--th-text-2); font-size: var(--th-fs-sm); text-decoration: none !important; line-height: 1.4; transition: background-color var(--th-dur-1), color var(--th-dur-1); }
.th-docs-nav a:hover { color: var(--th-text); background: var(--th-hover); }
.th-docs-nav a[aria-current] { color: var(--brand-accent); background: var(--brand-soft); font-weight: var(--th-fw-semibold); }
.th-docs-nav ul ul { margin: 2px 0 4px 12px; padding-left: 8px; border-left: 1px solid var(--th-border); }
.th-docs-back { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 6px 10px; border-radius: var(--th-radius-sm); color: var(--th-text-2); font-size: var(--th-fs-sm); text-decoration: none !important; }
.th-docs-back:hover { background: var(--th-hover); color: var(--th-text); }

/* Search */
.th-docs-search { position: relative; margin: 0 0 22px; }
.th-docs-search input { width: 100%; height: 38px; padding: 0 44px 0 34px; border-radius: var(--th-radius-sm); border: 1px solid var(--th-border-2); background: var(--th-surface-1); color: var(--th-text); font: var(--th-fs-sm) var(--th-font-sans); outline: none; -webkit-appearance: none; appearance: none; }
.th-docs-search input:focus { border-color: var(--brand-accent); box-shadow: 0 0 0 3px var(--brand-soft); }
.th-docs-search > svg { position: absolute; left: 11px; top: 11px; width: 16px; height: 16px; color: var(--th-text-3); pointer-events: none; }
.th-docs-search kbd { position: absolute; right: 8px; top: 8px; height: 22px; padding: 0 6px; display: grid; place-items: center; border-radius: 5px; border: 1px solid var(--th-border-2); background: var(--th-surface-2); color: var(--th-text-3); font: 11px var(--th-font-mono); pointer-events: none; }
.th-docs-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: var(--th-z-popover); max-height: min(420px, 60dvh); overflow: auto; padding: 6px; margin: 0; list-style: none; border-radius: var(--th-radius-md); border: 1px solid var(--th-border-2); background: var(--th-surface-1); box-shadow: var(--th-shadow-4); }
.th-docs-results a { display: block; padding: 9px 10px; border-radius: var(--th-radius-sm); color: var(--th-text); text-decoration: none !important; }
.th-docs-results a small { display: block; margin-top: 2px; color: var(--th-text-3); font-size: var(--th-fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.th-docs-results a:hover, .th-docs-results a[aria-selected="true"] { background: var(--brand-soft); }
.th-docs-results mark { background: none; color: var(--brand-accent); font-weight: var(--th-fw-semibold); }
.th-docs-results .th-none { padding: 12px 10px; color: var(--th-text-3); font-size: var(--th-fs-sm); }

/* TOC */
.th-docs-toc[data-empty] > h2, .th-docs-toc[data-empty] > ul { display: none; }
.th-docs-toc a { display: block; padding: 4px 10px; border-left: 2px solid transparent; color: var(--th-text-3); font-size: var(--th-fs-xs); line-height: 1.5; text-decoration: none !important; transition: color var(--th-dur-1), border-color var(--th-dur-1); }
.th-docs-toc a:hover { color: var(--th-text); }
.th-docs-toc a[data-depth="3"] { padding-left: 22px; }
.th-docs-toc a[aria-current] { color: var(--brand-accent); border-left-color: var(--brand-accent); }
.th-docs-toc ul { border-left: 1px solid var(--th-border); }
.th-docs-toc ul a { margin-left: -1px; }
.th-docs-toc-extra { margin-top: 20px; padding: 14px 10px 0; border-top: 1px solid var(--th-border); display: grid; gap: 8px; font-size: var(--th-fs-xs); }
.th-docs-toc-extra a { border: 0; padding: 0; color: var(--th-text-2); }

/* Mobile bar */
.th-docs-mbar { display: none; position: sticky; top: calc(var(--th-bar-h) + env(safe-area-inset-top, 0px)); z-index: var(--th-z-sticky); margin: 0 calc(-1 * var(--th-gutter)); padding: 8px var(--th-gutter); background: var(--th-glass); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-bottom: 1px solid var(--th-border); gap: 8px; align-items: center; }
.th-docs-mbar button { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: var(--th-radius-sm); border: 1px solid var(--th-border-2); background: var(--th-surface-1); color: var(--th-text); font: var(--th-fw-medium) var(--th-fs-sm) var(--th-font-sans); cursor: pointer; }
.th-docs-mbar button svg { width: 16px; height: 16px; }
.th-docs-mbar span { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--th-text-2); font-size: var(--th-fs-sm); }

/* Hub / landing pages without a TOC column */
.th-docs-wide { grid-template-columns: 264px minmax(0, 1fr); }
.th-docs-wide .th-docs-main { max-width: 1040px; }
@media (max-width: 1199.98px) { .th-docs { grid-template-columns: 240px minmax(0, 1fr); } .th-docs-toc { display: none; } }
@media (max-width: 899.98px) {
  .th-docs { grid-template-columns: minmax(0, 1fr); }
  .th-docs-mbar { display: flex; }
  /* docs.js inserts the mobile menu bar after first paint; reserve its height (8+34+8+1) so the article does not shift (CLS) */
  .th-docs-main:not(:has(.th-docs-mbar))::before { content: ''; display: block; height: 51px; }
  .th-docs-nav { position: fixed; z-index: var(--th-z-drawer); left: 0; top: calc(var(--th-bar-h) + env(safe-area-inset-top, 0px)); bottom: 0; width: min(320px, 88vw); max-height: none; padding: 20px 16px 40px; background: var(--th-bg); border-right: 1px solid var(--th-border-2); box-shadow: var(--th-shadow-4); transform: translateX(-102%); transition: transform var(--th-dur-3) var(--th-ease); }
  .th-docs[data-nav-open] .th-docs-nav { transform: none; }
  .th-docs[data-nav-open]::after { content: ""; position: fixed; inset: calc(var(--th-bar-h) + env(safe-area-inset-top, 0px)) 0 0; z-index: calc(var(--th-z-drawer) - 1); background: var(--th-overlay); }
  .th-docs-main { padding-top: 20px; }
}

/* ── Prose ── */
.th-prose { max-width: 74ch; color: var(--th-text-2); font-size: var(--th-fs-base); line-height: var(--th-lh-relaxed); }
.th-prose > * + * { margin-top: 1.1em; }
.th-prose :is(h1, h2, h3, h4) { position: relative; color: var(--th-text); scroll-margin-top: calc(var(--th-bar-h) + 72px); letter-spacing: var(--th-tracking-tight); line-height: 1.25; text-wrap: balance; }
.th-prose h1 { font-size: var(--th-fs-4xl); font-weight: var(--th-fw-black); letter-spacing: var(--th-tracking-display); line-height: 1.1; }
.th-prose h2 { margin-top: 2.2em; padding-top: 1.2em; border-top: 1px solid var(--th-border); font-size: var(--th-fs-2xl); font-weight: var(--th-fw-bold); }
.th-prose h3 { margin-top: 1.8em; font-size: var(--th-fs-lg); font-weight: var(--th-fw-semibold); }
.th-prose h4 { margin-top: 1.5em; font-size: var(--th-fs-base); font-weight: var(--th-fw-semibold); }
.th-prose :is(h2, h3, h4) + * { margin-top: .7em; }
.th-prose .th-lead { font-size: var(--th-fs-lg); color: var(--th-text-2); margin-top: .8em; }
.th-prose a { color: var(--brand-accent); text-decoration: underline; text-decoration-color: var(--brand-line); text-underline-offset: 3px; }
.th-prose a:hover { text-decoration-color: currentColor; }
.th-prose strong { color: var(--th-text); font-weight: var(--th-fw-semibold); }
.th-prose :is(ul, ol) { padding-left: 1.4em; }
.th-prose li + li { margin-top: .4em; }
.th-prose li::marker { color: var(--th-text-3); }
.th-prose hr { border: 0; height: 1px; background: var(--th-border); margin: 2.4em 0; }
.th-prose blockquote { margin-left: 0; padding: .2em 0 .2em 1.1em; border-left: 3px solid var(--brand-line); color: var(--th-text-2); font-style: italic; }
.th-prose img, .th-prose video { border-radius: var(--th-radius-lg); border: 1px solid var(--th-border); }
.th-prose :not(pre) > code { padding: .12em .4em; border-radius: 5px; background: var(--th-surface-3); border: 1px solid var(--th-border); color: var(--th-text); font: .86em var(--th-font-mono); overflow-wrap: anywhere; }
.th-prose kbd { padding: .1em .45em; border-radius: 5px; border: 1px solid var(--th-border-2); border-bottom-width: 2px; background: var(--th-surface-2); color: var(--th-text); font: .8em var(--th-font-mono); }
.th-prose pre { margin: 0; padding: 16px 18px; overflow: auto; border-radius: var(--th-radius-lg); background: var(--th-code-bg); border: 1px solid var(--th-border-2); color: #e6edf3; font: 13px/1.65 var(--th-font-mono); tab-size: 2; }
.th-prose .th-code pre { border: 0; border-radius: 0; }
.th-prose .th-code { margin-top: 1.1em; }
.th-prose table { width: 100%; border-collapse: collapse; font-size: var(--th-fs-sm); display: block; overflow-x: auto; }
.th-prose th, .th-prose td { padding: 10px 14px; border-bottom: 1px solid var(--th-border); text-align: left; vertical-align: top; }
.th-prose th { color: var(--th-text); font-weight: var(--th-fw-semibold); background: var(--th-surface-1); white-space: nowrap; }
.th-prose td code { white-space: nowrap; }
.th-anchor { position: absolute; left: -1.1em; padding-right: .3em; color: var(--th-text-3) !important; text-decoration: none !important; opacity: 0; transition: opacity var(--th-dur-1); }
.th-prose :is(h2, h3):hover .th-anchor, .th-anchor:focus { opacity: 1; }
.th-prose h2 .th-anchor { top: 1.2em; }

/* Callouts */
.th-callout { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 14px 16px; border-radius: var(--th-radius-md); border: 1px solid var(--th-border-2); background: var(--th-surface-1); color: var(--th-text-2); font-size: var(--th-fs-sm); }
.th-callout::before { content: "i"; grid-row: span 2; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font: var(--th-fw-bold) 12px/1 var(--th-font-mono); background: var(--th-info-soft); color: var(--th-info-text); }
.th-callout > strong:first-child { color: var(--th-text); }
.th-callout > :not(strong:first-child) { grid-column: 2; margin: 0; }
.th-callout-tip::before { content: "✓"; background: var(--th-success-soft); color: var(--th-success-text); }
.th-callout-warning::before { content: "!"; background: var(--th-warning-soft); color: var(--th-warning-text); }
.th-callout-danger::before { content: "×"; background: var(--th-danger-soft); color: var(--th-danger-text); }
.th-callout-tip { border-color: color-mix(in srgb, var(--th-green) 30%, transparent); }
.th-callout-warning { border-color: color-mix(in srgb, var(--th-amber) 32%, transparent); }
.th-callout-danger { border-color: color-mix(in srgb, var(--th-red) 32%, transparent); }

/* Prev / next + meta */
.th-docs-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 74ch; margin-top: 56px; }
.th-docs-pager a { display: block; padding: 14px 16px; border-radius: var(--th-radius-md); border: 1px solid var(--th-border); text-decoration: none !important; transition: border-color var(--th-dur-1), background-color var(--th-dur-1); }
.th-docs-pager a:hover { border-color: var(--brand-line); background: var(--th-hover); }
.th-docs-pager small { display: block; color: var(--th-text-3); font-size: var(--th-fs-xs); }
.th-docs-pager strong { color: var(--th-text); font-weight: var(--th-fw-semibold); }
.th-docs-pager [rel="next"] { grid-column: 2; text-align: right; }
.th-docs-meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; max-width: 74ch; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--th-border); color: var(--th-text-3); font-size: var(--th-fs-xs); }
.th-docs-meta a { color: var(--th-text-2); }

/* Docs landing (hub) cards */
.th-docs-hero { padding: 8px 0 28px; }
.th-docs-hero h1 { font-size: var(--th-fs-4xl); font-weight: var(--th-fw-black); letter-spacing: var(--th-tracking-display); line-height: 1.1; }
.th-docs-hero p:not(.th-eyebrow) { margin-top: 12px; max-width: 64ch; color: var(--th-text-2); font-size: var(--th-fs-lg); line-height: var(--th-lh-relaxed); }