/*
Theme Name: Employment
Theme URI: https://employment.biz/
Author: Webhaus LLC
Description: Bespoke theme for employment.biz: the paperwork and process of work, explained. Palette "Paper": white page, light gray boxes, orange accents, an icon on every heading and line diagrams in the articles. Phone first: a search band over the instant-answers index, Start-here tiles, the answer first and the long sections folded, visible citation numbers, the disclaimer on every page. System fonts, inline Lucide line icons, no images in the chrome. Styles the markup written by niche-sites/tools/publish.py.
Version: 0.2.3
Requires at least: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: employment
*/

/* =========================================================================
 * Tokens, palette "Paper" (0.2.0, the owner's direction of 2026-10-14: as clean as possible, white page, a few light
 * gray elements, orange accents). The only place colors live. There is one palette; dark mode swaps the same tokens
 * and nothing else. Every text/background pair is at or above 4.5:1 (theme/README.md has the table; recompute with
 * theme/preview/contrast.py after any change).
 * Spacing (0.2.1, owner: "still very dense"): the vertical rhythm between major blocks is about 1.6-2x the 0.2.0
 * values on desktop and about 1.4x on phones; the values are listed in README.md.
 * ====================================================================== */
:root {
  --bg: #ffffff;        /* the page */
  --paper: #f8f9fa;     /* cards: folds, tiles, the In brief box, the hero band */
  --box: #f3f4f6;       /* callouts, the search band, answer panels */
  --soft: #fff1e8;      /* the orange tint: the help box, a targeted source, the active menu row */
  --ink: #1b1f24;       /* headings = the body black */
  --text: #1b1f24;
  --mute: #5f6b76;      /* 5.5:1 on white, 4.9:1 on the tint */
  --line: #e5e7eb;      /* every rule, border and divider; the 1 px line under the header */
  --accent: #c2410c;    /* orange: links, citation numbers, icons, the search button, switch knobs, the active tab, focus rings, the Steps numbers (5.2:1 on white) */
  --on-accent: #fff;
  --diagram-line: #9aa3ad;   /* the gray of the diagram strokes, for reference (the SVG files carry it) */
  --hfont: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --bfont: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r: 10px;
  --col: 68ch;
  --ico: 44px;      /* In brief, the help box, the tab labels' sections */
  --ico-s: 32px;    /* Most asked, callouts, the FAQ, Related and Sources headings */
  --ico-xs: 28px;   /* the disclaimer strip, Print this */
  --ico-h2: 26px;   /* the icon before every H2 in an article */
  --ico-tile: 48px; /* the Start-here tiles */
  --ico-hero: 112px; /* the section icon in the hero band */
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #121417; --paper: #1a1d21; --box: #1f2327; --soft: #2a211b; --ink: #e6e8eb; --text: #e6e8eb; --mute: #a3acb5; --line: #2e343a; --accent: #ff9a5c; --on-accent: #121417; }
}

