/* ============ LINIA · tokens ============ */
.th-light{
  --bg:#F5F5F3; --surface:#FFFFFF; --surface-2:#F0F0ED; --surface-3:#E8E8E4;
  --border:#E3E3DF; --border-strong:#CDCDC8;
  --text:#16171A; --text-2:#55585E; --text-3:#8A8D93;
  --brand:#4B45C8; --brand-tint:#ECEBFA; --brand-text:#3A34A8;
  --best:#0B6B3A; --best-bg:#DCF1E3;
  --up:#1C64C8; --down:#C2530A;
  --fail:#C62D2D; --fail-bg:#FBE7E5;
  --delay:#94660A; --delay-bg:#F9EFD5;
  --ok:#1E7F46; --ok-bg:#E1F2E7;
  --div-1:#8A8D93; --div-2-bg:#E6E6E2; --div-3-bg:#16171A; --div-3-fg:#FFFFFF;
  --hard:#3C6DB4; --clay:#C0633A; --grass:#4A8B38;
  --hatch:rgba(22,23,26,.06);
  color-scheme:light;
}
.th-dark{
  --bg:#0F1113; --surface:#16191C; --surface-2:#1C2024; --surface-3:#242930;
  --border:#282D32; --border-strong:#3A4047;
  --text:#E6E8EA; --text-2:#A2A7AD; --text-3:#6D737A;
  --brand:#8E89F4; --brand-tint:#24224A; --brand-text:#B3AFFF;
  --best:#62D192; --best-bg:#12351F;
  --up:#6BA8FF; --down:#F08A45;
  --fail:#FF6A62; --fail-bg:#3B1A19;
  --delay:#E2B64B; --delay-bg:#33290F;
  --ok:#62D192; --ok-bg:#12351F;
  --div-1:#8A9098; --div-2-bg:#2C3238; --div-3-bg:#E6E8EA; --div-3-fg:#0F1113;
  --hard:#6C9BE0; --clay:#E08459; --grass:#76B860;
  --hatch:rgba(230,232,234,.05);
  color-scheme:dark;
}
.app{
  background:var(--bg); color:var(--text);
  font-family:'IBM Plex Sans',system-ui,sans-serif; font-size:13px; line-height:1.35;
  width:100%; height:100%; overflow:hidden; display:flex; flex-direction:column;
  -webkit-font-smoothing:antialiased;
}
.app *{box-sizing:border-box}
.mono,.num{font-family:'IBM Plex Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.t2{color:var(--text-2)} .t3{color:var(--text-3)}
.xs{font-size:11px} .sm{font-size:12px}

/* ---------- header ---------- */
.hdr{height:48px; flex:none; display:flex; align-items:center; gap:24px; padding:0 20px;
  background:var(--surface); border-bottom:1px solid var(--border)}
.logo{display:flex; align-items:center; gap:8px; font-weight:600; letter-spacing:.08em; font-size:13px}
.logo i{width:14px; height:14px; background:var(--brand); display:block; border-radius:2px; position:relative}
.logo i:after{content:''; position:absolute; left:3px; right:3px; top:6px; height:2px; background:var(--surface)}
.logo span{color:var(--text-3); font-weight:400; letter-spacing:0; margin-left:2px}
.nav{display:flex; height:100%}
.nav a{display:flex; align-items:center; gap:7px; padding:0 14px; height:100%; color:var(--text-2); text-decoration:none;
  border-bottom:2px solid transparent; font-weight:500}
.nav a.on{color:var(--text); border-bottom-color:var(--brand)}
.nav .cnt{font-size:11px; padding:1px 5px; border-radius:3px; background:var(--surface-2); color:var(--text-2)}
.hdr-r{margin-left:auto; display:flex; align-items:center; gap:14px}
.refresh{display:flex; align-items:center; gap:7px; color:var(--text-2); font-size:12px}
.refresh svg{display:block}
.collect{display:flex; align-items:center; gap:6px; font-size:12px; padding:3px 8px 3px 7px; border-radius:4px; font-weight:500; text-decoration:none}
.collect.fail{background:var(--fail-bg); color:var(--fail)}
.collect.ok{color:var(--text-2)}
.iconbtn{width:28px; height:28px; border:1px solid var(--border); border-radius:4px; display:grid; place-items:center; color:var(--text-2); background:var(--surface)}

/* ---------- filter bar ---------- */
.fbar{flex:none; display:flex; align-items:center; gap:14px; padding:10px 20px; border-bottom:1px solid var(--border); background:var(--bg); flex-wrap:wrap}
.seg{display:inline-flex; border:1px solid var(--border-strong); border-radius:4px; overflow:hidden; background:var(--surface)}
.seg b{font-weight:500; padding:4px 11px; font-size:12px; color:var(--text-2); border-left:1px solid var(--border)}
.seg b:first-child{border-left:0}
.seg b.on{background:var(--text); color:var(--surface)}
.chip{display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border:1px solid var(--border-strong); border-radius:4px; font-size:12px; color:var(--text-2); background:var(--surface); white-space:nowrap}
.chip.on{border-color:var(--brand); color:var(--brand-text); background:var(--brand-tint)}
.chip.sel:after{content:''; width:0; height:0; border:4px solid transparent; border-top-color:var(--text-3); margin-top:4px; margin-left:2px}
.flabel{font-size:11px; color:var(--text-3); text-transform:uppercase; letter-spacing:.06em; margin-right:-6px}
.fsep{width:1px; height:20px; background:var(--border)}

/* ---------- odds cell ---------- */
.odd{display:inline-flex; align-items:center; justify-content:flex-end; gap:3px; min-width:52px; height:22px; padding:0 6px;
  border-radius:3px; font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums; font-size:13px; position:relative}
.odd.best{background:var(--best-bg); color:var(--best); font-weight:600}
.odd.na{color:var(--text-3); background:repeating-linear-gradient(135deg,var(--hatch) 0 3px,transparent 3px 6px)}
.odd.stale{color:var(--text-3); font-style:italic}
.odd .mv{font-size:8px; line-height:1; width:8px; text-align:center}
.odd .mv.up{color:var(--up)} .odd .mv.dn{color:var(--down)}
.odd .mv.none{visibility:hidden}
.pop{display:block; font-size:10px; color:var(--text-3); font-family:'IBM Plex Mono',monospace; text-align:right; line-height:1; margin-top:1px; padding-right:6px}

/* ---------- divergence tag ---------- */
.dv{display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 6px; border-radius:3px; font-size:12px; white-space:nowrap;
  font-family:'IBM Plex Mono',monospace; font-variant-numeric:tabular-nums}
.dv .bars{display:inline-flex; gap:1.5px; align-items:flex-end}
.dv .bars i{width:2.5px; background:currentColor; opacity:.25; display:block}
.dv .bars i.f{opacity:1}
.dv.l1{color:var(--text-2); box-shadow:inset 0 0 0 1px var(--border-strong)}
.dv.l2{background:var(--div-2-bg); color:var(--text); font-weight:500}
.dv.l3{background:var(--div-3-bg); color:var(--div-3-fg); font-weight:600}
.dv .mk{font-family:'IBM Plex Sans'; font-weight:400; opacity:.75; font-size:11px}

/* ---------- surface ---------- */
.srf{display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.srf .ic{width:11px; height:11px; display:block; flex:none; position:relative}
.srf .ic.hard{background:var(--hard); border-radius:1px}
.srf .ic.clay{background:var(--clay); border-radius:50%}
.srf .ic.grass{width:0; height:0; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:11px solid var(--grass)}
.srf .roof{width:15px; height:15px; display:grid; place-items:center; border-top:2px solid var(--text-2); padding-top:1px}

/* ---------- status ---------- */
.st{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:500; white-space:nowrap}
.st .d{width:8px; height:8px; display:block; flex:none}
.st.ok{color:var(--ok)} .st.ok .d{background:var(--ok); border-radius:50%}
.st.delay{color:var(--delay)} .st.delay .d{border:2px solid var(--delay); border-radius:50%; background:transparent; width:9px;height:9px}
.st.fail{color:var(--fail)} .st.fail .d{background:var(--fail); transform:rotate(45deg); width:8px; height:8px}
.st.pill{padding:2px 8px 2px 7px; border-radius:4px}
.st.pill.ok{background:var(--ok-bg)} .st.pill.delay{background:var(--delay-bg)} .st.pill.fail{background:var(--fail-bg)}

/* ---------- tables ---------- */
.tbl{width:100%; border-collapse:separate; border-spacing:0}
.tbl th{font-weight:500; font-size:11px; color:var(--text-3); text-align:left; padding:0 8px; height:30px; border-bottom:1px solid var(--border-strong);
  text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; background:var(--surface)}
.tbl th.r,.tbl td.r{text-align:right}
.tbl td{padding:0 8px; border-bottom:1px solid var(--border); height:32px; white-space:nowrap; background:var(--surface)}
.panel{background:var(--surface); border:1px solid var(--border); border-radius:6px; overflow:hidden}

.mr-cell{display:flex; flex-direction:column; align-items:flex-end; gap:2px; padding:5px 0}
.bkh{display:flex; align-items:center; justify-content:flex-end; gap:5px}
.bkh .sd{width:6px;height:6px;border-radius:50%}

.link{color:var(--brand-text); text-decoration:none; font-weight:500}
.kbd{font-family:'IBM Plex Mono'; font-size:10.5px; border:1px solid var(--border-strong); border-bottom-width:2px; border-radius:3px; padding:0 4px; color:var(--text-2)}
.sortd:after{content:' ↓'; color:var(--brand-text)}

/* ---- doc sheets ---- */
.sheet{padding:40px 44px; overflow:auto}
.sheet h2{font-size:22px; font-weight:600; margin:0 0 4px; letter-spacing:-.01em}
.sheet h3{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.08em; color:var(--text-3); margin:28px 0 12px}
.sheet p{margin:0; color:var(--text-2); max-width:760px; text-wrap:pretty}
.note{font-size:12px; color:var(--text-2); line-height:1.5; text-wrap:pretty}

/* ---------- animations & accessibility ---------- */
@keyframes refresh-ring {
  from { stroke-dashoffset: 34.5; }
  to { stroke-dashoffset: 0; }
}
.refresh-circle {
  animation: refresh-ring 60s linear infinite;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

/* ---------- responsive helpers ---------- */
.view-desktop { display: block; }
.view-tablet { display: none; }
.view-mobile { display: none; }

@media (min-width: 768px) and (max-width: 1023px) {
  .view-desktop { display: none; }
  .view-tablet { display: block; }
  .view-mobile { display: none; }
}

@media (max-width: 767px) {
  .view-desktop { display: none; }
  .view-tablet { display: none; }
  .view-mobile { display: block; }
}


/* P09 B7c: ekran meczu na telefonie — kolumna zamiast wiersza, panel
   wykresu w karcie (bez wyjeżdżania poza ekran), tabela legendy czytelna. */
@media (max-width: 767px) {
  /* !important: style inline kontenera (overflow: hidden) muszą ustąpić. */
  .mecz-main {
    flex-direction: column !important;
    overflow: visible !important;
    padding: 12px 12px;
    gap: 12px;
  }
  .mecz-boczna {
    width: 100% !important;
    max-width: 100%;
    overflow-y: visible !important;
  }
  #chart-panel {
    width: 100% !important;
    max-width: 100%;
  }
  #chart-panel table.tbl {
    font-size: 11px;
  }
  #chart-panel table.tbl th,
  #chart-panel table.tbl td {
    padding-left: 4px;
    padding-right: 4px;
  }
}

