/* Primion Solution finder v0.10.10. All styles are scoped to #psf so the module can sit on any page.
   Colours: Primion style guide (Aug 2026) only: Blue Grey and its 80/50/30% shades, Cool Grey, Light Grey, Primion Red, white. Info box: Primion Blue Grey. Font: Open Sans (provided by the host theme, not loaded here), with system fallbacks.
   Buttons, pills and the dropdown follow the live Primion site CSS (WordPress block buttons, FacetWP pills): 16px / 600, buttons 40px high, pills 32px high. White on Primion Red (4.30:1) is an accepted shortfall by owner decision, as on the site's own red buttons. The second action is a text link like the site's "Read more" (red text, red chevron, no pill); Blue Grey on hover. Red text on white is 4.30:1, the same accepted shortfall.
   Layout responds to the width of the column it sits in (container queries), not the browser window.
   Dark mode (v0.10): follows html[data-theme="dark"] of the host theme, or data-theme="dark" on #psf itself. Only custom properties change, no re-render. No prefers-color-scheme: the theme toggle decides. Without data-theme the module is light.
   Sticky call to action (v0.10): the .psf-cta bar is a full-width row, the last direct child of #psf, position sticky at the bottom of the viewport, buttons end-aligned, white (var(--bg)), no line, with a 16px fade strip above it (.psf-cta::before, --bar-fade, no box-shadow, so nothing bleeds sideways; hidden when static). It is always sticky and rests at the end of the module. --psf-bottom (or --psf-sticky-bottom) sets the offset (default 0px), data-sticky="false" on #psf switches it off. Host requirement: no ancestor with overflow hidden, auto, scroll or clip between the module and the page scroller.
   Containers use a literal 16px radius. Pills and buttons are 100px. No outer padding: the host page sets the margins. */
