.radar-page { --radar-line: #e3e8ee; --radar-muted: #657383; padding-block: 1rem; }
.radar-page h1 { font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -.04em; margin-bottom: .3rem; }
.radar-page h2 { font-size: 1.05rem; margin: 0; }
.radar-page h3 { font-size: 1rem; }
.radar-page .eyebrow { font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; margin-bottom: .35rem; color: var(--radar-muted); }
.radar-header { gap: 1rem; margin-bottom: 1.25rem; }
.radar-header p:last-child { margin: 0; }
.radar-header > a { flex-shrink: 0; }
.radar-filters { display: grid; grid-template-columns: minmax(12rem, 2fr) repeat(3, minmax(0, 1fr)); gap: .75rem; align-items: end; padding: 1rem; border: 1px solid var(--radar-line); border-radius: .5rem; background: #fff; }
.radar-filters > div { min-width: 0; }
.radar-filters label { font-size: .75rem; font-weight: 600; display: block; margin-bottom: .3rem; }
.radar-filters .form-control, .radar-filters .form-select { font-size: .85rem; }
.radar-filter-actions { display: flex; gap: .5rem; }
.radar-scope { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1rem; font-size: .75rem; color: var(--radar-muted); }
.radar-scope > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem 1rem; }
.radar-scope strong { color: var(--bs-body-color); font-size: .95rem; }
.radar-workspace { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(380px, 1fr); grid-template-areas: 'map traffic'; gap: 1rem; align-items: stretch; }
.radar-page .card { min-width: 0; border-color: var(--radar-line); box-shadow: none; overflow: hidden; }
.radar-page .card-header { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .75rem; background: #fff; padding: .9rem 1rem; border-color: var(--radar-line); }
.radar-map-panel { grid-area: map; }
.radar-map-toolbar { display: flex; gap: .6rem; flex-wrap: wrap; }
.radar-map-toolbar .btn { font-size: .73rem; }
.radar-map-toolbar [aria-pressed='true'] { background: var(--bs-primary); color: #fff; }
.radar-map { height: 460px; background: #f0f5f8; overflow: hidden; touch-action: none; position: relative; cursor: grab; }
.radar-map:active { cursor: grabbing; }
.radar-map svg { width: 100%; height: 100%; display: block; }
.radar-map .radar-land { fill: #dce5df; stroke: #81998d; stroke-width: .45; vector-effect: non-scaling-stroke; }
.radar-map .radar-grid { fill: none; stroke: #cbd9e0; stroke-width: .5; vector-effect: non-scaling-stroke; }
.radar-map a:focus { outline: none; }
.radar-map a:focus path, .radar-map a:hover path { stroke: #142c44; stroke-width: 1.5; }
.radar-map .radar-selected { stroke: #fff; stroke-width: .8; }
.radar-map .radar-selection-ring { fill: #fff; fill-opacity: .8; stroke: #21588b; stroke-width: .65; }
.radar-map .earth-container { height: 100% !important; }
.radar-map-status { margin: 0; padding-block: .65rem; color: var(--radar-muted); font-size: .73rem; }
.radar-map-footer { padding: .75rem 1rem; border-top: 1px solid var(--radar-line); font-size: .72rem; color: var(--radar-muted); }
.radar-map-footer p { margin: .5rem 0 0; }
.radar-legend { display: flex; gap: .5rem 1rem; flex-wrap: wrap; }
.radar-aircraft-label { color: #285b9b; }
.radar-ships-label { color: #167267; }
.radar-results { grid-area: traffic; display: flex; flex-direction: column; }
.radar-results .card-header p { margin: .3rem 0 0; font-size: .73rem; color: var(--radar-muted); }
.radar-count { border-radius: 2rem; background: #edf3fb; color: #285b9b; padding: .25rem .65rem; font-size: .8rem; font-variant-numeric: tabular-nums; }
.radar-traffic-scroll { flex: 1 1 0; min-height: 280px; overflow: auto; }
.radar-traffic { font-size: .8rem; font-variant-numeric: tabular-nums; min-width: 1400px; }
.radar-traffic thead th { position: sticky; top: 0; z-index: 1; background: #f7f9fb; color: var(--radar-muted); font-size: .67rem; font-weight: 600; padding: .65rem .7rem; white-space: nowrap; }
.radar-traffic tbody th, .radar-traffic td { padding: .7rem; border-color: #edf0f3; }
.radar-traffic tbody th { min-width: 170px; max-width: 240px; font-weight: normal; overflow-wrap: anywhere; position: sticky; left: 0; z-index: 1; background: #fff; }
.radar-traffic thead th:first-child { left: 0; z-index: 3; }
.radar-traffic td { white-space: nowrap; }
.radar-traffic .radar-text-cell { min-width: 150px; max-width: 260px; white-space: normal; overflow-wrap: anywhere; }
.radar-traffic a { font-weight: 600; text-decoration: none; }
.radar-traffic a:hover { text-decoration: underline; }
.radar-traffic small { display: block; font-size: .67rem; color: var(--radar-muted); margin-top: .2rem; }
.radar-traffic .table-active { --bs-table-bg-state: #edf4ff; --bs-table-active-bg: #edf4ff; }
.radar-traffic .table-active th { background: #edf4ff; box-shadow: inset 3px 0 var(--bs-primary); }
.radar-pagination { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: .8rem 1rem; border-top: 1px solid var(--radar-line); font-size: .75rem; }
.radar-row-metadata { white-space: normal; min-width: 80px; }
.radar-page .radar-row-metadata summary { padding: .25rem 0; color: var(--bs-primary); }
.radar-row-metadata[open] { min-width: 240px; }
.radar-row-metadata dl { margin: .65rem 0 0; }
.radar-row-metadata dl > div + div { margin-top: .6rem; }
.radar-row-metadata dt { font-size: .72rem; color: var(--radar-muted); font-weight: normal; }
.radar-row-metadata dd { font-size: .8rem; margin: .15rem 0 0; overflow-wrap: anywhere; }
.radar-page .radar-stale { color: #885115; }
.radar-providers { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.radar-provider, .radar-methodology { border: 1px solid var(--radar-line); border-radius: .4rem; background: #fff; font-size: .8rem; }
.radar-page summary { padding: .85rem 1rem; cursor: pointer; }
.radar-provider summary span { margin-left: .75rem; color: var(--radar-muted); }
.radar-provider > div, .radar-methodology > div { padding: 0 1rem 1rem; }
.radar-provider p { overflow-wrap: anywhere; }
.radar-safety { font-size: .72rem; color: var(--radar-muted); margin-top: 1rem; }
.radar-page [id] { scroll-margin-top: 100px; }
.radar-page [hidden] { display: none !important; }
.radar-page :is(button, a, input, select, summary, [tabindex]):focus-visible { outline: 3px solid #5989e8; outline-offset: 3px; }
@media (min-width: 1400px) {
  .radar-filters { grid-template-columns: minmax(14rem, 2fr) repeat(5, minmax(0, 1fr)) auto; }
}
@media (max-width: 991px) {
  .radar-workspace { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'map' 'traffic'; }
  .radar-traffic-scroll { flex: auto; max-height: 460px; }
  .radar-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .radar-filters > div:first-child { grid-column: span 2; }
  .radar-header { align-items: start; }
}
@media (max-width: 575px) {
  .radar-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .radar-filters > div:first-child { grid-column: 1 / -1; }
  .radar-header, .radar-scope { flex-direction: column; align-items: start; }
  .radar-map { height: 330px; }
  .radar-providers { grid-template-columns: 1fr; }
  .radar-traffic tbody th, .radar-traffic td { padding: .6rem; }
}