/* Cookie choice for visitors from the UK, the EEA and Switzerland (templates/_consent.html, static/js/consent.js).
   Self-contained: it sits on the homepage, the lander, the sign-in screens, the classic site and the app, each with its
   own styles, so it brings its own tokens (graphite, like the app's toasts; light and dark).
   Two places, one look (v2.23.0):
   - data-place="top": in the page flow above everything on sign up, log in, password reset, invite and the lander. It
     pushes the page down, so it never sits on a field or a button, and scrolls away with the page.
   - data-place="bottom": everywhere else, a slim bar fixed at the bottom (above the app's tab bar on phones, see
     consent.js). consent.js puts its height in --rpl-cb on <html>; .rpl-cb-gap and the bottom-docked parts of the
     pages (chat button, homepage button, page-pick bar, save bar, toasts) move up by it.
   Layers: under popovers (40), drawers (54/55), toasts (70) and modals (80); over the tab bar and headers (20), the
   homepage button (30) and the chat button (32/33). One row on a 390 px phone, two 44 px buttons. */
.rpl-cb{
  --cb-bg:#15171A; --cb-ink:#F2F3F5; --cb-ink-2:#B4B8BF; --cb-line:rgba(255,255,255,.07);
  --cb-btn:rgba(255,255,255,.11); --cb-btn-hover:rgba(255,255,255,.17); --cb-btn-ink:#F2F3F5;
  --cb-ok:#F2F3F5; --cb-ok-hover:#FFFFFF; --cb-ok-ink:#0B0D12;
  --cb-focus:#D6FF3F; --cb-sel:rgba(214,255,63,.32);
  --cb-gut:max(16px, calc((100% - 1160px) / 2));
  box-sizing:border-box;display:flex;align-items:center;gap:8px 16px;
  margin:0;padding:10px max(var(--cb-gut), env(safe-area-inset-right, 0px)) 10px max(var(--cb-gut), env(safe-area-inset-left, 0px));
  background:var(--cb-bg);color:var(--cb-ink-2);
  font:400 14px/1.4 "Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  letter-spacing:0;text-align:start;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .rpl-cb{
    --cb-bg:#1C1C1E; --cb-ink:#F5F5F7; --cb-ink-2:#AEAEB2; --cb-line:rgba(255,255,255,.09);
    --cb-btn:rgba(255,255,255,.1); --cb-btn-hover:rgba(255,255,255,.16); --cb-btn-ink:#F5F5F7;
    --cb-ok:#F5F5F7; --cb-ok-ink:#000000;
  }
}
:root[data-theme="dark"] .rpl-cb{
  --cb-bg:#1C1C1E; --cb-ink:#F5F5F7; --cb-ink-2:#AEAEB2; --cb-line:rgba(255,255,255,.09);
  --cb-btn:rgba(255,255,255,.1); --cb-btn-hover:rgba(255,255,255,.16); --cb-btn-ink:#F5F5F7;
  --cb-ok:#F5F5F7; --cb-ok-ink:#000000;
}
.rpl-cb[hidden]{display:none}
.rpl-cb *,.rpl-cb *::before,.rpl-cb *::after{box-sizing:border-box}
.rpl-cb ::selection{background:var(--cb-sel);color:var(--cb-ink)}
.rpl-cb:focus{outline:none}
.rpl-cb:focus-visible{outline:2px solid var(--cb-focus);outline-offset:-4px}

.rpl-cb p{margin:0;flex:1 1 auto;min-width:0}
.rpl-cb p b{color:var(--cb-ink);font-weight:600}
.rpl-cb-more{display:none}
.rpl-cb a{color:var(--cb-ink);font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.4);white-space:nowrap;border-radius:4px;transition:text-decoration-color .15s ease}
.rpl-cb a:hover{text-decoration-color:currentColor}
.rpl-cb a:focus-visible{outline:2px solid var(--cb-focus);outline-offset:2px}

.rpl-cb-b{display:flex;gap:8px;flex:none;margin-inline-start:auto}
.rpl-cb button{
  display:inline-flex;align-items:center;justify-content:center;min-height:36px;margin:0;padding:0 14px;
  border:0;border-radius:10px;cursor:pointer;white-space:nowrap;
  font-family:inherit;font-size:14px;font-weight:600;line-height:1;letter-spacing:0;
  background:var(--cb-btn);color:var(--cb-btn-ink);-webkit-tap-highlight-color:transparent;
  transition:background-color .15s ease,transform .15s cubic-bezier(.32,.72,0,1);
}
.rpl-cb button:hover{background:var(--cb-btn-hover)}
.rpl-cb button.ok{background:var(--cb-ok);color:var(--cb-ok-ink)}
.rpl-cb button.ok:hover{background:var(--cb-ok-hover)}
.rpl-cb button:active{transform:scale(.97)}
.rpl-cb button:focus-visible{outline:2px solid var(--cb-focus);outline-offset:2px}

/* top: in the page flow, scrolls away with the page */
.rpl-cb[data-place="top"]{position:relative;box-shadow:inset 0 -1px 0 var(--cb-line)}

/* bottom: fixed, slides up once; the page makes room (.rpl-cb-gap) */
.rpl-cb[data-place="bottom"]{
  position:fixed;left:0;right:0;bottom:0;z-index:36;
  padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  box-shadow:inset 0 1px 0 var(--cb-line),0 -12px 32px -16px rgba(11,13,18,.45);
  animation:rpl-cb-up .42s cubic-bezier(.32,.72,0,1) both;
}
.rpl-cb[data-place="bottom"][data-docked]{padding-bottom:10px}
@keyframes rpl-cb-up{from{transform:translateY(100%)}to{transform:none}}
.rpl-cb-gap{display:block;height:0}
.rpl-cb-on .rpl-cb-gap{height:var(--rpl-cb, 0px)}

/* the full sentence where there is room for it on one line */
@media (min-width:1080px){.rpl-cb-more{display:inline}}

/* phones (and any touch screen): one row, thumb-sized buttons */
@media (max-width:640px), (pointer:coarse){
  .rpl-cb button{min-height:44px}
}
@media (max-width:640px){
  .rpl-cb{gap:12px;padding-top:6px;padding-bottom:6px;font-size:13px;line-height:1.3}
  .rpl-cb[data-place="bottom"]{padding-bottom:calc(6px + env(safe-area-inset-bottom, 0px))}
  .rpl-cb[data-place="bottom"][data-docked]{padding-bottom:6px}
  .rpl-cb-b{gap:6px}
  .rpl-cb button{padding:0 12px;font-size:13px}
}
/* small phones (360 px Androids): a little tighter, still one row */
@media (max-width:380px){
  .rpl-cb{--cb-gut:12px;gap:10px}
  .rpl-cb button{padding:0 10px}
}
/* very narrow phones: the buttons share a row under the text */
@media (max-width:339px){
  .rpl-cb{flex-wrap:wrap}
  .rpl-cb p{flex-basis:100%}
  .rpl-cb-b{width:100%}
  .rpl-cb button{flex:1}
}
@media (prefers-reduced-motion: reduce){
  .rpl-cb[data-place="bottom"]{animation:none}
  .rpl-cb button{transition:none}
  .rpl-cb button:active{transform:none}
}