/* GORJE-327b: the sign-up screens (orodja/vpis.js): /vpis, /klub-vpis and «Prijave» on Moja družina. Kir's rules: cards in a
   row have the height of the tallest, the buttons at the bottom (10. 10.); no colour line under a card (222b), the state is
   the badge's background; full-width buttons only on the phone (312b); 2-line labels line-height 1.1 (223e). */
.vp { display: grid; gap: 1.5rem; max-width: 46rem; }
.vp [hidden] { display: none !important; }
.vp > [data-vp-korak="nalagam"] { min-height: 60vh; }  /* GORJE-427: «Nalagam …» keeps room for the card or the form, the footer no longer jumps down on a slow phone */
.vp-forma { display: grid; gap: 1.5rem; }
.vp-del { display: grid; gap: 1rem; margin: 0; padding: 1.25rem; border: 0; border-radius: var(--r-kartica); background: var(--bela); box-shadow: var(--senca-kartica); min-width: 0; }
.vp-del > legend { float: left; width: 100%; padding: 0; margin: 0 0 0.25rem; font-size: var(--t-xl); font-weight: 600; line-height: 1.1; }
.vp-del > legend + * { clear: both; }
.vp-otroci { display: grid; gap: 1rem; }
.vp-otrok-glava { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.vp-otrok .polja-2, .vp-del .polja-2 { gap: 1rem; }
.vp-dodaj { justify-self: start; }
.vp-izjava-besedilo { max-height: 16rem; overflow: auto; padding: 0.75rem 1rem; border-radius: var(--r-polje); background: var(--led); }
.vp-izjava-besedilo p { margin: 0 0 0.5rem; }
.vp-podatki { margin: 0; }
.vp-koda .vnos { max-width: 12rem; font-size: 1.5rem; letter-spacing: 0.3em; font-variant-numeric: tabular-nums; }
.vp-koda.kartica { padding: 1.5rem; }
.vp-koda, .vp-korak { display: grid; gap: 1rem; justify-items: start; }
.vp-korak > h2, .vp-korak > p { margin: 0; }
.vp-korak h2:focus { outline: none; }
.vp-prejsnja { padding: 1rem 1.25rem; display: grid; gap: 0.25rem; justify-items: start; }
.vp-prejsnja p { margin: 0; }
/* the state of each child: name and badge on one row, the note under them */
.vp-seznam { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; width: 100%; }
.vp-stanje-otrok { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; justify-items: start; gap: 0.625rem 1rem; padding: 1rem 1.125rem; margin: 0; }
@media (min-width: 40rem) { .vp:not(.vp-druzina) .vp-stanje-otrok { grid-template-columns: minmax(0, 1fr) auto; } }
.vp-stanje-ime { display: grid; gap: 0.25rem; min-width: 0; }
.vp-stanje-ime p { margin: 0; line-height: 1.1; overflow-wrap: anywhere; }
.vp-stanje-ime .t-lg { font-weight: 600; }
.vp-stanje-otrok > .vp-opomba, .vp-stanje-otrok > .gumb { grid-column: 1 / -1; margin: 0; }
.vp-stanje-otrok > .gumb { justify-self: start; }
/* the state: the one label with a dot (orodja/stran.css, GORJE-373b, Kir 05.11 «Везде A») - the dot carries the colour */
.vp-znacka { text-align: left; max-width: 100%; }
.vp-znacka--caka { --pika: #C98500; }
.vp-znacka--cakalna { --pika: var(--megla); }
.vp-znacka--da { --pika: var(--uspeh); }
.vp-znacka--ne { --pika: var(--napaka); }
.vp-povezava { display: grid; gap: 0.5rem; width: 100%; }
.vp-povezava-vrsta { display: flex; gap: 0.5rem; align-items: center; }
.vp-povezava-vrsta .vnos { flex: 1 1 auto; min-width: 0; font-size: var(--t-sm); }
.vp-gumbi { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }

/* /klub-vpis */
.vk { display: grid; gap: 2rem; }
.vk [hidden] { display: none !important; }
.vk-sekcija { display: grid; gap: 1.75rem; padding-block: 0; }
.vk-sekcija > h2 { margin: 0; }
.vk-del { display: grid; gap: 0.875rem; }
.vk-naslov { margin: 0; line-height: 1.1; }
.vk-naslov .megla, .vk-skupina .megla { font-weight: 400; }
.vk-skupina { margin: 0.5rem 0 0; line-height: 1.1; }
.vk-del > p { margin: 0; max-width: 46rem; }
.vk-mreza { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); align-items: stretch; }
.vk-prijava { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem 1.125rem; margin: 0; min-width: 0; }
.vk-prijava > .vk-gumbi { margin-top: auto; }  /* the buttons at the bottom whatever the card holds */
.vk-glava { display: flex; align-items: start; justify-content: space-between; gap: 0.75rem; }
.vk-ime { display: grid; gap: 0.25rem; min-width: 0; }
.vk-ime p { margin: 0; line-height: 1.1; overflow-wrap: anywhere; }
.vk-ime .t-lg { font-weight: 600; }
.vk-znacke { display: grid; gap: 0.375rem; justify-items: end; flex: none; }
.vk-opomba { margin: 0; }
.vk-telo { display: grid; gap: 0.75rem; align-content: start; min-width: 0; }
.vk-polje { gap: 0.375rem; }
.vk-starsi { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 0.25rem 0.75rem; margin: 0; padding-top: 0.75rem; border-top: 1px solid var(--crta); }
.vk-starsi dt, .vk-starsi dd { margin: 0; line-height: 1.3; }
.vk-starsi dd { overflow-wrap: anywhere; }
.vk-zapis { margin: 0; padding: 0.625rem 0.75rem; border-radius: var(--r-polje); background: var(--led); overflow-wrap: anywhere; }
.vk-gumbi { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.vk-razlog { display: grid; gap: 0.75rem; }
.vk-mesta-mreza { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); }
.vk-mesta-mreza .polje > label { line-height: 1.1; }
.vk-mesta > .gumb, .vk-sezona > .gumb { justify-self: start; }
.vk-sezona-skupina { display: grid; grid-template-rows: auto auto 1fr; gap: 0.5rem; padding: 1rem 1.125rem; margin: 0; }
.vk-sezona-skupina > p { margin: 0; line-height: 1.1; }
.vk-sezona-skupina > .t-lg { font-weight: 600; }
.vk-sezona-seznam { list-style: none; margin: 0.25rem 0 0; padding: 0; display: grid; gap: 0.25rem; align-content: start; }
.vk-sezona-otrok { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; padding-top: 0.25rem; border-top: 1px solid var(--crta); }
.vk-sezona-otrok b { color: var(--megla); font-weight: 500; }
.vk-sezona-otrok--da b { color: var(--uspeh); font-weight: 600; }
.vk-opozorilo { padding: 1rem 1.25rem; display: grid; gap: 0.25rem; }
.vk-opozorilo p { margin: 0; }

/* Moja družina: «Prijave in nova sezona» */
.vp-druzina { display: grid; gap: 1rem; }
.vp-druzina .vp-seznam { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); align-items: stretch; }
.vp-druzina .vp-stanje-otrok { grid-template-rows: auto 1fr auto; }
.vp-druzina h3 { margin: 0; line-height: 1.1; }

/* GORJE-342: from 48rem up a button is as wide as its words, left (Kir 02.11, rule 312b); .vp-forma is a grid that stretched it */
.vp-forma > .gumb, .vp-korak > .gumb, .vp-gumbi > .gumb, .vk-gumbi > .gumb { justify-self: start; }
/* the phone: buttons full width (Kir 02.11, rule 312b) */
@media (max-width: 47.9375rem) {
  .vp-forma > .gumb, .vp-korak > .gumb, .vp-gumbi > .gumb, .vp-dodaj, .vk-gumbi > .gumb, .vk-mesta > .gumb, .vk-sezona > .gumb, .vp-stanje-otrok > .gumb { width: 100%; justify-self: stretch; }
  .vp-del { padding: 1rem; }
  .vp-povezava-vrsta { flex-wrap: wrap; }
  .vp-povezava-vrsta .gumb { width: 100%; }
}
/* «Za slabovidne» (vid.css, GORJE-126/265): badges in the version's colours with a frame, the state is in its words */
html[data-vid] .vp-znacka { background-color: var(--vid-o); color: var(--vid-b); box-shadow: inset 0 0 0 2px var(--vid-b); }