/* GORJE-224c: training statistics (orodja/statistika.js: /klub-statistika and the block on Moja družina; from the mockup design/statistika-224/maket). Tokens of sistem.css; the 7 colours of the
   training kinds pass the dataviz validator in fixed order (blue, orange, aqua, violet, magenta, green, yellow), the light ones
   carry direct labels and the list below is the table view. Race days are yellow, cancelled is grey with a stroke. */
.st{--k-sneg:#2a78d6;--k-rolke:#eb6834;--k-kros:#1baf7a;--k-zal:#6250d6;--k-imit:#e87ba4;--k-kolo:#008300;--k-drugo:#8a979e;--k-tekma:#eda100;
  --st-ease:cubic-bezier(.23,1,.32,1);--st-skok:cubic-bezier(.34,1.56,.64,1);--st-r:1.5rem;
  max-width:84rem;margin:0 auto;padding:clamp(1.25rem,3vw,2.5rem) clamp(16px,3vw,40px) 5rem;color:var(--noc)}
.st *{box-sizing:border-box}
.st button{font:inherit;color:inherit;cursor:pointer}
.st h2{margin:0;font-weight:600;font-size:var(--t-xl);letter-spacing:-.02em}

/* ---------------------------------------------------------------- header */
.st-glava{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.25rem 2rem}
.st-glava-besedilo{max-width:44rem}
.st-naslov{margin:0;font-weight:400;font-size:clamp(2.25rem,5vw,3.75rem);line-height:1;letter-spacing:-.035em;text-wrap:balance}
.st-naslov b{font-weight:800}
.st-uvod{margin:.85rem 0 0;font-size:var(--t-lg);color:var(--megla);line-height:1.45;text-wrap:pretty}
.st-primer{display:flex;gap:.6rem;align-items:flex-start;margin:1.5rem 0 0;padding:.8rem 1rem;background:var(--led);border-radius:var(--r-polje);font-size:var(--t-sm);line-height:1.45}
.st-primer svg{flex:none;width:18px;height:18px;margin-top:2px;color:var(--jezero)}

