/* Společné okno Řazení a Filtry (js/okno-razeni.js, 28. 10. 2026). Barvy z okna aplikace (.of-modal): --xl lem, --xs jemný lem, --xi text, --xm popisky, --l-bg/--l-fg vybraná volba. */
#razeni-okno .or-body { display: block; }
#razeni-okno .or-h { margin: 14px 2px 6px; font-size: calc(11px * var(--fs-scale, 1)); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--sf); }
#razeni-okno .or-body > .or-s:first-child > .or-h { margin-top: 0; }
#razeni-okno .or-c-b { --sb: var(--b-bg); --sf: var(--b-fg); }
#razeni-okno .or-c-o { --sb: var(--o-bg); --sf: var(--o-fg); }
#razeni-okno .or-c-p { --sb: var(--p-bg); --sf: var(--p-fg); }
#razeni-okno .or-c-y { --sb: var(--y-bg); --sf: var(--y-fg); }
#razeni-okno .or-c-g { --sb: var(--g-bg); --sf: var(--g-fg); }
#razeni-okno .or-c-l { --sb: var(--l-bg); --sf: var(--l-fg); }
#razeni-okno .or-g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
#razeni-okno .or-chips { display: flex; flex-wrap: wrap; gap: 6px; }
#razeni-okno .or-chips .or-b { flex: 1 1 auto; }
#razeni-okno .or-list { display: flex; flex-direction: column; gap: 6px; max-height: min(42vh, 340px); max-height: min(42dvh, 340px); overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1px; }
#razeni-okno .or-b, #razeni-okno .or-r {
  box-sizing: border-box; min-height: 44px; padding: 8px 12px; border: 1px solid var(--sf); border-radius: 5px; background: var(--sb); color: var(--sf);
  font: inherit; font-size: calc(13px * var(--fs-scale, 1)); font-weight: 600; line-height: 1.2; cursor: pointer; display: flex; align-items: center; justify-content: center; text-align: center; overflow-wrap: anywhere;
}
#razeni-okno .or-r { width: 100%; justify-content: flex-start; text-align: left; }
#razeni-okno .or-b.on, #razeni-okno .or-r.on { background: var(--sf); border-color: var(--sf); color: var(--surface); font-weight: 800; }
#razeni-okno .or-row { justify-content: space-between; gap: 10px; }
#razeni-okno .or-hint { flex: none; font-weight: 500; }
#razeni-okno .or-sw { flex: none; width: 38px; height: 22px; border-radius: 11px; background: var(--surface); border: 1px solid var(--sf); box-sizing: border-box; position: relative; }
#razeni-okno .or-sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--sf); transition: left .15s; }
#razeni-okno .or-sw.on { background: var(--sf); }
#razeni-okno .or-sw.on::after { left: 19px; background: var(--surface); }
#razeni-okno .or-b:focus-visible, #razeni-okno .or-r:focus-visible { outline: 2px solid var(--sf); outline-offset: 2px; }