/* Co zmienia jedna relacja (porownanie.html). Colours only from tokens.css (--rl-*). */
*{box-sizing:border-box}
html,body{margin:0;background:var(--rl-bg);color:var(--rl-ink);font:var(--rl-fs)/1.45 var(--rl-font)}
header{position:sticky;top:0;z-index:10;display:flex;gap:12px;align-items:center;padding:8px 16px;background:var(--rl-panel);backdrop-filter:blur(var(--rl-blur));border-bottom:1px solid var(--rl-line)}
header h1{font-size:var(--rl-fs-l);margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
header .sub{font-weight:600;color:var(--rl-accent)}
.logo{width:26px;height:18px;fill:var(--rl-danger)}
a{color:var(--rl-accent)}
a.back{font-weight:600;text-decoration:none;white-space:nowrap;min-height:44px;display:inline-flex;align-items:center}
button{font:inherit;cursor:pointer;border-radius:var(--rl-radius-s);border:1px solid var(--rl-line-strong);background:var(--rl-card);color:var(--rl-ink);padding:6px 12px}
button:disabled{opacity:.45;cursor:default}
button.primary{background:var(--rl-danger);color:var(--rl-on-danger);border-color:var(--rl-danger);font-weight:700}
button.primary.undo{background:var(--rl-card);color:var(--rl-ink);border-color:var(--rl-line-strong)}
button.big{font-size:var(--rl-fs-l);padding:10px 22px}
.mute{color:var(--rl-mute)}.small{font-size:var(--rl-fs-s)}
.wrap{max-width:1280px;margin:0 auto;padding:12px 16px 32px}
.lead{font-size:var(--rl-fs-xl);margin:8px 0 4px}
.intro p{margin:4px 0 0;max-width:980px}
.panel,.witness,.col{background:var(--rl-panel-solid);border:1px solid var(--rl-line);border-radius:var(--rl-radius-l);box-shadow:var(--rl-shadow)}
.witness{display:flex;gap:16px;align-items:center;padding:12px 16px;margin:14px 0;border-left:5px solid var(--rl-accent);transition:border-color .4s,box-shadow .4s}
.witness.on{border-left-color:var(--rl-danger);box-shadow:0 0 0 3px color-mix(in srgb,var(--rl-danger) 25%,transparent),var(--rl-shadow)}
.witness .wq{flex:1;min-width:0}
.witness blockquote{margin:6px 0;font-size:var(--rl-fs-l);font-style:italic}
.witness .tag{font-size:var(--rl-fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--rl-accent);border:1px solid var(--rl-accent);border-radius:9px;padding:0 7px}
.wbtn{display:flex;flex-direction:column;gap:6px;align-items:flex-start;flex:none;width:220px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.col{padding:10px 12px 12px;min-width:0}
.ch{margin:2px 0 8px;font-size:var(--rl-fs-l);display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill{font-size:var(--rl-fs-xs);font-weight:700;border-radius:9px;padding:1px 8px;background:var(--rl-panel-2);color:var(--rl-mute)}
.pill.on{background:var(--rl-danger);color:var(--rl-on-danger)}
.mapbox{position:relative;height:min(56vh,520px);min-height:300px;border-radius:var(--rl-radius);overflow:hidden;border:1px solid var(--rl-line);background:var(--rl-panel-2)}
.mapbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.busy{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--rl-panel-2);color:var(--rl-mute);font-weight:600}
.busy[hidden]{display:none}
.flash{position:absolute;inset:0;pointer-events:none;border:4px solid var(--rl-danger);border-radius:var(--rl-radius);opacity:0}
.flash.go{animation:flash 1.4s ease-out}
@keyframes flash{0%{opacity:0}15%{opacity:1}100%{opacity:0}}
.lbl{font-size:var(--rl-fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--rl-mute);margin:12px 0 6px;display:flex;gap:8px;flex-wrap:wrap}
.lbl .area{text-transform:none;letter-spacing:0;color:var(--rl-ink-2)}
ol.top3,ul.teams{list-style:none;margin:0;padding:0;position:relative}
.top3 li{display:flex;gap:10px;align-items:center;padding:7px 10px;margin-bottom:6px;border-radius:var(--rl-radius-s);background:var(--rl-card);border:1px solid var(--rl-line);transition:transform .7s cubic-bezier(.2,.8,.2,1),background .6s}
.top3 .rk{flex:none;width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 15px/1 var(--rl-font-num);background:var(--rl-panel-2);color:var(--rl-ink)}
.top3 li:first-child .rk{background:var(--rl-danger);color:var(--rl-on-danger)}
.top3 .nm{flex:1;min-width:0}
.top3 .ar{flex:none;font-size:var(--rl-fs-s);color:var(--rl-mute)}
.top3 .mv{flex:none;font-size:var(--rl-fs-xs);font-weight:700;border-radius:9px;padding:0 7px}
.mv.up{background:color-mix(in srgb,var(--rl-ok) 15%,transparent);color:var(--rl-ok)}
.mv.down{background:var(--rl-panel-2);color:var(--rl-mute)}
.mv.new{background:color-mix(in srgb,var(--rl-danger) 14%,transparent);color:var(--rl-danger)}
.top3 li.hit,.teams li.hit{background:color-mix(in srgb,var(--rl-warn) 30%,var(--rl-card))}
.teams li{display:flex;gap:8px;align-items:baseline;padding:4px 8px;border-radius:var(--rl-radius-s);font-size:var(--rl-fs-s);transition:background .6s}
.teams .tn{flex:none;font-weight:600;min-width:9.5em}
.teams .ts{flex:1}
.teams .te{flex:none;color:var(--rl-mute);font-family:var(--rl-mono);font-size:var(--rl-fs-xs)}
.why{padding:10px 16px;margin:16px 0}
.why h3{font-size:var(--rl-fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--rl-mute);margin:2px 0 6px}
.why ul{margin:0;padding-left:20px}
.why li{margin:4px 0}
.dim{opacity:.55}
.src #relive{margin-left:6px;min-height:36px;font-size:var(--rl-fs-s)}
.foot{margin-top:24px;border-top:1px solid var(--rl-line);padding-top:10px;color:var(--rl-mute);font-size:var(--rl-fs-s)}
.foot p{margin:4px 0}
@media (max-width:860px){.cols{grid-template-columns:1fr}.witness{flex-direction:column;align-items:stretch}.wbtn{width:auto}.teams .tn{min-width:0}
  .wbtn .big{min-height:48px}
  .mapbox{height:min(92vw,440px);min-height:280px}
  .col{scroll-margin-top:64px}}
/* phone: sector name gets its own full line, the "was 5." pill and % obszaru go under it; teams: ETA under the row */
@media (max-width:560px){
  header{padding:4px 12px}header h1{font-size:var(--rl-fs)}
  .top3 li{flex-wrap:wrap;row-gap:2px}.top3 li:has(.mv) .nm{flex:1 1 calc(100% - 40px)}.top3 .mv{margin-left:36px}.top3 .mv+.ar{margin-left:auto}
  .teams li{flex-wrap:wrap;column-gap:6px;row-gap:0;padding:5px 8px}.teams .ts{flex:1 1 60%}.teams .te{flex-basis:100%}
}
@media (prefers-reduced-motion:reduce){.top3 li,.teams li{transition:none}.flash.go{animation:none}}