#psf {
  --bg: #FFFFFF; --ink: #243A4D; --ink-2: #506171; --ink-3: #929DA6; --line: #BDC4CA; --line-soft: #D8D8DF;
  --surface: #D8D8DF; --light: #F2F3F5; --red: #E7312F; --dot: #D8D8DF;
  --white: #FFFFFF; --bluegrey: #243A4D; --ink-2s: #506171; --focus: #243A4D; --opt-bg: #FFFFFF;
  --tag-f-bg: #243A4D; --tag-f-ink: #FFFFFF; --tag-hover-bg: #243A4D; --tag-hover-ink: #FFFFFF;
  --cap-used-bg: #243A4D; --cap-used-border: #243A4D; --cap-not-bg: #F2F3F5; --cap-not-line: transparent; --cap-not-bw: 2px;
  --found-tint: rgba(36, 58, 77, .2); --found-base: #FFFFFF; --btn-hover: #506171; --bar-fade: rgba(36, 58, 77, .12);
  color-scheme: light; /* tells the browser this module is light (dark below): native controls and forced-dark features do not double-darken. Never forced-color-adjust: none, Windows High Contrast stays untouched. */
  --font: "Open Sans", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-family: var(--font); color: var(--ink); background: var(--bg);
  font-size: 17px; line-height: 1.5; text-align: left; padding: 0; margin: 0; max-width: none;
  -webkit-font-smoothing: antialiased; container: psf / inline-size;
}
/* Dark mode. The theme (ATLAS) sets data-theme on <html>; a host or widget may also set it on #psf. data-theme="light" on #psf wins over a dark page. */
html[data-theme="dark"] #psf:not([data-theme="light"]), #psf[data-theme="dark"] {
  --bg: #000000; --ink: #EFEFEF; --ink-2: #909090; --ink-3: #909090; --line: #243A4D; --line-soft: #243A4D;
  --surface: #243A4D; --light: #243A4D; --dot: #243A4D;
  --ink-2s: #EFEFEF; --focus: #EFEFEF; --opt-bg: #243A4D;
  --tag-f-bg: #EFEFEF; --tag-f-ink: #000000; --tag-hover-bg: #E7312F; --tag-hover-ink: #FFFFFF;
  --cap-used-border: #EFEFEF; --cap-not-bg: #000000; --cap-not-line: #243A4D; --cap-not-bw: 1px;
  --found-tint: rgba(36, 58, 77, .4); --found-base: #000000; --bar-fade: rgba(36, 58, 77, .9);
  --btn-hover-dark: #68727F; --btn-hover: var(--btn-hover-dark);
  color-scheme: dark;
}
html[data-theme="light"] #psf:not([data-theme="dark"]), #psf[data-theme="light"] { color-scheme: light; }
#psf *, #psf *::before, #psf *::after { box-sizing: border-box; }
#psf h3, #psf h4, #psf p, #psf ul, #psf ol, #psf li, #psf dl, #psf dt, #psf dd { margin: 0; padding: 0; }
/* Theme isolation: WordPress themes style headings, buttons, selects and abbreviations globally */
#psf h3, #psf h4 { font-family: var(--font); color: inherit; text-transform: none; letter-spacing: normal; font-style: normal; text-shadow: none; }
#psf abbr[title] { font-family: var(--font); text-decoration: none; border: 0; cursor: help; white-space: nowrap; }
#psf svg { max-width: none; }
#psf ul, #psf ol { list-style: none; }
#psf button, #psf select, #psf input { font-family: var(--font); }
#psf button { font: inherit; font-family: var(--font); color: inherit; background: none; border: 0; border-radius: 0; margin: 0; padding: 0; width: auto; height: auto; min-height: 0; cursor: pointer; text-align: left; letter-spacing: inherit; text-transform: none; text-shadow: none; box-shadow: none; transition: none; }
#psf a { color: inherit; }
#psf :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
/* Focus not obscured (WCAG 2.4.11): keep keyboard focus clear of the sticky bar. The bar's own links need none (they are always visible). */
#psf a, #psf button, #psf select, #psf input { scroll-margin-bottom: 96px; }
#psf .psf-cta a, #psf[data-sticky="false"] a, #psf[data-sticky="false"] button, #psf[data-sticky="false"] select, #psf[data-sticky="false"] input { scroll-margin-bottom: 0; }
#psf .psf-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
/* Shown only until the script has started */
#psf .psf-nojs { margin-top: 24px; padding: 16px 20px; border-radius: 16px; background: var(--surface); font-size: 15px; }
#psf .psf-nojs a { font-weight: 600; }
/* No-script fallback (v0.10.8): plain HTML for crawlers and visitors without JavaScript. The script replaces all of #psf at boot, so it never shows twice. Tokens only, no colours of its own. Columns follow the width of the module (container psf). */
#psf .psf-static { display: grid; gap: 24px; margin-top: 24px; font-size: 15px; line-height: 1.45; }
#psf .psf-static-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 40px; }
#psf .psf-static section { display: grid; align-content: start; gap: 12px; }
#psf .psf-static h3 { font-size: 20px; font-weight: 700; line-height: 1.25; }
#psf .psf-static h4 { font-size: 17px; font-weight: 700; line-height: 1.3; margin: 8px 0 4px; }
#psf .psf-static ul { display: grid; gap: 4px; }
#psf .psf-static li { padding-left: 16px; position: relative; }
#psf .psf-static ul li::before { content: ""; position: absolute; left: 0; top: .7em; width: 6px; height: 6px; border-radius: 3px; background: var(--ink-3); }
#psf .psf-static dt { font-weight: 600; }
#psf .psf-static dd { color: var(--ink-2); margin-bottom: 8px; }
#psf .psf-static a { font-weight: 600; text-underline-offset: 3px; }
#psf .psf-static a:hover { color: var(--red); }
@container psf (min-width: 600px) { #psf .psf-static-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } #psf .psf-static dl { display: grid; grid-template-columns: minmax(150px, 24%) minmax(0, 1fr); gap: 6px 24px; } #psf .psf-static dd { margin-bottom: 0; } }
@container psf (min-width: 960px) { #psf .psf-static-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Reserved height before boot (v0.10.9).#psf is its own container (psf) and cannot query its own width, so the thin .psf-wrap parent is the query container (psfwrap). Container type only: no overflow, contain, transform or will-change, so the sticky bar is unaffected. min-height applies only until render() sets data-state. Re-measured 2026-10-15 on the booted idle widget (no sector chosen) in headless Edge with Open Sans 400, 600 and 700 loaded from Google Fonts (static copies). Each value is the smallest booted #psf offsetHeight measured inside its band, rounded down to a multiple of 10, so the reservation never exceeds the real height. Booted idle heights: 300px 2626, 320px 2536, 340px 2424, 360px 2359, 400px 2266, 479px 2135, 480px 2135, 481px 2135, 600px 2233, 699px 2149, 700px 2149, 701px 2149, 768px 2127, 959px 1830, 960px 1830, 961px 1830, 1000px 1786, 1200px 1656, 1400px 1572, 1600px 1551. These values should be re-checked on staging with the live theme. */
.psf-wrap { container: psfwrap / inline-size; }
#psf:not([data-state]) { min-height: 2130px; }
@container psfwrap (min-width: 480px) { #psf:not([data-state]) { min-height: 2130px; } }
@container psfwrap (min-width: 700px) { #psf:not([data-state]) { min-height: 1830px; } }
@container psfwrap (min-width: 960px) { #psf:not([data-state]) { min-height: 1550px; } }
/* ---------- Sector picker ---------- */
#psf .psf-picker { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
#psf .psf-picker-label { font-size: 17px; color: var(--ink-2); }
#psf .psf-pills { display: flex; flex-wrap: wrap; gap: 8px; }
#psf .psf-pill { display: inline-flex; align-items: center; gap: 8px; padding: 3px 16px 3px 12px; border: 0; background: var(--light); color: var(--ink); border-radius: 100px; font-size: 16px; font-weight: 600; line-height: 26px; white-space: nowrap; transition: background-color .2s, color .2s; }
#psf .psf-pill:hover, #psf .psf-pill[aria-pressed="true"] { background: var(--red); color: var(--white); }
#psf .psf-ic { flex: none; width: 20px; height: 20px; }
#psf .psf-flag { display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 3px; transform: rotate(45deg); background: var(--ink); vertical-align: 1px; }
#psf .psf-pill:hover .psf-flag, #psf .psf-pill[aria-pressed="true"] .psf-flag { background: var(--white); }
/* Phones: the pills become a native dropdown */
#psf .psf-select-wrap { display: none; position: relative; }
#psf .psf-select { display: block; width: 100%; height: 40px; min-height: 40px; margin: 0; padding: 7px 44px 7px 16px; border: 0; border-radius: 100px; box-shadow: none; background: var(--light); background-image: none; color: var(--ink); font-family: var(--font); font-size: 16px; font-weight: 600; line-height: 26px; appearance: none; -webkit-appearance: none; cursor: pointer; text-overflow: ellipsis; }
#psf .psf-select.set { background: var(--red); color: var(--white); }
#psf .psf-select option { background: var(--opt-bg); color: var(--ink); font-size: 16px; font-weight: 600; }
#psf .psf-select-wrap::after, #psf .psf-btn::after { content: ""; position: absolute; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); pointer-events: none; background-color: var(--ink); }
#psf .psf-select-wrap::after { right: 14px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6-6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
#psf .psf-select-wrap.set::after { background-color: var(--white); }
/* ---------- Sector intro ---------- */
#psf .psf-intro { margin-top: 72px; }
#psf .psf-intro[hidden] { display: none; }
#psf .psf-sector-name { font-size: 32px; line-height: 1.15; font-weight: 700; letter-spacing: -.015em; margin-bottom: 12px; }
#psf .psf-sector-desc { max-width: 44em; }
#psf .psf-regs { font-size: 15px; line-height: 1.5; color: var(--ink); list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
#psf .psf-regs li { margin: 0; padding: 0; overflow-wrap: anywhere; }
#psf .psf-regs strong { font-weight: 700; color: var(--ink); }
#psf .psf-gloss-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 4px 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); }
#psf .psf-gloss-btn:hover span { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
#psf .psf-gloss-btn svg { transition: transform .25s; }
#psf .psf-gloss-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
#psf .psf-reg { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--line-soft); }
#psf .psf-reg[hidden] { display: none; }
#psf .psf-reg .psf-regs { columns: 2 320px; column-gap: 48px; display: block; }
#psf .psf-reg .psf-regs li { break-inside: avoid; margin-bottom: 6px; }
#psf .psf-gloss { margin-top: 12px; }
#psf .psf-gloss[hidden] { display: none; }
#psf .psf-gloss-list { columns: 2 320px; column-gap: 48px; border-bottom: 1px solid var(--line-soft); }
#psf .psf-gloss-list div { break-inside: avoid; display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 16px; padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: 15px; line-height: 1.45; }
#psf .psf-gloss-list dt { font-weight: 700; overflow-wrap: anywhere; }
#psf .psf-gloss-note { margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--ink-2); }
#psf .psf-unvalidated { margin-top: 16px; padding: 12px 16px; border-radius: 16px; background: var(--light); font-size: 14px; }
/* ---------- Two columns ---------- */
#psf .psf-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 64px; margin-top: 48px; align-items: start; }
#psf .psf-left { padding-top: 32px; }
#psf .psf-h { font-size: 24px; font-weight: 700; line-height: 1.25; margin-bottom: 4px; }
#psf .psf-sub { font-size: 15px; color: var(--ink-2); margin-bottom: 16px; }
#psf .psf-panel .psf-sub { font-size: 16px; color: var(--ink); }
/* v0.10.10: panel heading as a disclosure button, only while the columns are stacked (script swaps the plain heading for the button). Same look as the glossary toggle. */
#psf .psf-panel-h[data-btn] { font-size: 15px; font-weight: 600; line-height: 1.3; }
#psf .psf-panel-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--ink); }
#psf .psf-panel-btn:hover span { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
#psf .psf-panel-btn svg { transition: transform .25s; }
#psf .psf-panel-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
#psf .psf-panel-body[hidden] { display: none; }
#psf .psf-empty { border-top: 1px solid var(--line-soft); padding: 32px 0 24px; color: var(--ink-2); }
#psf .psf-ghost { border-bottom: 1px solid var(--line-soft); }
#psf .psf-ghost li { display: flex; align-items: center; gap: 16px; min-height: 56px; padding: 12px 0; border-top: 1px solid var(--line-soft); color: var(--ink-2); font-size: 17px; font-weight: 400; }
#psf .psf-ghost li::before { content: ""; width: 12px; height: 12px; margin: 0 4px; border-radius: 3px; transform: rotate(45deg); background: var(--surface); }
/* ---------- Challenges ---------- */
#psf .psf-challenges { border-bottom: 1px solid var(--line-soft); }
#psf .psf-ch { border-top: 1px solid var(--line-soft); }
#psf .psf-ch-btn { display: grid; grid-template-columns: 20px minmax(0, 1fr) 20px; gap: 16px; align-items: center; width: 100%; min-height: 64px; padding: 18px 0; }
#psf .psf-dia { width: 12px; height: 12px; border-radius: 3px; transform: rotate(45deg); background: var(--surface); justify-self: center; transition: background-color .2s; }
#psf .psf-ch[data-open="true"] .psf-ch-btn .psf-dia { background: var(--red); }
#psf .psf-ch-cat { display: block; font-size: 14px; color: var(--ink-2); margin-bottom: 2px; }
#psf .psf-ch-title { display: block; font-size: 17px; font-weight: 600; line-height: 1.3; }
#psf .psf-ch-btn svg { color: var(--ink-2); justify-self: center; transition: transform .25s, color .25s; }
#psf .psf-ch-btn:hover svg, #psf .psf-ch-btn:focus-visible svg { color: var(--ink); }
#psf .psf-ch[data-open="true"] .psf-ch-btn svg { transform: rotate(180deg); }
#psf .psf-ch-body { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .3s ease, visibility 0s linear .3s; }
#psf .psf-ch[data-open="true"] .psf-ch-body { grid-template-rows: 1fr; visibility: visible; transition-delay: 0s; }
#psf .psf-ch-inner { overflow: hidden; }
#psf .psf-ch-content { padding: 0 0 28px 36px; display: grid; gap: 22px; container: psfch / inline-size; }
#psf .psf-label { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
#psf .psf-practice { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
#psf .psf-practice li { background: var(--light); border-radius: 16px; padding: 14px 16px; font-size: 15px; line-height: 1.4; font-weight: 400; }
#psf .psf-tag { display: inline-block; font-size: 15px; background: var(--surface); border-radius: 6px; padding: 3px 10px; text-decoration: none; }
/* Solution chip row (v0.10.5): the single display of the used solutions in an open challenge, at every width. A real list: the six solutions in fixed order (Blue Grey fill = used, dashed Light Grey = not used), then the three foundation chips (always used style) after a slightly wider gap. State text for screen readers sits in .psf-sr. */
/* v0.10.7: visible whenever the columns stack (860px and narrower). The wrapper (heading plus list) is visually hidden with the .psf-sr clip pattern above 860px, so it stays in the accessibility tree and reading order, and being position: absolute it is not a grid item, so the 22px gap leaves no blank row. Shown normally in the 860px container query below. */
#psf .psf-mini-wrap { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
#psf .psf-mini { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
#psf .psf-mini-chip[data-f="first"] { margin-inline-start: 10px; }
#psf .psf-mini-chip { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 1.3; border-radius: 6px; padding: 2px 9px; border: 1px dashed var(--ink-2); background: var(--cap-not-bg); color: var(--ink-2); }
#psf .psf-mini-chip::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 2px; transform: rotate(45deg); background: var(--ink-2); }
#psf .psf-mini-chip[data-used="true"] { border: 1px solid var(--cap-used-border); background: var(--cap-used-bg); color: var(--white); }
#psf .psf-mini-chip[data-used="true"]::before { background: var(--white); }
#psf .psf-mini-chip a.psf-tag { display: inline; font-size: inherit; background: none; border-radius: 0; padding: 0; color: inherit; text-decoration: underline; }
#psf a.psf-tag:hover { background: var(--tag-hover-bg); color: var(--tag-hover-ink); }
#psf .psf-gain { font-size: 18px; line-height: 1.45; font-weight: 600; max-width: 38em; }
/* ---------- Capability panel on the dot grid ---------- */
/* The panel is transparent (dots only). The cards on top use the brand backgrounds: Cool Grey at rest, Primion Blue Grey for
   what the sector or the open challenge uses (white text, no red on Blue Grey), Light Grey for what is not used. */
#psf .psf-panel { position: sticky; top: var(--psf-top, 24px); border-radius: 16px; padding: 32px; background-color: transparent; background-image: radial-gradient(var(--dot) 1.5px, transparent 1.7px); background-size: 16px 16px; background-position: 8px 8px; }
#psf .psf-caps { display: grid; gap: 8px; }
#psf .psf-cap { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 2px 12px; align-items: start; background: var(--surface); border: 2px solid transparent; border-radius: 16px; padding: 13px 16px; transition: background-color .25s, border-color .25s; }
#psf .psf-cap-mark { width: 12px; height: 12px; margin-top: 6px; border-radius: 3px; transform: rotate(45deg); background: var(--ink); justify-self: center; transition: background-color .2s; }
#psf .psf-cap-name { font-size: 17px; font-weight: 600; line-height: 1.3; transition: color .2s; }
#psf .psf-cap-name a { text-decoration: none; }
#psf .psf-cap-name a:hover { text-decoration: underline; text-underline-offset: 3px; }
#psf .psf-cap-desc { grid-column: 2 / 4; font-size: 15px; line-height: 1.45; transition: color .2s; }
#psf .psf-pips { display: flex; gap: 6px; align-items: center; padding-top: 7px; }
#psf .psf-pip { width: 8px; height: 8px; border-radius: 2px; transform: rotate(45deg); border: 1.5px solid var(--ink-2); background: transparent; transition: background-color .2s, border-color .2s; }
#psf .psf-pip[data-on="true"] { background: var(--ink); border-color: var(--ink); }
#psf .psf-pip[data-active="true"] { box-shadow: 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink); }
#psf[data-state="idle"] .psf-pips { display: none; }
/* Chosen sector: used capabilities are Blue Grey with white text and a white diamond */
#psf[data-state="sector"] .psf-cap[data-used="true"] { background: var(--cap-used-bg); border-color: var(--cap-used-border); }
#psf[data-state="sector"] .psf-cap[data-used="true"] .psf-cap-name, #psf[data-state="sector"] .psf-cap[data-used="true"] .psf-cap-desc { color: var(--white); }
#psf[data-state="sector"] .psf-cap[data-used="true"] .psf-cap-mark { background: var(--white); }
#psf[data-state="sector"] .psf-cap[data-used="true"] .psf-pip { border-color: var(--ink-3); }
#psf[data-state="sector"] .psf-cap[data-used="true"] .psf-pip[data-on="true"] { background: var(--white); border-color: var(--white); }
#psf[data-state="sector"] .psf-cap[data-used="true"] .psf-pip[data-active="true"] { box-shadow: 0 0 0 2px var(--cap-used-bg), 0 0 0 3.5px var(--white); }
/* Not used: Light Grey */
#psf[data-state="sector"] .psf-cap[data-used="false"] { background: var(--cap-not-bg); border-color: var(--cap-not-line); border-width: var(--cap-not-bw); padding: calc(15px - var(--cap-not-bw)) calc(18px - var(--cap-not-bw)); }
#psf[data-state="sector"] .psf-cap[data-used="false"] .psf-cap-name, #psf[data-state="sector"] .psf-cap[data-used="false"] .psf-cap-desc { color: var(--ink-2); }
#psf[data-state="sector"] .psf-cap[data-used="false"] .psf-cap-mark { background: var(--ink-2); }
#psf[data-state="sector"] .psf-cap[data-used="false"] .psf-pip[data-active="true"] { box-shadow: 0 0 0 2px var(--cap-not-bg), 0 0 0 3.5px var(--ink-2); }
/* Two groups: solutions (lit per challenge) and the foundation (lit in every challenge). The foundation sits on
   Primion Blue Grey at 80% transparency, as the Marketecture guide sets for affiliation surfaces, so the dots stay visible. */
#psf .psf-group-label { font-size: 15px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; }
#psf .psf-found { margin-top: 24px; padding: 16px 8px 8px; border-radius: 16px; background: linear-gradient(var(--found-tint), var(--found-tint)), var(--found-base); }
#psf .psf-found .psf-group-label { padding: 0 8px; }
#psf[data-state] .psf-cap[data-tier="foundation"] { background: var(--bluegrey); border-color: var(--bluegrey); }
#psf[data-state] .psf-cap[data-tier="foundation"] .psf-cap-name, #psf[data-state] .psf-cap[data-tier="foundation"] .psf-cap-desc { color: var(--white); }
#psf[data-state] .psf-cap[data-tier="foundation"] .psf-cap-mark { background: var(--white); }
#psf[data-state] .psf-cap[data-tier="foundation"] .psf-pip { border-color: var(--white); background: var(--white); }
#psf[data-state] .psf-cap[data-tier="foundation"] .psf-pip[data-active="true"] { box-shadow: 0 0 0 2px var(--bluegrey), 0 0 0 3.5px var(--white); }
/* Legend: each swatch is a small copy of the card it explains */
#psf .psf-key { display: grid; gap: 8px; margin-top: 16px; padding: 16px; border-radius: 16px; background: linear-gradient(var(--found-tint), var(--found-tint)), var(--found-base); box-sizing: border-box; max-width: 100%; font-size: 14px; line-height: 1.35; color: var(--ink); }
#psf .psf-key[hidden], #psf .psf-key-row[hidden] { display: none; }
#psf .psf-key-row { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; }
#psf .psf-key-row > i { position: relative; width: 32px; height: 20px; border-radius: 6px; }
#psf .psf-key-row > i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 2px; transform: rotate(45deg); }
#psf .psf-key .k-used { background: var(--cap-used-bg); box-shadow: inset 0 0 0 2px var(--cap-used-border); }
#psf .psf-key .k-used::after { background: var(--white); }
#psf .psf-key .k-not { background: var(--cap-not-bg); box-shadow: inset 0 0 0 1px var(--line); }
#psf .psf-key .k-not::after { background: var(--ink-2); }
#psf .psf-key .k-pips { display: flex; gap: 6px; align-items: center; padding-left: 2px; }
#psf .psf-key .k-pips .psf-pip { display: block; }
/* ---------- Info box and call-to-action ---------- */
/* The info box row. The CTA bar (.psf-cta) is the next child of #psf, after .psf-end, last in the DOM. No line sits between the info box and the bar; the bar is white with a flush fade strip above it and no line. The 16px bottom padding keeps 24px between the info box and the bar. */
#psf .psf-end { margin-top: 72px; padding-bottom: 16px; }
#psf .psf-info { position: relative; max-width: 560px; background: var(--bluegrey); color: var(--white); border-radius: 16px; padding: 24px 32px 28px; margin: 0 8px 8px 0; font-size: 17px; line-height: 1.45; }
#psf .psf-ib { position: absolute; right: -8px; bottom: -8px; width: 40px; height: 40px; border-radius: 16px; background: var(--bluegrey); box-shadow: 0 0 0 3px var(--bg); display: grid; place-items: center; }
/* Sticky bar: full width, end-aligned buttons, always sticky. */
#psf .psf-cta { position: sticky; bottom: var(--psf-bottom, var(--psf-sticky-bottom, 0px)); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; column-gap: 20px; row-gap: 8px; padding: 12px 0 max(16px, env(safe-area-inset-bottom)); background: var(--bg); }
#psf .psf-cta::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 16px; background: linear-gradient(to top, var(--bar-fade), rgba(36, 58, 77, 0)); pointer-events: none; }
#psf[data-sticky="false"] .psf-cta { position: static; }
#psf[data-sticky="false"] .psf-cta::before { display: none; }
/* v0.10.5: the bar stays sticky at every window height and column width. Only the explicit data-sticky="false" owner switch makes it static (focus scroll-margin follows: 96px while sticky, 0 when static). */
/* Optional glow on the main button, off by default (data-cta-glow="true"). Static, never animated. */
#psf[data-cta-glow="true"] .psf-btn-primary { box-shadow: 0 2px 8px rgba(231, 49, 47, .25); }
#psf .psf-btn { position: relative; max-width: 100%; display: inline-flex; align-items: center; min-height: 40px; padding: 10px 44px 10px 16px; border: 0; border-radius: 100px; font-size: 16px; font-weight: 600; line-height: 16px; text-decoration: none; transition: background-color .2s, color .2s; }
#psf .psf-btn::after { right: 12px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6l-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6l-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
#psf .psf-btn-primary { background: var(--red); color: var(--white); }
#psf .psf-btn-primary::after { background-color: var(--white); }
#psf .psf-btn-primary:hover { background: var(--btn-hover); color: var(--white); }
/* Secondary action: link-only style like the site's "Read more >" */
#psf .psf-btn-secondary { background: transparent; border: 0; color: var(--red); padding: 10px 28px 10px 0; }
#psf .psf-btn-secondary::after { right: 0; background-color: var(--red); transition: background-color .2s, transform .2s; }
#psf .psf-btn-secondary:hover, #psf .psf-btn-secondary:focus-visible { background: transparent; color: var(--ink); }
#psf .psf-btn-secondary:hover::after, #psf .psf-btn-secondary:focus-visible::after { background-color: var(--ink); transform: translateY(-50%) translateX(2px); }
/* ---------- Review mode (copy team only, off by default) ---------- */
#psf .psf-review { display: none; margin-bottom: 32px; border-radius: 16px; padding: 16px 20px; font-size: 14px; background: var(--light); }
#psf[data-review="true"] .psf-review { display: block; }
#psf .psf-review-row { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between; }
#psf .psf-review label { display: inline-flex; gap: 8px; align-items: center; cursor: pointer; }
#psf .psf-review-errors { margin-top: 10px; color: var(--ink); font-weight: 600; }
#psf .psf-review-errors li { margin-top: 4px; }
#psf .psf-review-note { margin-top: 8px; color: var(--ink-2s); }
#psf .psf-claim { text-decoration: underline dotted var(--ink-2); text-decoration-thickness: 2px; text-underline-offset: 4px; }
#psf .psf-claim sup { display: inline-block; margin-left: 3px; font-size: 14px; font-weight: 700; line-height: 0; vertical-align: super; text-decoration: none; color: var(--ink-2s); }
#psf .psf-info .psf-claim { text-decoration-color: var(--white); }
#psf .psf-info .psf-claim sup { color: var(--white); }
#psf .psf-overlong { box-shadow: inset 0 -3px 0 var(--red); }
/* ---------- Entrance ---------- */
#psf .psf-fade { animation: psfIn .35s ease both; }
@keyframes psfIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* ---------- Responsive: follows the width of the host column ---------- */
@container psfch (max-width: 520px) {
  #psf .psf-practice { grid-template-columns: 1fr; gap: 8px; }
}
@container psf (max-width: 860px) {
  #psf .psf-cols { grid-template-columns: 1fr; gap: 48px; }
  #psf .psf-intro { margin-top: 56px; }
  #psf .psf-left { padding-top: 0; }
  #psf .psf-panel { position: static; }
  #psf .psf-mini-wrap { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; }
}
/* v0.10.4 short laptop windows, side by side layout only: the sticky panel is taller than the window, so the descriptions of cards that are not lit (not used, and the foundation) fold up and open on hover or focus. They stay in the accessibility tree (clipped, never display none). Mouse devices only: touch has no hover to open them. */
/* v0.10.10: this rule is no longer limited to short windows or mouse devices. Only active cards show their description: used solutions (data-used true) and the foundation (always active). Cards that are not used (data-used false, only while a challenge is open) fold it and open it on hover or focus. Clipped, never display none, so it stays in the accessibility tree. */
#psf .psf-cap[data-used="false"] .psf-cap-desc { max-height: 0; overflow: hidden; transition: max-height .25s ease, color .2s; }
#psf .psf-cap[data-used="false"]:hover .psf-cap-desc, #psf .psf-cap[data-used="false"]:focus-within .psf-cap-desc { max-height: 8em; }
/* Panel taller than the window even so: the script sets data-tall and the panel scrolls with the page instead of hiding its lower half behind the fold. */
#psf[data-tall="true"] .psf-panel { position: static; }
@container psf (max-width: 560px) {
  #psf .psf-pills { display: none; }
  #psf .psf-select-wrap { display: block; }
  #psf .psf-panel { padding: 20px; }
  #psf .psf-ch-content { padding-left: 0; }
  #psf .psf-info { padding: 20px 24px 24px; }
  #psf .psf-cap { grid-template-columns: 20px minmax(0, 1fr); }
  #psf .psf-pips { grid-column: 2; padding: 4px 0 6px; }
  #psf .psf-found { padding: 16px 4px 4px; }
  #psf .psf-cap-desc { grid-column: 2; }
  #psf .psf-gloss-list div { grid-template-columns: 1fr; gap: 2px; }
}
/* Touch targets (v0.10.4): at least 44px high for coarse pointers; mouse keeps 32px pills and 40px buttons. Heights are set with min-height, so padding, font size and the forced-colours pill padding stay as they are. */
@media (pointer: coarse) {
  #psf .psf-pill { min-height: 44px; }
  #psf .psf-select { height: 44px; min-height: 44px; }
  #psf .psf-btn { min-height: 44px; }
  #psf .psf-gloss-btn, #psf .psf-panel-btn { min-height: 44px; }
  #psf .psf-ch-btn { min-height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  #psf *, #psf *::before, #psf *::after { transition: none !important; animation: none !important; }
}
/* Forced colours (Windows contrast themes): system colours only. Shape and border carry the states, not fill. */
@media (forced-colors: active) {
  #psf .psf-pill { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; }
  #psf .psf-pill:hover, #psf .psf-pill[aria-pressed="true"] { background: Highlight; color: HighlightText; border: 2px solid HighlightText; padding: 2px 15px 2px 11px; }
  #psf .psf-pill:hover .psf-flag, #psf .psf-pill[aria-pressed="true"] .psf-flag { background: HighlightText; }
  #psf .psf-dia { background: Canvas; border: 2px solid CanvasText; box-sizing: border-box; }
  #psf .psf-ch[data-open="true"] .psf-ch-btn .psf-dia { background: Highlight; border-color: Highlight; }
  #psf .psf-cap-mark { background: CanvasText; }
  #psf[data-state="sector"] .psf-cap[data-used="true"] { background: Canvas; border: 3px solid Highlight; }
  #psf[data-state="sector"] .psf-cap[data-used="true"] .psf-cap-name, #psf[data-state="sector"] .psf-cap[data-used="true"] .psf-cap-desc { color: CanvasText; }
  #psf[data-state="sector"] .psf-cap[data-used="true"] .psf-cap-mark { background: Highlight; }
  #psf[data-state="sector"] .psf-cap[data-used="false"] { background: Canvas; border: 2px dashed CanvasText; }
  #psf[data-state="sector"] .psf-cap[data-used="false"] .psf-cap-name, #psf[data-state="sector"] .psf-cap[data-used="false"] .psf-cap-desc { color: CanvasText; }
  #psf[data-state="sector"] .psf-cap[data-used="false"] .psf-cap-mark { background: Canvas; border: 2px solid CanvasText; box-sizing: border-box; }
  #psf[data-state] .psf-cap[data-tier="foundation"] { background: Canvas; border: 2px double CanvasText; }
  #psf[data-state] .psf-cap[data-tier="foundation"] .psf-cap-name, #psf[data-state] .psf-cap[data-tier="foundation"] .psf-cap-desc { color: CanvasText; }
  #psf[data-state] .psf-cap[data-tier="foundation"] .psf-cap-mark { background: CanvasText; }
  #psf .psf-pip, #psf[data-state="sector"] .psf-cap[data-used="true"] .psf-pip, #psf[data-state] .psf-cap[data-tier="foundation"] .psf-pip { background: Canvas; border: 1.5px solid CanvasText; }
  #psf .psf-pip[data-on="true"], #psf[data-state="sector"] .psf-cap[data-used="true"] .psf-pip[data-on="true"], #psf[data-state] .psf-cap[data-tier="foundation"] .psf-pip { background: CanvasText; border-color: CanvasText; }
  #psf .psf-pip[data-active="true"], #psf[data-state="sector"] .psf-cap .psf-pip[data-active="true"], #psf[data-state] .psf-cap[data-tier="foundation"] .psf-pip[data-active="true"] { outline: 2px solid Highlight; outline-offset: 2px; }
  #psf .psf-key .k-used { background: Canvas; border: 3px solid Highlight; box-shadow: none; box-sizing: border-box; }
  #psf .psf-key .k-not { background: Canvas; border: 2px dashed CanvasText; box-shadow: none; box-sizing: border-box; }
  #psf .psf-key .k-used::after { background: Highlight; }
  #psf .psf-key .k-not::after { background: Canvas; border: 1px solid CanvasText; }
  #psf .psf-panel-btn { color: ButtonText; }
  #psf .psf-btn::after, #psf .psf-select-wrap::after { background-color: ButtonText; }
  #psf .psf-btn-primary { background: ButtonFace; color: ButtonText; border: 3px solid Highlight; }
  #psf .psf-btn-primary::after { background-color: ButtonText; }
  #psf .psf-btn-primary:hover, #psf .psf-btn-primary:focus-visible { background: Highlight; color: HighlightText; }
  #psf .psf-btn-primary:hover::after, #psf .psf-btn-primary:focus-visible::after { background-color: HighlightText; }
  #psf .psf-btn-secondary { color: LinkText; }
  #psf .psf-btn-secondary::after { background-color: LinkText; }
  #psf .psf-mini-chip { background: Canvas; color: CanvasText; border: 2px dashed CanvasText; padding: 1px 8px; }
  #psf .psf-mini-chip::before { background: Canvas; border: 1px solid CanvasText; }
  #psf .psf-mini-chip[data-used="true"] { background: Canvas; color: CanvasText; border: 3px solid Highlight; padding: 0 7px; }
  #psf .psf-mini-chip[data-used="true"]::before { background: Highlight; border: 0; }
  #psf .psf-mini-chip[data-f] { border: 2px double CanvasText; padding: 1px 8px; }
  #psf .psf-mini-chip[data-f]::before { background: CanvasText; border: 0; }
}