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

/* EDITORIAL layout (3plwarehousemanagementsoftware.com): an authoritative hub. Narrow centred masthead, one very large
   featured guide, serif headings over a sans body, navy with amber rules, lots of white space. */
.theme-editorial { --maxw: 1120px; font-size: 18px; line-height: 1.75; }
.theme-editorial h1, .theme-editorial h2, .theme-editorial h3, .theme-editorial h4 { font-weight: 600; letter-spacing: -.012em; }

/* masthead: centred brand, ruled nav row */
.theme-editorial .site-header { background: var(--bg); border-bottom: 0; }
.theme-editorial .site-header .wrap { max-width: 820px; }
.theme-editorial .header-row { flex-direction: column; align-items: center; gap: 0; padding-top: 30px; padding-bottom: 0; }
.theme-editorial .brand { color: var(--accent); }
.theme-editorial .logo-text { font-size: clamp(1.45rem, 3.4vw, 1.95rem); font-weight: 600; letter-spacing: -.02em; color: var(--accent); }
.theme-editorial .logo-mark { height: 36px; width: 36px; }
.theme-editorial .site-header nav { width: 100%; justify-content: center; gap: 4px 6px; margin-top: 16px; padding: 4px 0; border-top: 1px solid var(--line); border-bottom: 3px double var(--line); }
.theme-editorial .site-header nav a { padding: 8px 14px; font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); border-radius: 0; }
.theme-editorial .site-header nav a:hover { color: var(--accent); }
.theme-editorial .site-header nav a[aria-current="page"] { color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent2); }

/* home: narrow centred opening */
.theme-editorial .t-hero { padding: calc(64px * var(--d)) 0 calc(40px * var(--d)); }
.theme-editorial .t-hero .hero-grid { grid-template-columns: 1fr; max-width: 780px; text-align: center; gap: 28px; justify-items: center; }
.theme-editorial .eyebrow { display: inline-flex; align-items: center; gap: 12px; color: var(--x-amberText); font-size: .76rem; letter-spacing: .16em; }
.theme-editorial .t-hero .eyebrow::before, .theme-editorial .t-hero .eyebrow::after { content: ""; width: 30px; height: 2px; background: var(--accent2); }
.theme-editorial .t-hero h1 { font-size: clamp(2.3rem, 5.4vw, 3.5rem); line-height: 1.07; font-weight: 600; color: var(--accent); text-wrap: balance; }
.theme-editorial .t-hero .lede { font-size: 1.22rem; line-height: 1.6; margin: 0 auto; }
.theme-editorial .hero-panel { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 16px 0 0; width: 100%; }
.theme-editorial .hero-panel h2 { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); font-family: var(--font); font-weight: 700; margin-bottom: 8px; }
.theme-editorial .hero-panel ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 0; font-size: .95rem; }
.theme-editorial .hero-panel li { margin: 0; padding: 0 14px; }
.theme-editorial .hero-panel li + li { border-left: 1px solid var(--line); }

