/* Past-recordings popup surfaces that used to ship as an injected <style>.
   scripts/build.mjs ensure: views-recordings-popup hashes this file and links it
   AFTER views-admin — the cascade position that <style> had — so
   equal-specificity rules still win. Dev, with no hashed link yet,
   appends <link href="styles/views-recordings-popup.css">.
   The pencil glyph and overlay rgba stay literal. */

.m-recpop { position:fixed; top:64px; right:392px; z-index:62; width:600px; max-width:calc(100vw - 32px);
  background:var(--bg-card); border:1px solid var(--border-strong); border-radius:var(--r-md);
  box-shadow:var(--shadow-lg, 0 12px 40px rgba(0,0,0,.45)); display:flex; flex-direction:column; }
@media (max-width: 920px) { .m-recpop { right:16px; top:96px; } }
.m-recpop-head { display:flex; align-items:center; gap:6px; padding:10px 12px; cursor:move; border-bottom:1px solid var(--border-subtle); }
.m-recpop-head .t { display:flex; align-items:center; gap:6px; font-weight:600; font-size:13px; color:var(--text-1); }
.m-recpop-head .spacer { flex:1; }
.m-recpop-x { background:none; border:none; color:var(--text-muted); cursor:pointer; padding:2px; display:flex; align-items:center; border-radius:var(--r-sm); }
.m-recpop-x:hover { color:var(--text-1); background:var(--bg-hover, rgba(255,255,255,.06)); }
.m-recpop-body { padding:8px 12px 12px; max-height:min(64vh, 520px); overflow-y:auto; }
.m-recpop-note { font-size:12px; color:var(--text-muted); padding:14px 2px; }
.m-recpop-row { display:grid; grid-template-columns: minmax(0,1fr) auto; gap:3px 10px; align-items:center;
  padding:8px 4px; border-bottom:1px solid var(--border-subtle); font-size:12px; }
.m-recpop-row:last-child { border-bottom:none; }
.m-recpop-row.sel { background:var(--bg-hover, rgba(255,255,255,.06)); box-shadow:inset 2px 0 0 var(--accent); }
.m-recpop-row .nm { min-width:0; display:flex; align-items:center; gap:6px; }
.m-recpop-row .name { color:var(--text-1); font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  background:none; border:1px solid transparent; border-radius:var(--r-sm); padding:1px 4px; margin:-1px -4px; text-align:left; font-family:inherit; cursor:default; min-width:0; }
.m-recpop-row button.name.editable { cursor:text; }
.m-recpop-row button.name.editable:hover, .m-recpop-row button.name.editable:focus-visible { border-color:var(--border-strong); background:var(--bg-hover, rgba(255,255,255,.06)); outline:none; }
.m-recpop-row button.name.editable::after { content:'\270E'; margin-left:6px; color:var(--text-muted); font-weight:400; opacity:0; }
.m-recpop-row button.name.editable:hover::after, .m-recpop-row button.name.editable:focus-visible::after { opacity:1; }
.m-recpop-row button.name.saving { opacity:.6; }
.m-recpop-row input.name-edit { min-width:0; box-sizing:border-box; font:inherit; font-weight:600; font-size:13px; color:var(--text-1);
  background:var(--bg-input, var(--bg-1)); border:1px solid var(--accent); border-radius:var(--r-sm); padding:2px 6px; }
.m-recpop-row input.name-edit[data-field="fill"] { width:100%; }
.m-recpop-row input.name-edit[aria-invalid="true"] { border-color:var(--warn); }
.m-recpop-row .meta { grid-column:1 / -1; display:grid; grid-template-columns: minmax(0,1.4fr) auto auto auto minmax(0,1fr); gap:2px 10px; align-items:center; }
.m-recpop-row .when { color:var(--text-muted); }
.m-recpop-row .mono { font-family:var(--font-mono); color:var(--text-2); white-space:nowrap; }
.m-recpop-row .by { color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-recpop-row .st { grid-column:1 / -1; font-size:11px; color:var(--text-muted); }
.m-recpop-row .st.bad { color:var(--warn); }
.m-recpop-act { display:flex; gap:4px; justify-content:flex-end; }
.m-recpop-act button { background:transparent; border:1px solid var(--border-subtle); border-radius:var(--r-sm); color:var(--text-2);
  cursor:pointer; padding:3px 7px; display:inline-flex; align-items:center; line-height:1; }
.m-recpop-act button:hover:not(:disabled) { background:var(--bg-hover, rgba(255,255,255,.06)); color:var(--text-1); }
.m-recpop-act button:disabled { opacity:.4; cursor:not-allowed; }
.m-recpop-act button.del:hover:not(:disabled) { color:var(--warn); }
.m-recpop-removed { margin-top:10px; padding-top:8px; border-top:2px solid var(--border-strong); }
.m-recpop-removed-head { font-size:12px; font-weight:600; color:var(--text-1); display:flex; align-items:center; gap:6px; }
.m-recpop-removed-head .n { font-weight:400; color:var(--text-muted); }
.m-recpop-removed-note { font-size:11px; color:var(--text-muted); padding:2px 0 4px; }
.m-recpop-row .st.src { color:var(--text-muted); }
.m-recpop audio { width:100%; margin-top:6px; grid-column:1 / -1; height:32px; }