.devolution-container { --tools-container-max-width: 1050px; }
.year-control { width: auto; margin: 1.5rem 0; padding: 1rem; background: #f1f5f9; border-radius: 8px; }
.year-control label { display: flex; justify-content: space-between; color: #0f172a; }
.year-control output { font-size: 1.2rem; color: #075985; }
.year-control input[type='range'] { display: block; width: 100%; }
.map-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 1.25rem; align-items: start; }
.map-wrap { position: relative; overflow: hidden; border: 1px solid #94a3b8; border-radius: 8px; background: #e8f1f5; }
#mapCanvas { min-height: 640px; }
#devolutionMap { display: block; width: 100%; height: min(70vh, 760px); min-height: 640px; touch-action: none; cursor: grab; }
#devolutionMap.dragging { cursor: grabbing; }
.uk-outline { fill: #d9e0e4; stroke: #94a3b8; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.background-country { fill: #e5eaed; stroke: #a8b4bd; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.england-outline { cursor: pointer; }
.england-outline.selected { fill: #cbd5e1; stroke: #0f172a; stroke-width: 2; }
.england-outline:focus-visible { outline: none; stroke: #0f172a; stroke-width: 4; }
.national-area { fill: #7c3aed; stroke: #fff; stroke-width: 1.5; cursor: pointer; vector-effect: non-scaling-stroke; }
.national-area:hover, .national-area:focus, .national-area.selected { fill: #a855f7; outline: none; }
.national-area:focus-visible { stroke: #0f172a; stroke-width: 4; }
.area { fill: #168aad; stroke: #fff; stroke-width: 2; cursor: pointer; vector-effect: non-scaling-stroke; transition: fill .15s; }
.area[aria-hidden='true'] { display: none; }
.area:hover, .area:focus, .area.selected { fill: #ef7d00; outline: none; }
.area:focus-visible { stroke: #0f172a; stroke-width: 5; }
.map-controls { position: absolute; top: .75rem; right: .75rem; display: flex; gap: .3rem; }
.map-controls button { width: 42px; height: 42px; margin: 0; padding: 0; box-shadow: 0 1px 4px #33415566; font-weight: bold; }
.map-controls button:disabled { background: #64748b; color: #e2e8f0; cursor: not-allowed; box-shadow: none; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid #ffbf47; outline-offset: 2px; }
.details { min-height: 190px; padding: 1rem; border-left: 5px solid #168aad; background: #f8fafc; }
.details h2 { margin-top: 0; text-align: left; }
.details dl div { margin-bottom: .75rem; }
.details dt { font-weight: bold; }
.details dd { margin: .2rem 0 0; }
.attribution { font-size: .75rem; margin: .6rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 720px) { .map-layout { grid-template-columns: 1fr; } .container { margin-top: 15px; } #mapCanvas, #devolutionMap { min-height: 480px; } }
@media (prefers-reduced-motion: reduce) { .area { transition: none; } }