/* Server population reuses the Pets view's panels and option groups; faction colors match the rest of the site. */
#population-view main { max-width: 1440px; padding-top: 24px; }
#population-view main > * { animation: none; }
.population-intro h1 { font: 400 clamp(26px, 3vw, 32px)/1.2 var(--display); margin: 0 0 8px; letter-spacing: -.02em; }
.population-intro .intro-copy { max-width: 70ch; color: var(--dim); margin: 0; }
#population-app a, #population-view footer a { color: var(--gold); text-underline-offset: 4px; }
#population-app ul, #population-app ol { list-style: none; margin: 0; padding: 0; }
:where(#population-app) li { display: block; padding: 0; border: 0; border-radius: 0; background: none; min-width: 0; }
.population-controls { margin: 18px 0 var(--section-gap); }
.population-panel { margin-top: var(--section-gap); }
.pop-total { margin: 10px 0; font-size: 18px; }
.pop-split { display: flex; gap: 2px; height: 32px; border-radius: 8px; overflow: hidden; }
.pop-split span { display: grid; place-items: center; min-width: 0; padding: 0 8px; color: #0a0d16; font-size: 13px; font-weight: 700; white-space: nowrap; }
[data-faction="Elyos"] { --faction: var(--elyos); }
[data-faction="Asmodian"] { --faction: var(--asmo); }
.pop-split span { background: var(--faction); }

.pop-list { display: grid; margin-top: 10px; }
.pop-row { border-top: 1px solid var(--line); }
.pop-row > button { display: grid; grid-template-columns: minmax(110px, 1.3fr) 64px minmax(80px, 2fr) 110px 90px 80px 120px; align-items: center; gap: 12px; width: 100%; min-height: 48px;
  padding: 6px 8px; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; border-radius: 8px; }
.pop-row > button:hover { background: #ffffff09; }
.pop-name { font-weight: 600; }
.pop-name::before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: var(--faction); }
.pop-share { font-variant-numeric: tabular-nums; font-weight: 700; }
.pop-est, .pop-change, .pop-load { color: var(--dim); font-size: 13px; font-variant-numeric: tabular-nums; }
.pop-change[data-trend="up"] { color: var(--live); }
.pop-change[data-trend="down"] { color: var(--pvp); }
.pop-meter { height: 8px; border-radius: 4px; background: var(--bg); overflow: hidden; }
.pop-meter::after { content: ''; display: block; width: var(--w); height: 100%; background: var(--faction); }
.pop-spark { width: 120px; height: 32px; }
.pop-line { fill: none; stroke: var(--faction, var(--gold)); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.pop-line[data-faction="Elyos"], .pop-dot[data-faction="Elyos"] { --faction: var(--elyos); }
.pop-line[data-faction="Asmodian"], .pop-dot[data-faction="Asmodian"] { --faction: var(--asmo); }
.pop-dot { fill: var(--faction, var(--gold)); }
.pop-band { fill: var(--dim); opacity: .22; }
.pop-grid { stroke: var(--line); stroke-width: 1; }
.pop-axis { fill: var(--dim); font: 11px var(--ui); }
.pop-detail { padding: 6px 8px 16px; }
.pop-chart { width: 100%; max-width: 720px; height: auto; }
.pop-data summary { cursor: pointer; color: var(--gold); font-size: 13px; padding: 8px 0; }
.pop-data table { border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.pop-data th, .pop-data td { padding: 4px 14px 4px 0; text-align: left; color: var(--dim); }
.pop-data th { font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.pop-sources { display: grid; gap: 10px; margin-top: 10px; }
.pop-sources li { display: grid; gap: 2px; }
.pop-sources small { color: var(--dim); }
.pop-status { justify-self: start; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--dim); font-size: 11px; }
.pop-status[data-granted="true"] { color: var(--live); border-color: var(--live); }
@media (max-width: 720px) {
  .pop-row > button { grid-template-columns: 1fr 64px 110px; }
  .pop-meter, .pop-est, .pop-load { display: none; }
  .pop-spark { width: 110px; }
}