/* Talos docs, minimal structure. Theme by overriding the custom properties below (lane W1); the class
   names in the page template are the interface. Light and dark follow the system unless
   data-theme="light" or "dark" is set on <html>. */
:root {
  --bg: #ffffff; --bg-raised: #f6f7f9; --fg: #1b1f24; --fg-muted: #5a6470; --border: #d8dde3;
  --accent: #2557d6; --accent-fg: #ffffff; --code-bg: #f0f2f5; --chip-since-bg: #e3f3e8; --chip-since-fg: #1c6b3a;
  --chip-changed-bg: #fff1d6; --chip-changed-fg: #8a5a00; --banner-bg: #fff4cc; --banner-fg: #5c4400;
  --font-body: system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --sidebar-width: 17rem; --topbar-height: 3.25rem; --content-width: 60rem; --radius: 6px;
  /* Everything below has a neutral default and exists so a site theme can restyle without forking this file. */
  --radius-sm: 4px; --radius-pill: 999px; --gutter: 1rem; --layout-max: 100vw;
  --font-heading: var(--font-body); --font-size: 16px; --line-height: 1.55; --mono-size: 0.9em;
  --heading-color: var(--fg); --heading-weight: 700; --heading-tracking: normal; --heading-leading: 1.25;
  --h1-size: 2em; --h2-size: 1.5em; --h3-size: 1.17em; --summary-size: 1.1rem;
  --link: var(--accent); --link-hover: var(--link); --link-decoration: underline; --link-thickness: auto; --link-offset: auto;
  --focus: var(--accent); --focus-width: 2px; --marker: currentColor; --list-indent: 1.4em;
  --code-fg: inherit; --code-border: transparent; --pre-bg: var(--code-bg); --pre-fg: var(--fg); --pre-border: transparent;
  --table-head-bg: var(--bg-raised); --table-head-fg: var(--fg); --table-border: var(--border); --table-stripe: transparent; --table-target-bg: var(--chip-changed-bg);
  --quote-border: var(--border); --quote-fg: var(--fg-muted);
  --topbar-bg: var(--bg-raised); --topbar-border: var(--border); --topbar-fg: var(--fg); --brand-fg: var(--fg);
  --sidebar-bg: transparent; --sidebar-border: var(--border);
  --nav-fg: var(--fg-muted); --nav-hover-bg: var(--bg-raised); --nav-hover-fg: var(--fg);
  --nav-current-bg: var(--bg-raised); --nav-current-fg: var(--fg); --nav-current-weight: 600; --area-current-fg: var(--accent);
  --input-bg: var(--bg); --input-fg: var(--fg); --input-border: var(--border); --input-radius: var(--radius); --input-placeholder: var(--fg-muted);
  --button-bg: var(--bg-raised); --button-fg: var(--fg); --button-border: var(--border); --button-hover-border: var(--fg-muted); --button-radius: var(--radius);
  --picker-bg: var(--input-bg); --picker-fg: var(--input-fg); --picker-border: var(--input-border); --picker-radius: var(--input-radius);
  --results-bg: var(--bg); --results-border: var(--border); --results-hover-bg: var(--bg-raised); --results-shadow: 0 6px 24px rgba(0, 0, 0, 0.18); --results-radius: var(--radius);
  --chip-radius: var(--radius-pill); --banner-border: transparent; --banner-radius: var(--radius);
  --not-in-version-bg: var(--bg-raised); --not-in-version-border: var(--border);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #14171b; --bg-raised: #1c2026; --fg: #e6e9ed; --fg-muted: #98a2ae; --border: #2c333b; --accent: #7aa2ff; --accent-fg: #0b0e12;
    --code-bg: #20252c; --chip-since-bg: #17301f; --chip-since-fg: #7bd89b; --chip-changed-bg: #3a2c0c; --chip-changed-fg: #f0c060;
    --banner-bg: #3a2f0c; --banner-fg: #f0d68a;
  }
}
:root[data-theme="dark"] {
  --bg: #14171b; --bg-raised: #1c2026; --fg: #e6e9ed; --fg-muted: #98a2ae; --border: #2c333b; --accent: #7aa2ff; --accent-fg: #0b0e12;
  --code-bg: #20252c; --chip-since-bg: #17301f; --chip-since-fg: #7bd89b; --chip-changed-bg: #3a2c0c; --chip-changed-fg: #f0c060;
  --banner-bg: #3a2f0c; --banner-fg: #f0d68a;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: var(--font-size)/var(--line-height) var(--font-body); overflow-wrap: break-word; }
.topbar, .layout { --_pad: max(var(--gutter), calc((100% - var(--layout-max)) / 2)); }
.layout a { color: var(--link); text-decoration: var(--link-decoration); text-decoration-thickness: var(--link-thickness); text-underline-offset: var(--link-offset); }
.layout a:hover { color: var(--link-hover); text-decoration-thickness: 2px; }
.topbar a:focus-visible, .topbar select:focus-visible, .topbar input:focus-visible, .layout :focus-visible, .layout button:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 2px; }
code, pre { font-family: var(--font-mono); font-size: var(--mono-size); }
.layout code { color: var(--code-fg); background: var(--code-bg); border: 1px solid var(--code-border); padding: 0.1em 0.35em; border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.layout pre { background: var(--pre-bg); color: var(--pre-fg); border: 1px solid var(--pre-border); padding: 0.8rem 1rem; border-radius: var(--radius); overflow-x: auto; max-width: 100%; }
.layout pre code { background: none; border: 0; padding: 0; color: inherit; overflow-wrap: normal; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.topbar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 1rem; min-height: var(--topbar-height); padding: 0 var(--_pad); background: var(--topbar-bg); color: var(--topbar-fg); border-bottom: 1px solid var(--topbar-border); }
.topbar .brand { font-weight: 700; text-decoration: none; color: var(--brand-fg); white-space: nowrap; }
.topbar .brand span { color: var(--fg-muted); font-weight: 400; }
.topbar .version-picker select { font: inherit; padding: 0.25rem 0.5rem; background: var(--picker-bg); color: var(--picker-fg); border: 1px solid var(--picker-border); border-radius: var(--picker-radius); max-width: 100%; }
.topbar .search { position: relative; flex: 1; min-width: 0; max-width: 28rem; margin-left: auto; }
.topbar .search input { width: 100%; min-width: 0; font: inherit; padding: 0.4rem 0.75rem; background: var(--input-bg); color: var(--input-fg); border: 1px solid var(--input-border); border-radius: var(--input-radius); }
.topbar .search input::placeholder { color: var(--input-placeholder); opacity: 1; }
.search-results { position: absolute; top: calc(100% + 4px); left: 0; right: 0; max-height: 70vh; overflow-y: auto; background: var(--results-bg); border: 1px solid var(--results-border); border-radius: var(--results-radius); box-shadow: var(--results-shadow); }
.search-results a { display: block; padding: 0.5rem 0.75rem; text-decoration: none; color: var(--fg); border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.search-results a:last-child { border-bottom: 0; }
.search-results a:hover, .search-results a:focus-visible { background: var(--results-hover-bg); }
.search-results .kind { margin-left: 0.5rem; color: var(--fg-muted); font-size: 0.8em; }
.search-results .snippet { display: block; color: var(--fg-muted); font-size: 0.85em; }

.layout { display: flex; align-items: flex-start; max-width: var(--layout-max); margin-inline: auto; }
.sidebar { position: sticky; top: var(--topbar-height); flex: 0 0 var(--sidebar-width); height: calc(100vh - var(--topbar-height)); overflow-y: auto; padding: 1rem; background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); font-size: 0.92rem; }
.sidebar-toggle > summary { display: none; }
.area-list, .tree ul { list-style: none; margin: 0; padding: 0; }
.area { display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.15rem 0; }
.layout .area a { text-decoration: none; color: var(--fg); }
.layout .area a:hover { color: var(--accent); }
.layout .area.current a { font-weight: 700; color: var(--area-current-fg); }
.area .count { color: var(--fg-muted); font-size: 0.8em; }
.area.extra { color: var(--fg-muted); }
.tree { margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid var(--border); }
.layout .tree li a { display: block; padding: 0.15rem 0.5rem; text-decoration: none; color: var(--nav-fg); border-radius: var(--radius-sm); overflow-wrap: anywhere; }
.layout .tree li a:hover { background: var(--nav-hover-bg); color: var(--nav-hover-fg); }
.layout .tree li.current a { background: var(--nav-current-bg); color: var(--nav-current-fg); font-weight: var(--nav-current-weight); }

.content { flex: 1; min-width: 0; padding: 1.25rem var(--gutter) 4rem; }
.page { max-width: var(--content-width); min-width: 0; }
.banner { max-width: var(--content-width); margin-bottom: 1rem; padding: 0.6rem 0.9rem; background: var(--banner-bg); color: var(--banner-fg); border: 1px solid var(--banner-border); border-radius: var(--banner-radius); }
.layout .banner a { color: inherit; }
.crumbs { color: var(--fg-muted); font-size: 0.85rem; overflow-wrap: anywhere; }
.layout .crumbs a { color: var(--fg-muted); }
.page h1, .page h2, .page h3, .page h4 { font-family: var(--font-heading); color: var(--heading-color); font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking); line-height: var(--heading-leading); overflow-wrap: anywhere; }
.page h1 { font-size: var(--h1-size); margin: 0.3rem 0 0.5rem; }
.page h3 { font-size: var(--h3-size); }
.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
.chip { padding: 0.1rem 0.6rem; border-radius: var(--chip-radius); font-size: 0.78rem; font-weight: 600; }
.chip-since { background: var(--chip-since-bg); color: var(--chip-since-fg); }
.chip-changed { background: var(--chip-changed-bg); color: var(--chip-changed-fg); }
.summary { font-size: var(--summary-size); color: var(--fg-muted); margin: 0.2rem 0 0.8rem; }
.page-actions { margin-bottom: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.copy-ai { font: inherit; font-size: 0.85rem; padding: 0.3rem 0.8rem; cursor: pointer; background: var(--button-bg); color: var(--button-fg); border: 1px solid var(--button-border); border-radius: var(--button-radius); }
.copy-ai:hover { border-color: var(--button-hover-border); }
.body h2 { font-size: var(--h2-size); margin-top: 2rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--border); }
.body ul, .body ol { padding-left: var(--list-indent); }
.body li { margin: 0.2em 0; }
.body li::marker { color: var(--marker); }
.table-wrap { overflow-x: auto; max-width: 100%; }
table { border-collapse: collapse; width: 100%; font-size: 0.92rem; }
th, td { text-align: left; vertical-align: top; padding: 0.4rem 0.7rem; border: 1px solid var(--table-border); }
th { background: var(--table-head-bg); color: var(--table-head-fg); }
tbody tr:nth-child(even) td { background: var(--table-stripe); }
tr:target td { background: var(--table-target-bg); }
blockquote { margin: 1rem 0; padding: 0.1rem 1rem; border-left: 3px solid var(--quote-border); color: var(--quote-fg); }
img { max-width: 100%; height: auto; }
.body :target { scroll-margin-top: calc(var(--topbar-height) + 1rem); }
.body p, .body li, .body td { overflow-wrap: break-word; }

@media (min-width: 720px) { :root { --gutter: 1.5rem; } }
@media (max-width: 800px) {
  .layout { display: block; }
  .sidebar { position: static; height: auto; padding: 0.5rem var(--gutter); border-right: 0; border-bottom: 1px solid var(--sidebar-border); }
  /* The whole contents list folds into one "Browse docs" row (site.js closes it here; without script it stays open, and
     without script it holds a single link). */
  .sidebar-toggle > summary { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; min-height: 2.75rem; cursor: pointer; font-weight: 600; list-style: none; color: var(--fg); }
  .sidebar-toggle > summary::-webkit-details-marker { display: none; }
  .sidebar-toggle > summary::after { content: ""; flex: none; width: 0.55em; height: 0.55em; border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg); margin-right: 0.3em; }
  .sidebar-toggle[open] > summary::after { transform: rotate(-135deg); }
  .sidebar-toggle > summary:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 2px; }
  .sidebar-toggle[open] > summary { border-bottom: 1px solid var(--border); margin-bottom: 0.5rem; }
  th, td { padding: 0.35rem 0.5rem; }
  .topbar { flex-wrap: wrap; padding-block: 0.5rem; }
  .topbar .search { max-width: none; flex-basis: 100%; margin-left: 0; }
}
