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

/* CHECKLIST layout (bestsoftwarefor3pl.com): a score sheet. Bold sans, black rules, red-orange blocks, tick boxes.
   Home lists sit in sheets with a black header bar; entries have a number block, a tick box and a hard border. */
.theme-checklist { --maxw: 1120px; font-size: 17px; line-height: 1.6; --tick: "\2713\FE0E"; }
.theme-checklist h1, .theme-checklist h2, .theme-checklist h3, .theme-checklist h4 { font-weight: 900; letter-spacing: -.03em; }

/* header: heavy top bar, tick-box wordmark */
.theme-checklist .site-header { border-top: 8px solid var(--ink); border-bottom: 3px solid var(--ink); background: #fff; }
.theme-checklist .header-row { padding-top: 12px; padding-bottom: 12px; }
.theme-checklist .logo-text { font-size: 1.05rem; font-weight: 900; text-transform: uppercase; letter-spacing: .02em; }
.theme-checklist .brand:not(:has(.logo-mark)) .logo-text::before { content: var(--tick); display: inline-grid; place-items: center; width: 27px; height: 27px; margin-right: 10px; background: var(--accent); border: 3px solid var(--ink); color: var(--ink); font-size: 1rem; font-weight: 900; vertical-align: -.3em; letter-spacing: 0; }
.theme-checklist .site-header nav { gap: 4px; }
.theme-checklist .site-header nav a { padding: 7px 12px; font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; border-radius: 0; color: var(--ink); }
.theme-checklist .site-header nav a:hover { box-shadow: inset 0 -4px 0 var(--accent); }
.theme-checklist .site-header nav a[aria-current="page"] { background: var(--accent); color: var(--on-accent); }

/* home */
.theme-checklist .t-hero { padding: calc(54px * var(--d)) 0 calc(40px * var(--d)); }
.theme-checklist .t-hero .hero-grid { grid-template-columns: minmax(0, 1.35fr) minmax(300px, 1fr); gap: 48px; align-items: start; }
.theme-checklist .hero-copy::before { content: ""; display: block; width: 92px; height: 14px; background: var(--accent); margin-bottom: 24px; }
.theme-checklist .eyebrow { display: inline-block; padding: 3px 10px; background: var(--ink); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .1em; }
.theme-checklist .t-hero h1 { font-size: clamp(2.6rem, 7vw, 4.9rem); line-height: .94; letter-spacing: -.045em; margin: 16px 0 20px; text-wrap: balance; }
.theme-checklist .t-hero .lede { font-size: 1.15rem; font-weight: 500; color: var(--ink); max-width: 34em; }
.theme-checklist .hero-panel { padding: 0; background: #fff; border: 4px solid var(--ink); border-radius: 0; box-shadow: 8px 8px 0 var(--accent); }
.theme-checklist .hero-panel h2 { margin: 0; padding: 10px 16px; background: var(--ink); color: #fff; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; }
.theme-checklist .hero-panel ul { list-style: none; padding: 0; margin: 0; }
.theme-checklist .hero-panel li { position: relative; margin: 0; padding: 13px 16px 13px 54px; border-top: 2px solid var(--ink); font-weight: 700; line-height: 1.35; }
.theme-checklist .hero-panel li:first-child { border-top: 0; }
.theme-checklist .hero-panel li::before { content: var(--tick); position: absolute; left: 14px; top: 12px; display: grid; place-items: center; width: 26px; height: 26px; background: var(--accent); border: 3px solid var(--ink); color: var(--ink); font-size: .95rem; font-weight: 900; }
.theme-checklist .t-note { padding-top: 6px; }
.theme-checklist .disclosure-note { margin: 0; padding: 12px 16px 12px 22px; border: 3px solid var(--ink); border-left: 14px solid var(--accent); border-radius: 0; background: #fff; font-weight: 700; }
.theme-checklist .t-intro .prose { max-width: 46rem; font-size: 1.05rem; }
.theme-checklist .t-intro h2 { font-size: 1.7rem; border-left: 10px solid var(--accent); padding-left: 14px; }
.theme-checklist .t-topics > h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); margin-bottom: 20px; }

/* sheets: one per topic, black header bar, entry rows with number block, tick and optional cover */
.theme-checklist .group { border: 4px solid var(--ink); background: #fff; margin-bottom: calc(34px * var(--d)); }
.theme-checklist .group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; padding: 10px 16px; background: var(--ink); }
.theme-checklist .group-head h3 { margin: 0; color: #fff; font-size: 1rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 800; }
.theme-checklist .group-blurb { margin: 0; color: #e2e2e2; font-size: .9rem; font-weight: 500; }
.theme-checklist .entries { gap: 0; }
.theme-checklist .entry { display: grid; grid-template-columns: 70px minmax(0, 1fr); grid-template-areas: "no cat" "no title" "no ex" "no meta"; gap: 0; border-top: 3px solid var(--ink); position: relative; }
.theme-checklist .entry:first-child { border-top: 0; }
.theme-checklist .entry.has-cover { grid-template-columns: 70px minmax(0, 1fr) 190px; grid-template-areas: "no cat cover" "no title cover" "no ex cover" "no meta cover"; }
.theme-checklist .entry-body, .theme-checklist .entry-kicker { display: contents; }
.theme-checklist .entry-no { grid-area: no; display: flex; align-items: flex-start; justify-content: center; padding-top: 18px; background: var(--accent); color: var(--on-accent); border-right: 3px solid var(--ink); font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; }
.theme-checklist .entry-cat { grid-area: cat; padding: 16px 20px 0; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.theme-checklist .entry h4 { grid-area: title; margin: 0; padding: 4px 20px 0 62px; font-size: 1.28rem; line-height: 1.15; position: relative; }
.theme-checklist .entry h4::before { content: var(--tick); position: absolute; left: 20px; top: 7px; display: grid; place-items: center; width: 28px; height: 28px; border: 3px solid var(--ink); color: transparent; font-size: 1rem; font-weight: 900; transition: background-color .12s ease, color .12s ease; }
.theme-checklist .entry:hover h4::before { background: var(--accent); color: var(--ink); }
.theme-checklist .entry h4 a::after { content: ""; position: absolute; inset: -80px -2000px -80px -2000px; }
.theme-checklist .entry { overflow: hidden; }
.theme-checklist .entry-ex { grid-area: ex; margin: 0; padding: 6px 20px 0 62px; font-size: .96rem; color: var(--muted); }
.theme-checklist .entry-meta { grid-area: meta; padding: 8px 20px 18px 62px; font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.theme-checklist .entry-cover { grid-area: cover; border-left: 3px solid var(--ink); min-height: 100%; }
.theme-checklist .entry-cover img { aspect-ratio: auto; }

/* articles */
.theme-checklist .article, .theme-checklist .page { max-width: 860px; }
.theme-checklist .crumbs { font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.theme-checklist .article h1, .theme-checklist .page h1 { font-size: clamp(2.2rem, 5.4vw, 3.7rem); line-height: .98; letter-spacing: -.04em; }
.theme-checklist .art-head .eyebrow { margin-bottom: 14px; }
.theme-checklist .meta { display: inline-block; padding: 4px 0; border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.theme-checklist .art-cover { margin: 26px 12px 48px 0; border: 4px solid var(--ink); box-shadow: 12px 12px 0 var(--accent); }
.theme-checklist .art-cover img { aspect-ratio: 16 / 9; }
.theme-checklist .prose { font-size: 1.06rem; line-height: 1.7; }
.theme-checklist .prose h2 { font-size: clamp(1.55rem, 3.2vw, 2rem); line-height: 1.05; margin: 2.2em 0 .6em; padding: 4px 0 4px 16px; border-left: 12px solid var(--accent); }
.theme-checklist .prose h3 { font-size: 1.25rem; margin: 1.6em 0 .4em; text-transform: uppercase; letter-spacing: .02em; font-size: 1.02rem; }
.theme-checklist .prose ul { list-style: none; padding-left: 0; }
.theme-checklist .prose ul > li { position: relative; padding-left: 38px; margin: .7em 0; }
.theme-checklist .prose ul > li::before { content: var(--tick); position: absolute; left: 0; top: .1em; display: grid; place-items: center; width: 24px; height: 24px; background: var(--accent); border: 3px solid var(--ink); color: var(--ink); font-size: .8rem; font-weight: 900; line-height: 1; }
.theme-checklist .prose ol { list-style: none; padding-left: 0; counter-reset: o; }
.theme-checklist .prose ol > li { counter-increment: o; position: relative; padding-left: 44px; margin: .8em 0; }
.theme-checklist .prose ol > li::before { content: counter(o); position: absolute; left: 0; top: .02em; display: grid; place-items: center; width: 30px; height: 30px; background: var(--ink); color: #fff; font-size: .9rem; font-weight: 800; }
.theme-checklist .prose strong { font-weight: 800; }
.theme-checklist blockquote { margin: 1.6em 0; padding: 14px 20px; background: var(--x-orangeSoft); border-left: 12px solid var(--accent); color: var(--ink); font-weight: 700; }
.theme-checklist .table-wrap { border: 3px solid var(--ink); border-radius: 0; margin: 1.5em 0; }
.theme-checklist table { font-size: .92rem; }
.theme-checklist thead th { background: var(--ink); color: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; border-bottom: 0; }
.theme-checklist tbody th { font-weight: 800; border-left: 8px solid var(--accent); background: #fff; }
.theme-checklist th, .theme-checklist td { border-bottom: 2px solid var(--ink); }
.theme-checklist tbody tr:last-child th, .theme-checklist tbody tr:last-child td { border-bottom: 0; }
.theme-checklist .cta-box { margin-top: 3em; padding: 22px 26px; background: var(--accent); border: 4px solid var(--ink); border-radius: 0; box-shadow: 8px 8px 0 var(--ink); }
.theme-checklist .cta-box a { color: var(--on-accent); font-size: 1.12rem; font-weight: 800; line-height: 1.4; text-decoration-color: var(--ink); }
.theme-checklist .faq { border-top: 4px solid var(--ink); }
.theme-checklist .faq h3 { font-size: 1.15rem; margin: 1.5em 0 .2em; padding-left: 14px; border-left: 8px solid var(--accent); }
.theme-checklist .sources { border-top: 4px solid var(--ink); }
.theme-checklist .sources h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.theme-checklist .shot img { border: 3px solid var(--ink); border-radius: 0; }
.theme-checklist .demo-band h2 { font-size: clamp(1.7rem, 3.6vw, 2.3rem); border-left: 12px solid var(--accent); padding-left: 14px; }
.theme-checklist .site-footer { margin-top: 64px; border-top: 12px solid var(--accent); }
.theme-checklist .site-footer .logo-text { color: #fff; text-transform: uppercase; }

@media (max-width: 640px) {
  .theme-checklist .entry, .theme-checklist .entry.has-cover { grid-template-columns: 54px minmax(0, 1fr); grid-template-areas: "cover cover" "no cat" "no title" "no ex" "no meta"; }
  .theme-checklist .entry-cover { border-left: 0; border-bottom: 3px solid var(--ink); aspect-ratio: 16 / 9; min-height: 0; }
  .theme-checklist .entry-no { font-size: 1.2rem; }
  .theme-checklist .entry-cat { padding-left: 14px; }
  .theme-checklist .entry h4 { padding-left: 52px; padding-right: 14px; }
  .theme-checklist .entry h4::before { left: 14px; }
  .theme-checklist .entry-ex, .theme-checklist .entry-meta { padding-left: 52px; padding-right: 14px; }
  .theme-checklist .art-cover { box-shadow: 7px 7px 0 var(--accent); margin-right: 7px; }
}
@media (max-width: 860px) { .theme-checklist .t-hero .hero-grid { grid-template-columns: 1fr; } }