/* the studio monitor's menu: topic cards that light up as the host names them (monitor.js #cards) */
.mon[data-type="cards"] .mon__screen { background: radial-gradient(120% 90% at 0% 0%, #1b2a2b, #0b0a09 70%); overflow: auto; scrollbar-width: thin; }
.mon[data-type="cards"]:not([data-size="full"]):not([data-size="side"]) .mon__screen { aspect-ratio: auto; max-height: 60cqw; }
.mcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 10px; padding: 12px; }
.mcard { display: grid; grid-template-rows: auto auto 1fr; gap: 4px; min-width: 0; padding: 6px 6px 8px; border: 1px solid rgba(243,238,226,.22); border-radius: 5px; background: rgba(243,238,226,.04); color: var(--paper); text-align: left; cursor: pointer; opacity: .62; transition: opacity .3s, border-color .3s, box-shadow .3s, transform .3s var(--ease-out, ease-out); }
.mcard.is-seen { opacity: .86; }
.mcard.is-lit { opacity: 1; border-color: var(--flame); box-shadow: 0 0 0 1px var(--flame), 0 0 18px rgba(255,169,70,.45); transform: translateY(-2px) scale(1.03); }
/* hover and focus stay dark and readable: a lift and a light rim, never a white box */
.mon .mcard:hover, .mon .mcard:focus-visible { opacity: 1; border-color: rgba(243,238,226,.7); background: rgba(243,238,226,.1); color: var(--paper); }
.mon .mcard:focus-visible { outline: 2px solid var(--flame); outline-offset: 2px; }
.mon .mcard.is-lit:hover { border-color: var(--flame); }
.mcard__pic { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 3px; background: #000; }
.mcard__pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mcard__t { font: 700 13px/1.2 var(--f-ui); }
.mcard.is-lit .mcard__t { color: var(--flame); }
.mcard__b { font: 400 11px/1.35 var(--f-ui); color: #c9c0ae; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* side (monitor.js rule 5): a list, thumbnail + the whole title on one or two lines, so nothing wraps into a skinny column */
.mon:is([data-size="side"], [data-size="panel"]) .mcards { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 6px; }
.mon:is([data-size="side"], [data-size="panel"]) .mcard { grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 1px; align-items: center; padding: 4px 8px 4px 4px; }
.mon:is([data-size="side"], [data-size="panel"]) .mcard__pic { grid-row: 1 / 3; aspect-ratio: 16 / 10; }
.mon:is([data-size="side"], [data-size="panel"]) .mcard__t { align-self: end; font-size: 13px; }
.mon:is([data-size="side"], [data-size="panel"]) .mcard__b { align-self: start; -webkit-line-clamp: 1; }
.mon:is([data-size="side"], [data-size="panel"]) .mcard.is-lit { transform: translateX(-2px); }
/* phones: the menu panel is the same list, as tall as it needs (it scrolls past 58vh) */
.mon[data-size="panel"][data-type="cards"] .mon__screen { aspect-ratio: auto; max-height: 58vh; }
/* small monitor: titles only, the lit card stays readable */
.mon[data-size="pip"] .mcards, .mon[data-size="strip"] .mcards { grid-template-columns: 1fr 1fr; gap: 4px; padding: 6px; }
.mon[data-size="pip"] .mcard__pic, .mon[data-size="pip"] .mcard__b { display: none; }
.mon[data-size="pip"] .mcard { padding: 4px 6px; }
.mon[data-size="pip"] .mcard__t { font-size: 10px; }
.mon[data-size="strip"][data-type="cards"] .mon__screen { display: none; }
.mon[data-size="strip"][data-type="cards"] { grid-template-columns: minmax(0, 1fr); }
.mon[data-size="strip"][data-type="cards"] .mon__bar { grid-column: 1; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { .mcard { transition: none; } .mcard.is-lit { transform: none; } }

/* layout:'side' — a tall 9:16 phone recording beside the studio, not letterboxed into the 16:9 monitor */
.mon[data-layout="side"] { width: auto; aspect-ratio: 9 / 17; }
.mon[data-layout="side"]:is([data-size="full"], [data-size="side"]) { inset: 3% 2% 3% auto; width: auto; height: 94%; max-height: none; }
.mon[data-layout="side"][data-size="pip"] { top: 3.2%; right: 2%; height: 56%; }
.mon[data-layout="side"]:is([data-size="full"], [data-size="side"]):is([data-corner="tl"], [data-corner="bl"]) { right: auto; left: 2%; }
.mon[data-layout="side"][data-size="pip"][data-corner="tl"] { right: auto; left: 2%; }
.mon[data-layout="side"][data-size="pip"][data-corner="br"] { top: auto; bottom: 3.2%; }
.mon[data-layout="side"][data-size="pip"][data-corner="bl"] { top: auto; right: auto; bottom: 3.2%; left: 2%; }
.mon[data-layout="side"] .mon__screen { flex: 1; aspect-ratio: auto; }
/* phones: full width under the picture, capped so the tall clip doesn't push everything off screen */
.mon[data-layout="side"][data-size="panel"], .mon[data-layout="side"][data-size="strip"] { aspect-ratio: auto; height: auto; }
.mon[data-layout="side"][data-size="panel"] .mon__screen { flex: none; aspect-ratio: auto; height: min(62vh, 560px); }

/* type:'embed' — the live product, inert behind a tap-to-try button until the viewer asks for it */
.mon__embed { position: absolute; inset: 0; background: #fff; }
.mon__frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.mon[data-size="pip"] .mon__frame { pointer-events: none; }
.mon__tap { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); min-height: 36px; padding: 0 16px; border: 1px solid var(--flame); border-radius: 999px; background: rgba(14,12,10,.86); color: var(--flame); font: 600 12px var(--f-ui); cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.mon__tap:hover, .mon__tap:focus-visible { background: #111; outline: none; }
.mon[data-size="pip"] .mon__tap { display: none; }

/* type:'link' — someone else's post: their cover, a play button and the source; the whole card opens the original */
.mon__link { position: absolute; inset: 0; display: block; background: #000; color: var(--paper); text-decoration: none; }
.mon__link img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mon__play { position: absolute; left: 50%; top: 44%; width: 44px; height: 44px; transform: translate(-50%, -50%); border: 2px solid var(--paper); border-radius: 50%; background: rgba(14,12,10,.78); box-shadow: 0 4px 14px rgba(0,0,0,.4); transition: border-color .2s, transform .2s var(--ease-out, ease-out); }
.mon__play::after { content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent var(--paper); }
.mon__link:hover .mon__play, .mon__link:focus-visible .mon__play { border-color: var(--flame); transform: translate(-50%, -50%) scale(1.06); }
.mon__link:focus-visible { outline: 2px solid var(--flame); outline-offset: -2px; }
.mon__src { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 8px 5px; background: linear-gradient(transparent, rgba(0,0,0,.85)); font: 500 11px/1.3 var(--f-ui); color: #d8cfbd; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mon__src b { color: var(--paper); font-weight: 700; }
.mon[data-size="pip"] .mon__play { width: 34px; height: 34px; }
.mon[data-size="pip"] .mon__play::after { border-width: 6px 0 6px 10px; }
.mon[data-size="pip"] .mon__src { padding: 12px 6px 4px; font-size: 10px; letter-spacing: -.01em; }