/* ---------- responsywny nagłówek i filtry (P02 C9/C10/K11) ---------- */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Artboard tablet 768: kontrolka zbierania jako sam romb (pełna etykieta
     w title), zakładki w nagłówku zostają. */
  .collect .lbl { display: none; }
  .hdr { gap: 12px; padding: 0 14px; }
  .nav a { padding: 0 10px; }
}
@media (max-width: 767px) {
  /* Artboard telefon 390: jedna nawigacja — zakładki pod nagłówkiem;
     w nagłówku logo + kontrolka zbierania + wskaźnik odświeżenia + motyw. */
  .hdr .nav { display: none; }
  .hdr { gap: 10px; padding: 0 12px; }
  .hdr-r { gap: 10px; }
  .refresh { font-size: 11px; }
}

/* Rozwijany panel „Filtry” (details/summary) na tablecie i telefonie. */
details.fdrop { position: relative; margin-left: auto; }
details.fdrop > summary { list-style: none; cursor: pointer; user-select: none; }
details.fdrop > summary::-webkit-details-marker { display: none; }
details.fdrop[open] > summary {
  border-color: var(--brand);
  color: var(--brand-text);
  background: var(--brand-tint);
}
.fdrop-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 264px;
  padding: 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}
@media (max-width: 767px) {
  /* Telefon: kompaktowy nagłówek bez poziomego przewijania (P02 C10/K11):
     logo bez podtytułu, samo „0 s” obok pierścienia odświeżenia. */
  .logo span { display: none; }
  .refresh .refresh-txt { display: none; }
  .hdr { gap: 8px; }
  .hdr-r { gap: 8px; }
}