/* State tax burden comparison: tool-specific styles (moved out of index.html so the CSP needs no 'unsafe-inline'). */
:root { --c-inc: #1F7A52; --c-sales: #3461B8; --c-prop: #B5700F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --c-inc: #3F9A6B; --c-sales: #5C86C8; --c-prop: #BF8626; } }
:root[data-theme="dark"] { --c-inc: #3F9A6B; --c-sales: #5C86C8; --c-prop: #BF8626; }
/* Wider results column on desktop only; phones keep the single column from tools.css. */
@media (min-width: 821px) { .grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.compare { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: start; }
@media (max-width: 640px) { .compare { grid-template-columns: 1fr; } .compare .arrow { display: none; } }
.place { border-top: 2px solid var(--line); padding-top: 8px; }
.place .k { font-family: var(--display); font-stretch: 87.5%; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.place .n { font-family: var(--display); font-stretch: 87.5%; font-weight: 700; font-size: 1.1rem; }
.place .v { font-family: var(--display); font-stretch: 87.5%; font-weight: 800; font-size: 1.9rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.place .s { font-size: 0.85rem; color: var(--muted); }
.place dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 8px 0 0; font-size: 0.9rem; }
.place dt { color: var(--muted); } .place dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.arrow { align-self: center; text-align: center; }
.arrow .d { font-family: var(--display); font-stretch: 87.5%; font-weight: 800; font-size: 1.4rem; font-variant-numeric: tabular-nums; }
.arrow .s { font-size: 0.75rem; color: var(--muted); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 0.82rem; color: var(--muted); margin: 6px 0 10px; }
.legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; vertical-align: -1px; margin-right: 5px; }
.bar { display: flex; height: 12px; width: 100%; min-width: 120px; }
.bar i { display: block; height: 100%; margin-right: 2px; }
.b-inc { background: var(--c-inc); } .b-sales { background: var(--c-sales); } .b-prop { background: var(--c-prop); }
.l-inc { background: var(--c-inc); } .l-sales { background: var(--c-sales); } .l-prop { background: var(--c-prop); }
table.rank td.rank { text-align: right; color: var(--muted); font-size: 0.8rem; width: 2.5em; }
table.rank th[scope="row"] { white-space: nowrap; }
table.rank td.tot { font-weight: 700; }
table.rank tr.hl th, table.rank tr.hl td { background: var(--even-bg); }
table.rank tr.city th[scope="row"] { font-weight: 400; font-style: italic; }
table.rank td.barcell { width: 26%; }
.controls { display: flex; flex-wrap: wrap; gap: 14px 20px; align-items: center; font-size: 0.9rem; margin-bottom: 8px; }
.controls label { display: flex; gap: 6px; align-items: center; }
.controls select { width: auto; }
.pairsel { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#verdict { margin-top: 16px; }
#cityNotes { font-size: 0.88rem; color: var(--muted); margin: 0 0 16px; padding-left: 20px; }
.controls input[type="checkbox"] { width: auto; }