/* base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 70px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 1rem/1.55 var(--bfont); padding-bottom: calc(72px + env(safe-area-inset-bottom)); overflow-wrap: break-word; }
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
img, svg, video, iframe { max-width: 100%; height: auto; }
h1, h2, h3, h4 { font-family: var(--hfont); color: var(--ink); line-height: 1.25; margin: 1.8em 0 .6em; font-weight: 700; }
h2 { font-size: 1.2rem; } h3 { font-size: 1.05rem; } h4 { font-size: 1rem; }
p, ul, ol { margin: 0 0 1em; }
ul, ol { padding-left: 1.25em; } li { margin: 0 0 .4em; }
[hidden] { display: none !important; }
.wrap { max-width: var(--col); margin: 0 auto; padding: 0 16px; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: var(--accent); color: var(--on-accent); padding: 8px; z-index: 99; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); margin: 0; }
.sec-label { font-family: var(--bfont); font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--mute); margin: 40px 0 14px; }
.btn { display: inline-block; background: var(--accent); color: var(--on-accent); border-radius: 8px; padding: 9px 14px; font-weight: 700; font-size: .92rem; text-decoration: none; }

/* icons: inline SVG from inc/icons.php, one color (currentColor), sized here; orange wherever they carry meaning */
.ico { width: var(--ico); height: var(--ico); flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.ico-s { width: var(--ico-s); height: var(--ico-s); }
.ico-xs { width: var(--ico-xs); height: var(--ico-xs); }
.ico-h2 { width: var(--ico-h2); height: var(--ico-h2); color: var(--accent); }

/* header: white, a 1 px gray line under it; the logo mark (orange) and the wordmark with its tagline at the left; at
   the right the menu button (icon + "Menu") */
.site-head { background: var(--bg); color: var(--ink); padding: 10px 0; position: sticky; top: 0; z-index: 5; border-bottom: 1px solid var(--line); transition: padding .2s; }
/* compacted on scroll (app.js adds is-compact past 80 px, removes it under 24 px) */
.brand-logo svg, .brand .wm, .head-corner { transition: width .2s, height .2s, font-size .2s, transform .2s; }
.site-head.is-compact { padding: 5px 0; }
.site-head.is-compact .brand-logo svg { width: 26px; height: 26px; }
.site-head.is-compact .brand .wm { font-size: 1rem; }
.site-head.is-compact .brand .tl { display: none; }
.site-head.is-compact .brand .wm-pre { display: none; }
.site-head.is-compact .head-corner { transform: scale(.82); }
.head-row { max-width: 96vw; margin: 0 auto; padding: 0 2vw; display: flex; align-items: center; gap: 10px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; min-width: 0; flex: 1; }
.brand-logo { display: inline-flex; flex: none; color: var(--accent); }
.brand-logo svg { width: 34px; height: 34px; }
.brand .wm-pre { display: block; font-size: .62rem; font-weight: 300; line-height: 1; letter-spacing: .06em; color: var(--mute); margin-bottom: 3px; text-align: left; }   /* the thin "The" (0.2.3) */
.brand .wm { display: block; font-family: var(--hfont); font-weight: 700; font-size: 1.2rem; line-height: 1.1; }
.brand .tl { display: none; font-size: .75rem; color: var(--mute); margin-top: 2px; }   /* shown from 600 px */
@media (min-width: 600px) { .brand .tl { display: block; } }
.head-corner { display: grid; grid-template-columns: auto; justify-items: stretch; gap: 7px; flex: none; transform-origin: right center; }   /* the compact EN | ES switch, then the Menu button, both the width of the wider */
.menu-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 10px 0 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); border-radius: 8px; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 600; }
.menu-btn .ico { width: 22px; height: 22px; color: var(--accent); }
.menu-btn:focus-visible, .lang-switch a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* the EN/ES language switch (functions.php fl_lang_switch): the theme's flag drawings and the words; compact in the
   header corner (EN | ES), the full words in the menu panel and the footer; the current language in orange */
.lang-switch { display: flex; align-items: center; gap: 6px; flex: none; font-size: .85rem; color: var(--text); }
.lang-switch a { display: inline-flex; align-items: center; gap: 5px; color: var(--mute); text-decoration: none; }
.lang-switch a.is-current { font-weight: 700; color: var(--accent); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lang-switch .flag { width: 22px; height: 15px; border-radius: 2px; flex: none; }
.lang-sep { color: var(--line); }
.lang-head { font-size: .7rem; gap: 4px; line-height: 1; justify-content: flex-end; }
.lang-head a { gap: 3px; } .lang-head a.is-current { text-decoration: none; } .lang-head .flag { width: 16px; height: 11px; }

/* the search form: the label line and the box (the white input, the orange submit button at its right). It sits in
   the pull-down panel under the header, or in the light gray band under the home hero. */
.ask-band { background: var(--box); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 0 26px; }
.ask { margin: 0; }
.ask-label { display: block; font-size: .85rem; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.ask-box { display: flex; align-items: stretch; }
.ask input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: 12px 14px; border: 1px solid var(--line); border-right: 0; border-radius: var(--r) 0 0 var(--r); background: #fff; color: #1b1f24; -webkit-appearance: none; appearance: none; }
.ask-go { flex: none; width: 50px; display: grid; place-items: center; border: 0; border-radius: 0 var(--r) var(--r) 0; background: var(--accent); color: #fff; cursor: pointer; padding: 0; }
.ask-go .ico { width: 24px; height: 24px; color: #fff; }
.ask-go:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* the pull-down (every page but the home page): a small white tab hanging from the header's bottom edge, centred over
   the hero; the panel slides down from under the header and stays with it while scrolled. Collapsed only when
   JavaScript runs (html.js). */
.search-tab { position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); z-index: 6; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 16px 0 12px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 10px 10px; background: var(--bg); color: var(--ink); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; box-shadow: 0 3px 10px rgb(0 0 0 / .08); }
.search-tab .ico { width: 20px; height: 20px; color: var(--accent); }
.search-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.search-tab[aria-expanded="true"] { background: var(--box); }
.search-panel { background: var(--box); border-top: 1px solid var(--line); }
.search-panel-in { position: relative; padding-top: 12px; padding-bottom: 14px; padding-right: 48px; }
.search-close { position: absolute; right: 8px; top: 6px; width: 36px; height: 36px; border: 0; background: transparent; color: var(--mute); font-size: 1.6rem; line-height: 1; cursor: pointer; }
.search-close:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }
html.js .search-panel { max-height: 0; overflow: hidden; visibility: hidden; border-top-width: 0; transition: max-height .25s ease, visibility 0s .25s, border-top-width 0s .25s; }
html.js .search-panel.is-open { max-height: 220px; visibility: visible; border-top-width: 1px; transition: max-height .25s ease, visibility 0s, border-top-width 0s; }
.ask input::placeholder { color: #5f6b76; }
.ask input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }

/* the menu panel (a <dialog>; app.js opens it with showModal): the sections with their orange icons, the legal links,
   the Accessibility button */
.menu-panel { border: 0; padding: 0; background: transparent; margin: 0; inset: 0 0 auto auto; max-width: 100vw; color: var(--text); }
.menu-panel::backdrop { background: rgb(0 0 0 / .35); }
.menu-panel[open] { display: grid; gap: 10px; width: min(92vw, 360px); padding: 18px 18px 16px; margin: 10px 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 40px rgb(0 0 0 / .18); position: fixed; top: 0; right: 0; left: auto; }
.menu-sections { display: grid; gap: 2px; }
.menu-sections a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.06rem; font-family: var(--hfont); }
.menu-sections a:hover, .menu-sections a:focus-visible, .menu-sections a.is-current { background: var(--soft); }
.menu-sections .ico { color: var(--accent); width: 32px; height: 32px; }
.menu-panel .lang-switch { padding: 6px 10px 0; }
.menu-tools { margin: 0; padding: 0 10px; }
.a11y-open { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: .88rem; font-weight: 600; color: var(--accent); background: none; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px 6px 8px; cursor: pointer; }
.a11y-open .ico { width: 20px; height: 20px; }
.foot-tools { margin: 0 0 12px; }
.menu-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: .88rem; }
.menu-links a { color: var(--text); }
.menu-close { position: absolute; top: 8px; right: 10px; width: 34px; height: 34px; border: 0; background: transparent; color: var(--mute); font-size: 1.5rem; line-height: 1; cursor: pointer; }

