/* Kafle strony dzis: skalowanie zawartości do rozmiaru i kształtu kafla (kontenerowe jednostki cq*, flex/grid wypełniający kafel).
   Kontener = .tile-b (container-type:size) tylko na komputerze; telefon/tablet: kafle płyną w naturalnej wysokości, więc reguły zależne od wysokości mają prefiks D. */

/* ---------- siatka liczb (wskazniki, kasa, mailing, wyniki, zespol, jamalzrobil) ---------- */
.kf{display:flex;flex-direction:column;gap:8px}
.kf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.kf-grid[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.kf-grid .kpi{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;min-width:0;padding:6px 2px}   /* bez szarych pól; liczba i podpis do lewej */
.kf-grid .kpi .mono{margin-bottom:4px}
.kf-foot{text-align:left}
.kf-foot .bar{margin-bottom:5px}
html:not(.is-phone):not(.is-tablet) .kf{height:100%;min-height:0}
html:not(.is-phone):not(.is-tablet) .kf-grid{flex:1 1 0;min-height:0;grid-auto-rows:minmax(0,1fr)}
html:not(.is-phone):not(.is-tablet) .kf-grid .kpi{container:kcell/size;overflow:hidden;padding:4px 2px}
html:not(.is-phone):not(.is-tablet) .kf-grid .kpi b{font-size:clamp(18px,min(calc(100cqw / (var(--n,4) * .62 + .6)),52cqh),72px);line-height:1.05}
html:not(.is-phone):not(.is-tablet) .kf-grid .kpi .mono{font-size:clamp(10px,min(7.5cqw,14cqh),14px);margin-bottom:clamp(1px,3cqh,10px);line-height:1.2}
html:not(.is-phone):not(.is-tablet) .kf-grid .kpi small{font-size:clamp(9px,min(6cqw,9cqh),13px);margin-top:clamp(0px,2cqh,4px);line-height:1.2}
html:not(.is-phone):not(.is-tablet) .kf-foot{flex:none;font-size:clamp(9px,min(2.4cqw,4cqh),16px)}
@container (min-aspect-ratio:13/4){.kf-grid[data-n="4"]{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container (max-aspect-ratio:3/5){.kf-grid[data-n="4"],.kf-grid[data-n="3"]{grid-template-columns:minmax(0,1fr)}}
@container (max-aspect-ratio:5/2){.kf-grid[data-n="3"]{grid-template-columns:minmax(0,1fr)}}
@container (max-height:140px){.kf-foot{display:none}}
@container kcell (max-height:84px){.kpi small{display:none}}
@container kcell (max-height:20px){.kpi .mono{display:none}}

/* ---------- Tempo ---------- */
.tmp{display:flex;flex-direction:column;gap:8px}
.tmp-cols{flex:1 1 0;min-height:0;display:flex;gap:clamp(3px,1.2cqw,12px);padding:0 4px}
.tmp-cols.dense{gap:2px}
.tmp-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center}
.tmp-plot{flex:1 1 0;min-height:0;width:100%;position:relative;margin-top:clamp(14px,5cqh,34px)}
.tmp-plot i{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(70%,120px);min-height:2px;background:var(--accent);border-radius:4px 4px 0 0;opacity:.8}
.tmp-cols.dense .tmp-plot i{width:min(80%,18px);border-radius:2px 2px 0 0}
.tmp-col.today .tmp-plot i{opacity:1}
.tmp-plot i.z{opacity:.3}
.tmp-plot em{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);padding-bottom:2px;font:600 clamp(10px,min(2.6cqw,4.2cqh),26px) var(--mono);font-style:normal;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.tmp-l{flex:none;font-size:clamp(8px,min(2cqw,3.4cqh),18px);min-height:1.3em;line-height:1.3;padding-top:4px;white-space:nowrap}
.tmp-col.today .tmp-l{color:var(--ink);font-weight:700}
.tmp-sum{flex:none;text-align:center;font-size:clamp(9px,min(2.4cqw,4cqh),14px)}
.tmp-one{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;min-height:80px}
.tmp-one b{font-size:clamp(32px,min(30cqw,40cqh),88px);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
html:not(.is-phone):not(.is-tablet) .tmp,html:not(.is-phone):not(.is-tablet) .tmp-one{height:100%}
html:not(.is-phone):not(.is-tablet) .tmp-one{min-height:0}
.is-phone .tmp-cols{height:150px;flex:none}

/* ---------- Lejek ---------- */
.lj{display:flex;flex-direction:column;gap:10px}
.lj .fstage{margin:0}
.lj-c,.lj-d{opacity:.7}
html:not(.is-phone):not(.is-tablet) .lj{height:100%;gap:0}
html:not(.is-phone):not(.is-tablet) .lj .fstage{flex:1 1 0;min-height:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(2px,1.4cqh,8px)}
html:not(.is-phone):not(.is-tablet) .lj .fstage .lbl{margin:0;font-size:clamp(9px,min(3.6cqw,4.4cqh),20px);gap:8px;flex-wrap:wrap;line-height:1.25}
html:not(.is-phone):not(.is-tablet) .lj .fstage .lbl>span:last-child{white-space:nowrap}
html:not(.is-phone):not(.is-tablet) .lj .fstage .bar{height:clamp(5px,2.4cqh,22px);border-radius:999px}
html:not(.is-phone):not(.is-tablet) .lj .fstage .bar i{border-radius:999px}
@container (max-width:340px){.lj-c{display:none}}
@container (max-width:230px){.lj-d{display:none}}
@container (max-height:150px){.lj .lj-d{display:none}}

/* ---------- Kolejka maili ---------- */
.kq{display:flex;flex-direction:column;gap:6px}
.kq-top{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;flex:none}
.kq-top .kpi{text-align:center}
.kq-top .kpi b{font-size:clamp(20px,5cqw,52px)}
.kq-top .kpi .mono{font-size:clamp(9px,1.6cqw,16px)}
.kq-list .who b{font-size:clamp(13px,min(2.2cqw,4cqh),24px)}
.kq-list .who small{font-size:clamp(10px,min(1.6cqw,3cqh),16px)}
.kq-list .btn{font-size:clamp(11px,min(1.6cqw,3cqh),18px)}
.kq-list .item{padding:6px 8px}
.kq-list .item .btn{flex:none}
.kq-list .empty{margin:auto}
.is-phone .kq-list .item:nth-child(n+6),.is-tablet .kq-list .item:nth-child(n+6){display:none}
html:not(.is-phone):not(.is-tablet) .kq{height:100%}
html:not(.is-phone):not(.is-tablet) .kq-list{flex:1 1 0;min-height:0;display:flex;flex-flow:column wrap;align-content:flex-start;overflow:hidden}
html:not(.is-phone):not(.is-tablet) .kq-list .item{width:100%;box-sizing:border-box;flex:1 0 auto;max-height:84px;min-height:38px;border-bottom:1px solid var(--line)}
html:not(.is-phone):not(.is-tablet) .kq-list .item .who{overflow:hidden}
html:not(.is-phone):not(.is-tablet) .kq-list .item .who b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@container (max-height:170px){.kq-top .kpi small{display:none}}
@container (max-height:130px){.kq-top .kpi .mono{display:none}}

/* ---------- Szukanie leadów ---------- */
.sz{display:flex;flex-direction:column;gap:8px}
.sz .bar{margin:0}
.sz .btn{align-self:flex-start;flex:none}
.sz-empty{align-items:center;justify-content:center}
.sz-empty .btn{align-self:center}
.sz-empty .empty{padding:0}
html:not(.is-phone):not(.is-tablet) .sz{height:100%;gap:8px}
html:not(.is-phone):not(.is-tablet) .sz-h{flex:none;font-size:clamp(14px,min(3.4cqw,7cqh),20px);line-height:1.2}
html:not(.is-phone):not(.is-tablet) .sz-t{flex:none;font-size:clamp(10px,min(2.6cqw,4.5cqh),12px);line-height:1.4}
.sz-steps{margin:0;gap:3px}
.sz-steps li{grid-template-columns:18px minmax(0,1fr) auto;font-size:12.5px}
.sz-steps small{display:none}
.sz-short{align-self:flex-start;white-space:normal}
html:not(.is-phone):not(.is-tablet) .sz-steps{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin;align-content:start}
html:not(.is-phone):not(.is-tablet) .sz-empty .empty{font-size:clamp(13px,min(5cqw,9cqh),22px)}

/* ---------- Cel miesiąca ---------- */
html:not(.is-phone):not(.is-tablet) [data-tile="cel"] .cel{justify-content:center;gap:clamp(10px,4cqw,32px)}
html:not(.is-phone):not(.is-tablet) [data-tile="cel"] .ring{height:min(100%,38cqw);width:auto;max-width:none;flex:0 1 auto;min-height:0}
html:not(.is-phone):not(.is-tablet) [data-tile="cel"] .cel-txt{flex:0 1 auto;gap:clamp(2px,1.5cqh,8px)}
html:not(.is-phone):not(.is-tablet) [data-tile="cel"] .cel-main{font-size:clamp(18px,min(calc(52cqw / (var(--n,12) * .62)),40cqh),56px);line-height:1.1}
html:not(.is-phone):not(.is-tablet) [data-tile="cel"] .cel-txt .mono{font-size:clamp(11px,min(2.8cqw,12cqh),16px)}
@container (max-aspect-ratio:5/4){
  html:not(.is-phone):not(.is-tablet) [data-tile="cel"] .cel{flex-direction:column;gap:clamp(6px,3cqh,20px)}
  html:not(.is-phone):not(.is-tablet) [data-tile="cel"] .ring{height:auto;width:min(80cqw,48cqh);max-width:none;flex:0 1 auto}
  html:not(.is-phone):not(.is-tablet) [data-tile="cel"] .cel-txt{align-items:center;text-align:center}
  html:not(.is-phone):not(.is-tablet) [data-tile="cel"] .cel-main{font-size:clamp(14px,min(calc(88cqw / (var(--n,12) * .62)),10cqh),48px)}
}

/* ---------- Pasek dnia ---------- */
.pasek-main{display:flex;align-items:center;gap:18px;flex:1 1 320px;min-width:0}
.pasek-main .pasek-txt{min-width:0}
.pn{min-width:0}
.pn .mono{display:block}
html:not(.is-phone):not(.is-tablet) [data-tile="pasek"] .mc-body{padding-top:14px}
html:not(.is-phone):not(.is-tablet) [data-tile="pasek"] .pasek{height:100%;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:clamp(6px,2cqh,16px)}
html:not(.is-phone):not(.is-tablet) [data-tile="pasek"] .pasek-main{flex:3 1 0;min-height:0;gap:clamp(10px,2.4cqw,28px);padding-right:clamp(0px,4cqw,44px)}
html:not(.is-phone):not(.is-tablet) [data-tile="pasek"] .pasek-ico .jm-ava{--s:clamp(40px,min(10cqw,44cqh),72px)!important}
html:not(.is-phone):not(.is-tablet) [data-tile="pasek"] .pasek-txt{flex:1 1 0;max-height:100%;overflow:hidden;display:flex;flex-direction:column;gap:clamp(2px,1.2cqh,12px)}
html:not(.is-phone):not(.is-tablet) [data-tile="pasek"] .pasek-txt p{margin-top:auto!important}
html:not(.is-phone):not(.is-tablet) [data-tile="pasek"] .pasek-txt .mono{margin-bottom:auto}
html:not(.is-phone):not(.is-tablet) [data-tile="pasek"] .pasek-txt p{font-size:calc(var(--k,1) * clamp(11px,min(2.2cqw,7cqh),24px));line-height:1.3;margin:0;text-wrap:pretty}
html:not(.is-phone):not(.is-tablet) [data-tile="pasek"] .pasek-txt .mono{font-size:clamp(9px,min(1.6cqw,3.2cqh),13px)}
html:not(.is-phone):not(.is-tablet) [data-tile="pasek"] .pasek-nums{flex:0 0 clamp(52px,30cqh,110px);min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:8px}
html:not(.is-phone):not(.is-tablet) [data-tile="pasek"] .pn{container:kcell/size;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;padding:4px 2px}
html:not(.is-phone):not(.is-tablet) [data-tile="pasek"] .pn b{font-size:clamp(14px,min(calc(100cqw / (var(--n,4) * .62 + .6)),52cqh),56px);line-height:1.05}
html:not(.is-phone):not(.is-tablet) [data-tile="pasek"] .pn .mono{font-size:clamp(10px,min(7.5cqw,14cqh),14px);margin-bottom:clamp(1px,3cqh,10px);line-height:1.2}
html:not(.is-phone):not(.is-tablet) [data-tile="pasek"] .pn small{display:block;font-size:clamp(8px,min(5.4cqw,9cqh),16px);margin-top:clamp(0px,2cqh,4px);line-height:1.2}
@container (min-aspect-ratio:11/4){
  html:not(.is-phone):not(.is-tablet) [data-tile="pasek"] .pasek{flex-direction:row;align-items:stretch}
  html:not(.is-phone):not(.is-tablet) [data-tile="pasek"] .pasek-main{flex:1 1 0;padding-right:0}
  html:not(.is-phone):not(.is-tablet) [data-tile="pasek"] .pasek-nums{flex:0 0 min(44cqw,520px)}
  html:not(.is-phone):not(.is-tablet) [data-tile="pasek"] .pasek-txt p{font-size:calc(var(--k,1) * clamp(11px,min(1.5cqw,16cqh),22px))}
}
@container (max-aspect-ratio:3/5){
  html:not(.is-phone):not(.is-tablet) [data-tile="pasek"] .pasek-nums{grid-template-columns:minmax(0,1fr)}
}
@container kcell (max-height:84px){[data-tile="pasek"] .pn small{display:none}}
@container kcell (max-height:20px){[data-tile="pasek"] .pn .mono{display:none}}
/* wąski pionowy kafel: awatar nad zdaniem, zdanie wyśrodkowane i większe */
@container (max-aspect-ratio:3/4){
  html:not(.is-phone):not(.is-tablet) [data-tile="pasek"] .pasek-main{flex-direction:column;justify-content:center;text-align:center;padding-right:0}
  html:not(.is-phone):not(.is-tablet) [data-tile="pasek"] .pasek-txt{flex:0 1 auto}
  html:not(.is-phone):not(.is-tablet) [data-tile="pasek"] .pasek-txt p{font-size:calc(var(--k,1) * clamp(12px,min(4.5cqw,5cqh),24px))}
}
/* bardzo mały kafel: bez awatara, żeby zdanie miało miejsce */
@container (max-height:200px) and (max-width:330px){
  html:not(.is-phone):not(.is-tablet) [data-tile="pasek"] .pasek-ico{display:none}
}