/* =====================================================================================
   Switch Smart Electrical: areas group (areas.css)
   /areas, /electrician-sandhurst, /electrician-camberley, /electrician-bracknell,
   /electrician-ascot and /wiring-check. Linked only from those pages, after site.css.
   Builds on the shared tokens and components; nothing here restyles a shared class outside
   these pages' own blocks.

    1 radial map (.amap, generated by _src/art/areas/make_maps.py)
    2 postcode checker (.pcx) + result (.pcr)
    3 areas hub (.ahero, .places table, councils)
    4 town pages (.tmap section, area sheet)
    5 town figures (cable sections, floor section, ring, long run)
    6 wiring check (.wc)
   ===================================================================================== */

/* ------------------------------------------------------------------ 1 radial map */
.amap { --am-bg: var(--card); --am-hl: var(--red); max-width: 720px; margin-inline: auto; }
:is(.theme-ink, .theme-ink2) .amap { --am-bg: var(--ink); --am-hl: var(--red-l); }
.theme-ink2 .amap { --am-bg: var(--ink-2); }
.amap text { paint-order: stroke; stroke: var(--am-bg); stroke-width: 5px; stroke-linejoin: round; }
.amap .am-ring { fill: none; stroke: var(--dg-ink); stroke-width: 1; opacity: .3; }
.amap .am-ring--outer { stroke-width: 1.4; opacity: .55; }
.amap .am-tick { fill: none; stroke: var(--dg-ink); stroke-width: 1.2; opacity: .45; }
.amap .am-north { opacity: .7; }
.amap .am-cmp { fill: var(--dg-ink); font: 600 14px/1 var(--f-mono); letter-spacing: .04em; opacity: .75; }
.amap .am-ring-l { fill: var(--dg-ink); font: 500 11.5px/1 var(--f-mono); letter-spacing: .12em; opacity: .7; }
.amap .am-county { fill: var(--dg-ink); font: 500 11px/1 var(--f-mono); letter-spacing: .34em; opacity: .45; }
.amap .pl__dot { fill: var(--dg-ink); transition: fill .3s; }
.amap .pl__name { fill: var(--dg-ink); font: 500 14.5px/1 var(--f-text); transition: fill .3s; }
.amap .pl--also .pl__name { opacity: .86; }
.amap .pl--ward .pl__name { font-weight: 600; }
.amap .pl--main { cursor: pointer; outline: none; }
.amap .pl--main .pl__ring { fill: var(--am-bg); stroke: var(--dg-ink); stroke-width: 1.6; transition: stroke .3s, stroke-width .3s; }
.amap .pl--main .pl__name { font: 700 21px/1 var(--f-display); font-stretch: var(--display-stretch); letter-spacing: -.01em; }
.amap .pl__pc { fill: var(--dg-ink); font: 500 11.5px/1 var(--f-mono); letter-spacing: .1em; opacity: .7; }
.amap .pl__arrow { fill: var(--dg-ink); }
.amap a.pl--main:hover .pl__ring, .amap a.pl--main:focus-visible .pl__ring, .amap .pl.is-hl .pl__ring { stroke: var(--am-hl); stroke-width: 2.4; }
.amap a.pl--main:hover .pl__name, .amap a.pl--main:focus-visible .pl__name, .amap .pl.is-hl .pl__name { fill: var(--am-hl); }
.amap .pl.is-hl .pl__dot, .amap a.pl--main:focus-visible .pl__dot { fill: var(--red); }
.amap .pl.is-hl .pl__arrow { fill: var(--am-hl); }
.amap a.pl--main:focus-visible .pl__ring { stroke-width: 3.5; }
.amap .pl.is-dim { opacity: .45; }
.amap .pl__lab--m { display: none; }
.amap .am-spoke__ln { fill: none; stroke: var(--am-hl); stroke-width: 2.2; stroke-linecap: round; }
.amap .am-spoke__l { fill: var(--am-hl); font: 600 12.5px/1 var(--f-mono); letter-spacing: .06em; }
.amap .am-spoke.is-off { opacity: 0; }
.amap .am-base__pulse { fill: var(--red); opacity: 0; transform-box: fill-box; transform-origin: center; }
.amap.is-drawn .am-base__pulse { animation: am-pulse 2.8s var(--ease-out) .4s infinite; }
@keyframes am-pulse { 0% { transform: scale(.7); opacity: .34; } 70%, 100% { transform: scale(2); opacity: 0; } }
.amap .am-base__disc { fill: var(--am-bg); stroke: var(--dg-ink); stroke-width: 1.4; }
.amap .am-base.is-hl .am-base__disc { stroke: var(--am-hl); stroke-width: 2.4; }
.amap .am-base__mark { fill: var(--red); }
:is(.theme-ink, .theme-ink2) .amap .am-base__mark { fill: var(--red-l); }
.amap .am-base__name { fill: var(--dg-ink); font: 700 14px/1 var(--f-mono); letter-spacing: .16em; }
.amap .am-base.is-hl .am-base__name { fill: var(--am-hl); }
.amap .am-base__sub { fill: var(--dg-ink); font: 500 10.5px/1 var(--f-mono); letter-spacing: .14em; opacity: .7; }
/* the plotted postcode (areas.js) */
.amap .am-pc__ln { fill: none; stroke: var(--am-hl); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 2 7; }
.amap .am-pc__ring { fill: none; stroke: var(--am-hl); stroke-width: 2; }
.amap .am-pc__dot { fill: var(--red); }
.amap .am-pc__l { fill: var(--am-hl); font: 700 13px/1 var(--f-mono); letter-spacing: .06em; }
.amap .am-pc__s { fill: var(--dg-ink); font: 500 11px/1 var(--f-mono); letter-spacing: .06em; opacity: .8; }
.amap .am-pc__halo { fill: var(--red); opacity: .16; }
.amap .am-pc.is-in { animation: am-pc-in .6s var(--ease-out); }
@keyframes am-pc-in { from { opacity: 0; } }
@media (max-width: 640px) {
  .amap text { stroke-width: 8px; }
  .amap .pl--also .pl__name, .amap .am-county, .amap .pl__lab--d { display: none; }
  .amap .pl__lab--m { display: inline; }
  .amap .pl__name { font-size: 25px; }
  .amap .pl--main .pl__name { font-size: 34px; }
  .amap .pl__pc { font-size: 19px; }
  .amap .am-ring-l { font-size: 19px; }
  .amap .am-cmp { font-size: 24px; }
  .amap .am-base__name { font-size: 22px; }
  .amap .am-base__sub { font-size: 17px; }
  .amap .am-spoke__l { display: none; }
  .amap .am-pc__lab { display: none; }
  .amap .pl__dot { r: 6px; }
  .amap .pl--main .pl__dot { r: 7px; }
  .amap .pl--main .pl__ring { r: 15px; }
}