/* featured guide: very large */
.theme-editorial .t-feature { padding-top: 8px; padding-bottom: calc(56px * var(--d)); }
.theme-editorial .feature { gap: 0; position: relative; }
.theme-editorial .feature-cover { aspect-ratio: 2 / 1; border-radius: 2px; }
.theme-editorial .feature-body { max-width: 800px; margin: 0 auto; padding: 38px 0 0; text-align: center; }
.theme-editorial .feature .entry-kicker { justify-content: center; color: var(--x-amberText); font-size: .76rem; letter-spacing: .16em; }
.theme-editorial .feature .entry-no { display: none; }
.theme-editorial .feature h2 { font-size: clamp(2rem, 4.8vw, 3.1rem); line-height: 1.1; margin-bottom: 16px; text-wrap: balance; }
.theme-editorial .feature h2 a { color: var(--accent); }
.theme-editorial .feature h2 a::after { content: ""; position: absolute; inset: 0; }
.theme-editorial .feature .entry-ex { font-size: 1.22rem; line-height: 1.6; color: var(--ink); max-width: 38em; margin: 0 auto 14px; }
.theme-editorial .feature .entry-meta { justify-content: center; font-size: .82rem; }
.theme-editorial .feature.no-cover { background: var(--accent); padding: clamp(40px, 8vw, 88px) clamp(22px, 6vw, 80px); border-radius: 2px; border-bottom: 6px solid var(--accent2); }
.theme-editorial .feature.no-cover .feature-body { padding: 0; }
.theme-editorial .feature.no-cover .entry-kicker { color: var(--x-amberLight); }
.theme-editorial .feature.no-cover h2 a { color: #fff; }
.theme-editorial .feature.no-cover .entry-ex { color: #e5ebf2; }
.theme-editorial .feature.no-cover .entry-meta { color: #cbd5e1; }
.theme-editorial .t-intro .prose { margin: 0 auto; max-width: 40rem; }
.theme-editorial .t-intro h2 { font-size: 1.7rem; color: var(--accent); }
.theme-editorial .t-topics { max-width: 820px; padding-top: 24px; }
.theme-editorial .t-topics > h2 { font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; font-family: var(--font); font-weight: 700; color: var(--muted); text-align: center; padding-bottom: 14px; border-bottom: 3px double var(--line); margin-bottom: 0; }
.theme-editorial .entries { gap: 0; }
.theme-editorial .entry { grid-template-columns: 1fr; padding: calc(34px * var(--d)) 0; border-bottom: 1px solid var(--line); gap: 12px 32px; position: relative; }
.theme-editorial .entry.has-cover { grid-template-columns: minmax(0, 1fr) 190px; }
.theme-editorial .entry.has-cover .entry-cover { order: 2; aspect-ratio: 4 / 3; border-radius: 2px; align-self: start; }
.theme-editorial .entry-kicker { color: var(--x-amberText); letter-spacing: .14em; }
.theme-editorial .entry-no { display: none; }
.theme-editorial .entry h3 { font-size: clamp(1.4rem, 3vw, 1.75rem); line-height: 1.18; margin-bottom: 8px; }
.theme-editorial .entry h3 a { color: var(--accent); }
.theme-editorial .entry h3 a::after { content: ""; position: absolute; inset: 0; }
.theme-editorial .entry-ex { font-size: 1.02rem; color: var(--muted); }

/* articles: centred masthead, wide cover, narrow column */
.theme-editorial .article { max-width: 1120px; padding-top: calc(48px * var(--d)); }
.theme-editorial .page { max-width: 700px; padding-top: calc(56px * var(--d)); }
.theme-editorial .crumbs { text-align: center; font-size: .78rem; letter-spacing: .02em; }
.theme-editorial .crumbs ol { justify-content: center; }
.theme-editorial .art-head { max-width: 800px; margin: 0 auto 36px; text-align: center; }
.theme-editorial .art-head .eyebrow { color: var(--x-amberText); }
.theme-editorial .article h1 { font-size: clamp(2.1rem, 5vw, 3.2rem); line-height: 1.1; color: var(--accent); text-wrap: balance; margin-bottom: 18px; }
.theme-editorial .page h1 { font-size: clamp(2rem, 4.5vw, 2.8rem); color: var(--accent); text-align: center; padding-bottom: 20px; margin-bottom: 28px; border-bottom: 3px double var(--line); }
.theme-editorial .meta { font-size: .86rem; letter-spacing: .02em; }
.theme-editorial .art-cover { max-width: 1040px; margin: 0 auto 52px; }
.theme-editorial .art-cover img { aspect-ratio: 2 / 1; border-radius: 2px; }
.theme-editorial .art-grid { display: block; }
.theme-editorial .art-main { max-width: 700px; margin: 0 auto; }
.theme-editorial .prose { max-width: none; }
.theme-editorial .art-main .prose > p:first-child::first-letter { float: left; font-family: var(--font-head); font-size: 4.3em; line-height: .82; padding: .08em .1em 0 0; color: var(--accent); font-weight: 600; }
.theme-editorial .prose h2 { font-size: 1.85rem; line-height: 1.18; margin: 2.2em 0 .5em; color: var(--accent); }
.theme-editorial .prose h2::before { content: ""; display: block; width: 34px; height: 3px; background: var(--accent2); margin-bottom: .6em; }
.theme-editorial .prose h3 { font-size: 1.3rem; margin: 1.7em 0 .4em; color: var(--accent); }
.theme-editorial .prose li::marker { color: var(--accent2); }
.theme-editorial blockquote { margin: 1.8em 0; padding: 0 0 0 1.4em; border-left: 4px solid var(--accent2); font-family: var(--font-head); font-size: 1.35rem; line-height: 1.45; color: var(--accent); }
.theme-editorial .table-wrap { border: 0; border-top: 2px solid var(--accent); border-bottom: 1px solid var(--accent); border-radius: 0; }
.theme-editorial table { font-size: .93rem; }
.theme-editorial thead th { background: transparent; color: var(--accent); font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; border-bottom: 1px solid var(--accent); }
.theme-editorial tbody th { font-family: var(--font-head); font-weight: 600; }
.theme-editorial .cta-box { border: 0; border-top: 4px solid var(--accent2); border-radius: 0; background: var(--surface); padding: 26px 30px; margin-top: 3em; }
.theme-editorial .cta-box a { font-family: var(--font-head); font-size: 1.15rem; line-height: 1.5; font-weight: 600; color: var(--accent); }
.theme-editorial .faq h3 { font-size: 1.15rem; color: var(--accent); margin: 1.6em 0 .2em; }
.theme-editorial .sources h2 { font-family: var(--font); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.theme-editorial .disclosure-note { border: 0; border-top: 1px solid var(--accent2); border-bottom: 1px solid var(--line); background: transparent; border-radius: 0; font-size: .88rem; font-weight: 500; text-align: left; }
.theme-editorial .demo-band { max-width: 900px; }
.theme-editorial .demo-band h2 { font-size: 1.7rem; color: var(--accent); text-align: center; }
.theme-editorial .demo-band .demo-intro { text-align: center; margin-left: auto; margin-right: auto; }

/* footer */
.theme-editorial .site-footer { margin-top: calc(72px * var(--d)); border-top: 6px solid var(--accent2); }
.theme-editorial .site-footer .logo-text { color: #fff; }

@media (max-width: 720px) {
  .theme-editorial { font-size: 17px; }
  .theme-editorial .site-header nav a { padding: 8px 10px; }
  .theme-editorial .entry.has-cover { grid-template-columns: 1fr; }
  .theme-editorial .entry.has-cover .entry-cover { order: -1; aspect-ratio: 16 / 9; }
  .theme-editorial .hero-panel li { padding: 0 10px; }
  .theme-editorial .art-main .prose > p:first-child::first-letter { font-size: 3.6em; }
}