.district-radial-dock { padding: 28px clamp(20px, 3vw, 30px) 30px; border: 0; border-top: 1px solid #35442d; background: linear-gradient(155deg, #1a2817, #10180e); }
.district-radial-dock .district-directory-head { display: block; margin: 0 0 28px; text-align: center; }
.district-radial-dock .section-kicker { margin: 0 0 8px; color: #b8df8b; font-size: .75rem; }
.district-radial-dock #directory-title { margin: 0; font: 700 clamp(1.25rem, 2vw, 1.65rem)/1.25 var(--heading); letter-spacing: -.025em; scroll-margin-top: 130px; }
.district-radial-dock .district-directory-grid { grid-template-columns: 1fr; }
.district-radial { container: district-radial / inline-size; max-width: 1100px; margin-inline: auto; }
.district-radial[data-enhanced] {
  position: fixed; z-index: 150; top: var(--radial-panel-top, 50%); left: var(--radial-panel-left, 50%); translate: var(--radial-panel-translate, -50% -50%);
  width: min(1100px, calc(100vw - 40px)); max-height: calc(100dvh - 40px);
  isolation: isolate; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable both-edges;
  visibility: hidden; pointer-events: none; opacity: 0; scale: .985; transform: translateY(10px);
  border: 1px solid #71915d; border-radius: 28px; color: #f4f8ef;
  background: radial-gradient(ellipse at 50% 12%, #25432480, transparent 62%), #0b100c;
  box-shadow: 0 24px 100px #000c, 0 0 0 6px #b1db7615;
  transition: opacity .5s ease, scale .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1), visibility .5s;
}
.district-radial[data-open="true"] { visibility: visible; pointer-events: auto; opacity: 1; scale: 1; transform: translateY(0); }
.district-radial-toggle {
  position: relative; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 158px; min-height: 158px; padding: 18px 12px; border-radius: 50%;
  border: 1px solid #c0eb86; color: #14230c;
  background: radial-gradient(circle at 35% 25%, #e1ffc0, #a9dc73 72%);
  box-shadow: 0 0 0 9px #b1db7620, 0 12px 38px #0008;
  font: inherit; font-size: .875rem; font-weight: 700; line-height: 1.25; cursor: pointer;
  transition: scale .35s ease, box-shadow .4s ease;
}
.district-radial-toggle strong { max-width: 100%; font: 750 1.0625rem/1.25 var(--heading); letter-spacing: -.025em; }
.district-radial-toggle > span:first-of-type { letter-spacing: .08em; text-transform: uppercase; }
.district-radial-toggle [data-radial-label] { max-width: 120px; }
.district-radial-toggle:hover { scale: 1.015; box-shadow: 0 0 0 13px #b1db7625, 0 16px 44px #0008; }
.district-radial-toggle[aria-expanded="true"] { box-shadow: 0 0 0 13px #b1db7625, 0 12px 38px #0008; }
.district-radial-toggle:focus-visible { outline: 3px solid #fff; outline-offset: 12px; }
.district-radial-help { margin: 16px 0 0; color: var(--muted); font-size: .9375rem; line-height: 1.6; text-align: center; }
.district-radial-help[hidden], .district-radial-toggle[hidden] { display: none; }
.district-radial-notes { margin: 0 24px 18px; color: var(--muted); font-size: .875rem; line-height: 1.6; }
.district-radial-notes summary { cursor: pointer; padding: 10px 0; }
.district-radial-notes summary:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.district-radial-notes p { margin: 4px 0 0; }
.district-radial-header { position: sticky; z-index: 4; top: 0; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 24px; border-bottom: 1px solid #35472f; background: #142010f5; backdrop-filter: blur(12px); }
.district-radial-heading p { margin: 0 0 4px; color: #b8df8b; font-size: .75rem; letter-spacing: .075em; text-transform: uppercase; }
.district-radial-heading h2 { margin: 0; font: 750 1.5rem/1.2 var(--heading); letter-spacing: -.025em; }
.district-radial-close { flex: none; min-height: 44px; padding: 10px 14px; border: 1px solid #698252; border-radius: 12px; background: #26371f; color: #f3ffe7; font: 650 .875rem/1.3 var(--body, sans-serif); cursor: pointer; }
.district-radial-close:hover { background: #3b542e; }
.district-radial-close:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.district-radial-content { position: relative; height: var(--radial-height, 660px); }
.district-radial-instructions { margin: 0; padding: 4px 24px 10px; color: #b9c9b0; font-size: .875rem; line-height: 1.5; text-align: center; }
.district-radial-orbit {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: var(--radial-orbit-width); height: var(--radial-orbit-height);
  border: 1px solid #88b88f55; border-radius: 50%; pointer-events: none;
}
.district-radial-orbit::after { content: ''; position: absolute; inset: 32px; border: 1px dashed #88b88f25; border-radius: 50%; }
.district-radial-names { position: absolute; inset: 0; }
.district-radial-name {
  position: absolute; z-index: 2; left: var(--slot-x); top: var(--slot-y);
  width: var(--radial-bubble-size, 100px); height: var(--radial-bubble-size, 100px);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 8px; border: 2px solid color-mix(in srgb, var(--district-accent), transparent 25%);
  border-radius: 50%; background: color-mix(in srgb, var(--district-accent) 10%, #101812); color: #f4f8ef; text-align: center;
  font: 650 .875rem/1.25 var(--body, sans-serif); cursor: pointer;
  opacity: 0; transform: translate(calc(-50% + var(--pop-x, 0px)), calc(-50% + var(--pop-y, 0px))) scale(.94);
  transition: transform .48s cubic-bezier(.22,1,.36,1), opacity .42s ease, background .2s;
}
.district-radial[data-open="true"] .district-radial-name { transform: translate(-50%,-50%); opacity: 1; transition-delay: var(--radial-delay); }
.district-radial-code { display: grid; place-items: center; min-width: 44px; min-height: 22px; padding: 2px 8px; border-radius: 12px; background: var(--district-accent); color: #09100a; font-size: .75rem; font-weight: 800; }
.district-radial-person { width: 100%; overflow-wrap: anywhere; text-wrap: balance; }
.district-radial[data-ready="true"] .district-radial-name:hover, .district-radial-name[data-preview="true"] { border-color: var(--district-accent); background: color-mix(in srgb, var(--district-accent) 16%, #101812); box-shadow: 0 5px 24px #0005; }
.district-radial[data-open="true"][data-ready="true"] .district-radial-name:hover { transform: translate(-50%,-50%) scale(1.015); transition-delay: 0s; }
.district-radial-name[data-selected="true"] .district-radial-code { outline: 2px solid #fff; outline-offset: 3px; }
.district-radial-name:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.district-radial-preview {
  position: absolute; z-index: 1; top: 50%; left: 50%; translate: -50% -50%;
  width: var(--radial-detail-width, 300px); height: var(--radial-detail-height, 340px);
  display: grid; grid-template-rows: auto minmax(0, 1fr) 72px; gap: 8px;
  margin: 0; padding: 12px; border: 1px solid #68845580; border-radius: 24px;
  background: radial-gradient(ellipse at center, #28433480, transparent 70%), #121d14;
  box-shadow: 0 12px 40px #0005; color: #e5f7d7; text-align: center; pointer-events: none;
}
.district-radial-preview:focus-visible { outline: 2px solid #a9ce7c; outline-offset: 5px; }
.district-radial-preview-kicker { margin: 0; font-size: .6875rem; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: #b9cdb0; }
.district-radial-preview-map { display: block; width: 100%; height: 100%; min-height: 0; overflow: hidden; border-radius: 8px; }
.district-radial-preview-city { fill: #3dbbc418; stroke: #238ea5; stroke-width: 1.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.district-radial-preview-area { fill: var(--preview-accent); fill-opacity: .38; stroke: var(--preview-accent); stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.district-radial-preview-caption { display: flex; flex-direction: column; justify-content: center; gap: 5px; }
.district-radial-preview-title { color: var(--preview-accent); font: 700 1rem/1.25 var(--heading); text-wrap: balance; }
.district-radial-preview-hint { color: #c1d0b9; font-size: .8125rem; line-height: 1.35; text-wrap: balance; }
.district-radial-contacts { margin: 6px 24px 12px; padding: 0 16px; border: 1px solid #3c5235; border-radius: 16px; background: #142010; color: #d2e5c4; }
.district-radial-contacts summary { min-height: 44px; padding: 12px 0; font-size: .9375rem; line-height: 1.4; cursor: pointer; }
.district-radial-contacts summary:hover { color: #e1ffc0; }
.district-radial-contacts summary:focus-visible { outline: 2px solid #a9ce7c; outline-offset: 3px; }
.district-radial-contact-hint { margin: 0 0 16px; color: #b9c9b0; font-size: .9375rem; line-height: 1.5; }
.district-radial-contact-hint[hidden] { display: none; }
.district-radial[data-enhanced] .district-directory-grid { display: block; max-width: 620px; margin: 0 auto; padding: 0 0 16px; }
.district-radial .district-card[hidden] { display: none !important; }
.district-radial[data-enhanced] .district-card { min-height: 0; padding: 18px; border-radius: 18px; border-top-width: 3px; box-shadow: 0 14px 35px #0004; background: #101812; }
.district-radial .district-card h3 { margin-top: 10px; font-size: 1.25rem; }
.district-radial .district-card p, .district-radial .district-card a, .district-radial .district-card-map-button { font-size: .9375rem; }
.district-radial .district-card-code, .district-radial .district-current-note, .district-radial .district-selected-note { font-size: .875rem; }
.district-radial .district-card-links { padding-top: 16px; }

@container district-radial (max-width: 849px) {
  .district-radial-content { height: auto; display: flex; flex-direction: column; padding: 18px; gap: 20px; }
  .district-radial-orbit { display: none; }
  .district-radial-names { position: relative; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .district-radial-name, .district-radial[data-open="true"] .district-radial-name, .district-radial[data-open="true"][data-ready="true"] .district-radial-name:hover {
    position: relative; top: auto; left: auto; width: 100%; height: auto; min-height: 64px;
    display: grid; grid-template-columns: 54px minmax(0, 1fr); border-radius: 16px; text-align: left; font-size: 1rem;
    transform: none; opacity: 1; transition: background .2s; transition-delay: 0s;
  }
  .district-radial-name:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 5px); justify-self: center; }
  .district-radial-preview { position: relative; top: auto; left: auto; translate: none; width: min(100%, 320px); height: 350px; margin-inline: auto; order: -1; }
  .district-radial-contacts { margin-inline: 18px; }
}
@container district-radial (max-width: 460px) {
  .district-radial-names { grid-template-columns: 1fr; }
  .district-radial-name:last-child:nth-child(odd) { width: 100%; }
  .district-radial-header { padding: 14px; }
  .district-radial-heading h2 { font-size: 1.2rem; }
  .district-radial-heading p { font-size: .65rem; }
  .district-radial-close { padding-inline: 10px; }
}
@media (max-width: 600px) { .district-radial[data-enhanced] { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 18px; } }
@media (prefers-reduced-motion: reduce) {
  .district-radial[data-enhanced], .district-radial-toggle, .district-radial-name { transition: none !important; }
  .district-radial-toggle:hover { scale: 1; }
  .district-radial[data-layout="radial"][data-open="true"][data-ready="true"] .district-radial-name:hover { transform: translate(-50%,-50%); }
}
@media (forced-colors: active) {
  .district-radial-toggle, .district-radial-name, .district-radial-code, .district-radial-close { color: ButtonText; background: ButtonFace; border: 1px solid ButtonText; box-shadow: none; }
  .district-radial-name[data-preview="true"] { outline: 3px solid Highlight; }
  .district-radial-orbit { display: none; }
  .district-radial-preview { border-color: CanvasText; background: Canvas; color: CanvasText; }
  .district-radial-preview-city { stroke: CanvasText; }
  .district-radial-preview-area { fill: Highlight; stroke: Highlight; }
}