.radar-filters { grid-template-columns: 100px 110px minmax(200px,2fr) repeat(3,minmax(130px,1fr)); }
.radar-filters:has(#age option[value="custom"]:checked) { grid-template-columns: 100px 110px minmax(200px,2fr) repeat(3,minmax(130px,1fr)) minmax(180px,1.4fr); }
.radar-filters .age-range { grid-column:auto; }
.age-range { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; grid-column:span 2; }
/* Min/max boxes only matter for a custom range; presets already define the ages. */
.filters:not(:has(#age option[value="custom"]:checked)) .age-range { display:none; }
.age-range input { width:100%; min-width:0; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:4px; padding:9px; font:inherit; }
#ageRangeError { grid-column:1/-1; color:#edaaa1; font-size:12px; }
#ageRangeError:empty { display:none; }
#filterDialog .radar-toolbar { display:grid; grid-template-columns:1fr; }
#filterDialog .radar-toolbar label { min-width:0; }
.radar-toolbar { display:flex; flex-wrap:wrap; gap:16px; align-items:end; margin:20px 0; }
.radar-toolbar label { display:grid; gap:6px; color:var(--muted); }
.radar-toolbar input { background:var(--surface); color:var(--ink); border:1px solid var(--line); padding:9px; border-radius:4px; }
.radar-tag { color:var(--accent); font-size:13px; }
#status { color:var(--muted); line-height:1.6; }
#radarChart { height:430px; width:100%; overflow:hidden; }
#historyChart { height:230px; width:100%; overflow:hidden; }
#detail { display:none; }
#detail.active { display:block; }
#watchlist { min-width:950px; width:100%; }
#watchlist button { background:none; border:0; color:var(--accent); text-align:left; cursor:pointer; font:inherit; }
#watchlist td { font-size:13px; }
.radar-pagination { display:flex; justify-content:flex-end; align-items:center; gap:20px; margin-top:16px; }
#radarTooltip { position:fixed; z-index:100; pointer-events:none; max-width:260px; padding:12px; border:1px solid var(--line); border-radius:4px; background:#202629; color:#fff; font-size:13px; white-space:pre-line; box-shadow:0 4px 20px #0008; }
#radarChart circle { cursor:pointer; }
#radarChart circle:hover, #radarChart circle:focus { stroke:#fff; stroke-width:2; outline:none; }
@media(max-width:1100px) { .radar-filters { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:700px) { .radar-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); position:static; } .radar-toolbar label { flex:1 1 160px; min-width:0; } .radar-toolbar input,.radar-toolbar select { width:100%; } .event-context { flex-wrap:wrap; } #radarChart { height:360px; } .radar-pagination { justify-content:space-between; gap:8px; } }
@media(max-width:1100px){.radar-filters:has(#age option[value="custom"]:checked){grid-template-columns:repeat(3,minmax(0,1fr))}}
#filterDialog .age-range{grid-column:1/-1}