/* 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; } }

/* DASHBOARD layout (3plfulfillmentsoftware.com): an operations console. Dark header and hero, light work area, a tile grid
   with mixed spans and small mono labels (facts about each page only), cyan on charcoal, sans type with mono labels. */
.theme-dashboard { --maxw: 1180px; font-size: 16.5px; line-height: 1.62; --mono-label: .68rem; }
.theme-dashboard h1, .theme-dashboard h2, .theme-dashboard h3, .theme-dashboard h4 { font-weight: 700; letter-spacing: -.015em; }

/* header: charcoal bar, mono nav */
.theme-dashboard .site-header { background: var(--head-bg); border-bottom: 3px solid var(--accent); }
.theme-dashboard .header-row { padding-top: 10px; padding-bottom: 10px; }
.theme-dashboard .brand { color: #fff; }
.theme-dashboard .logo-text { font-size: 1.1rem; font-weight: 700; color: #fff; letter-spacing: -.01em; }
.theme-dashboard .brand:not(:has(.logo-mark)) .logo-text::before { content: ""; display: inline-block; width: 11px; height: 11px; margin-right: 10px; background: var(--x-cyanLight); box-shadow: 0 0 0 3px rgba(76, 201, 228, .28); border-radius: 50%; vertical-align: .05em; }
.theme-dashboard .site-header nav { gap: 2px; }
.theme-dashboard .site-header nav a { padding: 7px 12px; color: #e6edf1; font-family: var(--font-mono); font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border-radius: 4px; }
.theme-dashboard .site-header nav a:hover { background: rgba(255, 255, 255, .1); }
.theme-dashboard .site-header nav a[aria-current="page"] { background: var(--accent); color: var(--on-accent); }

/* hero: dark console strip */
.theme-dashboard .t-hero { background: var(--accent2); color: #e6edf1; padding: calc(44px * var(--d)) 0 calc(54px * var(--d)); border-bottom: 1px solid #000; background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 28px); }
.theme-dashboard .t-hero .hero-grid { grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: 40px; align-items: end; }
.theme-dashboard .eyebrow { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; color: var(--x-cyanLight); }
.theme-dashboard .eyebrow::before { content: ""; display: inline-block; width: 22px; height: 2px; background: var(--x-cyanLight); margin-right: 10px; vertical-align: middle; }
.theme-dashboard .t-hero h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.1; }
.theme-dashboard .t-hero .lede { color: #c9d5dc; font-size: 1.05rem; }
.theme-dashboard .hero-panel { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .18); border-radius: 6px; padding: 14px 16px 10px; }
.theme-dashboard .hero-panel h2 { font-family: var(--font-mono); font-size: var(--mono-label); letter-spacing: .12em; text-transform: uppercase; color: var(--x-cyanLight); font-weight: 600; margin-bottom: 6px; }
.theme-dashboard .hero-panel ul { list-style: none; padding: 0; font-size: .92rem; }
.theme-dashboard .hero-panel li { display: flex; gap: 10px; align-items: baseline; margin: 0; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .12); color: #e6edf1; }
.theme-dashboard .hero-panel li:first-child { border-top: 0; }
.theme-dashboard .hero-panel li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: .45em; border-radius: 50%; background: var(--x-cyanLight); }
.theme-dashboard .t-note { padding-top: 18px; }
.theme-dashboard .disclosure-note { margin: 0; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 4px; font-weight: 600; font-size: .92rem; }
.theme-dashboard .t-intro { padding-top: 30px; }
.theme-dashboard .t-intro .prose { max-width: 48rem; }
.theme-dashboard .t-intro h2 { font-size: 1.35rem; }
.theme-dashboard .t-topics { padding-top: 20px; }
.theme-dashboard .t-topics > h2 { display: flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.theme-dashboard .t-topics > h2::after { content: ""; flex: 1; border-top: 1px solid var(--line); }

/* tiles: mixed spans on a 6 column grid */
.theme-dashboard .entries { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.theme-dashboard .entry { grid-column: span 3; background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 6px; gap: 0; position: relative; align-content: start; transition: box-shadow .15s ease, transform .15s ease; }
.theme-dashboard .entry:nth-child(4n+1) { grid-column: span 4; }
.theme-dashboard .entry:nth-child(4n+2) { grid-column: span 2; }
.theme-dashboard .entry:hover { box-shadow: 0 10px 22px -14px rgba(31, 41, 51, .55); transform: translateY(-2px); }
.theme-dashboard .entry:nth-child(4n+1).has-cover { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
.theme-dashboard .entry:nth-child(4n+1).has-cover .entry-cover { order: 2; min-height: 100%; }
.theme-dashboard .entry-cover { aspect-ratio: 16 / 9; border-bottom: 1px solid var(--line); }
.theme-dashboard .entry:nth-child(4n+1).has-cover .entry-cover { aspect-ratio: auto; border-bottom: 0; border-left: 1px solid var(--line); }
.theme-dashboard .entry-ph { aspect-ratio: auto; height: 88px; background: var(--accent2); color: var(--x-cyanLight); align-items: stretch; justify-content: space-between; flex-direction: row; padding: 14px 16px; position: relative; }
.theme-dashboard .entry-ph::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 12px; height: 8px; background: repeating-linear-gradient(90deg, rgba(76, 201, 228, .55) 0 5px, transparent 5px 11px); }
.theme-dashboard .ph-no { font-family: var(--font-mono); font-size: 2.6rem; line-height: 1; font-weight: 500; color: var(--x-cyanLight); }
.theme-dashboard .ph-cat { font-family: var(--font-mono); font-size: var(--mono-label); letter-spacing: .1em; text-transform: uppercase; color: #dbe6ec; text-align: right; }
.theme-dashboard .entry-body { padding: 14px 18px 16px; display: flex; flex-direction: column; }
.theme-dashboard .entry-kicker { font-family: var(--font-mono); font-size: var(--mono-label); letter-spacing: .1em; color: var(--muted); font-weight: 600; }
.theme-dashboard .entry-no::before { content: "#"; }
.theme-dashboard .entry-no { padding: 1px 6px; background: var(--accent2); color: #fff; border-radius: 3px; }
.theme-dashboard .entry-cat { color: var(--accent-ink); }
.theme-dashboard .entry h3, .theme-dashboard .entry h4 { font-size: 1.15rem; line-height: 1.22; margin: 4px 0 6px; }
.theme-dashboard .entry:nth-child(4n+1) h3 { font-size: 1.45rem; }
.theme-dashboard .entry h3 a::after { content: ""; position: absolute; inset: 0; }
.theme-dashboard .entry-ex { font-size: .9rem; }
.theme-dashboard .entry-meta { margin-top: auto; padding-top: 10px; gap: 6px; }
.theme-dashboard .entry-meta span { padding: 2px 8px; background: var(--bg); border: 1px solid var(--line); border-radius: 3px; font-family: var(--font-mono); font-size: var(--mono-label); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }

/* articles: dark title panel with fact tiles, then a white sheet */
.theme-dashboard .article, .theme-dashboard .page { max-width: 1020px; }
.theme-dashboard .crumbs { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .02em; }
.theme-dashboard .art-head { background: var(--accent2); color: #e6edf1; border-radius: 6px; padding: 26px 30px 26px; margin-bottom: 14px; border-top: 3px solid var(--accent); }
.theme-dashboard .art-head .eyebrow { margin-bottom: 8px; }
.theme-dashboard .article h1 { color: #fff; font-size: clamp(1.7rem, 3.6vw, 2.5rem); line-height: 1.12; margin-bottom: 18px; }
.theme-dashboard .page h1 { font-size: clamp(1.8rem, 3.4vw, 2.4rem); }
.theme-dashboard .facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; font-size: .95rem; }
.theme-dashboard .facts > div { padding: 9px 12px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); border-radius: 4px; }
.theme-dashboard .facts dt { font-family: var(--font-mono); font-size: var(--mono-label); letter-spacing: .1em; color: var(--x-cyanLight); }
.theme-dashboard .facts dd { color: #fff; font-weight: 600; }
.theme-dashboard .art-head .disclosure-note { margin: 16px 0 0; background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid rgba(255, 255, 255, .2); border-left: 4px solid var(--x-cyanLight); }
.theme-dashboard .art-cover { margin: 0 0 14px; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: #fff; }
.theme-dashboard .art-cover img { aspect-ratio: 21 / 8; }
.theme-dashboard .art-grid { background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 12px clamp(18px, 4vw, 44px) 36px; }
.theme-dashboard .prose { max-width: 46rem; }
.theme-dashboard .prose h2 { font-size: 1.35rem; margin: 2em 0 .5em; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.theme-dashboard .prose h3 { font-size: 1.08rem; margin: 1.5em 0 .35em; }
.theme-dashboard .prose li::marker { color: var(--accent); }
.theme-dashboard .prose code { font-family: var(--font-mono); font-size: .88em; background: #e5f4f8; color: #0b4a5c; padding: 1px 6px; border-radius: 3px; }
.theme-dashboard .table-wrap { border-radius: 4px; }
.theme-dashboard table { font-size: .88rem; line-height: 1.45; }
.theme-dashboard th, .theme-dashboard td { padding: 8px 12px; }
.theme-dashboard thead th { background: var(--accent2); color: #fff; font-family: var(--font-mono); font-size: var(--mono-label); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.theme-dashboard tbody th { font-weight: 700; background: #f4f7f8; }
.theme-dashboard blockquote { background: #f1f6f8; border-left: 4px solid var(--accent); padding: .7em 1em; color: var(--ink); }
.theme-dashboard .cta-box { background: #e9f6fa; border: 1px solid #b6dfe9; border-left: 5px solid var(--accent); border-radius: 4px; padding: 16px 20px; }
.theme-dashboard .cta-box a { font-size: 1rem; }
.theme-dashboard .faq h3 { font-size: 1rem; margin: 1.3em 0 .15em; }
.theme-dashboard .sources h2 { font-family: var(--font-mono); font-size: var(--mono-label); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border: 0; padding: 0; }
.theme-dashboard .shot img { border-radius: 4px; }
.theme-dashboard .demo-band h2 { font-size: 1.35rem; }
.theme-dashboard .site-footer { margin-top: 56px; border-top: 3px solid var(--accent); }
.theme-dashboard .site-footer .logo-text { color: #fff; }

@media (max-width: 900px) {
  .theme-dashboard .entries { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme-dashboard .entry, .theme-dashboard .entry:nth-child(4n+1), .theme-dashboard .entry:nth-child(4n+2) { grid-column: span 1; }
  .theme-dashboard .entry:nth-child(4n+1) { grid-column: 1 / -1; }
  .theme-dashboard .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .theme-dashboard .t-hero .hero-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .theme-dashboard .entries { grid-template-columns: 1fr; }
  .theme-dashboard .entry:nth-child(4n+1).has-cover, .theme-dashboard .entry:nth-child(4n+1).no-cover { grid-template-columns: 1fr; }
  .theme-dashboard .entry:nth-child(4n+1).has-cover .entry-cover { order: 0; aspect-ratio: 16 / 9; border-left: 0; border-bottom: 1px solid var(--line); }
  .theme-dashboard .art-head { padding: 20px 18px; }
  .theme-dashboard .site-header nav a { padding: 6px 8px; letter-spacing: .04em; }
}