/* ---------------------------------------------------------------- filters */
.st-filtri{margin-top:1.5rem;background:var(--bela);border-radius:var(--st-r);box-shadow:var(--senca-kartica);padding:clamp(1rem,2vw,1.5rem);display:grid;gap:1.1rem}
.st-otroci{display:flex;flex-wrap:wrap;gap:.5rem}
.st-otrok{display:inline-flex;align-items:center;gap:.55rem;border:1.5px solid var(--crta);background:var(--bela);border-radius:999px;padding:.3rem .9rem .3rem .3rem;font-weight:700}
.st-otrok i{width:2rem;height:2rem;border-radius:50%;display:grid;place-items:center;font:700 .95rem/1 var(--f-glas);font-style:normal;background:var(--led);color:var(--jezero)}
.st-otrok[aria-pressed="true"]{border-color:var(--noc);background:var(--noc);color:#fff}
.st-otrok[aria-pressed="true"] i{background:#fff;color:var(--noc)}
.st-obdobja{display:flex;flex-wrap:wrap;gap:.45rem}
.st-cip{border:1px solid var(--crta);background:var(--bela);border-radius:999px;padding:.5rem .95rem;font-weight:600;font-size:var(--t-sm);transition:background var(--cas-odziv),border-color var(--cas-odziv),color var(--cas-odziv)}
.st-cip:hover{border-color:var(--megla)}
.st-cip[aria-pressed="true"]{background:var(--noc);border-color:var(--noc);color:#fff}
.st-cip:disabled{color:var(--crta);border-style:dashed;cursor:not-allowed}
.st-cip small{font-weight:500;opacity:.75}

/* the two-thumb slider over the season, with key dates underneath */
.st-izbire{display:flex;flex-wrap:wrap;gap:.6rem 1rem}
.st-izbira{display:flex;align-items:center;gap:.5rem;font-size:var(--t-sm);font-weight:700;color:var(--megla)}
.st-izbira select{font:600 var(--t-sm) var(--f-tekst);color:var(--noc);border:1px solid var(--crta);border-radius:var(--r-polje);background:var(--bela);padding:.5rem 2rem .5rem .75rem}
/* GORJE-224e: a long group name must not widen the select past a phone's card (the grid column grew with it, and so did
   every row of chips); the select shrinks and cuts its text instead */
.st-filtri>*{min-width:0}
.st-izbira{max-width:100%;min-width:0}
.st-izbira select{min-width:0;max-width:100%;text-overflow:ellipsis}
.st-vrste{display:flex;flex-wrap:wrap;gap:.45rem}
.st-vrsta{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--crta);background:var(--bela);border-radius:999px;padding:.4rem .85rem .4rem .5rem;font-weight:600;font-size:var(--t-sm);transition:opacity var(--cas-odziv),border-color var(--cas-odziv)}
.st-vrsta i{width:14px;height:14px;border-radius:50%;background:var(--c);transition:transform .2s var(--st-skok)}
.st-vrsta[aria-pressed="false"]{opacity:.45}
.st-vrsta[aria-pressed="false"] i{transform:scale(.55)}
.st-vrsta b{font:700 var(--t-base) var(--f-glas);color:var(--megla)}

/* ---------------------------------------------------------------- counters */
.st-stevci{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,11rem),1fr));gap:clamp(.6rem,1.4vw,1rem);margin-top:1.25rem}
.st-stevec{position:relative;background:var(--bela);border-radius:var(--st-r);box-shadow:var(--senca-kartica);padding:1.15rem 1.25rem 1.2rem;display:flex;flex-direction:column;gap:.35rem;overflow:hidden;animation:st-gor .6s var(--st-ease) both;animation-delay:calc(var(--i,0) * 60ms)}
/* no coloured strip on the cards (Kir 28. 10. 2026, GORJE-222b): a dot of the colour before the name (the light colours fail contrast as text) */
.st-stevec-ime{display:flex;align-items:center;gap:.45rem}
.st-stevec-ime::before{content:"";flex:none;width:.7rem;height:.7rem;border-radius:50%;background:var(--c,var(--crta))}
.st-stevec-ime{font-weight:700;font-size:var(--t-sm);color:var(--megla)}
.st-stevec-st{font:700 clamp(2.75rem,5vw,4rem)/.9 var(--f-glas);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.st-stevec-st small{font-size:.48em;font-weight:600;color:var(--megla);margin-left:.15em;letter-spacing:0}
.st-stevec-pod{font-size:var(--t-sm);color:var(--megla);line-height:1.35}
.st-stevec-pod a{color:var(--jezero);font-weight:700}
.st-stevec--glavni{background:var(--noc);color:#fff}
.st-stevci--osebno .st-stevec--glavni{grid-column:1/-1}   /* GORJE-224h: the family view has 5 counters - the big one on its own row, 4 under it, none left alone */
.st-stevec--glavni .st-stevec-ime,.st-stevec--glavni .st-stevec-pod,.st-stevec--glavni small{color:#c9d6de}
.st-stevec--glavni .st-stevec-ime::before{background:var(--gradient)}
.st-vrstica{display:flex;height:10px;border-radius:999px;overflow:hidden;gap:2px;margin-top:.35rem;background:rgba(255,255,255,.14)}
.st-vrstica span{background:var(--c);transform-origin:0 50%;animation:st-raste .9s var(--st-ease) both .25s}

/* ---------------------------------------------------------------- panels */
.st-mreza{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(.75rem,1.6vw,1.25rem);margin-top:clamp(.75rem,1.6vw,1.25rem)}
.st-kos{background:var(--bela);border-radius:var(--st-r);box-shadow:var(--senca-kartica);padding:clamp(1.1rem,2vw,1.6rem);min-width:0}
.st-kos[hidden]{display:none}
.st-kos--seznam{margin-top:clamp(.75rem,1.6vw,1.25rem)}
.st-kos-glava{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.3rem 1rem;margin-bottom:1rem}
.st-kos-opis{margin:0;font-size:var(--t-sm);color:var(--megla);max-width:40rem}
@media (min-width:64rem){
  .st-mreza.osebno .st-kos--tedni{grid-column:1}
  .st-mreza{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
  .st-kos--koledar,.st-kos--tedni,.st-kos--skupina,.st-kos--vodstvo{grid-column:1/-1}
  .st-kos--koledar{grid-column:1}
  .st-kos--vrste{grid-column:2;grid-row:1}
  .st-kos--meseci{grid-column:2}
}

/* calendar: weeks are columns, Monday on top (GitHub / Strava style) */
.st-koledar{overflow-x:auto;padding-bottom:.4rem;scrollbar-width:thin}
.st-kol{display:grid;grid-template-rows:auto repeat(7,auto);grid-auto-flow:column;gap:clamp(3px,.5vw,6px);width:min(100%,var(--sir));min-width:calc(var(--n) * 20px + 2.5rem)}
.st-kol .st-cel{aspect-ratio:1;width:100%}
.st-kol-dan{font-size:11px;font-weight:700;color:var(--megla);display:flex;align-items:center;justify-content:flex-end;padding-right:4px;width:auto}
.st-kol-mesec{font-size:11px;font-weight:700;color:var(--megla);white-space:nowrap;align-self:end}
.st-cel{position:relative;border:0;padding:0;border-radius:6px;background:var(--sneg);box-shadow:inset 0 0 0 1px rgba(30,52,68,.05);transition:transform .16s var(--st-ease);animation:st-pik .5s var(--st-skok) both;animation-delay:calc(var(--i,0) * 6ms)}
.st-cel:hover,.st-cel:focus-visible{transform:scale(1.22);z-index:2}
.st-cel.ima{background:var(--c)}
.st-cel.zgresil{background:var(--bela);box-shadow:inset 0 0 0 2px var(--c)}
.st-cel.opr{background:repeating-linear-gradient(135deg,var(--bela) 0 3px,var(--c) 3px 5px);opacity:.75}
.st-cel.odpadel{background:linear-gradient(135deg,transparent 45%,var(--megla) 45% 55%,transparent 55%),var(--led)}
.st-cel.plan{background:var(--bela);box-shadow:inset 0 0 0 1.5px var(--crta);background-image:radial-gradient(circle,var(--c) 0 3px,transparent 3.5px)}
.st-cel.zunaj{opacity:.25}
.st-cel.danes{outline:2px solid var(--noc);outline-offset:2px}
.st-cel .tk{position:absolute;right:-3px;top:-3px;width:10px;height:10px;border-radius:50%;background:var(--k-tekma);box-shadow:0 0 0 2px var(--bela)}
.st-cel.izbran{outline:3px solid var(--jezero);outline-offset:2px}
.st-koledar-legenda{display:flex;flex-wrap:wrap;gap:.4rem 1rem;list-style:none;margin:.9rem 0 0;padding:0;font-size:var(--t-xs);color:var(--megla);font-weight:600}
.st-koledar-legenda li{display:flex;align-items:center;gap:.4rem}
.st-koledar-legenda .st-cel{width:16px;height:16px;animation:none;display:inline-block;--c:var(--k-rolke)}
.st-dan{margin-top:1rem;border-top:1px solid var(--crta);padding-top:1rem;animation:st-gor .35s var(--st-ease) both}
.st-dan h3{margin:0 0 .6rem;font:600 var(--t-lg) var(--f-tekst)}

/* kinds: horizontal bars, direct labels */
.st-palice{display:grid;gap:.75rem}
.st-palica{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr) auto;align-items:center;gap:.75rem;border:0;background:none;padding:0;text-align:left}
.st-palica-ime{font-weight:600;font-size:var(--t-sm)}
.st-palica-tir{height:22px;border-radius:0 6px 6px 0;background:var(--sneg);overflow:hidden}
.st-palica-tir span{display:block;height:100%;border-radius:0 6px 6px 0;background:var(--c);transform-origin:0 50%;animation:st-raste .8s var(--st-ease) both;animation-delay:calc(var(--i,0) * 70ms)}
.st-palica-st{font:700 var(--t-xl) var(--f-glas);min-width:2.5ch;text-align:right;font-variant-numeric:tabular-nums}
.st-palica-st small{font:500 var(--t-xs) var(--f-tekst);color:var(--megla);margin-left:.25rem}
.st-palica.utisan{opacity:.35}
.st-povzetek{margin:1.1rem 0 0;padding-top:1rem;border-top:1px solid var(--crta);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.st-povzetek div{font-size:var(--t-xs);color:var(--megla);font-weight:600}
.st-povzetek b{display:block;font:700 var(--t-2xl) var(--f-glas);color:var(--noc)}

/* weeks: stacked columns by kind, 2px gaps, rounded data ends */
.st-tedni svg{display:block;width:100%;height:auto;overflow:visible}
.st-tedni text{font:600 11px var(--f-tekst);fill:var(--megla)}
.st-tedni .mreza line{stroke:var(--crta);stroke-width:1;stroke-dasharray:2 4}
.st-tedni .stolp rect{transform-box:fill-box;transform-origin:50% 100%;animation:st-gori .7s var(--st-ease) both;animation-delay:calc(var(--i,0) * 25ms)}
.st-tedni .stolp:hover rect,.st-tedni .stolp:focus rect{filter:brightness(1.08)}
.st-tedni .zad{fill:transparent}
.st-tedni .odp{fill:none;stroke:var(--megla);stroke-width:1.5;stroke-dasharray:3 3}

/* my months: self comparison, one row per month */
.st-meseci{display:grid;gap:.9rem}
.st-mesec{display:grid;grid-template-columns:6.75rem minmax(0,1fr) auto;align-items:center;gap:.75rem}
.st-mesec-ime{font-weight:700}
.st-mesec-pike{display:flex;flex-wrap:wrap;gap:4px}
.st-mesec-pike i{width:14px;height:14px;border-radius:4px;background:var(--c);animation:st-pik .45s var(--st-skok) both;animation-delay:calc(var(--i,0) * 18ms)}
.st-mesec-pike i.ne{background:var(--bela);box-shadow:inset 0 0 0 1.5px var(--crta)}
.st-mesec-st{font:700 var(--t-xl) var(--f-glas);white-space:nowrap}
.st-mesec-st small{font:500 var(--t-xs) var(--f-tekst);color:var(--megla)}
.st-pohvala{margin:1rem 0 0;display:flex;gap:.75rem;align-items:center;background:var(--led);border-radius:1rem;padding:.75rem 1rem;font-weight:600}
.st-pohvala img{width:56px;height:auto;flex:none}

/* coach: the group matrix, alphabetical, no ranking */
.st-matrika{overflow-x:auto}
.st-matrika table{border-collapse:separate;border-spacing:4px;font-size:var(--t-sm)}
.st-matrika th{font-weight:600;color:var(--megla);font-size:11px;white-space:nowrap}
.st-matrika thead th{writing-mode:vertical-rl;transform:rotate(180deg);height:5.5rem;text-align:left;padding:0 0 .2rem}
.st-matrika tbody th{text-align:left;font-size:var(--t-sm);color:var(--noc);padding-right:.75rem}
.st-matrika td{width:22px;height:22px;border-radius:6px;background:var(--sneg);padding:0}
.st-matrika td.da{background:var(--c)}
.st-matrika td.zunaj{background:none;box-shadow:inset 0 0 0 1px var(--sneg)}
.st-matrika td.opr{background:repeating-linear-gradient(135deg,var(--bela) 0 3px,var(--c) 3px 5px)}
.st-matrika td.st-sum{background:none;width:auto;white-space:nowrap;font:700 var(--t-base) var(--f-glas);padding-left:.5rem;color:var(--noc)}
.st-matrika td.st-sum small{font:500 11px var(--f-tekst);color:var(--megla)}
.st-matrika tfoot td{background:none;font:700 12px var(--f-glas);text-align:center;color:var(--megla)}

/* leaders: groups and coaches */
.st-vodstvo{display:grid;grid-template-columns:minmax(0,1fr);gap:1.5rem}
@media (min-width:56rem){.st-vodstvo{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr)}}
.st-tabela{width:100%;border-collapse:collapse;font-size:var(--t-sm)}
.st-tabela th{text-align:left;font-size:var(--t-xs);color:var(--megla);font-weight:700;padding:.5rem .5rem .5rem 0;border-bottom:1px solid var(--crta)}
.st-tabela td{padding:.65rem .5rem .65rem 0;border-bottom:1px solid var(--sneg);vertical-align:middle}
.st-tabela td.n{font:700 var(--t-lg) var(--f-glas);font-variant-numeric:tabular-nums}
.st-tabela .ud{display:flex;align-items:center;gap:.5rem}
.st-tabela .ud i{display:block;height:8px;border-radius:0 4px 4px 0;background:var(--jezero);min-width:2px}
.st-tabela .prazno{color:var(--megla)}
.st-tabela caption{text-align:left;font-weight:600;font-size:var(--t-lg);margin-bottom:.4rem}

/* the list: the table view of every chart */
.st-seznam{display:grid;gap:0}
.st-teden-glava{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin:1.25rem 0 .35rem;font-weight:700}
.st-teden-glava:first-child{margin-top:0}
.st-teden-glava span{font-weight:500;font-size:var(--t-sm);color:var(--megla)}
.st-vnos{display:grid;grid-template-columns:4.25rem minmax(0,1fr) auto;gap:.25rem 1rem;align-items:center;padding:.75rem 0;border-top:1px solid var(--sneg)}
.st-vnos-dan{font:700 var(--t-lg)/1 var(--f-glas)}
.st-vnos-dan small{display:block;font:600 var(--t-xs) var(--f-tekst);color:var(--megla);margin-top:.2rem}
.st-vnos-kaj{min-width:0}
.st-vnos-kaj b{display:flex;align-items:center;gap:.5rem;font-weight:600}
.st-vnos-kaj b i{flex:none;width:12px;height:12px;border-radius:50%;background:var(--c)}
.st-vnos-kaj p{margin:.2rem 0 0;font-size:var(--t-sm);color:var(--megla);overflow-wrap:anywhere}
.st-vnos-kaj p em{font-style:normal;color:var(--jezero);font-weight:700}
.st-znak{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;padding:.3rem .7rem;font-size:var(--t-xs);font-weight:700;white-space:nowrap}
.st-znak svg{width:14px;height:14px}
.st-znak--izveden{background:#E3F3EF;color:var(--uspeh)}
.st-znak--odpadel{background:var(--led);color:var(--megla);text-decoration:line-through}
.st-znak--prestavljen{background:#FFF3D3;color:#7A5200}
.st-znak--neoznacen{background:#FBE9E7;color:var(--napaka)}
.st-znak--plan{background:var(--bela);color:var(--megla);box-shadow:inset 0 0 0 1px var(--crta)}
.st-znak--danes{background:var(--noc);color:#fff}
.st-znak--bil{background:var(--c);color:#fff}
.st-znak--ni{background:var(--bela);color:var(--megla);box-shadow:inset 0 0 0 1.5px var(--crta)}
.st-znak--tekma{background:#FFF3D3;color:#7A5200}
.st-plan-oznaka{display:inline-block;margin-left:.35rem;font-size:11px;font-weight:700;color:var(--jezero);background:var(--led);border-radius:999px;padding:.1rem .5rem;vertical-align:middle}
.st-vec{margin-top:1rem}
.st-prazno{padding:1.5rem;text-align:center;color:var(--megla);background:var(--sneg);border-radius:1rem}

/* tooltip */
.st-namig{position:fixed;z-index:50;pointer-events:none;background:var(--noc);color:#fff;border-radius:.75rem;padding:.6rem .8rem;font-size:var(--t-sm);line-height:1.35;max-width:17rem;box-shadow:var(--senca-okno);transform:translate(-50%,calc(-100% - 12px));animation:st-namig .14s var(--st-ease)}
.st-namig b{display:block;font-weight:700}
.st-namig span{color:#c9d6de}

@keyframes st-gor{from{transform:translateY(16px);opacity:0}to{transform:none;opacity:1}}
@keyframes st-pik{from{transform:scale(0)}to{transform:none}}
@keyframes st-raste{from{transform:scaleX(0)}to{transform:none}}
@keyframes st-gori{from{transform:scaleY(0)}to{transform:none}}
@keyframes st-namig{from{opacity:0;transform:translate(-50%,calc(-100% - 6px))}}
@media (prefers-reduced-motion:reduce){.st *,.st *::before,.st *::after{animation:none!important;transition:none!important}}

/* phone */
@media (max-width:40rem){
  .st-stevci{grid-template-columns:repeat(2,minmax(0,1fr))}
  .st-stevec--glavni{grid-column:1/-1}
  .st-stevec-st{font-size:2.6rem}
  .st-vnos{grid-template-columns:3.5rem minmax(0,1fr)}
  .st-vnos .st-znak{grid-column:2;justify-self:start}
  .st-palica{grid-template-columns:minmax(0,6rem) minmax(0,1fr) auto}
  .st-obdobja,.st-vrste{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(-1 * clamp(1rem,2vw,1.5rem));padding:0 clamp(1rem,2vw,1.5rem) 2px}
  .st-obdobja::-webkit-scrollbar,.st-vrste::-webkit-scrollbar{display:none}
  .st-cip,.st-vrsta{flex:none}
  .st-vodstvo>*{overflow-x:auto}
  .st-tabela{font-size:var(--t-xs)}
}
.st.tiho *,.st.tiho *::before,.st.tiho *::after{animation:none!important}

/* GORJE-224c: the block on Moja družina (a section of the page, not a page), the note where the statistics start */
.st--vdelano{max-width:none;margin:0;padding:0}
.st-zacetek{margin:1rem 0 0}
.st-izbire[hidden],.st-otroci[hidden]{display:none}