/* =====================================================================================
   services-a: /rewires, /eicr, /fault-finding, /lighting
   Extra diagram classes (sa-*) for the generators in _src/art/services-a/, the EICR
   observations schedule and tester, the fault-finding flow and the lighting section.
   Everything reads as a finished still frame with no JS or under reduced motion.
   ===================================================================================== */

/* ------------------------------------------------------------------ shared diagram extras */
.dgm .sa-f-line { fill: var(--c-line); }
.dgm .sa-f-neutral { fill: var(--c-neutral); }
.dgm .sa-f-sheath { fill: #C9CDD1; }
.dgm .sa-f-copper { fill: var(--c-copper); }
.dgm .sa-f-tin { fill: #CFCFCA; }
.dgm .sa-f-oldline { fill: var(--red); }
.dgm .sa-f-oldneutral { fill: #1E2024; }
.dgm .sa-f-rubber { fill: #34363B; }
.dgm .sa-c-oldline { stroke: var(--red); }
.dgm .sa-c-oldneutral { stroke: #1E2024; }
.dgm .sa-c-tin { stroke: #B9B9B3; }
.dgm .sa-strand { stroke: #1E2024; stroke-width: .8; }
.dgm .sa-sep { stroke: #E9E5DD; stroke-width: 1.6; }
.dgm .sa-braid { fill: none; stroke: #E9E5DD; stroke-width: 1.2; stroke-dasharray: 2 3; opacity: .55; }
.dgm .sa-crack { fill: none; stroke: #E9E5DD; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.dgm .sa-gap { fill: none; stroke: #E9E5DD; stroke-width: 1.4; stroke-dasharray: 3 3; }

/* old runs a rewire takes out: dashed ink, visible from the start, then knocked back once
   the new cable has drawn in (the final state, also the reduced-motion and no-JS state) */
.dgm .sa-old { fill: none; stroke: var(--dg-ink); stroke-width: 2.4; stroke-dasharray: 6 5; stroke-linecap: butt; opacity: .5; }
.dgm .sa-old-box { fill: var(--dg-card); }
html.js:not(.ss-reduced) .dgm[data-draw]:not(.is-drawn) .sa-old.sa-old { opacity: .9; }
html.js .dgm[data-draw] .sa-old { transition: opacity 1.2s var(--ease-out) .5s; }
/* fills that wait for the linework, like the shared fl-* fills */
html.js:not(.ss-reduced) .dgm[data-draw]:not(.is-drawn) :is([class*="sa-f-"], .sa-fill) { fill-opacity: 0; }
html.js .dgm[data-draw] :is([class*="sa-f-"], .sa-fill) { transition: fill-opacity .8s var(--ease-out) .05s; }

/* ------------------------------------------------------------------ /eicr: tester (svg) */
.dgm .sa-c-red { stroke: var(--red); }
.dgm .sa-f-lcd { fill: #DCDFD3; }
.dgm .sa-lcd-t { fill: #1E2024; }
.dgm .sa-lcd-big { fill: #1E2024; font: 600 46px/1 var(--f-mono); letter-spacing: -.03em; }
.dgm .sa-lcd-rule { fill: none; stroke: #1E2024; stroke-width: 1; opacity: .3; }
.dgm .sa-lcd-tick { fill: none; stroke: #1E2024; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.dgm .sa-dial-l { transition: fill .25s; }
.dgm .sa-dial-l.is-on { fill: var(--red); font-weight: 700; }
.dgm .sa-ptr { transform-origin: 260px 340px; transition: transform .55s var(--ease-snap); }
.dgm .sa-ptr-line { stroke: var(--red); }
.dgm .sa-rd { transition: opacity .2s; }
.dgm .sa-rd:not(.is-cur) { opacity: 0; }
.dgm .sa-btn { transform-box: fill-box; transform-origin: center; transition: transform .14s var(--ease-out); }
.dgm .sa-btn.is-press { transform: scale(.82); }

/* ------------------------------------------------------------------ /eicr: observations sheet */
.sa-obs { position: relative; background: var(--card); border-radius: var(--r-1); box-shadow: 0 0 0 1px var(--rule-2), 0 18px 34px -26px rgba(17, 18, 20, .55); padding: clamp(14px, 2vw, 22px); }
.sa-obs__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 3px double var(--text); }
.sa-obs__k { display: block; font: 500 .6875rem/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); }
.sa-obs__t { margin-top: 4px; font: 680 1.0625rem/1.2 var(--f-display); font-stretch: var(--display-stretch); color: var(--text); text-wrap: balance; }
.sa-obs__ex { flex: none; padding: 4px 8px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--red); font: 600 .6875rem/1.2 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.sa-obs__tbl { width: 100%; border-collapse: collapse; font-size: .9063rem; line-height: 1.45; }
.sa-obs__tbl th { padding: 10px 8px; text-align: left; font: 500 .6875rem/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); border-bottom: 1.5px solid var(--text); }
.sa-obs__tbl td { padding: 12px 8px; vertical-align: top; color: var(--text-2); border-bottom: 1px solid var(--rule); }
.sa-obs__tbl :is(th, td):first-child { padding-left: 0; width: 3.2em; }
.sa-obs__tbl :is(th, td):last-child { padding-right: 0; width: 4.4em; text-align: right; }
.sa-obs__tbl td:first-child { font: 500 .8125rem/1.6 var(--f-mono); color: var(--text); }
.sa-code {
  display: inline-grid; place-items: center; min-width: 42px; height: 28px; padding: 0 6px; border-radius: 5px;
  font: 700 .8125rem/1 var(--f-mono); letter-spacing: .04em; color: var(--text); box-shadow: inset 0 0 0 1.5px currentColor;
}
.sa-code--c1 { background: var(--red); color: #fff; box-shadow: none; }
.sa-code--c2 { color: var(--red); }
.sa-code--c3 { color: var(--text-2); }
.sa-code--fi { box-shadow: none; border: 1.5px dashed currentColor; }
.sa-obs__sum { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding-top: 16px; }
.sa-obs__sum p { margin: 0; font: 500 .75rem/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text); }
.sa-stamp {
  display: inline-block; padding: 7px 12px 6px; border: 2.5px solid var(--red); border-radius: 6px; transform: rotate(-3deg);
  font: 700 .9375rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--red);
}
.sa-obs__note { margin: 14px 0 0; font-size: var(--fs-small); line-height: 1.5; color: var(--text-3); }
.sa-obs + .key { margin-top: 12px; }
html.js:not(.ss-reduced) .sa-obs[data-obs]:not(.is-in) :is(.sa-code, .sa-stamp) { opacity: 0; transform: scale(1.7) rotate(-10deg); }
html.js .sa-obs[data-obs] :is(.sa-code, .sa-stamp) { transition: opacity .2s ease-out, transform .42s var(--ease-snap); transition-delay: calc(.3s + var(--k, 0) * 260ms); }
html.ss-failsafe:not(.ss-ready) .sa-obs :is(.sa-code, .sa-stamp) { opacity: 1 !important; }
/* the codes, as a key */
.sa-codes .key__b { width: auto; min-width: 30px; padding: 0 4px; }
.sa-codes li { grid-template-columns: 38px minmax(0, 1fr); }

/* example readings table beside the tester; the row being shown on the tester lights */
.sa-readings tbody tr { transition: background-color .25s; }
.sa-readings tbody tr.is-cur { background: var(--red-wash); }
.sa-readings :is(td, th):first-child { padding-left: 10px; }
.sa-readings tbody tr.is-cur td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.sa-readings td:last-child { white-space: nowrap; text-align: right; }
.sa-readings th:last-child { text-align: right; }
.sa-readings td:first-child { color: var(--text); font-weight: 600; }
.sa-readings td:nth-child(2) { color: var(--text-2); }
/* phones: the description drops under the test name, so the table needs only two columns */
@media (max-width: 560px) {
  .sa-readings thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sa-readings caption { border-bottom: 1.5px solid var(--text); }
  .sa-readings tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 10px 0 10px 12px; border-bottom: 1px solid var(--rule); }
  .sa-readings tbody tr.is-cur { box-shadow: inset 3px 0 0 var(--red); }
  .sa-readings tbody td, .sa-readings tbody td:first-child { padding: 0; border: 0; }
  .sa-readings tbody tr.is-cur td:first-child { box-shadow: none; }
  .sa-readings td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; font-size: .875rem; line-height: 1.45; }
}
html.js .dgm[data-tester].sa-busy .sa-pass { opacity: 0; }
.dgm .sa-pass { transition: opacity .2s; }

/* ------------------------------------------------------------------ /fault-finding: the flow */
/* Two drawings of the same flow: wide for desktop and tablet, tall for phones. The still frame
   is the finished job. With JS (and motion) the svg is armed: steps light as it scrolls past,
   the rail fills, and when the retest passes the RCD closes and the rail goes live (red). */
.sa-flow--tall { display: none; }
@media (max-width: 719px) {
  .sa-flow--wide { display: none; }
  .sa-flow--tall { display: block; max-width: 400px; margin-inline: auto; }
}
.dgm .sa-rail { fill: none; stroke: var(--dg-ink); stroke-width: 2; stroke-dasharray: 2 6; stroke-linecap: round; opacity: .45; }
.dgm .sa-rail-live { fill: none; stroke: var(--red); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke .5s; }
.dgm.is-armed:not(.is-on) .sa-rail-live { stroke: var(--dg-ink); }
.dgm .sa-step-t { font-weight: 600; letter-spacing: .08em; transition: opacity .3s; }
.dgm.is-armed .sa-step:not(.is-lit) .sa-step-t { opacity: .45; }
.dgm .sa-node circle { transition: fill .3s, stroke .3s; }
.dgm .sa-node text { transition: fill .3s; }
.dgm.is-armed .sa-step:not(.is-lit) .sa-node circle { fill: var(--dg-card); }
.dgm.is-armed .sa-step:not(.is-lit) .sa-node text { fill: var(--dg-ink); }
.dgm.is-armed .sa-step.is-cur .sa-node circle { fill: var(--red); stroke: var(--red); }
.dgm.is-armed .sa-step.is-cur .sa-node text { fill: #fff; }
/* step 2: breakers go off one by one, then the lock goes on */
.dgm .sa-mcb__lever { transform-box: fill-box; transition: transform .22s cubic-bezier(.5, 0, .2, 1.4); transition-delay: calc(var(--k, 0) * 200ms); }
.dgm.is-armed .sa-step:not(.is-lit) .sa-mcb__lever { transform: translateY(-16px); }
.dgm .sa-lock { transition: opacity .3s .7s; }
.dgm.is-armed .sa-step:not(.is-lit) .sa-lock { opacity: 0; transition-delay: 0s; }
/* steps 3 and 6: the reading appears; step 4: the leak shows; step 5: the new length goes in */
.dgm :is(.sa-read, .sa-spark, .sa-new, .sa-new-t) { transition: opacity .35s .25s; }
.dgm.is-armed .sa-step:not(.is-lit) :is(.sa-read, .sa-spark, .sa-new, .sa-new-t) { opacity: 0; transition-delay: 0s; }
.dgm .sa-spark { fill: none; stroke: var(--red); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* the last RCD: on in the still frame, off until the retest passes */
.dgm .sa-rcd__lever { transform-box: fill-box; transition: transform .2s cubic-bezier(.5, 0, .2, 1.5) .35s; }
.dgm .sa-rcd__flag { fill: var(--red); transition: fill .15s .45s; }
.dgm.is-armed:not(.is-on) .sa-rcd__lever { transform: translateY(17px); transition-delay: 0s; }
.dgm.is-armed:not(.is-on) .sa-rcd__flag { fill: var(--dg-paper); transition-delay: 0s; }

/* key under the flow */
.sa-steps td:first-child { width: 3.2em; }
.sa-steps td b { color: var(--text); font-weight: 600; }
.sa-steps td { color: var(--text-2); }

/* ------------------------------------------------------------------ /lighting: house and garden */
.dgm .sa-glow { transition: opacity .5s var(--ease-out); }
.dgm[data-lamps].is-armed .sa-lamp:not(.is-on) .sa-glow { opacity: 0; }
.dgm .sa-zone-l { fill: rgba(46, 92, 154, .07); stroke: var(--c-neutral); stroke-width: 1.2; stroke-dasharray: 5 4; }
.dgm .sa-zone-t { fill: var(--c-neutral); font-weight: 700; }
.dgm .sa-link { fill: none; stroke: var(--dg-ink); stroke-width: 1.4; stroke-dasharray: 3 4; opacity: .7; }
.dgm .sa-swa { fill: none; stroke: #2B2D32; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.dgm .sa-tape { fill: none; stroke: #D9B526; stroke-width: 3; stroke-dasharray: 10 4; }
.dgm .sa-pir { fill: none; stroke: var(--dg-ink); stroke-width: 1.2; stroke-dasharray: 2 4; stroke-linecap: round; opacity: .6; }
.dgm .sa-soil { opacity: .35; }
.dgm .sa-new { stroke: #6E747A; }