/* gc-sections.css — shared component kit for sprint-added sections on SEO hub pages (2026-09-09).
   Page-agnostic: inherits the page's font, sizes from em/rem, colours via tokens with brand fallbacks.
   Every component reads correctly with CSS only; gc-sections.js adds tabs, the calculator and bar animation.
   Namespace: .gcs-*  (a page may set --gcs-accent / --gcs-accent-2 / --gcs-ink / --gcs-muted / --gcs-line / --gcs-soft). */
.gcs{--a:var(--gcs-accent,#0f5c47);--a2:var(--gcs-accent-2,#c8532b);--ink:var(--gcs-ink,#1c2430);--mut:var(--gcs-muted,#5f6b78);
  --line:var(--gcs-line,#e3e6e1);--soft:var(--gcs-soft,#f4f6f2);--r:10px;font-family:inherit;color:var(--ink);line-height:1.55;box-sizing:border-box}
.gcs *,.gcs *::before,.gcs *::after{box-sizing:inherit}
.gcs p{margin:0 0 .8em}
:where(.gcs) a{color:var(--gcs-link,var(--a));text-underline-offset:2px;text-decoration-thickness:1px}
.gcs h3{margin:1.4em 0 .5em;font-size:1.15em;line-height:1.3}
/* opt-in only: a default of `inherit` would override the page's own h3 face on every existing section */
.gcs[style*="--gcs-heading-font"] h3{font-family:var(--gcs-heading-font)}
.gcs-src{display:block;margin:.5em 0 1.2em;font-size:.8em;color:var(--mut)}

/* anchored headings on pages that load the kit clear the 56px fixed nav */
h2[id],.gcs[id],section[id]:has(> .gcs){scroll-margin-top:var(--gcs-anchor-offset,116px)}

/* 1. Quick answer */
.gcs-quick{border-left:4px solid var(--a);background:var(--soft);padding:.9em 1.1em;border-radius:0 var(--r) var(--r) 0;margin:0 0 1.4em}
.gcs-quick strong:first-child{color:var(--a)}

/* 2. Stat cards */
.gcs-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin:1em 0 1.4em}
.gcs-stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px 12px}
.gcs-stat b{display:block;font-size:2em;line-height:1;letter-spacing:-.02em;color:var(--a);font-variant-numeric:tabular-nums}
.gcs-stat span{display:block;margin-top:6px;font-size:.88em;color:var(--mut)}
@media (max-width:480px){.gcs-stats{grid-template-columns:1fr 1fr}.gcs-stat:last-child:nth-child(odd){grid-column:1/-1}}

/* 3. Data bars (CSS-only; --v = value, --m = max on the list) */
.gcs-bars{list-style:none;margin:1em 0 .4em;padding:0;--m:100}
.gcs-bars li{display:grid;grid-template-columns:minmax(120px,32%) 1fr auto;gap:10px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
.gcs-bars li:last-child{border-bottom:0}
.gcs-bars .l{font-size:.92em}
.gcs-bars .t{position:relative;height:10px;background:var(--soft);border-radius:5px;overflow:hidden}
.gcs-bars .t::after{content:"";position:absolute;inset:0 auto 0 0;width:calc(var(--v)/var(--m)*100%);background:var(--a);border-radius:5px;transition:width .6s ease}
.gcs-bars li.alt .t::after{background:var(--a2)}
.gcs-bars .v{font-variant-numeric:tabular-nums;font-size:.9em;font-weight:600;min-width:3.5em;text-align:right}
@media (prefers-reduced-motion:reduce){.gcs-bars .t::after{transition:none}}
@media (max-width:480px){.gcs-bars li{grid-template-columns:1fr auto}.gcs-bars .t{grid-column:1/-1;order:3}}

/* 4. Decision ladder (details/summary: interactive without JS) */
.gcs-ladder{margin:1em 0 1.4em;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.gcs-rung{border-top:1px solid var(--line)} .gcs-rung:first-child{border-top:0}
.gcs-rung summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px}
.gcs-rung summary>*{min-width:0}
.gcs-rung summary::-webkit-details-marker{display:none}
.gcs-rung summary:hover{background:var(--soft)}
.gcs-if{font-size:.72em;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.gcs-then{font-weight:600}
.gcs-then em{font-style:normal;color:var(--a)}
.gcs-rung summary::after{content:"+";font-size:1.3em;line-height:1;color:var(--mut);width:1em;text-align:center}
.gcs-rung[open] summary::after{content:"−"}
.gcs-rung > div{padding:0 14px 14px 14px;color:var(--ink)}
@media (max-width:480px){.gcs-rung summary{grid-template-columns:1fr auto}.gcs-if{grid-column:1/-1}}

/* 5. Tabs (JS; without JS every panel shows, stacked, with its heading) */
.gcs-tabs{margin:1em 0 1.4em}
.gcs-tablist{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px;padding:0}
.gcs-tab{appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:6px 14px;font:inherit;font-size:.9em;cursor:pointer;min-height:44px}
.gcs-tab[aria-selected="true"]{background:var(--a);border-color:var(--a);color:#fff}
.gcs-tab:focus-visible{outline:2px solid var(--a2);outline-offset:2px}
.gcs-panel,.gcs .gcs-panel{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;background:#fff;margin-left:0;margin-right:0}
.gcs-panel+.gcs-panel{margin-top:10px}
.gcs-panel>h4{margin:0 0 .5em;font-size:1em}
.gcs-tabs.is-js .gcs-panel[hidden]{display:none} .gcs-tabs.is-js .gcs-panel>h4{display:none} .gcs-tabs:not(.is-js) .gcs-tablist{display:none}

/* 6. Responsive comparison table (stacks at 480 using data-label) */
.gcs-table-wrap{overflow-x:auto;margin:1em 0 1.4em;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.gcs-table{width:100%;border-collapse:collapse;font-size:.92em}
.gcs-table th,.gcs-table td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.gcs-table th{background:var(--soft);font-size:.78em;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.gcs-table tr:last-child td{border-bottom:0}
.gcs-table td:first-child{font-weight:600}
.gcs-table .yes{color:var(--a);font-weight:700} .gcs-table .no{color:var(--a2);font-weight:700}
@media (max-width:480px){
  .gcs-table.stack thead{display:none}
  .gcs-table.stack tr{display:block;padding:8px 0;border-bottom:1px solid var(--line)}
  .gcs-table.stack td{display:grid;grid-template-columns:38% 1fr;gap:8px;border:0;padding:4px 12px}
  .gcs-table.stack td::before{content:attr(data-label);font-size:.75em;letter-spacing:.05em;text-transform:uppercase;color:var(--mut)}
  .gcs-table.stack td:first-child{grid-template-columns:1fr;font-size:1.02em}.gcs-table.stack td:first-child::before{display:none}}

/* 7. Timeline (dates or steps) */
.gcs-timeline{list-style:none;margin:1em 0 1.4em;padding:0;position:relative}
.gcs-timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:var(--line)}
.gcs-timeline li{position:relative;padding:0 0 14px 32px}
.gcs-timeline li::before{content:"";position:absolute;left:3px;top:6px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--a)}
.gcs-timeline li.now::before{background:var(--a2);border-color:var(--a2)}
.gcs-timeline time,.gcs-timeline .when{display:block;font-size:.78em;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);font-weight:700}

/* 8. Calculator (JS; declared formula; without JS it reads as a worked example) */
.gcs-calc{border:1px solid var(--line);border-radius:var(--r);padding:16px;background:#fff;margin:1em 0 1.4em;display:grid;gap:12px}
.gcs-calc label{display:grid;gap:4px;font-size:.9em;color:var(--mut)}
.gcs-calc input,.gcs-calc select{font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:6px;color:var(--ink);width:100%}
.gcs-calc .gcs-out{background:var(--soft);border-radius:8px;padding:12px 14px}
.gcs-calc .gcs-out b{font-size:1.6em;color:var(--a);font-variant-numeric:tabular-nums}
.gcs-calc .gcs-out span{display:block;font-size:.82em;color:var(--mut);margin-top:2px}
.gcs-calc .gcs-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}

/* ===== v2 (2026-09-10, sprint 4): split bar · province tiles · chip filter · readiness check · range strips · shared tooltip =====
   Categorical slots (validated light palette, adjacent pairs pass CVD + normal-vision floors; slots 3–5 sit under 3:1 on white,
   so every split ships a text legend with the values — the relief rule). Colour follows the ENTITY (data-s), never the rank. */
.gcs{--s1:#2a78d6;--s2:#eb6834;--s3:#1baf7a;--s4:#eda100;--s5:#e87ba4;--s6:#008300}
.gcs [data-s="1"]{--sc:var(--s1)} .gcs [data-s="2"]{--sc:var(--s2)} .gcs [data-s="3"]{--sc:var(--s3)}
.gcs [data-s="4"]{--sc:var(--s4)} .gcs [data-s="5"]{--sc:var(--s5)} .gcs [data-s="6"]{--sc:var(--s6)}

/* 9. Split bar (100% stacked proportion; CSS-only; 2px surface gap between segments) */
.gcs-split{margin:1em 0 1.4em}
.gcs-split-bar{display:flex;gap:2px;height:16px;border-radius:5px;overflow:hidden;background:#fff}
.gcs-split-bar>span{flex:var(--p) 1 0;min-width:3px;background:var(--sc,var(--a));transition:opacity .15s}
.gcs-split-key{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(172px,1fr));gap:6px 14px;font-size:.9em}
.gcs-split-key li{display:flex;align-items:baseline;gap:7px;min-width:0;border-radius:6px;padding:2px 4px;outline:0}
.gcs-split-key li::before{content:"";flex:0 0 10px;height:10px;border-radius:50%;background:var(--sc,var(--a));transform:translateY(1px)}
.gcs-split-key b{font-variant-numeric:tabular-nums}
.gcs-split-key small{color:var(--mut);font-variant-numeric:tabular-nums;margin-left:2px}
.gcs-split.is-hl .gcs-split-bar>span:not(.on){opacity:.28}
.gcs-split.is-hl .gcs-split-key li:not(.on){opacity:.45}
.gcs-split-key li:focus-visible{outline:2px solid var(--a2);outline-offset:1px}

/* 10. Province tile map (sequential: ONE hue = the page accent, light -> dark; tiles are links) */
.gcs-tiles{margin:1em 0 1.4em}
.gcs-tile-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;max-width:560px}
.gcs-tile{--t:14%;aspect-ratio:1/1;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:8px;text-decoration:none;
  background:color-mix(in oklab,var(--a) var(--t),#fff);color:var(--ink);border:1px solid color-mix(in oklab,var(--a) 22%,#fff);min-width:0;line-height:1.1;transition:transform .12s}
.gcs-tile b{font-size:.95em;letter-spacing:.02em}
.gcs-tile span{font-size:.78em;font-variant-numeric:tabular-nums;opacity:.9}
.gcs-tile.dk{color:#fff;border-color:transparent}
a.gcs-tile:hover{transform:translateY(-2px)}
.gcs-tile:focus-visible{outline:2px solid var(--a2);outline-offset:2px}
.gcs-tile[data-col="1"]{grid-column:1}.gcs-tile[data-col="2"]{grid-column:2}.gcs-tile[data-col="3"]{grid-column:3}.gcs-tile[data-col="4"]{grid-column:4}
.gcs-tile[data-col="5"]{grid-column:5}.gcs-tile[data-col="6"]{grid-column:6}.gcs-tile[data-col="7"]{grid-column:7}
.gcs-tile[data-row="1"]{grid-row:1}.gcs-tile[data-row="2"]{grid-row:2}.gcs-tile[data-row="3"]{grid-row:3}
.gcs-tiles-legend{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:.78em;color:var(--mut)}
.gcs-tiles-legend i{display:block;width:120px;height:8px;border-radius:4px;background:linear-gradient(90deg,color-mix(in oklab,var(--a) 14%,#fff),var(--a))}
@media (max-width:480px){.gcs-tile-grid{gap:3px}.gcs-tile b{font-size:.82em}.gcs-tile span{font-size:.7em}}

/* 11. Chip filter over a list (JS; without JS every item shows and the chips are hidden) */
.gcs-filter{margin:1em 0 1.4em}
.gcs-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.gcs-chip{appearance:none;border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:999px;padding:6px 13px;font:inherit;font-size:.88em;cursor:pointer;min-height:44px}
.gcs-chip[aria-pressed="true"]{background:var(--a);border-color:var(--a);color:#fff}
.gcs-chip:focus-visible{outline:2px solid var(--a2);outline-offset:2px}
.gcs-filter:not(.is-js) .gcs-chips,.gcs-filter:not(.is-js) .gcs-count{display:none}
.gcs-count{font-size:.8em;color:var(--mut);margin:0 0 8px}
.gcs-items{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.gcs-items>li{border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:#fff;min-width:0}
.gcs-items>li>strong,.gcs-items>li>a:first-child{display:block;font-weight:700;margin-bottom:3px}
.gcs-items .m{display:block;font-size:.84em;color:var(--mut)}
.gcs-items .tag{display:inline-block;font-size:.72em;letter-spacing:.05em;text-transform:uppercase;font-weight:700;color:var(--a);margin-bottom:4px}
.gcs-items>li[hidden]{display:none}

/* 12. Readiness check (JS scores it; without JS it is a plain checklist) */
.gcs-check{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:14px 16px;margin:1em 0 1.4em}
.gcs-check>ul{list-style:none;margin:0 0 10px;padding:0}
.gcs-check>ul>li{border-bottom:1px solid var(--line)} .gcs-check>ul>li:last-child{border-bottom:0}
.gcs-check label{display:flex;gap:10px;align-items:flex-start;padding:9px 2px;cursor:pointer;min-height:44px}
.gcs-check input{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;accent-color:var(--a)}
.gcs-check-out{background:var(--soft);border-radius:8px;padding:10px 12px}
.gcs-check-out b{display:block;font-variant-numeric:tabular-nums;color:var(--a)}
.gcs-check-out .mtr{height:6px;border-radius:3px;background:#fff;overflow:hidden;margin:6px 0 8px}
.gcs-check-out .mtr i{display:block;height:100%;width:var(--done,0%);background:var(--a);transition:width .25s}
.gcs-check:not(.is-js) .gcs-check-out{display:none}
.gcs-check-out [data-min][hidden]{display:none}

/* 13. Range strips (log scale; published min–max per programme; JS places the marks, text carries the values) */
.gcs-range{margin:1em 0 1.4em}
.gcs-range ul{list-style:none;margin:0;padding:0}
.gcs-range ul{display:grid;grid-template-columns:minmax(120px,32%) minmax(0,1fr) max-content;column-gap:10px}
.gcs-range li{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;padding:6px 0;border-bottom:1px solid var(--line)}
@supports not (grid-template-columns:subgrid){.gcs-range ul{display:block}.gcs-range li{grid-template-columns:minmax(120px,32%) minmax(0,1fr) 8.5em;gap:10px}}
.gcs-range li:last-child{border-bottom:0}
.gcs-range .l{font-size:.92em;min-width:0;overflow-wrap:anywhere}
.gcs-range .t{position:relative;height:12px}
.gcs-range .t::before{content:"";position:absolute;left:0;right:0;top:5px;height:2px;background:var(--line)}
.gcs-range .t i{position:absolute;top:1px;height:10px;left:var(--x0,0%);width:max(10px,calc(var(--x1,0%) - var(--x0,0%)));background:var(--a);border-radius:5px}
.gcs-range li.max .t i{width:10px;border-radius:50%;transform:translateX(-5px);left:var(--x1,0%)}
.gcs-range .v{font-size:.88em;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.gcs-axis{position:relative;height:18px;margin:2px 0 0 calc(min(32%,100%) + 10px);margin-right:calc(4.5em + 10px);font-size:.72em;color:var(--mut)}
.gcs-axis span{position:absolute;transform:translateX(-50%);white-space:nowrap}
.gcs-axis span:first-child{transform:none}.gcs-axis span:last-child{transform:translateX(-100%)}
.gcs-range:not(.is-js) .t,.gcs-range:not(.is-js) .gcs-axis{visibility:hidden}
@media (max-width:480px){.gcs-range ul{display:block}.gcs-range li{grid-template-columns:minmax(0,1fr) auto;gap:10px}.gcs-range .t{grid-column:1/-1;order:3}.gcs-axis{margin-left:0;margin-right:0}}

/* shared tooltip (hover-capable pointers only; touch reads the printed values) */
.gcs-tip{position:fixed;z-index:60;pointer-events:none;background:#1c2430;color:#fff;font-size:12.5px;line-height:1.35;padding:6px 9px;border-radius:6px;max-width:260px;box-shadow:0 4px 14px rgba(0,0,0,.18);opacity:0;transition:opacity .1s}
.gcs-tip.on{opacity:1}