.mk-motiv { display: inline-flex; align-items: center; flex-shrink: 0; gap: 2px; color: var(--text); }
.mk-motiv button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: 8px; }
.mk-motiv-prepnout { width: 60px; }
.mk-motiv-draha { display: flex; align-items: center; width: 52px; height: 30px; padding: 3px; border-radius: 20px; background: #9fd8a8; box-shadow: inset 0 0 0 1px #176b51; direction: ltr; }
.mk-motiv-jezdec { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #fff; color: #234b37; box-shadow: 0 1px 3px rgb(0 0 0 / .2); transition: transform .16s ease-out; }
.mk-motiv-prepnout[aria-checked="true"] .mk-motiv-draha { background: #2b4a72; box-shadow: inset 0 0 0 1px #8aaedb; }
.mk-motiv-prepnout[aria-checked="true"] .mk-motiv-jezdec { transform: translateX(22px); color: #2b4a72; }
.mk-motiv-system { width: 44px; opacity: .7; }
.mk-motiv-system[aria-pressed="true"] { opacity: 1; background: var(--plocha-2, var(--podklad)); box-shadow: inset 0 0 0 1px var(--linka); }
.mk-motiv button:hover { filter: brightness(.94); }
.mk-motiv button:focus-visible { outline: 2px solid var(--akcent, var(--znacka)); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .mk-motiv-jezdec { transition: none; } }

.mk-motiv-mesic { display: none; }
.mk-motiv-prepnout[aria-checked="true"] .mk-motiv-slunce { display: none; }
.mk-motiv-prepnout[aria-checked="true"] .mk-motiv-mesic { display: block; }