/* ===== Série T: jedna velká bílá tabule (zaoblené rohy + stín) na pozadí =====
   Hlavička a pozadí beze změny. Tabule = .rows; řádky uvnitř jsou oddělené jemnými linkami. */
.tb .rows { left: 48px; right: 48px; top: 176px; bottom: 34px; gap: 0; padding: 6px 44px; background: rgba(255,255,255,.96); border-radius: 26px; box-shadow: 0 18px 50px rgba(20,30,50,.24), 0 3px 10px rgba(20,30,50,.12); }
.tb .row { flex: 1; min-height: 0; border-bottom: 2px solid #E6E8EC; }
.tb .row:last-child { border-bottom: 0; }
.tb .no { display: none; }

/* T01 – velké procento vlevo */
.t1 .row { grid-template-columns: 400px 1fr auto; grid-template-rows: 1fr 1fr; grid-template-areas: "pct name votes" "pct bar bar"; }
.t1 .pct { grid-area: pct; font-size: 112px; justify-self: end; margin-right: 44px; } .t1 .name { grid-area: name; font-size: 58px; align-self: end; } .t1 .votes { grid-area: votes; font-size: 42px; align-self: end; margin-bottom: 4px; }
.t1 .bar { grid-area: bar; height: 22px; align-self: start; margin-top: 16px; }
/* T02 – procento za pruhem */
.t2 .row { grid-template-columns: 1fr auto; grid-template-rows: 60px 66px; grid-template-areas: "name votes" "bar bar"; align-content: center; }
.t2 .name { grid-area: name; font-size: 58px; } .t2 .votes { grid-area: votes; font-size: 42px; }
.t2 .bar { grid-area: bar; height: 64px; border-radius: 0; background: #E9ECEF; } .t2 .bar i { border-radius: 0; --minw: 30px; }
.t2 .pct { grid-area: bar; z-index: 2; justify-self: start; align-self: center; margin-left: calc(var(--w) + 22px); font-size: 74px; }
.t2 .row:first-child .pct { margin-left: 0; margin-right: 24px; justify-self: end; color: var(--on); } .t2 .row:first-child .pct .s { color: var(--on); }
/* T03 – čtverec s číslem + obří procento vpravo */
.t3 .row { grid-template-columns: 108px 1fr auto 420px; grid-template-rows: 1fr 1fr; grid-template-areas: "sq name votes pct" "sq bar bar pct"; column-gap: 30px; }
.t3 .sq { display: none; }
.t3 .no { display: grid; grid-area: sq; width: 96px; height: 96px; border-radius: 22px; place-items: center; background: var(--c); color: var(--on); font-size: 52px; align-self: center; }
.t3 .name { grid-area: name; font-size: 58px; align-self: end; } .t3 .votes { grid-area: votes; font-size: 42px; align-self: end; margin-bottom: 4px; }
.t3 .bar { grid-area: bar; height: 20px; align-self: start; margin-top: 16px; } .t3 .pct { grid-area: pct; font-size: 108px; justify-self: end; }
/* T04 – tabulka s pořadím */
.t4 .row { grid-template-columns: 96px 1fr 330px 360px 380px; column-gap: 20px; grid-template-areas: "rank name votes pct bar"; }
.t4 .rank { display: grid; grid-area: rank; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--c); color: var(--on); font-size: 42px; font-weight: 700; }
.t4 .name { grid-area: name; font-size: 54px; } .t4 .votes { grid-area: votes; font-size: 44px; justify-self: end; } .t4 .pct { grid-area: pct; font-size: 84px; justify-self: end; } .t4 .bar { grid-area: bar; height: 26px; }
/* T05 – pilulka v barvě strany */
.t5 .row { grid-template-columns: 1fr 380px; grid-template-rows: 62px 24px 40px; grid-template-areas: "name pct" "bar pct" "votes pct"; align-content: center; column-gap: 30px; }
.t5 .name { grid-area: name; font-size: 58px; } .t5 .bar { grid-area: bar; height: 18px; } .t5 .votes { grid-area: votes; font-size: 42px; }
.t5 .pct { grid-area: pct; background: var(--c); color: var(--on); height: 118px; border-radius: 59px; justify-content: center; align-items: center; font-size: 82px; align-self: center; } .t5 .pct .i { width: auto; } .t5 .pct .s { color: var(--on); }
/* T06 – tmavý štítek na pravém konci */
.t6 .row { grid-template-columns: 1fr auto 300px; grid-template-rows: 62px 70px; grid-template-areas: "name name votes" "bar bar pct"; align-content: center; }
.t6 .name { grid-area: name; font-size: 58px; } .t6 .votes { grid-area: votes; grid-column: 3; justify-self: end; font-size: 42px; }
.t6 .bar { grid-area: bar; height: 100%; border-radius: 0; background: #E9ECEF; } .t6 .bar i { border-radius: 0; }
.t6 .pct { grid-area: pct; background: #243746; color: #fff; height: 100%; justify-content: center; align-items: center; font-size: 62px; } .t6 .pct .s { color: #fff; }
/* T07 – vítěz vlevo přes celou výšku tabule */
.t7 .rows { display: grid; grid-template-columns: 640px 1fr; grid-template-rows: repeat(4, 1fr); padding: 0; overflow: hidden; }
.t7 .row { padding: 0 44px 0 40px; grid-template-columns: 250px 1fr auto; grid-template-rows: 1fr 1fr; grid-template-areas: "pct name votes" "pct bar bar"; }
.t7 .pct { grid-area: pct; font-size: 84px; justify-self: end; margin-right: 30px; } .t7 .name { grid-area: name; font-size: 46px; align-self: end; } .t7 .votes { grid-area: votes; font-size: 38px; align-self: end; margin-bottom: 3px; }
.t7 .bar { grid-area: bar; height: 16px; align-self: start; margin-top: 12px; }
.t7 .row:first-child { grid-row: 1 / 5; background: var(--c); color: var(--on); border: 0; padding: 48px; align-content: start; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto auto; grid-template-areas: "name" "votes" "pct" "bar" "."; }
.t7 .row:first-child .name { font-size: 96px; align-self: start; } .t7 .row:first-child .votes, .t7 .row:first-child .votes b, .t7 .row:first-child .pct .s { color: var(--on); } .t7 .row:first-child .votes { font-size: 52px; margin: 6px 0 0; align-self: start; }
.t7 .row:first-child .pct { font-size: 170px; justify-self: start; align-self: center; margin: 0; } .t7 .row:first-child .pct .i { width: auto; } .t7 .row:first-child .bar { height: 30px; background: rgba(0,0,0,.2); margin: 0; } .t7 .row:first-child .bar i { background: #fff; }
/* T08 – redakční, vodicí tečky */
.t8 .row { grid-template-columns: auto 1fr auto; grid-template-rows: 1fr auto 1fr; grid-template-areas: "name lead pct" "votes votes pct" "bar bar bar"; align-content: center; column-gap: 0; }
.t8 .row { grid-template-rows: 70px 44px 14px; }
.t8 .row::after { content: ""; grid-area: lead; border-bottom: 5px dotted rgba(0,0,0,.32); margin: 0 26px 18px; align-self: end; }
.t8 .name { grid-area: name; font-size: 64px; } .t8 .votes { grid-area: votes; font-size: 42px; } .t8 .pct { grid-area: pct; font-size: 112px; justify-self: end; align-self: center; }
.t8 .bar { grid-area: bar; height: 10px; margin-top: 6px; }
/* T09 – tabule je i pod hlavičkou (celá scéna na bílé desce) */
.t9::before { content: ""; position: absolute; left: 24px; right: 24px; top: 20px; bottom: 24px; background: rgba(255,255,255,.96); border-radius: 30px; box-shadow: 0 18px 50px rgba(20,30,50,.24), 0 3px 10px rgba(20,30,50,.12); }
.t9 header, .t9 .rows { z-index: 1; }
.t9 header { left: 64px; right: 64px; top: 20px; }
.t9 .rows { left: 64px; right: 64px; top: 190px; bottom: 44px; background: transparent; box-shadow: none; padding: 0; border-radius: 0; }
.t9 .row { grid-template-columns: 400px 1fr auto; grid-template-rows: 1fr 1fr; grid-template-areas: "pct name votes" "pct bar bar"; }
.t9 .pct { grid-area: pct; font-size: 108px; justify-self: end; margin-right: 44px; } .t9 .name { grid-area: name; font-size: 56px; align-self: end; } .t9 .votes { grid-area: votes; font-size: 42px; align-self: end; margin-bottom: 4px; }
.t9 .bar { grid-area: bar; height: 22px; align-self: start; margin-top: 16px; }
/* T10 – dělený pruh (25 dílků) */
.t10 .row { grid-template-columns: 1fr auto 430px; grid-template-rows: 66px 48px; grid-template-areas: "name votes pct" "bar bar pct"; align-content: center; column-gap: 28px; }
.t10 .name { grid-area: name; font-size: 56px; } .t10 .votes { grid-area: votes; font-size: 42px; } .t10 .pct { grid-area: pct; font-size: 108px; justify-self: end; }
.t10 .bar { grid-area: bar; height: 44px; border-radius: 0; background: #E1E5EA; -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(4% - 6px), transparent calc(4% - 6px) 4%); mask: repeating-linear-gradient(90deg, #000 0 calc(4% - 6px), transparent calc(4% - 6px) 4%); } .t10 .bar i { border-radius: 0; width: calc(var(--sh) / 25 * 100%); }
.t9 { --gt: #DAD6D2; }
