/* 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: #5b2fb0; --po-bg: #efe9ff; --po-ok-fg: #0b5a49; --po-ok-bg: #dff3ec; }
html.dark .po-mode { --po-fg: #cdb8ff; --po-bg: #2a1f4a; --po-ok-fg: #9ce8d2; --po-ok-bg: #12352c; }
.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, #1d1648); 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, #4a4270); }
.po-t > span { font-size: calc(12px * var(--fs-scale, 1)); line-height: 1.25; color: var(--text2, #4a4270); 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, #5b2fb0) !important; outline-offset: -1px; background: var(--po-bg, #efe9ff) !important; opacity: 1 !important; cursor: grabbing; }
.po-chosen { background: var(--po-bg); }