@layer district {
@keyframes dc-line {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: none; }
}
@keyframes dc-drop {
from { opacity: 0; transform: translateY(-14px); }
to { opacity: 1; transform: none; }
}
.district-check { padding-block: var(--section-pad); }
.dc {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--s4);
align-items: start;
max-width: var(--wrap);
}
.dc-map { padding: var(--s5); max-width: 260px; justify-self: center; }
.dc-heading { margin-bottom: var(--s2); }
.dc-svg { display: block; width: 100%; height: auto; overflow: visible; }
.dc-svg .t-or { fill: var(--orange); }
.dc-svg .t-te { fill: var(--teal); }
.dc-svg .t-sk { fill: var(--sky); }
.dc-svg .t-pa { fill: var(--paper); }
.dc-num { fill: var(--ink); font-family: var(--font-action); font-size: 11px; font-weight: 700; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.dc-d {
stroke: var(--teal);
stroke-width: 0.8;
stroke-linejoin: round;
}
.dc-svg[data-active] .dc-depth { display: none; }
.dc-svg[data-active] .dc-d { fill: var(--paper); }
.dc-svg[data-active="1"] .dc-d[data-d="1"],
.dc-svg[data-active="2"] .dc-d[data-d="2"],
.dc-svg[data-active="3"] .dc-d[data-d="3"],
.dc-svg[data-active="4"] .dc-d[data-d="4"],
.dc-svg[data-active="5"] .dc-d[data-d="5"] { fill: var(--sky); }
.dc-svg[data-active="6"] .dc-d[data-d="6"] { fill: var(--orange); }
.dc-svg:not([data-pin]) .dc-pin-at { opacity: 0; }
.dc-body { display: grid; gap: var(--s3); min-width: 0; padding: clamp(24px, 4vw, 48px); border: 2px solid var(--ink); border-radius: var(--r-md); }
.dc-title {
font-family: var(--font-display);
font-size: clamp(2.25rem, 4.5vw, 3.75rem);
font-weight: 600;
line-height: 1.08;
letter-spacing: 0;
text-shadow: none;
color: var(--ink);
}
.dc .field { max-width: 32rem; }
.dc-result { min-height: 1.55em; font-weight: 700; }
.dc-result:empty { min-height: 0; }
.dc-result[data-state="home"] { color: var(--ink); }
.dc-nojs { font-size: var(--t-small); font-weight: 400; }
@media (min-width: 768px) {
.dc { grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); gap: var(--s8); align-items: center; }
.dc-map { max-width: 300px; }
}
@media (prefers-reduced-motion: no-preference) {
.dc-result.is-shown { animation: dc-line 200ms var(--ease-out) both; }
.dc-svg[data-pin] .dc-pin { animation: dc-drop 260ms var(--ease-out) both; }
}
}
@layer district { @media (max-width: 767px) { .dc-map { display: none; } } }