/* GORJE-319c: messages to the coaches - the thread, the field and the faces (behaviour in pogovori.js). The same bubbles as the
   Svizec window (svizec.css .sv-jaz / .sv-besedilo), so a child sees one kind of talk: own = night on the right, the coaches =
   white on the left. Brand tokens only, so the version for partially sighted (html[data-vid]) works by itself. No colour lines. */
.pg-nit { display: flex; flex-direction: column; gap: .2rem; }
.pg-sp { display: flex; flex-direction: column; max-width: 85%; }
.pg-sp:not(.pg-sp--skupaj) { margin-top: .6rem; }
.pg-sp:first-child { margin-top: 0; }
.pg-sp--jaz, .pg-sp--nasi { align-self: flex-end; align-items: flex-end; }
.pg-sp--oni { align-self: flex-start; align-items: flex-start; }
.pg-kdo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .4rem; margin: 0 .35rem .2rem; color: var(--megla); font-size: .75rem; line-height: 1.3; }
.pg-kdo b { color: var(--noc); font-weight: 700; }
.pg-kdo time { font-variant-numeric: tabular-nums; }
.pg-vir { padding: 0 .4rem; border-radius: var(--r-gumb); background: var(--led); color: var(--noc); }
.pg-mehur { padding: .6rem .9rem; border-radius: var(--r-plosca); overflow-wrap: anywhere; line-height: 1.45; }
.pg-mehur p { margin: 0; white-space: pre-wrap; }
.pg-mehur p + p { margin-top: .5rem; }
.pg-sp--jaz .pg-mehur { border-bottom-right-radius: .3rem; background: var(--noc); color: var(--bela); }
.pg-sp--nasi .pg-mehur { border-bottom-right-radius: .3rem; background: var(--led); color: var(--noc); }
.pg-sp--oni .pg-mehur { border-bottom-left-radius: .3rem; background: var(--bela); color: var(--noc); box-shadow: var(--senca-kartica); }
.pg-sp--skupaj.pg-sp--jaz .pg-mehur, .pg-sp--skupaj.pg-sp--nasi .pg-mehur { border-top-right-radius: .3rem; }
.pg-sp--skupaj.pg-sp--oni .pg-mehur { border-top-left-radius: .3rem; }
html[data-vid] .pg-mehur { outline: 2px solid var(--vid-b); }
html[data-vid] .pg-sp--jaz .pg-mehur { background: var(--vid-o); color: var(--vid-b); }

/* the field */
.pg-pisi { display: grid; gap: .35rem; }
.pg-vnos { display: flex; align-items: flex-end; gap: .5rem; }
.pg-vnos textarea { flex: 1; min-width: 0; min-height: 2.75rem; max-height: 8.25rem; padding: .6rem .85rem; border: 1.5px solid var(--crta); border-radius: var(--r-polje);
  background: var(--bela); color: var(--noc); font: inherit; font-size: max(16px, var(--t-sm)); line-height: 1.35; resize: none; }
.pg-vnos textarea::placeholder { color: var(--megla); }
.pg-vnos textarea:focus-visible { outline: 3px solid var(--jezero); outline-offset: 0; border-color: var(--jezero); }
.pg-poslji { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border: 0; border-radius: 50%; background: var(--noc); color: var(--bela); cursor: pointer;
  transition: transform calc(var(--cas-odziv, 150ms) * var(--k, 1)) var(--ease-out, ease-out); }
.pg-poslji:active { transform: scale(.92); }
.pg-poslji:disabled { opacity: .45; cursor: default; }
.pg-poslji:focus-visible { outline: 3px solid var(--jezero); outline-offset: 2px; }
html[data-vid] .pg-poslji { outline: 2px solid var(--vid-b); background: var(--vid-o); color: var(--vid-b); }
.pg-pod { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin: 0 .15rem; }
.pg-opomba { margin: 0; color: var(--megla); font-size: .75rem; line-height: 1.3; }
.pg-stevec { flex: none; color: var(--megla); font-size: .75rem; font-variant-numeric: tabular-nums; }
.pg-stevec.je-blizu { color: var(--napaka); font-weight: 700; }
.pg-napaka { margin: 0; color: var(--napaka); font-weight: 600; font-size: var(--t-xs); line-height: 1.35; }
.pg-napaka:empty { display: none; }
.pg-samo { margin: 0; padding: .65rem .9rem; border-radius: var(--r-polje); background: var(--led); color: var(--noc); font-size: var(--t-xs); line-height: 1.4; }

/* small text buttons: «Zaključi pogovor», «Nazaj», «Vsi pogovori» */
.pg-zakljuci { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .25rem .5rem; font-size: var(--t-xs); color: var(--noc); }
.pg-tiho { min-height: 2.25rem; padding: .25rem .6rem; border: 0; border-radius: var(--r-gumb); background: transparent; color: var(--megla); font: inherit; font-size: var(--t-xs); font-weight: 600; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--crta); text-underline-offset: 3px; }
.pg-tiho--da { color: var(--napaka); text-decoration-color: currentColor; }
@media (hover: hover) and (pointer: fine) { .pg-tiho:hover { color: var(--noc); text-decoration-color: currentColor; } }
.pg-tiho:focus-visible { outline: 3px solid var(--jezero); outline-offset: 1px; }
.pg-tiho:disabled { opacity: .5; cursor: default; }

/* a coach's face: the site's one .obraz (GORJE-421, stran.css): the portrait where there is one, else the initials */

/* ---------- the reply page from the e-mail (/klub-trener/odgovor) ---------- */
.pg-stran { min-height: 100dvh; background: var(--sneg); color: var(--noc); }
.pg-stran-glava { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 44rem; margin: 0 auto; padding: 1rem 1rem 0; }
.pg-stran-glava img { display: block; height: 2rem; width: auto; }
.pg-stran-telo { display: grid; gap: 1.25rem; max-width: 44rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.pg-stran-telo h1 { margin: 0; font-family: var(--f-tekst); font-size: var(--t-2xl); font-weight: 400; letter-spacing: -.03em; line-height: 1.1; text-wrap: balance; }
.pg-stran-telo .pg-uvod { margin: .4rem 0 0; color: var(--megla); }
.pg-stran-karta { display: grid; gap: 1rem; padding: 1.25rem; border-radius: var(--r-kartica); background: var(--bela); box-shadow: var(--senca-kartica); }
.pg-stran-karta .pg-sp--oni .pg-mehur { background: var(--sneg); box-shadow: none; }
.pg-stran-karta .pg-pisi { padding-top: 1rem; box-shadow: inset 0 1px 0 var(--led); }
.pg-blok { display: grid; gap: 1.25rem; }
.pg-stran [data-pg-korak][hidden] { display: none; }
.pg-stran-telo :is(h1 + .pg-uvod) { margin-top: .4rem; }
.pg-stran .pg-veljavnost { margin: 0; color: var(--megla); font-size: var(--t-xs); }
@media (max-width: 47.99rem) { .pg-stran-karta { padding: 1rem; } .pg-sp { max-width: 92%; } }