/* Styles what floats over the page: the popover, the selection bar, the manual search and the toast. */

/* Popovers: citation card and § previews */
.pop{position:absolute;z-index:8;width:min(340px,calc(100vw - 32px));background:#161c26;color:var(--tx);border:1px solid var(--line);border-radius:10px;box-shadow:0 16px 40px rgba(0,0,0,.5);padding:13px 15px;font:13px/1.5 var(--mono)}
.pop .t1{display:flex;align-items:baseline;gap:8px;color:var(--dim);font-size:11.5px}
.pop .t1 .r{margin-left:auto;color:var(--blue);font-weight:700;font-size:10px;letter-spacing:.08em}
.pop h5{margin:4px 0 2px;font:500 17px/1.3 var(--serif);color:var(--tx)}
.pop h5.citekey{font:500 15px var(--mono)}
.pop .ve{color:var(--dim);font-size:11.5px}
.pop .hl{margin:10px 0 0;padding:4px 8px;font:15px/1.5 var(--serif);background:rgba(242,203,78,.18);border-radius:3px}
.pop .hl small{display:block;font:10.5px var(--mono);color:var(--dim)}
.pop .row{display:flex;align-items:center;gap:10px;margin-top:10px}
.pop .row div{flex:1;min-width:0}
.pop .row small{display:block;color:var(--dim);font-size:11px}
.pop .err{color:var(--red);margin-top:8px}
.pop .acts{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.pop button{all:unset;cursor:pointer;height:28px;padding:0 10px;border-radius:5px;font:500 11.5px var(--mono);background:var(--ink3);color:var(--tx);border:1px solid var(--line)}
.pop button:hover{border-color:var(--faint)}
.pop button.hi{background:var(--hi);color:var(--ink);border-color:var(--hi)}
.pop.x p{margin:6px 0 0;font:15px/1.5 var(--serif)}
.pop.x .go{display:block;margin-top:8px;font-size:11px;color:var(--dim)}

/* Selection bar: select text in the manual to highlight it, as in the reader. */
.selbar{position:absolute;z-index:9;display:flex;gap:2px;padding:4px;background:#151a23;border:1px solid var(--line);border-radius:7px;box-shadow:0 10px 26px rgba(0,0,0,.45);font:11.5px var(--mono)}
.selbar button{all:unset;cursor:pointer;display:inline-flex;gap:6px;align-items:center;padding:4px 8px;border-radius:4px;color:var(--tx)}
.selbar button:hover{background:var(--ink3)}
.selbar i{width:8px;height:8px;border-radius:50%;background:var(--c)}

/* man -k: search the manual */
.pal{position:fixed;inset:0;z-index:20;background:rgba(5,7,11,.6);display:flex;justify-content:center;align-items:flex-start;padding:max(12vh,24px) max(16px,env(safe-area-inset-right,0px)) 16px max(16px,env(safe-area-inset-left,0px))}
.pal>div{width:min(600px,100%);background:var(--ink2);border:1px solid var(--line);border-radius:10px;box-shadow:0 20px 50px rgba(0,0,0,.6);overflow:hidden;font:13px var(--mono)}
.pal label{display:flex;align-items:center;gap:10px;padding:0 16px;border-bottom:1px solid var(--line)}
.pal-cmd{color:var(--dim)}
.pal input{all:unset;flex:1;height:50px;color:var(--tx);font:14px var(--mono)}
.pal input::placeholder{color:var(--faint)}
.pal ul{list-style:none;margin:0;padding:6px;max-height:min(50vh,380px);overflow:auto}
.pal li{display:flex;gap:12px;align-items:baseline;padding:8px 12px;border-radius:6px;cursor:pointer}
.pal li span{color:var(--faint);min-width:2.6em}
.pal li small{margin-left:auto;color:var(--dim);font-size:11.5px}
.pal li.on{background:var(--ink3)}
.pal .empty{padding:14px 16px;color:var(--dim)}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translate(-50%,8px);opacity:0;transition:opacity .15s,transform .15s;background:var(--hi);color:var(--ink);font:12.5px var(--mono);padding:9px 14px;border-radius:6px;pointer-events:none;z-index:30;max-width:calc(100vw - 32px)}
.toast.show{opacity:1;transform:translate(-50%,0)}