/* the accessibility panel (a <dialog> like the menu, centred) and its switches (orange knobs when on) */
.a11y-panel { border: 0; padding: 0; background: transparent; margin: 0; color: var(--text); max-width: 100vw; }
.a11y-panel::backdrop { background: rgb(0 0 0 / .35); }
.a11y-panel[open] { display: block; width: min(92vw, 400px); padding: 18px 18px 16px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 40px rgb(0 0 0 / .18); position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.a11y-panel h2 { display: flex; align-items: center; gap: 10px; margin: 0 30px 4px 0; font-size: 1.2rem; }
.a11y-panel h2 .ico { color: var(--accent); width: 28px; height: 28px; }
.a11y-intro { margin: 0 0 10px; font-size: .85rem; color: var(--mute); }
.a11y-list { display: grid; gap: 2px; }
.a11y-list [role="switch"] { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 6px 4px 6px 8px; font: inherit; font-weight: 600; color: var(--ink); text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.a11y-list [role="switch"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.sw { flex: none; width: 40px; height: 24px; border-radius: 12px; background: var(--line); position: relative; transition: background .2s; }
.sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgb(0 0 0 / .3); transition: transform .2s; }
[role="switch"][aria-checked="true"] .sw { background: var(--accent); }
[role="switch"][aria-checked="true"] .sw::after { transform: translateX(16px); }
.a11y-acts { display: flex; gap: 10px; justify-content: flex-end; margin: 14px 0 0; }
.a11y-reset, .a11y-close { font: inherit; font-weight: 600; border-radius: 8px; padding: 8px 14px; cursor: pointer; min-height: 40px; }
.a11y-reset { color: var(--accent); background: none; border: 1px solid var(--line); }
.a11y-close { color: var(--on-accent); background: var(--accent); border: 0; }

/* the folded sections: a light gray card with the heading (icon + words) as the summary and an orange +/- at the right */
details.fold { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); margin: 0 0 16px; }
details.fold > summary { list-style: none; cursor: pointer; padding: 16px 46px 16px 18px; font-family: var(--hfont); font-weight: 700; font-size: 1.05rem; position: relative; min-height: 48px; color: var(--ink); line-height: 1.35; }
summary::-webkit-details-marker { display: none; }
details.fold > summary::after { content: "+"; position: absolute; right: 14px; top: 8px; font-family: var(--bfont); font-size: 1.5rem; font-weight: 400; color: var(--accent); }
details[open].fold > summary::after { content: "\2212"; }
summary h2, summary h3 { display: inline; font: inherit; color: inherit; margin: 0; }
details.fold > summary h2 { display: flex; align-items: center; gap: 10px; }
.fold-body { padding: 0 18px 14px; }
details.fold-sources { margin-top: 24px; }
.fold-body > :first-child { margin-top: 0; }
/* every H2 in an article carries an icon (functions.php fl_h2_icon, by keyword): the icon and the words on one line */
.entry-content h2 { display: flex; align-items: center; gap: 10px; }
.entry-content > h2#faq, .entry-content > h2#related, .entry-content > h2#sources { margin-top: 2.4em; }
.entry-content p, .entry-content ul, .entry-content ol { margin-bottom: 1.2em; }

/* question-and-answer pairs (the FAQ, Most asked, the search answers): the question row with an orange chevron that
   turns when open; the answer in a light gray panel with an orange bar and an arrow at its start */
details.faq-item { margin: 0 0 22px; }
details.faq-item > summary { list-style: none; cursor: pointer; position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 34px 10px 0; min-height: 44px; font-weight: 600; color: var(--ink); line-height: 1.35; }
details.faq-item > summary .chev { position: absolute; right: 4px; top: 50%; width: 22px; height: 22px; margin-top: -11px; color: var(--accent); transition: transform .2s; }
details[open].faq-item > summary .chev { transform: rotate(180deg); }
.faq-answer { position: relative; background: var(--box); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; padding: 10px 14px 10px 34px; margin: 4px 0 0; }
.faq-answer::before { content: "\2192"; position: absolute; left: 11px; top: 9px; color: var(--accent); font-weight: 700; }
.faq-answer > :first-child { margin-top: 0; } .faq-answer > :last-child { margin-bottom: 0; }
.faq-answer p { margin: 0 0 .6em; }
.faq-answer .more { display: block; margin-top: 6px; font-weight: 600; font-size: .92rem; text-decoration: none; }
.answers { padding-top: 12px; padding-bottom: 24px; }
.answers-count, .answers-none, .answers-more { font-size: .85rem; color: var(--mute); margin: 0 0 8px; }
.answers-more { margin-top: 14px; }
.searching #main > :not(#answers) { display: none; }

/* home: the Start-here tiles (large orange icons) and the Most-asked list */
.home-intro { color: var(--mute); margin: 0; max-width: 60ch; }
.home > section { margin-bottom: 40px; }
.tiles { display: grid; grid-template-columns: 1fr; gap: 14px; }
.tile { display: flex; align-items: center; gap: 14px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 18px 18px; text-decoration: none; color: var(--text); min-height: 80px; }
.tile .ico { width: var(--ico-tile); height: var(--ico-tile); color: var(--accent); stroke-width: 1.75; }
.tile-text { flex: 1; }
.tile b { display: block; font-family: var(--hfont); font-size: 1.08rem; color: var(--ink); line-height: 1.25; }
.tile small { display: block; color: var(--mute); font-size: .875rem; line-height: 1.35; margin-top: 2px; }
.tile i { flex: none; font-style: normal; color: var(--accent); font-size: 1.3rem; }
.asked { margin: 0 0 32px; }
.asked summary .ico { color: var(--accent); }
.asked-text { flex: 1; }
.asked-cat { display: block; color: var(--mute); font-size: .8rem; font-weight: 400; margin-top: 1px; }
.guides { list-style: none; padding: 0; margin: 0 0 16px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.guides li { margin: 0; border-top: 1px solid var(--line); } .guides li:first-child { border-top: 0; }
.guides a { display: block; padding: 12px 14px; font-weight: 600; text-decoration: none; color: var(--ink); line-height: 1.35; }
.guides small { display: block; padding: 0 14px 12px; margin-top: -6px; color: var(--mute); font-size: .85rem; }
.empty { color: var(--mute); margin-top: 24px; }

/* article */
.entry-title { font-size: 1.45rem; line-height: 1.18; margin: 0 0 8px; }
.entry-meta { color: var(--mute); font-size: .85rem; margin: 0 0 16px; } .entry-meta a { color: inherit; }
.entry-pair { font-size: .9rem; font-weight: 600; margin: -8px 0 14px; } .entry-meta + .entry-pair { margin-top: -8px; }
.entry-content { font-size: 1rem; }
.key-facts { background: var(--paper); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: var(--r); padding: 18px 20px 10px; margin: 0 0 20px; }
.key-facts-label { display: flex; align-items: center; gap: 10px; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--mute); margin: 0 0 8px; }
.key-facts-label .ico { color: var(--accent); }
.key-facts p { margin: 0 0 8px; } .key-facts ul { margin: 6px 0 10px; padding-left: 20px; } .key-facts li { margin: 0 0 6px; }
.aff-note { font-size: .8rem; color: var(--mute); margin: 0 0 18px; }
.disclaimer-strip { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: var(--mute); margin: 16px 0 30px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.disclaimer-strip .ico { color: var(--accent); }
sup.cite { font-size: .68em; line-height: 0; vertical-align: super; margin-left: 1px; } sup.cite + sup.cite { margin-left: 3px; }
sup.cite a { text-decoration: none; color: var(--accent); font-weight: 600; padding: 0 1px; } sup.cite a:hover { text-decoration: underline; }
.callout { margin: 26px 0; padding: 16px 18px; border-radius: 8px; background: var(--box); border: 1px solid var(--line); border-left: 4px solid var(--accent); }
.callout p { margin: 0; } .callout p + p { margin-top: .6em; }
.callout-label { display: flex; align-items: center; gap: 10px; font-size: .75rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.callout .ico { color: var(--accent); }
.callout-disagree { border-style: dashed; border-left-style: solid; background: var(--bg); }
.callout-heard { border-left-color: var(--mute); }
.table-wrap { overflow-x: auto; margin: 0 -16px 1.6em; padding: 0 16px; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .94rem; line-height: 1.4; }
th, td { padding: 9px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); font-weight: 600; }
.table-wrap table { min-width: 560px; }
.table-wrap-decision table { min-width: 0; }
/* the decision grid ("If you are… | Do this"): cards at every width, one per row, a small orange icon chosen from
   the row's first cell (functions.php fl_decision_icons) beside the condition, the answer under a rule */
table.decision thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
table.decision, table.decision tbody { display: block; width: auto; }
table.decision tr { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); margin: 0 0 14px; padding: 6px 0; }
table.decision td { display: block; border: 0; padding: 10px 16px; }
table.decision td:first-child { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; color: var(--ink); padding-bottom: 4px; }
table.decision td:first-child .dec-ico { flex: none; width: 24px; height: 24px; color: var(--accent); margin-top: 1px; }
table.decision td:last-child { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 8px; flex: 1; }
/* the Steps list as a vertical timeline: orange numbered circles joined by a gray line, the bold first words as the
   step label */
ol.steps { list-style: none; padding: 0; margin: 0 0 1.2em; counter-reset: step; }
ol.steps li { position: relative; padding: 0 0 26px 44px; margin: 0; counter-increment: step; }
ol.steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-family: var(--bfont); font-size: .85rem; font-weight: 700; text-align: center; line-height: 28px; z-index: 1; }
ol.steps li::after { content: ""; position: absolute; left: 13px; top: 30px; bottom: -2px; width: 2px; background: var(--line); }
ol.steps li:last-child::after { display: none; }
ol.steps li > strong:first-child, ol.steps li > p:first-child > strong:first-child { display: block; color: var(--ink); line-height: 28px; margin-bottom: 2px; }
ol.steps li > p { margin: 0 0 .5em; }
.fold-body .table-wrap, .help .table-wrap { margin-left: 0; margin-right: 0; padding: 0; }
.fold-body .callout, .faq-answer .callout { background: var(--bg); }
.intro > :last-child { margin-bottom: 24px; }
.help { background: var(--soft); border-left: 4px solid var(--accent); border-radius: 8px; padding: 20px 20px 8px; margin: 40px 0; }
.help h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font-size: 1.2rem; }
.help .ico { color: var(--accent); }
.entry-content h2#faq, .entry-content h2#related, .entry-content h2#sources { display: flex; align-items: center; gap: 10px; }
.entry-content h2#faq .ico, .entry-content h2#related .ico, .entry-content h2#sources .ico { color: var(--accent); }
.related-articles ul { list-style: none; padding: 0; margin: 0 0 28px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); }
.related-articles li { margin: 0; border-top: 1px solid var(--line); } .related-articles li:first-child { border-top: 0; }
.related-articles a { display: block; padding: 12px 14px; font-weight: 600; text-decoration: none; color: var(--ink); line-height: 1.35; }
.sources { font-size: .9rem; line-height: 1.45; }
.sources ol { list-style: none; padding: 0; margin: 0 0 8px; counter-reset: src; }
.sources li { counter-increment: src; position: relative; padding: 6px 0 6px 38px; margin: 0; border-bottom: 1px solid var(--line); }
.sources li::before { content: counter(src); position: absolute; left: 0; top: 7px; width: 26px; height: 22px; border: 1px solid var(--accent); color: var(--accent); border-radius: 5px; font-family: var(--bfont); font-size: .78rem; font-weight: 700; text-align: center; line-height: 20px; }
.sources li:target { background: var(--soft); }
.sources a { word-break: break-word; font-weight: 600; }
.fold-sources .fold-body { padding-bottom: 10px; }
.print-row { margin: 0 0 12px; }
.print-btn { display: inline-flex; align-items: center; gap: 8px; font: inherit; font-weight: 600; color: var(--accent); background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; cursor: pointer; }
figure { margin: 0 0 1em; } figcaption { font-size: .8rem; color: var(--mute); } .photo-credit { opacity: .85; }
/* diagrams (assets/diagrams/*.svg, drawn in one style: 1.5 px gray lines, orange highlights, the system sans): any
   img whose src is under assets/diagrams is wrapped by functions.php in <figure class="diagram"> with the alt as the
   caption. The SVG files are drawn for a white ground, so in dark mode the figure keeps a white card under them. */
