/* width:50% binds the panel to half the viewport - it is a glance at a feed
   you are not currently reading, so it must never swallow the page it floats
   over. Below 860px half a phone screen is unusable, so it goes full width. */
.vfp-ov{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(4,8,16,.62);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;pointer-events:none;
  transition:opacity .28s ease;z-index:1400}
.vfp-ov.is-open{opacity:1;pointer-events:auto}
.vfp{position:fixed;top:var(--topbar-h);right:0;bottom:0;width:50%;max-width:50vw;z-index:1401;
  background:var(--card,#141419);border-left:1px solid var(--edge2,#333);
  display:flex;flex-direction:column;box-shadow:-24px 0 60px rgba(0,0,0,.5);
  transform:translateX(102%);visibility:hidden;
  transition:transform .34s cubic-bezier(.22,.9,.24,1),visibility .34s}
.vfp.is-open{transform:translateX(0);visibility:visible}
.vfp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:16px 20px 14px;border-bottom:1px solid var(--edge);flex:none}
.vfp-kicker{font-family:var(--fm);font-size:9.5px;font-weight:800;letter-spacing:.2em;
  text-transform:uppercase;color:var(--acc-text);margin-bottom:5px}
.vfp-title{font-family:var(--fo);font-size:19px;font-weight:800;color:var(--text);margin:0;line-height:1.2}
.vfp-sub{font-family:var(--fm);font-size:11.5px;color:var(--muted);margin-top:5px;line-height:1.45}
.vfp-x{font-family:var(--fm);font-size:21px;line-height:1;color:var(--muted);background:none;
  border:none;cursor:pointer;padding:4px 8px;border-radius:5px;flex:none;transition:color .15s,background .15s}
.vfp-x:hover{color:var(--red);background:rgba(255,77,79,.1)}
.vfp-x:focus-visible{outline:1px solid var(--acc);outline-offset:2px}
/* flex:1 + min-height:0 is what gives the body a height to scroll against,
   so the head and foot stay pinned on a short feed. */
.vfp-body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:16px 20px;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}
/* The filter bar mirrors /feeds' .vf-bar so the two read as one control set.
   flex-wrap matters here: the ransomware panel carries three selects and at
   half the viewport they would otherwise crush the search field. */
.vfp-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:12px 20px;
  border-bottom:1px solid var(--edge);flex:none}
.vfp-in{flex:1 1 220px;min-width:170px;padding:9px 13px;border-radius:9px;
  border:1px solid var(--border2);background:var(--bg3);color:var(--text);
  font-size:13px;font-family:var(--fm);transition:border-color .2s}
.vfp-in::placeholder{opacity:.55}
.vfp-in:hover{border-color:var(--edge2)}
.vfp-in:focus{outline:none;border-color:var(--acc)}
.vfp-sel{padding:9px 11px;border-radius:9px;border:1px solid var(--border2);
  background:var(--bg3);color:var(--text);font-size:12.5px;font-family:var(--fm);cursor:pointer}
.vfp-sel:focus{outline:none;border-color:var(--acc)}
.vfp-n{font-family:var(--fm);font-size:12px;color:var(--muted);white-space:nowrap;margin-left:auto}
.vfp-clear{padding:8px 13px;border-radius:9px;border:1px solid var(--border2);
  background:var(--bg3);color:var(--muted);font-family:var(--fm);font-size:12px;cursor:pointer;transition:all .15s}
.vfp-clear:hover{color:var(--acc-text);border-color:var(--acc)}
.vfp-row.off{display:none}
.vfp-body::-webkit-scrollbar{width:8px}
.vfp-body::-webkit-scrollbar-thumb{background:var(--edge2,#333);border-radius:4px}
.vfp-body::-webkit-scrollbar-thumb:hover{background:var(--muted)}
.vfp-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px}
.vfp-kpi{background:var(--bg3);border:1px solid var(--border2);border-radius:10px;padding:10px 12px;
  border-left:3px solid var(--k,var(--acc))}
.vfp-kpi .n{font-family:var(--fo);font-size:21px;font-weight:800;line-height:1;color:var(--k,var(--text))}
.vfp-kpi .l{font-family:var(--fm);font-size:9px;font-weight:700;letter-spacing:.13em;color:var(--muted);
  text-transform:uppercase;margin-top:5px}
.vfp-row{padding:11px 0;border-bottom:1px solid var(--border2)}
.vfp-row:last-child{border-bottom:none}
.vfp-t{font-size:13px;color:var(--text);line-height:1.5}
.vfp-t a{color:inherit;text-decoration:none}
.vfp-t a:hover{color:var(--acc-text)}
.vfp-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:6px}
/* Date line, laid out like /feeds: relative first, absolute underneath. */
.vfp-when{display:flex;align-items:baseline;gap:8px;margin-top:5px;
  font-family:var(--fm);font-size:10.5px;color:var(--muted)}
.vfp-ago{font-weight:700;color:var(--acc-text)}
.vfp-abs{opacity:.85}
.vfp-onion{border-color:#c58af9;color:#c58af9;background:rgba(197,138,249,.10)}
.vfp-err{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:10px;
  margin-bottom:14px;background:rgba(255,157,0,.10);border:1px solid #ff9d00;color:#ffc46b;
  font-family:var(--fm);font-size:12px;line-height:1.5}
.vfp-empty{padding:40px 6px;text-align:center;color:var(--muted);font-family:var(--fm);font-size:12.5px}
.vfp-foot{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:13px 20px;
  border-top:1px solid var(--edge);flex:none}
.vfp-stamp{font-family:var(--fm);font-size:10.5px;color:var(--muted);margin-left:auto}
/* "Quick access" - one accent pill whose menu lists the two panels. The icons
   live in the menu items, so they carry the meaning at the size the menu shows
   them; the trigger itself is text-only, matching the other popovers. */
.tb-ico{width:15px;height:15px;display:block;flex:none}
.tb-menu .mi{display:flex;align-items:center;justify-content:center}
.tb-menu .vfp-qa.on{color:var(--acc-text);font-weight:700}
/* .vi-btn and .sev-CRITICAL are /feeds classes that the shell does not carry;
   only the panel's own footer needs them, so they are declared here rather
   than promoted to global tokens. */
.vfp .vi-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 16px;border-radius:9px;
  font-family:var(--fm);font-size:11.5px;font-weight:700;letter-spacing:.05em;text-decoration:none;
  border:1px solid var(--border);color:var(--text);background:var(--bg3);transition:all .16s}
.vfp .vi-btn:hover{border-color:var(--acc);color:var(--acc-text)}
.vfp .sev-CRITICAL{background:rgba(255,34,68,.1);color:var(--red);border:1px solid rgba(255,34,68,.3)}
@media(max-width:860px){.vfp{width:100%;max-width:100%}}
@media(max-width:760px){
  .vfp-head{padding:14px 16px 12px}
  .vfp-bar{padding:11px 16px}
  .vfp-in{flex:1 1 100%}
  .vfp-n{margin-left:0}
  .vfp-body{padding:14px 16px}
  .vfp-foot{padding:11px 16px}
  .vfp-title{font-size:17px}
}