/* League tables: only what style.css (shared with mate-web) does not already cover. */

/* karty z tabelami: mniej przezroczyste niż w style.css (było 60% krycia), tło słabiej prześwituje przez tekst */
.job { background: var(--card-bg, rgba(22, 27, 24, .90)); }

.table-wrap { overflow-x: auto; margin-top: 18px; }

.league { width: 100%; border-collapse: collapse; font-size: .94rem; }
.league th {
  font: 500 .78rem var(--head); letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold-ink, var(--gold)); text-align: center; padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.league td {
  padding: 11px 12px; text-align: center; white-space: nowrap;
  border-bottom: 1px solid var(--line); color: var(--body);
}
.league th:nth-child(2), .league td:nth-child(2) { text-align: left; white-space: normal; }
.league td:nth-child(1) { color: var(--muted); width: 3rem; }
.league td.pts { color: var(--text); font-weight: 600; }
.league tbody tr:last-child td { border-bottom: 0; }

/* our team: emerald side mark + soft emerald fill, same language as the cards */
.league tr.me td { background: var(--accent-soft); color: var(--text); font-weight: 500; }
.league tr.me td:first-child { box-shadow: inset 3px 0 0 var(--accent); color: var(--gold-ink, var(--gold)); font-weight: 600; }

.status { text-align: center; color: var(--muted); padding: 24px 0; }
.status.error { color: var(--loss-text, #f0a3a3); }

.updated { font-size: .82rem; color: var(--muted); margin-top: 18px; }

@media (max-width: 820px) {
  .league { font-size: .88rem; }
  .league th, .league td { padding: 9px 8px; }
}

/* phones: the table must fit the screen without side scrolling */
@media (max-width: 560px) {
  main { padding: 0 10px; }
  .job { padding: 16px 10px; }
  .job header h3 { font-size: 1.05rem; }
  .table-wrap { margin-top: 12px; }

  .league { font-size: .82rem; }
  .league th { font-size: .7rem; letter-spacing: .03em; padding: 8px 3px; }
  .league td { padding: 9px 3px; }
  .league td:nth-child(1) { width: 1.6rem; }
  .league td:nth-child(2) { padding-left: 6px; line-height: 1.3; }

  /* "Małe pkt" is the least important column: hidden on phones to make room for the team name */
  .league th:nth-child(7), .league td:nth-child(7) { display: none; }
}

/* ---------- match list: click a club team name in the table to expand ---------- */
.team-btn {
  all: unset; box-sizing: border-box; cursor: pointer; position: relative;
  color: var(--body); font-weight: 600; padding: 4px 22px 4px 0;
  transition: color .15s;
}
/* chevron */
.team-btn::before {
  content: ""; position: absolute; right: 4px; top: .7em; width: 7px; height: 7px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); transition: transform .2s;
}
.team-btn[aria-expanded="true"]::before { transform: rotate(-135deg); top: .85em; }
/* same effect as the top menu links: gold underline growing from the left, text goes white */
.team-btn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 1px; height: 2px;
  background: var(--gold); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.team-btn:hover, .team-btn:focus-visible, .team-btn[aria-expanded="true"] { color: var(--text); }
.team-btn:hover::after, .team-btn:focus-visible::after, .team-btn[aria-expanded="true"]::after { transform: scaleX(1); }
.team-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
@media (prefers-reduced-motion: reduce) { .team-btn::after, .team-btn { transition: none; } }
/* touch screens: a 44px tall hit area; negative margin keeps the table rows as tight as before */
@media (pointer: coarse), (max-width: 820px) {
  .team-btn { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; }
  .team-btn::before { top: 50%; margin-top: -6px; }
  .team-btn[aria-expanded="true"]::before { top: 50%; margin-top: -2px; }
  .team-btn::after { bottom: 10px; }
}

.league tr.matches-row td { background: var(--detail-bg, rgba(255, 255, 255, .02)); text-align: left; white-space: normal; padding: 6px 16px 16px; }
.matches-box h4 { font: 500 .75rem var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-ink, var(--gold)); margin: 14px 0 6px; }
.matches { list-style: none; margin: 0; }
.match {
  display: grid; grid-template-columns: 5.5rem 1fr auto; gap: 4px 12px; align-items: center;
  padding: 8px 10px; border-left: 3px solid var(--line); background: var(--panel-2); margin-bottom: 6px; font-size: .9rem;
}
/* the global li rule adds a bullet to every list item: not here */
.match::before { content: none; }
.match.win  { border-left-color: var(--accent); }
.match.loss { border-left-color: var(--loss-bar, #e0736a); }
.m-date { color: var(--muted); font-size: .82rem; }
.m-teams .us { font-weight: 600; color: var(--text); }
.m-score { text-align: right; display: flex; flex-direction: column; line-height: 1.25; }
.m-score b { font: 700 1rem var(--head); color: var(--text); }
.match.win .m-score b { color: var(--accent); }
.match.loss .m-score b { color: var(--loss-text, #f0a3a3); }
.m-score small { font-size: .75rem; color: var(--muted); }

@media (max-width: 560px) {
  .league tr.matches-row td { padding: 4px 6px 12px; }
  .match { grid-template-columns: 1fr auto; padding: 8px; }
  .m-date { grid-column: 1 / -1; }
}

/* ---------- static smoke background (variant 60): scattered soft puffs, emerald + gold ---------- */
body {
  background: var(--bg);
  background-attachment: scroll;
}

/* ---------- JKS outline: thin line, flat (no perspective), along the diagonal from bottom-left to top-right ---------- */
.bg-j {
  position: absolute; pointer-events: none; user-select: none;
  left: 50%; top: 50%;
  width: 80vw; aspect-ratio: 377.5 / 175.8; height: auto;
  transform: translate(-50%, -50%) rotate(-32deg);       /* fallback for browsers without CSS trig */
  opacity: .6;
}
/* exact corner-to-corner: the text is as long as the diagonal and tilted by the screen angle */
@supports (transform: rotate(atan2(-1px, 1px))) and (width: hypot(1px, 1px)) {
  .bg-j {
    width: calc(hypot(100vw, 100vh) * .74);
    transform: translate(-50%, -50%) rotate(atan2(-100vh, 100vw));
  }
}

/* ---------- match list: W/P tag, teams one under the other, "termin do ustalenia" ---------- */
.m-top { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 8px; }
.m-res {
  font: 600 .72rem var(--head); letter-spacing: .04em; line-height: 1;
  padding: 3px 6px; border-radius: 4px; border: 1px solid currentColor;
}
.match.win .m-res  { color: var(--accent); }
.match.loss .m-res { color: var(--loss-text, #f0a3a3); }
.m-teams span { display: block; }
.m-teams span + span { margin-top: 2px; }
.m-date.tbd { font-style: italic; }
@media (min-width: 561px) {
  .m-teams span { display: inline; }
  .m-teams span + span::before { content: " – "; color: var(--muted); font-weight: 400; }
}
.m-teams span:not(.us) { color: var(--body); }       /* rival names: body colour, not the muted grey */

/* the big JKS outline is quieter so it does not run through the headings */
.bg-j { opacity: var(--jks-opacity, .35); }

/* phones: set scores go on their own line so the team names get the full width */
@media (max-width: 560px) {
  .m-score { display: contents; }
  .m-top { justify-self: end; }
  .m-score small { grid-column: 1 / -1; text-align: left; margin-top: 2px; }
}

/* category heading ("Kategoria" + name) aligned to the left, like the cards below it */
.section-head { text-align: left; }

/* ---------- tables are collapsed by default: header = toggle (same hover as the top menu) ---------- */
details.fold > summary {
  list-style: none; cursor: pointer; position: relative; padding-right: 40px;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary::after {                       /* chevron */
  content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; margin-top: -8px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg); transition: transform .2s;
}
details.fold[open] > summary::after { transform: rotate(-135deg); margin-top: -3px; }
details.fold > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 3px; }
/* title: gold underline grows from the left on hover / focus / open, like the menu links */
details.fold > summary h3 { position: relative; display: inline-block; padding-bottom: 4px; transition: color .15s; }
details.fold > summary h3::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--gold); border-radius: 2px;
  transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
details.fold > summary:hover h3::after,
details.fold > summary:focus-visible h3::after,
details.fold[open] > summary h3::after { transform: scaleX(1); }
.sum-ours { margin-top: 6px; font-size: .88rem; color: var(--gold-ink, var(--gold)); }
details.fold[open] > summary { margin-bottom: 4px; }
@media (prefers-reduced-motion: reduce) {
  details.fold > summary::after, details.fold > summary h3::after { transition: none; }
}

/* no category heading above the cards any more: first section sits right under the top bar,
   the anchor links (menu) land on the first card of each category */
main > .section { padding-top: 14px; padding-bottom: 0; }
main > .section:first-of-type { padding-top: 32px; }
main > .section > .job + .job { margin-top: 14px; }
main > .section > .job { margin-bottom: 0; }

/* ---------- Inter in tables and match lists (titles and the rest keep Montserrat / Poppins) ---------- */
.table-wrap, .matches-box {
  font-family: "Inter", var(--sans);
  font-variant-numeric: tabular-nums;          /* equal-width digits: score columns line up */
}
.league { font-size: .94rem; }
.league th { font-family: inherit; font-weight: 600; font-size: .74rem; letter-spacing: .06em; }
.league td { font-weight: 400; }
.league td.pts { font-weight: 600; }
.league tr.me td, .team-btn { font-weight: 600; }
.match { font-size: .92rem; }
.m-date { font-size: .84rem; }
.m-teams .us { font-weight: 600; }
.m-score b { font-family: inherit; font-weight: 700; font-size: 1.05rem; }
.m-score small { font-size: .78rem; }
.m-res { font-family: inherit; font-weight: 600; }
.matches-box h4 { font-family: inherit; font-weight: 600; font-size: .76rem; letter-spacing: .08em; }
@media (max-width: 820px) {
  .league { font-size: .9rem; }
}
@media (max-width: 560px) {
  .league { font-size: .86rem; }
  .league th { font-size: .7rem; letter-spacing: .03em; }
}

/* note shown when the API is down and saved data is displayed */
.status.stale { color: var(--gold-ink, var(--gold)); font-size: .9rem; padding: 10px 0 4px; text-align: left; }

/* our team rows: the whole bar expands the matches, so it looks clickable */
.league tr.club-row { cursor: pointer; }
.league tr.club-row:hover td { background: var(--hover-bg, rgba(255, 255, 255, .045)); }
.league tr.me.club-row:hover td { background: var(--me-hover, rgba(16, 185, 129, .26)); }
.league tr.club-row:hover .team-btn { color: var(--text); }
.league tr.club-row:hover .team-btn::after { transform: scaleX(1); }     /* same gold underline as the button hover */

/* ---------- background layer ----------
   One fixed layer holds the smoke picture and the JKS outline. It is sized with the LARGEST viewport (lvh),
   so when a phone's address bar hides/shows while scrolling the background does not resize or jump.
   (background-attachment: fixed on body does exactly that on phones, and is ignored by iOS Safari.) */
.bg-fixed {
  position: fixed; top: 0; left: 0; width: 100%; height: 100vh; height: 100lvh;
  z-index: 0; overflow: hidden; pointer-events: none;
  background: var(--smoke) center / cover no-repeat;
  transform: translateZ(0);            /* own compositor layer: scrolling never repaints it */
}

/* =====================================================================
   Themes: dark is the default; light is used when the system prefers it
   or when the visitor picked it with the toggle (html[data-theme]).
   ===================================================================== */
:root {
  color-scheme: dark;
  --smoke: url("kleby.svg");
  --jks: url("jks.svg");
  --gold-ink: #E6B75A;                      /* gold used for TEXT (needs a darker shade on light) */
  --meta: #B5B8BE;
  --card-bg: rgba(22, 27, 24, .90);
  --card-edge: #2A342E;
  --topbar-bg: rgba(15, 18, 16, .88);
  --hairline: rgba(255, 255, 255, .07);
  --detail-bg: rgba(255, 255, 255, .02);
  --hover-bg: rgba(255, 255, 255, .045);
  --me-hover: rgba(16, 185, 129, .26);
  --loss-text: #f0a3a3;
  --loss-bar: #e0736a;
  --page-bg: linear-gradient(180deg, #0F1210 0%, #121A15 100%);
  --logo-grad: linear-gradient(90deg, #E6B75A, #10B981);
  --logo-shadow: drop-shadow(2px 3px 1px #000);
  --jks-opacity: .5;
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #FFFDF5;
  --panel: #FFFFFF;
  --panel-2: #F1F5EA;
  --text: #14261C;
  --body: #2E4237;
  --muted: #5F7266;
  --meta: #4F6258;
  --line: #DCE3D3;
  --accent: #0B6B3A;
  --accent-strong: #0B6B3A;
  --accent-soft: rgba(11, 107, 58, .10);
  --gold: #E0A800;
  --gold-ink: #7A5A00;
  --smoke: url("kleby-light.svg");
  --jks: url("jks-light.svg");
  --card-bg: rgba(255, 255, 255, .92);
  --card-edge: #D2DAC7;
  --topbar-bg: rgba(255, 253, 245, .92);
  --hairline: rgba(20, 38, 28, .10);
  --detail-bg: rgba(11, 107, 58, .045);
  --hover-bg: rgba(11, 107, 58, .06);
  --me-hover: rgba(11, 107, 58, .16);
  --loss-text: #B3362B;
  --loss-bar: #C94A3F;
  --page-bg: linear-gradient(180deg, #FFFDF5 0%, #F6F4E6 100%);
  --logo-grad: linear-gradient(90deg, #8A6200, #0B6B3A);
  --logo-shadow: none;
  --jks-opacity: .5;
}
/* the big outline follows the theme (an <img> cannot use CSS variables) */
.bg-j { background: var(--jks) center / contain no-repeat; }
:root[data-theme="light"] .league tr.me td { background: var(--accent-soft); }
:root[data-theme="light"] ::selection { background: var(--gold); color: #14261C; }

/* ---------- theme toggle (sun / moon), always visible in the top bar ---------- */
.theme-toggle {
  position: absolute; top: 50%; right: max(20px, 5vw); transform: translateY(-50%);
  width: 40px; height: 40px; display: grid; place-items: center;
  background: transparent; color: var(--text); cursor: pointer;
  border: 1px solid var(--line); border-radius: 50%;
  transition: border-color .15s, color .15s, background .15s;
}
.theme-toggle:hover { border-color: var(--gold); color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="light"] .theme-toggle .i-sun { display: block; }
:root[data-theme="light"] .theme-toggle .i-moon { display: none; }
@media (max-width: 820px) {
  .theme-toggle { top: 8px; right: 62px; transform: none; width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } }

/* ---------- menu anchor links ----------
   With collapsed cards the page is short, so a section near the end could not be scrolled up under the bar
   (the browser stops at the bottom of the page) and links like "Młodziczki" seemed to do nothing.
   The menu script measures how much room is missing and sets --room; the spacer exists only while it is needed
   (html.has-room), so there is no permanent empty gap between the last card and the footer. */
html.has-room main::after {
  content: ""; display: block; height: var(--room, 0px);
}
/* anchor jumps stop exactly under the sticky bar (value measured by the script, see index.html) */
html { scroll-padding-top: var(--bar-h, 64px); }
/* the section you jumped to flashes once, so it is obvious where you landed */
main > .section:target > .job:first-of-type {
  animation: jump-flash 1.6s ease-out 1;
}
@keyframes jump-flash {
  0%   { box-shadow: 0 0 0 0 rgba(230, 183, 90, .0); }
  15%  { box-shadow: 0 0 0 3px var(--gold), 0 0 24px 2px rgba(230, 183, 90, .45); }
  100% { box-shadow: 0 0 0 0 rgba(230, 183, 90, 0); }
}
@media (prefers-reduced-motion: reduce) {
  main > .section:target > .job:first-of-type { animation: none; }
}