/* The creator cards under Everside TV, in the OS's grammar. A card is a channel cartridge: the art in a slab behind a
   hairline, the channel number in pixel type on a plate, the maker's mark and where they post as one mono line, the
   ways in on the hand. Ink and bone; the creator's own colour is a light on the edge, never a wash. This sheet
   restyles the channel module's cards without touching its file; it loads after it. */
#rot .rc-tv-browse { align-items: flex-end; padding: 30px 0 16px; border-top: 1px solid var(--line); }
#rot .rc-tv-browse h3 { font: 600 17px/1.25 var(--sans); letter-spacing: -.01em; margin: 0 0 6px; color: var(--bone); }
#rot .rc-tv-browse .rc-tv-hint { font: 500 9.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--bone-45); }
#rot .rc-tv-browse .rc-search { border: 1px solid var(--line); border-radius: 4px; background: rgba(14, 15, 18, .35); padding: 0 10px; height: 32px; }
#rot .rc-tv-browse .rc-search input { font: 500 11px var(--sans); color: var(--bone); }
#rot .rc-tv-browse .rc-search:focus-within { outline: 0; border-color: rgba(255, 250, 248, .4); }
#rot .rc-tv-browse .rc-surprise { min-height: 32px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 4px; background: rgba(14, 15, 18, .35); color: var(--bone-70); font: 500 9.5px/1 var(--mono) !important; letter-spacing: .12em; text-transform: uppercase; gap: 8px; }
#rot .rc-tv-browse .rc-surprise:hover { color: var(--bone); border-color: rgba(255, 250, 248, .3); background: rgba(14, 15, 18, .5); }
#rot .rc-creator-grid { gap: 22px 18px; perspective: 1400px; padding: 6px 2px 28px; }
/* the card */
#rot .rc-tv-card { --creator-accent: var(--bone); border: 1px solid var(--line); border-radius: 6px; background: rgba(21, 22, 26, .82); transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .42s var(--os-settle, cubic-bezier(.2, .8, .2, 1)), border-color .3s ease, box-shadow .42s var(--os-settle, cubic-bezier(.2, .8, .2, 1)); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .8); animation: rt-card-rise .55s var(--ease, cubic-bezier(.2, .8, .2, 1)) both; animation-delay: calc(var(--card-order, 0) * 45ms); overflow: visible; }
#rot .rc-tv-card:hover, #rot .rc-tv-card:focus-within { transform: translateY(-6px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); border-color: rgba(255, 250, 248, .3); box-shadow: 0 34px 70px -26px rgba(0, 0, 0, .9); z-index: 3; }
#rot .rc-tv-card.is-selected { border-color: rgba(255, 250, 248, .55); box-shadow: 0 0 0 1px rgba(255, 250, 248, .08), 0 18px 40px -22px rgba(0, 0, 0, .9); }
#rot .rc-tv-card.is-selected:hover { border-color: var(--bone); }
#rot .rc-card-aura { background: linear-gradient(165deg, rgba(var(--creator-rgb, 255, 250, 248), .04), rgba(var(--creator-rgb, 255, 250, 248), .14)); }
#rot .rc-tv-card:hover .rc-card-aura, #rot .rc-tv-card:focus-within .rc-card-aura { opacity: 1; }
#rot .rc-tv-select { border-radius: 5px; }
/* the art: a slab behind a hairline that comes forward under the hand, the still drifting against the pointer */
#rot .rc-tv-card .rc-card-cover { aspect-ratio: 16 / 9; border-radius: 5px 5px 0 0; background: #101114; overflow: hidden; transform: translateZ(0); transition: transform .42s var(--os-settle, cubic-bezier(.2, .8, .2, 1)); border-bottom: 1px solid var(--line); }
#rot .rc-tv-card:hover .rc-card-cover, #rot .rc-tv-card:focus-within .rc-card-cover { transform: translateZ(14px); }
#rot .rc-tv-card .rc-card-cover > img:not(.rc-avatar) { opacity: 1; border-radius: 0; filter: saturate(.85) brightness(.78); transition: transform .9s var(--os-settle, cubic-bezier(.2, .8, .2, 1)), filter .4s ease; }
#rot .rc-tv-card:hover .rc-card-cover > img:not(.rc-avatar), #rot .rc-tv-card:focus-within .rc-card-cover > img:not(.rc-avatar) { opacity: 1; filter: none; transform: scale(1.04) translate(calc((50% - var(--mx, 50%)) * .04), calc((50% - var(--my, 50%)) * .04)); }
#rot .rc-tv-card .rc-card-cover::after { background: linear-gradient(0deg, rgba(14, 15, 18, .92) 0%, rgba(14, 15, 18, .2) 45%, rgba(14, 15, 18, .15) 100%); border-radius: 0; }
#rot .rc-tv-card .rc-card-cover::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; background: radial-gradient(220px 160px at var(--mx, 50%) var(--my, 50%), rgba(255, 250, 248, .16), transparent 70%); transition: opacity .3s ease; }
#rot .rc-tv-card:hover .rc-card-cover::before, #rot .rc-tv-card:focus-within .rc-card-cover::before { opacity: 1; }
#rot .rc-tv-card .rc-card-no-art { background: radial-gradient(at 70% 20%, rgba(255, 250, 248, .06), transparent 60%), #14151a; }
/* the channel number: pixel type on a plate */
#rot .rc-tv-card .rc-card-channel { top: 10px; left: 10px; z-index: 2; display: inline-flex; align-items: baseline; gap: 5px; padding: 5px 7px 3px; border: 1px solid rgba(255, 250, 248, .12); border-radius: 4px; background: rgba(13, 15, 19, .82); font: 800 18px/1 'Doto', var(--mono); letter-spacing: .02em; color: var(--bone); text-shadow: none; }
#rot .rc-tv-card .rc-card-channel small { font: 500 8px/1 var(--mono); letter-spacing: .14em; color: var(--bone-45); }
/* selected: a mono tag with the pixel that means on */
#rot .rc-tv-selected { top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 7px; border: 1px solid rgba(255, 250, 248, .18); border-radius: 4px; background: rgba(13, 15, 19, .82); color: var(--bone); font: 500 8px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
#rot .rc-tv-selected::before { content: ''; width: 5px; height: 5px; border-radius: 1px; background: var(--g); box-shadow: 0 0 8px var(--g); }
#rot .rc-tv-card.is-selected .rc-tv-selected { color: var(--bone); border-color: rgba(255, 250, 248, .3); background: rgba(13, 15, 19, .9); }
/* the avatar sits on the seam, square like the Trending card's */
/* the avatar lives on the seam now (the module's cover clipped it); see .rt-ava below */
/* the body: the name, one mono line that says where and how many, the foot */
#rot .rc-tv-card .rc-card-body { position: relative; z-index: 2; padding: 14px 12px 12px; gap: 8px; min-height: 0; transform: translateZ(0); transition: transform .48s var(--os-settle, cubic-bezier(.2, .8, .2, 1)); overflow: visible; background: linear-gradient(to bottom, rgba(21, 22, 26, 0), rgba(21, 22, 26, .94) 18px); }
#rot .rc-tv-card:hover .rc-card-body, #rot .rc-tv-card:focus-within .rc-card-body, #rot .rc-tv-card.is-selected .rc-card-body { transform: translateY(-40px) translateZ(22px); }
#rot .rc-tv-card .rc-card-body > strong { font: 600 15px/1.25 var(--sans); letter-spacing: -.015em; color: var(--bone); }
#rot .rt-card-line { display: flex; align-items: center; gap: 8px; min-width: 0; font: 500 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#rot .rt-card-line .px { flex: none; width: 5px; height: 5px; border-radius: 1px; background: var(--bone-45, rgba(255, 250, 248, .45)); }
#rot .rt-card-line .px.g { background: var(--g); box-shadow: 0 0 6px var(--g); } .rt-card-line .px.bone { background: var(--bone); } .rt-card-line .px.dim { background: rgba(255, 250, 248, .2); }
#rot .rt-card-line b { color: var(--bone-70); font-weight: 500; }
#rot .rc-tv-card .rc-card-foot { padding-top: 8px; border-top: 1px solid var(--line); font: 500 9px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bone-45); }
#rot .rc-tv-card .rc-card-foot b { color: var(--bone-70); }
#rot .rc-tv-card-hint, .is-selected .rc-tv-card-hint { color: var(--bone-70); }
#rot .rc-tv-card:hover .rc-tv-card-hint { color: var(--bone); }
/* the ways in: a band at the card's foot, under the lid; the OS's buttons */
#rot .rc-tv-card-actions { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 40px; box-sizing: border-box; padding: 0 10px 10px; display: flex; align-items: flex-end; gap: 6px; opacity: 0; transform: translateY(8px) translateZ(12px); pointer-events: none; transition: opacity .3s ease .06s, transform .48s var(--os-settle, cubic-bezier(.2, .8, .2, 1)) .04s; clip-path: none; }
#rot .rc-tv-card:hover .rc-tv-card-actions, #rot .rc-tv-card:focus-within .rc-tv-card-actions, #rot .rc-tv-card.is-selected .rc-tv-card-actions { opacity: 1; transform: translateY(0) translateZ(12px); pointer-events: auto; }
#rot .rc-tv-card-actions button { min-height: 30px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 4px; background: rgba(14, 15, 18, .35); color: var(--bone-70); font: 500 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; transition: color .2s ease, border-color .2s ease, background .2s ease; }
#rot .rc-tv-card-actions button:first-child { color: var(--bone); border-color: rgba(255, 250, 248, .28); }
#rot .rc-tv-card-actions button:hover { color: var(--bone); border-color: rgba(255, 250, 248, .4); background: rgba(14, 15, 18, .6); }
#rot .rc-tv-card-actions button:last-child { width: 30px; padding: 0; display: inline-grid; place-items: center; }
#rot .rc-tv-card-actions img, #rot .rc-tv-card-actions svg { width: 13px; height: 13px; }
/* where there is no hand, or no motion, the band sits in flow and the lid stays down */
@media (hover: none), (prefers-reduced-motion: reduce) {
  #rot .rc-tv-card .rc-card-body, #rot .rc-tv-card:hover .rc-card-body, #rot .rc-tv-card.is-selected .rc-card-body { transform: none; }
  #rot .rc-tv-card-actions, #rot .rc-tv-card:hover .rc-tv-card-actions, #rot .rc-tv-card.is-selected .rc-tv-card-actions { position: static; height: auto; opacity: 1; transform: none; pointer-events: auto; padding: 0 10px 10px; }
}
@keyframes rt-card-rise { from { opacity: 0; transform: translateY(10px) rotateX(0deg) rotateY(0deg); } to { opacity: 1; transform: translateY(0) rotateX(0deg) rotateY(0deg); } }
@media (max-width: 720px) { .rc-tv-card .rc-card-channel { font-size: 15px; } #rot .rc-tv-card .rc-card-body { padding: 18px 10px 8px; } }
@media (prefers-reduced-motion: reduce) { .rc-tv-card { animation: none; } #rot .rc-tv-card, #rot .rc-tv-card .rc-card-cover, #rot .rc-tv-card .rc-card-body, #rot .rc-tv-card .rc-card-cover > img:not(.rc-avatar), #rot .rc-tv-card-actions { transition: none; transform: none; } }

/* ── the unfold, minimal: the avatar grows a little on the seam and the name moves out with it; the ways in rise.
   Nothing else moves on its own. On the hand, on focus, and held on the card that is on screen. ── */
#rot .rc-tv-card .rt-ava { position: absolute; left: 12px; top: -14px; width: 38px; height: 38px; z-index: 4; transform-origin: 0 0; transform: translateZ(28px) scale(1); transition: transform .5s var(--os-settle, cubic-bezier(.2, .8, .2, 1)); }
#rot .rc-tv-card .rt-ava .rc-avatar { position: static; display: grid; place-items: center; width: 100%; height: 100%; margin: 0; border-radius: 5px; border: 1px solid rgba(255, 250, 248, .3); box-shadow: 0 0 0 3px #15161a, 0 8px 18px -6px rgba(0, 0, 0, .85); object-fit: cover; background: #1b1c21; color: var(--bone); font: 700 15px 'Doto', var(--mono); transition: border-color .3s ease, box-shadow .4s ease; }
#rot .rc-tv-card:hover .rt-ava, #rot .rc-tv-card:focus-within .rt-ava, #rot .rc-tv-card.is-selected .rt-ava { transform: translateZ(34px) translate(0, 3px) scale(1.32); }
#rot .rc-tv-card:hover .rt-ava .rc-avatar, #rot .rc-tv-card:focus-within .rt-ava .rc-avatar, #rot .rc-tv-card.is-selected .rt-ava .rc-avatar { border-color: rgba(255, 250, 248, .7); box-shadow: 0 0 0 2px #15161a, 0 14px 30px -8px rgba(0, 0, 0, .9); }
#rot .rc-tv-card .rt-id { display: grid; gap: 6px; min-width: 0; padding-left: 50px; min-height: 38px; align-content: center; transition: padding-left .5s var(--os-settle, cubic-bezier(.2, .8, .2, 1)); }
#rot .rc-tv-card:hover .rt-id, #rot .rc-tv-card:focus-within .rt-id, #rot .rc-tv-card.is-selected .rt-id { padding-left: 62px; }
#rot .rc-tv-card:hover .rt-card-line, #rot .rc-tv-card:focus-within .rt-card-line, #rot .rc-tv-card.is-selected .rt-card-line { color: var(--bone-70); }
#rot .rc-tv-card .rt-scan { display: none; }
#rot .rc-tv-card:hover .rc-card-channel, #rot .rc-tv-card:focus-within .rc-card-channel { border-color: rgba(255, 250, 248, .3); }
@media (prefers-reduced-motion: reduce) { #rot .rc-tv-card .rt-ava, #rot .rc-tv-card .rt-id { transition: none; } }