/* Compact text cards and one persistent media dock. */
[hidden]{display:none!important}
.recording-tile{min-height:150px;transition:border-color .16s,box-shadow .16s}
.recording-tile:hover{border-color:#8b9d89;box-shadow:0 5px 20px #203d2b09}
.recording-title{display:flex;flex:1;flex-direction:column;gap:18px;padding:22px;text-decoration:none}
.recording-title h3{font-size:18px;line-height:1.4;font-weight:500;overflow-wrap:anywhere}
.recording-state{font-size:12px;color:var(--muted);margin-top:auto}
.recording-actions{display:flex;gap:0;border-top:1px solid var(--line)}
.recording-actions button{flex:1;background:transparent;padding:13px;color:var(--green);font-size:13px;min-height:44px}
.recording-actions button+button{border-left:1px solid var(--line)}
.recording-actions button:hover{background:#edf2e5}
.recording-title:focus-visible,.recording-actions button:focus-visible{outline:2px solid var(--green);outline-offset:-4px;border-radius:6px}
.media-launch{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:24px}
.media-launch p{font-size:13px;margin-top:10px;max-width:400px}
.media-launch .actions{flex-shrink:0}
.media-dock{position:fixed;z-index:25;top:58px;left:246px;right:0;background:#fbfcf7;border-bottom:1px solid #bac7b1;box-shadow:0 6px 20px #243c2210;padding:10px 28px 14px;height:190px;color:var(--ink)}
.dock-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;height:34px}
.dock-title{font-size:14px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dock-heading [data-player-close]{padding:6px 10px;font-size:18px}
.dock-body{display:flex;gap:20px;align-items:center;height:130px}
.dock-body video{width:230px;height:130px;border-radius:8px;background:#16241d;flex-shrink:0}
.dock-options{display:flex;flex:1;flex-direction:column;gap:10px;min-width:0}
.dock-modes{display:flex;gap:5px}
.dock-modes button,.dock-tools button{border-radius:6px;padding:7px 12px;background:#e8eddf;color:var(--green);font-size:12px;min-height:34px}
.dock-modes button.selected{background:var(--green);color:white}
.dock-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11px}
.dock-tools label{display:flex;align-items:center;gap:5px}
.dock-tools select{padding:5px;border:1px solid var(--line);border-radius:6px;background:white;font-size:12px;color:var(--ink)}
.dock-status{font-size:11px;color:var(--muted);line-height:1.4}
.has-media-dock .main{padding-top:190px}
.media-dock.audio-mode .dock-body video{height:44px;width:min(320px,45%);background:#edf2e5}
@media(max-width:1150px){.media-dock{left:215px;padding-left:20px;padding-right:20px}.dock-body{gap:12px}.dock-body video{width:190px;height:110px}}
@media(max-width:700px){.media-dock{top:87px;left:0;padding:8px 14px 12px;height:245px}.dock-heading{height:30px}.dock-body{height:190px;align-items:start;gap:10px}.dock-body video{width:45%;height:130px;margin-top:12px}.dock-options{gap:8px}.dock-modes button{padding:6px 9px}.dock-tools{gap:5px}.dock-tools button{padding:6px 9px}.dock-status{font-size:10px}.has-media-dock{padding-top:332px}.has-media-dock .main{padding-top:0}.media-dock.audio-mode .dock-body{flex-direction:column}.media-dock.audio-mode .dock-body video{width:100%;height:42px;margin-top:3px}.media-dock.audio-mode .dock-options{width:100%;display:grid;grid-template-columns:auto 1fr;align-items:start}.media-dock.audio-mode .dock-status{grid-column:1/-1}.media-launch{align-items:stretch;flex-direction:column;gap:18px}.media-launch .btn{flex:1}.recording-title{padding:20px}.recording-tile{min-height:140px}}
@media(prefers-reduced-motion:reduce){.recording-tile{transition:none}}

@media(min-width:701px){.media-dock.audio-mode{height:150px}.media-dock.audio-mode .dock-body{height:90px}body:has(.media-dock.audio-mode:not([hidden])) .main{padding-top:150px}}