's overflow-x:clip can't cut it off. ---- */ .bgwrn-mbadge{ position:absolute;z-index:50; display:inline-flex;align-items:center;gap:3px; background:none;border:0;padding:3px;margin:-3px 0 0;cursor:pointer; color:#9a8f80;opacity:.78; font:600 12px/1 Inter,-apple-system,sans-serif; transition:opacity .12s,color .12s; } .bgwrn-mbadge:hover{opacity:1;color:#9b2f2c} .bgwrn-mbadge svg{opacity:.9} /* ---- toolbar: Medium-style, text only, light weight, floats above the selection (Bill's #1) ---- */ .bgwrn-bar{ position:fixed;z-index:100001;transform:translateX(-50%); display:flex;align-items:center;gap:1px; background:#1a1714;color:#f4efe6; border-radius:6px;padding:3px 5px; box-shadow:0 8px 24px rgba(0,0,0,.34); font-family:Inter,-apple-system,sans-serif; } /* pointer: bar above the selection → triangle at the bottom pointing down */ .bgwrn-bar::after{content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%);border:5px solid transparent;border-top-color:#1a1714;border-bottom:0} /* bar dropped below (no room above) → triangle at the top pointing up */ .bgwrn-bar-below::after{bottom:auto;top:-5px;border-top:0;border-bottom-color:#1a1714} .bgwrn-bar-bottom{position:fixed;left:50%;top:auto!important;bottom:18px;transform:translateX(-50%)} .bgwrn-bar-bottom::after{display:none} .bgwrn-b{ background:none;border:0;color:inherit;cursor:pointer; font:400 13px/1 Inter,-apple-system,sans-serif; padding:6px 9px;border-radius:5px;white-space:nowrap; } .bgwrn-b:hover{background:rgba(244,239,230,.13)} .bgwrn-div{width:1px;align-self:stretch;margin:5px 3px;background:rgba(244,239,230,.24)} .bgwrn-ask{color:#e7bda6} /* ---- scrim + slide-over panel (explicit colors so nothing blends — Bill's #3) ---- */ .bgwrn-scrim{position:fixed;inset:0;background:rgba(20,17,15,.3);opacity:0;visibility:hidden;transition:opacity .2s;z-index:100002} .bgwrn-scrim.on{opacity:1;visibility:visible} .bgwrn-panel{ position:fixed;top:0;right:0;height:100%;width:380px;max-width:92vw;z-index:100003; background:#faf7f1;color:#221a12; border-left:1px solid rgba(26,23,20,.18); box-shadow:-16px 0 44px rgba(26,23,20,.18); transform:translateX(100%);transition:transform .24s ease; display:flex;flex-direction:column; font-family:Inter,-apple-system,sans-serif; } .bgwrn-panel.on{transform:none} .bgwrn-phead{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid rgba(26,23,20,.14);background:#f3ede3} .bgwrn-ptitle{font:600 15px/1 Inter,sans-serif;letter-spacing:.01em;color:#221a12} .bgwrn-pclose{background:none;border:0;font-size:26px;line-height:1;color:#221a12;opacity:.55;cursor:pointer} .bgwrn-pclose:hover{opacity:1} .bgwrn-pbody{padding:18px;overflow-y:auto;flex:1} .bgwrn-quote{ margin:0 0 18px;padding:10px 0 10px 14px; border-left:3px solid #9b2f2c; font-family:Fraunces,Georgia,serif;font-size:16px;line-height:1.5;font-style:italic; color:#3a2c20; } .bgwrn-sec{margin:0 0 18px} .bgwrn-seclabel{font:600 12px/1 Inter,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#9b2f2c;margin:0 0 12px} .bgwrn-lock{margin:0 0 12px;font-size:12.5px;line-height:1.5;color:#7a6d5c} .bgwrn-check{display:flex;align-items:center;gap:8px;margin:12px 0 2px;font-size:13.5px;color:#3a2c20;cursor:pointer} .bgwrn-check input{width:16px;height:16px;accent-color:#9b2f2c;cursor:pointer} .bgwrn-empty{font-size:13.5px;color:#6b5d4c;margin:0 0 12px} .bgwrn-empty a{color:#9b2f2c;font-weight:600} .bgwrn-resp{padding:13px 0;border-top:1px solid rgba(26,23,20,.12)} .bgwrn-resp:first-of-type{border-top:0} .bgwrn-resphead{display:flex;align-items:baseline;gap:8px;margin:0 0 5px} .bgwrn-respwho{font-weight:700;font-size:13.5px;color:#221a12} .bgwrn-respago{font-size:12px;color:#8a7c6a} .bgwrn-resp-text{font-size:14.5px;line-height:1.55;white-space:pre-wrap;color:#2c2118} .bgwrn-respacts{margin-top:8px;display:flex;gap:16px} .bgwrn-respacts button,.bgwrn-del{background:none;border:0;padding:0;cursor:pointer;font:600 12.5px Inter,sans-serif;color:#7a6d5c} .bgwrn-respacts button:hover{color:#9b2f2c} .bgwrn-del:hover{color:#b3261e} .bgwrn-compose{margin-top:14px} .bgwrn-ta{ width:100%;box-sizing:border-box;min-height:88px;resize:vertical; padding:11px 13px;border:1px solid rgba(26,23,20,.32);border-radius:8px; background:#fff;color:#221a12;font:400 14.5px/1.5 Inter,sans-serif; } .bgwrn-ta::placeholder{color:#9a8c78} .bgwrn-ta:focus{outline:none;border-color:#9b2f2c;box-shadow:none} .bgwrn-composeacts{display:flex;align-items:center;gap:12px;margin-top:10px} .bgwrn-primary{background:#9b2f2c;color:#fff;border:0;border-radius:8px;padding:9px 18px;font:600 14px Inter,sans-serif;cursor:pointer} .bgwrn-primary:hover{background:#b24a47} .bgwrn-primary:disabled{opacity:.55;cursor:default} .bgwrn-ghost{background:none;border:1px solid rgba(26,23,20,.32);border-radius:8px;padding:8px 16px;font:600 13.5px Inter,sans-serif;color:#221a12;cursor:pointer;text-decoration:none} .bgwrn-ghost:hover{border-color:#9b2f2c;color:#9b2f2c} .bgwrn-join{padding:8px 2px} .bgwrn-join h3{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:1.4rem;margin:0 0 8px;color:#221a12} .bgwrn-join p{font-size:14px;color:#6b5d4c;margin:0 0 16px;line-height:1.55} .bgwrn-joinbtns{display:flex;gap:10px} .bgwrn-joinbtns .bgwrn-primary{text-decoration:none;display:inline-block} @media(max-width:600px){ .bgwrn-panel{width:100%;max-width:100%} .bgwrn-b span{display:none} .bgwrn-ask span{display:inline!important} .bgwrn-b{padding:9px 12px} } /* dark site theme: keep the panel dark with light text (still high-contrast) */ @media (prefers-color-scheme: dark){ .bgwrn-panel{background:#1c1815;color:#f0e9dd;border-left-color:rgba(244,239,230,.16)} .bgwrn-phead{background:#241f1b;border-bottom-color:rgba(244,239,230,.14)} .bgwrn-ptitle,.bgwrn-pclose{color:#f0e9dd} .bgwrn-quote{color:#e6ddce} .bgwrn-respwho{color:#f4efe6} .bgwrn-resp-text{color:#e2d9ca} .bgwrn-resp{border-top-color:rgba(244,239,230,.14)} .bgwrn-ta{background:#2a241f;border-color:rgba(244,239,230,.26);color:#f0e9dd} .bgwrn-ta::placeholder{color:#9a8f7e} .bgwrn-ghost{border-color:rgba(244,239,230,.28);color:#f0e9dd} .bgwrn-mbadge{color:#b8ab98} } :root[data-theme="dark"] .bgwrn-panel{background:#1c1815;color:#f0e9dd;border-left-color:rgba(244,239,230,.16)} :root[data-theme="dark"] .bgwrn-phead{background:#241f1b;border-bottom-color:rgba(244,239,230,.14)} :root[data-theme="dark"] .bgwrn-ptitle,:root[data-theme="dark"] .bgwrn-pclose{color:#f0e9dd} :root[data-theme="dark"] .bgwrn-quote{color:#e6ddce} :root[data-theme="dark"] .bgwrn-respwho{color:#f4efe6} :root[data-theme="dark"] .bgwrn-resp-text{color:#e2d9ca} :root[data-theme="dark"] .bgwrn-resp{border-top-color:rgba(244,239,230,.14)} :root[data-theme="dark"] .bgwrn-ta{background:#2a241f;border-color:rgba(244,239,230,.26);color:#f0e9dd} :root[data-theme="dark"] .bgwrn-ghost{border-color:rgba(244,239,230,.28);color:#f0e9dd} :root[data-theme="dark"] .bgwrn-mbadge{color:#b8ab98}