/* Ruční řazení tahem – štíhlý seznam (návrh 2, 27. 10. 2026). Platí pro nový i klasický vzhled. */
.po-mode { display: block !important; --po-fg: #d3643f; --po-bg: #f7f8f0; --po-ok-fg: #350b5a; --po-ok-bg: #f2ebe0; }
html.dark .po-mode { --po-fg: #e6eacd; --po-bg: #444a1f; --po-ok-fg: #bf9ce8; --po-ok-bg: #231235; }
.po-bar { display: flex; align-items: center; gap: 10px; margin: 6px 0; padding: 6px 6px 6px 10px; border: 1px solid var(--po-fg); border-radius: 5px; background: var(--po-bg); color: var(--po-fg); }
.po-hint { flex: 1; min-width: 0; text-align: center; font-weight: 700; font-size: calc(14px * var(--fs-scale, 1)); line-height: 1.25; overflow-wrap: anywhere; }
.po-done { flex: 0 0 auto; min-height: 44px; min-width: 96px; padding: 0 14px; border: 1px solid var(--po-ok-fg); border-radius: 5px; background: var(--po-ok-bg); color: var(--po-ok-fg); font: inherit; font-weight: 800; font-size: calc(14px * var(--fs-scale, 1)); cursor: pointer; }
.po-list { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 6px 0 12px; }
@media (min-width: 700px) { .po-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .po-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.po-row { position: relative; display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 4px 4px 4px 8px; border: 1px solid var(--po-fg); border-radius: 5px; background: var(--surface, #fff); color: var(--text, #404618); cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: pan-y; box-sizing: border-box; }
.po-n { flex: 0 0 auto; min-width: 28px; height: 28px; padding: 0 4px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: var(--po-bg); color: var(--po-fg); font-weight: 800; font-size: calc(13px * var(--fs-scale, 1)); }
.po-av { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 4px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--po-bg); font-size: 20px; }
.po-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.po-pismeno { color: var(--po-fg); font-weight: 800; font-size: calc(17px * var(--fs-scale, 1)); }
.po-t { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; text-align: left; }
.po-t b { font-weight: 800; font-size: calc(14px * var(--fs-scale, 1)); line-height: 1.25; overflow-wrap: anywhere; }
.po-t b i { font-weight: 600; color: var(--text2, #6a7042); }
.po-t > span { font-size: calc(12px * var(--fs-scale, 1)); line-height: 1.25; color: var(--text2, #6a7042); overflow-wrap: anywhere; }
.po-sex { margin-right: 4px; font-weight: 800; }
.po-sex.m { color: #1a5299; } .po-sex.f { color: #b02a63; }
html.dark .po-sex.m { color: #a3cbf8; } html.dark .po-sex.f { color: #f6b5cf; }
.po-grip { flex: 0 0 auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--po-fg); border-radius: 5px; background: var(--po-bg); color: var(--po-fg); }
.po-grip svg { width: 18px; height: 18px; }
/* Tažení: místo dopadu čárkovaně, tažený řádek rovný (bez pootočení, nepřesahuje šířku), jen fialově orámovaný (Petr 27. 10.) */
.po-ghost { border-style: dashed !important; background: transparent !important; }
.po-ghost > * { visibility: hidden; }
.po-drag { outline: 2px solid var(--po-fg, #d3643f) !important; outline-offset: -1px; background: var(--po-bg, #f7f8f0) !important; opacity: 1 !important; cursor: grabbing; }
.po-chosen { background: var(--po-bg); }
/* Fotka v řádku nesmí chytit klepnutí: Sortable ve výchozím stavu ignoruje tah začatý na <img>, takže řádek s fotkou nešel přetáhnout (Psi 1. 11. 2026). */
.po-av img { pointer-events: none; -webkit-user-drag: none; user-select: none; }