.metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; border-block:1px solid var(--line); padding-block:24px; margin-bottom:28px; }
.metric { min-width:0; color:var(--muted); font-size:13px; }
.metric strong { display:block; color:#1b1d1e; font-size:24px; margin-top:8px; overflow-wrap:anywhere; }
.tabs { display:flex; gap:20px; flex-wrap:wrap; border-bottom:1px solid var(--line); }
.tabs button,.segmented button { background:none; color:var(--green); border:0; min-height:44px; padding:8px 4px; font-weight:600; border-bottom:3px solid transparent; }
.tabs button[aria-pressed="true"],.segmented button[aria-pressed="true"] { border-bottom-color:#a6093d; }
.tab-panel { padding-top:24px; }
.toolbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }
.toolbar .secondary { margin:0; }
.segmented { display:flex; gap:16px; }
#graphView { display:grid; grid-template-columns:minmax(0,1fr); gap:20px; }
#networkCanvas { position:relative; width:100%; height:clamp(620px,76svh,900px); min-width:0; touch-action:none; overflow:hidden; }
#networkCanvas:focus-visible { outline:2px solid #267385; outline-offset:2px; }
.network-portraits { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.map-toolbar { display:flex; align-items:flex-end; flex-wrap:wrap; gap:16px; margin-block:20px; }
.network-search { position:relative; flex:1; min-width:220px; max-width:420px; }
.network-search label { font-size:12px; }
.network-search input { width:100%; }
#networkSearchResults:not(:empty) { position:absolute; top:100%; left:0; right:0; background:white; border:1px solid var(--line); padding:8px; z-index:5; box-shadow:0 6px 16px #0001; }
#networkSearchResults button { display:block; width:100%; text-align:left; padding:10px; overflow-wrap:anywhere; }
.map-tools { display:flex; gap:6px; margin-left:auto; }
.map-tools svg { width:20px; height:20px; }
.network-path { display:flex; flex-wrap:wrap; gap:4px 12px; flex-basis:100%; border-top:1px solid var(--line); margin-top:4px; }
.network-path button { text-align:left; font-size:12px; padding-block:8px; overflow-wrap:anywhere; }
.network-path button+button::before { content:"> "; }
.map-error { padding:24px; }
.node-detail { display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; border-top:1px solid var(--line); padding-top:16px; overflow-wrap:anywhere; }
.node-detail[hidden] { display:none; }
.node-detail strong { flex-basis:100%; font-size:18px; }
.node-detail p { margin:4px 0; color:var(--muted); font-size:14px; }
.table-scroll { overflow:auto; margin-block:20px; }
table { border-collapse:collapse; width:100%; font-size:14px; }
th,td { padding:12px 10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; overflow-wrap:anywhere; }
th { font-size:12px; color:var(--muted); }
td input[type="checkbox"] { width:20px; height:20px; min-height:20px; accent-color:var(--green); }
.pagination { display:flex; align-items:center; gap:8px; justify-content:flex-end; }
.pagination span { margin-right:auto; font-size:13px; color:var(--muted); }
.icon-button { display:grid; place-items:center; width:40px; height:40px; padding:8px; border:1px solid var(--line); border-radius:6px; background:#fff; }
.icon-button img { width:20px; height:20px; }
.quote { margin-top:24px; border-top:2px solid #d7a719; padding-top:16px; max-width:560px; }
.quote h3 { font-size:20px; }
#confirmButton { max-width:340px; display:block; }
#rulesTable table { margin-bottom:24px; }
[data-node] { cursor:pointer; }
[data-node]:focus { outline:none; }
[data-node]:focus .node-ring,[data-node]:hover .node-ring { stroke:#a6093d; stroke-width:4; }
.node-pets { display:flex; flex-wrap:wrap; gap:12px; margin:12px 0; }
.node-pets figure { margin:0; width:72px; overflow-wrap:anywhere; }
.node-pets img { display:block; width:56px; height:56px; object-fit:cover; border-radius:50%; }
.node-pets figcaption { margin-top:5px; font-size:12px; }
.activity-section { padding-block:12px 24px; border-bottom:1px solid var(--line); margin-bottom:24px; }
.activity-section h2 { font-size:20px; margin:0; }
#activityChart { display:block; width:100%; height:220px; }
#activityChart g:focus { outline:2px solid #b30b47; }
#activityDetail { min-height:40px; font-size:13px; margin-bottom:0; }
.chart-legend { display:flex; flex-wrap:wrap; gap:12px 20px; font-size:12px; padding-block:16px; }
.chart-legend span::before { content:""; display:inline-block; width:9px; height:9px; background:#267385; margin-right:6px; }
.chart-legend span:nth-child(2)::before { background:#b30b47; }
.chart-legend strong { margin-left:auto; }
.distance-filters { flex-wrap:wrap; gap:12px; margin-bottom:16px; font-size:13px; }
#valueState { font-size:13px; margin-top:-12px; }
@media(max-width:700px) {
  h1 { font-size:26px; }
  .metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 14px; }
  .metric strong { font-size:21px; }
  .tabs { gap:12px; font-size:13px; }
  #graphView { grid-template-columns:minmax(0,1fr); gap:8px; }
  #networkCanvas { height:clamp(480px,70svh,700px); }
  .node-detail { margin-bottom:20px; }
  th,td { padding:10px 6px; font-size:12px; }
}