/* current_media.exe: the objects for what's current; watchlist tabs when maximized (see currentmedia.js) */
.cm { position: relative; gap: 12px; }

/* on the desk: one row that scrolls sideways (snapping to each object), centered when it all fits */
.cm-grid { display: flex; gap: 14px; overflow-x: auto; justify-content: safe center; scroll-snap-type: x mandatory; padding: 4px 4px 10px; scrollbar-width: thin; scrollbar-color: var(--ink) transparent; }
.cm-grid::-webkit-scrollbar { height: 8px; }
.cm-grid::-webkit-scrollbar-thumb { background: var(--ink); }
.cm-tile { flex: 0 0 112px; scroll-snap-align: center; }
/* maximized: every object at once, wrapping */
/* maximized: big, 3 to a row, so the cover art is the point */
#win-current { --max-w: 980px; }
.win.max .cm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 20px; overflow: visible; padding: 8px 4px 4px; }
.win.max .cm-name { font-size: 17px; }
.win.max .cm-lab { font-size: 12px; }
.win.max .cm-bar { height: 9px; width: 70%; align-self: center; }
.win.max .cm-tile { flex: none; }

/* the window itself: never wider than a half-width desk window, even when it's the odd one out in a row */
.zone-main > #win-current:not(.max) { flex: 0 1 calc(50% - 10px); min-width: min(380px, 100%); }
.desk.floating > * #win-current:not(.max), .desk.floating #win-current:not(.max) { max-width: 520px; }
.cm-tile { display: flex; flex-direction: column; align-items: stretch; gap: 4px; border: none; background: none; padding: 0; text-align: center; cursor: pointer; }
.cm-tile:focus-visible { outline: none; }
.cm-tile:focus-visible .cm-name { text-decoration: underline; }
.cm-name { font-weight: 700; font-size: 13px; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-lab { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted, inherit); opacity: .8; }
.cm-tile.past .cm-frame .mfi { filter: saturate(.7); }
.cm-bar { height: 6px; border: 1px solid var(--outline); background: var(--field); }
.cm-bar i { display: block; height: 100%; background: var(--accent); }
.cm-empty { margin: 0; font-size: 13px; text-align: center; padding: 10px 0; }
.cm-foot { display: flex; justify-content: flex-end; }
.cm-watch { border-top: var(--line) solid var(--outline); padding-top: 12px; }

/* drawn frames: lift on hover */
.cm-frame { --pw: 62px; }
.win.max .cm-frame { --pw: clamp(80px, 12vw, 150px); }
.cm-frame .mfi { transition: transform .12s, filter .12s; }
.cm-tile:hover .cm-frame .mfi, .cm-tile:focus-visible .cm-frame .mfi { transform: translate(-2px, -2px); filter: drop-shadow(5px 5px 0 var(--outline)); }
@media (max-width: 860px) { .zone-main > #win-current:not(.max) { flex: 1 1 100%; } }