figure.diagram { margin: 28px 0 34px; }
figure.diagram img, figure.diagram svg { display: block; width: 100%; height: auto; max-width: 680px; }
figure.diagram figcaption { margin-top: 8px; font-size: .85rem; color: var(--mute); max-width: 680px; }
@media (prefers-color-scheme: dark) { figure.diagram img, figure.diagram svg { background: #fff; border-radius: var(--r); padding: 10px; } }

/* =========================================================================
 * The hero band: under the header, full bleed, the lightest gray with a 1 px line under it; at the left the section
 * label, the title and the meta line, at the right the section's large orange line icon (the icon variant, the
 * default; FL_HERO 'photo' keeps the sister theme's photo path: the featured image under a radial dark overlay,
 * white text). Heights: 200 px on phones, 280 px from 800 px. The home hero holds the headline, the intro line and
 * the work-lifecycle diagram instead of the icon.
 * ====================================================================== */
.hero { position: relative; overflow: hidden; background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); min-height: 220px; display: flex; align-items: flex-end; padding: 48px 0 36px; margin: 0 0 20px; }
.hero-in { position: relative; z-index: 1; width: 100%; padding-right: calc(var(--ico-hero) + 24px); }
.hero-mark { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: var(--ico-hero); height: var(--ico-hero); color: var(--accent); pointer-events: none; }
.hero-mark .ico { width: 100%; height: 100%; stroke-width: 1.25; }
.crumbs { margin: 0 0 28px; font-size: .8rem; color: var(--mute); } .crumbs a { color: inherit; text-decoration: none; } .crumbs a:hover { text-decoration: underline; }
.hero-label { margin: 0 0 6px; font-size: .78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--accent); }
.hero-label a { color: inherit; text-decoration: none; }
.hero .entry-title { color: var(--ink); }
.hero .entry-meta { color: var(--mute); margin: 0 0 6px; } .hero .entry-meta a { color: var(--mute); }
.hero .entry-pair { margin: 0; }
.hero-intro { color: var(--mute); max-width: 75ch; } .hero-intro p { margin: 0; } .hero-intro a { color: var(--accent); }
/* photo variant (FL_HERO 'photo', off by default): the picture at full opacity under a radial dark overlay, white
   text with a soft shadow, the icon hidden. Scoped to the hero element: <body> also carries a hero-* class. */
