/* Plansza III — Życie artykułów */

.filters {
  position: absolute; left: 24px; right: 24px; top: 16px; z-index: 5;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.filters select { max-width: 220px; }
.filters .legend span { cursor: pointer; }
.filters .legend span:hover { color: var(--paper); }

/* wyścig */
#race text { font-family: var(--serif); }
#race .bar-label { fill: var(--paper); font-size: 15px; }
#race .bar-value { fill: var(--ink-muted); font-size: 14px; font-variant-numeric: tabular-nums; }
#race .bar rect { opacity: 0.78; }
#race .bar:hover rect { opacity: 1; }
#race .bar.selected rect { opacity: 1; stroke: var(--brass); stroke-width: 1.5; }
#race .bar.selected .bar-label { fill: var(--brass); }
#race .bar { cursor: pointer; }
#race .axis text { font-family: var(--sans); }
#race .caption { fill: var(--ink-faint); font-family: var(--sans); font-size: 12px; }
#race .empty-note { fill: var(--ink-muted); font-size: 18px; font-style: italic; }

.controls #play { min-width: 92px; }
.controls input[type="range"] { width: clamp(160px, 26vw, 420px); }

/* panel */
.search { position: relative; margin-bottom: 20px; }
.search input { width: 100%; }
.hits {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 10;
  background: var(--ground-lift); border: 1px solid var(--rule); border-radius: 3px; padding: 4px 10px;
  box-shadow: 0 8px 24px rgba(3, 5, 9, 0.45); max-height: 320px; overflow-y: auto;
}
.hits li { cursor: pointer; }
.hits li:hover, .hits li.active { color: var(--brass); }
.hits li .serif { font-size: var(--t-md); }

.card h2 { font-size: var(--t-2xl); line-height: 1; margin-bottom: 4px; }
.card .area-chip { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-muted); font-size: var(--t-sm); }
.card .area-chip i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.card .hero { margin: 14px 0 2px; font-family: var(--serif); font-size: var(--t-xl); line-height: 1.15; }
.card .hero b { color: var(--brass); font-weight: 500; }
.card .sub { color: var(--ink-muted); font-size: var(--t-sm); margin-bottom: 4px; }
.card .life { width: 100%; height: 150px; display: block; margin-top: 8px; overflow: visible; }
.card .life .axis text { font-size: 10px; }
.card .life .change { stroke: var(--brass); stroke-width: 1.5; }
.card .life .born { stroke: var(--paper); stroke-dasharray: 2 3; }
.card .life .born-label, .card .life .change-label { font-family: var(--serif); font-size: 11px; fill: var(--brass); }
.card .life .born-label { fill: var(--ink-muted); }
.card .areas li { display: grid; grid-template-columns: 1fr 100px 52px; gap: 10px; align-items: center; border-bottom: 0; padding: 3px 0; }
.card .areas .track { height: 5px; background: rgba(36, 45, 61, 0.6); border-radius: 2px; overflow: hidden; }
.card .areas .track i { display: block; height: 100%; }
.card .areas .v { text-align: right; }
.card .ego { width: 100%; height: 230px; display: block; overflow: visible; }
.card .ego text { font-family: var(--serif); font-size: 12px; fill: var(--paper); }
.card .ego .partner { cursor: pointer; }
.card .ego .partner.foreign { cursor: default; opacity: 0.6; }
.card .ego .partner:hover text { fill: var(--brass); }
.card .ego line { stroke: var(--paper); stroke-opacity: 0.45; }
.card .ego .partner:hover + line { stroke-opacity: 1; }
.card .back { margin-top: 24px; }

.lists h3 { margin-top: 24px; }
.lists .rows li .l { display: flex; flex-direction: column; }
.lists .rows li .l small { color: var(--ink-faint); font-size: var(--t-xs); }
.lists .rows li .serif { font-size: var(--t-md); }

@media (max-width: 900px) {
  .filters select { max-width: 160px; }
}