/* Omgångens bästa som en prispall (training/omgangens.py, partials/omgangens-pall.html, Sami 2026-10-22 efter hans
   bildförslag): tvåan till vänster, ettan högst i mitten, trean till höger, i klubbens färg, silver och brons. Fyra och
   fem på en rad under, och den bästa i varje lag sist. Måtten följer resten av sidan: ettans tal som lagnamnen och
   rekorden, inte större ("kanske blev lite för stort", Sami på samma dag).

   Samma pall på klubbens öppna sida och på översikten i appen (Sami 2026-10-25: "samma design som på klubbsidan").
   Pallen läser klubbsidans rollnamn (--kort, --kant, --ton, --svag); app.css ger dem appens värden på .pall, och
   --pall-radie och --pall-skugga låter appen ge kortet sina egna hörn och skuggor. --klubb, --pa-klubb och
   --klubb-text-mork skriver båda sidorna ur klubbens inställningar. */
/* Dator: pallen och fyra och fem i en spalt som är dubbelt så bred som i telefonen, bäst i varje lag i spalten bredvid
   (Sami på kort 1132: "Skulle bara kunna vara dubbelt så bred på desktop? Ser bra ut i mobil."). */
.pall { --silver: #6E6A63; --brons: #9A6B45; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: start; gap: 16px 28px; padding: 20px;
  background: var(--kort); border-radius: var(--pall-radie, 22px); box-shadow: var(--pall-skugga, 0 1px 2px var(--kant)); }
.pall > :not(.pall__lagen) { grid-column: 1; }
.pall:not(:has(.pall__lagen)) { grid-template-columns: minmax(0, 1fr); max-width: 760px; }
/* Blir högerspalten längre än pallen (milstolparna) tar rad två resten, så att fyra och fem står kvar under pallen. */
.pall:has(.pall__lagen) { grid-template-rows: auto 1fr; }
.pall ol, .pall ul { margin: 0; padding: 0; list-style: none; }
.pall h3 { margin: 0; }
.pall__steg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; align-items: end; }
.pall__plats { position: relative; grid-row: 1; display: grid; justify-items: center; align-content: start; gap: 8px; padding: 48px 14px 20px; overflow: hidden;
  border-radius: 12px 12px 0 0; text-align: center; background: color-mix(in srgb, var(--steg) 12%, var(--kort)); box-shadow: inset 0 -4px 0 var(--steg); }
.pall__plats--1 { grid-column: 2; min-height: 216px; }
.pall__plats--2 { grid-column: 1; min-height: 198px; }
.pall__plats--3 { grid-column: 3; min-height: 184px; }
/* Färgen följer platsen, inte steget: två som delar förstaplatsen står båda i klubbens färg. */
.pall__plats[data-plats="1"] { --steg: var(--klubb); --pa-steg: var(--pa-klubb); }
.pall__plats[data-plats="2"] { --steg: var(--silver); --pa-steg: #FFFFFF; }
.pall__plats[data-plats="3"] { --steg: var(--brons); --pa-steg: #FFFFFF; }
/* Siffran står mitt i fliken där den är som bredast i höjd med siffran, inte i hela rutan: den sneda kanten tar
   högra delen (Sami på kort 1129: "1 2 3 måste vara centrerade mera till vänster"). Proportionella siffror, så att
   en etta inte får en tvåas bredd. */
.pall__nr { position: absolute; top: 0; left: 0; width: 62px; height: 38px; padding-right: 18px; background: var(--steg); color: var(--pa-steg);
  clip-path: polygon(0 0, 100% 0, 64% 100%, 0 100%); font-size: 23px; font-weight: 800; line-height: 38px; letter-spacing: -0.03em; text-align: center; }
.pall__namn { font-size: 17px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
.pall__tal { width: min(100%, 220px); margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--kant); font-size: 40px; font-weight: 800; line-height: .95; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.pall__plats--1 .pall__tal { font-size: 48px; }
.pall__fler { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; overflow: hidden; border-radius: 12px; background: var(--kant); box-shadow: inset 0 0 0 1px var(--kant); }
.pall__fler li, .pall__lagen li { display: grid; align-items: center; gap: 12px; background: var(--kort); }
.pall__fler li { grid-template-columns: 26px minmax(0, 1fr) auto 3em; padding: 10px 16px; }
.pall__liten { display: grid; place-items: center; height: 26px; border-radius: 7px; background: var(--ton); color: var(--svag); font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pall__vem { min-width: 0; font-size: 15px; font-weight: 600; line-height: 1.25; text-wrap: balance; }
.pall :is(.pall__fler, .pall__lagen) strong { font-size: 19px; font-weight: 800; letter-spacing: -0.02em; text-align: right; font-variant-numeric: tabular-nums; }
.pall__lagen { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: 10px; }
.pall__lagen h3 { font-size: 15px; font-weight: 700; color: var(--svag); }
.pall__lagen ul { display: grid; gap: 8px; }
.pall__lagen li { grid-template-columns: auto minmax(0, 1fr) 3em; padding: 10px 14px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--kant); }
.pall__lagen ul + h3 { margin-top: 14px; }
.pall__milstolpar small { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: var(--svag); }
.pall__milstolpar [data-sort="300"] { background: color-mix(in srgb, var(--klubb) 12%, var(--kort)); }
@media (max-width: 760px) {
  .pall { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 12px; border-radius: var(--pall-radie, 20px); }
  .pall__steg { gap: 6px; }
  .pall__plats { gap: 6px; padding: 38px 6px 14px; border-radius: 10px 10px 0 0; box-shadow: inset 0 -3px 0 var(--steg); }
  .pall__plats--1 { min-height: 170px; }
  .pall__plats--2 { min-height: 154px; }
  .pall__plats--3 { min-height: 142px; }
  .pall__nr { width: 48px; height: 30px; padding-right: 14px; font-size: 18px; line-height: 30px; }
  .pall__namn { font-size: 13.5px; }
  .pall__tal { padding-top: 8px; font-size: 27px; }
  .pall__plats--1 .pall__tal { font-size: 32px; }
  .pall__fler li, .pall__lagen li { gap: 10px; padding: 9px 12px; }
  .pall__fler li { grid-template-columns: 28px minmax(0, 1fr) auto 3em; }
  .pall__liten { height: 24px; font-size: 13px; }
  .pall__vem { font-size: 14.5px; }
  .pall :is(.pall__fler, .pall__lagen) strong { font-size: 18px; }
  .pall__lagen { grid-column: auto; grid-row: auto; padding-top: 14px; border-top: 1px solid var(--kant); }
  .pall__lagen ul { gap: 6px; }
}

/* Mörkt tema: ettan tar klubbens färg i den variant som är räknad för mörka ytor, så att en mörk klubbfärg inte
   försvinner mot botten. */
:root[data-theme="dark"] .pall__plats[data-plats="1"] { --steg: var(--klubb-text-mork); --pa-steg: #111110; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pall__plats[data-plats="1"] { --steg: var(--klubb-text-mork); --pa-steg: #111110; }
}