.hero.hero-photo { background-image: radial-gradient(circle at bottom left, rgb(0 0 0 / .7) 0%, rgb(0 0 0 / .25) 100%), var(--hero-img); background-size: cover; background-position: center; color: #fff; border-bottom: 0; }
.hero.hero-photo .entry-title, .hero.hero-photo .hero-label, .hero.hero-photo .entry-meta, .hero.hero-photo .entry-pair, .hero.hero-photo .hero-intro { color: #fff; text-shadow: 0 1px 3px rgb(0 0 0 / .45); }
.hero.hero-photo .entry-meta a, .hero.hero-photo .entry-pair a, .hero.hero-photo .hero-intro a { color: #fff; }
.hero.hero-photo .hero-mark { display: none; }
.hero.hero-photo .hero-in { padding-right: 0; }
.hero-credit { position: absolute; right: 12px; bottom: 8px; margin: 0; font-size: .7rem; color: #fff; z-index: 1; }
/* the home hero: the headline and the intro line at the left, the work-lifecycle diagram (assets/diagrams/
   work-lifecycle.svg) under them on phones and at the right from 800 px; the light gray search band follows */
.hero-home { align-items: center; min-height: 0; padding: 40px 0 36px; margin-bottom: 0; }
.hero-home .hero-in { padding-right: 0; display: grid; gap: 28px; }
.hero-headline { font-family: var(--hfont); font-size: 1.75rem; font-weight: 700; line-height: 1.12; margin: 0 0 20px; color: var(--ink); max-width: 22ch; }
.hero-line { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--mute); max-width: 56ch; }
.hero-diagram { margin: 0; }
.hero-diagram img, .hero-diagram svg { display: block; width: 100%; height: auto; max-width: 680px; }
@media (prefers-color-scheme: dark) { .hero-diagram img, .hero-diagram svg { background: #fff; border-radius: var(--r); padding: 10px; } }
.listing-start { margin: 18px 0 8px; }

/* listings */
.listing-intro { color: var(--mute); }
.pagination { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.pagination .page-numbers { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); text-decoration: none; color: var(--text); }
.pagination .current { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* footer and the phone tab bar (white, a 1 px line on top, orange icons, the current tab in orange) */
.site-foot { margin-top: 56px; padding: 24px 0 28px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--mute); }
.foot-brand { display: flex; align-items: center; gap: 8px; font-family: var(--hfont); font-weight: 700; color: var(--ink); margin: 0 0 8px; font-size: 1rem; }
.foot-brand .ico { width: 22px; height: 22px; color: var(--accent); }
.foot-links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px; } .foot-links li { margin: 0; }
.foot-links a { color: var(--text); }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 10px; } .foot-row .foot-links { margin: 0; }
.lang-foot a { color: var(--text); } .lang-foot a.is-current { color: var(--accent); }
.foot-legal { font-size: .8rem; margin: 0 0 6px; } .foot-legal a { color: inherit; }
.install-open { font: inherit; font-size: .8rem; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; justify-content: space-around; background: var(--bg); border-top: 1px solid var(--line); padding: 6px 0 calc(8px + env(safe-area-inset-bottom)); }
.tabbar a { flex: 1; min-width: 56px; text-align: center; color: var(--mute); font-size: .72rem; text-decoration: none; padding: 4px 2px; }
.tabbar .ico { display: block; margin: 0 auto 2px; width: 28px; height: 28px; color: var(--accent); stroke-width: 1.75; }
.tabbar .is-current { color: var(--accent); font-weight: 700; }

/* the "keep on your phone" sheet */
.install { position: fixed; left: 0; right: 0; bottom: 0; z-index: 8; background: var(--bg); border-top: 3px solid var(--accent); box-shadow: 0 -8px 24px rgb(0 0 0 / .12); padding: 16px 0 calc(18px + env(safe-area-inset-bottom)); text-align: center; }
.install-title { margin: 0 0 10px; font-weight: 700; font-size: 1.05rem; }
.install-btn { font: inherit; font-weight: 700; color: var(--on-accent); background: var(--accent); border: 0; border-radius: var(--r); padding: 12px 18px; min-height: 48px; cursor: pointer; }
.install-how { margin: 10px 0 0; font-weight: 600; }
.install-note { margin: 8px auto 0; max-width: 34em; font-size: .88rem; color: var(--mute); }
.install-acts { margin: 12px 0 0; display: flex; gap: 10px; justify-content: center; }
.install-alt { font: inherit; font-weight: 600; color: var(--accent); background: none; border: 1px solid var(--line); border-radius: var(--r); padding: 9px 16px; min-height: 44px; cursor: pointer; }

/* =========================================================================
 * Wide screens: no tab bar (the menu button is the way to the sections); the content area is 80% of the viewport up
 * to 1400 px; running text inside it is capped at 75ch while tables, the decision grid, boxes and tiles use the full
 * width; the icons grow.
 * ====================================================================== */
@media (min-width: 800px) {
  :root { --ico: 60px; --ico-s: 40px; --ico-xs: 36px; --ico-h2: 30px; --ico-tile: 64px; --ico-hero: 200px; }
  html { scroll-padding-top: 100px; }
  body { padding-bottom: 0; }
  .tabbar { display: none; }
  .wrap { max-width: min(80vw, 1400px); }
  .site-head { padding: 12px 0; }
  .brand-logo svg { width: 42px; height: 42px; }
  .brand .wm-pre { font-size: .7rem; }
  .brand .wm { white-space: nowrap; font-size: 1.3rem; }
  .site-head.is-compact .brand-logo svg { width: 30px; height: 30px; }
  .site-head.is-compact .brand .wm { font-size: 1.05rem; }
  .ask-band { padding: 32px 0 36px; }
  .ask { max-width: 640px; }
  .search-panel-in { padding-top: 14px; padding-bottom: 16px; }
  .search-close { right: 2vw; }
  .tiles { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; }
  .tile { padding: 26px 26px; }
  .home > section { margin-bottom: 64px; }
  .sec-label { margin: 56px 0 18px; }
  .asked { margin-bottom: 48px; }
  body { line-height: 1.6; }
  h2 { font-size: 1.3rem; } h3 { font-size: 1.1rem; }
  .entry-title { font-size: 2.1rem; max-width: 40ch; }
  .entry-content { font-size: 1.0625rem; }
  .entry-content h2 { font-size: 1.5rem; }
  details.fold > summary { font-size: 1.1rem; padding: 20px 50px 20px 22px; }
  details.fold { margin-bottom: 24px; }
  .fold-body { padding: 0 22px 20px; }
  details.fold-sources { margin-top: 36px; }
  details.faq-item { margin-bottom: 30px; }
  .key-facts { padding: 24px 26px 14px; margin-bottom: 28px; }
  .disclaimer-strip { margin: 20px 0 44px; }
  .callout { margin: 36px 0; padding: 18px 22px; }
  .help { margin: 56px 0; padding: 26px 26px 12px; }
  figure.diagram { margin: 40px 0 48px; }
  .related-articles ul { margin-bottom: 40px; }
  .site-foot { margin-top: 80px; }
  .lang-switch { gap: 8px; font-size: .9rem; }
  .lang-head { font-size: .7rem; gap: 4px; }
  .entry-pair, .ask, .entry-content > p, .entry-content > ul, .entry-content > ol, .entry-content > h3, .entry-content > h4, .intro > *, .fold-body > p, .fold-body > ul, .fold-body > ol, .fold-body > h3, .fold-body > h4, .help > p, .help > ul, .help > ol, .faq-answer > *, .key-facts > p, .key-facts > ul, .callout > p, .disclaimer-strip, .entry-meta, .listing-intro, .aff-note, .sources ol, .related-articles ul, details.faq-item, .answers details.qa, .answers p, .guides, .asked, ol.steps { max-width: 75ch; }
  .table-wrap { margin: 0 0 2em; padding: 0; } .table-wrap table { min-width: 0; }
  .hero { min-height: 320px; padding: 72px 0 56px; margin-bottom: 32px; }
  .hero-in { padding-right: calc(var(--ico-hero) + 48px); }
  .hero-mark { right: 10vw; }
  .hero-credit { right: 16px; bottom: 10px; }
  .hero-home { padding: 64px 0 60px; }
  .hero-home .hero-in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; gap: 64px; }
  .hero-headline { font-size: 2.6rem; margin-bottom: 28px; }
  .hero-line { font-size: 1.1rem; }
  table.decision tbody { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 20px; }
  table.decision tr { margin: 0; }
  table.decision td { padding: 14px 18px; }
  ol.steps li { padding-left: 52px; padding-bottom: 34px; }
  ol.steps li::before { width: 32px; height: 32px; line-height: 32px; font-size: .9rem; }
  ol.steps li::after { left: 15px; top: 34px; }
  ol.steps li > strong:first-child, ol.steps li > p:first-child > strong:first-child { line-height: 32px; }
}

/* print: the page without the chrome ("Print this" on the checklists; works on every page) */
@media print {
  .site-head, .ask-band, .search-panel, .search-tab, .menu-panel, .a11y-panel, .tabbar, .skip, .site-foot, .install, #answers, .print-row, .pagination, .related-articles, h2#related, .hero-mark, .hero-credit, .crumbs, .lang-switch, .entry-pair { display: none !important; }
  .hero { background: none !important; color: #000; min-height: 0; padding: 0; margin-bottom: 12pt; border: 0; } .hero-diagram { display: none !important; } .hero-headline, .hero-line { color: #000; } .hero .entry-title, .hero .entry-meta, .hero .entry-meta a, .hero-label { color: #000; text-shadow: none; }
  .hero-in { padding-right: 0; }
  body { background: #fff; color: #000; padding: 0; font-size: 12pt; }
  .wrap { max-width: none; padding: 0; }
  details.fold, details.faq-item, .key-facts, .callout, .help, .guides, table.decision tr { background: none; border-color: #999; }
  .disclaimer-strip, .entry-meta, .sources { color: #333; }
  a { color: inherit; text-decoration: none; }
  .sources a { text-decoration: underline; }
  ol.steps li::before { background: #000; color: #fff; }
}

/* =========================================================================
 * Accessibility states (the panel in the footer and the menu): classes on <html>, honoured in dark mode too. Last in
 * the file so that they win. High contrast: black on white, links underlined, the accent darkened to #8a2e08 (8.5:1).
 * ====================================================================== */
html.a11y-text-112 { font-size: 112%; }
html.a11y-text-125 { font-size: 125%; }
html.a11y-contrast, html.a11y-contrast body { --bg: #fff; --paper: #fff; --box: #f2f2f2; --soft: #f2f2f2; --ink: #000; --text: #000; --mute: #222; --line: #555; --accent: #8a2e08; --on-accent: #fff; }
html.a11y-contrast a { text-decoration: underline; }
html.a11y-contrast .ask input { background: #fff; color: #000; border-color: #000; }
html.a11y-contrast .hero { background: #fff; }
html.a11y-contrast .tabbar a, html.a11y-contrast .lang-switch a { opacity: 1; color: #000; }
html.a11y-contrast .menu-btn, html.a11y-contrast .a11y-open, html.a11y-contrast .a11y-reset, html.a11y-contrast .install-alt, html.a11y-contrast .search-tab { border-color: currentColor; }
html.a11y-contrast .sw { background: #777; }
html.a11y-contrast figure.diagram img, html.a11y-contrast figure.diagram svg, html.a11y-contrast .hero-diagram img, html.a11y-contrast .hero-diagram svg { background: #fff; }
html.a11y-spacing body { line-height: 1.8; letter-spacing: .02em; }
html.a11y-spacing p, html.a11y-spacing li { margin-bottom: 1.4em; }
html.a11y-spacing .key-facts p, html.a11y-spacing .faq-answer p, html.a11y-spacing .callout p { margin-bottom: 1em; }
html.a11y-underline a { text-decoration: underline; }
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }