/* Themed sites: shared skeleton. Loaded first; the layout file (docs.css, editorial.css, ...) follows in the same
   theme.css and carries each site's real look. Colours, fonts, radius and density arrive as CSS variables from the
   site's "theme" block (see themeVars in build.mjs). System fonts only, no JavaScript, no external requests.
   This file only resets what style.css does and gives every component a neutral default. */
:root { --maxw: 1080px; --d: var(--dens, 1); }
body { background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 17px; line-height: 1.65; }
h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.2; }
a { color: var(--accent-ink); }
.wrap { max-width: var(--maxw); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { color: var(--ink); }
:focus-visible { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
.site-header :focus-visible { outline-color: var(--head-ink); }
.site-footer :focus-visible { outline-color: var(--foot-ink); }

/* header and wordmark */
.site-header { border: 0; border-bottom: 1px solid var(--line); background: var(--head-bg); color: var(--head-ink); }
.header-row { padding-top: 14px; padding-bottom: 14px; }
.brand { color: var(--head-ink); display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-text { font-family: var(--font-head); font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; line-height: 1.1; }
.logo-mark { height: 32px; width: 32px; flex: none; display: block; }
.site-header nav a { color: var(--head-ink); border-radius: var(--radius); }
.site-header nav a:hover { background: transparent; }
.site-header nav a[aria-current="page"] { background: transparent; color: var(--head-ink); }

/* hero (home) */
.t-hero { padding: calc(52px * var(--d)) 0 calc(40px * var(--d)); }
.t-hero .hero-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.t-hero h1 { font-size: clamp(1.9rem, 4.4vw, 2.8rem); margin: 0 0 14px; letter-spacing: -.015em; }
.t-hero .lede { color: var(--muted); font-size: 1.12rem; margin: 0; max-width: 38em; }
.eyebrow { margin: 0 0 10px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-ink); }
.hero-panel { border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 20px 22px; }
.hero-panel h2 { margin: 0 0 8px; font-size: 1rem; }
.hero-panel ul { margin: 0; padding-left: 1.1em; }
.hero-panel li { margin: .35em 0; }
.t-note { margin-bottom: 8px; }
.t-note .disclosure-note, .article .disclosure-note { margin: 18px 0; border-radius: var(--radius); }
.t-intro, .t-topics, .t-feature { padding-top: calc(24px * var(--d)); padding-bottom: calc(24px * var(--d)); }
.t-intro h2 { margin-top: 0; }
.t-topics > h2 { margin: 0 0 calc(18px * var(--d)); font-size: 1.5rem; }
.t-soon { color: var(--muted); font-size: .92rem; margin-top: 18px; }

/* entries (home lists) */
.entries { display: grid; gap: calc(20px * var(--d)); }
.entry { display: grid; gap: 10px; }
.entry-cover { display: block; overflow: hidden; background: var(--surface); }
.entry-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.entry-ph { display: flex; flex-direction: column; justify-content: flex-end; padding: 14px 16px; text-decoration: none; color: var(--ink); }
.entry-body { min-width: 0; }
.entry-kicker { margin: 0 0 6px; display: flex; gap: 10px; align-items: baseline; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.entry-no { font-variant-numeric: tabular-nums; }
.entry h3, .entry h4 { margin: 0 0 6px; font-size: 1.2rem; }
.entry h3 a, .entry h4 a, .feature h2 a { color: var(--ink); text-decoration: none; }
.entry h3 a:hover, .entry h4 a:hover, .feature h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.entry-ex { margin: 0 0 8px; color: var(--muted); font-size: .97rem; }
.entry-meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: .82rem; color: var(--muted); }
.group-head h3 { margin: 0 0 4px; font-size: 1.2rem; }
.group-blurb { margin: 0 0 14px; color: var(--muted); font-size: .95rem; }
.group { margin: 0 0 calc(34px * var(--d)); }
.feature { display: grid; gap: 18px; }
.feature-cover { display: block; overflow: hidden; }
.feature-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.feature h2 { margin: 0 0 10px; }

/* simple pages and articles */
.page, .article { max-width: 800px; padding-top: calc(36px * var(--d)); padding-bottom: calc(56px * var(--d)); }
.page h1, .article h1 { font-size: clamp(1.9rem, 4.2vw, 2.7rem); margin: 0 0 14px; letter-spacing: -.015em; }
.page .prose h2, .article .prose h2 { font-size: 1.45rem; margin: 2em 0 .5em; }
.prose { max-width: 44rem; }
.article .art-head .eyebrow { margin-bottom: 8px; }
.meta { color: var(--muted); }
.art-cover { margin: 0 0 28px; }
.art-cover img { display: block; width: 100%; height: auto; object-fit: cover; }
.facts { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .88rem; }
.facts dt { font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.facts dd { margin: 0; color: var(--ink); font-weight: 600; }
.toc ol { margin: 0; padding-left: 1.1em; }
.toc li { margin: .3em 0; font-size: .92rem; }
.toc-title { margin: 0 0 6px; font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.table-wrap { border-radius: var(--radius); }
table { font-size: .95rem; }
thead th { background: var(--surface); color: var(--ink); }
tbody th { background: transparent; }
th, td { border-bottom-color: var(--line); }
.table-wrap { border-color: var(--line); }
code { background: var(--surface); }
blockquote { border-left-color: var(--accent); color: var(--muted); }
.faq { border-top-color: var(--line); }
.sources { border-top-color: var(--line); }
.cta-box { background: var(--surface); border: 2px solid var(--accent); border-radius: var(--radius); }
.cta-box a { color: var(--ink); text-decoration-color: var(--accent); }
.crumbs, .crumbs a, .crumbs li + li::before { color: var(--muted); }
.crumbs [aria-current="page"] { color: var(--ink); }
.draft-banner { border-radius: var(--radius); }
.shot img { border-color: var(--line); }
.shot figcaption { color: var(--muted); }
.demo-band { padding-top: calc(24px * var(--d)); padding-bottom: calc(24px * var(--d)); }
.demo-band .demo-intro { color: var(--muted); }
.demo-band .demo-link a { font-weight: 700; }

/* footer */
.site-footer { margin-top: calc(48px * var(--d)); background: var(--foot-bg); color: var(--foot-ink); border: 0; padding: 36px 0 26px; }
.site-footer .brand { color: var(--foot-ink); }
.site-footer a { color: var(--foot-ink); }
.site-footer nav a { color: var(--foot-ink); font-weight: 600; }
.footer-tag { color: var(--foot-ink); opacity: .86; }
.footer-disclosure { border-top: 1px solid color-mix(in srgb, var(--foot-ink) 28%, transparent); }
.footer-disclosure p { color: var(--foot-ink); opacity: .9; }
.footer-note { margin-top: 6px !important; font-size: .82rem !important; opacity: .78 !important; }

/* docs sidebar markup exists only on the docs layout; hidden everywhere else just in case */
.docs-toggle, .docs-toggle-label { display: none; }

@media (max-width: 860px) {
  .t-hero .hero-grid { grid-template-columns: 1fr; gap: 22px; }
  .page, .article { padding-top: 26px; padding-bottom: 40px; }
}
@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .header-row { gap: 6px 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

/* DOCS layout (3plwmssystem.com): a technical handbook. Left sidebar of topics on every page, right "On this page"
   list on long articles, compact tables, mono accents for terms and field names, teal on slate. */
.theme-docs { --maxw: 1480px; font-size: 16.5px; line-height: 1.68; }
.theme-docs h1, .theme-docs h2, .theme-docs h3 { letter-spacing: -.012em; }

/* header: slim bar, teal top rule, wordmark with a square marker */
.theme-docs .site-header { border-top: 3px solid var(--accent); border-bottom: 1px solid var(--line); }
.theme-docs .site-header .wrap { max-width: 1480px; padding: 0 24px; }
.theme-docs .header-row { padding-top: 10px; padding-bottom: 10px; }
.theme-docs .logo-text { font-size: 1.12rem; font-weight: 700; color: var(--accent2); }
.theme-docs .brand:not(:has(.logo-mark)) .logo-text::before { content: ""; display: inline-block; width: .55em; height: .55em; margin-right: .5em; background: var(--accent); border-radius: 1px; vertical-align: .02em; }
.theme-docs .site-header nav { gap: 2px 4px; }
.theme-docs .site-header nav a { padding: 5px 11px; font-size: .9rem; font-weight: 600; color: var(--accent2); border-radius: 4px; }
.theme-docs .site-header nav a:hover { background: var(--x-slateSoft); }
.theme-docs .site-header nav a[aria-current="page"] { background: var(--x-tealSoft); color: #0b4f4a; }

/* shell: sidebar + main */
.docs-shell { display: grid; grid-template-columns: 276px minmax(0, 1fr); max-width: 1480px; margin: 0 auto; align-items: start; }
.docs-side { position: sticky; top: 0; height: 100vh; overflow-y: auto; padding: 26px 18px 32px 24px; border-right: 1px solid var(--line); background: var(--surface); }
.docs-tree { display: block; font-size: .9rem; line-height: 1.4; }
.docs-home { display: block; padding: 6px 10px; margin: 0 0 14px -10px; border-radius: 4px; color: var(--accent2); font-weight: 700; text-decoration: none; }
.docs-group { margin: 18px 0 6px; font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-ink); }
.docs-tree ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.docs-tree li { margin: 0; }
.docs-tree ul a, .docs-home { color: var(--accent2); text-decoration: none; }
.docs-tree ul a { display: block; padding: 5px 10px 5px 12px; margin-left: -1px; border-left: 2px solid transparent; }
.docs-tree a:hover { background: var(--x-slateSoft); }
.docs-tree a[aria-current="page"] { border-left-color: var(--accent); background: var(--x-tealSoft); color: #0b4f4a; font-weight: 700; }
.docs-shell > main { min-width: 0; }
.docs-shell > main .wrap { max-width: none; margin: 0; padding: 0 44px; }

/* home */
.theme-docs .t-hero { padding: 40px 0 28px; border-bottom: 1px solid var(--line); }
.theme-docs .t-hero .hero-grid { grid-template-columns: minmax(0, 1.5fr) minmax(250px, 1fr); gap: 48px; align-items: end; }
.theme-docs .t-hero h1 { font-size: clamp(1.9rem, 3.4vw, 2.5rem); font-weight: 700; color: var(--accent2); line-height: 1.12; }
.theme-docs .t-hero .lede { font-size: 1.05rem; }
.theme-docs .eyebrow { display: inline-block; font-family: var(--font-mono); text-transform: none; letter-spacing: 0; font-size: .78rem; font-weight: 600; padding: 2px 9px; background: var(--x-tealSoft); color: #0b4f4a; border-radius: 4px; }
.theme-docs .hero-panel { background: transparent; border: 0; border-left: 3px solid var(--accent); border-radius: 0; padding: 2px 0 2px 18px; }
.theme-docs .hero-panel h2 { font-family: var(--font-mono); font-size: .74rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.theme-docs .hero-panel ul { list-style: none; padding: 0; font-size: .92rem; }
.theme-docs .hero-panel li { padding-left: 16px; position: relative; margin: .5em 0; }
.theme-docs .hero-panel li::before { content: ""; position: absolute; left: 0; top: .58em; width: 6px; height: 6px; background: var(--accent); border-radius: 1px; }
.theme-docs .t-intro { padding-top: 26px; }
.theme-docs .t-intro .prose { max-width: 46rem; }
.theme-docs .t-intro h2 { font-size: 1.3rem; }
.theme-docs .t-topics > h2 { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.theme-docs .group { margin-bottom: 30px; }
.theme-docs .group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 4px; }
.theme-docs .group-head h3 { font-size: 1.2rem; color: var(--accent2); margin: 0; }
.theme-docs .group-head h3::before { content: "/ "; font-family: var(--font-mono); color: var(--accent); }
.theme-docs .group-blurb { margin: 0; font-size: .9rem; }
.theme-docs .entries { gap: 0; max-width: 56rem; }
.theme-docs .entry { grid-template-columns: 1fr; padding: 14px 0; border-top: 1px solid var(--line); gap: 0 16px; }
.theme-docs .entry.has-cover { grid-template-columns: 112px minmax(0, 1fr); align-items: start; }
.theme-docs .entry-cover { width: 112px; height: 70px; border: 1px solid var(--line); border-radius: 4px; }
.theme-docs .entry-kicker { font-family: var(--font-mono); font-size: .72rem; font-weight: 500; text-transform: none; letter-spacing: 0; margin-bottom: 2px; }
.theme-docs .entry-no { display: none; }
.theme-docs .entry h4 { font-size: 1.05rem; margin-bottom: 3px; }
.theme-docs .entry h4 a { color: var(--accent-ink); }
.theme-docs .entry-ex { font-size: .9rem; margin-bottom: 4px; }
.theme-docs .entry-meta { font-family: var(--font-mono); font-size: .72rem; }

/* articles: header, optional banner cover, prose, right list */
.theme-docs .article, .theme-docs .page { max-width: none; padding-top: 28px; padding-bottom: 56px; }
.theme-docs .page > h1, .theme-docs .page > .prose, .theme-docs .page > .crumbs { max-width: 46rem; }
.theme-docs .crumbs { font-family: var(--font-mono); font-size: .74rem; margin-bottom: 18px; }
.theme-docs .art-head { max-width: 50rem; }
.theme-docs .article h1, .theme-docs .page h1 { font-size: clamp(1.7rem, 3vw, 2.25rem); font-weight: 700; color: var(--accent2); line-height: 1.14; }
.theme-docs .meta { font-family: var(--font-mono); font-size: .78rem; margin-bottom: 14px; }
.theme-docs .art-cover { margin: 6px 0 26px; max-width: 50rem; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.theme-docs .art-cover img { height: 200px; }
.theme-docs .art-grid { display: grid; grid-template-columns: minmax(0, 46rem) 220px; gap: 0 56px; align-items: start; }
.theme-docs .art-main { min-width: 0; }
.theme-docs .toc { position: sticky; top: 24px; order: 2; border-left: 1px solid var(--line); padding-left: 16px; font-size: .86rem; }
.theme-docs .toc-title { font-family: var(--font-mono); font-size: .7rem; }
.theme-docs .toc ol { list-style: none; padding: 0; }
.theme-docs .toc li { margin: 0; }
.theme-docs .toc a { display: block; padding: 3px 0; color: var(--muted); text-decoration: none; line-height: 1.35; }
.theme-docs .toc a:hover { color: var(--accent-ink); text-decoration: underline; }
.theme-docs .prose { font-size: 1.02rem; max-width: none; }
.theme-docs .prose h2 { font-size: 1.34rem; margin: 2.2em 0 .55em; padding-top: 1em; border-top: 1px solid var(--line); color: var(--accent2); }
.theme-docs .prose > h2:first-child { border-top: 0; padding-top: 0; margin-top: 1em; }
.theme-docs .prose h2::before { content: "#"; margin-right: .4em; font-family: var(--font-mono); font-weight: 500; color: var(--accent); }
.theme-docs .prose h3 { font-size: 1.1rem; margin: 1.6em 0 .4em; color: var(--accent2); }
.theme-docs .prose code { font-family: var(--font-mono); font-size: .86em; background: var(--x-tealSoft); color: #0b4f4a; padding: 1px 6px; border-radius: 3px; }
.theme-docs .prose li::marker { color: var(--accent); }
.theme-docs .prose strong { color: var(--accent2); }
.theme-docs blockquote { border-left: 3px solid var(--accent); background: var(--surface); padding: .6em 1em; margin: 1.2em 0; color: var(--ink); }
.theme-docs .table-wrap { border-radius: 4px; margin: 1.1em 0; }
.theme-docs table { font-size: .86rem; min-width: 480px; line-height: 1.45; }
.theme-docs th, .theme-docs td { padding: 6px 10px; border-right: 1px solid var(--line); }
.theme-docs th:last-child, .theme-docs td:last-child { border-right: 0; }
.theme-docs thead th { background: var(--x-slateSoft); color: var(--accent2); font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.theme-docs tbody th { font-family: var(--font-mono); font-size: .8rem; font-weight: 500; color: #0b4f4a; background: var(--surface); }
.theme-docs .faq { margin-top: 2.4em; }
.theme-docs .faq h3 { font-size: 1rem; margin: 1.3em 0 .2em; }
.theme-docs .faq h3::before { content: "Q"; display: inline-block; margin-right: .6em; padding: 0 .4em; font-family: var(--font-mono); font-size: .8em; background: var(--x-tealSoft); color: #0b4f4a; border-radius: 3px; }
.theme-docs .cta-box { border: 0; border-left: 4px solid var(--accent); border-radius: 0 6px 6px 0; background: var(--x-tealSoft); padding: 16px 20px; margin-top: 2.4em; }
.theme-docs .cta-box a { font-size: .98rem; }
.theme-docs .sources { font-size: .9rem; }
.theme-docs .sources h2 { font-family: var(--font-mono); font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.theme-docs .disclosure-note { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0 4px 4px 0; font-weight: 500; }
.theme-docs .shot img { border-radius: 4px; }
.theme-docs .demo-band { padding-top: 26px; }
.theme-docs .demo-band h2 { font-size: 1.3rem; color: var(--accent2); }

/* footer */
.theme-docs .site-footer { margin-top: 0; padding: 28px 0 22px; }
.theme-docs .site-footer .wrap { max-width: 1480px; padding: 0 24px; }
.theme-docs .logo-text { letter-spacing: -.01em; }
.theme-docs .site-footer .logo-text { color: #fff; }

@media (max-width: 1240px) {
  .theme-docs .art-grid { grid-template-columns: minmax(0, 1fr); }
  .theme-docs .toc { position: static; order: -1; margin: 0 0 24px; padding: 12px 16px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0 4px 4px 0; background: var(--surface); max-width: 46rem; }
  .theme-docs .toc ol { columns: 2; column-gap: 28px; }
}
@media (max-width: 920px) {
  .docs-shell { display: block; }
  .docs-side { position: static; height: auto; overflow: visible; border-right: 0; border-bottom: 1px solid var(--line); padding: 10px 16px; }
  .docs-toggle { display: block; position: absolute; opacity: 0; width: 1px; height: 1px; }
  .docs-toggle-label { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); font-weight: 700; color: var(--accent2); cursor: pointer; font-size: .92rem; }
  .docs-toggle-label::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--accent2); border-bottom: 2px solid var(--accent2); transform: rotate(45deg); margin-top: -3px; }
  .docs-toggle:checked + .docs-toggle-label::after { transform: rotate(-135deg); margin-top: 3px; }
  .docs-toggle:focus-visible + .docs-toggle-label { outline: 3px solid var(--accent-ink); outline-offset: 2px; }
  .docs-tree { display: none; padding-top: 10px; }
  .docs-toggle:checked ~ .docs-tree { display: block; }
  .docs-shell > main .wrap { padding: 0 20px; }
  .theme-docs .t-hero .hero-grid { grid-template-columns: 1fr; gap: 22px; }
  .theme-docs .toc ol { columns: 1; }
}
@media (max-width: 520px) {
  .theme-docs .entry.has-cover { grid-template-columns: 84px minmax(0, 1fr); gap: 0 12px; }
  .theme-docs .entry-cover { width: 84px; height: 56px; }
  .theme-docs .art-cover img { height: 150px; }
}