/* ------------------------------------------------------------------ 2 postcode checker + result */
.pcx { display: grid; gap: 10px; max-width: 560px; }
.pcx__label { font: 500 .75rem/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
:is(.theme-ink, .theme-ink2) .pcx__label { color: var(--on-ink-3); }
.pcx__row { display: flex; gap: 10px; align-items: flex-start; }
.pcx__input { flex: 1 1 auto; min-width: 0; min-height: 52px; font: 500 1.125rem/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
.pcx__input::placeholder { text-transform: none; letter-spacing: .04em; }
:is(.theme-ink, .theme-ink2) .pcx__input { background: var(--ink-2); color: var(--on-ink); border-color: rgba(255, 255, 255, .34); }
:is(.theme-ink, .theme-ink2) .pcx__input::placeholder { color: rgba(242, 239, 233, .45); }
:is(.theme-ink, .theme-ink2) .pcx__input:hover { border-color: rgba(255, 255, 255, .6); }
:is(.theme-ink, .theme-ink2) .pcx__input:focus { background: var(--ink-3); border-color: var(--on-ink); box-shadow: 0 0 0 4px rgba(242, 86, 108, .28); }
.pcx .btn { flex: none; }
.pcx.is-busy .btn { opacity: .75; pointer-events: none; }
.pcx.is-invalid .pcx__input { border-color: var(--red); }
:is(.theme-ink, .theme-ink2) .pcx.is-invalid .pcx__input { border-color: var(--red-l); }
.pcx__hint { font-size: var(--fs-small); color: var(--text-3); margin: 0; }
:is(.theme-ink, .theme-ink2) .pcx__hint { color: var(--on-ink-3); }
html.js .pcx__nojs { display: none; }
.pcx__err { display: flex; gap: 8px; align-items: baseline; margin: 0; font-size: .9375rem; font-weight: 600; color: var(--red); }
.pcx__err::before { content: "!"; flex: none; display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: currentColor; font: 700 .6875rem/1 var(--f-mono); color: var(--ink); transform: translateY(2px); }
:is(.theme-ink, .theme-ink2) .pcx__err { color: var(--red-l); }
.pcx__out { margin-top: 18px; max-width: 560px; }
.pcr { animation: pcr-in .5s var(--ease-out); }
@keyframes pcr-in { from { opacity: 0; transform: translateY(8px); } }
.pcr .spec__head span:last-child { text-transform: none; letter-spacing: .02em; text-align: right; }
.pcr__verdict { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 16px 18px 14px; border-bottom: 1px solid var(--rule); font: 650 1.25rem/1.25 var(--f-display); font-stretch: var(--display-stretch); }
:is(.theme-ink, .theme-ink2) .pcr__verdict { border-bottom-color: var(--rule-ink); }
.pcr__verdict svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--red); }
:is(.theme-ink, .theme-ink2) .pcr__verdict svg { color: var(--red-l); }
.pcr .spec__row { grid-template-columns: minmax(0, 128px) minmax(0, 1fr); }
.pcr .spec__row dd small { display: block; margin-top: 3px; font-size: .8438rem; font-weight: 400; line-height: 1.45; color: var(--text-3); }
:is(.theme-ink, .theme-ink2) .pcr .spec__row dd small { color: var(--on-ink-3); }
.pcr .spec__row dd .mono { margin-left: 4px; color: inherit; opacity: .8; }
.pcr__acts { padding: 14px 18px 4px; border-top: 1px solid var(--rule); }
:is(.theme-ink, .theme-ink2) .pcr__acts { border-top-color: var(--rule-ink); }
.pcr__acts .btn { max-width: 100%; white-space: normal; text-align: left; }
@media (max-width: 420px) { .pcr .spec__row { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* ------------------------------------------------------------------ 3 areas hub */
.ahero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; }
.ahero__check { margin-top: 6px; }
.ahero__towns { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 470px; }
.ahero__towns .town { width: 100%; }
.ahero__map { margin: 0; display: grid; gap: 14px; }
.amap-cap { display: flex; gap: 6px 14px; align-items: baseline; max-width: 620px; margin-inline: auto; font-size: var(--fs-small); line-height: 1.5; color: var(--text-3); }
.amap-cap .fig__n { flex: none; }
:is(.theme-ink, .theme-ink2) .amap-cap { color: var(--on-ink-3); }
:is(.theme-ink, .theme-ink2) .amap-cap .fig__n { color: var(--on-ink); box-shadow: inset 0 0 0 1px var(--rule-ink-2); }
@media (max-width: 999px) { .ahero__grid { grid-template-columns: minmax(0, 1fr); } .ahero__map { margin-top: 12px; } }
.atown__meta { margin: 20px 0 18px; }
.atown__meta li { white-space: normal; }
.also { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: 40px clamp(32px, 5vw, 80px); align-items: start; }
@media (max-width: 999px) { .also { grid-template-columns: minmax(0, 1fr); } }
.places th[scope="row"] { font-weight: 600; color: var(--text); }
.places td:nth-child(4) { color: var(--text-2); }
.places .num { text-align: right; }
.places thead th:nth-child(5) { text-align: right; }
.places tbody tr { transition: background-color var(--t-fast); }
.places tbody tr:hover { background: var(--paper-2); }
@media (max-width: 560px) {
  .places { font-size: .875rem; }
  .places th, .places td { padding: 8px 6px; }
  .places .places__brg { display: none; }
}
.councils { list-style: none; display: grid; margin-top: 24px; border-top: 1.5px solid var(--text); }
.councils li { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.councils__k { font: 500 .75rem/1.35 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.councils__v { color: var(--text-2); }
.councils__v b { color: var(--text); font-weight: 600; }
.card--ink { background: var(--ink); color: var(--on-ink); box-shadow: 0 0 0 1px var(--ink); }
.card--ink .card__d { color: var(--on-ink-2); }
.card--ink .card__n { color: var(--on-ink-3); }
.card--ink .led { background: rgba(255, 255, 255, .16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.card--ink .card__go svg { color: var(--red-l); }
a.card--ink:hover { box-shadow: 0 0 0 1.5px var(--ink), var(--shadow-2); }

/* ------------------------------------------------------------------ 4 town pages */
.tsheet .spec__row { grid-template-columns: minmax(0, 104px) minmax(0, 1fr) 18px; }
@media (max-width: 420px) { .tsheet .spec__row { grid-template-columns: minmax(0, 1fr) 18px; } }
.tmap__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 40px clamp(32px, 5vw, 80px); align-items: center; }
.tmap__fig .fig__frame { padding: clamp(10px, 2vw, 24px); }
.tmap__side .h2 { margin-bottom: 18px; }
.tmap__more { margin-top: 26px; }
@media (max-width: 999px) { .tmap__grid { grid-template-columns: minmax(0, 1fr); } .tmap__side { order: -1; } }
/* town figure: drawing beside its key, stacked on narrow screens */
.tfig__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 44px); align-items: center; }
.tfig__art { display: grid; gap: 10px; min-width: 0; }
.tfig__key { min-width: 0; }
.tfig__key .chart td { font-size: .875rem; line-height: 1.4; }
@media (max-width: 899px) { .tfig__grid { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------------ 5 town figures */
/* fills in cable colours (diagrams only), extra strokes, square warning balloons */
.dgm .ff-line { fill: var(--c-line); }
.dgm .ff-neutral { fill: var(--c-neutral); }
.dgm .ff-old-line { fill: var(--red); }
.dgm .ff-old-neutral { fill: #1E1F22; }
.dgm .ff-copper { fill: var(--c-copper); }
.dgm .ff-sheath { fill: #C9CDD1; }
.dgm .ff-rubber { fill: #3A3B3F; }
:is(.theme-ink, .theme-ink2) .dgm .ff-sheath { fill: #6E747A; }
.dgm .crk { fill: none; stroke: #F5F2EC; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.dgm .vd-swa { fill: none; stroke: var(--dg-dark); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.dgm .vd-good { fill: none; stroke: var(--dg-ink); stroke-width: 2.6; stroke-linecap: round; }
.dgm .vd-bad { fill: none; stroke: var(--red); stroke-width: 2.6; stroke-linecap: round; }
.dgm .vd-limit { fill: none; stroke: var(--dg-ink); stroke-width: 1.4; stroke-dasharray: 7 6; opacity: .7; }
.dgm .bal rect { fill: var(--dg-card); stroke: var(--dg-ink); stroke-width: 1.6; }
.dgm .bal--sq rect { stroke: var(--red); stroke-width: 2; }
.dgm .bal--sq text { fill: var(--red); }
html.js:not(.ss-reduced) .dgm[data-draw]:not(.is-drawn) :is(.ff-line, .ff-neutral, .ff-old-line, .ff-old-neutral, .ff-copper, .ff-sheath, .ff-rubber, .bal rect) { fill-opacity: 0; }
html.js .dgm[data-draw] :is(.ff-line, .ff-neutral, .ff-old-line, .ff-old-neutral, .ff-copper, .ff-sheath, .ff-rubber, .bal rect) { transition: fill-opacity .8s var(--ease-out) .05s; }
.key__b--warn { box-shadow: inset 0 0 0 2px var(--red); color: var(--red); border-radius: 5px; }

/* ------------------------------------------------------------------ 6 wiring check */
.wc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 40px clamp(32px, 5vw, 72px); align-items: start; }
html:not(.js) .wc, html.ss-failsafe .wc:not(.is-live) { display: none; }
html.js .wc-nojs { display: none; }
html.ss-failsafe .wc:not(.is-live) + .wc-nojs { display: block; }
html.js .wc:not(.is-live) .wc-step + .wc-step { display: none; }
.wc__main { min-width: 0; }
.wc__aside { position: sticky; top: calc(var(--header-h) + 28px); }
@media (max-width: 999px) { .wc { grid-template-columns: minmax(0, 1fr); } .wc__aside { position: static; } }
.wc__top .h2 { margin-bottom: 28px; }
/* progress: a length of cable that fills with red as you answer */
.wc-rail { position: relative; display: flex; justify-content: space-between; align-items: center; max-width: 560px; height: 30px; margin-bottom: 12px; }
.wc-rail__bar { position: absolute; left: 15px; right: 15px; top: 50%; height: 8px; margin-top: -4px; border-radius: 4px; background: linear-gradient(180deg, #B9BEC3, var(--c-sheath) 45%, #80868C); }
.wc-rail__fill { position: absolute; left: 0; top: 2px; bottom: 2px; width: calc(var(--p, 0) * 100%); border-radius: 3px; background: var(--red); box-shadow: 0 0 10px var(--red-glow); transition: width .6s var(--ease-out); }
.wc-rail__n { position: relative; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 1.5px var(--rule-2); font: 500 .75rem/1 var(--f-mono); color: var(--text-3); transition: background-color .3s, color .3s, box-shadow .3s; }
.wc-rail__n svg { width: 14px; height: 14px; }
.wc-rail__n.is-on { color: var(--text); box-shadow: inset 0 0 0 2px var(--text); }
.wc-rail__n.is-done { background: var(--red); color: #fff; box-shadow: 0 0 0 3px rgba(196, 18, 48, .16); }
.wc__top { margin-bottom: 24px; }
.wc__count { margin: 0; font: 500 .75rem/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.wc-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.wc-step:focus { outline: none; }
.wc-step:focus-visible { outline: 3px solid var(--red); outline-offset: 10px; border-radius: 6px; }
.wc-step__q { display: block; padding: 0; margin: 0 0 10px; }
.wc-step__q .h3 { display: block; max-width: 30ch; }
.wc-step__n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wc-step__hint { max-width: 60ch; margin: 0 0 22px; color: var(--text-2); }
.wc-opts { display: grid; gap: 12px; grid-template-columns: repeat(var(--c, 2), minmax(0, 1fr)); }
.wc-opts--3 { --c: 3; }
.wc-opts--4 { --c: 4; }
@media (max-width: 1179px) { .wc-opts--4 { --c: 2; } }
@media (max-width: 760px) { .wc-opts--3 { --c: 1; } }
@media (max-width: 520px) { .wc-opts--2 { --c: 1; } }
.wc-opt { position: relative; display: block; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.wc-opt__in { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.wc-opt__box {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; height: calc(100% - 3px); min-height: 70px;
  padding: 15px 18px; border-radius: var(--r-2); background: var(--card); box-shadow: inset 0 0 0 1.5px var(--rule-2), 0 3px 0 var(--rule-2);
  transition: box-shadow .2s var(--ease-out), transform .25s var(--ease-snap), background-color .2s;
}
.wc-opt:hover .wc-opt__box { box-shadow: inset 0 0 0 1.5px var(--text-2), 0 3px 0 var(--rule-2); background: #fff; }
.wc-opt:active .wc-opt__box { transform: translateY(3px); box-shadow: inset 0 0 0 1.5px var(--text-2), 0 0 0 var(--rule-2); transition-duration: .05s; }
.wc-opt__in:checked + .wc-opt__box { transform: translateY(2px); background: #fff; box-shadow: inset 0 0 0 2px var(--text), 0 1px 0 var(--text); }
.wc-opt__in:focus-visible + .wc-opt__box { outline: 3px solid var(--red); outline-offset: 3px; }
.wc-step.is-err .wc-opt__box { box-shadow: inset 0 0 0 1.5px var(--red), 0 3px 0 var(--rule-2); }
.wc-opt__k { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--text-2); font: 600 .75rem/1 var(--f-mono); color: var(--text-2); transition: background-color .2s, color .2s; }
.wc-opt__in:checked + .wc-opt__box .wc-opt__k { background: var(--text); color: var(--card); box-shadow: none; }
.wc-opt__cb { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px var(--field); color: #fff; transition: background-color .2s, box-shadow .2s; }
.wc-opt__cb svg { width: 15px; height: 15px; opacity: 0; transform: scale(.5); transition: opacity .2s, transform .25s var(--ease-snap); }
.wc-opt__in:checked + .wc-opt__box .wc-opt__cb { background: var(--red); box-shadow: none; }
.wc-opt__in:checked + .wc-opt__box .wc-opt__cb svg { opacity: 1; transform: none; }
.wc-opt__txt { min-width: 0; }
.wc-opt__t { display: block; font: 650 1.0625rem/1.3 var(--f-display); font-stretch: var(--display-stretch); color: var(--text); }
.wc-opt__d { display: block; margin-top: 3px; font-size: .875rem; line-height: 1.4; color: var(--text-3); }
.wc-opt__led { width: 8px; height: 8px; }
.wc-opt__in:checked + .wc-opt__box .wc-opt__led { background: var(--red); box-shadow: 0 0 0 3px rgba(196, 18, 48, .16), 0 0 12px 1px var(--red-glow); }
.wc-opt--art .wc-opt__box { grid-template-columns: auto minmax(0, 1fr); align-items: start; align-content: start; padding: 12px 14px 15px; }
.wc-opt--art .wc-opt__led { position: absolute; top: 20px; right: 22px; }
.wc-opt__art { grid-column: 1 / -1; display: block; margin: 0 -4px 6px; padding: 8px; border-radius: 6px; background-color: var(--paper); background-image: var(--grid-paper); background-size: 16px 16px; }
.wc-opt__art svg { width: 100%; max-width: 230px; height: auto; margin-inline: auto; }
.wc-opt--art .wc-opt__k { margin-top: 1px; }
@media (max-width: 520px) {
  .wc-opt--art .wc-opt__box { grid-template-columns: minmax(0, 1fr); padding: 10px 12px 14px; }
  .wc-opt--art .wc-opt__k { display: none; }
  .wc-opt--art .wc-opt__led { top: 16px; right: 18px; }
  .wc-opt--art .wc-opt__t { font-size: 1rem; }
}
.wc-step__err { display: flex; gap: 8px; align-items: baseline; margin: 16px 0 0; font-weight: 600; color: var(--red); }
.wc__nav { margin-top: 30px; }
/* the running answer sheet */
.wc-sheet .spec__row { grid-template-columns: minmax(0, 86px) minmax(0, 1fr) 18px; }
.wc-sheet .spec__row:not(.is-set) dd { font-weight: 400; color: var(--text-3); }
.wc-sheet .spec__tick { transition: opacity .3s var(--ease-out), transform .45s var(--ease-snap); }
.wc-sheet .spec__row:not(.is-set) .spec__tick { opacity: 0; transform: scale(.4); }
.wc-sheet .spec__row.is-warn dd { color: var(--red); }
@media (max-width: 420px) { .wc-sheet .spec__row { grid-template-columns: minmax(0, 1fr) 18px; } }
/* result */
.wc.has-result .wc__count { display: none; }
.wc-res__head .eyebrow { margin-bottom: 14px; }
.wc-res__head .h2 { margin-bottom: 16px; max-width: 18ch; }
.wc-res__head .h2:focus { outline: none; }
.wc-res__head--ok .led--on { background: var(--c-earth) !important; box-shadow: 0 0 0 3px rgba(62, 142, 79, .18) !important; }
.wc-stop { margin: 26px 0 0; padding: 18px 20px; border-radius: var(--r-2); background: var(--ink); color: var(--on-ink-2); }
.wc-stop__h { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 650 1.125rem/1.3 var(--f-display); font-stretch: var(--display-stretch); color: var(--on-ink); }
.wc-stop p:last-child { margin: 0; }
.wc-stop .tel { color: var(--on-ink); text-decoration: underline; text-decoration-color: var(--red-l); text-underline-offset: .2em; }
.wc-res__rows { margin-top: 28px; border-top: 1.5px solid var(--text); }
.wc-res__row { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: 6px 24px; padding: 14px 0; border-bottom: 1px solid var(--rule); }
.wc-res__row dt { padding-top: 3px; font: 500 .75rem/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.wc-res__row dd { color: var(--text-2); }
.wc-res__row.is-warn dt { color: var(--red); }
@media (max-width: 640px) { .wc-res__row { grid-template-columns: minmax(0, 1fr); } }
.wc-res__svc { margin-top: 32px; }
.wc-res__k { margin: 0 0 12px; font: 500 .75rem/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.wc-svc { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .wc-svc { grid-template-columns: minmax(0, 1fr); } }
.wc-res__note { margin-top: 28px; padding: 16px 18px; border-radius: var(--r-2); background: var(--paper-2); box-shadow: inset 3px 0 0 var(--red); font-size: var(--fs-small); color: var(--text-2); }
.wc-res__note b { color: var(--text); }
.wc-res__acts { margin-top: 28px; }
.wc-res__again { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 16px; }
.wc-res__btn { padding: 4px 0; border: 0; background: none; font: 600 .9375rem/1.4 var(--f-text); cursor: pointer; }
.wc-nojs { max-width: 760px; }
/* the four boards, explained */
.wcb { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.5vw, 32px); }
@media (max-width: 899px) { .wcb { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wcb__item { display: grid; gap: 10px; align-content: start; min-width: 0; }
.wcb__d { margin: 0; font-size: .875rem; line-height: 1.45; color: var(--text-2); }
/* very narrow phones */
@media (max-width: 400px) {
  .places th:nth-child(3), .places td:nth-child(3) { display: none; }
  .places th, .places td { padding: 8px 5px; }
}
@media (max-width: 359px) {
  .towns { grid-template-columns: minmax(0, 1fr); }   /* shared chips do not fit two across at 320px */
}