/* US tile map (js/us-tilemap.js): one rounded square per state. Color steps
   are one hue (--s1) at growing strength, so they work in every theme; ut-b0
   is the neutral gray (e.g. "the federal minimum applies"). The same classes
   color legend swatches (.sw-sq.ut-bN) and bars (.ut-bar.ut-bN). */

.ut-plot { min-height: 260px; }
.ut-tile rect { fill: var(--s1); stroke: none; transition: fill-opacity 0.12s ease; }
.ut-tile.ut-b0 rect { fill: var(--line-gray); fill-opacity: 0.26; }
.ut-tile.ut-b1 rect { fill-opacity: 0.16; }
.ut-tile.ut-b2 rect { fill-opacity: 0.3; }
.ut-tile.ut-b3 rect { fill-opacity: 0.45; }
.ut-tile.ut-b4 rect { fill-opacity: 0.6; }
.ut-tile.ut-b5 rect { fill-opacity: 0.76; }
.ut-tile.ut-b6 rect { fill-opacity: 0.94; }
.ut-tile.on rect { stroke: var(--ink); stroke-width: 2; }
.ut-code { fill: var(--ink); font: 650 12.5px/1 var(--font); letter-spacing: 0.02em; pointer-events: none; }
.ut-code.sm { font-size: 10px; }
.ut-val { fill: var(--ink-2); font: 500 10.5px/1 var(--mono); font-variant-numeric: tabular-nums; pointer-events: none; }
.ut-tile.ut-b4 text, .ut-tile.ut-b5 text, .ut-tile.ut-b6 text { fill: #fff; }

.sw-sq.ut-b0, .ut-bar.ut-b0 { background: var(--line-gray); opacity: 0.42; }
.sw-sq.ut-b1, .ut-bar.ut-b1 { background: var(--s1); opacity: 0.16; }
.sw-sq.ut-b2, .ut-bar.ut-b2 { background: var(--s1); opacity: 0.3; }
.sw-sq.ut-b3, .ut-bar.ut-b3 { background: var(--s1); opacity: 0.45; }
.sw-sq.ut-b4, .ut-bar.ut-b4 { background: var(--s1); opacity: 0.6; }
.sw-sq.ut-b5, .ut-bar.ut-b5 { background: var(--s1); opacity: 0.76; }
.sw-sq.ut-b6, .ut-bar.ut-b6 { background: var(--s1); opacity: 0.94; }
.ut-bar { display: block; height: 10px; min-width: 3px; border-radius: 5px; }

/* on dark surfaces a pale blue reads as gray: stronger steps there */
:root[data-theme="dark"] .ut-tile.ut-b0 rect, :root[data-theme="black"] .ut-tile.ut-b0 rect { fill-opacity: 0.2; }
:root[data-theme="dark"] .ut-tile.ut-b1 rect, :root[data-theme="black"] .ut-tile.ut-b1 rect { fill-opacity: 0.26; }
:root[data-theme="dark"] .ut-tile.ut-b2 rect, :root[data-theme="black"] .ut-tile.ut-b2 rect { fill-opacity: 0.4; }
:root[data-theme="dark"] .ut-tile.ut-b3 rect, :root[data-theme="black"] .ut-tile.ut-b3 rect { fill-opacity: 0.54; }
:root[data-theme="dark"] .ut-tile.ut-b4 rect, :root[data-theme="black"] .ut-tile.ut-b4 rect { fill-opacity: 0.68; }
:root[data-theme="dark"] .ut-tile.ut-b5 rect, :root[data-theme="black"] .ut-tile.ut-b5 rect { fill-opacity: 0.82; }
:root[data-theme="dark"] .sw-sq.ut-b0, :root[data-theme="black"] .sw-sq.ut-b0 { opacity: 0.34; }
:root[data-theme="dark"] .sw-sq.ut-b2, :root[data-theme="black"] .sw-sq.ut-b2 { opacity: 0.4; }
:root[data-theme="dark"] .sw-sq.ut-b3, :root[data-theme="black"] .sw-sq.ut-b3 { opacity: 0.54; }

@media (prefers-reduced-motion: reduce) { .ut-tile rect { transition: none; } }