/* Grande buttons: one glossy, fully rounded look for every action button on the site.
   Loaded after every other stylesheet. Colors: blue, dark, red and white. Hover and press are smooth, nothing snaps. */
:root{
  --gb-blue-a:#366dff;--gb-blue-b:#0653ff;--gb-blue-edge:#043bde;--gb-blue-hi:#608cff;
  --gb-dark-a:#2b2b2f;--gb-dark-b:#1c1c1f;--gb-dark-edge:#34343a;
  --gb-red-a:#f0575d;--gb-red-b:#cf2a31;--gb-red-edge:#9e1b22;--gb-red-hi:#f89a9e;
  --gb-white-a:#ffffff;--gb-white-b:#dedede;--gb-white-edge:#b9b9b9;
}

/* shape and motion shared by every button */
.btn,.abtn,.cbtn,.dbtn,.dbtn2,.ss-b,.mdl-act>button,.gslot,.dpopen,.sdis,.mpbtn,.xbtn,.runbtn,.urow a,.urow button,.two button{
  border-radius:999px!important;
  transition:filter .22s ease,transform .14s ease,box-shadow .22s ease,opacity .2s ease!important;
  -webkit-tap-highlight-color:transparent;
}

/* blue */
.btn-blue,.abtn.blue,.cbtn,.ss-b.blue,.runbtn,.dbtn2,.mdl-act .abtn.blue{
  color:#fff!important;
  background:linear-gradient(180deg,var(--gb-blue-a) 0%,var(--gb-blue-b) 100%)!important;
  border:1px solid var(--gb-blue-edge)!important;
  box-shadow:inset 0 1px 0 var(--gb-blue-hi),0 1px 2px rgba(0,0,0,.35)!important;
  text-shadow:0 1px 0 rgba(0,20,100,.25);
}

/* dark */
.btn-ghost,.abtn.soft,.abtn.grey,.gslot,.dpopen,.sdis,.mpbtn,.xbtn,.ss-b,.ss-b.soft,.mdl-act .mdl-c,.urow a,.urow button,.two button{
  color:#ececef!important;
  background:linear-gradient(180deg,var(--gb-dark-a) 0%,var(--gb-dark-b) 100%)!important;
  border:1px solid var(--gb-dark-edge)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 2px rgba(0,0,0,.4)!important;
}

/* red */
.abtn.dng,.abtn.red,.ss-b.dng,.mdl-act .abtn.dng{
  color:#fff!important;
  background:linear-gradient(180deg,var(--gb-red-a) 0%,var(--gb-red-b) 100%)!important;
  border:1px solid var(--gb-red-edge)!important;
  box-shadow:inset 0 1px 0 var(--gb-red-hi),0 1px 2px rgba(0,0,0,.35)!important;
  text-shadow:0 1px 0 rgba(90,0,8,.25);
}

/* white */
.btn-white,.dbtn{
  color:#0b0b0b!important;
  background:linear-gradient(180deg,var(--gb-white-a) 0%,var(--gb-white-b) 100%)!important;
  border:1px solid var(--gb-white-edge)!important;
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.35)!important;
}

/* the gloss, hover and press (filters and transforms animate, so there is no snapping) */
.btn:not(:disabled):not([disabled]):hover,.abtn:not(:disabled):not([disabled]):hover,.cbtn:not(:disabled):hover,.dbtn:hover,.dbtn2:hover,.ss-b:not(:disabled):hover,.mdl-act>button:not([disabled]):hover,.gslot:hover,.dpopen:hover,.sdis:hover,.mpbtn:hover,.xbtn:hover,.runbtn:not(:disabled):hover,.urow a:hover,.urow button:hover,.two button:hover{
  filter:brightness(1.12);
}
.btn-white:hover,.dbtn:hover{filter:brightness(.96)}
.btn:not(:disabled):not([disabled]):active,.abtn:not(:disabled):not([disabled]):active,.cbtn:not(:disabled):active,.dbtn:active,.dbtn2:active,.ss-b:not(:disabled):active,.mdl-act>button:not([disabled]):active,.gslot:active,.dpopen:active,.sdis:active,.mpbtn:active,.xbtn:active,.runbtn:not(:disabled):active,.urow a:active,.urow button:active,.two button:active{
  filter:brightness(.94);transform:translateY(1px);
}
.btn:focus-visible,.abtn:focus-visible,.cbtn:focus-visible,.dbtn:focus-visible,.dbtn2:focus-visible,.ss-b:focus-visible,.mdl-act>button:focus-visible,.gslot:focus-visible,.dpopen:focus-visible,.sdis:focus-visible,.mpbtn:focus-visible,.xbtn:focus-visible,.runbtn:focus-visible{
  outline:2px solid rgba(96,140,255,.75);outline-offset:2px;
}
.btn:disabled,.abtn:disabled,.cbtn:disabled,.ss-b:disabled,.runbtn:disabled,.mdl-act>button[disabled]{filter:saturate(.7)}
@media (prefers-reduced-motion:reduce){.btn,.abtn,.cbtn,.dbtn,.dbtn2,.ss-b,.mdl-act>button,.gslot,.dpopen,.sdis,.mpbtn,.xbtn,.runbtn{transition:none!important}}

/* toggles: same glossy blue as the buttons when on, glossy dark when off */
.tg,.ss-sw{
  background:linear-gradient(180deg,#34343a 0%,#1f1f23 100%)!important;
  box-shadow:inset 0 1px 0 #44444b,inset 0 0 0 1px #2c2c32,0 1px 2px rgba(0,0,0,.35)!important;
  transition:background .3s ease,box-shadow .3s ease,filter .2s ease!important;
}
.tg.on,.ss-sw.on{
  background:linear-gradient(180deg,var(--gb-blue-a) 0%,var(--gb-blue-b) 100%)!important;
  box-shadow:inset 0 1px 0 var(--gb-blue-hi),inset 0 0 0 1px var(--gb-blue-edge),0 1px 2px rgba(0,0,0,.35)!important;
}
.tg i,.ss-sw i{
  background:linear-gradient(180deg,#fff 0%,#e3e3e6 100%)!important;
  box-shadow:0 1px 3px rgba(0,0,0,.5),inset 0 -1px 0 rgba(0,0,0,.08)!important;
}
.tg:not(:disabled):hover,.ss-sw:hover{filter:brightness(1.12)}
@media (prefers-reduced-motion:reduce){.tg,.ss-sw{transition:none!important}}