.sm-fig { container-type: inline-size; --aws-advice: oklch(0.88 0.15 95); --aws-watch: oklch(0.76 0.15 62); --aws-emergency: oklch(0.53 0.18 27); }
.sm-fig figcaption, .sm-pic figcaption { font-size: .82rem; color: var(--slate); margin-top: .8rem; line-height: 1.45; }
.sm-fig figcaption a, .sm-row-src a, .sm-tile-src a { overflow-wrap: anywhere; }
.sm-fig-title { font-family: var(--display); font-weight: 600; font-size: 1.1rem; margin: 0 0 .8rem; }
.article .refs a { overflow-wrap: anywhere; }
.sm-pics-note { font-size: .85rem; color: var(--slate); }
.sm-pic img { display: block; width: 100%; height: auto; }
.sm-svg { display: block; width: 100%; height: auto; }
@container (max-width: 559px) { .sm-fig svg.viz-wide { display: none !important; } }
@container (min-width: 560px) { .sm-fig svg.viz-phone { display: none !important; } }
.sm-svg text { font-family: var(--body); fill: var(--ink); }
.sm-chart { background: var(--paper); border: 1px solid color-mix(in oklab, var(--slate) 22%, transparent); border-radius: 3px; padding: 1.1rem clamp(.7rem, 3cqi, 1.4rem) 1rem; }
.sm-chart .sm-lab { font-weight: 600; }
.sm-chart .sm-val { font-family: var(--display); font-weight: 600; }
.sm-chart .sm-val.is-in { fill: var(--paper); }
.sm-chart .sm-tick { fill: var(--slate); }
.sm-grid { stroke: color-mix(in oklab, var(--slate) 22%, transparent); stroke-width: 1; }
.sm-div { stroke: color-mix(in oklab, var(--slate) 45%, transparent); stroke-width: 1; stroke-dasharray: 4 4; }
.sm-bar.is-total { fill: var(--slate); }
.sm-bar.is-part { fill: var(--sand-dk); }
.sm-bar.is-flood { stroke: var(--verdigris); stroke-width: 1.5; stroke-dasharray: 4 3; }
.sm-hatch-bg { fill: color-mix(in oklab, var(--verdigris) 16%, var(--paper)); }
.sm-hatch { stroke: var(--verdigris); stroke-width: 2.2; }
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
.sm-chart .sm-bar { transform-box: fill-box; transform-origin: left center; transition: transform .7s var(--ease-settle); transition-delay: calc(var(--i) * 120ms + 150ms); }
.sm-chart.reveal:not(.in) .sm-bar { transform: scaleX(0); }
}
.sm-ladder { background: var(--paper); border: 1px solid color-mix(in oklab, var(--slate) 22%, transparent); border-radius: 3px; padding: 1rem clamp(.6rem, 3cqi, 1.3rem) .9rem; }
.sm-lad { display: grid; gap: 1rem; }
@container (min-width: 560px) { .sm-lad { grid-template-columns: minmax(0, 1fr) 11.5rem; } }
.sm-lad-heads, .sm-rung { display: grid; grid-template-columns: minmax(0, 1fr) 1.6rem minmax(0, 1fr); gap: .45rem; align-items: center; }
.sm-lad-heads { margin: 0 0 .5rem; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); font-weight: 600; }
.sm-lad-heads span:last-child { grid-column: 3; }
.sm-rungs { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.sm-rung { --wc: var(--aws-advice); --wt: var(--ink); }
.sm-rung.is-watch { --wc: var(--aws-watch); }
.sm-rung.is-emergency { --wc: var(--aws-emergency); --wt: var(--paper); }
.sm-warn { display: grid; gap: .3rem; }
.sm-warn-box { margin: 0; background: var(--wc); color: var(--wt); border-radius: 3px; padding: .6rem .75rem; font-size: .92rem; line-height: 1.38; }
.sm-warn-box.is-bom { background: var(--paper); color: var(--ink); border: 2px solid var(--wc); font-size: .86rem; }
.sm-or { margin: 0; font-size: .78rem; color: var(--slate); text-align: center; line-height: 1; }
.sm-arr { width: 100%; height: 1.4rem; fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sm-do { margin: 0; background: var(--riverlight); border-left: 5px solid var(--wc, var(--slate)); border-radius: 3px; padding: .6rem .75rem; font-size: .92rem; line-height: 1.38; font-weight: 600; }
.sm-sky { display: grid; align-content: start; gap: .5rem; background: linear-gradient(180deg, color-mix(in oklab, var(--ink) 92%, var(--slate)), color-mix(in oklab, var(--slate) 75%, var(--ink))); color: var(--paper); border-radius: 3px; padding: .9rem .85rem; }
.sm-sky-signs { margin: 0; font-size: .9rem; line-height: 1.42; }
.sm-sky-signs b { display: block; font-family: var(--display); font-weight: 600; font-size: 1.02rem; margin-bottom: .35rem; }
.sm-sky .sm-arr { stroke: var(--paper); transform: rotate(90deg); height: 1.6rem; }
.sm-sky .sm-do { background: var(--paper); color: var(--ink); border-left-color: var(--sand-dk); }
.sm-note { font-size: .82rem; color: var(--slate); margin: .9rem 0 0; line-height: 1.45; }
@container (max-width: 559px) {
.sm-lad-heads, .sm-rung { grid-template-columns: minmax(0, 1fr) 1.1rem minmax(0, 1fr); gap: .35rem; }
.sm-warn-box, .sm-do { font-size: .86rem; padding: .55rem .6rem; }
.sm-warn-box.is-bom { font-size: .82rem; }
}
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
.sm-ladder .sm-rung { transition: opacity .5s var(--ease-settle), transform .5s var(--ease-settle); }
.sm-ladder .sm-rung:nth-child(2) { transition-delay: .12s; }
.sm-ladder .sm-rung:nth-child(3) { transition-delay: .24s; }
.sm-ladder.reveal:not(.in) .sm-rung { opacity: 0; transform: translateY(8px); }
}
.sm-table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid color-mix(in oklab, var(--slate) 25%, transparent); font-size: .93rem; }
.sm-table caption { caption-side: top; text-align: left; font-family: var(--display); font-weight: 600; font-size: 1.05rem; padding: 0 0 .7rem; }
.sm-table th, .sm-table td { padding: .65rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid color-mix(in oklab, var(--slate) 18%, transparent); line-height: 1.4; }
.sm-table thead th { font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; color: var(--paper); background: var(--slate); font-weight: 600; }
.sm-table tbody th { font-weight: 600; }
.sm-table ul { margin: 0; padding-left: 1.1rem; }
.sm-table li { margin: 0 0 .25rem; }
.sm-table li:last-child { margin-bottom: 0; }
.sm-thresh tbody th { width: 30%; }
.sm-thresh tbody th::before { content: ""; display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin-right: .5rem; vertical-align: .02em; background: var(--dc); }
.sm-thresh .is-severe { --dc: var(--aws-watch); }
.sm-thresh .is-vd { --dc: var(--aws-emergency); }
.sm-thresh tfoot td { font-size: .88rem; color: var(--ink); background: color-mix(in oklab, var(--sandstone) 45%, var(--paper)); border-bottom: 0; }
.sm-cover tbody th { width: 22%; }
.sm-cover .sm-ask { width: 30%; font-weight: 600; }
.sm-row-src { margin: .45rem 0 0; font-size: .8rem; color: var(--slate); }
@container (max-width: 559px) {
.sm-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sm-table, .sm-table tbody, .sm-table tfoot, .sm-table tr, .sm-table th, .sm-table td { display: block; width: auto; }
.sm-table tbody tr { padding: .75rem .9rem; border-bottom: 1px solid color-mix(in oklab, var(--slate) 18%, transparent); }
.sm-table tbody th, .sm-table tbody td { padding: 0; border-bottom: 0; width: auto; }
.sm-table tbody th { margin-bottom: .35rem; }
.sm-table tfoot td { padding: .7rem .9rem; }
.sm-cover .sm-ask { width: auto; margin-top: .6rem; background: var(--riverlight); border-left: 4px solid var(--fig); border-radius: 2px; padding: .5rem .7rem; }
.sm-table { border: 1px solid color-mix(in oklab, var(--slate) 25%, transparent); }
.sm-table caption { display: block; padding: .8rem .9rem .3rem; }
}
.sm-check-grid { display: grid; gap: 1.2rem; }
@container (min-width: 560px) { .sm-check-grid { grid-template-columns: 1fr 1fr; } }
.sm-check { background: var(--paper); border: 1px solid color-mix(in oklab, var(--slate) 22%, transparent); border-top: 6px solid var(--slate); border-radius: 3px; padding: 1rem clamp(.8rem, 3cqi, 1.3rem) .9rem; }
.sm-contract .sm-check-col { background: var(--paper); border: 1px solid color-mix(in oklab, var(--slate) 22%, transparent); border-top: 6px solid var(--fig); border-radius: 3px; padding: .9rem 1rem .8rem; }
.sm-contract .sm-guar { border-top-color: var(--slate); }
.sm-guar ul.keystone { font-size: .93rem; margin: 0; }
.sm-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.sm-ticks li { background: var(--riverlight); border-radius: 3px; padding: .55rem .8rem; font-size: .93rem; line-height: 1.4; }
.sm-ticks label { display: flex; gap: .65rem; align-items: flex-start; cursor: pointer; min-height: 28px; }
.sm-ticks input { width: 1.15rem; height: 1.15rem; margin: .18rem 0 0; flex: 0 0 auto; accent-color: var(--fig); }
.sm-ticks input:checked + span { color: color-mix(in oklab, var(--ink) 55%, transparent); text-decoration: line-through; text-decoration-color: color-mix(in oklab, var(--fig) 70%, transparent); }
.sm-ticks sup, .sm-fn sup { font-size: .68em; color: var(--slate); margin-left: .12em; }
.sm-fn span { white-space: nowrap; margin-right: .5rem; }
.sm-plan { background: var(--paper); border: 1px solid color-mix(in oklab, var(--slate) 22%, transparent); border-radius: 3px; padding: 1rem clamp(.6rem, 2.5cqi, 1.2rem) .9rem; }
.sm-plan-svg { overflow: hidden; }
.pl-garden { fill: oklch(0.93 0.03 135); }
.pl-foot { fill: color-mix(in oklab, var(--slate) 12%, var(--paper)); }
.pl-verge { fill: oklch(0.85 0.05 135); }
.pl-road { fill: color-mix(in oklab, var(--ink) 88%, var(--slate)); }
.pl-kerb { stroke: color-mix(in oklab, var(--slate) 35%, var(--paper)); stroke-width: 3; }
.pl-fence { stroke: color-mix(in oklab, var(--sand-dk) 80%, var(--ink)); stroke-width: 1.5; stroke-dasharray: 2 3; }
.pl-centre { stroke: color-mix(in oklab, var(--paper) 70%, transparent); stroke-width: 1.5; stroke-dasharray: 12 10; }
.pl-drive { fill: color-mix(in oklab, var(--slate) 20%, var(--paper)); }
.pl-roof rect { fill: var(--slate); stroke: var(--ink); stroke-width: 1.5; }
.pl-roof path { fill: none; stroke: color-mix(in oklab, var(--paper) 55%, var(--slate)); stroke-width: 1.2; }
.pl-roof.is-next rect { fill: color-mix(in oklab, var(--slate) 45%, var(--paper)); stroke: color-mix(in oklab, var(--slate) 70%, transparent); }
.pl-wire { stroke: var(--ink); stroke-width: 1.4; }
.pl-pole { fill: var(--paper); stroke: var(--ink); stroke-width: 2; }
.pl-note { fill: var(--ink) !important; }
.pl-truck .pl-box { stroke: var(--ink); stroke-width: 1.5; }
.pl-truck .pl-cab { fill: var(--paper); stroke: var(--ink); stroke-width: 1.5; }
.pl-truck .pl-screen { stroke: var(--ink); stroke-width: 2; }
.pl-truck.is-a .pl-box { fill: var(--aws-emergency); }
.pl-truck.is-b .pl-box { fill: var(--fig); }
.pl-canopy { fill: var(--fig); opacity: .3; }
.pl-leaves { fill: color-mix(in oklab, var(--fig) 85%, var(--ink)); opacity: .62; }
.pl-canopy-solo { fill: var(--fig); opacity: .7; }
.pl-trunk { fill: color-mix(in oklab, var(--sand-dk) 55%, var(--ink)); }
.pl-badge circle { stroke: var(--paper); stroke-width: 2; }
.pl-badge path { fill: none; stroke: var(--paper); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.pl-badge.is-no circle { fill: var(--aws-emergency); }
.pl-badge.is-ok circle { fill: var(--fig); }
.sm-svg .pl-road-t { fill: var(--paper); font-weight: 600; }
.sm-svg .pl-road-t.is-quiet { font-weight: 400; fill: color-mix(in oklab, var(--paper) 80%, transparent); }
.sm-svg .pl-inset-t { font-family: var(--display); font-weight: 600; }
.pl-zone { fill: color-mix(in oklab, var(--aws-emergency) 22%, transparent); stroke: var(--aws-advice); stroke-width: 2.5; stroke-dasharray: 7 5; }
.pl-live-glow { fill: none; stroke: var(--aws-advice); stroke-width: 6; stroke-linecap: round; opacity: .55; }
.pl-live { fill: none; stroke: var(--paper); stroke-width: 2; stroke-linecap: round; }
.pl-branch { fill: none; stroke: color-mix(in oklab, var(--sand-dk) 60%, var(--ink)); stroke-width: 4; stroke-linecap: round; }
.pl-car rect { fill: none; stroke: var(--paper); stroke-width: 1.6; }
.pl-car path { fill: none; stroke: color-mix(in oklab, var(--paper) 70%, transparent); stroke-width: 1.2; }
.pl-radius { fill: none; stroke: var(--aws-advice); stroke-width: 2; }
.pl-radius-dot { fill: var(--aws-advice); }
.pl-leader { fill: none; stroke: color-mix(in oklab, var(--paper) 75%, transparent); stroke-width: 1.2; }
.sm-svg .pl-live-t { fill: var(--aws-advice); }
.pl-call { fill: var(--ink); }
.pl-call-div { stroke: color-mix(in oklab, var(--paper) 30%, transparent); stroke-width: 1; }
.sm-svg .pl-call-k { fill: color-mix(in oklab, var(--paper) 85%, transparent); }
.sm-svg .pl-call-n { fill: var(--paper); font-family: var(--display); font-weight: 600; }
.sm-tiles { display: grid; gap: .8rem; }
@container (min-width: 560px) { .sm-tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); } .sm-tile { grid-column: span 2; } .sm-tile:nth-child(4), .sm-tile:nth-child(5) { grid-column: span 3; } }
.sm-tile { display: flex; flex-direction: column; background: var(--paper); border: 1px solid color-mix(in oklab, var(--slate) 22%, transparent); border-top: 6px solid var(--dc); border-radius: 2px; padding: .85rem 1rem .8rem; --dc: var(--slate); }
.sm-tile:nth-child(1) { --dc: var(--sand-dk); }
.sm-tile:nth-child(3) { --dc: var(--aws-watch); }
.sm-tile:nth-child(4) { --dc: var(--aws-emergency); }
.sm-tile:nth-child(5) { --dc: var(--fig); }
.sm-tile-h { font-family: var(--display); font-weight: 600; font-size: 1.02rem; margin: 0 0 .4rem; }
.sm-tile ul { list-style: none; margin: 0 0 .7rem; padding: 0; font-size: .9rem; }
.sm-tile li { padding: .35rem 0; border-bottom: 1px dotted color-mix(in oklab, var(--slate) 40%, transparent); line-height: 1.38; }
.sm-tile li:last-child { border-bottom: 0; }
.sm-tile b { font-family: var(--display); font-weight: 600; font-size: 1.1em; white-space: nowrap; }
.sm-tile-src { margin: auto 0 0; padding-top: .5rem; border-top: 1px solid color-mix(in oklab, var(--slate) 22%, transparent); font-size: .8rem; color: var(--slate); }