/* The app rail · Send, Request, Albums, Transfers, Settings, the Mac app.
   One file for every page that shows it (the send page, the manage page),
   so the rail cannot look or behave differently from page to page.
   Every rule carries :not(#_) so a page's own CSS cannot reach in. */
html.collect .krail:not(#_){display:none !important;}
@media (min-width:1024px){ html.request .krail:not(#_){display:none !important;} }
@media (max-width:1023px){ .krail-i:not(#_):active{transform:scale(.985); transition:transform .06s;} }
@media (max-width:1023px){ .krail-i:not(#_){transition:transform .12s ease, background .12s, color .12s;} }
@media (max-width:1023px){ .krail:not(#_){background:rgba(17,17,20,.72) !important; -webkit-backdrop-filter:saturate(160%) blur(22px); backdrop-filter:saturate(160%) blur(22px); border-top:1px solid rgba(255,255,255,.09) !important; padding:0 0 env(safe-area-inset-bottom) !important;} }
@media (max-width:1023px){ .krail-g:not(#_){align-items:stretch;} }
@media (max-width:1023px){ .krail-i:not(#_){position:relative; min-height:56px; padding:9px 0 7px; gap:4px; font-size:10.5px; font-weight:500; letter-spacing:.02em; color:rgba(255,255,255,.55);} }
@media (max-width:1023px){ .krail-i:not(#_)::before{content:""; position:absolute; left:50%; top:0; width:28px; height:2px; background:#DFFF3F; transform:translateX(-50%) scaleX(0); transition:transform .2s ease;} }
@media (max-width:1023px){ .krail-i:not(#_).on{color:#fff;} }
@media (max-width:1023px){ .krail-i:not(#_).on::before{transform:translateX(-50%) scaleX(1);} }
@media (max-width:1023px){ .krail-ico:not(#_){width:auto; height:24px; border-radius:0; background:none !important; box-shadow:none !important; color:inherit !important;} }
@media (max-width:1023px){ .krail-i:not(#_).on .krail-ico{background:none !important; color:#fff !important;} }
@media (max-width:1023px){ .krail-ico:not(#_) svg{width:23px; height:23px;} }
@media (max-width:1023px){ .krail-i:not(#_):active .krail-ico{transform:scale(.94);} }
@media (max-width:1023px){ .krail-n:not(#_){top:2px; right:calc(50% - 26px);} }
@media (max-width:1023px){ .krail:not(#_){height:var(--krail-tab); box-sizing:border-box; align-items:stretch;} }
@media (max-width:1023px){ .krail-g:not(#_){height:56px;} }
@media (max-width:1023px){ .krail-i:not(#_){height:56px; min-height:0; padding:8px 0 0; justify-content:flex-start;} }
@media (max-width:1023px){ .krail-ico:not(#_){height:22px;} }
@media (max-width:1023px){ .krail-ico:not(#_) svg{width:22px; height:22px;} }
@media (max-width:1023px){ .krail-n:not(#_){top:1px; right:calc(50% - 24px); min-width:16px; height:16px; font-size:10px;} }
@media (max-width:1023px){ body.kb .krail:not(#_){display:none !important;} }
.krail:not(#_){position:fixed; left:0; top:0; bottom:0; width:84px; z-index:70; display:flex; flex-direction:column; align-items:center; padding:16px 0 18px; background:linear-gradient(180deg,#141417,#111114); border-right:1px solid rgba(255,255,255,.06);}
.krail-logo:not(#_){display:flex; align-items:center; justify-content:center; width:48px; height:48px; margin-bottom:22px; filter:brightness(1.18); transition:transform .15s;}
.krail-logo:not(#_):hover{transform:translateY(-1px);}
.krail-logo:not(#_) img{width:36px; height:36px; display:block;}
.krail-g:not(#_){display:flex; flex-direction:column; align-items:center; gap:2px; width:100%;}
.krail-i:not(#_){position:relative; width:100%; padding:10px 0 9px; display:flex; flex-direction:column; align-items:center; gap:7px; background:none; border:0; color:rgba(255,255,255,.52); font:inherit; font-size:11px; font-weight:600; letter-spacing:.01em; cursor:pointer; text-decoration:none; -webkit-tap-highlight-color:transparent; transition:color .16s;}
.krail-ico:not(#_){position:relative; width:46px; height:46px; display:flex; align-items:center; justify-content:center;  transition:background .16s, box-shadow .16s, transform .16s;}
.krail-ico:not(#_) svg{width:23px; height:23px; display:block;}
.krail-ico:not(#_) svg *{transform-box:fill-box; transform-origin:center; transition:transform .22s cubic-bezier(.2,.7,.2,1);}
.krail-i:not(#_):hover .kplane, .krail-i:not(#_):focus-visible .kplane{transform:translate(1.2px,-1.2px) rotate(-6deg);}
.krail-i:not(#_):hover .kdrop, .krail-i:not(#_):focus-visible .kdrop{transform:translateY(1.6px);}
.krail-i:not(#_):hover .klines, .krail-i:not(#_):focus-visible .klines{transform:translateY(.8px);}
.krail-i:not(#_):hover .kn1, .krail-i:not(#_):focus-visible .kn1{transform:translateX(4px);}
.krail-i:not(#_):hover .kn2, .krail-i:not(#_):focus-visible .kn2{transform:translateX(-4px);}
.krail-i:not(#_):hover .kn3, .krail-i:not(#_):focus-visible .kn3{transform:translateX(3px);}
.krail-i:not(#_).on .krail-ico svg{animation:kpop .34s cubic-bezier(.2,.7,.2,1);}
@keyframes kpop{0%{transform:scale(.88);} 55%{transform:scale(1.06);} 100%{transform:none;}}
@media (prefers-reduced-motion:reduce){ .krail-ico:not(#_) svg *{transition:none;} }
@media (prefers-reduced-motion:reduce){ .krail-i:not(#_).on .krail-ico svg{animation:none;} }
@media (prefers-reduced-motion:reduce){ .krail-i:not(#_):hover .kplane, .krail-i:not(#_):hover .kdrop, .krail-i:not(#_):hover .klines, .krail-i:not(#_):hover .kn{transform:none;} }
.krail-i:not(#_):hover{color:rgba(255,255,255,.88);}
.krail-i:not(#_):hover .krail-ico{background:rgba(255,255,255,.055);}
.krail-i:not(#_).on{color:#fff;}
.krail-i:not(#_).on .krail-ico{background:rgba(255,255,255,.09); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14), 0 8px 24px -14px rgba(0,0,0,.9);}
.krail-g:not(#_){position:relative;}
.krail-bar:not(#_){position:absolute; left:0; top:0; width:2px; height:46px; background:#DFFF3F; border-radius:0 2px 2px 0; transition:transform .28s cubic-bezier(.2,.8,.2,1), opacity .2s; transform:translateY(10px);}
.krail-i:not(#_):active .krail-ico{transform:scale(.96);}
.krail-i:not(#_):focus-visible{outline:none;}
.krail-i:not(#_):focus-visible .krail-ico{box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);}
.krail-n:not(#_){position:absolute; top:-3px; right:-3px; min-width:17px; height:17px; padding:0 5px; border-radius:9px; background:#DFFF3F; color:#121215; font-size:10.5px; font-weight:700; letter-spacing:0; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px #121214;}
.krail-n:not(#_)[hidden]{display:none;}
.krail-end:not(#_){margin-top:auto; padding-top:16px; color:rgba(255,255,255,.42);}
.krail-end:not(#_)::after{content:""; position:absolute; top:0; left:22px; right:22px; height:1px; background:rgba(255,255,255,.08);}
:root:not(#_){--krail-w:132px;}
@media (min-width:1024px){ .krail:not(#_){width:var(--krail-w); padding:34px 0 28px; background:#F4F4F1; border-right:0; box-shadow:none;} }
@media (min-width:1024px){ .krail-logo:not(#_){width:auto; height:auto; margin-bottom:60px; filter:none;} }
@media (min-width:1024px){ .krail-logo:not(#_) img{width:36px; height:36px;} }
@media (min-width:1024px){ .krail-logo:not(#_):focus-visible{outline:2px solid #1B1B1B; outline-offset:4px;} }
@media (min-width:1024px){ .krail-g:not(#_){gap:28px;} }
@media (min-width:1024px){ .krail-i:not(#_){padding:0; gap:12px; color:#4A4A4A; font-size:14px; font-weight:400; letter-spacing:0; transition:color .12s ease-out;} }
@media (min-width:1024px){ .krail-ico:not(#_){width:64px; height:64px; color:#3A3A3A; background:none; box-shadow:none; transition:background .12s ease-out, color .12s ease-out, transform .16s;} }
@media (min-width:1024px){ .krail-ico:not(#_) svg{width:24px; height:24px; stroke-width:2;} }
@media (min-width:1024px){ .krail:not(#_) .kn{fill:#F4F4F1; transition:fill .12s ease-out;} }
@media (min-width:1024px){ .krail-i:not(#_):hover{color:#1B1B1B;} }
@media (min-width:1024px){ .krail-i:not(#_):hover .krail-ico{background:#E6E6E1; color:#1B1B1B;} }
@media (min-width:1024px){ .krail-i:not(#_):hover .kn{fill:#E6E6E1;} }
@media (min-width:1024px){ .krail-i:not(#_):active .krail-ico{background:#D9D9D3; transform:none;} }
@media (min-width:1024px){ .krail-i:not(#_):active .kn{fill:#D9D9D3;} }
@media (min-width:1024px){ .krail-i:not(#_).on{color:#1B1B1B; font-weight:700;} }
@media (min-width:1024px){ .krail-i:not(#_).on .krail-ico{background:#DFFF3F; color:#1B1B1B; box-shadow:none;} }
@media (min-width:1024px){ .krail-i:not(#_).on .kn{fill:#DFFF3F;} }
@media (min-width:1024px){ .krail-i:not(#_).on:active .krail-ico{background:#CDEB2E;} }
@media (min-width:1024px){ .krail-i:not(#_).on:active .kn{fill:#CDEB2E;} }
@media (min-width:1024px){ .krail-i:not(#_):focus-visible{outline:none;} }
@media (min-width:1024px){ .krail-i:not(#_):focus-visible .krail-ico{outline:2px solid #1B1B1B; outline-offset:2px; box-shadow:none;} }
@media (min-width:1024px){ .krail-bar:not(#_){width:4px; height:64px; background:#1B1B1B; border-radius:0; transform:translateY(0);} }
@media (min-width:1024px){ .krail-n:not(#_){top:-6px; right:-10px; min-width:24px; height:22px; padding:0 6px; border-radius:11px; background:#1B1B1B; color:#DFFF3F; font-size:12px; font-weight:700; box-shadow:0 0 0 2px #F4F4F1; box-sizing:border-box;} }
@media (min-width:1024px){ .krail-dot:not(#_){min-width:0; width:10px; height:10px; padding:0; top:6px; right:6px;} }
@media (min-width:1024px){ .krail-end:not(#_){margin-top:auto; padding-top:15px; gap:12px; color:#6A6A6A; font-size:13px; font-weight:400;} }
@media (min-width:1024px){ .krail-end:not(#_)::after{left:50%; right:auto; width:48px; transform:translateX(-50%); background:#C9C9C4;} }
@media (min-width:1024px){ .krail-end:not(#_) .krail-ico{width:auto; height:auto; color:#5A5A5A; background:none !important;} }
@media (min-width:1024px){ .krail-end:not(#_) .krail-ico svg{width:22px; height:22px;} }
@media (min-width:1024px){ .krail-end:not(#_):hover, .krail-end:not(#_):hover .krail-ico{color:#1B1B1B;} }
@media (min-width:1024px){ .krail-end:not(#_):focus-visible .krail-ico{outline:2px solid #1B1B1B; outline-offset:4px;} }
@media (min-width:1024px){ @media (max-height:780px){ .krail:not(#_){padding:22px 0 18px;} } }
@media (min-width:1024px){ @media (max-height:780px){ .krail-logo:not(#_){margin-bottom:34px;} } }
@media (min-width:1024px){ @media (max-height:780px){ .krail-g:not(#_){gap:16px;} } }
@media (min-width:1024px){ @media (max-height:780px){ .krail-ico:not(#_){width:56px; height:56px;} } }
@media (min-width:1024px){ @media (max-height:780px){ .krail-bar:not(#_){height:56px;} } }
@media (min-width:1024px){ @media (max-height:780px){ .krail-i:not(#_){gap:9px;} } }
.krail-you:not(#_), .krail-more:not(#_){display:none;}
/* the rail's own measures · a page reads them (var(--krail-w), var(--krail-tab)), never sets them */
:root:not(#_){--krail-tab:0px;}
@media (max-width:1023px){ :root:not(#_){--krail-tab:calc(60px + env(safe-area-inset-bottom));} }
@media (max-width:1023px){ .krail:not(#_){position:fixed; top:auto; left:0; right:0; bottom:0; z-index:70; width:auto; flex-direction:row; align-items:stretch; padding:3px 2px calc(2px + env(safe-area-inset-bottom)); border-right:0; border-bottom:0; border-top:1px solid rgba(255,255,255,.08); background:#141417; box-shadow:0 -10px 30px rgba(0,0,0,.35);} }
@media (max-width:1023px){ .krail-logo:not(#_), .krail-bar:not(#_), .krail-end:not(#_){display:none;} }
@media (max-width:1023px){ .krail-g:not(#_){flex:1 1 auto; flex-direction:row; width:100%; justify-content:space-around; gap:0;} }
@media (max-width:1023px){ .krail-i:not(#_){flex:1 1 0; min-width:0; padding:6px 0 4px; gap:3px; font-size:10.5px; font-weight:600; letter-spacing:.01em; color:rgba(255,255,255,.5); min-height:52px;} }
@media (max-width:1023px){ .krail-i:not(#_).on{color:#fff;} }
@media (max-width:1023px){ .krail-i:not(#_).on .krail-ico{background:rgba(223,255,63,.14); box-shadow:none; color:#DFFF3F;} }
@media (max-width:1023px){ .krail-i:not(#_):active .krail-ico{transform:scale(.92);} }
@media (max-width:1023px){ .krail-i:not(#_).on::after{display:none;} }
@media (max-width:1023px){ .krail-i:not(#_)[data-k="settings"], .krail-i:not(#_)[data-k="tools"], .krail-you:not(#_){display:none;} }
@media (max-width:1023px){ .krail-more:not(#_){display:flex;} }
@media (max-width:1023px){ .krail-ico:not(#_){width:52px; height:30px;} }
@media (max-width:1023px){ .krail-ico:not(#_) svg{width:22px; height:22px;} }
@media (max-width:1023px){ .krail-n:not(#_){top:-3px; right:6px;} }
.krail-dot:not(#_){min-width:0; width:8px; height:8px; padding:0; top:4px; right:4px; font-size:0;}
/* the dot on Albums · new photos since the owner last looked (krail.js) */
.krail:not(#_) [data-k="albums"] .krail-ico{position:relative;}
.krail:not(#_) .ka-rdot{position:absolute; top:7px; right:7px; width:9px; height:9px; border-radius:50%; background:#DFFF3F; box-shadow:0 0 0 2px #F4F4F1; pointer-events:none;}
@media (max-width:1023px){ .krail:not(#_) .ka-rdot{top:2px; right:calc(50% - 16px); box-shadow:0 0 0 2px #141414;} }
.krail:not(#_) .krail-i.on .ka-rdot{background:#141414; box-shadow:0 0 0 2px #DFFF3F;}
/* the phone's tab bar has no lime fill under the active tab, so the dot stays a dot */
@media (max-width:1023px){ .krail:not(#_) .krail-i.on .ka-rdot{background:#DFFF3F; box-shadow:0 0 0 2px #141414;} }

/* ---- the phone's top bar (krail.js, send page only) · the mark centred, the account at the right ---- */
.ktop:not(#_){display:none;}
@media (max-width:1023px){
  html.mtoggle:not(.request):not(.collect) .ktop:not(#_){display:flex; position:fixed; top:0; left:0; right:0; z-index:86; height:var(--ktop,44px); padding-top:env(safe-area-inset-top); box-sizing:border-box; align-items:center; justify-content:center; background:#111114; transition:background-color .2s ease, box-shadow .2s ease;}
  html.mtoggle.ktop-s .ktop:not(#_){background:rgba(17,17,20,.82); -webkit-backdrop-filter:saturate(140%) blur(18px); backdrop-filter:saturate(140%) blur(18px); box-shadow:0 .5px 0 rgba(255,255,255,.12);}
  html:has(#ktoolWrap:not([hidden])) .ktop:not(#_), html.minfo .ktop:not(#_){display:none;}
  .ktop:not(#_) .ktop-mark{display:flex; align-items:center; height:44px; padding:0 12px; -webkit-tap-highlight-color:transparent;}
  .ktop:not(#_) .ktop-mark img{display:block; height:20px; width:auto;}
  .ktop:not(#_) .ktop-mark:active{opacity:.6;}
  .ktop:not(#_) .ktop-me{position:absolute; right:8px; bottom:0; height:44px; min-width:44px; padding:0 8px; display:flex; align-items:center; justify-content:center; background:none; border:0; color:#fff; font:inherit; font-size:15px; font-weight:500; letter-spacing:-.1px; cursor:pointer; -webkit-tap-highlight-color:transparent; touch-action:manipulation;}
  .ktop:not(#_) .ktop-me:active{opacity:.6;}
  .ktop:not(#_) .ktop-av{display:none; width:30px; height:30px; border-radius:50%; background:#2A2A2E; color:#fff; font-size:13px; font-weight:600; align-items:center; justify-content:center;}
  .ktop:not(#_) .ktop-me.in .ktop-in{display:none;}
  .ktop:not(#_) .ktop-me.in .ktop-av{display:flex;}
}